@esportsplus/ui 0.51.7 → 0.53.0

package/src/components/accordion/scss/index.scss

@@ -1,17 +1,14 @@
-@use '/tokens';
-@use 'variables';
-
 .accordion {
-    max-height: var(--max-height);
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        max-height var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows .3s;
 
+    &[inert] {
+        grid-template-rows: 0fr;
+    }
 
-    @include tokens.state(active) {
-        opacity: 1;
-        pointer-events: auto;
+    &-content {
+        min-height: 0;
+        overflow: hidden;
     }
 }

package/src/components/back/index.ts

@@ -1,16 +1,15 @@
-import { html, Attributes } from '@esportsplus/template';
+import { component, html } from '@esportsplus/template';
 import icon from '~/components/icon';
-import template from '~/components/template';
 import arrow from './svg/arrow.svg';
 import './scss/index.scss';
 
 
-export default template.factory(
-    function (this: { attributes?: Attributes }, attributes, content) {
+export default component(
+    function (this, attributes, content) {
         return html`
             <a
                 class='back link --padding-0px --flex-vertical'
-                ${this.attributes}
+                ${this?.attributes}
                 ${attributes}
             >
                 ${icon({ class: 'back-arrow --margin-right --margin-200' }, arrow)}

package/src/components/button/index.ts

@@ -1,10 +1,9 @@
-import { html, type Renderable } from '@esportsplus/template';
+import { component, html, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import template from '../template';
 import './scss/index.scss';
 
 
-const hold = template.factory(
+const hold = component(
     function(attributes, content: (state: { holding: boolean, complete: boolean }) => Renderable<any>) {
         let end = () => {
                 if (!state.complete) {

package/src/components/checkbox/index.ts

@@ -13,7 +13,8 @@ const factory = (type: string) => {
         this: { attributes?: Attributes } | any,
         attributes?: Attributes & { state?: { active: boolean, error: string } }
     ) {
-        let state = attributes?.state || reactive({
+        let ref: HTMLElement,
+            state = attributes?.state || reactive({
                 active: false,
                 error: ''
             });
@@ -24,9 +25,10 @@ const factory = (type: string) => {
 
         return html`
             <div
-                class='${type} ${() => state.active && '--active'}'
+                class='${() => state.active ? type + " --active" : type}'
                 ${this?.attributes && omit(this.attributes, OMIT)}
                 ${attributes && omit(attributes, OMIT)}
+                onclick=${() => ref.click()}
             >
                 <input
                     ${{
@@ -35,6 +37,9 @@ const factory = (type: string) => {
                         onchange: (e: Event) => {
                             state.active = (e.target as HTMLInputElement).checked;
                         },
+                        onconnect: (input) => {
+                            ref = input;
+                        },
                         onrender: form.input.onrender(state),
                         type: type === 'radio' ? 'radio' : 'checkbox',
                         value: attributes?.value || 1

package/src/components/clipboard/index.ts

@@ -2,4 +2,5 @@ import onclick from './onclick';
 import write from './write';
 
 
-export default { onclick, write };
+export default { onclick, write };
+export { onclick, write };

package/src/components/clipboard/onclick.ts

@@ -1,7 +1,6 @@
-import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import write from './write';
 
 
@@ -11,7 +10,7 @@ type A = { timeout?: number, value: string } & Attributes;
 const OMIT = ['timeout', 'value'];
 
 
-export default template.factory<A, (state: { copied: boolean }) => Renderable<unknown>>(
+export default component<A, (state: { copied: boolean }) => Renderable<unknown>>(
     function(attributes, content) {
         let state = reactive({
                 copied: false
@@ -25,7 +24,7 @@ export default template.factory<A, (state: { copied: boolean }) => Renderable<un
                     e.preventDefault();
                     e.stopPropagation();
 
-                    write(attributes.value).then(() => {
+                    void write(attributes.value).then(() => {
                         state.copied = true;
 
                         setTimeout(() => {

package/src/components/form/input.ts

@@ -1,12 +1,12 @@
 import { Element } from '@esportsplus/template';
 
 
-let key = Symbol();
+const KEY = Symbol();
 
 
-const get = (element?: Element): { error: string } | undefined => {
+const get = (element?: Element) => {
     if (element) {
-        return element[key] as { error: string } | undefined;
+        return element[KEY] as { error: string } | undefined;
     }
 
     return undefined;
@@ -14,7 +14,7 @@ const get = (element?: Element): { error: string } | undefined => {
 
 const onrender = (reactive: { error: string }) => {
     return (element: Element) => {
-        element[key] = reactive;
+        element[KEY] = reactive;
     };
 };
 

package/src/components/frame/index.ts

@@ -1,9 +1,13 @@
-import scrollbar from '~/components/scrollbar';
+import { component, html } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default scrollbar.bind({
-    attributes: {
-        class: 'frame'
+export default component(
+    function(this, attributes, content) {
+        return html`
+            <div class='frame --scrollbar' ${this?.attributes} ${attributes}>
+                ${content}
+            </div>
+        `;
     }
-});
+);

package/src/components/highlight/index.ts

@@ -1,7 +1,6 @@
-import { html, Attributes } from '@esportsplus/template';
+import { component, html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -15,7 +14,7 @@ let key = Symbol(),
     observer: IntersectionObserver | null = null;
 
 
-export default template.factory(
+export default component(
     (attributes: A, content) => {
         if (observer === null) {
             observer = new IntersectionObserver((entries) => {

package/src/components/icon/index.ts

@@ -1,9 +1,8 @@
-import { html } from '@esportsplus/template';
-import template from '~/components/template';
+import { component, html } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default template.factory(
+export default component(
     (attributes, href: string) => {
         if (href[0] !== '#') {
             href = '#' + href;

package/src/components/index.ts

@@ -1,5 +1,4 @@
 export { default as accordion } from './accordion';
-export { default as alert } from './alert';
 export { default as back } from './back';
 export { default as button } from './button';
 export { default as checkbox } from './checkbox';
@@ -21,11 +20,9 @@ export { default as range } from './range';
 export { default as root } from './root';
 export { default as select } from './select';
 export { default as switch } from './switch';
-export { default as scrollbar } from './scrollbar';
 export { default as sidebar } from './sidebar';
-export { default as site } from './site';
-export { default as template } from './template';
 export { default as textarea } from './textarea';
+export { default as toaster, toast } from './toast';
 export { default as tooltip } from './tooltip';
 export { default as truncate } from './truncate';
 export { default as typewriter } from './typewriter';

package/src/components/loader/index.ts

@@ -1,7 +1,6 @@
-import { html, type Attributes } from '@esportsplus/template';
+import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities'
-import template from '~/components/template';
+import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 
 
@@ -15,7 +14,7 @@ type A = Attributes & {
 const OMIT = ['loader-content', 'loader-logo'];
 
 
-export default template.factory(
+export default component(
     (attributes: A, content) => {
         let state = reactive({
                 load: false,
@@ -33,10 +32,10 @@ export default template.factory(
             return html`
                 <div
                     class='loader ${() => state.load && 'loader--load'}'
-                    onanimationend=${(e: AnimationEvent) => {
+                    onanimationend=${({ animationName: name }: AnimationEvent) => {
                         i++;
 
-                        if (e.animationName === 'move' && i > 1) {
+                        if (name === 'move' && i > 1) {
                             state.remove = true;
                         }
                     }}

package/src/components/loader/scss/index.scss

@@ -9,7 +9,7 @@
     pointer-events: none;
     right: 0;
     top: 0;
-    transition: all 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
     visibility: visible;
     z-index: 9999;
 

package/src/components/overlay/index.ts

@@ -1,9 +1,13 @@
-import scrollbar from '~/components/scrollbar';
+import { component, html } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default scrollbar.bind({
-    attributes: {
-        class: 'overlay'
+export default component(
+    function(this, attributes, content) {
+        return html`
+            <div class='overlay --scrollbar' ${this?.attributes} ${attributes}>
+                ${content}
+            </div>
+        `;
     }
-});
+);

package/src/components/overlay/scss/index.scss

@@ -7,7 +7,6 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    overflow: hidden;
     z-index: 9;
 
 

package/src/components/page/scss/index.scss

@@ -6,7 +6,7 @@
     gap: var(--gap-vertical) 0px;
     min-height: 100svh;
     position: relative;
-    width: 100vw;
+    width: 100%;
 
 
     &-subtitle,

package/src/components/root/scss/index.scss

@@ -36,11 +36,9 @@ section {
     width: var(--width);
 }
 
-h1, h2, h3, h4, h5 {
+h1, h2, h3, h4, h5, h6 {
     color: var(--color);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
+    line-height: 1.2;
     margin: 0;
     padding: 0;
     position: relative;
@@ -54,6 +52,39 @@ h1, h2, h3, h4, h5 {
     }
 }
 
+h1 {
+    font-size: var(--font-size-800);
+    font-weight: var(--font-weight-600);
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+}
+
+h2 {
+    font-size: var(--font-size-700);
+    font-weight: var(--font-weight-500);
+    letter-spacing: -0.015em;
+}
+
+h3 {
+    font-size: var(--font-size-600);
+    font-weight: var(--font-weight-500);
+}
+
+h4 {
+    font-size: var(--font-size-500);
+    font-weight: var(--font-weight-500);
+}
+
+h5 {
+    font-size: var(--font-size-400);
+    font-weight: var(--font-weight-500);
+}
+
+h6 {
+    font-size: var(--font-size-300);
+    font-weight: var(--font-weight-500);
+}
+
 a {
     color: var(--color, inherit);
     cursor: pointer;

package/src/components/root/scss/variables.scss

@@ -13,14 +13,13 @@
     @include lib.css-variables(size, tokens.$size);
     @include lib.css-variables(spacer, tokens.$spacer);
 
-    --background: var(--color-grey-400);
+    --background: var(--color-white-400);
     --color: var(--color-text-400);
     --font-family: 'Montserrat', sans-serif;
     --font-size: var(--font-size-400);
     --font-weight: var(--font-weight-400);
     --line-height: var(--line-height-400);
     --min-width: 320px;
-    --scrollbar-width: 17px;
     --transition-duration: #{tokens.$transition-duration};
 
     // https://gist.github.com/jh3y/1b3afdfa7af3ebc5668bf169cea17d09

package/src/components/select/index.ts

@@ -1,10 +1,8 @@
-import { html, type Renderable, type Attributes } from '@esportsplus/template';
+import { component, html, type Renderable, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '~/components/form';
 import root from '~/components/root';
-import scrollbar, { Attributes as Attr } from '~/components/scrollbar';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -12,8 +10,6 @@ const OMIT = [
     'arrow',
     'options',
     'option',
-    'scrollbar',
-    'scrollbar-container-content',
     'tooltip-content',
 ];
 
@@ -22,8 +18,6 @@ type A = {
     arrow?: Attributes;
     options: Record<number | string, Renderable<unknown> | { content: Renderable<unknown>, selected: Renderable<unknown> }>;
     option?: Attributes;
-    scrollbar?: Attributes;
-    'scrollbar-container-content'?: Attributes;
     'tooltip-content'?: Attributes & { direction?: string };
 } & (
     {
@@ -37,18 +31,11 @@ type A = {
             selected?: number | string;
         }
     }
-) & Attributes & Attr;
+) & Attributes;
 
 
-let previous: { active: boolean } | null = null,
-    sb = scrollbar.bind({
-        attributes: {
-            class: 'tooltip-content',
-            'scrollbar-container-content': {
-                class: '--flex-column'
-            }
-        }
-    });
+let previous: { active: boolean } | null = null;
+
 
 function set(current: { active: boolean }, value: boolean) {
     current.active = value;
@@ -73,7 +60,8 @@ function set(current: { active: boolean }, value: boolean) {
     }
 }
 
-const select = template.factory<A, (state: { active: boolean, selected?: string | number }) => Renderable<unknown>>(
+
+export default component<A, (state: { active: boolean, selected?: string | number }) => Renderable<unknown>>(
     function(this: { attributes?: Exclude<A, 'options' | 'selected' | 'state'> }, attributes: A, content) {
         let { options, option } = attributes,
             state = attributes.state || reactive({
@@ -131,77 +119,77 @@ const select = template.factory<A, (state: { active: boolean, selected?: string
                             Object.fromEntries( keys.map(key => [key, false]) )
                         );
 
-                    return sb(
-                        {
-                            ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
-                            ...attributes['tooltip-content'],
-                            class: [
-                                ...toArray(this?.attributes?.['tooltip-content']?.class),
-                                ...toArray(attributes['tooltip-content']?.class),
-                                `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
-                            ],
-                            onclick: (e: Event) => {
-                                let element = e.target as HTMLElement,
-                                    key = element.dataset?.key;
-
-                                if (key === undefined) {
-                                    let parent;
-
-                                    while (parent = element.parentElement) {
-                                        key = parent.dataset?.key;
-
-                                        if (key !== undefined) {
-                                            break;
+                    return html`
+                        <div
+                            class='tooltip-content --flex-column --scrollbar'
+                            ${{
+                                ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
+                                ...attributes['tooltip-content'],
+                                class: [
+                                    ...toArray(this?.attributes?.['tooltip-content']?.class),
+                                    ...toArray(attributes['tooltip-content']?.class),
+                                    `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
+                                ],
+                                inert: () => !state.active,
+                                onclick: (e: Event) => {
+                                    let element = e.target as HTMLElement,
+                                        key = element.dataset?.key;
+
+                                    if (key === undefined) {
+                                        let parent;
+
+                                        while (parent = element.parentElement) {
+                                            key = parent.dataset?.key;
+
+                                            if (key !== undefined) {
+                                                break;
+                                            }
                                         }
                                     }
-                                }
 
-                                if (key === undefined) {
-                                    return;
+                                    if (key === undefined) {
+                                        return;
+                                    }
+
+                                    let previous = state.selected!;
+
+                                    set(state, false);
+                                    state.selected = key;
+
+                                    selected[key] = true;
+                                    selected[previous] = false;
+                                },
+                                onconnect: () => {
+                                    set(state, true);
+                                },
+                                style: [
+                                    ...toArray(this?.attributes?.['tooltip-content']?.style),
+                                    ...toArray(attributes['tooltip-content']?.style)
+                                ],
+                            }}
+                        >
+                            ${keys.map((key) => {
+                                let content = options[key];
+
+                                if (content !== null && typeof content === 'object' && 'content' in content) {
+                                    content = content.content;
                                 }
 
-                                let previous = state.selected!;
-
-                                set(state, false);
-                                state.selected = key;
-
-                                selected[key] = true;
-                                selected[previous] = false;
-                            },
-                            onconnect: () => {
-                                set(state, true);
-                            },
-                            scrollbar: attributes.scrollbar,
-                            'scrollbar-container-content': attributes['scrollbar-container-content'],
-                            style: [
-                                ...toArray(this?.attributes?.['tooltip-content']?.style),
-                                ...toArray(attributes['tooltip-content']?.style)
-                            ],
-                        },
-                        keys.map((key) => {
-                            let content = options[key];
-
-                            if (content !== null && typeof content === 'object' && 'content' in content) {
-                                content = content.content;
-                            }
-
-                            return html`
-                                <div
-                                    class='link select-option ${() => selected[key] && '--active'}'
-                                    ${this?.attributes?.option}
-                                    ${option}
-                                    data-key='${key}'
-                                >
-                                    ${content}
-                                </div>
-                            `;
-                        })
-                    );
+                                return html`
+                                    <div
+                                        class='link select-option ${() => selected[key] && '--active'}'
+                                        ${this?.attributes?.option}
+                                        ${option}
+                                        data-key='${key}'
+                                    >
+                                        ${content}
+                                    </div>
+                                `;
+                            })}
+                        </div>
+                    `;
                 }}
             </div>
         `;
     }
-);
-
-
-export default select;
+);

package/src/components/sidebar/index.ts

@@ -1,9 +1,13 @@
-import scrollbar from '~/components/scrollbar';
+import { component, html } from '@esportsplus/template';
 import './scss/index.scss';
 
 
-export default scrollbar.bind({
-    attributes: {
-        class: 'sidebar'
+export default component(
+    function(this, attributes, content) {
+        return html`
+            <div class='sidebar --flex-column --scrollbar' ${this?.attributes} ${attributes}>
+                ${content}
+            </div>
+        `;
     }
-});
+);

package/src/components/sidebar/scss/index.scss

@@ -6,7 +6,6 @@
     @include lib.position(absolute, var(--margin-vertical) null var(--margin-vertical) null);
     cursor: default;
     height: calc(100% - (var(--margin-vertical) * 2));
-    overflow: hidden;
     transition:
         max-width var(--transition-duration) ease-in-out,
         opacity var(--transition-duration) ease-in-out,