@esportsplus/ui 0.2.5 → 0.2.9

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;
 }

package/src/components/tooltip/index.ts

@@ -1,9 +1,8 @@
 import { reactive } from '@esportsplus/reactivity';
-import menu from './menu';
 import root from '~/components/root';
 
 
-let queue: VoidFunction[] = [],
+let queue: (VoidFunction | (() => Promise<void>))[] = [],
     running = false,
     scheduled = false;
 
@@ -25,16 +24,8 @@ async function frame() {
 }
 
 
-const onclick = (data: { active?: boolean, menu?: Parameters<typeof menu>[0], toggle?: boolean } = {}) => {
-    let content,
-        state = reactive({
-            active: data.active || false,
-            render: undefined as boolean | undefined
-        });
-
-    if (data.menu) {
-        content = menu(data.menu, state);
-    }
+const onclick = (data: { active?: boolean, toggle?: boolean } = {}) => {
+    let state = reactive({ active: data.active || false });
 
     return {
         attributes: {
@@ -65,16 +56,12 @@ const onclick = (data: { active?: boolean, menu?: Parameters<typeof menu>[0], to
                 }
             }
         },
-        content,
         state
     };
 };
 
 const onhover = (active: boolean = false) => {
-    let state = reactive({
-            active,
-            render: undefined as boolean | undefined
-        });
+    let state = reactive({ active });
 
     return {
         attributes: {

package/src/components/tooltip/scss/variables.scss

@@ -10,7 +10,6 @@
         --scaleX: 0.64;
         --scaleY: 0.64;
         --spacer: var(--size-300);
-        --transition-duration: var(--transition-duration-300);
         --width: auto;
     }
 

package/src/css-utilities/absolute/scss/index.scss

@@ -1,26 +1,15 @@
 @use '/lib';
 
 .--absolute {
-    &-bottom,
-    &-top {
-        left: 0;
-        position: absolute;
-        right: 0;
-    }
-
-    &-left,
-    &-right {
-        bottom: 0;
-        position: absolute;
-        top: 0;
-    }
-
-    &-center {
-        @include lib.position(absolute, center);
-    }
+    &-horizontal,
+    &-vertical {
+        &-bottom {
+            bottom: 0;
+        }
 
-    &-full {
-        @include lib.position(absolute, full);
+        &-top {
+            top: 0;
+        }
     }
 
     &-horizontal {
@@ -39,21 +28,9 @@
         }
     }
 
-    @each $direction in 'bottom' 'top' {
-        &,
-        &-horizontal {
-            &-#{$direction} {
-                #{$direction}: 0;
-            }
-        }
-    }
-
-    @each $direction in 'left' 'right' {
-        &,
-        &-vertical {
-            &-#{$direction} {
-                #{$direction}: 0;
-            }
+    @each $direction in 'bottom' 'center' 'full' 'left' 'right' 'top' {
+        &-#{$direction} {
+            @include lib.position(absolute, $direction);
         }
     }
 }

package/src/css-utilities/hidden/scss/index.scss

@@ -16,7 +16,7 @@
         }
     }
 
-    &-visibility {
+    &-offcanvas {
         @include lib.position(absolute, 0 null null 0);
         appearance: none;
         height: 0px;

package/src/css-utilities/squircle/scss/index.scss

@@ -0,0 +1,5 @@
+.--squircle {
+    aspect-ratio: 1; // square
+    clip-path: polygon(100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, 99.56% 71.64%, 99.21% 74.93%, 98.76% 77.79%, 98.21% 80.34%, 97.56% 82.63%, 96.81% 84.70%, 95.94% 86.60%, 94.97% 88.33%, 93.89% 89.92%, 92.69% 91.37%, 91.37% 92.69%, 89.92% 93.89%, 88.33% 94.97%, 86.60% 95.94%, 84.70% 96.81%, 82.63% 97.56%, 80.34% 98.21%, 77.79% 98.76%, 74.93% 99.21%, 71.64% 99.56%, 67.70% 99.80%, 62.53% 99.95%, 50.00% 100.00%, 37.47% 99.95%, 32.30% 99.80%, 28.36% 99.56%, 25.07% 99.21%, 22.21% 98.76%, 19.66% 98.21%, 17.37% 97.56%, 15.30% 96.81%, 13.40% 95.94%, 11.67% 94.97%, 10.08% 93.89%, 8.63% 92.69%, 7.31% 91.37%, 6.11% 89.92%, 5.03% 88.33%, 4.06% 86.60%, 3.19% 84.70%, 2.44% 82.63%, 1.79% 80.34%, 1.24% 77.79%, 0.79% 74.93%, 0.44% 71.64%, 0.20% 67.70%, 0.05% 62.53%, 0.00% 50.00%, 0.05% 37.47%, 0.20% 32.30%, 0.44% 28.36%, 0.79% 25.07%, 1.24% 22.21%, 1.79% 19.66%, 2.44% 17.37%, 3.19% 15.30%, 4.06% 13.40%, 5.03% 11.67%, 6.11% 10.08%, 7.31% 8.63%, 8.63% 7.31%, 10.08% 6.11%, 11.67% 5.03%, 13.40% 4.06%, 15.30% 3.19%, 17.37% 2.44%, 19.66% 1.79%, 22.21% 1.24%, 25.07% 0.79%, 28.36% 0.44%, 32.30% 0.20%, 37.47% 0.05%, 50.00% 0.00%, 62.53% 0.05%, 67.70% 0.20%, 71.64% 0.44%, 74.93% 0.79%, 77.79% 1.24%, 80.34% 1.79%, 82.63% 2.44%, 84.70% 3.19%, 86.60% 4.06%, 88.33% 5.03%, 89.92% 6.11%, 91.37% 7.31%, 92.69% 8.63%, 93.89% 10.08%, 94.97% 11.67%, 95.94% 13.40%, 96.81% 15.30%, 97.56% 17.37%, 98.21% 19.66%, 98.76% 22.21%, 99.21% 25.07%, 99.56% 28.36%, 99.80% 32.30%, 99.95% 37.47%, 100.00% 50.00%);
+    width: var(--width, var(--size-800));
+}

package/src/css-utilities/text/scss/index.scss

@@ -44,8 +44,9 @@
         font-style: italic;
     }
 
-    &-linethrough {
+    &-line-through {
         text-decoration: line-through;
+        text-decoration-thickness: var(--line-width);
     }
 
     &-multiplier {
@@ -65,11 +66,6 @@
         }
     }
 
-    &-strike-through {
-        text-decoration: line-through;
-        text-decoration-thickness: var(--line-width);
-    }
-
     &-truncate {
         line-height: var(--size);
         max-width: 100%;

package/src/css-utilities/text/scss/variables.scss

@@ -8,23 +8,23 @@
         }
     }
 
-    &-outline {
-        --color: inherit;
-        --stroke-width: var(--border-width-400);
+    &-line-through {
+        --line-width: var(--border-width-400);
 
         @each $key in lib.map-keys(tokens.$border-width) {
             &-#{$key} {
-                --stroke-width: var(--border-width-#{$key});
+                --line-width: var(--border-width-#{$key});
             }
         }
     }
 
-    &-strike-through {
-        --line-width: var(--border-width-400);
+    &-outline {
+        --color: inherit;
+        --stroke-width: var(--border-width-400);
 
         @each $key in lib.map-keys(tokens.$border-width) {
             &-#{$key} {
-                --line-width: var(--border-width-#{$key});
+                --stroke-width: var(--border-width-#{$key});
             }
         }
     }

package/src/index.ts

@@ -1,9 +1,12 @@
 import '@esportsplus/webpack/global.d.ts';
 
-export { default as alert }from './components/alert';
-export { default as export }from './components/export';
+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';
 export { default as page }from './components/page';
 export { default as root }from './components/root';

package/src/lib/scss/breakpoint.scss

@@ -1,6 +1,6 @@
 @mixin breakpoint($function, $param: null) {
     @if $function == min-width or $function == min-height {
-        @media only screen and ($function: $param + 1px) {
+        @media only screen and ($function: #{$param + 1px}) {
             @content;
         }
     }
@@ -10,7 +10,7 @@
         }
     }
     @else if $function == between-width {
-        @media only screen and (min-width: nth($param, 1) + 1px) and (max-width: nth($param, 2)) {
+        @media only screen and (min-width: #{nth($param, 1) + 1px}) and (max-width: nth($param, 2)) {
             @content;
         }
     }
@@ -19,7 +19,7 @@
             @media only screen and (min-aspect-ratio: 13/9) {
                 @content;
             }
-        } 
+        }
         @else if $param == portrait {
             @media only screen and (max-aspect-ratio: 13/9) {
                 @content;

package/src/lib/scss/position.scss

@@ -3,75 +3,51 @@
 @mixin position($position, $value: null) {
     position: $position;
 
-    @if list.contains($value, center vertical) {
-        bottom: 50%;
+    @if $value == bottom {
+        inset: auto 0 0 0;
     }
-    @if list.contains($value, center horizontal) {
+    @else if $value == center {
+        bottom: 50%;
         right: 50%;
-    }
-
-
-    @if $value == center {
         transform: translate(50%, 50%);
     }
+    @else if $value == full {
+        inset: 0 0 0 0;
+    }
     @else if $value == horizontal {
+        right: 50%;
         transform: translateX(50%);
     }
-    @else if $value == vertical {
-        transform: translateY(50%);
-    }
-
-
-    @if $value == full {
-        $value: 0 0 0 0;
-    }
-    @else if $value == top {
-        $value: 0 0 null 0;
+    @else if $value == left {
+        inset: 0 auto 0 0;
     }
     @else if $value == right {
-        $value: 0 0 0 null;
+        inset: 0 0 0 auto;
     }
-    @else if $value == bottom {
-        $value: null 0 0 0;
+    @else if $value == top {
+        inset: 0 0 auto 0;
     }
-    @else if $value == left {
-        $value: 0 null 0 0;
+    @else if $value == vertical {
+        bottom: 50%;
+        transform: translateY(50%);
     }
-
-
-    @if $value and type-of($value) == list {
+    @else if $value and type-of($value) == list {
         $length: list.length($value);
 
-        @if $length > 0 {
-            $v: nth($value, 1);
-
-            @if $v != null {
-                top: $v;
-            }
+        @if $length > 0 and nth($value, 1) != null {
+            top: nth($value, 1);
         }
 
-        @if $length > 1 {
-            $v: nth($value, 2);
-
-            @if $v != null {
-                right: $v;
-            }
+        @if $length > 1 and nth($value, 2) != null {
+            right: nth($value, 2);
         }
 
-        @if $length > 2 {
-            $v: nth($value, 3);
-
-            @if $v != null {
-                bottom: $v;
-            }
+        @if $length > 2 and nth($value, 3) != null {
+            bottom: nth($value, 3);
         }
 
-        @if $length > 3 {
-            $v: nth($value, 4);
-
-            @if $v != null {
-                left: $v;
-            }
+        @if $length > 3 and nth($value, 4) != null {
+            left: nth($value, 4);
         }
     }
 }

package/src/tokens/scss/box-shadow.scss

@@ -1,13 +1,18 @@
+@function box-shadow($alpha) {
+    $base: hsl(214 80% 27% / 4%);
+    $shade: hsl(from $base calc(h + 8) 25 calc(l - 5));
+
+    @return 0 0 0 1px $base,
+        0 1px 1px -0.5px $shade,
+        0 3px 3px -1.5px $shade,
+        0 6px 6px -3px $shade,
+        0 12px 12px -6px $base,
+        0 24px 24px -12px $base;
+}
+
+
 $box-shadow: (
-    300: #{
-        0px 8px 16px -4px rgba(0, 3, 19, 0.016),
-        0px 4px 8px  -2px rgba(0, 3, 19, 0.008)
-    },
-    400: #{
-        0px 16px 24px -4px rgba(0, 3, 19, 0.048),
-        0px 8px 8px -4px rgba(0, 3, 19, 0.024)
-    },
-    500: #{
-        0px 16px 32px -8px rgba(0, 3, 19, 0.16)
-    }
-);
+    300: box-shadow(2),
+    400: box-shadow(4),
+    500: box-shadow(6)
+);

package/src/tokens/scss/transition-duration.scss

@@ -1,5 +1 @@
-$transition-duration: (
-    300: 0.08s,
-    400: 0.16s,
-    500: 0.24s
-);
+$transition-duration: 0.16s;

package/tsconfig.json

@@ -1,11 +1,3 @@
 {
-    "compilerOptions": {
-        "baseUrl": ".",
-        "declaration": true,
-        "declarationDir": "build",
-        "outDir": "build"
-    },
-    "exclude": ["node_modules"],
-    "extends": "./node_modules/@esportsplus/typescript/tsconfig.base.json",
-    "include": ["src"]
+    "extends": "@esportsplus/typescript/tsconfig.package.json"
 }