@esportsplus/ui 0.8.4 → 0.9.2

package/build/components/index.d.ts

@@ -1,19 +1,38 @@
-export { default as accordion } from './accordion/index.js';
-export { default as clipboard } from './clipboard/index.js';
-export { default as counter } from './counter/index.js';
-export { default as ellipsis } from './ellipsis/index.js';
-export { default as footer } from './footer/index.js';
-export { default as form } from './form/index.js';
-export { default as json } from './json/index.js';
-export { default as link } from './link/index.js';
-export { default as loader } from './loader/index.js';
-export { default as loading } from './loading/index.js';
-export { default as magnet } from './magnet/index.js';
-export { default as number } from './number/index.js';
-export { default as page } from './page/index.js';
-export { default as root } from './root/index.js';
-export { default as scrollbar } from './scrollbar/index.js';
-export { default as site } from './site/index.js';
-export { default as tooltip } from './tooltip/index.js';
-export { default as truncate } from './truncate/index.js';
-export { default as typewriter } from './typewriter/index.js';
+export * as accordion from './accordion/index.js';
+export * as anchor from './anchor/index.js';
+export * as banner from './banner/index.js';
+export * as border from './border/index.js';
+export * as bubble from './bubble/index.js';
+export * as button from './button/index.js';
+export * as card from './card/index.js';
+export * as clipboard from './clipboard/index.js';
+export * as container from './container/index.js';
+export * as counter from './counter/index.js';
+export * as ellipsis from './ellipsis/index.js';
+export * as field from './field/index.js';
+export * as footer from './footer/index.js';
+export * as form from './form/index.js';
+export * as frame from './frame/index.js';
+export * as grid from './grid/index.js';
+export * as group from './group/index.js';
+export * as highlight from './highlight/index.js';
+export * as icon from './icon/index.js';
+export * as json from './json/index.js';
+export * as link from './link/index.js';
+export * as loader from './loader/index.js';
+export * as loading from './loading/index.js';
+export * as magnet from './magnet/index.js';
+export * as modal from './modal/index.js';
+export * as normalize from './normalize/index.js';
+export * as number from './number/index.js';
+export * as page from './page/index.js';
+export * as root from './root/index.js';
+export * as row from './row/index.js';
+export * as scrollbar from './scrollbar/index.js';
+export * as sidebar from './sidebar/index.js';
+export * as site from './site/index.js';
+export * as text from './text/index.js';
+export * as thumbnail from './thumbnail/index.js';
+export * as tooltip from './tooltip/index.js';
+export * as truncate from './truncate/index.js';
+export * as typewriter from './typewriter/index.js';

package/build/components/index.js

@@ -1,19 +1,38 @@
-export { default as accordion } from './accordion/index.js';
-export { default as clipboard } from './clipboard/index.js';
-export { default as counter } from './counter/index.js';
-export { default as ellipsis } from './ellipsis/index.js';
-export { default as footer } from './footer/index.js';
-export { default as form } from './form/index.js';
-export { default as json } from './json/index.js';
-export { default as link } from './link/index.js';
-export { default as loader } from './loader/index.js';
-export { default as loading } from './loading/index.js';
-export { default as magnet } from './magnet/index.js';
-export { default as number } from './number/index.js';
-export { default as page } from './page/index.js';
-export { default as root } from './root/index.js';
-export { default as scrollbar } from './scrollbar/index.js';
-export { default as site } from './site/index.js';
-export { default as tooltip } from './tooltip/index.js';
-export { default as truncate } from './truncate/index.js';
-export { default as typewriter } from './typewriter/index.js';
+export * as accordion from './accordion/index.js';
+export * as anchor from './anchor/index.js';
+export * as banner from './banner/index.js';
+export * as border from './border/index.js';
+export * as bubble from './bubble/index.js';
+export * as button from './button/index.js';
+export * as card from './card/index.js';
+export * as clipboard from './clipboard/index.js';
+export * as container from './container/index.js';
+export * as counter from './counter/index.js';
+export * as ellipsis from './ellipsis/index.js';
+export * as field from './field/index.js';
+export * as footer from './footer/index.js';
+export * as form from './form/index.js';
+export * as frame from './frame/index.js';
+export * as grid from './grid/index.js';
+export * as group from './group/index.js';
+export * as highlight from './highlight/index.js';
+export * as icon from './icon/index.js';
+export * as json from './json/index.js';
+export * as link from './link/index.js';
+export * as loader from './loader/index.js';
+export * as loading from './loading/index.js';
+export * as magnet from './magnet/index.js';
+export * as modal from './modal/index.js';
+export * as normalize from './normalize/index.js';
+export * as number from './number/index.js';
+export * as page from './page/index.js';
+export * as root from './root/index.js';
+export * as row from './row/index.js';
+export * as scrollbar from './scrollbar/index.js';
+export * as sidebar from './sidebar/index.js';
+export * as site from './site/index.js';
+export * as text from './text/index.js';
+export * as thumbnail from './thumbnail/index.js';
+export * as tooltip from './tooltip/index.js';
+export * as truncate from './truncate/index.js';
+export * as typewriter from './typewriter/index.js';

package/build/components/link/hover.d.ts

@@ -5,6 +5,6 @@ declare const _default: ({ attributes, content }: {
     attributes: {
         class: string;
     };
-    content: import("@esportsplus/template/build/types").RenderableTemplate;
+    html: import("@esportsplus/template/build/types").RenderableTemplate;
 };
 export default _default;

package/build/components/link/hover.js

@@ -4,14 +4,14 @@ export default ({ attributes, content }) => {
         attributes: {
             class: 'link--hover'
         },
-        content: html `
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
+        html: html `
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
         `
     };
 };

package/build/components/link/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: {
     hover: ({ attributes, content }: {
         attributes?: Record<string, any>;
@@ -6,7 +7,7 @@ declare const _default: {
         attributes: {
             class: string;
         };
-        content: import("@esportsplus/template/build/types").RenderableTemplate;
+        html: import("@esportsplus/template/build/types").RenderableTemplate;
     };
 };
 export default _default;

package/build/components/link/index.js

@@ -1,2 +1,3 @@
 import hover from './hover.js';
+import './scss/index.scss';
 export default { hover };

package/build/components/link/scss/index.scss

@@ -0,0 +1,2 @@
+.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--line-height:var(--line-height-400);--padding-horizontal:0px;--padding-vertical:var(--size-400);--width:auto}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.link{background:var(--background);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center flex-start;display:flex;position:relative}.link--hover.tooltip:hover .link-hover--one,.link--hover:not(.--active):hover .link-hover--one{opacity:0;transform:translateY(-75%)}.link--hover.tooltip:hover .link-hover--two,.link--hover:not(.--active):hover .link-hover--two{opacity:1;transform:translate(50%,50%)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,all .3s cubic-bezier(.23,.65,.74,1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{opacity:0;padding:0 var(--padding-horizontal);white-space:nowrap;position:absolute;bottom:50%;right:50%;transform:translate(50%,125%)}
+/*$vite$:1*/

package/build/components/loader/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: ({ attributes, content }: {
     attributes?: Record<PropertyKey, unknown>;
     content: any;

package/build/components/loader/index.js

@@ -1,5 +1,6 @@
 import { html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
 export default ({ attributes, content }) => {
     let state = reactive({
         load: false,
@@ -8,24 +9,31 @@ export default ({ attributes, content }) => {
     setTimeout(() => {
         state.scale = true;
     }, 300);
-    return html `
-        <div class="loader ${() => state.load && 'loader--load'}">
-            <div class="loader ${() => state.load && 'loader--load'}">
-                <div class="loader-content">
-                    <div
-                        class="loader-logo ${() => state.scale && 'loader-logo--scale'} text --flex-center --text-uppercase --text-600"
-                        style='color: var(--color-grey-500);'
+    return html `
+        <div class='loader ${() => state.load && 'loader--load'}'>
+            <div class='loader ${() => state.load && 'loader--load'}'>
+                <div class='loader-content'>
+                    <div
+                        class='
+                            ${() => state.scale && 'loader-logo--scale'}
+                            loader-logo
+                            text
+                            --flex-center
+                            --text-uppercase
+                            --text-600
+                        '
+                        style='color: var(--color-grey-500);'
                         onanimationend='${({ animationName: name }) => {
         if (name === 'scale') {
             state.load = true;
         }
-    }}'
-                        ${attributes}
-                    >
-                        ${content}
-                    </div>
-                </div>
-            </div>
-        </div>
+    }}'
+                        ${attributes}
+                    >
+                        ${content}
+                    </div>
+                </div>
+            </div>
+        </div>
     `;
 };

package/build/components/loader/scss/index.scss

@@ -0,0 +1,2 @@
+.loader-logo{--size:10svh;--translateY:8px}.loader{background-color:var(--color-black-500);opacity:1;pointer-events:none;visibility:visible;z-index:9999;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.6s ease-in-out .2s both move}.loader--load .loader--load{animation:.6s ease-in-out both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both scale}@keyframes scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}
+/*$vite$:1*/

package/build/components/loading/index.d.ts

@@ -1,2 +1,3 @@
-declare const _default: (properties?: Record<PropertyKey, unknown>) => import("@esportsplus/template/build/types").RenderableTemplate;
+import './scss/index.scss';
+declare const _default: (attributes?: Record<PropertyKey, unknown>) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/loading/index.js

@@ -1,6 +1,12 @@
 import { html } from '@esportsplus/template';
-export default (properties) => {
-    return html `
-        <div class="loading --border-width-700 --size-800" style='--border-color: var(--color-border-500);' ${properties}></div>
+import './scss/index.scss';
+export default (attributes) => {
+    return html `
+        <div
+            class='loading --border-width-700 --size-800'
+            style='--border-color: var(--color-border-500);'
+            ${attributes}
+        >
+        </div>
     `;
 };

package/build/components/loading/scss/index.scss

@@ -0,0 +1,2 @@
+.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--size:var(--size-400);animation:loading var(--animation-duration)linear infinite;border:var(--border-width)solid color-mix(in srgb,var(--border-color),transparent 90%);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+/*$vite$:1*/

package/build/components/magnet/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: ({ attributes, hide }: {
     attributes?: Record<string, unknown>;
     hide?: boolean;

package/build/components/magnet/index.js

@@ -1,5 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import './scss/index.scss';
 export default ({ attributes, hide }) => {
     let active = false, events = {
         onmouseover: function () {
@@ -31,13 +32,13 @@ export default ({ attributes, hide }) => {
         };
     }
     return {
-        html: html `
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
+        html: html `
+            <div class='magnet' style='${() => `
+                height: ${state.height ? `${state.height}px` : '100%'};
+                opacity: ${state.opacity};
+                transform: translate(${state.left}px, ${state.top}px);
+                width: ${state.width}px;
+            `}' ${attributes}></div>
         `,
         sibling: {
             attributes: events

package/build/components/magnet/scss/index.scss

@@ -0,0 +1,2 @@
+.magnet{--background:transparent;--border-radius:var(--border-radius-400);--timing-function:var(--timing-circ);background:var(--background);border-radius:var(--border-radius);opacity:0;height:0;transition:height var(--transition-duration)var(--timing-function),opacity var(--transition-duration)var(--timing-function),transform var(--transition-duration)var(--timing-function),width var(--transition-duration)var(--timing-function);z-index:-1;width:0;position:absolute;top:0;left:0}
+/*$vite$:1*/

package/build/components/modal/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/modal/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/modal/scss/index.scss

@@ -0,0 +1,2 @@
+.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-height:calc(100svh - (var(--margin-vertical)*2));--max-width:320px;max-height:var(--max-height);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:2;position:fixed;bottom:50%;right:50%;overflow:hidden;transform:translate(50%,50%)}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%,50%)scale(.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%}.modal-frame:not(.--active){display:none}
+/*$vite$:1*/

package/build/components/normalize/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/normalize/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/normalize/scss/index.scss

@@ -0,0 +1,3 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}
+/*$vite$:1*/

package/build/components/number/index.d.ts

@@ -1,8 +1,2 @@
-declare const abbreviate: (number: number) => string;
-declare const ordinal: (number: number) => string;
-declare const _default: {
-    abbreviate: (number: number) => string;
-    ordinal: (number: number) => string;
-};
-export default _default;
-export { abbreviate, ordinal };
+import { number } from '@esportsplus/utilities';
+export default number;

package/build/components/number/index.js

@@ -1,16 +1,2 @@
-let formatter = null, suffixes = ['th', 'st', 'nd', 'rd'];
-const abbreviate = (number) => {
-    if (formatter === null) {
-        formatter = new Intl.NumberFormat('en-GB', {
-            notation: 'compact',
-            compactDisplay: 'short'
-        });
-    }
-    return formatter.format(number);
-};
-const ordinal = (number) => {
-    let value = number % 100;
-    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
-};
-export default { abbreviate, ordinal };
-export { abbreviate, ordinal };
+import { number } from '@esportsplus/utilities';
+export default number;

package/build/components/page/index.d.ts

@@ -1,12 +1,4 @@
-declare const subtitle: {
-    class: string;
-};
-declare const suptitle: {
-    class: string;
-};
-declare const title: {
-    class: string;
-};
+import './scss/index.scss';
 declare const _default: {
     subtitle: {
         class: string;
@@ -19,4 +11,3 @@ declare const _default: {
     };
 };
 export default _default;
-export { subtitle, suptitle, title };

package/build/components/page/index.js

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 const subtitle = {
     class: 'page-subtitle --margin-200 --text-crop-bottom'
 };
@@ -8,4 +9,3 @@ const title = {
     class: 'page-title --line-height-200 --margin-400 --text-crop'
 };
 export default { subtitle, suptitle, title };
-export { subtitle, suptitle, title };

package/build/components/page/scss/index.scss

@@ -0,0 +1,2 @@
+.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500);--line-height:var(--line-height-400)}.page{width:100vw;min-height:100svh;position:relative}.page-subtitle,.page-suptitle,.page-title{color:var(--color);line-height:var(--line-height);z-index:1;width:100%;display:block;position:relative}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-suptitle+.page-title,.page-title+.page-subtitle{margin-top:var(--margin-vertical)}.page-title{text-wrap:balance}
+/*$vite$:1*/

package/build/components/root/index.d.ts

@@ -2,7 +2,7 @@ import onclick from './onclick.js';
 declare const _default: {
     onclick: {
         (): Promise<void>;
-        add(fn: VoidFunction): void;
+        push(fn: VoidFunction): void;
     };
 };
 export default _default;

package/build/components/root/onclick.d.ts

@@ -1,5 +1,5 @@
 declare const onclick: {
     (): Promise<void>;
-    add(fn: VoidFunction): void;
+    push(fn: VoidFunction): void;
 };
 export default onclick;

package/build/components/root/onclick.js

@@ -8,7 +8,7 @@ const onclick = async () => {
         await item();
     }
 };
-onclick.add = (fn) => {
+onclick.push = (fn) => {
     queue.push(fn);
 };
 export default onclick;

package/build/components/root/scss/index.scss

@@ -0,0 +1,2 @@
+body,html{width:100%;height:100%;overflow-x:hidden}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box;transition:inherit}section{width:var(--width);flex-wrap:wrap;place-content:flex-start;display:flex;position:relative}h1,h2,h3,h4,h5{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-wrap:balance;word-wrap:break-word;width:100%;margin:0;padding:0;position:relative}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{color:var(--color,inherit);cursor:pointer;outline:none;text-decoration:none}b,strong{color:var(--color,inherit);font-weight:var(--font-weight)}p{word-wrap:break-word;width:100%;margin:0;padding:0}pre{overflow-wrap:break-word;white-space:break-spaces;width:100%;margin:0;padding:0}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}
+/*$vite$:1*/

package/build/components/row/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/row/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/row/scss/index.scss

@@ -0,0 +1,2 @@
+.row{flex-wrap:wrap;justify-content:flex-start;width:100%;display:flex;position:relative}
+/*$vite$:1*/

package/build/components/scrollbar/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: ({ attributes, fixed }?: {
     attributes?: Record<string, unknown>;
     fixed?: boolean;

package/build/components/scrollbar/index.js

@@ -1,5 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import './scss/index.scss';
 let root = document.body, width;
 export default ({ attributes, fixed } = {}) => {
     let state = reactive({
@@ -7,15 +8,20 @@ export default ({ attributes, fixed } = {}) => {
         translate: 0
     });
     return {
-        html: html `
-            <div
-                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
-                style='${() => `
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-                ${attributes}
-            ></div>
+        html: html `
+            <div
+                class='
+                    ${fixed && 'scrollbar--fixed'}
+                    ${() => state.height >= 100 && 'scrollbar--hidden'}
+                    scrollbar
+                '
+                style='${() => `
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+                ${attributes}
+            >
+            </div>
         `,
         parent: {
             attributes: {

package/build/components/scrollbar/scss/index.scss

@@ -0,0 +1,2 @@
+.scrollbar{--background-default:transparent;--height:0;--translate:translate3d(0,0,0);--width:4px}::-webkit-scrollbar{box-shadow:unset;background:0 0}::-webkit-scrollbar-track{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb{box-shadow:unset;background:0 0}::-webkit-scrollbar-thumb:window-inactive{box-shadow:unset;background:0 0}.scrollbar{z-index:9;height:100%}.scrollbar,.scrollbar:before{transition:opacity var(--transition-duration)ease-in-out;width:var(--width);position:absolute;top:0;right:0}.scrollbar:before{background:var(--background-default);content:"";height:var(--height);transform:var(--translate);transform-origin:top;border-radius:1px 0 0 1px}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{flex-flow:column;display:flex;position:relative;overflow:hidden}.scrollbar-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));overflow:hidden scroll}.scrollbar-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}
+/*$vite$:1*/

package/build/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/sidebar/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/sidebar/scss/index.scss

@@ -0,0 +1,2 @@
+.sidebar{--margin-horizontal:0px;--margin-vertical:0px;--width:var(--width-default);--width-closed:var(--width-default);--width-default:320px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.sidebar{top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical)*2);transition:max-width var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:min(var(--width),100% - var(--margin-horizontal)*2);z-index:1;position:absolute;overflow:hidden}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width)*-1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
+/*$vite$:1*/

package/build/components/site/index.d.ts

@@ -1,4 +1,5 @@
 import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
 type Data = {
     attributes?: Record<string, unknown>;
     content?: any;

package/build/components/site/index.js

@@ -1,16 +1,17 @@
 import { html } from '@esportsplus/template';
 import { onclick } from '../../components/root/index.js';
 import scrollbar from '../../components/scrollbar/index.js';
+import './scss/index.scss';
 export default ({ attributes, content, scrollbar: sb }) => {
     sb ??= {};
     sb.attributes ??= {};
     sb.attributes.style ??= '--background-default: var(--color-black-400);';
     sb.fixed ??= true;
     let { html: h, parent } = scrollbar(sb);
-    return html `
-        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
-            ${content || ''}
-            ${h}
-        </section>
+    return html `
+        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
+            ${content || ''}
+            ${h}
+        </section>
     `;
 };

package/build/components/site/scss/index.scss

@@ -0,0 +1,2 @@
+.site{z-index:0}
+/*$vite$:1*/

package/build/components/text/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/text/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/text/scss/index.scss

@@ -0,0 +1,2 @@
+.text{--color:var(--color-default);--color-default:inherit;--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration)ease-in-out;width:var(--width);position:relative}
+/*$vite$:1*/

package/build/components/thumbnail/index.d.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/thumbnail/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/build/components/thumbnail/scss/index.scss

@@ -0,0 +1,2 @@
+.thumbnail{--background:transparent;--border-radius:var(--border-radius-300);--height:var(--size);--size:var(--size-700);--width:var(--size);background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width);position:relative}
+/*$vite$:1*/

package/build/components/tooltip/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: {
     onclick: (data?: {
         active?: boolean;

package/build/components/tooltip/index.js

@@ -1,5 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import root from '../../components/root/index.js';
+import './scss/index.scss';
 let queue = [], running = false, scheduled = false;
 async function frame() {
     if (running) {
@@ -32,7 +33,7 @@ const onclick = (data = {}) => {
                     queue.push(() => state.active = false);
                 }
                 if (!scheduled) {
-                    root.onclick.add(() => {
+                    root.onclick.push(() => {
                         frame();
                         scheduled = false;
                     });