@esportsplus/ui 0.2.3 → 0.2.9

package/src/components/button/scss/variables.scss

@@ -29,7 +29,6 @@
     --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 
     @include tokens.state(active) {
@@ -59,11 +58,9 @@
         --border-color: var(--color);
         --border-width: var(--border-width-400);
         --size: var(--size-400);
+    }
 
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --border-width: var(--border-width-#{$key});
-            }
-        }
+    &--skeleton {
+        --animation-duration: 6.4s;
     }
 }

package/src/components/card/scss/variables.scss

@@ -19,7 +19,6 @@
     --box-shadow-pressed: none;
     --padding-horizontal: 0px;
     --padding-vertical: 0px;
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 
     @include tokens.state(active) {

package/src/components/clipboard/index.ts

@@ -0,0 +1,4 @@
+import write from './write';
+
+
+export default { write };

package/src/components/clipboard/write.ts

@@ -0,0 +1,9 @@
+export default async (value: string) => {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};

package/src/components/container/scss/index.scss

@@ -2,9 +2,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin: 0 auto;
-    max-width: var(--max-width);
-    padding: var(--padding-vertical) var(--padding-horizontal);
+    margin: var(--margin-vertical) auto;
     position: relative;
-    width: 100%;
+    width: min(var(--max-width), calc(100% - var(--margin-horizontal) * 2));
 }

package/src/components/container/scss/variables.scss

@@ -1,5 +1,5 @@
 .container {
+    --margin-horizontal: var(--size-600);
+    --margin-vertical: 0px;
     --max-width: 1400px;
-    --padding-horizontal: var(--size-600);
-    --padding-vertical: 0px;
 }

package/src/components/ellipsis/index.ts

@@ -0,0 +1,10 @@
+import { html } from '@esportsplus/template';
+
+
+export default (attributes?: Record<string, string>) => html`
+    <div class="ellipsis" ${attributes}>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+`;

package/src/components/ellipsis/scss/index.scss

@@ -1,72 +1,28 @@
 .ellipsis {
-    &-dot {
-        &:nth-child(1) {
-            animation: ellipsis-dot-one var(--animation-duration) linear infinite;
-        }
+    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);
 
-        &:nth-child(2) {
-            animation: ellipsis-dot-two var(--animation-duration) linear infinite;
+        :nth-child(2) {
+            animation-delay: 0.24s;
         }
 
-        &:nth-child(3) {
-            animation: ellipsis-dot-three var(--animation-duration) linear infinite;
+        :nth-child(3) {
+            animation-delay: 0.48s;
         }
     }
-}
-
-@keyframes ellipsis-dot-one {
-    0% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes ellipsis-dot-two {
-    0% {
-        opacity: 0;
-    }
-    21% {
-        opacity: 0;
-    }
-    22% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}
 
-@keyframes ellipsis-dot-three {
-    0% {
-        opacity: 0;
-    }
-    43% {
-        opacity: 0;
-    }
-    44% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
+    @keyframes Ellipsis {
+        0%, 100% {
+            opacity: 0.16;
+        }
+        20% {
+            opacity: 1;
+        }
     }
 }

package/src/components/ellipsis/scss/variables.scss

@@ -1,3 +1,5 @@
 .ellipsis {
-    --animation-duration: 2s;
+    --animation-duration: 1.24s;
+    --marign-horizontal: var(--size-100);
+    --size: var(--size-200);
 }

package/src/components/field/scss/index.scss

@@ -62,9 +62,9 @@
     }
 
     &-error {
-        animation: field-error 0.32s 1 linear;
+        animation: FieldError 0.32s 1 linear;
 
-        @keyframes field-error {
+        @keyframes FieldError {
             0% {
                 transform: translate(8px);
             }

package/src/components/field/scss/variables.scss

@@ -3,7 +3,6 @@
 @use 'text' as text;
 
 .field {
-    --transition-duration: var(--transition-duration-400);
     --width: 100%;
 
 

package/src/components/field/select.ts

@@ -55,8 +55,10 @@ function parse(keys: (number | string)[], selected: number | string) {
 
 function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
     let { attributes: a, html: h } = scrollbar({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+            attributes: {
+                style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+            },
+            fixed: true
         });
 
     return html`

package/src/components/form/action.ts

@@ -1,6 +1,6 @@
 import response from '@esportsplus/action';
 import { Action } from './types';
-import alert from '~/components/alert';
+// import alert from '~/components/alert';
 import input from './input';
 
 
@@ -45,7 +45,8 @@ export default function(action: Action) {
             event?.submitter?.classList.add('button--processing');
 
             let { errors } = await action({
-                    alert,
+                    // @ts-ignore
+                    alert: null,
                     input: parse( Object.fromEntries( new FormData( this )?.entries() ) ),
                     response
                 });

package/src/components/form/types.ts

@@ -1,5 +1,5 @@
 import response, { Response } from '@esportsplus/action';
-import alert from '~/components/alert';
+// import alert from '~/components/alert';
 
 
 type Action = (data: Payload) => Promise<Errors> | Errors;

package/src/components/grid/scss/index.scss

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

package/src/components/grid/scss/variables.scss

@@ -0,0 +1,6 @@
+.group {
+    --margin-horizontal: var(--size-400);
+    --margin-vertical: var(--size-400);
+    --max-width: 1fr;
+    --min-width: 200px;
+}

package/src/components/group/scss/index.scss

@@ -2,9 +2,9 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin: 0 calc(var(--margin-horizontal) / -2);
+    margin: 0 calc(var(--margin-horizontal) * -1);
     position: relative;
-    width: calc(100% + var(--margin-horizontal));
+    width: calc(100% + var(--margin-horizontal) * 2);
 
 
     &--offset {
@@ -25,12 +25,12 @@
 
     &-item {
         display: flex;
-        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
+        margin: var(--margin-vertical) var(--margin-horizontal) 0;
         position: relative;
         width: var(--width);
 
         &[class*='--width'] {
-            width: calc(var(--width) - var(--margin-horizontal));
+            width: calc(var(--width) - var(--margin-horizontal) * 2);
         }
     }
 }

package/src/components/icon/scss/index.scss

@@ -3,7 +3,6 @@
     display: flex;
     flex: 0 0 var(--width);
     height: var(--height);
-    pointer-events: none;
     position: relative;
     width: var(--width);
 

package/src/components/json/index.ts

@@ -0,0 +1,4 @@
+import download from './download';
+
+
+export default { download };

package/src/components/link/scss/variables.scss

@@ -23,7 +23,6 @@
     --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 
 

package/src/components/loading/scss/index.scss

@@ -1,24 +1,17 @@
 .loading {
-    animation: loading var(--animation-duration) infinite linear;
-    animation-delay: var(--animation-delay);
-    border: var(--border-width) var(--border-style) var(--border-color);
+    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%;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    box-shadow: var(--box-shadow);
-    height: var(--height);
-    pointer-events: none;
-    position: relative;
-    transition: border-color var(--transition-duration) ease-in-out;
-    width: var(--width);
-    z-index: 0;
+    height: var(--size);
+    width: var(--size);
 }
 
-@keyframes loading {
+@keyframes Loading {
     0% {
-        transform: rotate(0deg);
+        transform: rotate(0deg)
     }
     100% {
-        transform: rotate(360deg);
+        transform: rotate(360deg)
     }
-}
+}

package/src/components/loading/scss/variables.scss

@@ -1,31 +1,6 @@
 .loading {
-    --animation-delay: calc(0s + (0.032s * var(--i)));
-    --animation-duration: calc(0.64s * (var(--i) + 1.5));
-    --border-color: inherit;
-    --border-style: solid;
+    --animation-duration: 0.64s;
+    --border-color: var(--color);
     --border-width: var(--border-width-400);
-    --box-shadow: none;
-    --height: calc(var(--size) * var(--multiplier));
-    --i: 0;
-    --multiplier: calc(1 - (.2 * var(--i)));
     --size: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
-    --width: calc(var(--size) * var(--multiplier));
-
-    .loading {
-        --i: 1;
-        --size: inherit;
-
-        .loading {
-            --i: 2;
-
-            .loading {
-                --i: 3;
-
-                .loading {
-                    --i: 4;
-                }
-            }
-        }
-    }
-}
+}

package/src/components/modal/scss/index.scss

@@ -4,11 +4,12 @@
 .modal {
     @include lib.position(fixed, center);
     max-height: var(--max-height);
-    max-width: var(--max-width);
     overflow: hidden;
-    transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
     transform-origin: center;
-    width: var(--width);
+    width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
     z-index: 2;
 
     @include tokens.state(inactive) {
@@ -22,7 +23,9 @@
     }
 
     &-frame {
-        transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
         transform-origin: center;
 
         @include tokens.state(inactive) {

package/src/components/modal/scss/variables.scss

@@ -1,10 +1,6 @@
 .modal {
-    --max-height: calc(100svh - (var(--margin) * 2));
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+    --max-height: calc(100svh - (var(--margin-vertical) * 2));
     --max-width: 320px;
-    --width: calc(100svw - (var(--margin) * 2));
-
-    &,
-    &-frame {
-        --transition-duration: var(--transition-duration-300);
-    }
 }

package/src/components/page/scss/variables.scss

@@ -7,21 +7,9 @@
         --line-height: var(--line-height-400);
     }
 
-    &-suptitle + &-title {
-        &::before {
-            --line-height: 1;
-        }
-    }
-
     &-title {
         --color: var(--color-default);
         --color-default: var(--color-text-500);
         --line-height: var(--line-height-400);
     }
-
-    &-title:has(+ .page-subtitle) {
-        &::after {
-            --line-height: 1;
-        }
-    }
 }

package/src/components/root/onclick.ts

@@ -1,4 +1,4 @@
-let queue: VoidFunction[] = [];
+let queue: (VoidFunction | (() => Promise<void>))[] = [];
 
 
 const onclick = async () => {

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

@@ -3,15 +3,14 @@
 
 body {
     @include lib.css-variables(border-radius, tokens.$border-radius);
-    @include lib.css-variables(box-shadow, tokens.$box-shadow);
     @include lib.css-variables(border-width, tokens.$border-width);
+    @include lib.css-variables(box-shadow, tokens.$box-shadow);
     @include lib.css-variables(color, tokens.$color);
     @include lib.css-variables(font-size, tokens.$font-size);
     @include lib.css-variables(font-weight, tokens.$font-weight);
     @include lib.css-variables(line-height, tokens.$line-height);
     @include lib.css-variables(size, tokens.$size);
     @include lib.css-variables(spacer, tokens.$spacer);
-    @include lib.css-variables(transition-duration, tokens.$transition-duration);
 
     --background: var(--color-grey-400);
     --color: var(--color-text-400);
@@ -20,10 +19,8 @@ body {
     --font-weight: var(--font-weight-400);
     --line-height: var(--line-height-400);
     --min-width: 320px;
-
-    // Used by components requiring scrollbar width
-    // - Should be updated using JS on load
     --scrollbar-width: 17px;
+    --transition-duration: tokens.$transition-duration;
 }
 
 section {

package/src/components/scrollbar/index.ts

@@ -6,7 +6,7 @@ let root = document.body,
     width: number | undefined;
 
 
-export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
+export default ({ attributes, fixed }: { attributes?: Record<string, unknown>, fixed?: boolean } = {}) => {
     let state = reactive({
             height: 100,
             translate: 0
@@ -14,9 +14,7 @@ export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
 
     return {
         attributes: {
-            class: () => {
-                return '--scrollbar-content';
-            },
+            class: '--scrollbar-content',
             onscroll: function(this: HTMLElement) {
                 if (width === undefined) {
                     width = this.offsetWidth - this.clientWidth;
@@ -34,10 +32,10 @@ export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
             <div
                 class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
                 style='${() => `
-                    ${style || ''}
                     --translate: translate3d(0, ${state.translate}%, 0);
                     --height: ${state.height}%;
                 `}'
+                ${attributes}
             ></div>
         `
     };

package/src/components/scrollbar/scss/index.scss

@@ -20,6 +20,7 @@
         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));
     }
@@ -36,7 +37,7 @@
         right: 0;
         top: 0;
         transition: opacity var(--transition-duration) ease-in-out;
-        width: 4px;
+        width: var(--width);
     }
 
     &::before {

package/src/components/scrollbar/scss/variables.scss

@@ -1,6 +1,6 @@
 .scrollbar {
     --background-default: transparent;
     --height: 0;
-    --transition-duration: var(--transition-duration-400);
     --translate: translate3d(0, 0, 0);
+    --width: 4px;
 }

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

@@ -2,16 +2,15 @@
 @use '/tokens';
 
 .sidebar {
-    @include lib.position(absolute, var(--position-vertical) null var(--position-vertical) null);
+    @include lib.position(absolute, var(--margin-vertical) null var(--margin-vertical) null);
     cursor: default;
-    height: calc(100% - (var(--position-vertical) * 2));
-    max-width: var(--width);
+    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: calc(100% - (var(--position-horizontal) * 2));
+    width: min(var(--width), calc(100% - (var(--margin-horizontal) * 2)));
     z-index: 1;
 
 
@@ -23,7 +22,7 @@
 
 
     &--e {
-        right: var(--position-horizontal);
+        right: var(--margin-horizontal);
 
         &.sidebar--offscreen {
             @include tokens.state(inactive) {
@@ -33,7 +32,7 @@
     }
 
     &--w {
-        left: var(--position-horizontal);
+        left: var(--margin-horizontal);
 
         &.sidebar--offscreen {
             @include tokens.state(inactive) {

package/src/components/sidebar/scss/variables.scss

@@ -1,9 +1,8 @@
 @use '/tokens';
 
 .sidebar {
-    --position-horizontal: 0px;
-    --position-vertical: 0px;
-    --transition-duration: var(--transition-duration-400);
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
     --width: var(--width-default);
     --width-closed: var(--width-default);
     --width-default: 320px;
@@ -15,7 +14,7 @@
 
 
     &--floating {
-        --position-horizontal: var(--size-100);
-        --position-vertical: var(--size-100);
+        --margin-horizontal: var(--size-100);
+        --margin-vertical: var(--size-100);
     }
 }

package/src/components/site/index.ts

@@ -6,20 +6,21 @@ import scrollbar from '~/components/scrollbar';
 type Data = {
     class?: string;
     content?: any;
-    scrollbar?: {
-        style?: string;
-    };
+    scrollbar?: Parameters<typeof scrollbar>[0];
 };
 
 
 export default (data: Data) => {
-    let { attributes: a, html: h } = scrollbar({
-            fixed: true,
-            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
+    let sb = data.scrollbar ??= {};
+
+    sb.attributes ??= {};
+    sb.attributes.style ??= '--background-default: var(--color-black-400);';
+    sb.fixed ??= true;
+
+    let { attributes: a, html: h } = scrollbar(sb);
 
     return html`
-        <section class='site ${data?.class || ''}' onclick='${onclick}' ${a}>
+        <section class='site ${data?.class || ''}' ${{ onclick }} ${a}>
             ${data?.content || ''}
             ${h}
         </section>

package/src/components/text/scss/variables.scss

@@ -4,6 +4,5 @@
     --font-size: var(--font-size-400);
     --font-weight: var(--font-weight-400);
     --line-height: var(--line-height-400);
-    --transition-duration: var(--transition-duration-400);
     --width: auto;
 }