@esportsplus/ui 0.2.3 → 0.2.9

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

package/utilities/styles.css

@@ -1,16 +1,16 @@
 .--background-state{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default)}.--background-state.--active{--background: var(--background-active)}.--background-state:not(.--active):hover{--background: var(--background-hover)}.--background-state:not(.--active):active{--background: var(--background-pressed)}.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-color: var(--border-color-default);--border-style: solid;--border-width: var(--border-width-400)}.--border-dashed{--border-style: dashed}.--border-dotted{--border-style: dotted}.--border-radius{--border-radius: var(--border-radius-400)}.--border-radius-0px{--border-radius: var(--border-radius-0px)}.--border-radius-circle{--border-radius: var(--border-radius-circle)}.--border-radius-curved{--border-radius: var(--border-radius-curved)}.--border-radius-100{--border-radius: var(--border-radius-100)}.--border-radius-200{--border-radius: var(--border-radius-200)}.--border-radius-300{--border-radius: var(--border-radius-300)}.--border-radius-400{--border-radius: var(--border-radius-400)}.--border-radius-500{--border-radius: var(--border-radius-500)}.--border-radius-600{--border-radius: var(--border-radius-600)}.--border-state{--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: transparent;--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default)}.--border-state.--active{--border-color: var(--border-color-active)}.--border-state:not(.--active):hover{--border-color: var(--border-color-hover)}.--border-state:not(.--active):active{--border-color: var(--border-color-pressed)}.--border-width{--border-width: var(--border-width-400)}.--border-width-400{--border-width: var(--border-width-400)}.--border-width-500{--border-width: var(--border-width-500)}.--border-width-600{--border-width: var(--border-width-600)}.--border-width-700{--border-width: var(--border-width-700)}.--color-inherit{--color: inherit}.--color-state{--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)}.--color-state.--active{--color: var(--color-active)}.--color-state:not(.--active):hover{--color: var(--color-hover)}.--color-state:not(.--active):active{--color: var(--color-pressed)}.--background-primary{--background-active: var(--color-primary-300);--background-default: var(--color-primary-400);--background-hover: var(--color-primary-300);--background-pressed: var(--color-primary-500)}.--background-secondary{--background-active: var(--color-secondary-300);--background-default: var(--color-secondary-400);--background-hover: var(--color-secondary-300);--background-pressed: var(--color-secondary-500)}.--background-black{--background-active: var(--color-black-300);--background-default: var(--color-black-400);--background-hover: var(--color-black-300);--background-pressed: var(--color-black-500)}.--background-blue{--background-active: var(--color-blue-300);--background-default: var(--color-blue-400);--background-hover: var(--color-blue-300);--background-pressed: var(--color-blue-500)}.--background-border{--background-active: var(--color-border-300);--background-default: var(--color-border-400);--background-hover: var(--color-border-300);--background-pressed: var(--color-border-500)}.--background-green{--background-active: var(--color-green-300);--background-default: var(--color-green-400);--background-hover: var(--color-green-300);--background-pressed: var(--color-green-500)}.--background-grey{--background-active: var(--color-grey-300);--background-default: var(--color-grey-400);--background-hover: var(--color-grey-300);--background-pressed: var(--color-grey-500)}.--background-purple{--background-active: var(--color-purple-300);--background-default: var(--color-purple-400);--background-hover: var(--color-purple-300);--background-pressed: var(--color-purple-500)}.--background-red{--background-active: var(--color-red-300);--background-default: var(--color-red-400);--background-hover: var(--color-red-300);--background-pressed: var(--color-red-500)}.--background-text{--background-active: var(--color-text-300);--background-default: var(--color-text-400);--background-hover: var(--color-text-300);--background-pressed: var(--color-text-500)}.--background-white{--background-active: var(--color-white-300);--background-default: var(--color-white-400);--background-hover: var(--color-white-300);--background-pressed: var(--color-white-500)}.--background-yellow{--background-active: var(--color-yellow-300);--background-default: var(--color-yellow-400);--background-hover: var(--color-yellow-300);--background-pressed: var(--color-yellow-500)}.--border-primary{--border-color-active: var(--color-primary-300);--border-color-default: var(--color-primary-400);--border-color-hover: var(--color-primary-300);--border-color-pressed: var(--color-primary-500)}.--border-secondary{--border-color-active: var(--color-secondary-300);--border-color-default: var(--color-secondary-400);--border-color-hover: var(--color-secondary-300);--border-color-pressed: var(--color-secondary-500)}.--border-black{--border-color-active: var(--color-black-300);--border-color-default: var(--color-black-400);--border-color-hover: var(--color-black-300);--border-color-pressed: var(--color-black-500)}.--border-blue{--border-color-active: var(--color-blue-300);--border-color-default: var(--color-blue-400);--border-color-hover: var(--color-blue-300);--border-color-pressed: var(--color-blue-500)}.--border-border{--border-color-active: var(--color-border-300);--border-color-default: var(--color-border-400);--border-color-hover: var(--color-border-300);--border-color-pressed: var(--color-border-500)}.--border-green{--border-color-active: var(--color-green-300);--border-color-default: var(--color-green-400);--border-color-hover: var(--color-green-300);--border-color-pressed: var(--color-green-500)}.--border-grey{--border-color-active: var(--color-grey-300);--border-color-default: var(--color-grey-400);--border-color-hover: var(--color-grey-300);--border-color-pressed: var(--color-grey-500)}.--border-purple{--border-color-active: var(--color-purple-300);--border-color-default: var(--color-purple-400);--border-color-hover: var(--color-purple-300);--border-color-pressed: var(--color-purple-500)}.--border-red{--border-color-active: var(--color-red-300);--border-color-default: var(--color-red-400);--border-color-hover: var(--color-red-300);--border-color-pressed: var(--color-red-500)}.--border-text{--border-color-active: var(--color-text-300);--border-color-default: var(--color-text-400);--border-color-hover: var(--color-text-300);--border-color-pressed: var(--color-text-500)}.--border-white{--border-color-active: var(--color-white-300);--border-color-default: var(--color-white-400);--border-color-hover: var(--color-white-300);--border-color-pressed: var(--color-white-500)}.--border-yellow{--border-color-active: var(--color-yellow-300);--border-color-default: var(--color-yellow-400);--border-color-hover: var(--color-yellow-300);--border-color-pressed: var(--color-yellow-500)}.--color-primary{--color-active: var(--color-primary-300);--color-default: var(--color-primary-400);--color-hover: var(--color-primary-300);--color-pressed: var(--color-primary-500)}.--color-secondary{--color-active: var(--color-secondary-300);--color-default: var(--color-secondary-400);--color-hover: var(--color-secondary-300);--color-pressed: var(--color-secondary-500)}.--color-black{--color-active: var(--color-black-300);--color-default: var(--color-black-400);--color-hover: var(--color-black-300);--color-pressed: var(--color-black-500)}.--color-blue{--color-active: var(--color-blue-300);--color-default: var(--color-blue-400);--color-hover: var(--color-blue-300);--color-pressed: var(--color-blue-500)}.--color-border{--color-active: var(--color-border-300);--color-default: var(--color-border-400);--color-hover: var(--color-border-300);--color-pressed: var(--color-border-500)}.--color-green{--color-active: var(--color-green-300);--color-default: var(--color-green-400);--color-hover: var(--color-green-300);--color-pressed: var(--color-green-500)}.--color-grey{--color-active: var(--color-grey-300);--color-default: var(--color-grey-400);--color-hover: var(--color-grey-300);--color-pressed: var(--color-grey-500)}.--color-purple{--color-active: var(--color-purple-300);--color-default: var(--color-purple-400);--color-hover: var(--color-purple-300);--color-pressed: var(--color-purple-500)}.--color-red{--color-active: var(--color-red-300);--color-default: var(--color-red-400);--color-hover: var(--color-red-300);--color-pressed: var(--color-red-500)}.--color-text{--color-active: var(--color-text-300);--color-default: var(--color-text-400);--color-hover: var(--color-text-300);--color-pressed: var(--color-text-500)}.--color-white{--color-active: var(--color-white-300);--color-default: var(--color-white-400);--color-hover: var(--color-white-300);--color-pressed: var(--color-white-500)}.--color-yellow{--color-active: var(--color-yellow-300);--color-default: var(--color-yellow-400);--color-hover: var(--color-yellow-300);--color-pressed: var(--color-yellow-500)}
 .--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}
-.--absolute-bottom,.--absolute-top{left:0;position:absolute;right:0}.--absolute-left,.--absolute-right{bottom:0;position:absolute;top:0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%)}.--absolute-full{position:absolute;top:0;right:0;bottom:0;left:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translateX(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom,.--absolute-horizontal-bottom{bottom:0}.--absolute-top,.--absolute-horizontal-top{top:0}.--absolute-left,.--absolute-vertical-left{left:0}.--absolute-right,.--absolute-vertical-right{right:0}
+.--absolute-horizontal-bottom,.--absolute-vertical-bottom{bottom:0}.--absolute-horizontal-top,.--absolute-vertical-top{top:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translateX(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom{position:absolute;inset:auto 0 0 0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%)}.--absolute-full{position:absolute;inset:0 0 0 0}.--absolute-left{position:absolute;inset:0 auto 0 0}.--absolute-right{position:absolute;inset:0 0 0 auto}.--absolute-top{position:absolute;inset:0 0 auto 0}
 .--border{border:var(--border-width) var(--border-style) var(--border-color)}.--border-bottom{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.--border-left{border-left:var(--border-width) var(--border-style) var(--border-color)}.--border-right{border-right:var(--border-width) var(--border-style) var(--border-color)}.--border-top{border-top:var(--border-width) var(--border-style) var(--border-color)}.--border-offset-bottom{margin-bottom:calc(var(--border-width)*-1)}.--border-offset-left{margin-left:calc(var(--border-width)*-1)}.--border-offset-right{margin-right:calc(var(--border-width)*-1)}.--border-offset-top{margin-top:calc(var(--border-width)*-1)}.--border-radius{border-radius:var(--border-radius)}
 .--disabled{opacity:.64;pointer-events:none}
 .--flex-center{align-content:center;display:flex;flex-wrap:wrap;justify-content:center}.--flex-column{display:flex;flex-flow:column}.--flex-end{display:flex;flex-wrap:wrap;justify-content:flex-end}.--flex-fill{display:flex;flex:1;min-width:0}.--flex-fixed{display:flex;flex:0 0 var(--width)}.--flex-horizontal{display:flex;flex-wrap:wrap;justify-content:center}.--flex-horizontal-space-between{display:flex;flex-wrap:wrap;justify-content:space-between}.--flex-row{display:flex;flex-flow:row}.--flex-start{display:flex;flex-wrap:wrap;justify-content:flex-start}.--flex-vertical{align-items:center;display:flex;flex-wrap:wrap}.--flex-vertical-space-between{align-items:space-between;display:flex;flex-wrap:wrap}
 .--glass{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
-.--hidden{display:none}.--hidden-active.--active{display:none}.--hidden-inactive:not(.--active){display:none}.--hidden-visibility{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}
+.--hidden{display:none}.--hidden-active.--active{display:none}.--hidden-inactive:not(.--active){display:none}.--hidden-offcanvas{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}
 .--inline{display:inline;font-size:inherit;line-height:inherit;margin:0;padding:0}
 .--not-allowed{cursor:not-allowed}.--not-allowed *{pointer-events:none}
 .--overflow-hidden{overflow:hidden}
 .--pointer-none{pointer-events:none}
-.--slide-in,.--slide-in-reverse{animation-duration:var(--transition-duration);animation-name:--slide-in;animation-timing-function:ease-in-out;transform-origin:top center}@keyframes --slide-in{from{opacity:0;transform:translateY(var(--translateY))}to{opacity:1;transform:translateY(0)}}
-.--text-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop::after,.--text-crop::before,.--text-crop-bottom::after,.--text-crop-top::before{content:"";display:block;height:0;width:100%}.--text-crop::after,.--text-crop-bottom::after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop::before,.--text-crop-top::before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-linethrough{text-decoration:line-through}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports(-webkit-text-stroke-width: 1px){.--text-outline{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-strike-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-truncate{line-height:var(--size);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.--text-underline{text-decoration:underline}.--text-underline-dotted{text-decoration:underline;text-decoration-style:dotted}.--text-uppercase{text-transform:uppercase}
+.--squircle{aspect-ratio:1;clip-path:polygon(100% 50%, 99.95% 62.53%, 99.8% 67.7%, 99.56% 71.64%, 99.21% 74.93%, 98.76% 77.79%, 98.21% 80.34%, 97.56% 82.63%, 96.81% 84.7%, 95.94% 86.6%, 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.6% 95.94%, 84.7% 96.81%, 82.63% 97.56%, 80.34% 98.21%, 77.79% 98.76%, 74.93% 99.21%, 71.64% 99.56%, 67.7% 99.8%, 62.53% 99.95%, 50% 100%, 37.47% 99.95%, 32.3% 99.8%, 28.36% 99.56%, 25.07% 99.21%, 22.21% 98.76%, 19.66% 98.21%, 17.37% 97.56%, 15.3% 96.81%, 13.4% 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.6%, 3.19% 84.7%, 2.44% 82.63%, 1.79% 80.34%, 1.24% 77.79%, 0.79% 74.93%, 0.44% 71.64%, 0.2% 67.7%, 0.05% 62.53%, 0% 50%, 0.05% 37.47%, 0.2% 32.3%, 0.44% 28.36%, 0.79% 25.07%, 1.24% 22.21%, 1.79% 19.66%, 2.44% 17.37%, 3.19% 15.3%, 4.06% 13.4%, 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.4% 4.06%, 15.3% 3.19%, 17.37% 2.44%, 19.66% 1.79%, 22.21% 1.24%, 25.07% 0.79%, 28.36% 0.44%, 32.3% 0.2%, 37.47% 0.05%, 50% 0%, 62.53% 0.05%, 67.7% 0.2%, 71.64% 0.44%, 74.93% 0.79%, 77.79% 1.24%, 80.34% 1.79%, 82.63% 2.44%, 84.7% 3.19%, 86.6% 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.4%, 96.81% 15.3%, 97.56% 17.37%, 98.21% 19.66%, 98.76% 22.21%, 99.21% 25.07%, 99.56% 28.36%, 99.8% 32.3%, 99.95% 37.47%, 100% 50%);width:var(--width, var(--size-800))}
+.--text-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop::after,.--text-crop::before,.--text-crop-bottom::after,.--text-crop-top::before{content:"";display:block;height:0;width:100%}.--text-crop::after,.--text-crop-bottom::after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop::before,.--text-crop-top::before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-line-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports(-webkit-text-stroke-width: 1px){.--text-outline{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-truncate{line-height:var(--size);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.--text-underline{text-decoration:underline}.--text-underline-dotted{text-decoration:underline;text-decoration-style:dotted}.--text-uppercase{text-transform:uppercase}
 .--viewport{overflow:hidden;height:calc(100svh - var(--margin-vertical, 0px)*2);width:calc(100vw - var(--margin-horizontal, 0px)*2)}
 .--width{width:var(--width)}

package/utilities/variables.css

@@ -5,7 +5,5 @@
 .--glass{--blur: 24px}
 .--line-height-100{--line-height: var(--line-height-100)}.--line-height-200{--line-height: var(--line-height-200)}.--line-height-300{--line-height: var(--line-height-300)}.--line-height-400{--line-height: var(--line-height-400)}
 .--size{--size: var(--size-400)}.--size-0px{--size: var(--size-0px)}.--size-100{--size: var(--size-100)}.--size-200{--size: var(--size-200)}.--size-300{--size: var(--size-300)}.--size-400{--size: var(--size-400)}.--size-500{--size: var(--size-500)}.--size-600{--size: var(--size-600)}.--size-700{--size: var(--size-700)}.--size-800{--size: var(--size-800)}.--size-900{--size: var(--size-900)}
-.--slide-in{--transition-duration: 0.48s;--translateY: 32px}.--slide-in-reverse{--translateY: -32px}
-.--text-100{--font-size: var(--font-size-100)}.--text-200{--font-size: var(--font-size-200)}.--text-300{--font-size: var(--font-size-300)}.--text-400{--font-size: var(--font-size-400)}.--text-500{--font-size: var(--font-size-500)}.--text-600{--font-size: var(--font-size-600)}.--text-700{--font-size: var(--font-size-700)}.--text-800{--font-size: var(--font-size-800)}.--text-outline{--color: inherit;--stroke-width: var(--border-width-400)}.--text-outline-400{--stroke-width: var(--border-width-400)}.--text-outline-500{--stroke-width: var(--border-width-500)}.--text-outline-600{--stroke-width: var(--border-width-600)}.--text-outline-700{--stroke-width: var(--border-width-700)}.--text-strike-through{--line-width: var(--border-width-400)}.--text-strike-through-400{--line-width: var(--border-width-400)}.--text-strike-through-500{--line-width: var(--border-width-500)}.--text-strike-through-600{--line-width: var(--border-width-600)}.--text-strike-through-700{--line-width: var(--border-width-700)}
-.--transition-duration{--transition-duration: var(--transition-duration-400)}.--transition-duration-300{--transition-duration: var(--transition-duration-300)}.--transition-duration-400{--transition-duration: var(--transition-duration-400)}.--transition-duration-500{--transition-duration: var(--transition-duration-500)}
+.--text-100{--font-size: var(--font-size-100)}.--text-200{--font-size: var(--font-size-200)}.--text-300{--font-size: var(--font-size-300)}.--text-400{--font-size: var(--font-size-400)}.--text-500{--font-size: var(--font-size-500)}.--text-600{--font-size: var(--font-size-600)}.--text-700{--font-size: var(--font-size-700)}.--text-800{--font-size: var(--font-size-800)}.--text-line-through{--line-width: var(--border-width-400)}.--text-line-through-400{--line-width: var(--border-width-400)}.--text-line-through-500{--line-width: var(--border-width-500)}.--text-line-through-600{--line-width: var(--border-width-600)}.--text-line-through-700{--line-width: var(--border-width-700)}.--text-outline{--color: inherit;--stroke-width: var(--border-width-400)}.--text-outline-400{--stroke-width: var(--border-width-400)}.--text-outline-500{--stroke-width: var(--border-width-500)}.--text-outline-600{--stroke-width: var(--border-width-600)}.--text-outline-700{--stroke-width: var(--border-width-700)}
 .--width-full{--width: 100%}.--width-half{--width: 50%}

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

@@ -1,10 +0,0 @@
-declare function deactivate(): void;
-declare const _default: {
-    deactivate: typeof deactivate;
-    error: (messages: string | string[], seconds?: number) => void;
-    html: () => () => "" | import("@esportsplus/template").Renderable;
-    info: (messages: string | string[], seconds?: number) => void;
-    success: (messages: string | string[], seconds?: number) => void;
-    types: readonly ["error", "info", "success"];
-};
-export default _default;

package/build/components/alert/index.js

@@ -1,122 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-let modifiers = {
-    error: 'red',
-    info: 'black',
-    success: 'green'
-}, state = reactive({
-    active: false,
-    messages: new Set,
-    seconds: 0,
-    state: 'activating',
-    type: ''
-}), timeout = 250;
-function activate(key, messages, seconds = 0) {
-    if (!Array.isArray(messages)) {
-        messages = [messages];
-    }
-    if (!messages.length) {
-        return;
-    }
-    if (state.type !== key) {
-        state.messages.clear();
-    }
-    else {
-        state.type = '';
-    }
-    for (let message of messages) {
-        state.messages.add(message);
-    }
-    state.state = 'activating';
-    state.type = key;
-    if (state.active) {
-        state.active = true;
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-        return;
-    }
-    setTimeout(() => {
-        state.active = true;
-        if (seconds) {
-            if (!state.seconds) {
-                state.seconds = seconds;
-            }
-            setTimeout(() => {
-                if (messages && messages.length < (state?.messages?.size || 0)) {
-                    for (let message of messages) {
-                        state.messages.delete(message);
-                    }
-                    state.messages = state.messages;
-                }
-                else {
-                    deactivate();
-                }
-            }, 400 * seconds);
-        }
-        else {
-            state.seconds = 0;
-        }
-    }, timeout);
-}
-function deactivate() {
-    state.state = 'deactivating';
-    setTimeout(() => {
-        state.active = false;
-        state.messages.clear();
-    }, timeout);
-}
-const error = (messages, seconds = 0) => activate('error', messages, seconds);
-const info = (messages, seconds = 0) => activate('info', messages, seconds);
-const success = (messages, seconds = 0) => activate('success', messages, seconds);
-const h = () => {
-    return () => state.active ? html `
-        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
-            <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
-                <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
-                    <div class="icon --size-300">
-                        ${html.inline `
-                            <svg width="16" height="16" viewBox="0 0 16 16">
-                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
-                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
-                            </svg>
-                        `}
-                    </div>
-                </div>
-            </div>
-
-            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
-                <div class="alert-message --active --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
-                    <div class='--flex-row --flex-fill --flex-vertical'>
-                        <div class="--flex-fill --flex-column --padding-right --padding-400">
-                            <h5 class="page-title">
-                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
-                            </h5>
-                            ${() => state.type && [...state.messages].map((message) => html `
-                                <p class='--margin-top --margin-border-width-500'>${message}</p>
-                            `)}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    ` : '';
-};
-const types = ['error', 'info', 'success'];
-export default { deactivate, error, html: h, info, success, types };

package/build/components/export/clipboard.d.ts

@@ -1,2 +0,0 @@
-declare const _default: (value: string) => void;
-export default _default;

package/build/components/export/clipboard.js

@@ -1,8 +0,0 @@
-export default (value) => {
-    let input = document.createElement('INPUT');
-    document.body.appendChild(input);
-    input.setAttribute('value', value);
-    input.select();
-    document.execCommand('copy');
-    document.body.removeChild(input);
-};

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

@@ -1,5 +0,0 @@
-declare const _default: {
-    clipboard: (value: string) => void;
-    json: (content: any[] | Record<string, any>, name: string) => void;
-};
-export default _default;

package/build/components/export/index.js

@@ -1,3 +0,0 @@
-import clipboard from './clipboard';
-import json from './json';
-export default { clipboard, json };

package/build/components/tooltip/menu.d.ts

@@ -1,25 +0,0 @@
-type Data = {
-    class?: string;
-    direction?: string;
-    items?: {
-        border?: {
-            class?: string;
-        };
-        class?: string;
-        onclick?: (...args: any[]) => void;
-        style?: string;
-        svg?: string;
-        target?: string;
-        text: string;
-        url?: string;
-    }[];
-    state?: {
-        active?: boolean;
-    };
-    style?: string;
-};
-declare const _default: (data: Data, state: {
-    active?: boolean;
-    render?: boolean;
-}) => () => "" | import("@esportsplus/template").Renderable;
-export default _default;