@esportsplus/ui 0.2.12 → 0.3.1

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

@@ -0,0 +1,13 @@
+declare const _default: ({ currency, delay, max, value }: {
+    currency?: "EUR" | "GBP" | "USD";
+    delay?: number;
+    max?: number;
+    value: number;
+}) => {
+    html: import("@esportsplus/template/build/types").RenderableTemplate;
+    state: {
+        value: number;
+        dispose: VoidFunction;
+    };
+};
+export default _default;

package/build/components/counter/index.js

@@ -0,0 +1,62 @@
+import { effect, reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+let formatters = {};
+export default ({ currency, delay, max, value }) => {
+    let api = reactive({ value: -1 }), formatter = formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: currency || 'USD'
+    }), rendering = true, state = reactive({
+        length: 0,
+        render: []
+    });
+    effect(() => {
+        if (api.value !== -1) {
+            value = api.value;
+        }
+        let padding = (max || value).toFixed(2).toString().length - value.toString().length, values = formatter.format(value.toString().padStart(value.toString().length + padding, '1')).split('');
+        state.length = values.length;
+        for (let i = 0, n = values.length; i < n; i++) {
+            let value = values[i];
+            if (!isNaN(parseInt(value, 10)) && (rendering === true || padding > 0)) {
+                padding--;
+                value = '0';
+            }
+            state.render[i] = value;
+        }
+        if (rendering === true) {
+            rendering = false;
+            setTimeout(() => api.value = value, delay || 1000);
+        }
+    });
+    return {
+        html: html `
+            <div class='counter'>
+                ${() => {
+            let n = state.length;
+            if (n === 0) {
+                return '';
+            }
+            return html.reactive(state.render, function (value, i) {
+                if (isNaN(parseInt(value, 10))) {
+                    return html `
+                                <span class='counter-character counter-character--symbol'>
+                                    ${value}
+                                </span>
+                            `;
+                }
+                return html `
+                            <div class='counter-character ${i > n - 3 ? 'counter-character--fraction' : ''}'>
+                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                                    <span>9</span>
+                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
+                                    <span>0</span>
+                                </div>
+                            </div>
+                        `;
+            });
+        }}
+            </div>
+        `,
+        state: api
+    };
+};

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

@@ -0,0 +1,27 @@
+type Data = {
+    copyright: {
+        attributes?: Record<string, unknown>;
+        brand: string;
+    };
+    footer?: {
+        attributes: Record<string, unknown>;
+    };
+    nav?: {
+        attributes?: Record<string, unknown>;
+        links: {
+            text: string;
+            url: string;
+        }[];
+    };
+    social?: {
+        attributes?: Record<string, unknown>;
+        links: {
+            icon: {
+                symbol: string;
+            };
+            url: string;
+        }[];
+    };
+};
+declare const _default: ({ copyright, footer, nav, social }: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/footer/index.js

@@ -0,0 +1,55 @@
+import { html, svg } from '@esportsplus/template';
+function copy({ attributes, brand }) {
+    return html `
+        <div class='footer-copyright group-item --flex-center'>
+            <div class='text --padding-vertical --padding-300 --text-300' style='--color-default: var(--color-grey-500);' ${attributes}>
+                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+            </div>
+        </div>
+    `;
+}
+export default ({ copyright, footer, nav, social }) => {
+    return html `
+        <footer class='footer' ${footer?.attributes}>
+            <div class='container'>
+                <div class='group group--offset-top --flex-center --margin-400'>
+
+                    ${nav
+        ? nav.links.map(({ text, url }) => html `
+                            <div class='group-item'>
+                                <a
+                                    class='link --color-white --padding-vertical-300 --text-300'
+                                    href='${url}'
+                                    style='--color-default: var(--color-grey-500);'
+                                    ${nav.attributes}
+                                >
+                                    ${text}
+                                </a>
+                            </div>
+                        `)
+        : copy(copyright)}
+
+                    <div class='footer-break'></div>
+
+                    ${social?.links && social.links.map(({ icon, url }) => html `
+                        <div class='group-item'>
+                            <a
+                                class='link --color-white --padding-0px'
+                                href='${url}'
+                                style='--color-default: var(--color-grey-500);'
+                                ${social.attributes}
+                            >
+                                <div class='icon --size-500'>
+                                    ${svg.sprite(icon)}
+                                </div>
+                            </a>
+                        </div>
+                    `)}
+
+                    ${nav && copy(copyright)}
+
+                </div>
+            </div>
+        </footer>
+    `;
+};

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

@@ -0,0 +1,8 @@
+declare const _default: (background: string) => {
+    attributes: {
+        class: string;
+        onrender: (element: HTMLElement & Record<PropertyKey, unknown>) => void;
+        style: (string | (() => string))[];
+    };
+};
+export default _default;

package/build/components/highlight/index.js

@@ -0,0 +1,36 @@
+import { reactive } from '@esportsplus/reactivity';
+let key = Symbol(), observer = null;
+export default (background) => {
+    if (observer === null) {
+        observer = new IntersectionObserver((entries) => {
+            let disconnected = 0, n = entries.length;
+            for (let i = 0; i < n; i++) {
+                let { isIntersecting, target } = entries[i];
+                if (target.isConnected) {
+                    target[key].highlight = +isIntersecting;
+                }
+                else {
+                    disconnected++;
+                    observer.unobserve(target);
+                }
+            }
+            if (n - disconnected === 0) {
+                observer.disconnect();
+                observer = null;
+            }
+        }, { threshold: 1 });
+    }
+    let state = reactive({
+        highlight: 0
+    });
+    return {
+        attributes: {
+            class: 'highlight',
+            onrender: function (element) {
+                element[key] = state;
+                observer.observe(element);
+            },
+            style: [`--background: ${background}`, () => `--highlight: ${state.highlight}`]
+        }
+    };
+};

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

@@ -0,0 +1,10 @@
+declare const _default: ({ attributes, hide }: {
+    attributes?: Record<string, unknown>;
+    hide?: boolean;
+}) => {
+    html: import("@esportsplus/template/build/types").RenderableTemplate;
+    sibling: {
+        attributes: Record<string, Function>;
+    };
+};
+export default _default;

package/build/components/magnet/index.js

@@ -0,0 +1,46 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+export default ({ attributes, hide }) => {
+    let active = false, events = {
+        onmouseover: function () {
+            let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
+            active = true;
+            state.height = offsetHeight;
+            state.left = offsetLeft;
+            state.opacity = 1;
+            state.top = offsetTop;
+            state.width = offsetWidth;
+        }
+    }, state = reactive({
+        height: null,
+        hide: true,
+        left: 0,
+        opacity: 0,
+        top: 0,
+        width: 0
+    });
+    if (hide === true) {
+        events.onmouseout = () => {
+            active = false;
+            setTimeout(() => {
+                if (active === true) {
+                    return;
+                }
+                state.opacity = 0;
+            }, 50);
+        };
+    }
+    return {
+        html: html `
+            <div class='magnet' style='${() => `
+                height: ${state.height ? `${state.height}px` : '100%'};
+                opacity: ${state.opacity};
+                transform: translate(${state.left}px, ${state.top}px);
+                width: ${state.width}px;
+            `}' ${attributes}></div>
+        `,
+        sibling: {
+            attributes: events
+        }
+    };
+};

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

@@ -2,10 +2,12 @@ declare const _default: ({ attributes, fixed }?: {
     attributes?: Record<string, unknown>;
     fixed?: boolean;
 }) => {
-    attributes: {
-        class: string;
-        onscroll: (this: HTMLElement) => void;
-    };
     html: import("@esportsplus/template/build/types").RenderableTemplate;
+    parent: {
+        attributes: {
+            class: string;
+            onscroll: (this: HTMLElement) => void;
+        };
+    };
 };
 export default _default;

package/build/components/scrollbar/index.js

@@ -7,19 +7,6 @@ export default ({ attributes, fixed } = {}) => {
         translate: 0
     });
     return {
-        attributes: {
-            class: '--scrollbar-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;
-            }
-        },
         html: html `
             <div
                 class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
@@ -29,6 +16,21 @@ export default ({ attributes, fixed } = {}) => {
                 `}'
                 ${attributes}
             ></div>
-        `
+        `,
+        parent: {
+            attributes: {
+                class: 'scrollbar-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;
+                }
+            }
+        }
     };
 };

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

@@ -1,8 +1,8 @@
 import scrollbar from '../../components/scrollbar';
 type Data = {
-    class?: string;
+    attributes?: Record<string, unknown>;
     content?: any;
     scrollbar?: Parameters<typeof scrollbar>[0];
 };
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: ({ attributes, content, scrollbar: sb }: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/site/index.js

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

package/build/index.d.ts

@@ -3,7 +3,6 @@ export { default as accordion } from './components/accordion';
 export { default as aurora } from './components/aurora';
 export { default as clipboard } from './components/clipboard';
 export { default as ellipsis } from './components/ellipsis';
-export { default as field } from './components/field';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
 export { default as number } from './components/number';

package/build/index.js

@@ -3,7 +3,6 @@ export { default as accordion } from './components/accordion';
 export { default as aurora } from './components/aurora';
 export { default as clipboard } from './components/clipboard';
 export { default as ellipsis } from './components/ellipsis';
-export { default as field } from './components/field';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
 export { default as number } from './components/number';

package/components/styles.css

@@ -1,24 +1,27 @@
 .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)}}
+.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)}
 .button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat::after{display:none}.button--processing{color:rgba(0,0,0,0);pointer-events:none}.button--processing::before{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);animation:ButtonProcessing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);border-radius:100%;border-right-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);content:"";height:var(--size);width:var(--size)}.button--processing *{opacity:0}@keyframes ButtonProcessing{0%{transform:translate(50%, 50%) rotate(0deg)}100%{transform:translate(50%, 50%) rotate(359deg)}}.button--skeleton{animation:var(--animation-duration) ease-in-out infinite ButtonSkeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));background-size:400% 100%;color:rgba(0,0,0,0);pointer-events:none}.button--skeleton *{opacity:0}@keyframes ButtonSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
 .card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat::after{display:none}
 .container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:var(--margin-vertical) auto;position:relative;width:min(var(--max-width),100% - var(--margin-horizontal)*2)}
+.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}}
-button,input,select,textarea{background:rgba(0,0,0,0);border-radius:0;border:0;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{margin:0;padding:0;width:100%}label{cursor:pointer}.field{display:flex;position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width);z-index:1}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);position:relative;width:100%;word-wrap:break-word}.field-description:empty,.field-error:empty,.field-title:empty{height:0px;margin:0}.field-error{animation:FieldError .32s 1 linear}@keyframes FieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}100%{transform:translate(0px)}}.field-mask::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:0}.field-mask--flat::after{display:none}.field-mask--outline::before{position:absolute;inset:0 0 0 0;box-shadow:0 0 0 var(--outline-width) var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{position:absolute;top:0;left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0px;opacity:0;pointer-events:none;width:0px;z-index:-1}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:var(--width)}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox::before,.field-mask--radio::before,.field-mask--switch::before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{position:absolute;top:0;left:0;height:0px;opacity:0;pointer-events:none;width:0px;z-index:0}.field-mask--checkbox::before,.field-mask--radio::before{position:absolute;bottom:50%;right:50%}.field-mask--radio::before,.field-mask--switch::before{background:var(--accent);border-radius:inherit;transform-origin:center}.field-mask--checkbox::before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);transform-origin:center left}.field-mask--switch::before{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal)}.field-mask--input,.field-mask--select{align-items:center;background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);display:flex;flex-wrap:wrap;font-size:var(--font-size);line-height:var(--line-height);position:relative;width:100%}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{flex:1 1 auto;padding:var(--padding-vertical) var(--padding-horizontal);min-width:0}.field-mask--input .field-tag[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.field-mask--input textarea.field-tag{white-space:normal}.field-mask--select{cursor:pointer;padding:var(--padding-vertical) calc(var(--padding-horizontal)/1.5 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{position:absolute;right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width) var(--border-width) 0;content:"";height:var(--arrow-size);transform:translateY(50%) rotate(45deg);width:var(--arrow-size)}.field-text{padding-right:var(--padding-horizontal)}
+.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%}
 .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}
-.group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)*-1);position:relative;width:calc(100% + var(--margin-horizontal)*2)}.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) var(--margin-horizontal) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal)*2)}
+.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}
 .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}
-.page{min-height:100svh;position:relative;width:100vw}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-suptitle+.page-title,.page-title+.page-subtitle{margin-top:var(--margin-vertical)}
-body,html{height:100%;overflow-x:hidden;width:100%}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::after,*::before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;width:100%;word-wrap:break-word}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{color:var(--color, inherit);cursor:pointer;outline:none;text-decoration:none}b,strong{color:var(--color, inherit);font-weight:var(--font-weight)}p{margin:0;padding:0;width:100%;word-wrap:break-word}pre{margin:0;overflow-wrap:break-word;padding:0;white-space:break-spaces;width:100%}sub,sup{font-size:.8em}sub{bottom:-0.48em}sup{top:-0.48em}
+.page{min-height:100svh;position:relative;width:100vw}.page-subtitle,.page-suptitle,.page-title{color:var(--color);display:block;line-height:var(--line-height);position:relative;width:100%;z-index:1}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-suptitle+.page-title,.page-title+.page-subtitle{margin-top:var(--margin-vertical)}.page-title{text-wrap:balance}
+body,html{height:100%;overflow-x:hidden;width:100%}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::after,*::before{box-sizing:border-box;transition:inherit}section{align-content:flex-start;display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:var(--width)}h1,h2,h3,h4,h5{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);margin:0;padding:0;position:relative;text-wrap:balance;width:100%;word-wrap:break-word}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{color:var(--color, inherit);cursor:pointer;outline:none;text-decoration:none}b,strong{color:var(--color, inherit);font-weight:var(--font-weight)}p{margin:0;padding:0;width:100%;word-wrap:break-word}pre{margin:0;overflow-wrap:break-word;padding:0;white-space:break-spaces;width:100%}sub,sup{font-size:.8em}sub{bottom:-0.48em}sup{top:-0.48em}
 .row{display:flex;flex-wrap:wrap;justify-content:flex-start;position:relative;width:100%}
-::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,0);box-shadow:unset}.--scrollbar-container{display:flex;flex-flow:column;overflow:hidden;position:relative}.--scrollbar-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar::before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar::before{background:var(--background-default);border-radius:1px 0 0 1px;content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}
+::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,0);box-shadow:unset}.scrollbar{height:100%;z-index:9}.scrollbar,.scrollbar::before{position:absolute;right:0;top:0;transition:opacity var(--transition-duration) ease-in-out;width:var(--width)}.scrollbar::before{background:var(--background-default);border-radius:1px 0 0 1px;content:"";height:var(--height);transform:var(--translate);transform-origin:top center}.scrollbar--fixed{position:fixed}.scrollbar--hidden{opacity:0}.scrollbar-container{display:flex;flex-flow:column;overflow:hidden;position:relative}.scrollbar-content{height:100%;margin-right:calc(var(--scrollbar-width)*-1);overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable;scroll-behavior:smooth;width:calc(100% + var(--scrollbar-width))}.scrollbar-content--snap{overflow:auto;scroll-snap-type:both mandatory;overscroll-behavior-x:contain}.scrollbar-content--snap>*{scroll-snap-stop:normal;scroll-snap-align:center}
 .sidebar{position:absolute;top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical)*2);overflow:hidden;transition:max-width var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;width:min(var(--width),100% - var(--margin-horizontal)*2);z-index:1}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width) * -1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}
 .site{z-index:0}
 .text{align-items:center;color:var(--color);display:flex;flex-flow:wrap;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)}

package/components/variables.css

@@ -6,16 +6,18 @@
 .button{--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;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--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-400);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--width: auto}.button.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active)}.button:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover)}.button:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed)}.button--processing{--animation-duration: 0.64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}.button--skeleton{--animation-duration: 6.4s}
 .card{--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);--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-300);--box-shadow-pressed: none;--padding-horizontal: 0px;--padding-vertical: 0px;--width: auto}.card.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active)}.card:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover)}.card:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed)}
 .container{--margin-horizontal: var(--size-600);--margin-vertical: 0px;--max-width: 1400px}
+.counter{--font-size: clamp(2rem, 4vw + 1rem, 8rem);--line-height: calc(var(--font-size) * 1.5);--mask-size: 0.24;--timing-function: var(--timing-bounce-out);--transition-duration: 2s}.counter-character{--font-weight: var(--font-weight-400);--scale: 1}.counter-character--fraction,.counter-character--symbol{--opacity: 0.8}.counter-character--fraction{--font-weight: var(--font-weight-300);--scale: 0.75}.counter-character--symbol:first-child{--scale: 0.8}
 .ellipsis{--animation-duration: 1.24s;--marign-horizontal: var(--size-100);--size: var(--size-200)}
-.field{--width: 100%}.field--optional{--max-height: 0;--max-height-active: 0}.field.--active .field--optional{--max-height: var(--max-height-active)}.field-description,.field-error{--font-size: var(--font-size-300)}.field-error{--color: var(--color-red-400)}.field-mask{--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-default: var(--background);--border-radius: var(--border-radius-400);--border-style: solid;--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-400);--box-shadow-default: var(--box-shadow-300);--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--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);--outline-opacity: var(--outline-opacity-default);--outline-opacity-active: 0.32;--outline-opacity-default: 0;--outline-opacity-hover: 0;--outline-opacity-pressed: 0;--outline-spacing: 0px;--outline-width: var(--outline-width-default);--outline-width-active: 4px;--outline-width-default: 0px;--outline-width-hover: 0px;--outline-width-pressed: 0px;--padding-horizontal: 0px;--padding-vertical: var(--size-400)}.field.--active>.field-mask,.field.--active *:not(.field) .field-mask{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active);--outline-opacity: var(--outline-opacity-active);--outline-width: var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color: var(--border-color-default)}.field-mask--outline:not(.--active):active::before{--outline-width: 0px}.field-required{--border-radius: var(--border-radius-circle);--size: 6px}.field-title{--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)}.field.--active .field-title{--color: var(--color-active)}.field:not(.--active):hover .field-title{--color: var(--color-hover)}.field:not(.--active):active .field-title{--color: var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent: var(--accent-default);--accent-active: var(--accent-default);--accent-default: var(--color-white-400);--accent-hover: var(--accent-default);--accent-pressed: var(--accent-default);--height: var(--size);--opacity: var(--opacity-default);--opacity-active: var(--opacity-default);--opacity-default: 1;--opacity-hover: var(--opacity-default);--opacity-pressed: var(--opacity-default);--rotate: 0deg;--scale: var(--scale-default);--scale-active: var(--scale-default);--scale-default: 1;--scale-hover: var(--scale-default);--scale-pressed: var(--scale-default);--size: var(--size-600);--width-switch: 40px}.field-mask--checkbox::before,.field-mask--radio::before,.field-mask--switch::before{--translateX: 0px;--translateY: 0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent: var(--accent-hover);--opacity: var(--opacity-hover);--scale: var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent: var(--accent-pressed);--opacity: var(--opacity-pressed);--scale: var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent: var(--accent-active);--opacity: var(--opacity-active);--scale: var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal: calc(var(--width-switch) - var(--width));--width: var(--height)}.field-mask--radio::before,.field-mask--switch::before{--box-shadow: 0 1px 0 rgba(0,0,0, 0.16)}.field-mask--checkbox{--border-radius: var(--border-radius-300);--rotate: 45deg;--scale-active: 1;--scale-default: 0;--scale-hover: 1.08;--scale-pressed: 0.98}.field-mask--checkbox::before{--box-shadow: 1px 1px 0 rgba(0,0,0, 0.16);--border-width: 5px;--height: 110%;--translateX: 108%;--translateY: 8%;--width: 50%}.field:not(.--active):not(:hover) .field-mask--checkbox::before{--translateY: 100%}.field-mask--radio{--border-radius: var(--border-radius-circle);--opacity-active: 1;--opacity-default: 0.4;--scale-active: 0.9;--scale-default: 0;--scale-hover: 0.8;--scale-pressed: 0.7}.field-mask--radio::before{--height: calc((var(--size) / 2) - (var(--border-width) * 2));--translateX: 50%;--translateY: 50%;--width: var(--height)}.field-mask--switch{--border-radius: var(--border-radius-curved);--padding-horizontal: var(--border-width-400);--padding-vertical: var(--border-width-400);--width: var(--width-switch)}.field-mask--switch::before{--height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));--width: var(--height)}.field.--active .field-mask--switch::before{--translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.field-mask--input,.field-mask--select{--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.field-mask--input{--size: var(--size-400)}.field-mask--select{--arrow-spacer: 1px;--arrow-size: 6px}.field-mask-arrow{--border-width: var(--border-width-500)}
 .group{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400);--max-width: 1fr;--min-width: 200px}
 .group{--margin-horizontal: var(--size-400);--width: auto}.group.--flex-column .group-item{--width: 100%}.group--scroller .group-item{--margin-vertical: 0px}
+.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: var(--size-400);--padding-vertical: var(--size-400);--width: auto}.link.--active{--background: var(--background-active);--border-color: var(--border-color-active);--color: var(--color-active)}.link:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--color: var(--color-hover)}.link:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--color: var(--color-pressed)}
+.link{--background: var(--background-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)}
 .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}
 .page-subtitle,.page-suptitle{--color: var(--color-default);--color-default: var(--color-text-400);--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.page-title{--color: var(--color-default);--color-default: var(--color-text-500);--line-height: var(--line-height-400)}
-body{--border-radius-0px: 0px;--border-radius-circle: 100%;--border-radius-curved: 240px;--border-radius-100: 2px;--border-radius-200: 4px;--border-radius-300: 6px;--border-radius-400: 8px;--border-radius-500: 12px;--border-radius-600: 16px;--border-width-400: 1px;--border-width-500: 2px;--border-width-600: 3px;--border-width-700: 4px;--box-shadow-300: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-400: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-500: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--color-black-300: #0f1325;--color-black-400: #04081a;--color-black-500: #000313;--color-blue-300: #3453ff;--color-blue-400: #2a4bff;--color-blue-500: #2343f8;--color-border-300: #c4c9df;--color-border-400: #b4b9d2;--color-border-500: #a5a9c3;--color-green-300: #5fff81;--color-green-400: #2aff57;--color-green-500: #23f850;--color-grey-300: #f2f9ff;--color-grey-400: #e7f1fa;--color-grey-500: #dde8f0;--color-purple-300: #6634ff;--color-purple-400: #5e2aff;--color-purple-500: #5723f8;--color-red-300: #ff3446;--color-red-400: #ff2a3d;--color-red-500: #f82336;--color-text-300: #676c84;--color-text-400: #393d57;--color-text-500: #1f2542;--color-white-300: #fff;--color-white-400: #fff;--color-white-500: #fff;--color-yellow-300: #fff95f;--color-yellow-400: #fff92a;--color-yellow-500: #f8f123;--font-size-100: 8px;--font-size-200: 10px;--font-size-300: 12px;--font-size-400: 14px;--font-size-500: 16px;--font-size-600: 24px;--font-size-700: 32px;--font-size-800: 40px;--font-weight-300: 400;--font-weight-400: 500;--font-weight-500: 600;--font-weight-600: 700;--line-height-100: 1;--line-height-200: 1.2;--line-height-300: 1.4;--line-height-400: 1.6;--size-0px: 0px;--size-100: 4px;--size-200: 8px;--size-300: 12px;--size-400: 16px;--size-500: 20px;--size-600: 24px;--size-700: 32px;--size-800: 40px;--size-900: 48px;--spacer-300: 48px;--spacer-400: 96px;--spacer-500: 144px;--background: var(--color-grey-400);--color: var(--color-text-400);--font-family: "Montserrat", sans-serif;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--min-width: 320px;--scrollbar-width: 17px;--transition-duration: tokens.$transition-duration}section{--width: 100%}h1,h2,h3,h4,h5{--color: var(--color-text-400);--font-weight: var(--font-weight-600);--line-height: var(--line-height-300)}h1{--font-size: var(--font-size-800)}h2{--font-size: var(--font-size-700)}h3{--font-size: var(--font-size-600)}h4{--font-size: var(--font-size-500)}h5{--font-size: var(--font-size-400)}b,strong{--color: var(--color-text-400);--font-weight: var(--font-weight-500)}
+:root{--border-radius-0px: 0px;--border-radius-circle: 100%;--border-radius-curved: 240px;--border-radius-100: 2px;--border-radius-200: 4px;--border-radius-300: 6px;--border-radius-400: 8px;--border-radius-500: 12px;--border-radius-600: 16px;--border-width-400: 1px;--border-width-500: 2px;--border-width-600: 3px;--border-width-700: 4px;--box-shadow-300: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-400: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-500: 0 0 0 1px hsla(214, 80%, 27%, 0.04), 0 1px 1px -0.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 3px 3px -1.5px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 6px 6px -3px hsl(from hsla(214, 80%, 27%, 0.04) calc(h + 8) 25 calc(l - 5)), 0 12px 12px -6px hsla(214, 80%, 27%, 0.04), 0 24px 24px -12px hsla(214, 80%, 27%, 0.04);--box-shadow-glow: 0px 0px 128px 32px var(--box-shadow-color, #fff), 0px 0px 32px 8px var(--box-shadow-color, #fff), 0px 0px 8px 0px var(--box-shadow-color, #fff);--color-black-300: #0f1325;--color-black-400: #04081a;--color-black-500: #000313;--color-blue-300: #3453ff;--color-blue-400: #2a4bff;--color-blue-500: #2343f8;--color-border-300: #c4c9df;--color-border-400: #b4b9d2;--color-border-500: #a5a9c3;--color-green-300: #5fff81;--color-green-400: #2aff57;--color-green-500: #23f850;--color-grey-300: #f2f9ff;--color-grey-400: #e7f1fa;--color-grey-500: #dde8f0;--color-purple-300: #6634ff;--color-purple-400: #5e2aff;--color-purple-500: #5723f8;--color-red-300: #ff3446;--color-red-400: #ff2a3d;--color-red-500: #f82336;--color-text-300: #676c84;--color-text-400: #393d57;--color-text-500: #1f2542;--color-white-300: #fff;--color-white-400: #fff;--color-white-500: #fff;--color-yellow-300: #fff95f;--color-yellow-400: #fff92a;--color-yellow-500: #f8f123;--font-size-100: clamp(0.48rem, 0.04vi + 0.47rem, 0.51rem);--font-size-200: clamp(0.56rem, 0.08vi + 0.54rem, 0.61rem);--font-size-300: clamp(0.65rem, 0.13vi + 0.61rem, 0.73rem);--font-size-400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem);--font-size-500: clamp(0.87rem, 0.29vi + 0.8rem, 1.05rem);--font-size-600: clamp(1.01rem, 0.4vi + 0.91rem, 1.26rem);--font-size-700: clamp(1.17rem, 0.55vi + 1.03rem, 1.51rem);--font-size-800: clamp(1.36rem, 0.73vi + 1.18rem, 1.81rem);--font-size-900: clamp(1.58rem, 0.96vi + 1.33rem, 2.18rem);--font-weight-300: 400;--font-weight-400: 500;--font-weight-500: 600;--font-weight-600: 700;--line-height-100: 1;--line-height-200: 1.2;--line-height-300: 1.4;--line-height-400: 1.6;--size-0px: 0px;--size-100: 4px;--size-200: 8px;--size-300: 12px;--size-400: 16px;--size-500: 20px;--size-600: 24px;--size-700: 32px;--size-800: 40px;--size-900: 48px;--spacer-300: 48px;--spacer-400: 96px;--spacer-500: 144px;--background: var(--color-grey-400);--color: var(--color-text-400);--font-family: "Montserrat", sans-serif;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--min-width: 320px;--scrollbar-width: 17px;--transition-duration: 0.16s;--timing-back: linear( 0, -0.0059 4.51%, -0.0418 15.63%, -0.0499 20.72%, -0.0476 23.51%, -0.0395 26.12%, -0.0255 28.59%, -0.0055 30.95%, 0.0281 33.76%, 0.0717 36.47%, 0.1901 41.63%, 0.344 46.32%, 0.6156 52.65%, 0.7495 56.35%, 0.8757 60.97%, 0.9663 65.85%, 1.0006 68.58%, 1.0256 71.43%, 1.0417 74.43%, 1.0493 77.65%, 1.0452 83.02%, 1.0077 94.8%, 1 );--timing-back-in: linear( 0, -0.0029 4.31%, -0.0119 9.02%, -0.0837 31.27%, -0.0954 36.64%, -0.0998 41.45%, -0.0951 47.03%, -0.079 52.25%, -0.051 57.19%, -0.0108 61.92%, 0.0515 67.19%, 0.1312 72.27%, 0.2286 77.18%, 0.3445 81.96%, 0.4792 86.62%, 0.633 91.17%, 0.8066 95.63%, 1 );--timing-back-out: linear( 0, 0.1934 4.37%, 0.367 8.83%, 0.5208 13.38%, 0.6555 18.04%, 0.7714 22.82%, 0.8688 27.73%, 0.9485 32.81%, 1.0108 38.08%, 1.051 42.81%, 1.079 47.75%, 1.0951 52.97%, 1.0998 58.55%, 1.0954 63.36%, 1.0837 68.73%, 1.0119 90.98%, 1.0029 95.69%, 1 );--timing-bounce: linear( 0, 0.0078, 0, 0.0235, 0.0313, 0.0235, 0.0001 13.63%, 0.0549 15.92%, 0.0938, 0.1172, 0.125, 0.1172, 0.0939 27.26%, 0.0554 29.51%, 0.0003 31.82%, 0.2192, 0.3751 40.91%, 0.4332, 0.4734 45.8%, 0.4947 48.12%, 0.5027 51.35%, 0.5153 53.19%, 0.5437, 0.5868 57.58%, 0.6579, 0.7504 62.87%, 0.9999 68.19%, 0.9453, 0.9061, 0.8828, 0.875, 0.8828, 0.9063, 0.9451 84.08%, 0.9999 86.37%, 0.9765, 0.9688, 0.9765, 1, 0.9922, 1 );--timing-bounce-in: linear( 0, 0.0117, 0.0156, 0.0117, 0, 0.0273, 0.0468, 0.0586, 0.0625, 0.0586, 0.0468, 0.0273, 0 27.27%, 0.1093, 0.1875 36.36%, 0.2148, 0.2343, 0.2461, 0.25, 0.2461, 0.2344, 0.2148 52.28%, 0.1875 54.55%, 0.1095, 0, 0.2341, 0.4375, 0.6092, 0.75, 0.8593, 0.9375 90.91%, 0.9648, 0.9843, 0.9961, 1 );--timing-bounce-out: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--timing-circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--timing-circ-in: linear( -0, 0.0048 9.8%, 0.0192 19.5%, 0.043 29.02%, 0.0761 38.26%, 0.1181 47.13%, 0.1685 55.56%, 0.227 63.44%, 0.2929 70.71%, 0.3656 77.3%, 0.4445 83.15%, 0.5285 88.19%, 0.6173 92.39%, 0.7099 95.7%, 0.805 98.08%, 0.9021 99.52%, 1 );--timing-circ-out: linear( 0, 0.0979 0.48%, 0.195 1.92%, 0.2901 4.3%, 0.3827 7.61%, 0.4715 11.81%, 0.5555 16.85%, 0.6344 22.7%, 0.7071 29.29%, 0.773 36.56%, 0.8315 44.44%, 0.8819 52.87%, 0.9239 61.74%, 0.957 70.98%, 0.9808 80.5%, 0.9952 90.2%, 1 );--timing-elastic: linear( 0, -0.0028 13.88%, 0.0081 21.23%, 0.002 23.37%, -0.0208 27.14%, -0.023 28.64%, -0.0178, -0.0061 30.83%, 0.0588 34.64%, 0.0651 35.39%, 0.0653 36.07%, 0.0514, 0.0184 38.3%, -0.1687 42.21%, -0.1857 43.04%, -0.181 43.8%, -0.1297 44.93%, -0.0201 46.08%, 1.0518 54.2%, 1.1471, 1.1853 56.48%, 1.1821 57.25%, 1.1573 58.11%, 0.9709 62%, 0.9458, 0.9347 63.92%, 0.9349 64.61%, 0.9412 65.36%, 1.0061 69.17%, 1.0178, 1.023 71.36%, 1.0208 72.86%, 0.998 76.63%, 0.9919 78.77%, 1.0028 86.12%, 1 );--timing-elastic-in: linear( 0, 0.0019 13.34%, -0.0056 27.76%, -0.0012 31.86%, 0.0147 39.29%, 0.0161 42.46%, 0.0039 46.74%, -0.0416 54.3%, -0.046 57.29%, -0.0357, -0.0122 61.67%, 0.1176 69.29%, 0.1302 70.79%, 0.1306 72.16%, 0.1088 74.09%, 0.059 75.99%, -0.0317 78.19%, -0.3151 83.8%, -0.3643 85.52%, -0.3726, -0.3705 87.06%, -0.3463, -0.2959 89.3%, -0.1144 91.51%, 0.7822 97.9%, 1 );--timing-elastic-out: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 );--timing-expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--timing-expo-in: linear( 0, 0.0085 31.26%, 0.0167 40.94%, 0.0289 48.86%, 0.0471 55.92%, 0.0717 61.99%, 0.1038 67.32%, 0.1443 72.07%, 0.1989 76.7%, 0.2659 80.89%, 0.3465 84.71%, 0.4419 88.22%, 0.554 91.48%, 0.6835 94.51%, 0.8316 97.34%, 1 );--timing-expo-out: linear( 0, 0.1684 2.66%, 0.3165 5.49%, 0.446 8.52%, 0.5581 11.78%, 0.6535 15.29%, 0.7341 19.11%, 0.8011 23.3%, 0.8557 27.93%, 0.8962 32.68%, 0.9283 38.01%, 0.9529 44.08%, 0.9711 51.14%, 0.9833 59.06%, 0.9915 68.74%, 1 );--timing-none: linear(0, 1);--timing-power1: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );--timing-power1-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );--timing-power1-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );--timing-power2: linear( 0, 0.0036 9.62%, 0.0185 16.66%, 0.0489 23.03%, 0.0962 28.86%, 0.1705 34.93%, 0.269 40.66%, 0.3867 45.89%, 0.5833 52.95%, 0.683 57.05%, 0.7829 62.14%, 0.8621 67.46%, 0.8991 70.68%, 0.9299 74.03%, 0.9545 77.52%, 0.9735 81.21%, 0.9865 85%, 0.9949 89.15%, 1 );--timing-power2-in: linear( 0, 0.0014 11.11%, 0.0071 19.24%, 0.0188 26.6%, 0.037 33.33%, 0.0634 39.87%, 0.0978 46.07%, 0.1407 52.02%, 0.1925 57.74%, 0.2559 63.49%, 0.3295 69.07%, 0.4135 74.5%, 0.5083 79.81%, 0.6141 85%, 0.7312 90.09%, 1 );--timing-power2-out: linear( 0, 0.2688 9.91%, 0.3859 15%, 0.4917 20.19%, 0.5865 25.5%, 0.6705 30.93%, 0.7441 36.51%, 0.8075 42.26%, 0.8593 47.98%, 0.9022 53.93%, 0.9366 60.13%, 0.963 66.67%, 0.9812 73.4%, 0.9929 80.76%, 0.9986 88.89%, 1 );--timing-power3: linear( 0, 0.0029 13.8%, 0.0184 21.9%, 0.0339 25.51%, 0.0551 28.81%, 0.0827 31.88%, 0.1168 34.76%, 0.1962 39.57%, 0.3005 44.02%, 0.4084 47.53%, 0.6242 53.45%, 0.7493 57.93%, 0.8495 62.97%, 0.8888 65.67%, 0.9213 68.51%, 0.9629 73.9%, 0.9876 80.16%, 0.998 87.5%, 1 );--timing-power3-in: linear( 0, 0.0039 25%, 0.0117 32.89%, 0.0248 39.68%, 0.0457 46.22%, 0.0743 52.21%, 0.1113 57.77%, 0.1575 63%, 0.218 68.33%, 0.2901 73.39%, 0.3745 78.23%, 0.4718 82.88%, 0.5827 87.37%, 0.7074 91.71%, 0.8462 95.91%, 1 );--timing-power3-out: linear( 0, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17.12%, 0.6255 21.77%, 0.7099 26.61%, 0.782 31.67%, 0.8425 37%, 0.8887 42.23%, 0.9257 47.79%, 0.9543 53.78%, 0.9752 60.32%, 0.9883 67.11%, 0.9961 75%, 1 );--timing-power4: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--timing-power4-in: linear( 0, 0.0024 29.91%, 0.008 38.03%, 0.0179 44.72%, 0.035 51.16%, 0.0595 56.88%, 0.0922 62.08%, 0.1338 66.88%, 0.1914 71.85%, 0.262 76.5%, 0.3461 80.88%, 0.4447 85.04%, 0.5587 89.01%, 0.689 92.82%, 0.8359 96.48%, 1 );--timing-power4-out: linear( 0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.96%, 0.6539 19.12%, 0.738 23.5%, 0.8086 28.15%, 0.8662 33.12%, 0.9078 37.92%, 0.9405 43.12%, 0.965 48.84%, 0.9821 55.28%, 0.992 61.97%, 0.9976 70.09%, 1 );--timing-quad: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 );--timing-quad-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 );--timing-quad-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 );--timing-sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--timing-sine-in: linear( 0, 0.0035, 0.0141 10.7%, 0.0318 16.09%, 0.0566 21.51%, 0.0885 26.98%, 0.1278 32.53%, 0.2288 43.93%, 0.3563 55.48%, 0.5171 67.92%, 0.7139 81.53%, 1 );--timing-sine-out: linear( 0, 0.2861 18.47%, 0.4829 32.08%, 0.6437 44.52%, 0.7712 56.07%, 0.8722 67.47%, 0.9115 73.02%, 0.9434 78.49%, 0.9682 83.91%, 0.9859 89.3%, 0.9965, 1 )}section{--width: 100%}h1,h2,h3,h4,h5{--color: var(--color-text-400);--font-weight: var(--font-weight-600);--line-height: var(--line-height-300)}h1{--font-size: var(--font-size-900)}h2{--font-size: var(--font-size-800)}h3{--font-size: var(--font-size-700)}h4{--font-size: var(--font-size-600)}h5{--font-size: var(--font-size-500)}b,strong{--color: var(--color-text-400);--font-weight: var(--font-weight-500)}
 .scrollbar{--background-default: transparent;--height: 0;--translate: translate3d(0, 0, 0);--width: 4px}
 .sidebar{--margin-horizontal: 0px;--margin-vertical: 0px;--width: var(--width-default);--width-closed: var(--width-default);--width-default: 320px}.sidebar:not(.--active):not(:hover){--width: var(--width-closed)}.sidebar--floating{--margin-horizontal: var(--size-100);--margin-vertical: var(--size-100)}
 .text{--color: var(--color-default);--color-default: inherit;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--width: auto}

package/normalize.css

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

package/package.json

@@ -2,12 +2,12 @@
     "author": "ICJR",
     "dependencies": {
         "@esportsplus/action": "^0.0.50",
-        "@esportsplus/reactivity": "^0.2.4",
-        "@esportsplus/template": "^0.5.1"
+        "@esportsplus/reactivity": "^0.2.6",
+        "@esportsplus/template": "^0.6.1"
     },
     "devDependencies": {
         "@esportsplus/webpack": "^0.4.11",
-        "modern-normalize": "^2.0.0"
+        "modern-normalize": "^3.0.0"
     },
     "main": "build/index.js",
     "name": "@esportsplus/ui",
@@ -21,5 +21,5 @@
     },
     "sideEffects": false,
     "types": "build/index.d.ts",
-    "version": "0.2.12"
+    "version": "0.3.1"
 }

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

@@ -9,7 +9,7 @@
         filter: blur(var(--blur));
         opacity: var(--opacity);
 
-        :nth-child(1) {
+        &:nth-child(1) {
             animation: AuroraFirstChild 12s linear infinite;
             border-radius: 100%;
             height: 600px;
@@ -19,14 +19,14 @@
             z-index: 3;
         }
 
-        :nth-child(2) {
+        &:nth-child(2) {
             inset: auto auto -30px -80px;
             height: 800px;
             transform: scale(var(--scale));
             width: 500px;
         }
 
-        :nth-child(3) {
+        &:nth-child(3) {
             animation: AuroraSiblings 10s linear infinite;
             border-radius: 100%;
             height: 450px;
@@ -35,7 +35,7 @@
             width: 450px;
         }
 
-        :nth-child(4) {
+        &:nth-child(4) {
             animation: AuroraSiblings 15s linear infinite;
             border-radius: 100%;
             height: 350px;