@esportsplus/ui 0.18.0 → 0.19.0

package/build/components/frame/index.js

@@ -1,9 +1,7 @@
-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 template.factory((attributes, content) => {
-    attributes.class = toArray(attributes.class);
-    attributes.class.push('frame');
-    return scrollbar(attributes, content);
+export default scrollbar.bind({
+    attributes: {
+        class: 'frame'
+    }
 });

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

@@ -1,10 +1,8 @@
-import { Element } from '@esportsplus/template';
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (background: string) => {
-    attributes: {
-        class: string;
-        onrender: (element: Element) => void;
-        style: (string | (() => string))[];
-    };
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/highlight/index.js

@@ -1,7 +1,11 @@
 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';
+const OMIT = ['background'];
 let key = Symbol(), observer = null;
-export default (background) => {
+export default template.factory((attributes, content) => {
     if (observer === null) {
         observer = new IntersectionObserver((entries) => {
             let disconnected = 0, n = entries.length;
@@ -24,17 +28,21 @@ export default (background) => {
     let state = reactive({
         highlight: 0
     });
-    return {
-        attributes: {
-            class: 'highlight',
-            onrender: function (element) {
-                element[key] = state;
-                observer.observe(element);
-            },
-            style: [
-                () => `--highlight: ${state.highlight}`,
-                `--background: ${background}`,
-            ]
-        }
-    };
-};
+    return html `
+            <div class='highlight'
+                ${omit(attributes, OMIT)}
+                ${{
+        onrender: (element) => {
+            element[key] = state;
+            observer.observe(element);
+        },
+        style: [
+            () => `--highlight: ${state.highlight}`,
+            `--background: ${attributes.background}`,
+        ]
+    }}
+            >
+                ${content}
+            </div>
+        `;
+});

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

@@ -1,7 +1,7 @@
-import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
-    (content: string): import("@esportsplus/template").Renderable;
-    (attributes: Attributes, content: string): import("@esportsplus/template").Renderable;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: string): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: import("@esportsplus/template").Attributes, content: string): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/index.d.ts

@@ -10,7 +10,6 @@ export * as container from './container/index.js';
 export { default as counter } from './counter/index.js';
 export { default as ellipsis } from './ellipsis/index.js';
 export { default as field } from './field/index.js';
-export { default as footer } from './footer/index.js';
 export { default as form } from './form/index.js';
 export * as frame from './frame/index.js';
 export * as grid from './grid/index.js';
@@ -24,12 +23,13 @@ export { default as loading } from './loading/index.js';
 export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';
-export { default as page } from './page/index.js';
+export * from './page/index.js';
 export { default as root } from './root/index.js';
 export * as row from './row/index.js';
 export { default as scrollbar } from './scrollbar/index.js';
 export { default as sidebar } from './sidebar/index.js';
 export { default as site } from './site/index.js';
+export { default as template } from './template/index.js';
 export * as text from './text/index.js';
 export * as thumbnail from './thumbnail/index.js';
 export { default as tooltip } from './tooltip/index.js';

package/build/components/index.js

@@ -10,7 +10,6 @@ export * as container from './container/index.js';
 export { default as counter } from './counter/index.js';
 export { default as ellipsis } from './ellipsis/index.js';
 export { default as field } from './field/index.js';
-export { default as footer } from './footer/index.js';
 export { default as form } from './form/index.js';
 export * as frame from './frame/index.js';
 export * as grid from './grid/index.js';
@@ -24,12 +23,13 @@ export { default as loading } from './loading/index.js';
 export * as modal from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as overlay } from './overlay/index.js';
-export { default as page } from './page/index.js';
+export * from './page/index.js';
 export { default as root } from './root/index.js';
 export * as row from './row/index.js';
 export { default as scrollbar } from './scrollbar/index.js';
 export { default as sidebar } from './sidebar/index.js';
 export { default as site } from './site/index.js';
+export { default as template } from './template/index.js';
 export * as text from './text/index.js';
 export * as thumbnail from './thumbnail/index.js';
 export { default as tooltip } from './tooltip/index.js';

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

@@ -1,7 +1,7 @@
-import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
-    (content: unknown): import("@esportsplus/template").Renderable;
-    (attributes: Attributes, content: unknown): import("@esportsplus/template").Renderable;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: import("@esportsplus/template").Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/loader/index.js

@@ -1,9 +1,9 @@
-import { html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
 export default template.factory((attributes, content) => {
-    let state = reactive({
+    let c = () => state.load && 'loader--load', state = reactive({
         load: false,
         scale: false
     });
@@ -11,24 +11,21 @@ export default template.factory((attributes, content) => {
         state.scale = true;
     }, 300);
     return html `
-            <div class='loader ${() => state.load && 'loader--load'}'>
-                <div class='loader ${() => state.load && 'loader--load'}'>
+            <div class='loader' ${{ class: c }}>
+                <div class='loader' ${{ class: c }}>
                     <div class='loader-content'>
                         <div
-                            class='
-                                ${() => state.scale && 'loader-logo--scale'}
-                                loader-logo
-                                text
-                                --flex-center
-                                --text-uppercase --text-600
-                            '
+                            class='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}
+                            ${{
+        class: () => state.scale && 'loader-logo--scale',
+        onanimationend: ({ animationName: name }) => {
+            if (name === 'scale') {
+                state.load = true;
+            }
+        }
+    }}
                         >
                             ${content}
                         </div>

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

@@ -1,4 +1,4 @@
 import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes?: Attributes) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: (attributes?: Attributes) => Node;
 export default _default;

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

@@ -1,116 +1,7 @@
 import './scss/index.scss';
 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;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: import("../../components/scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/overlay/index.js

@@ -1,9 +1,7 @@
-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 template.factory((attributes, content) => {
-    attributes.class = toArray(attributes.class);
-    attributes.class.push('overlay');
-    return scrollbar(attributes, content);
+export default scrollbar.bind({
+    attributes: {
+        class: 'overlay'
+    }
 });

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

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

package/build/components/page/index.js

@@ -1,11 +1 @@
 import './scss/index.scss';
-const subtitle = {
-    class: 'page-subtitle --margin-200 --text-crop-bottom'
-};
-const suptitle = {
-    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
-};
-const title = {
-    class: 'page-title --line-height-200 --margin-400 --text-crop'
-};
-export default { subtitle, suptitle, title };

package/build/components/root/onclick.js

@@ -1,14 +1,12 @@
-let queue = [];
+import factory from '@esportsplus/queue';
+let queue = factory(64);
 const onclick = async () => {
-    if (queue.length === 0) {
-        return;
-    }
     let item;
-    while (item = queue.pop()) {
+    while (item = queue.next()) {
         await item();
     }
 };
 onclick.push = (fn) => {
-    queue.push(fn);
+    queue.add(fn);
 };
 export default onclick;

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

@@ -1,117 +1,13 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
+type A = Attributes & {
+    scrollbar?: Attributes;
+    'scrollbar-container-content'?: Attributes;
+};
 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;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: A, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;
+export type { A as Attributes };

package/build/components/scrollbar/index.js

@@ -3,8 +3,9 @@ import { html } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
+const OMIT = ['scrollbar', 'scrollbar-container-content'];
 let root = document.body, width;
-export default template.factory((attributes, content) => {
+export default template.factory(function (attributes, content) {
     let state = reactive({
         height: 100,
         translate: 0
@@ -12,35 +13,39 @@ export default template.factory((attributes, content) => {
     return html `
             <div
                 class='scrollbar-container'
-                ${omit(attributes, ['scrollbar-container-content', 'scrollbar'])}
+                ${omit(attributes, OMIT)}
+                ${this.attributes && omit(this.attributes, OMIT)}
             >
                 <div
                     class='scrollbar-container-content'
-                    onscroll='${function () {
-        if (width === undefined) {
-            width = this.offsetWidth - this.clientWidth;
-            if (width && width !== 17) {
-                root.style.setProperty('--scrollbar-width', `${width}px`);
+                    ${attributes['scrollbar-container-content']}
+                    ${this.attributes?.['scrollbar-container-content']}
+                    ${{
+        onscroll: function () {
+            if (width === undefined) {
+                width = this.offsetWidth - this.clientWidth;
+                if (width && width !== 17) {
+                    root.style.setProperty('--scrollbar-width', `${width}px`);
+                }
             }
+            state.height = (this.clientHeight / this.scrollHeight) * 100;
+            state.translate = (this.scrollTop / this.clientHeight) * 100;
         }
-        state.height = (this.clientHeight / this.scrollHeight) * 100;
-        state.translate = (this.scrollTop / this.clientHeight) * 100;
-    }}'
-                    ${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}
+                    class='scrollbar'
+                    ${this.attributes?.scrollbar}
+                    ${{
+        class: () => state.height >= 100 && 'scrollbar--hidden',
+        style: () => `
+                            --translate: translate3d(0, ${state.translate}%, 0);
+                            --height: ${state.height}%;
+                        `
+    }}
                 >
                 </div>
             </div>