@esportsplus/ui 0.17.7 → 0.18.0

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

@@ -1,6 +1,117 @@
+import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes: Record<string, unknown> & {
-    content?: Record<string, unknown>;
-    scrollbar?: Record<string, unknown>;
-}, content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        scrollbar?: Attributes;
+        'scrollbar-container-content'?: Attributes;
+    }, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/scrollbar/index.js

@@ -1,21 +1,22 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
 let root = document.body, width;
-export default (attributes, content) => {
+export default template.factory((attributes, content) => {
     let state = reactive({
         height: 100,
         translate: 0
     });
     return html `
-        <div
-            class='scrollbar-container'
-            ${omit(attributes, ['content', 'scrollbar'])}
-        >
             <div
-                class='scrollbar-container-content'
-                onscroll='${function () {
+                class='scrollbar-container'
+                ${omit(attributes, ['scrollbar-container-content', 'scrollbar'])}
+            >
+                <div
+                    class='scrollbar-container-content'
+                    onscroll='${function () {
         if (width === undefined) {
             width = this.offsetWidth - this.clientWidth;
             if (width && width !== 17) {
@@ -25,23 +26,23 @@ export default (attributes, content) => {
         state.height = (this.clientHeight / this.scrollHeight) * 100;
         state.translate = (this.scrollTop / this.clientHeight) * 100;
     }}'
-                ${attributes.content}
-            >
-                ${content}
-            </div>
+                    ${attributes['scrollbar-container-content']}
+                >
+                    ${content}
+                </div>
 
-            <div
-                class='
-                    ${() => state.height >= 100 && 'scrollbar--hidden'}
-                    scrollbar
-                '
-                style='${() => `
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-                ${attributes.scrollbar}
-            >
+                <div
+                    class='
+                        ${() => state.height >= 100 && 'scrollbar--hidden'}
+                        scrollbar
+                    '
+                    style='${() => `
+                        --translate: translate3d(0, ${state.translate}%, 0);
+                        --height: ${state.height}%;
+                    `}'
+                    ${attributes.scrollbar}
+                >
+                </div>
             </div>
-        </div>
-    `;
-};
+        `;
+});

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

@@ -1,2 +1,2 @@
-@layer components {.scrollbar{--background: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);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;width:100%;height:auto;display:flex;position:relative;overflow:hidden}.scrollbar-container--full{height:100%}.scrollbar-container-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);padding-right:var(--scrollbar-width);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));flex-wrap:wrap;justify-content:flex-start;display:flex;overflow:hidden scroll}.scrollbar-container-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-container-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}}
+@layer components {.scrollbar{--background:var(--color-black-300);--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);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;width:100%;height:auto;display:flex;position:relative;overflow:hidden}.scrollbar-container--full{height:100%}.scrollbar-container-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);padding-right:var(--scrollbar-width);scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width));flex-wrap:wrap;justify-content:flex-start;display:flex;overflow:hidden scroll}.scrollbar-container-content--snap{scroll-snap-type:both mandatory;overscroll-behavior-x:contain;overflow:auto}.scrollbar-container-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}}
 /*$vite$:1*/

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

@@ -1,4 +1,116 @@
-import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        scrollbar?: import("@esportsplus/template").Attributes;
+        'scrollbar-container-content'?: import("@esportsplus/template").Attributes;
+    }, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/sidebar/index.js

@@ -1,10 +1,9 @@
-import { isArray } from '@esportsplus/utilities';
+import { toArray } from '@esportsplus/utilities';
 import scrollbar from '../../components/scrollbar/index.js';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
-export default (data, content) => {
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-    data.class.push('sidebar');
-    return scrollbar(data, content);
-};
+export default template.factory((attributes, content) => {
+    attributes.class = toArray(attributes.class);
+    attributes.class.push('sidebar');
+    return scrollbar(attributes, content);
+});

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

@@ -1,4 +1,116 @@
-import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: {
+        class?: string | (string | (() => unknown))[];
+        style?: string | (string | (() => unknown))[];
+    } & {
+        onabort?: ((event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((event: Event) => void) | undefined;
+        onblur?: ((event: FocusEvent) => void) | undefined;
+        oncancel?: ((event: Event) => void) | undefined;
+        oncanplay?: ((event: Event) => void) | undefined;
+        oncanplaythrough?: ((event: Event) => void) | undefined;
+        onchange?: ((event: Event) => void) | undefined;
+        onclick?: ((event: MouseEvent) => void) | undefined;
+        onclose?: ((event: Event) => void) | undefined;
+        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((event: Event) => void) | undefined;
+        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((event: Event) => void) | undefined;
+        oncopy?: ((event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((event: Event) => void) | undefined;
+        oncut?: ((event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((event: MouseEvent) => void) | undefined;
+        ondrag?: ((event: DragEvent) => void) | undefined;
+        ondragend?: ((event: DragEvent) => void) | undefined;
+        ondragenter?: ((event: DragEvent) => void) | undefined;
+        ondragleave?: ((event: DragEvent) => void) | undefined;
+        ondragover?: ((event: DragEvent) => void) | undefined;
+        ondragstart?: ((event: DragEvent) => void) | undefined;
+        ondrop?: ((event: DragEvent) => void) | undefined;
+        ondurationchange?: ((event: Event) => void) | undefined;
+        onemptied?: ((event: Event) => void) | undefined;
+        onended?: ((event: Event) => void) | undefined;
+        onerror?: ((event: ErrorEvent) => void) | undefined;
+        onfocus?: ((event: FocusEvent) => void) | undefined;
+        onfocusin?: ((event: FocusEvent) => void) | undefined;
+        onfocusout?: ((event: FocusEvent) => void) | undefined;
+        onformdata?: ((event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
+        oninput?: ((event: Event) => void) | undefined;
+        oninvalid?: ((event: Event) => void) | undefined;
+        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
+        onload?: ((event: Event) => void) | undefined;
+        onloadeddata?: ((event: Event) => void) | undefined;
+        onloadedmetadata?: ((event: Event) => void) | undefined;
+        onloadstart?: ((event: Event) => void) | undefined;
+        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
+        onmousedown?: ((event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((event: MouseEvent) => void) | undefined;
+        onmousemove?: ((event: MouseEvent) => void) | undefined;
+        onmouseout?: ((event: MouseEvent) => void) | undefined;
+        onmouseover?: ((event: MouseEvent) => void) | undefined;
+        onmouseup?: ((event: MouseEvent) => void) | undefined;
+        onpaste?: ((event: ClipboardEvent) => void) | undefined;
+        onpause?: ((event: Event) => void) | undefined;
+        onplay?: ((event: Event) => void) | undefined;
+        onplaying?: ((event: Event) => void) | undefined;
+        onpointercancel?: ((event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((event: PointerEvent) => void) | undefined;
+        onpointermove?: ((event: PointerEvent) => void) | undefined;
+        onpointerout?: ((event: PointerEvent) => void) | undefined;
+        onpointerover?: ((event: PointerEvent) => void) | undefined;
+        onpointerup?: ((event: PointerEvent) => void) | undefined;
+        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((event: Event) => void) | undefined;
+        onreset?: ((event: Event) => void) | undefined;
+        onresize?: ((event: UIEvent) => void) | undefined;
+        onscroll?: ((event: Event) => void) | undefined;
+        onscrollend?: ((event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((event: Event) => void) | undefined;
+        onseeking?: ((event: Event) => void) | undefined;
+        onselect?: ((event: Event) => void) | undefined;
+        onselectionchange?: ((event: Event) => void) | undefined;
+        onselectstart?: ((event: Event) => void) | undefined;
+        onslotchange?: ((event: Event) => void) | undefined;
+        onstalled?: ((event: Event) => void) | undefined;
+        onsubmit?: ((event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((event: Event) => void) | undefined;
+        ontimeupdate?: ((event: Event) => void) | undefined;
+        ontoggle?: ((event: Event) => void) | undefined;
+        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
+        ontouchend?: ((event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((event: Event) => void) | undefined;
+        onwaiting?: ((event: Event) => void) | undefined;
+        onwebkitanimationend?: ((event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((event: Event) => void) | undefined;
+        onwebkittransitionend?: ((event: Event) => void) | undefined;
+        onwheel?: ((event: WheelEvent) => void) | undefined;
+    } & Record<PropertyKey, unknown> & {
+        scrollbar?: import("@esportsplus/template").Attributes;
+        'scrollbar-container-content'?: import("@esportsplus/template").Attributes;
+    }, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/site/index.js

@@ -1,13 +1,12 @@
-import { isArray } from '@esportsplus/utilities';
+import { toArray } from '@esportsplus/utilities';
 import { onclick } from '../../components/root/index.js';
 import scrollbar from '../../components/scrollbar/index.js';
+import template from '../../components/template/index.js';
 import './scss/index.scss';
-export default (data, content) => {
-    data.style ??= '--background-default: var(--color-black-400);';
-    if (!isArray(data.class)) {
-        data.class = data.class ? [data.class] : [];
-    }
-    data.class.push('site');
-    data.onclick = onclick;
-    return scrollbar(data, content);
-};
+export default template.factory((attributes, content) => {
+    attributes.class = toArray(attributes.class);
+    attributes.class.push('site');
+    attributes.onclick = onclick;
+    attributes.style ??= '--background-default: var(--color-black-400);';
+    return scrollbar(attributes, content);
+});

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

@@ -0,0 +1,8 @@
+import { Renderable } from '@esportsplus/template';
+declare const _default: {
+    factory: <A extends Record<string, unknown>, C = unknown>(template: (attributes: A, content: C) => Renderable) => {
+        (content: C): Renderable;
+        (attributes: A, content: C): Renderable;
+    };
+};
+export default _default;

package/build/components/template/index.js

@@ -0,0 +1,15 @@
+const factory = (template) => {
+    function factory(one, two) {
+        let content, attributes = {};
+        if (two === undefined) {
+            content = one;
+        }
+        else {
+            content = two;
+            attributes = one;
+        }
+        return template(attributes, content);
+    }
+    return factory;
+};
+export default { factory };