@esportsplus/ui 0.5.8 → 0.6.0

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

@@ -0,0 +1,5 @@
+declare const _default: ({ attributes, content }: {
+    attributes: Record<PropertyKey, unknown>;
+    content: any;
+}) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/loader/index.js

@@ -0,0 +1,31 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+export default ({ attributes, content }) => {
+    let state = reactive({
+        load: false,
+        scale: false
+    });
+    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);'
+                        onanimationend='${({ animationName: name }) => {
+        if (name === 'scale') {
+            state.load = true;
+        }
+    }}'
+                        ${attributes}
+                    >
+                        ${content}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+};

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

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

package/build/components/loading/index.js

@@ -0,0 +1,6 @@
+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>
+    `;
+};

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

@@ -0,0 +1,8 @@
+declare const _default: (content: string[]) => {
+    attributes: {
+        class: string;
+        onmount: () => void;
+    };
+    html: () => string | import("@esportsplus/template/build/types").RenderableTemplate;
+};
+export default _default;

package/build/components/typewriter/index.js

@@ -0,0 +1,41 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+const EMPTY_NODE = html ` `;
+export default (content) => {
+    let state = reactive({ text: '' });
+    return {
+        attributes: {
+            class: 'typewriter',
+            onmount: () => {
+                let character = 0, i = 0, isWriting = true, write = content[i];
+                function play() {
+                    setTimeout(() => {
+                        state.text = write.slice(0, character);
+                        if (isWriting) {
+                            if (character > write.length) {
+                                isWriting = false;
+                                setTimeout(play, 2000);
+                                return;
+                            }
+                            else {
+                                character++;
+                            }
+                        }
+                        else {
+                            if (character === 0) {
+                                isWriting = true;
+                                write = content[++i] || content[i = 0];
+                            }
+                            else {
+                                character--;
+                            }
+                        }
+                        play();
+                    }, isWriting ? 64 : 32);
+                }
+                play();
+            }
+        },
+        html: () => state.text || EMPTY_NODE
+    };
+};

package/build/index.d.ts

@@ -1,11 +1,12 @@
 import '@esportsplus/webpack/global.d.ts';
 export { default as accordion } from './components/accordion';
-export { default as aurora } from './components/aurora';
 export { default as clipboard } from './components/clipboard';
 export { default as counter } from './components/counter';
 export { default as ellipsis } from './components/ellipsis';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
+export { default as loader } from './components/loader';
+export { default as loading } from './components/loading';
 export { default as magnet } from './components/magnet';
 export { default as number } from './components/number';
 export { default as page } from './components/page';
@@ -14,3 +15,4 @@ export { default as scrollbar } from './components/scrollbar';
 export { default as site } from './components/site';
 export { default as tooltip } from './components/tooltip';
 export { default as truncate } from './components/truncate';
+export { default as typewriter } from './components/typewriter';

package/build/index.js

@@ -1,11 +1,12 @@
 import '@esportsplus/webpack/global.d.ts';
 export { default as accordion } from './components/accordion';
-export { default as aurora } from './components/aurora';
 export { default as clipboard } from './components/clipboard';
 export { default as counter } from './components/counter';
 export { default as ellipsis } from './components/ellipsis';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
+export { default as loader } from './components/loader';
+export { default as loading } from './components/loading';
 export { default as magnet } from './components/magnet';
 export { default as number } from './components/number';
 export { default as page } from './components/page';
@@ -14,3 +15,4 @@ export { default as scrollbar } from './components/scrollbar';
 export { default as site } from './components/site';
 export { default as tooltip } from './components/tooltip';
 export { default as truncate } from './components/truncate';
+export { default as typewriter } from './components/typewriter';

package/components/styles.css

@@ -1,6 +1,5 @@
 .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}.accordion.--active{opacity:1;pointer-events:auto}
 .anchor{max-height:calc(var(--max-height, 100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width, 100%) - var(--margin-horizontal)*2);position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:9}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
-.aurora{inset:0;position:absolute;overflow:hidden}.aurora div{background-color:var(--background-color);position:absolute;filter:blur(var(--blur));opacity:var(--opacity)}.aurora div:nth-child(1){animation:AuroraFirstChild 12s linear infinite;border-radius:100%;height:600px;inset:-300px auto auto -50px;transform:rotate(0) translate(80px) rotate(0) scale(var(--scale));width:600px;z-index:3}.aurora div:nth-child(2){inset:auto auto -30px -80px;height:800px;transform:scale(var(--scale));width:500px}.aurora div:nth-child(3){animation:AuroraSiblings 10s linear infinite;border-radius:100%;height:450px;inset:auto -100px -80px auto;transform:rotate(0) translate(200px) rotate(0) scale(var(--scale));width:450px}.aurora div:nth-child(4){animation:AuroraSiblings 15s linear infinite;border-radius:100%;height:350px;inset:auto 0 0 auto;margin:auto;transform:rotate(0) translate(200px) rotate(0) scale(var(--scale));width:350px}@keyframes AuroraFirstChild{100%{transform:rotate(2turn) translate(200px) rotate(-2turn)}}@keyframes AuroraSiblings{100%{transform:rotate(-2turn) translate(200px) rotate(2turn)}}
 .banner{position:absolute;inset:0 0 0 0;background-position:center;background-size:cover;z-index:-1}.banner--backdrop{background-position:bottom;height:80svh}.banner--blur{filter:blur(var(--blur));left:-2svh;right:-2svh;top:-2svh}.banner--blur.banner--backdrop{height:90svh}.banner--fixed{position:fixed}.banner--gradient::before{position:absolute;inset:0 0 0 0;background:radial-gradient(circle at top, transparent 64%, var(--to) 88%),linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);content:"";z-index:0}
 .border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}
 .bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
@@ -10,11 +9,13 @@
 .counter{display:flex;gap:2px;place-items:center;transition:transform .5s 2s;transform-style:flat}.counter-character,.counter-character-track span{background:linear-gradient(hsl(0, 0%, 98%) 50%, hsl(0, 0%, 45%));background-attachment:fixed;-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0);transform-style:flat}.counter-character{display:grid;font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;line-height:var(--line-height);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);overflow:hidden;transform-style:flat}.counter-character--fraction{font-size:calc(var(--font-size)*var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);overflow:visible;height:var(--line-height)}.counter-character--fraction .counter-character-track span{display:flex;flex-direction:column;align-items:end;padding:calc((var(--line-height) - var(--font-size))*.2) 0}.counter-character--symbol{font-size:calc(var(--font-size)*var(--scale));margin-right:.1ch;opacity:var(--opacity)}.counter-character-track{display:grid;translate:0 calc((var(--value) + 1)*var(--line-height)*-1);transition:translate var(--transition-duration) var(--timing-function)}.counter-character-track span{height:1lh;transform-style:flat}
 .ellipsis span{animation:Ellipsis var(--animation-duration) infinite linear;background-color:var(--color);border-radius:100%;display:inline-block;height:var(--size);margin:0 var(--margin-horizontal);width:var(--size)}.ellipsis span :nth-child(2){animation-delay:.24s}.ellipsis span :nth-child(3){animation-delay:.48s}@keyframes Ellipsis{0%,100%{opacity:.16}20%{opacity:1}}
 .footer,.footer-break{width:100%}@media(max-width: 640px){.footer-copyright:first-child{--width: 100%}}@media(min-width: 640px){.footer-copyright:first-child{margin-right:auto}}.footer-copyright:first-child+.footer-break{display:none}.footer-copyright:last-child{--width: 100%}
+.frame{display:none;flex-wrap:wrap;justify-content:flex-start;position:relative;width:100%}.frame.--active{display:flex}
 .grid{display:grid;grid-gap:var(--margin-horizontal) var(--margin-vertical);grid-template-columns:repeat(auto-fit, minmax(var(--min-width), var(--max-width)));position:relative}.grid .grid-item{width:100%}
 .group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{flex-flow:row;margin-bottom:calc(var(--scrollbar-width)*-1);overflow-y:hidden;padding-bottom:var(--scrollbar-width)}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
 .highlight{background:linear-gradient(90deg, var(--background) 50%, transparent 50%) 110% 0/200% 100% no-repeat;background-position:calc((1 - var(--highlight))*110%) 0;transition:background-position .32s}
 .icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);position:relative;width:var(--width)}.icon svg{color:currentColor;fill:currentColor;height:100%;width:100%}
 .link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;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)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
+.loader{background-color:var(--color-black-500);bottom:0;left:0;position:fixed;opacity:1;pointer-events:none;right:0;top:0;transition:all .3s ease-in-out;visibility:visible;z-index:9999}.loader--load{animation:.6s .2s ease-in-out 1 both move}.loader--load .loader--load{animation:.6s ease-in-out 1 both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}100%{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{bottom:auto;left:50%;position:absolute;right:auto;top:50%;transform:translateX(-50%) translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:scale .32s 1;animation-fill-mode:both}@keyframes scale{from{opacity:1;transform:scale3d(1, 1, 1)}to{opacity:0;transform:scale3d(1.8, 1.8, 1.8)}}
 .loading{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);border-radius:100%;height:var(--size);width:var(--size)}@keyframes Loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 .magnet{position:absolute;top:0;left:0;background:var(--background);border-radius:var(--border-radius);height:0;opacity: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);width:0;z-index:-1}
 .modal{position:fixed;bottom:50%;right:50%;transform:translate(50%, 50%);max-height:var(--max-height);overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;transform-origin:center;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:2}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%, 50%) scale(0.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:center}.modal-frame:not(.--active){display:none}
@@ -27,3 +28,4 @@ body,html{height:100%;overflow-x:hidden;width:100%}body{background-color:var(--b
 .text{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);position:relative;transition:color var(--transition-duration) ease-in-out;width:var(--width)}
 .thumbnail{background:var(--background);border-radius:var(--border-radius);height:var(--height);position:relative;width:var(--width)}
 .tooltip{cursor:pointer;position:relative;z-index:8}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box::before{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);content:"";height:calc(100% + var(--spacer)*2.5);width:calc(100% + var(--spacer)*2.5);z-index:-1}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(-90deg)}.tooltip-arrow{margin:0 -1px;transform:rotate(90deg)}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;overflow:hidden;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width);z-index:9}.tooltip.--active>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active>.tooltip-message,.tooltip.--active :not(.tooltip)>.tooltip-message{opacity:1}.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{bottom:50%;position:absolute;right:50%;transform:translate(50%, 50%) scale(var(--scaleX), var(--scaleY));transform-origin:center center}.tooltip.--active>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active>.tooltip-message--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c{transform:translate(50%, 50%) scale(1)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX), var(--scaleY))}.tooltip.--active>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active>.tooltip-message--es,.tooltip.--active :not(.tooltip)>.tooltip-message--es{transform:translateX(calc(var(--spacer) * 2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));position:absolute;transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center left}.tooltip.--active>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active>.tooltip-message--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e{transform:translate(calc(var(--spacer) * 2), 50%) scale(1)}.tooltip-content--en,.tooltip-message--en{top:0;transform-origin:top left}.tooltip-content--es,.tooltip-message--es{bottom:0;transform-origin:bottom left}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute;transform:scale(var(--scaleX), var(--scaleY))}.tooltip.--active>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--nw{transform:translateY(calc(var(--spacer) * -2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));position:absolute;right:50%;transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center bottom}.tooltip.--active>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active>.tooltip-message--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n{transform:translate(50%, calc(var(--spacer) * -2)) scale(1)}.tooltip-content--ne,.tooltip-message--ne{right:0;transform-origin:bottom right}.tooltip-content--nw,.tooltip-message--nw{left:0;transform-origin:bottom left}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{position:absolute;top:calc(100% - var(--spacer));transform:scale(var(--scaleX), var(--scaleY))}.tooltip.--active>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--sw{transform:translateY(calc(var(--spacer) * 2))}.tooltip-content--s,.tooltip-message--s{position:absolute;right:50%;top:calc(100% - var(--spacer));transform:translateX(50%) scaleY(var(--scaleY));transform-origin:center top}.tooltip.--active>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active>.tooltip-message--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s{transform:translate(50%, calc(var(--spacer) * 2)) scale(1)}.tooltip-content--se,.tooltip-message--se{right:0;transform-origin:top right}.tooltip-content--sw,.tooltip-message--sw{left:0;transform-origin:top left}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{position:absolute;right:calc(100% - var(--spacer));transform:scale(var(--scale))}.tooltip.--active>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--ws{transform:translateX(calc(var(--spacer) * -2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;position:absolute;right:calc(100% - var(--spacer));transform:translateY(50%) scaleX(var(--scaleX));transform-origin:center right}.tooltip.--active>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active>.tooltip-message--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w{transform:translate(calc(var(--spacer) * -2), 50%) scale(1)}.tooltip-content--wn,.tooltip-message--wn{top:0;transform-origin:top right}.tooltip-content--ws,.tooltip-message--ws{bottom:0;transform-origin:bottom right}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);line-height:normal;padding:var(--padding-vertical) var(--padding-horizontal);pointer-events:none;white-space:nowrap}
+.typewriter::after{animation:blink .64s infinite;content:"|"}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

package/components/variables.css

@@ -13,6 +13,7 @@
 .highlight{--background: transparent;--highlight: 1}
 .icon{--color: inherit;--height: var(--size);--margin-horizontal: var(--size-300);--size: var(--size-400);--width: var(--size)}
 .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)}
+.loader-logo{--size: 10svh;--translateY: 8px}
 .loading{--animation-duration: 0.64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}
 .magnet{--background: transparent;--border-radius: var(--border-radius-400);--timing-function: var(--timing-circ)}
 .modal{--margin-horizontal: 0px;--margin-vertical: 0px;--max-height: calc(100svh - (var(--margin-vertical) * 2));--max-width: 320px}

package/package.json

@@ -3,7 +3,7 @@
     "dependencies": {
         "@esportsplus/action": "^0.0.50",
         "@esportsplus/reactivity": "^0.3.1",
-        "@esportsplus/template": "^0.8.1"
+        "@esportsplus/template": "^0.9.0"
     },
     "devDependencies": {
         "@esportsplus/webpack": "^0.5.0",
@@ -21,5 +21,5 @@
     },
     "sideEffects": false,
     "types": "build/index.d.ts",
-    "version": "0.5.8"
+    "version": "0.6.0"
 }

package/src/components/frame/scss/index.scss

@@ -0,0 +1,12 @@
+.frame {
+    display: none;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+
+
+    &.--active {
+        display: flex;
+    }
+}

package/src/components/loader/index.ts

@@ -0,0 +1,35 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+
+
+export default ({ attributes, content }: { attributes: Record<PropertyKey, unknown>, content: any }) => {
+    let state = reactive({
+            load: false,
+            scale: false
+        });
+
+    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);'
+                        onanimationend='${({ animationName: name }: AnimationEvent) => {
+                            if (name === 'scale') {
+                                state.load = true;
+                            }
+                        }}'
+                        ${attributes}
+                    >
+                        ${content}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+}

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

@@ -0,0 +1,69 @@
+.loader {
+    background-color: var(--color-black-500);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    opacity: 1;
+    pointer-events: none;
+    right: 0;
+    top: 0;
+    transition: all 0.3s ease-in-out;
+    visibility: visible;
+    z-index: 9999;
+
+
+    &--load {
+        animation: 0.6s 0.2s ease-in-out 1 both move;
+
+        & & {
+            animation: 0.6s ease-in-out 1 both move;
+        }
+    }
+
+
+    @keyframes move {
+        0% {
+            transform: translateY(0);
+        }
+        80% {
+            transform: translateY(-102%);
+        }
+        100% {
+            transform: translateY(-102%);
+        }
+    }
+
+
+    & & {
+        background-color: var(--color-black-400);
+    }
+
+    &-content {
+        bottom: auto;
+        left: 50%;
+        position: absolute;
+        right: auto;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+    &-logo {
+        color: white;
+
+        &--scale {
+            animation: scale 0.32s 1;
+            animation-fill-mode: both;
+
+            @keyframes scale {
+                from {
+                    opacity: 1;
+                    transform: scale3d(1, 1, 1);
+                }
+                to {
+                    opacity: 0;
+                    transform: scale3d(1.8, 1.8, 1.8);
+                }
+            }
+        }
+    }
+}

package/src/components/loader/scss/variables.scss

@@ -0,0 +1,6 @@
+.loader {
+    &-logo{
+        --size: 10svh;
+        --translateY: 8px;
+    }
+}

package/src/components/loading/index.ts

@@ -0,0 +1,8 @@
+import { html } from '@esportsplus/template';
+
+
+export default (properties?: Record<PropertyKey, unknown>) => {
+    return html`
+        <div class="loading --border-width-700 --size-800" style='--border-color: var(--color-border-500);' ${properties}></div>
+    `;
+};

package/src/components/typewriter/index.ts

@@ -0,0 +1,54 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+
+
+// Prevents parent node from collapsing
+const EMPTY_NODE = html` `;
+
+
+export default (content: string[]) => {
+    let state = reactive({ text: '' });
+
+    return {
+        attributes: {
+            class: 'typewriter',
+            onmount: () => {
+                let character = 0,
+                    i = 0,
+                    isWriting = true,
+                    write = content[i];
+
+                function play() {
+                    setTimeout(() => {
+                        state.text = write.slice(0, character);
+
+                        if (isWriting) {
+                            if (character > write.length) {
+                                isWriting = false;
+                                setTimeout(play, 2000);
+                                return;
+                            }
+                            else {
+                                character++;
+                            }
+                        }
+                        else {
+                            if (character === 0) {
+                                isWriting = true;
+                                write = content[++i] || content[i = 0];
+                            }
+                            else {
+                                character--;
+                            }
+                        }
+
+                        play();
+                    }, isWriting ? 64 : 32);
+                }
+
+                play();
+            }
+        },
+        html: () => state.text || EMPTY_NODE
+    };
+};

package/src/components/typewriter/scss/index.scss

@@ -0,0 +1,15 @@
+.typewriter {
+    &::after {
+        animation: blink 0.64s infinite;
+        content: '|';
+
+        @keyframes blink {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0;
+            }
+        }
+    }
+}

package/src/index.ts

@@ -1,12 +1,13 @@
 import '@esportsplus/webpack/global.d.ts';
 
 export { default as accordion }from './components/accordion';
-export { default as aurora }from './components/aurora';
 export { default as clipboard }from './components/clipboard';
 export { default as counter }from './components/counter';
 export { default as ellipsis }from './components/ellipsis';
 export { default as form }from './components/form';
 export { default as json }from './components/json';
+export { default as loader }from './components/loader';
+export { default as loading }from './components/loading';
 export { default as magnet }from './components/magnet';
 export { default as number }from './components/number';
 export { default as page }from './components/page';
@@ -14,4 +15,5 @@ export { default as root }from './components/root';
 export { default as scrollbar }from './components/scrollbar';
 export { default as site }from './components/site';
 export { default as tooltip }from './components/tooltip';
-export { default as truncate }from './components/truncate';
+export { default as truncate }from './components/truncate';
+export { default as typewriter }from './components/typewriter';

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

@@ -1,8 +0,0 @@
-type Options = {
-    backgrounds: [string, string, string, string];
-    blur?: string;
-    opacity?: number;
-    scale?: number;
-};
-declare const _default: ({ backgrounds, blur, opacity, scale }: Options) => import("@esportsplus/template/build/types").RenderableTemplate;
-export default _default;

package/build/components/aurora/index.js

@@ -1,12 +0,0 @@
-import { html } from '@esportsplus/template';
-export default ({ backgrounds, blur, opacity, scale }) => html `
-    <div class="aurora" ${{
-    style: {
-        '--blur': blur || '50px',
-        '--opacity': opacity || 0.8,
-        '--scale': scale || 1
-    }
-}}>
-        ${backgrounds.map((bg) => html `<div style='${`--background-color: ${bg}`}'></div>`)}
-    </div>
-`;

package/src/components/aurora/index.ts

@@ -1,22 +0,0 @@
-import { html } from '@esportsplus/template';
-
-
-type Options = {
-    backgrounds: [string, string, string, string];
-    blur?: string;
-    opacity?: number;
-    scale?: number;
-};
-
-
-export default ({ backgrounds, blur, opacity, scale }: Options) => html`
-    <div class="aurora" ${{
-        style: {
-            '--blur': blur || '50px',
-            '--opacity': opacity || 0.8,
-            '--scale': scale || 1
-        }
-    }}>
-        ${backgrounds.map((bg) => html`<div style='${`--background-color: ${bg}`}'></div>`)}
-    </div>
-`;

package/src/components/aurora/scss/index.scss

@@ -1,60 +0,0 @@
-.aurora {
-    inset: 0;
-    position: absolute;
-    overflow: hidden;
-
-    div {
-        background-color: var(--background-color);
-        position: absolute;
-        filter: blur(var(--blur));
-        opacity: var(--opacity);
-
-        &:nth-child(1) {
-            animation: AuroraFirstChild 12s linear infinite;
-            border-radius: 100%;
-            height: 600px;
-            inset: -300px auto auto -50px;
-            transform: rotate(0) translate(80px) rotate(0) scale(var(--scale));
-            width: 600px;
-            z-index: 3;
-        }
-
-        &:nth-child(2) {
-            inset: auto auto -30px -80px;
-            height: 800px;
-            transform: scale(var(--scale));
-            width: 500px;
-        }
-
-        &:nth-child(3) {
-            animation: AuroraSiblings 10s linear infinite;
-            border-radius: 100%;
-            height: 450px;
-            inset: auto -100px -80px auto;
-            transform: rotate(0) translate(200px) rotate(0) scale(var(--scale));
-            width: 450px;
-        }
-
-        &:nth-child(4) {
-            animation: AuroraSiblings 15s linear infinite;
-            border-radius: 100%;
-            height: 350px;
-            inset: auto 0 0 auto;
-            margin: auto;
-            transform: rotate(0) translate(200px) rotate(0) scale(var(--scale));
-            width: 350px;
-        }
-
-        @keyframes AuroraFirstChild {
-            100% {
-                transform: rotate(2turn) translate(200px) rotate(-2turn);
-            }
-        }
-
-        @keyframes AuroraSiblings {
-            100% {
-                transform: rotate(-2turn) translate(200px) rotate(2turn);
-            }
-        }
-    }
-}