@axel669/windstorm 1.0.0-beta.2 → 1.0.0-beta.3

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/ws-es5.js +1 -1
  2. package/dist/ws-esm.js +1 -1
  3. package/package.json +1 -1
package/dist/ws-es5.js CHANGED
@@ -15,7 +15,7 @@ var ws=function(e){"use strict";const t=Symbol("no match"),r=(e,r)=>{const o=r=>
15
15
  ! & ws-modal[open] > ws-drawer {
16
16
  tf: translateX(0%);
17
17
  }
18
- `;const x={},v=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${v(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),w=(e,t="ws.user")=>p(e,t),y=h.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;c("#theme.base")`font:@font;@sub-pixel-offset:${k?1:0}px;@z-info:5;@z-cover:25;@z-notif:50;@z-layer:100;@base-radius:4px;@anim-time:250ms;@short-anim-time:150ms;@text-size-normal:15px;@text-size-title:calc(@text-size-normal * 2);@text-size-header:calc(@text-size-normal * 1.5);@text-size-subtitle:calc(@text-size-normal * 0.9);@text-size-info:calc(@text-size-normal * 0.75);@color:@mono;@page-text-color:hsl(@color, @layer-text);bg.c:hsl(@color, @layer-bg);t.c:@page-text-color;t.sz:@text-size-normal;`,c("#theme.tron")`#theme.base;@font:Tektur;@mono:0, 0%;@primary:184, 80%;@accent:160, 80%;@info:208, 80%;@success:130, 80%;@warning:58, 80%;@error:4, 80%;@layer-bg:15%;@layer-surface:5%;@layer-element:60%;@layer-container:10%;@layer-border:25%;@layer-text:95%;@layer-fill:5%;@shadow-color:hsla(0, 0%, 100%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);*color-scheme:dark;`,c("#theme.dark")`#theme.base;@font:Roboto;@mono:0, 0%;@primary:184, 80%;@accent:160, 80%;@info:208, 80%;@success:130, 80%;@warning:58, 80%;@error:4, 80%;@layer-bg:20%;@layer-surface:10%;@layer-element:50%;@layer-container:15%;@layer-border:30%;@layer-text:90%;@layer-fill:10%;@shadow-color:hsla(0, 0%, 100%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);*color-scheme:dark;`,c("#theme.light")`#theme.base;@font:Roboto;@mono:0, 0%;@primary:184, 70%;@accent:160, 85%;@info:208, 85%;@success:130, 90%;@warning:58, 85%;@error:4, 80%;@layer-bg:85%;@layer-surface:95%;@layer-element:37.5%;@layer-container:90%;@layer-border:80%;@layer-text:10%;@layer-fill:95%;@shadow-color:hsla(0, 0%, 20%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);`;var z=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(!0)};p("ws-circle-spinner, ws-hexagon-spinner")`@size:100px;w:@size;h:@size;disp:inline-block;`;const $=z`<style>:host {--color:var(--primary);--core-color:hsl(var(--color), var(--layer-element));--alt-color:hsl(var(--color), var(--layer-border));--size:200px;}svg {width:var(--size);height:var(--size);}@keyframes turn {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}circle {animation-name:turn;animation-duration:calc(1000ms * var(--n));animation-iteration-count:infinite;animation-timing-function:ease;stroke:var(--c);stroke-width:6;fill:none;animation-direction:var(--anim);}</style><svg viewbox="-50 -50 100 100"><circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle><circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle><circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle></svg>`;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});const A=z`<style>:host {--color:var(--primary);--core-color:hsl(var(--color), var(--layer-element));--alt-color:hsl(var(--color), var(--layer-border));--size:200px;}svg {width:var(--size);height:var(--size);}circle {stroke-width:0;fill:var(--c);offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45");animation-name:mover;animation-duration:3000ms;animation-iteration-count:infinite;animation-timing-function:linear;}@keyframes mover {0% {offset-distance:0%;}100% {offset-distance:100%;}}@keyframes trail {0% {stroke-dashoffset:0;}100% {stroke-dashoffset:var(--len);}}path {animation-name:trail;animation-duration:3000ms;animation-iteration-count:infinite;animation-timing-function:linear;stroke:var(--c);stroke-width:6;fill:none;animation-direction:var(--anim);}</style><svg viewbox="-50 -50 100 100"><pathd="M 0 -36 L 31 -18 L 31 18 L 0 36 L -31 18 L -31 -18 L 0 -36 Z"style="--c:var(--alt-color); --len:216;"stroke-dasharray="36 36"/><pathd="M 0 -22.5 L 19.5 -11.25 L 19.5 11.25 L 0 22.5 L -19.5 11.25 L -19.5 -11.25 L 0 -22.5 Z"style="--c:var(--core-color); --anim:reverse; --len:135;"stroke-dasharray="22.5 22.5"/><circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/><circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /><circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /></svg>`;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(A())}});var L=(e,t)=>`@core:${e};@alt:${t};@core-color:hsl(@color, @core);@alt-color:hsl(@color, @alt);@fill:var(--fill-color, transparent);@text:var(--text-color, @core-color);@active:@text;`;p("ws-avatar")`@color:@mono;@size:36px;${L("@layer-element","@layer-fill")}disp:inline-flex;over:hidden;r:500px;fl.cross:center;fl.main:center;w:@size;h:@size;bg.c:@fill;t.c:@text;v.a:text-bottom;! & > img {w:100%;}! & > object {w:100%;h:100%;disp:flex;fl.cross:center;fl.main:center;}`,p("ws-badge")`@color:@primary;${L("@layer-element","@layer-fill")}pos:relative;disp:inline-grid;over:visible;! &::after {pos:absolute;*content:attr(ws-text);-x:-10px;y:0px;tf:translateY(-50%);bg.c:@core-color;*pointer-events:none;r:20px;p:4px;w.min:20px;h:20px;*box-sizing:border-box;t.a:center;t.sz:@text-size-subtitle;t.c:@alt-color;t.lh:14px;z:@z-info;t.wt:600;}`;var E='over:hidden;pos:relative;cur:pointer;! &::after {*content:"";pos:absolute;y:0px;x:0px;-y:0px;-x:0px;*pointer-events:none;o:0;bg.c:@active;tr:opacity @anim-time linear;}! &:where(:not(:disabled)):active::after {tr:none;o:0.3;}',S='over:hidden;pos:relative;! |pointer:fine| {! &::before {*content:"";pos:absolute;y:0px;x:0px;-y:0px;-x:0px;*pointer-events:none;o:0;bg.c:@active;}! &:where(:not(:disabled)):hover::before {tr:none;o:0.1;}}';p(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")`@color:@primary;${L("@layer-element","@layer-fill")}pos:relative;b:0px solid @core-color;font:@font;t.c:@text;bg.c:@fill;r:@base-radius;cur:pointer;p:8px 16px;over:hidden;*user-select:none;disp:inline-flex;fl.cross:center;fl.main:center;t.deco:none;t.wt:500;! &:disabled {cur:default;*filter:saturate(30%) brightness(0.7);}${S}${E}`,p("ws-chip")`@color:@mono;${L("@layer-element","@layer-fill")}disp:inline-flex;fl.cross:center;fl.main:center;r:100px;p:4px 12px;*user-select:none;v.a:text-bottom;t.c:@text-color;bg:@fill-color;b:1px solid @core-color;! &[clickable] {cur:pointer;${E}}`,p("label[control][data-ws]")`@color:@primary;@active:@mono;pos:relative;disp:inline-grid;gr.areas:"label label label" "start control end" "extra extra extra";gr.rows:minmax(0px, min-content) auto minmax(0px, min-content);gr.cols:minmax(0px, min-content) auto minmax(0px, min-content);*user-select:none;over:hidden;b:0px solid hsl(@color, @layer-border);bg.c:hsl(@active, @layer-container);r:@base-radius;! &:focus-within {@active:@color;}! &:has(:not(button):disabled) {*filter:saturate(50%) brightness(0.7);}! & > :is(input, select, ws-select, textarea) {area:control;b.w:0px;@color:inherit;! &:focus {outln:none;}}! & > :where(input, textarea) {t.c:hsl(@mono, @layer-text);font:@font;h.min:28px;w:100%;h:100%;p:4px;bg.c:transparent;w.min:16px;}! & > :where(input[type="file"]) {pos:relative;p:0px;! &::file-selector-button {font:@font;h:100%;m:0px;m.r:4px;p:4px;t.c:hsl(@color, @layer-element);bg.c:transparent;b.w:0px;t.deco:underline;}}! & > [label-text] {area:label;p:4px;disp:flex;fl.dir:column;fl.cross:start;t.c:hsl(@color, @layer-element);t.ws:nowrap;t.sz:@text-size-normal;}`,m("caret-right-filled"),p(":where(details[data-ws])")`@color:@primary;@padding:8px;${L("@layer-element","@layer-fill")}b:0px solid @core-color;p:0px @padding;r:4px;over:hidden;! &:open {p.b:@padding;}! & > summary {t.c:@core-color;pos:relative;p:4px;p.l:24px;m.x:calc(-1 * @padding);cur:pointer;*user-select:none;! &::before {pos:absolute;x:0px;y:50%;-y:0px;w:1em;disp:flex;fl.cross:center;fl.main:center;font:ws-icon-caret-right-filled;*speak:none;t.st:normal;t.wt:400;t.var:normal;t.tf:none;*content:"caret-right-filled";tf:translateY(-50%);tr:transform 100ms linear;w:24px;h:24px;t.lh:24px;t.sz:18px;}! &::marker, &::-webkit-details-marker {*content:"";disp:none;}}! &:open > summary::before {tf:translateY(-50%) rotate(90deg);}`,p("ws-dialog")`pos:absolute;x:50%;y:50%;tf:translate(-50%, -50%);`,p("ws-drawer")`pos:absolute;x:0px;y:0px;-y:0px;disp:grid;`,p("ws-flex")`flex:column;gap:8px;p:8px;over:hidden;! & > * {fl.shrink:0;}`,p("ws-grid")`disp:grid;over:hidden;gap:8px;p:8px;gr.rows.a:min-content;`,p("ws-icon")`disp:var(--icon-font, none);t.lh:1;! &::before {disp:inline-block;font:@icon-font;*-webkit-font-smoothing:antialiased;*-moz-osx-font-smoothing:grayscale;*content:attr(data-icon);m.t:2px;}`,p("a[data-ws]:not([button])")`@color:@primary;t.c:hsl(@color, @layer-element);! &:visited, &:hover {t.c:hsl(@color, @layer-element);}! &[disabled] {*pointer-events:none;*filter:saturation(30%) brightness(0.7);}`;const q=z`<style>:host {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background-color:var(--modal-color);z-index:var(--z-cover);transition:var(--modal-transition, none);}ws-modal-overlay {position:absolute;inset:0px;}ws-modal-overlay:focus {outline:none;}:host(:not([open])) {visibility:hidden;}:host([clear]) {background-color:transparent;}</style><ws-modal-overlay></ws-modal-overlay><slot></slot>`;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),p("ws-paper")`@color:@mono;${L("@layer-surface","@layer-border")}disp:grid;r:@base-radius;over:hidden;gr.cols:1fr;gr.rows:min-content auto min-content;gr.areas:"header" "content" "footer";bg.c:@core-color;b.c:@alt-color;! & > :where(*) {area:content;}! &::before {*content:"";area:header;z:-1;}! &::after {*content:"";area:footer;z:-1;}`;const M=z`<slot></slot><ws-modal><ws-popover-position><slot name="popover"></slot></ws-popover-position></ws-modal>`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(M()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const C=z`<style>@keyframes busy-load {from {transform:translateX(-100%);}to {transform:translateX(400%);}}:host {display:block;height:8px;border-radius:var(--base-radius);background-color:hsl(var(--mono), var(--layer-border));position:relative;overflow:hidden;--color:var(--mono);}div::before, div::after {content:"";position:absolute;top:0px;left:0px;height:100%;--range:calc(var(--max, 1) - var(--min, 0));--bar-width:calc(100% * var(--value, 0) / var(--range));--buffer-width:calc(100% * var(--buffer, 0) / var(--range));}div::before {background-color:hsl(var(--color), var(--layer-element));}div::after {opacity:0.3;background-color:hsl(var(--color), var(--layer-element));}:host(:not([busy])) div::before {width:var(--bar-width);}:host(:not([busy])) div::after {width:var(--buffer-width);}:host([busy]) div::before {width:25%;animation-name:busy-load;animation-iteration-count:infinite;animation-duration:2s;}</style><div></div>`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(C()),this.#r=e.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",e)}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),p("ws-screen")`@screen-width:min(720px, 100%);@pad-x:auto;@pad-y:auto;@pad-left:var(--pad-x, auto);@pad-right:var(--pad-x, auto);@pad-top:var(--pad-y, auto);@pad-bottom:var(--pad-y, auto);disp:grid;h:round(down, calc(100% - @sub-pixel-offset), 1px);w:calc(100%);over:hidden;pos:absolute;y:0px;x:0px;gr.cols:@pad-left @screen-width @pad-right;gr.rows:@pad-top 1fr @pad-bottom;gr.areas:"tl t tr""l content r""bl b br";! & > :where(*) {area:content;}`;const I="caret-down-filled";m(I),p("ws-option")`${L("@layer-element","@layer-fill")}disp:block;p:8px;*pointer-events:auto;t.c:@text-color-normal;w.min:fit-content;! &[selected] {bg.c:@core-color;t.c:@alt-color;}! & * {*pointer-events:none;}${S}${E}`,p("ws-optgroup")`grid;gr.cols:16px 1fr;*pointer-events:none;! &::before {*content:attr(label);disp:block;p:8px;col:1 / -1;bg.c:hsl(@color, @layer-container);}! & > * {col:2;}`;const T=z`<style>:host {--color:var(--mono);--modal-color:transparent;--max-height:250px;--core-color:hsl(var(--color), var(--layer-border));--alt-color:hsl(var(--color), var(--layer-surface));display:inline-grid;grid-template-rows:1fr 0px;user-select:none;cursor:default;position:relative;border:1px solid var(--core-color);border-radius:var(--base-radius);padding:4px;}slot[name=options] {display:block;overflow:visible;}ws-options {box-sizing:border-box;border:1px solid var(--core-color);border-radius:var(--base-radius);color:hsl(var(--mono), var(--layer-text));display:grid;position:absolute;max-height:var(--max-height);overflow:auto;background-color:var(--alt-color);grid-template-columns:1fr;border-radius:var(--base-radius);box-shadow:0px 2px 4px var(--shadow-color);opacity:0;transform:translateY(10px);visibility:none;transition:opacity var(--anim-time) ease-out,transform var(--anim-time) ease-out,visibility var(--anim-time) ease-out;--sign:sign(var(--y) - 100vh + var(--opt-h));--pos:calc(var(--y)- calc(max(var(--sign), 0)* (var(--opt-h) - var(--h))));top:var(--pos);left:var(--x);width:var(--w);transform-origin:top center;}:host([open]) ws-options {transform:translateY(0);opacity:1;visibility:visible;}value-display {display:grid;user-select:none;grid-template-columns:1fr min-content;height:100%;}value-display:focus {outline:none;}ws-sel-caret {display:flex;align-items:center;justify-content:center;padding:4px;padding-right:0px;width:24px;}ws-sel-caret::before {display:block;font-family:ws-icon-${I};content:attr(data-icon);}slot[name="selected"] {display:none;}slot[name="display"] {display:flex;align-items:center;}:host(:focus:not(:disabled)) {outline-style:auto;outline-width:1px;}ws-popover {--anim-time:unset;}:host(:disabled) {filter:saturate(50%) brightness(0.8);}</style><value-display tabindex="0"><slot name="selected"><ws-selected>No Selection</ws-selected></slot><slot name="display"></slot><ws-sel-caret data-icon="${I}"></ws-sel-caret></value-display><ws-popover><slot slot="popover" name="options"><ws-options><slot></slot></ws-options></slot></ws-popover>`,V="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(V)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===V)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===V&&!0===e.hasAttribute("selected")))??this.#i,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r),this.updatePreview()}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open"),this.display=document.createElement("ws-display"),this.display.slot="display"}connectedCallback(){this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#n.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),p("table[data-ws]")`@color:@primary;*border-collapse:separate;*border-spacing:0px;b.s:solid;b.c:hsl(@color, @layer-border);b.b.w:1px;! & th {bg.c:hsl(@color, @layer-container);}! & :is(th, td:not(:empty)) {b.s:solid;b.c:hsl(@color, @layer-border);b.b.w:1px;p:4px;}! & tbody tr:last-child :is(td, th) {b.b.w:0px;}! &[sticky-header] thead {pos.stick;y:0px;z:+2;}! &[sticky-header] th:first-child {pos.stick;z:+1;x:0px;-x:0px;}`,p("ws-text")`! &[title] {t.sz:@text-size-title;disp:flex;fl.dir:column;p:0px 8px;fl.cross:start;fl.main:center;}! &[header] {t.sz:@text-size-header;disp:flex;fl.dir:column;p:0px 8px;fl.cross:start;fl.main:center;}! &[subtitle] {disp:inline-block;t.sz:@text-size-subtitle;p:0px 8px;}! &[info] {disp:inline-block;t.sz:@text-size-info;}`,p("ws-tabs")`@color:@primary;${L("@layer-element","@layer-fill")}disp:grid;gr.cols.a:1fr;gr.rows.a:1fr;gr.flow:column;*user-select:none;gap:4px;`,p("label[tab]")`@fill:transparent;@text:@core-color;@active:@core-color;bg.c:@fill;t.c:@text;grid;gr.cols:1fr;gr.rows:min-content 2px;gr.areas:"content" "border";pos:relative;! & > input[type="radio"] {hide;}! & > :where(*) {area:content;flex;fl.cn;p:8px;}! &::before {*content:"";pos:absolute;-y:0px;x:0px;w:100%;h:2px;area:border;}! &:has(input[type="radio"]:checked) {@fill:var(--fill-color, transparent);@text:var(--text-color, @core-color);@active:unset;! &::before {bg.c:@core-color;}}${E}`,p("ws-titlebar")`@border-size:2px;@color:@primary;${L("@layer-element","@layer-fill")}disp:grid;h.min:52px;gr.cols:auto 1fr auto;gr.areas:"menu title action";*user-select:none;pos:relative;p:0px 2px;t.c:@text;bg.c:@fill;b.y:@border-size solid @core-color;! & > :where(*) {area:title;}`,p("ws-toast")`@color:@primary;t.c:@page-text-color;bg.c:hsl(@color, @layer-surface);pos:relative;disp:inline-grid;gr.cols:auto 1fr auto;gr.areas:"start content end";r:@base-radius;*user-select:none;b:2px solid hsl(@color, @layer-element);h.min:32px;z:+0;! & > :where(*) {area:content;}! &::before, &::after {*content:"";w.min:20px;bg.c:hsl(@color, @layer-element);z:-1;}! &::before {area:start;}! &::after {area:end;}! & > [notif-text] {disp:flex;fl.dir:column;fl.main:center;p:4px;}! & > :not([notif-text]) {t.c:hsl(@mono, @layer-fill);@color:inherit;variant.fill;}`,p("ws-toaster")`pos:fixed;z:var(--z-notif);disp:grid;gr.cols:fr;p:0px;gap:8px;h:min-content;w:280px;! &[pos^="top-"] {y:20px;}! &[pos^="center-"] {y:50%;tf:translateY(-50%);}! &[pos^="bottom-"] {-y:20px;}! &[pos$="-left"] {x:20px;}! &[pos$="-center"] {x:50%;tf:translateX(-50%);}! &[pos$="-right"] {-x:20px;}`,m("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const j='@color:var(--toggle-color, @primary);@size:20px;@core-color:hsl(@color, @layer-element);pos:relative;w:@size;h:@size;appr:none;m:0px;t.c:@core-color;v.a:middle;! &::after {*content:"";pos:absolute;t.sz:calc(@size - 2px);*speak:none;t.st:normal;t.wt:400;t.var:normal;t.tf:none;y:50%;x:50%;w:@size;h:@size;tf:translate(-50%, -50%);disp:flex;fl.cross:center;fl.main:center;over:hidden;}';p(":where(input[data-ws][type=checkbox]:not([switch]))")`${j}! &::after {font:ws-icon-square-dashed;*content:"square-dashed";}! &:checked::after {font:ws-icon-square-check-filled;*content:"square-check-filled";}`,p(":where(input[data-ws][type=radio])")`${j}! &::after {font:ws-icon-circle;*content:"circle";}! &:checked::after {font:ws-icon-circle-check-filled;*content:"circle-check-filled";}`,p(":where(input[data-ws][type=checkbox][switch])")`@color:@primary;@size:20px;@anim-time:100ms;appr:none;m:0px;pos:relative;w:calc(@size * 2);h:@size;v.a:middle;! &::before {*content:"";pos:absolute;inset:calc(@size / 4);b:1px solid @color;r:calc(@size / 2);bg.c:hsl(@color, @layer-element);o:0.5;tr:background-color @anim-time linear;}! &::after {*content:"";pos:absolute;w:@size;h:@size;y:0px;x:0px;tr:left @anim-time linear, background-color @anim-time linear;bg.c:hsl(@mono, @layer-element);r:@size;}! &:checked::after {x:@size;bg.c:hsl(@color, @layer-element);}`,p("label[data-ws][toggle]")`@color:@primary;@active:@mono;pos:relative;*user-select:none;over:hidden;b:0px solid hsl(@color, @layer-border);bg.c:hsl(@active, @layer-container);r:@base-radius;p:4px;disp:flex;fl.main:space-between;! &:focus-within {@active:@color;}! & > input {@color:inherit;! &:focus {outln:none;}}! &:has(:not(button):disabled) {*filter:saturate(50%) brightness(0.7);}`,p("ws-tooltip")`@color:@mono;pos.rel;disp:inline-grid;! &[pos]:hover::before {*content:attr(text);pos.abs;p:4px;bg.c:hsl(@color, @layer-container);b:1px solid hsl(@color, @layer-border);t.ws:nowrap;r:4px;z:+1;}! &[pos="top"]:hover::before {-y:calc(100% + 8px);x:50%;tf:translateX(-50%);}! &[pos="bottom"]:hover::before {y:calc(100% + 8px);x:50%;tf:translateX(-50%);}! &[pos="left"]:hover::before {-x:calc(100% + 8px);y:50%;tf:translateY(-50%);}! &[pos="right"]:hover::before {x:calc(100% + 8px);y:50%;tf:translateY(-50%);}`,p("*")`
18
+ `;const x={},v=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${v(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),w=(e,t="ws.user")=>p(e,t),y=h.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;c("#theme.base")` font:@font; @sub-pixel-offset:${k?1:0}px; @z-info:5; @z-cover:25; @z-notif:50; @z-layer:100; @base-radius:4px; @anim-time:250ms; @short-anim-time:150ms; @text-size-normal:15px; @text-size-title:calc(@text-size-normal * 2); @text-size-header:calc(@text-size-normal * 1.5); @text-size-subtitle:calc(@text-size-normal * 0.9); @text-size-info:calc(@text-size-normal * 0.75); @color:@mono; @page-text-color:hsl(@color, @layer-text); bg.c:hsl(@color, @layer-bg); t.c:@page-text-color; t.sz:@text-size-normal; `,c("#theme.tron")` #theme.base; @font:Tektur; @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%; @layer-bg:15%; @layer-surface:5%; @layer-element:60%; @layer-container:10%; @layer-border:25%; @layer-text:95%; @layer-fill:5%; @shadow-color:hsla(0, 0%, 100%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.25); *color-scheme:dark; `,c("#theme.dark")` #theme.base; @font:Roboto; @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%; @layer-bg:20%; @layer-surface:10%; @layer-element:50%; @layer-container:15%; @layer-border:30%; @layer-text:90%; @layer-fill:10%; @shadow-color:hsla(0, 0%, 100%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.25); *color-scheme:dark; `,c("#theme.light")` #theme.base; @font:Roboto; @mono:0, 0%; @primary:184, 70%; @accent:160, 85%; @info:208, 85%; @success:130, 90%; @warning:58, 85%; @error:4, 80%; @layer-bg:85%; @layer-surface:95%; @layer-element:37.5%; @layer-container:90%; @layer-border:80%; @layer-text:10%; @layer-fill:95%; @shadow-color:hsla(0, 0%, 20%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.25); `;var z=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(!0)};p("ws-circle-spinner, ws-hexagon-spinner")` @size:100px; w:@size; h:@size; disp:inline-block; `;const $=z` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } @keyframes turn { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } circle { animation-name:turn; animation-duration:calc(1000ms * var(--n)); animation-iteration-count:infinite; animation-timing-function:ease; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle> <circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle> <circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle> </svg> `;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});const A=z` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } circle { stroke-width:0; fill:var(--c); offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45"); animation-name:mover; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes mover { 0% { offset-distance:0%; } 100% { offset-distance:100%; } } @keyframes trail { 0% { stroke-dashoffset:0; } 100% { stroke-dashoffset:var(--len); } } path { animation-name:trail; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <path d="M 0 -36 L 31 -18 L 31 18 L 0 36 L -31 18 L -31 -18 L 0 -36 Z" style="--c:var(--alt-color); --len:216;" stroke-dasharray="36 36" /> <path d="M 0 -22.5 L 19.5 -11.25 L 19.5 11.25 L 0 22.5 L -19.5 11.25 L -19.5 -11.25 L 0 -22.5 Z" style="--c:var(--core-color); --anim:reverse; --len:135;" stroke-dasharray="22.5 22.5" /> <circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/> <circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /> <circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /> </svg> `;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(A())}});var L=(e,t)=>` @core:${e}; @alt:${t}; @core-color:hsl(@color, @core); @alt-color:hsl(@color, @alt); @fill:var(--fill-color, transparent); @text:var(--text-color, @core-color); @active:@text; `;p("ws-avatar")` @color:@mono; @size:36px; ${L("@layer-element","@layer-fill")} disp:inline-flex; over:hidden; r:500px; fl.cross:center; fl.main:center; w:@size; h:@size; bg.c:@fill; t.c:@text; v.a:text-bottom; ! & > img { w:100%; } ! & > object { w:100%; h:100%; disp:flex; fl.cross:center; fl.main:center; } `,p("ws-badge")` @color:@primary; ${L("@layer-element","@layer-fill")} pos:relative; disp:inline-grid; over:visible; ! &::after { pos:absolute; *content:attr(ws-text); -x:-10px; y:0px; tf:translateY(-50%); bg.c:@core-color; *pointer-events:none; r:20px; p:4px; w.min:20px; h:20px; *box-sizing:border-box; t.a:center; t.sz:@text-size-subtitle; t.c:@alt-color; t.lh:14px; z:@z-info; t.wt:600; } `;var E=' over:hidden; pos:relative; cur:pointer; ! &::after { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; tr:opacity @anim-time linear; } ! &:where(:not(:disabled)):active::after { tr:none; o:0.3; } ',S=' over:hidden; pos:relative; ! |pointer:fine| { ! &::before { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; } ! &:where(:not(:disabled)):hover::before { tr:none; o:0.1; } } ';p(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")` @color:@primary; ${L("@layer-element","@layer-fill")} pos:relative; b:0px solid @core-color; font:@font; t.c:@text; bg.c:@fill; r:@base-radius; cur:pointer; p:8px 16px; over:hidden; *user-select:none; disp:inline-flex; fl.cross:center; fl.main:center; t.deco:none; t.wt:500; ! &:disabled { cur:default; *filter:saturate(30%) brightness(0.7); } ${S} ${E} `,p("ws-chip")` @color:@mono; ${L("@layer-element","@layer-fill")} disp:inline-flex; fl.cross:center; fl.main:center; r:100px; p:4px 12px; *user-select:none; v.a:text-bottom; t.c:@text-color; bg:@fill-color; b:1px solid @core-color; ! &[clickable] { cur:pointer; ${E} } `,p("label[control][data-ws]")` @color:@primary; @active:@mono; pos:relative; disp:inline-grid; gr.areas:"label label label" "start control end" "extra extra extra"; gr.rows:minmax(0px, min-content) auto minmax(0px, min-content); gr.cols:minmax(0px, min-content) auto minmax(0px, min-content); *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius; ! &:focus-within { @active:@color; } ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); } ! & > :is(input, select, ws-select, textarea) { area:control; b.w:0px; @color:inherit; ! &:focus { outln:none; } } ! & > :where(input, textarea) { t.c:hsl(@mono, @layer-text); font:@font; h.min:28px; w:100%; h:100%; p:4px; bg.c:transparent; w.min:16px; } ! & > :where(input[type="file"]) { pos:relative; p:0px; ! &::file-selector-button { font:@font; h:100%; m:0px; m.r:4px; p:4px; t.c:hsl(@color, @layer-element); bg.c:transparent; b.w:0px; t.deco:underline; } } ! & > [label-text] { area:label; p:4px; disp:flex; fl.dir:column; fl.cross:start; t.c:hsl(@color, @layer-element); t.ws:nowrap; t.sz:@text-size-normal; } `,m("caret-right-filled"),p(":where(details[data-ws])")` @color:@primary; @padding:8px; ${L("@layer-element","@layer-fill")} b:0px solid @core-color; p:0px @padding; r:4px; over:hidden; ! &:open { p.b:@padding; } ! & > summary { t.c:@core-color; pos:relative; p:4px; p.l:24px; m.x:calc(-1 * @padding); cur:pointer; *user-select:none; ! &::before { pos:absolute; x:0px; y:50%; -y:0px; w:1em; disp:flex; fl.cross:center; fl.main:center; font:ws-icon-caret-right-filled; *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; *content:"caret-right-filled"; tf:translateY(-50%); tr:transform 100ms linear; w:24px; h:24px; t.lh:24px; t.sz:18px; } ! &::marker, &::-webkit-details-marker { *content:""; disp:none; } } ! &:open > summary::before { tf:translateY(-50%) rotate(90deg); } `,p("ws-dialog")` pos:absolute; x:50%; y:50%; tf:translate(-50%, -50%); `,p("ws-drawer")` pos:absolute; x:0px; y:0px; -y:0px; disp:grid; `,p("ws-flex")` flex:column; gap:8px; p:8px; over:hidden; ! & > * { fl.shrink:0; } `,p("ws-grid")` disp:grid; over:hidden; gap:8px; p:8px; gr.rows.a:min-content; `,p("ws-icon")` disp:var(--icon-font, none); t.lh:1; ! &::before { disp:inline-block; font:@icon-font; *-webkit-font-smoothing:antialiased; *-moz-osx-font-smoothing:grayscale; *content:attr(data-icon); m.t:2px; } `,p("a[data-ws]:not([button])")` @color:@primary; t.c:hsl(@color, @layer-element); ! &:visited, &:hover { t.c:hsl(@color, @layer-element); } ! &[disabled] { *pointer-events:none; *filter:saturation(30%) brightness(0.7); } `;const q=z` <style> :host { position:fixed; top:0px; left:0px; width:100vw; height:100vh; background-color:var(--modal-color); z-index:var(--z-cover); transition:var(--modal-transition, none); } ws-modal-overlay { position:absolute; inset:0px; } ws-modal-overlay:focus { outline:none; } :host(:not([open])) { visibility:hidden; } :host([clear]) { background-color:transparent; } </style> <ws-modal-overlay> </ws-modal-overlay> <slot></slot> `;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),p("ws-paper")` @color:@mono; ${L("@layer-surface","@layer-border")} disp:grid; r:@base-radius; over:hidden; gr.cols:1fr; gr.rows:min-content auto min-content; gr.areas:"header" "content" "footer"; bg.c:@core-color; b.c:@alt-color; ! & > :where(*) { area:content; } ! &::before { *content:""; area:header; z:-1; } ! &::after { *content:""; area:footer; z:-1; } `;const M=z` <slot></slot> <ws-modal> <ws-popover-position> <slot name="popover"></slot> </ws-popover-position> </ws-modal> `;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(M()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const C=z` <style> @keyframes busy-load { from { transform:translateX(-100%); } to { transform:translateX(400%); } } :host { display:block; height:8px; border-radius:var(--base-radius); background-color:hsl(var(--mono), var(--layer-border)); position:relative; overflow:hidden; --color:var(--mono); } div::before, div::after { content:""; position:absolute; top:0px; left:0px; height:100%; --range:calc(var(--max, 1) - var(--min, 0)); --bar-width:calc(100% * var(--value, 0) / var(--range)); --buffer-width:calc(100% * var(--buffer, 0) / var(--range)); } div::before { background-color:hsl(var(--color), var(--layer-element)); } div::after { opacity:0.3; background-color:hsl(var(--color), var(--layer-element)); } :host(:not([busy])) div::before { width:var(--bar-width); } :host(:not([busy])) div::after { width:var(--buffer-width); } :host([busy]) div::before { width:25%; animation-name:busy-load; animation-iteration-count:infinite; animation-duration:2s; } </style> <div></div> `;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(C()),this.#r=e.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",e)}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),p("ws-screen")` @screen-width:min(720px, 100%); @pad-x:auto; @pad-y:auto; @pad-left:var(--pad-x, auto); @pad-right:var(--pad-x, auto); @pad-top:var(--pad-y, auto); @pad-bottom:var(--pad-y, auto); disp:grid; h:round(down, calc(100% - @sub-pixel-offset), 1px); w:calc(100%); over:hidden; pos:absolute; y:0px; x:0px; gr.cols:@pad-left @screen-width @pad-right; gr.rows:@pad-top 1fr @pad-bottom; gr.areas:"tl t tr" "l content r" "bl b br" ; ! & > :where(*) { area:content; } `;const I="caret-down-filled";m(I),p("ws-option")` ${L("@layer-element","@layer-fill")} disp:block; p:8px; *pointer-events:auto; t.c:@text-color-normal; w.min:fit-content; ! &[selected] { bg.c:@core-color; t.c:@alt-color; } ! & * { *pointer-events:none; } ${S} ${E} `,p("ws-optgroup")` grid; gr.cols:16px 1fr; *pointer-events:none; ! &::before { *content:attr(label); disp:block; p:8px; col:1 / -1; bg.c:hsl(@color, @layer-container); } ! & > * { col:2; } `;const T=z` <style> :host { --color:var(--mono); --modal-color:transparent; --max-height:250px; --core-color:hsl(var(--color), var(--layer-border)); --alt-color:hsl(var(--color), var(--layer-surface)); display:inline-grid; grid-template-rows:1fr 0px; user-select:none; cursor:default; position:relative; border:1px solid var(--core-color); border-radius:var(--base-radius); padding:4px; } slot[name=options] { display:block; overflow:visible; } ws-options { box-sizing:border-box; border:1px solid var(--core-color); border-radius:var(--base-radius); color:hsl(var(--mono), var(--layer-text)); display:grid; position:absolute; max-height:var(--max-height); overflow:auto; background-color:var(--alt-color); grid-template-columns:1fr; border-radius:var(--base-radius); box-shadow:0px 2px 4px var(--shadow-color); opacity:0; transform:translateY(10px); visibility:none; transition:opacity var(--anim-time) ease-out, transform var(--anim-time) ease-out, visibility var(--anim-time) ease-out ; --sign:sign(var(--y) - 100vh + var(--opt-h)); --pos:calc( var(--y) - calc( max(var(--sign), 0)* (var(--opt-h) - var(--h)) ) ); top:var(--pos); left:var(--x); width:var(--w); transform-origin:top center; } :host([open]) ws-options { transform:translateY(0); opacity:1; visibility:visible; } value-display { display:grid; user-select:none; grid-template-columns:1fr min-content; height:100%; } value-display:focus { outline:none; } ws-sel-caret { display:flex; align-items:center; justify-content:center; padding:4px; padding-right:0px; width:24px; } ws-sel-caret::before { display:block; font-family:ws-icon-${I}; content:attr(data-icon); } slot[name="selected"] { display:none; } slot[name="display"] { display:flex; align-items:center; } :host(:focus:not(:disabled)) { outline-style:auto; outline-width:1px; } ws-popover { --anim-time:unset; } :host(:disabled) { filter:saturate(50%) brightness(0.8); } </style> <value-display tabindex="0"> <slot name="selected"> <ws-selected>No Selection</ws-selected> </slot> <slot name="display"></slot> <ws-sel-caret data-icon="${I}"></ws-sel-caret> </value-display> <ws-popover> <slot slot="popover" name="options"> <ws-options> <slot></slot> </ws-options> </slot> </ws-popover> `,V="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(V)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===V)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===V&&!0===e.hasAttribute("selected")))??this.#i,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r),this.updatePreview()}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open"),this.display=document.createElement("ws-display"),this.display.slot="display"}connectedCallback(){this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#n.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),p("table[data-ws]")` @color:@primary; *border-collapse:separate; *border-spacing:0px; b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px; ! & th { bg.c:hsl(@color, @layer-container); } ! & :is(th, td:not(:empty)) { b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px; p:4px; } ! & tbody tr:last-child :is(td, th) { b.b.w:0px; } ! &[sticky-header] thead { pos.stick; y:0px; z:+2; } ! &[sticky-header] th:first-child { pos.stick; z:+1; x:0px; -x:0px; } `,p("ws-text")` ! &[title] { t.sz:@text-size-title; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[header] { t.sz:@text-size-header; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[subtitle] { disp:inline-block; t.sz:@text-size-subtitle; p:0px 8px; } ! &[info] { disp:inline-block; t.sz:@text-size-info; } `,p("ws-tabs")` @color:@primary; ${L("@layer-element","@layer-fill")} disp:grid; gr.cols.a:1fr; gr.rows.a:1fr; gr.flow:column; *user-select:none; gap:4px; `,p("label[tab]")` @fill:transparent; @text:@core-color; @active:@core-color; bg.c:@fill; t.c:@text; grid; gr.cols:1fr; gr.rows:min-content 2px; gr.areas:"content" "border"; pos:relative; ! & > input[type="radio"] { hide; } ! & > :where(*) { area:content; flex; fl.cn; p:8px; } ! &::before { *content:""; pos:absolute; -y:0px; x:0px; w:100%; h:2px; area:border; } ! &:has(input[type="radio"]:checked) { @fill:var(--fill-color, transparent); @text:var(--text-color, @core-color); @active:unset; ! &::before { bg.c:@core-color; } } ${E} `,p("ws-titlebar")` @border-size:2px; @color:@primary; ${L("@layer-element","@layer-fill")} disp:grid; h.min:52px; gr.cols:auto 1fr auto; gr.areas:"menu title action"; *user-select:none; pos:relative; p:0px 2px; t.c:@text; bg.c:@fill; b.y:@border-size solid @core-color; ! & > :where(*) { area:title; } `,p("ws-toast")` @color:@primary; t.c:@page-text-color; bg.c:hsl(@color, @layer-surface); pos:relative; disp:inline-grid; gr.cols:auto 1fr auto; gr.areas:"start content end"; r:@base-radius; *user-select:none; b:2px solid hsl(@color, @layer-element); h.min:32px; z:+0; ! & > :where(*) { area:content; } ! &::before, &::after { *content:""; w.min:20px; bg.c:hsl(@color, @layer-element); z:-1; } ! &::before { area:start; } ! &::after { area:end; } ! & > [notif-text] { disp:flex; fl.dir:column; fl.main:center; p:4px; } ! & > :not([notif-text]) { t.c:hsl(@mono, @layer-fill); @color:inherit; variant.fill; } `,p("ws-toaster")` pos:fixed; z:var(--z-notif); disp:grid; gr.cols:fr; p:0px; gap:8px; h:min-content; w:280px; ! &[pos^="top-"] { y:20px; } ! &[pos^="center-"] { y:50%; tf:translateY(-50%); } ! &[pos^="bottom-"] { -y:20px; } ! &[pos$="-left"] { x:20px; } ! &[pos$="-center"] { x:50%; tf:translateX(-50%); } ! &[pos$="-right"] { -x:20px; } `,m("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const j=' @color:var(--toggle-color, @primary); @size:20px; @core-color:hsl(@color, @layer-element); pos:relative; w:@size; h:@size; appr:none; m:0px; t.c:@core-color; v.a:middle; ! &::after { *content:""; pos:absolute; t.sz:calc(@size - 2px); *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; y:50%; x:50%; w:@size; h:@size; tf:translate(-50%, -50%); disp:flex; fl.cross:center; fl.main:center; over:hidden; } ';p(":where(input[data-ws][type=checkbox]:not([switch]))")` ${j} ! &::after { font:ws-icon-square-dashed; *content:"square-dashed"; } ! &:checked::after { font:ws-icon-square-check-filled; *content:"square-check-filled"; } `,p(":where(input[data-ws][type=radio])")` ${j} ! &::after { font:ws-icon-circle; *content:"circle"; } ! &:checked::after { font:ws-icon-circle-check-filled; *content:"circle-check-filled"; } `,p(":where(input[data-ws][type=checkbox][switch])")` @color:@primary; @size:20px; @anim-time:100ms; appr:none; m:0px; pos:relative; w:calc(@size * 2); h:@size; v.a:middle; ! &::before { *content:""; pos:absolute; inset:calc(@size / 4); b:1px solid @color; r:calc(@size / 2); bg.c:hsl(@color, @layer-element); o:0.5; tr:background-color @anim-time linear; } ! &::after { *content:""; pos:absolute; w:@size; h:@size; y:0px; x:0px; tr:left @anim-time linear, background-color @anim-time linear; bg.c:hsl(@mono, @layer-element); r:@size; } ! &:checked::after { x:@size; bg.c:hsl(@color, @layer-element); } `,p("label[data-ws][toggle]")` @color:@primary; @active:@mono; pos:relative; *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius; p:4px; disp:flex; fl.main:space-between; ! &:focus-within { @active:@color; } ! & > input { @color:inherit; ! &:focus { outln:none; } } ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); } `,p("ws-tooltip")` @color:@mono; pos.rel; disp:inline-grid; ! &[pos]:hover::before { *content:attr(text); pos.abs; p:4px; bg.c:hsl(@color, @layer-container); b:1px solid hsl(@color, @layer-border); t.ws:nowrap; r:4px; z:+1; } ! &[pos="top"]:hover::before { -y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="bottom"]:hover::before { y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="left"]:hover::before { -x:calc(100% + 8px); y:50%; tf:translateY(-50%); } ! &[pos="right"]:hover::before { x:calc(100% + 8px); y:50%; tf:translateY(-50%); } `,p("*")`
19
19
  *box-sizing: border-box;
20
20
  *-webkit-tap-highlight-color: transparent;
21
21
  *border-width: 0px;
package/dist/ws-esm.js CHANGED
@@ -15,7 +15,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
15
15
  ! & ws-modal[open] > ws-drawer {
16
16
  tf: translateX(0%);
17
17
  }
18
- `;const m={},x=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${x(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),v=(e,t="ws.user")=>d(e,t),w=p.version,y=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")`font:@font;@sub-pixel-offset:${y?1:0}px;@z-info:5;@z-cover:25;@z-notif:50;@z-layer:100;@base-radius:4px;@anim-time:250ms;@short-anim-time:150ms;@text-size-normal:15px;@text-size-title:calc(@text-size-normal * 2);@text-size-header:calc(@text-size-normal * 1.5);@text-size-subtitle:calc(@text-size-normal * 0.9);@text-size-info:calc(@text-size-normal * 0.75);@color:@mono;@page-text-color:hsl(@color, @layer-text);bg.c:hsl(@color, @layer-bg);t.c:@page-text-color;t.sz:@text-size-normal;`,l("#theme.tron")`#theme.base;@font:Tektur;@mono:0, 0%;@primary:184, 80%;@accent:160, 80%;@info:208, 80%;@success:130, 80%;@warning:58, 80%;@error:4, 80%;@layer-bg:15%;@layer-surface:5%;@layer-element:60%;@layer-container:10%;@layer-border:25%;@layer-text:95%;@layer-fill:5%;@shadow-color:hsla(0, 0%, 100%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);*color-scheme:dark;`,l("#theme.dark")`#theme.base;@font:Roboto;@mono:0, 0%;@primary:184, 80%;@accent:160, 80%;@info:208, 80%;@success:130, 80%;@warning:58, 80%;@error:4, 80%;@layer-bg:20%;@layer-surface:10%;@layer-element:50%;@layer-container:15%;@layer-border:30%;@layer-text:90%;@layer-fill:10%;@shadow-color:hsla(0, 0%, 100%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);*color-scheme:dark;`,l("#theme.light")`#theme.base;@font:Roboto;@mono:0, 0%;@primary:184, 70%;@accent:160, 85%;@info:208, 85%;@success:130, 90%;@warning:58, 85%;@error:4, 80%;@layer-bg:85%;@layer-surface:95%;@layer-element:37.5%;@layer-container:90%;@layer-border:80%;@layer-text:10%;@layer-fill:95%;@shadow-color:hsla(0, 0%, 20%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);`;var k=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(!0)};d("ws-circle-spinner, ws-hexagon-spinner")`@size:100px;w:@size;h:@size;disp:inline-block;`;const z=k`<style>:host {--color:var(--primary);--core-color:hsl(var(--color), var(--layer-element));--alt-color:hsl(var(--color), var(--layer-border));--size:200px;}svg {width:var(--size);height:var(--size);}@keyframes turn {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}circle {animation-name:turn;animation-duration:calc(1000ms * var(--n));animation-iteration-count:infinite;animation-timing-function:ease;stroke:var(--c);stroke-width:6;fill:none;animation-direction:var(--anim);}</style><svg viewbox="-50 -50 100 100"><circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle><circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle><circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle></svg>`;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(z())}});const $=k`<style>:host {--color:var(--primary);--core-color:hsl(var(--color), var(--layer-element));--alt-color:hsl(var(--color), var(--layer-border));--size:200px;}svg {width:var(--size);height:var(--size);}circle {stroke-width:0;fill:var(--c);offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45");animation-name:mover;animation-duration:3000ms;animation-iteration-count:infinite;animation-timing-function:linear;}@keyframes mover {0% {offset-distance:0%;}100% {offset-distance:100%;}}@keyframes trail {0% {stroke-dashoffset:0;}100% {stroke-dashoffset:var(--len);}}path {animation-name:trail;animation-duration:3000ms;animation-iteration-count:infinite;animation-timing-function:linear;stroke:var(--c);stroke-width:6;fill:none;animation-direction:var(--anim);}</style><svg viewbox="-50 -50 100 100"><pathd="M 0 -36 L 31 -18 L 31 18 L 0 36 L -31 18 L -31 -18 L 0 -36 Z"style="--c:var(--alt-color); --len:216;"stroke-dasharray="36 36"/><pathd="M 0 -22.5 L 19.5 -11.25 L 19.5 11.25 L 0 22.5 L -19.5 11.25 L -19.5 -11.25 L 0 -22.5 Z"style="--c:var(--core-color); --anim:reverse; --len:135;"stroke-dasharray="22.5 22.5"/><circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/><circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /><circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /></svg>`;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});var A=(e,t)=>`@core:${e};@alt:${t};@core-color:hsl(@color, @core);@alt-color:hsl(@color, @alt);@fill:var(--fill-color, transparent);@text:var(--text-color, @core-color);@active:@text;`;d("ws-avatar")`@color:@mono;@size:36px;${A("@layer-element","@layer-fill")}disp:inline-flex;over:hidden;r:500px;fl.cross:center;fl.main:center;w:@size;h:@size;bg.c:@fill;t.c:@text;v.a:text-bottom;! & > img {w:100%;}! & > object {w:100%;h:100%;disp:flex;fl.cross:center;fl.main:center;}`,d("ws-badge")`@color:@primary;${A("@layer-element","@layer-fill")}pos:relative;disp:inline-grid;over:visible;! &::after {pos:absolute;*content:attr(ws-text);-x:-10px;y:0px;tf:translateY(-50%);bg.c:@core-color;*pointer-events:none;r:20px;p:4px;w.min:20px;h:20px;*box-sizing:border-box;t.a:center;t.sz:@text-size-subtitle;t.c:@alt-color;t.lh:14px;z:@z-info;t.wt:600;}`;var L='over:hidden;pos:relative;cur:pointer;! &::after {*content:"";pos:absolute;y:0px;x:0px;-y:0px;-x:0px;*pointer-events:none;o:0;bg.c:@active;tr:opacity @anim-time linear;}! &:where(:not(:disabled)):active::after {tr:none;o:0.3;}',E='over:hidden;pos:relative;! |pointer:fine| {! &::before {*content:"";pos:absolute;y:0px;x:0px;-y:0px;-x:0px;*pointer-events:none;o:0;bg.c:@active;}! &:where(:not(:disabled)):hover::before {tr:none;o:0.1;}}';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")`@color:@primary;${A("@layer-element","@layer-fill")}pos:relative;b:0px solid @core-color;font:@font;t.c:@text;bg.c:@fill;r:@base-radius;cur:pointer;p:8px 16px;over:hidden;*user-select:none;disp:inline-flex;fl.cross:center;fl.main:center;t.deco:none;t.wt:500;! &:disabled {cur:default;*filter:saturate(30%) brightness(0.7);}${E}${L}`,d("ws-chip")`@color:@mono;${A("@layer-element","@layer-fill")}disp:inline-flex;fl.cross:center;fl.main:center;r:100px;p:4px 12px;*user-select:none;v.a:text-bottom;t.c:@text-color;bg:@fill-color;b:1px solid @core-color;! &[clickable] {cur:pointer;${L}}`,d("label[control][data-ws]")`@color:@primary;@active:@mono;pos:relative;disp:inline-grid;gr.areas:"label label label" "start control end" "extra extra extra";gr.rows:minmax(0px, min-content) auto minmax(0px, min-content);gr.cols:minmax(0px, min-content) auto minmax(0px, min-content);*user-select:none;over:hidden;b:0px solid hsl(@color, @layer-border);bg.c:hsl(@active, @layer-container);r:@base-radius;! &:focus-within {@active:@color;}! &:has(:not(button):disabled) {*filter:saturate(50%) brightness(0.7);}! & > :is(input, select, ws-select, textarea) {area:control;b.w:0px;@color:inherit;! &:focus {outln:none;}}! & > :where(input, textarea) {t.c:hsl(@mono, @layer-text);font:@font;h.min:28px;w:100%;h:100%;p:4px;bg.c:transparent;w.min:16px;}! & > :where(input[type="file"]) {pos:relative;p:0px;! &::file-selector-button {font:@font;h:100%;m:0px;m.r:4px;p:4px;t.c:hsl(@color, @layer-element);bg.c:transparent;b.w:0px;t.deco:underline;}}! & > [label-text] {area:label;p:4px;disp:flex;fl.dir:column;fl.cross:start;t.c:hsl(@color, @layer-element);t.ws:nowrap;t.sz:@text-size-normal;}`,b("caret-right-filled"),d(":where(details[data-ws])")`@color:@primary;@padding:8px;${A("@layer-element","@layer-fill")}b:0px solid @core-color;p:0px @padding;r:4px;over:hidden;! &:open {p.b:@padding;}! & > summary {t.c:@core-color;pos:relative;p:4px;p.l:24px;m.x:calc(-1 * @padding);cur:pointer;*user-select:none;! &::before {pos:absolute;x:0px;y:50%;-y:0px;w:1em;disp:flex;fl.cross:center;fl.main:center;font:ws-icon-caret-right-filled;*speak:none;t.st:normal;t.wt:400;t.var:normal;t.tf:none;*content:"caret-right-filled";tf:translateY(-50%);tr:transform 100ms linear;w:24px;h:24px;t.lh:24px;t.sz:18px;}! &::marker, &::-webkit-details-marker {*content:"";disp:none;}}! &:open > summary::before {tf:translateY(-50%) rotate(90deg);}`,d("ws-dialog")`pos:absolute;x:50%;y:50%;tf:translate(-50%, -50%);`,d("ws-drawer")`pos:absolute;x:0px;y:0px;-y:0px;disp:grid;`,d("ws-flex")`flex:column;gap:8px;p:8px;over:hidden;! & > * {fl.shrink:0;}`,d("ws-grid")`disp:grid;over:hidden;gap:8px;p:8px;gr.rows.a:min-content;`,d("ws-icon")`disp:var(--icon-font, none);t.lh:1;! &::before {disp:inline-block;font:@icon-font;*-webkit-font-smoothing:antialiased;*-moz-osx-font-smoothing:grayscale;*content:attr(data-icon);m.t:2px;}`,d("a[data-ws]:not([button])")`@color:@primary;t.c:hsl(@color, @layer-element);! &:visited, &:hover {t.c:hsl(@color, @layer-element);}! &[disabled] {*pointer-events:none;*filter:saturation(30%) brightness(0.7);}`;const S=k`<style>:host {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background-color:var(--modal-color);z-index:var(--z-cover);transition:var(--modal-transition, none);}ws-modal-overlay {position:absolute;inset:0px;}ws-modal-overlay:focus {outline:none;}:host(:not([open])) {visibility:hidden;}:host([clear]) {background-color:transparent;}</style><ws-modal-overlay></ws-modal-overlay><slot></slot>`;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(S())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),d("ws-paper")`@color:@mono;${A("@layer-surface","@layer-border")}disp:grid;r:@base-radius;over:hidden;gr.cols:1fr;gr.rows:min-content auto min-content;gr.areas:"header" "content" "footer";bg.c:@core-color;b.c:@alt-color;! & > :where(*) {area:content;}! &::before {*content:"";area:header;z:-1;}! &::after {*content:"";area:footer;z:-1;}`;const q=k`<slot></slot><ws-modal><ws-popover-position><slot name="popover"></slot></ws-popover-position></ws-modal>`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const M=k`<style>@keyframes busy-load {from {transform:translateX(-100%);}to {transform:translateX(400%);}}:host {display:block;height:8px;border-radius:var(--base-radius);background-color:hsl(var(--mono), var(--layer-border));position:relative;overflow:hidden;--color:var(--mono);}div::before, div::after {content:"";position:absolute;top:0px;left:0px;height:100%;--range:calc(var(--max, 1) - var(--min, 0));--bar-width:calc(100% * var(--value, 0) / var(--range));--buffer-width:calc(100% * var(--buffer, 0) / var(--range));}div::before {background-color:hsl(var(--color), var(--layer-element));}div::after {opacity:0.3;background-color:hsl(var(--color), var(--layer-element));}:host(:not([busy])) div::before {width:var(--bar-width);}:host(:not([busy])) div::after {width:var(--buffer-width);}:host([busy]) div::before {width:25%;animation-name:busy-load;animation-iteration-count:infinite;animation-duration:2s;}</style><div></div>`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(M()),this.#r=e.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",e)}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),d("ws-screen")`@screen-width:min(720px, 100%);@pad-x:auto;@pad-y:auto;@pad-left:var(--pad-x, auto);@pad-right:var(--pad-x, auto);@pad-top:var(--pad-y, auto);@pad-bottom:var(--pad-y, auto);disp:grid;h:round(down, calc(100% - @sub-pixel-offset), 1px);w:calc(100%);over:hidden;pos:absolute;y:0px;x:0px;gr.cols:@pad-left @screen-width @pad-right;gr.rows:@pad-top 1fr @pad-bottom;gr.areas:"tl t tr""l content r""bl b br";! & > :where(*) {area:content;}`;const C="caret-down-filled";b(C),d("ws-option")`${A("@layer-element","@layer-fill")}disp:block;p:8px;*pointer-events:auto;t.c:@text-color-normal;w.min:fit-content;! &[selected] {bg.c:@core-color;t.c:@alt-color;}! & * {*pointer-events:none;}${E}${L}`,d("ws-optgroup")`grid;gr.cols:16px 1fr;*pointer-events:none;! &::before {*content:attr(label);disp:block;p:8px;col:1 / -1;bg.c:hsl(@color, @layer-container);}! & > * {col:2;}`;const T=k`<style>:host {--color:var(--mono);--modal-color:transparent;--max-height:250px;--core-color:hsl(var(--color), var(--layer-border));--alt-color:hsl(var(--color), var(--layer-surface));display:inline-grid;grid-template-rows:1fr 0px;user-select:none;cursor:default;position:relative;border:1px solid var(--core-color);border-radius:var(--base-radius);padding:4px;}slot[name=options] {display:block;overflow:visible;}ws-options {box-sizing:border-box;border:1px solid var(--core-color);border-radius:var(--base-radius);color:hsl(var(--mono), var(--layer-text));display:grid;position:absolute;max-height:var(--max-height);overflow:auto;background-color:var(--alt-color);grid-template-columns:1fr;border-radius:var(--base-radius);box-shadow:0px 2px 4px var(--shadow-color);opacity:0;transform:translateY(10px);visibility:none;transition:opacity var(--anim-time) ease-out,transform var(--anim-time) ease-out,visibility var(--anim-time) ease-out;--sign:sign(var(--y) - 100vh + var(--opt-h));--pos:calc(var(--y)- calc(max(var(--sign), 0)* (var(--opt-h) - var(--h))));top:var(--pos);left:var(--x);width:var(--w);transform-origin:top center;}:host([open]) ws-options {transform:translateY(0);opacity:1;visibility:visible;}value-display {display:grid;user-select:none;grid-template-columns:1fr min-content;height:100%;}value-display:focus {outline:none;}ws-sel-caret {display:flex;align-items:center;justify-content:center;padding:4px;padding-right:0px;width:24px;}ws-sel-caret::before {display:block;font-family:ws-icon-${C};content:attr(data-icon);}slot[name="selected"] {display:none;}slot[name="display"] {display:flex;align-items:center;}:host(:focus:not(:disabled)) {outline-style:auto;outline-width:1px;}ws-popover {--anim-time:unset;}:host(:disabled) {filter:saturate(50%) brightness(0.8);}</style><value-display tabindex="0"><slot name="selected"><ws-selected>No Selection</ws-selected></slot><slot name="display"></slot><ws-sel-caret data-icon="${C}"></ws-sel-caret></value-display><ws-popover><slot slot="popover" name="options"><ws-options><slot></slot></ws-options></slot></ws-popover>`,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&!0===e.hasAttribute("selected")))??this.#i,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r),this.updatePreview()}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open"),this.display=document.createElement("ws-display"),this.display.slot="display"}connectedCallback(){this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#n.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),d("table[data-ws]")`@color:@primary;*border-collapse:separate;*border-spacing:0px;b.s:solid;b.c:hsl(@color, @layer-border);b.b.w:1px;! & th {bg.c:hsl(@color, @layer-container);}! & :is(th, td:not(:empty)) {b.s:solid;b.c:hsl(@color, @layer-border);b.b.w:1px;p:4px;}! & tbody tr:last-child :is(td, th) {b.b.w:0px;}! &[sticky-header] thead {pos.stick;y:0px;z:+2;}! &[sticky-header] th:first-child {pos.stick;z:+1;x:0px;-x:0px;}`,d("ws-text")`! &[title] {t.sz:@text-size-title;disp:flex;fl.dir:column;p:0px 8px;fl.cross:start;fl.main:center;}! &[header] {t.sz:@text-size-header;disp:flex;fl.dir:column;p:0px 8px;fl.cross:start;fl.main:center;}! &[subtitle] {disp:inline-block;t.sz:@text-size-subtitle;p:0px 8px;}! &[info] {disp:inline-block;t.sz:@text-size-info;}`,d("ws-tabs")`@color:@primary;${A("@layer-element","@layer-fill")}disp:grid;gr.cols.a:1fr;gr.rows.a:1fr;gr.flow:column;*user-select:none;gap:4px;`,d("label[tab]")`@fill:transparent;@text:@core-color;@active:@core-color;bg.c:@fill;t.c:@text;grid;gr.cols:1fr;gr.rows:min-content 2px;gr.areas:"content" "border";pos:relative;! & > input[type="radio"] {hide;}! & > :where(*) {area:content;flex;fl.cn;p:8px;}! &::before {*content:"";pos:absolute;-y:0px;x:0px;w:100%;h:2px;area:border;}! &:has(input[type="radio"]:checked) {@fill:var(--fill-color, transparent);@text:var(--text-color, @core-color);@active:unset;! &::before {bg.c:@core-color;}}${L}`,d("ws-titlebar")`@border-size:2px;@color:@primary;${A("@layer-element","@layer-fill")}disp:grid;h.min:52px;gr.cols:auto 1fr auto;gr.areas:"menu title action";*user-select:none;pos:relative;p:0px 2px;t.c:@text;bg.c:@fill;b.y:@border-size solid @core-color;! & > :where(*) {area:title;}`,d("ws-toast")`@color:@primary;t.c:@page-text-color;bg.c:hsl(@color, @layer-surface);pos:relative;disp:inline-grid;gr.cols:auto 1fr auto;gr.areas:"start content end";r:@base-radius;*user-select:none;b:2px solid hsl(@color, @layer-element);h.min:32px;z:+0;! & > :where(*) {area:content;}! &::before, &::after {*content:"";w.min:20px;bg.c:hsl(@color, @layer-element);z:-1;}! &::before {area:start;}! &::after {area:end;}! & > [notif-text] {disp:flex;fl.dir:column;fl.main:center;p:4px;}! & > :not([notif-text]) {t.c:hsl(@mono, @layer-fill);@color:inherit;variant.fill;}`,d("ws-toaster")`pos:fixed;z:var(--z-notif);disp:grid;gr.cols:fr;p:0px;gap:8px;h:min-content;w:280px;! &[pos^="top-"] {y:20px;}! &[pos^="center-"] {y:50%;tf:translateY(-50%);}! &[pos^="bottom-"] {-y:20px;}! &[pos$="-left"] {x:20px;}! &[pos$="-center"] {x:50%;tf:translateX(-50%);}! &[pos$="-right"] {-x:20px;}`,b("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const V='@color:var(--toggle-color, @primary);@size:20px;@core-color:hsl(@color, @layer-element);pos:relative;w:@size;h:@size;appr:none;m:0px;t.c:@core-color;v.a:middle;! &::after {*content:"";pos:absolute;t.sz:calc(@size - 2px);*speak:none;t.st:normal;t.wt:400;t.var:normal;t.tf:none;y:50%;x:50%;w:@size;h:@size;tf:translate(-50%, -50%);disp:flex;fl.cross:center;fl.main:center;over:hidden;}';d(":where(input[data-ws][type=checkbox]:not([switch]))")`${V}! &::after {font:ws-icon-square-dashed;*content:"square-dashed";}! &:checked::after {font:ws-icon-square-check-filled;*content:"square-check-filled";}`,d(":where(input[data-ws][type=radio])")`${V}! &::after {font:ws-icon-circle;*content:"circle";}! &:checked::after {font:ws-icon-circle-check-filled;*content:"circle-check-filled";}`,d(":where(input[data-ws][type=checkbox][switch])")`@color:@primary;@size:20px;@anim-time:100ms;appr:none;m:0px;pos:relative;w:calc(@size * 2);h:@size;v.a:middle;! &::before {*content:"";pos:absolute;inset:calc(@size / 4);b:1px solid @color;r:calc(@size / 2);bg.c:hsl(@color, @layer-element);o:0.5;tr:background-color @anim-time linear;}! &::after {*content:"";pos:absolute;w:@size;h:@size;y:0px;x:0px;tr:left @anim-time linear, background-color @anim-time linear;bg.c:hsl(@mono, @layer-element);r:@size;}! &:checked::after {x:@size;bg.c:hsl(@color, @layer-element);}`,d("label[data-ws][toggle]")`@color:@primary;@active:@mono;pos:relative;*user-select:none;over:hidden;b:0px solid hsl(@color, @layer-border);bg.c:hsl(@active, @layer-container);r:@base-radius;p:4px;disp:flex;fl.main:space-between;! &:focus-within {@active:@color;}! & > input {@color:inherit;! &:focus {outln:none;}}! &:has(:not(button):disabled) {*filter:saturate(50%) brightness(0.7);}`,d("ws-tooltip")`@color:@mono;pos.rel;disp:inline-grid;! &[pos]:hover::before {*content:attr(text);pos.abs;p:4px;bg.c:hsl(@color, @layer-container);b:1px solid hsl(@color, @layer-border);t.ws:nowrap;r:4px;z:+1;}! &[pos="top"]:hover::before {-y:calc(100% + 8px);x:50%;tf:translateX(-50%);}! &[pos="bottom"]:hover::before {y:calc(100% + 8px);x:50%;tf:translateX(-50%);}! &[pos="left"]:hover::before {-x:calc(100% + 8px);y:50%;tf:translateY(-50%);}! &[pos="right"]:hover::before {x:calc(100% + 8px);y:50%;tf:translateY(-50%);}`,d("*")`
18
+ `;const m={},x=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${x(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),v=(e,t="ws.user")=>d(e,t),w=p.version,y=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")` font:@font; @sub-pixel-offset:${y?1:0}px; @z-info:5; @z-cover:25; @z-notif:50; @z-layer:100; @base-radius:4px; @anim-time:250ms; @short-anim-time:150ms; @text-size-normal:15px; @text-size-title:calc(@text-size-normal * 2); @text-size-header:calc(@text-size-normal * 1.5); @text-size-subtitle:calc(@text-size-normal * 0.9); @text-size-info:calc(@text-size-normal * 0.75); @color:@mono; @page-text-color:hsl(@color, @layer-text); bg.c:hsl(@color, @layer-bg); t.c:@page-text-color; t.sz:@text-size-normal; `,l("#theme.tron")` #theme.base; @font:Tektur; @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%; @layer-bg:15%; @layer-surface:5%; @layer-element:60%; @layer-container:10%; @layer-border:25%; @layer-text:95%; @layer-fill:5%; @shadow-color:hsla(0, 0%, 100%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.25); *color-scheme:dark; `,l("#theme.dark")` #theme.base; @font:Roboto; @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%; @layer-bg:20%; @layer-surface:10%; @layer-element:50%; @layer-container:15%; @layer-border:30%; @layer-text:90%; @layer-fill:10%; @shadow-color:hsla(0, 0%, 100%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.25); *color-scheme:dark; `,l("#theme.light")` #theme.base; @font:Roboto; @mono:0, 0%; @primary:184, 70%; @accent:160, 85%; @info:208, 85%; @success:130, 90%; @warning:58, 85%; @error:4, 80%; @layer-bg:85%; @layer-surface:95%; @layer-element:37.5%; @layer-container:90%; @layer-border:80%; @layer-text:10%; @layer-fill:95%; @shadow-color:hsla(0, 0%, 20%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.25); `;var k=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(!0)};d("ws-circle-spinner, ws-hexagon-spinner")` @size:100px; w:@size; h:@size; disp:inline-block; `;const z=k` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } @keyframes turn { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } circle { animation-name:turn; animation-duration:calc(1000ms * var(--n)); animation-iteration-count:infinite; animation-timing-function:ease; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle> <circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle> <circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle> </svg> `;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(z())}});const $=k` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } circle { stroke-width:0; fill:var(--c); offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45"); animation-name:mover; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes mover { 0% { offset-distance:0%; } 100% { offset-distance:100%; } } @keyframes trail { 0% { stroke-dashoffset:0; } 100% { stroke-dashoffset:var(--len); } } path { animation-name:trail; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <path d="M 0 -36 L 31 -18 L 31 18 L 0 36 L -31 18 L -31 -18 L 0 -36 Z" style="--c:var(--alt-color); --len:216;" stroke-dasharray="36 36" /> <path d="M 0 -22.5 L 19.5 -11.25 L 19.5 11.25 L 0 22.5 L -19.5 11.25 L -19.5 -11.25 L 0 -22.5 Z" style="--c:var(--core-color); --anim:reverse; --len:135;" stroke-dasharray="22.5 22.5" /> <circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/> <circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /> <circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /> </svg> `;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});var A=(e,t)=>` @core:${e}; @alt:${t}; @core-color:hsl(@color, @core); @alt-color:hsl(@color, @alt); @fill:var(--fill-color, transparent); @text:var(--text-color, @core-color); @active:@text; `;d("ws-avatar")` @color:@mono; @size:36px; ${A("@layer-element","@layer-fill")} disp:inline-flex; over:hidden; r:500px; fl.cross:center; fl.main:center; w:@size; h:@size; bg.c:@fill; t.c:@text; v.a:text-bottom; ! & > img { w:100%; } ! & > object { w:100%; h:100%; disp:flex; fl.cross:center; fl.main:center; } `,d("ws-badge")` @color:@primary; ${A("@layer-element","@layer-fill")} pos:relative; disp:inline-grid; over:visible; ! &::after { pos:absolute; *content:attr(ws-text); -x:-10px; y:0px; tf:translateY(-50%); bg.c:@core-color; *pointer-events:none; r:20px; p:4px; w.min:20px; h:20px; *box-sizing:border-box; t.a:center; t.sz:@text-size-subtitle; t.c:@alt-color; t.lh:14px; z:@z-info; t.wt:600; } `;var L=' over:hidden; pos:relative; cur:pointer; ! &::after { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; tr:opacity @anim-time linear; } ! &:where(:not(:disabled)):active::after { tr:none; o:0.3; } ',E=' over:hidden; pos:relative; ! |pointer:fine| { ! &::before { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; } ! &:where(:not(:disabled)):hover::before { tr:none; o:0.1; } } ';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")` @color:@primary; ${A("@layer-element","@layer-fill")} pos:relative; b:0px solid @core-color; font:@font; t.c:@text; bg.c:@fill; r:@base-radius; cur:pointer; p:8px 16px; over:hidden; *user-select:none; disp:inline-flex; fl.cross:center; fl.main:center; t.deco:none; t.wt:500; ! &:disabled { cur:default; *filter:saturate(30%) brightness(0.7); } ${E} ${L} `,d("ws-chip")` @color:@mono; ${A("@layer-element","@layer-fill")} disp:inline-flex; fl.cross:center; fl.main:center; r:100px; p:4px 12px; *user-select:none; v.a:text-bottom; t.c:@text-color; bg:@fill-color; b:1px solid @core-color; ! &[clickable] { cur:pointer; ${L} } `,d("label[control][data-ws]")` @color:@primary; @active:@mono; pos:relative; disp:inline-grid; gr.areas:"label label label" "start control end" "extra extra extra"; gr.rows:minmax(0px, min-content) auto minmax(0px, min-content); gr.cols:minmax(0px, min-content) auto minmax(0px, min-content); *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius; ! &:focus-within { @active:@color; } ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); } ! & > :is(input, select, ws-select, textarea) { area:control; b.w:0px; @color:inherit; ! &:focus { outln:none; } } ! & > :where(input, textarea) { t.c:hsl(@mono, @layer-text); font:@font; h.min:28px; w:100%; h:100%; p:4px; bg.c:transparent; w.min:16px; } ! & > :where(input[type="file"]) { pos:relative; p:0px; ! &::file-selector-button { font:@font; h:100%; m:0px; m.r:4px; p:4px; t.c:hsl(@color, @layer-element); bg.c:transparent; b.w:0px; t.deco:underline; } } ! & > [label-text] { area:label; p:4px; disp:flex; fl.dir:column; fl.cross:start; t.c:hsl(@color, @layer-element); t.ws:nowrap; t.sz:@text-size-normal; } `,b("caret-right-filled"),d(":where(details[data-ws])")` @color:@primary; @padding:8px; ${A("@layer-element","@layer-fill")} b:0px solid @core-color; p:0px @padding; r:4px; over:hidden; ! &:open { p.b:@padding; } ! & > summary { t.c:@core-color; pos:relative; p:4px; p.l:24px; m.x:calc(-1 * @padding); cur:pointer; *user-select:none; ! &::before { pos:absolute; x:0px; y:50%; -y:0px; w:1em; disp:flex; fl.cross:center; fl.main:center; font:ws-icon-caret-right-filled; *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; *content:"caret-right-filled"; tf:translateY(-50%); tr:transform 100ms linear; w:24px; h:24px; t.lh:24px; t.sz:18px; } ! &::marker, &::-webkit-details-marker { *content:""; disp:none; } } ! &:open > summary::before { tf:translateY(-50%) rotate(90deg); } `,d("ws-dialog")` pos:absolute; x:50%; y:50%; tf:translate(-50%, -50%); `,d("ws-drawer")` pos:absolute; x:0px; y:0px; -y:0px; disp:grid; `,d("ws-flex")` flex:column; gap:8px; p:8px; over:hidden; ! & > * { fl.shrink:0; } `,d("ws-grid")` disp:grid; over:hidden; gap:8px; p:8px; gr.rows.a:min-content; `,d("ws-icon")` disp:var(--icon-font, none); t.lh:1; ! &::before { disp:inline-block; font:@icon-font; *-webkit-font-smoothing:antialiased; *-moz-osx-font-smoothing:grayscale; *content:attr(data-icon); m.t:2px; } `,d("a[data-ws]:not([button])")` @color:@primary; t.c:hsl(@color, @layer-element); ! &:visited, &:hover { t.c:hsl(@color, @layer-element); } ! &[disabled] { *pointer-events:none; *filter:saturation(30%) brightness(0.7); } `;const S=k` <style> :host { position:fixed; top:0px; left:0px; width:100vw; height:100vh; background-color:var(--modal-color); z-index:var(--z-cover); transition:var(--modal-transition, none); } ws-modal-overlay { position:absolute; inset:0px; } ws-modal-overlay:focus { outline:none; } :host(:not([open])) { visibility:hidden; } :host([clear]) { background-color:transparent; } </style> <ws-modal-overlay> </ws-modal-overlay> <slot></slot> `;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(S())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),d("ws-paper")` @color:@mono; ${A("@layer-surface","@layer-border")} disp:grid; r:@base-radius; over:hidden; gr.cols:1fr; gr.rows:min-content auto min-content; gr.areas:"header" "content" "footer"; bg.c:@core-color; b.c:@alt-color; ! & > :where(*) { area:content; } ! &::before { *content:""; area:header; z:-1; } ! &::after { *content:""; area:footer; z:-1; } `;const q=k` <slot></slot> <ws-modal> <ws-popover-position> <slot name="popover"></slot> </ws-popover-position> </ws-modal> `;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const M=k` <style> @keyframes busy-load { from { transform:translateX(-100%); } to { transform:translateX(400%); } } :host { display:block; height:8px; border-radius:var(--base-radius); background-color:hsl(var(--mono), var(--layer-border)); position:relative; overflow:hidden; --color:var(--mono); } div::before, div::after { content:""; position:absolute; top:0px; left:0px; height:100%; --range:calc(var(--max, 1) - var(--min, 0)); --bar-width:calc(100% * var(--value, 0) / var(--range)); --buffer-width:calc(100% * var(--buffer, 0) / var(--range)); } div::before { background-color:hsl(var(--color), var(--layer-element)); } div::after { opacity:0.3; background-color:hsl(var(--color), var(--layer-element)); } :host(:not([busy])) div::before { width:var(--bar-width); } :host(:not([busy])) div::after { width:var(--buffer-width); } :host([busy]) div::before { width:25%; animation-name:busy-load; animation-iteration-count:infinite; animation-duration:2s; } </style> <div></div> `;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(M()),this.#r=e.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",e)}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),d("ws-screen")` @screen-width:min(720px, 100%); @pad-x:auto; @pad-y:auto; @pad-left:var(--pad-x, auto); @pad-right:var(--pad-x, auto); @pad-top:var(--pad-y, auto); @pad-bottom:var(--pad-y, auto); disp:grid; h:round(down, calc(100% - @sub-pixel-offset), 1px); w:calc(100%); over:hidden; pos:absolute; y:0px; x:0px; gr.cols:@pad-left @screen-width @pad-right; gr.rows:@pad-top 1fr @pad-bottom; gr.areas:"tl t tr" "l content r" "bl b br" ; ! & > :where(*) { area:content; } `;const C="caret-down-filled";b(C),d("ws-option")` ${A("@layer-element","@layer-fill")} disp:block; p:8px; *pointer-events:auto; t.c:@text-color-normal; w.min:fit-content; ! &[selected] { bg.c:@core-color; t.c:@alt-color; } ! & * { *pointer-events:none; } ${E} ${L} `,d("ws-optgroup")` grid; gr.cols:16px 1fr; *pointer-events:none; ! &::before { *content:attr(label); disp:block; p:8px; col:1 / -1; bg.c:hsl(@color, @layer-container); } ! & > * { col:2; } `;const T=k` <style> :host { --color:var(--mono); --modal-color:transparent; --max-height:250px; --core-color:hsl(var(--color), var(--layer-border)); --alt-color:hsl(var(--color), var(--layer-surface)); display:inline-grid; grid-template-rows:1fr 0px; user-select:none; cursor:default; position:relative; border:1px solid var(--core-color); border-radius:var(--base-radius); padding:4px; } slot[name=options] { display:block; overflow:visible; } ws-options { box-sizing:border-box; border:1px solid var(--core-color); border-radius:var(--base-radius); color:hsl(var(--mono), var(--layer-text)); display:grid; position:absolute; max-height:var(--max-height); overflow:auto; background-color:var(--alt-color); grid-template-columns:1fr; border-radius:var(--base-radius); box-shadow:0px 2px 4px var(--shadow-color); opacity:0; transform:translateY(10px); visibility:none; transition:opacity var(--anim-time) ease-out, transform var(--anim-time) ease-out, visibility var(--anim-time) ease-out ; --sign:sign(var(--y) - 100vh + var(--opt-h)); --pos:calc( var(--y) - calc( max(var(--sign), 0)* (var(--opt-h) - var(--h)) ) ); top:var(--pos); left:var(--x); width:var(--w); transform-origin:top center; } :host([open]) ws-options { transform:translateY(0); opacity:1; visibility:visible; } value-display { display:grid; user-select:none; grid-template-columns:1fr min-content; height:100%; } value-display:focus { outline:none; } ws-sel-caret { display:flex; align-items:center; justify-content:center; padding:4px; padding-right:0px; width:24px; } ws-sel-caret::before { display:block; font-family:ws-icon-${C}; content:attr(data-icon); } slot[name="selected"] { display:none; } slot[name="display"] { display:flex; align-items:center; } :host(:focus:not(:disabled)) { outline-style:auto; outline-width:1px; } ws-popover { --anim-time:unset; } :host(:disabled) { filter:saturate(50%) brightness(0.8); } </style> <value-display tabindex="0"> <slot name="selected"> <ws-selected>No Selection</ws-selected> </slot> <slot name="display"></slot> <ws-sel-caret data-icon="${C}"></ws-sel-caret> </value-display> <ws-popover> <slot slot="popover" name="options"> <ws-options> <slot></slot> </ws-options> </slot> </ws-popover> `,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&!0===e.hasAttribute("selected")))??this.#i,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r),this.updatePreview()}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open"),this.display=document.createElement("ws-display"),this.display.slot="display"}connectedCallback(){this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#n.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),d("table[data-ws]")` @color:@primary; *border-collapse:separate; *border-spacing:0px; b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px; ! & th { bg.c:hsl(@color, @layer-container); } ! & :is(th, td:not(:empty)) { b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px; p:4px; } ! & tbody tr:last-child :is(td, th) { b.b.w:0px; } ! &[sticky-header] thead { pos.stick; y:0px; z:+2; } ! &[sticky-header] th:first-child { pos.stick; z:+1; x:0px; -x:0px; } `,d("ws-text")` ! &[title] { t.sz:@text-size-title; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[header] { t.sz:@text-size-header; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[subtitle] { disp:inline-block; t.sz:@text-size-subtitle; p:0px 8px; } ! &[info] { disp:inline-block; t.sz:@text-size-info; } `,d("ws-tabs")` @color:@primary; ${A("@layer-element","@layer-fill")} disp:grid; gr.cols.a:1fr; gr.rows.a:1fr; gr.flow:column; *user-select:none; gap:4px; `,d("label[tab]")` @fill:transparent; @text:@core-color; @active:@core-color; bg.c:@fill; t.c:@text; grid; gr.cols:1fr; gr.rows:min-content 2px; gr.areas:"content" "border"; pos:relative; ! & > input[type="radio"] { hide; } ! & > :where(*) { area:content; flex; fl.cn; p:8px; } ! &::before { *content:""; pos:absolute; -y:0px; x:0px; w:100%; h:2px; area:border; } ! &:has(input[type="radio"]:checked) { @fill:var(--fill-color, transparent); @text:var(--text-color, @core-color); @active:unset; ! &::before { bg.c:@core-color; } } ${L} `,d("ws-titlebar")` @border-size:2px; @color:@primary; ${A("@layer-element","@layer-fill")} disp:grid; h.min:52px; gr.cols:auto 1fr auto; gr.areas:"menu title action"; *user-select:none; pos:relative; p:0px 2px; t.c:@text; bg.c:@fill; b.y:@border-size solid @core-color; ! & > :where(*) { area:title; } `,d("ws-toast")` @color:@primary; t.c:@page-text-color; bg.c:hsl(@color, @layer-surface); pos:relative; disp:inline-grid; gr.cols:auto 1fr auto; gr.areas:"start content end"; r:@base-radius; *user-select:none; b:2px solid hsl(@color, @layer-element); h.min:32px; z:+0; ! & > :where(*) { area:content; } ! &::before, &::after { *content:""; w.min:20px; bg.c:hsl(@color, @layer-element); z:-1; } ! &::before { area:start; } ! &::after { area:end; } ! & > [notif-text] { disp:flex; fl.dir:column; fl.main:center; p:4px; } ! & > :not([notif-text]) { t.c:hsl(@mono, @layer-fill); @color:inherit; variant.fill; } `,d("ws-toaster")` pos:fixed; z:var(--z-notif); disp:grid; gr.cols:fr; p:0px; gap:8px; h:min-content; w:280px; ! &[pos^="top-"] { y:20px; } ! &[pos^="center-"] { y:50%; tf:translateY(-50%); } ! &[pos^="bottom-"] { -y:20px; } ! &[pos$="-left"] { x:20px; } ! &[pos$="-center"] { x:50%; tf:translateX(-50%); } ! &[pos$="-right"] { -x:20px; } `,b("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const V=' @color:var(--toggle-color, @primary); @size:20px; @core-color:hsl(@color, @layer-element); pos:relative; w:@size; h:@size; appr:none; m:0px; t.c:@core-color; v.a:middle; ! &::after { *content:""; pos:absolute; t.sz:calc(@size - 2px); *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; y:50%; x:50%; w:@size; h:@size; tf:translate(-50%, -50%); disp:flex; fl.cross:center; fl.main:center; over:hidden; } ';d(":where(input[data-ws][type=checkbox]:not([switch]))")` ${V} ! &::after { font:ws-icon-square-dashed; *content:"square-dashed"; } ! &:checked::after { font:ws-icon-square-check-filled; *content:"square-check-filled"; } `,d(":where(input[data-ws][type=radio])")` ${V} ! &::after { font:ws-icon-circle; *content:"circle"; } ! &:checked::after { font:ws-icon-circle-check-filled; *content:"circle-check-filled"; } `,d(":where(input[data-ws][type=checkbox][switch])")` @color:@primary; @size:20px; @anim-time:100ms; appr:none; m:0px; pos:relative; w:calc(@size * 2); h:@size; v.a:middle; ! &::before { *content:""; pos:absolute; inset:calc(@size / 4); b:1px solid @color; r:calc(@size / 2); bg.c:hsl(@color, @layer-element); o:0.5; tr:background-color @anim-time linear; } ! &::after { *content:""; pos:absolute; w:@size; h:@size; y:0px; x:0px; tr:left @anim-time linear, background-color @anim-time linear; bg.c:hsl(@mono, @layer-element); r:@size; } ! &:checked::after { x:@size; bg.c:hsl(@color, @layer-element); } `,d("label[data-ws][toggle]")` @color:@primary; @active:@mono; pos:relative; *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius; p:4px; disp:flex; fl.main:space-between; ! &:focus-within { @active:@color; } ! & > input { @color:inherit; ! &:focus { outln:none; } } ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); } `,d("ws-tooltip")` @color:@mono; pos.rel; disp:inline-grid; ! &[pos]:hover::before { *content:attr(text); pos.abs; p:4px; bg.c:hsl(@color, @layer-container); b:1px solid hsl(@color, @layer-border); t.ws:nowrap; r:4px; z:+1; } ! &[pos="top"]:hover::before { -y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="bottom"]:hover::before { y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="left"]:hover::before { -x:calc(100% + 8px); y:50%; tf:translateY(-50%); } ! &[pos="right"]:hover::before { x:calc(100% + 8px); y:50%; tf:translateY(-50%); } `,d("*")`
19
19
  *box-sizing: border-box;
20
20
  *-webkit-tap-highlight-color: transparent;
21
21
  *border-width: 0px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axel669/windstorm",
3
- "version": "1.0.0-beta.2",
3
+ "version": "1.0.0-beta.3",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "scripts": {