@esportsplus/ui 0.53.0 → 0.54.0

package/src/components/tooltip/onclick.ts

@@ -1,48 +1,15 @@
 import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import root from '~/components/root';
 
 
 const OMIT = ['state', 'toggle'];
 
 
-let parent: HTMLElement | null | undefined = null,
-    queue: { fn: VoidFunction, tooltip: HTMLElement }[] = [],
-    running = false,
-    scheduled = false;
-
-
-function frame() {
-    if (running) {
-        return;
-    }
-
-    running = true;
-
-    let item,
-        keep;
-
-    while (item = queue.pop()) {
-        if (parent === item.tooltip) {
-            keep = item;
-            continue;
-        }
-
-        item.fn();
-    }
-
-    if (keep) {
-        queue.push(keep);
-    }
-
-    running = false;
-}
-
-
 export default component<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
     (attributes, content) => {
-        let state = attributes.state || reactive({ active: false }),
+        let ref: HTMLElement,
+            state = attributes.state || reactive({ active: false }),
             toggle = attributes.toggle || false;
 
         return html`
@@ -51,42 +18,19 @@ export default component<Attributes & { state?: { active: boolean }, toggle?: bo
                 ${omit(attributes, OMIT)}
                 ${{
                     class: () => state.active && '--active',
-                    onclick: function(e) {
-                        let active = true,
-                            node = e.target as Node | null;
-
-                        if (this === node || (toggle && this.contains(node))) {
-                            active = !state.active;
-                        }
-
-                        if (parent !== this && !parent?.contains(this)) {
-                            parent = this.parentElement?.closest('.tooltip');
-                        }
-
-                        frame();
-
-                        if (parent === this) {
-                            parent = null;
+                    ondocumentclick: (event) => {
+                        if (!state.active || !ref?.isConnected) {
                             return;
                         }
 
-                        state.active = active;
-
-                        if (active) {
-                            queue.push({
-                                fn: () => state.active = false,
-                                tooltip: this
-                            });
-                        }
-
-                        if (!scheduled) {
-                            root.onclick.push(() => {
-                                frame();
-                                scheduled = false;
-                            });
-                            scheduled = true;
+                        if (!ref.contains(event.target as Node | null)) {
+                            state.active = false;
                         }
-                    }
+                    },
+                    onclick: function(e) {
+                        state.active = this === e.target || toggle ? !state.active : true;
+                    },
+                    onrender: (element) => ref = element
                 }}
             >
                 ${content}

package/src/components/tooltip/scss/index.scss

@@ -54,8 +54,8 @@
         opacity: 0;
         overflow: hidden;
         transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
+            opacity var(--transition-duration) var(--transition-timing-function),
+            transform var(--transition-duration) var(--transition-timing-function);
         width: var(--width);
         z-index: 9;
 
@@ -88,7 +88,6 @@
         cursor: auto;
         font-size: var(--font-size);
         font-weight: var(--font-weight);
-        line-height: normal;
         padding: var(--padding-vertical) var(--padding-horizontal);
         pointer-events: none;
         white-space: nowrap;

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

@@ -1,6 +1,8 @@
 @use '/tokens';
 
 .--background {
+    @include tokens.state-utility('background', tokens.$colors);
+
     &-default {
         --background: var(--background-default);
         --background-active: var(--background-default);
@@ -27,7 +29,5 @@
             --background: var(--background-pressed);
         }
     }
-
-    @include tokens.state-utility('background', tokens.$colors);
 }
 

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

@@ -1,27 +1 @@
-@use './variables';
-
-.--border {
-    border: var(--border-width) var(--border-style) var(--border-color);
-
-    @each $key in 'bottom' 'left' 'right' 'top' {
-        &-#{$key} {
-            border-#{$key}: var(--border-width) var(--border-style) var(--border-color);
-        }
-    }
-
-    &-offset {
-        @each $key in 'bottom' 'left' 'right' 'top' {
-            &-#{$key} {
-                margin-#{$key}: calc(var(--border-width) * -1);
-            }
-        }
-    }
-
-    &-radius {
-        border-radius: var(--border-radius);
-
-        &-circle {
-            aspect-ratio: 1;
-        }
-    }
-}
+@use './variables';

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

@@ -2,30 +2,11 @@
 @use '/tokens';
 
 .--border {
-    &,
-    &-bottom,
-    &-left,
-    &-right,
-    &-top {
-        --border-style: solid;
-        --border-width: var(--border-width-400);
-    }
-
-    &-dashed {
-        --border-style: dashed;
-    }
-
-    &-dotted {
-        --border-style: dotted;
-    }
+    @include tokens.state-utility('border-color', tokens.$colors);
 
     &-radius {
-        --border-radius: var(--border-radius-400);
-
-        @each $key in lib.map-keys(tokens.$border-radius) {
-            &-#{$key} {
-                --border-radius: var(--border-radius-#{$key});
-            }
+        &-responsive {
+            --border-radius: #{"calc( progress((100vi - 100cqi) / 2, 0px, var(--gap-horizontal)) * var(--border-radius) )"};
         }
     }
 
@@ -55,16 +36,4 @@
             --border-color: var(--border-color-pressed);
         }
     }
-
-    &-width {
-        --border-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --border-width: var(--border-width-#{$key});
-            }
-        }
-    }
-
-    @include tokens.state-utility('border-color', tokens.$colors);
 }

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

@@ -1,6 +1,8 @@
 @use '/tokens';
 
 .--color {
+    @include tokens.state-utility('color', tokens.$colors);
+
     &-default {
         --color: var(--color-default);
         --color-active: var(--color-default);
@@ -8,10 +10,6 @@
         --color-pressed: var(--color-default);
     }
 
-    &-inherit {
-        --color: inherit;
-    }
-
     &-state {
         --color: var(--color-default);
         --color-active: var(--color-default);
@@ -31,6 +29,4 @@
             --color: var(--color-pressed);
         }
     }
-
-    @include tokens.state-utility('color', tokens.$colors);
 }

package/src/css-utilities/font/geist/scss/index.scss

@@ -0,0 +1,55 @@
+@use '/lib';
+
+
+@font-face {
+    font-display: swap;
+    font-family: 'Geist';
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('./Geist-Variable.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Geist';
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('./Geist-Italic-Variable.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Geist Mono';
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('./GeistMono-Variable.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Geist Mono';
+    font-style: italic;
+    font-weight: 100 900;
+    src: url('./GeistMono-Italic-Variable.woff2') format('woff2');
+}
+
+
+.--font-geist {
+    --font-family: 'Geist', sans-serif;
+
+    &,
+    &-mono {
+        @include lib.css-variables(font-weight, (
+            300: 300,
+            400: 400,
+            500: 500,
+            600: 600
+        ));
+    }
+
+    &-mono {
+        --font-family: 'Geist Mono', monospace;
+    }
+}
+
+

package/src/css-utilities/font/montserrat/index.ts

@@ -0,0 +1 @@
+import './scss/index.scss';

package/src/{fonts → css-utilities/font}/montserrat/scss/index.scss

@@ -1,3 +1,6 @@
+@use '/lib';
+
+
 @font-face {
     font-display: swap;
     font-family: 'Montserrat';
@@ -77,3 +80,15 @@
          url('Montserrat-BoldItalic.woff2') format('woff2'),
          url('Montserrat-BoldItalic.woff') format('woff');
 }
+
+
+.--font-montserrat {
+    --font-family: 'Montserrat', sans-serif;
+
+    @include lib.css-variables(font-weight, (
+        300: 400,
+        400: 500,
+        500: 600,
+        600: 700
+    ));
+}

package/src/css-utilities/index.scss

@@ -1,24 +1,18 @@
-@forward './[margin,padding]/scss/index.scss';
 @forward './absolute/scss/index.scss';
 @forward './background/scss/index.scss';
 @forward './border/scss/index.scss';
 @forward './color/scss/index.scss';
 @forward './disabled/scss/index.scss';
-@forward './error/scss/index.scss';
 @forward './flex/scss/index.scss';
-@forward './flicker/scss/index.scss';
-@forward './focus/scss/index.scss';
-@forward './gap/scss/index.scss';
+
+@forward './font/geist/scss/index.scss';
+@forward './font/montserrat/scss/index.scss';
+
 @forward './glass/scss/index.scss';
 @forward './hidden/scss/index.scss';
 @forward './inline/scss/index.scss';
-@forward './line-height/scss/index.scss';
 @forward './not-allowed/scss/index.scss';
-@forward './pointer/scss/index.scss';
-@forward './scroll-fade/scss/index.scss';
 @forward './scrollbar/scss/index.scss';
-@forward './size/scss/index.scss';
 @forward './skeleton/scss/index.scss';
-@forward './text/scss/index.scss';
-@forward './viewport/scss/index.scss';
-@forward './width/scss/index.scss';
+@forward './tabular/scss/index.scss';
+@forward './text/scss/index.scss';

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

@@ -1,7 +1,6 @@
 .--inline {
     display: inline;
     font-size: inherit;
-    line-height: inherit;
     margin: 0;
     padding: 0;
 }

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

@@ -1,5 +1,19 @@
 @use 'variables';
 
+// Registered so the length custom properties can be interpolated by the
+// scroll-driven animation below.
+@property --scroll-fade-bottom {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --scroll-fade-top {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
 .--scrollbar {
     overflow: auto;
     overscroll-behavior: contain;
@@ -32,6 +46,34 @@
         overflow-y: hidden;
     }
 
+    &-fade {
+        overflow-y: auto;
+
+        @supports (animation-timeline: scroll()) {
+            animation: scrollbar-fade linear both;
+            animation-timeline: scroll(self);
+            -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
+            mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
+        }
+
+        @keyframes scrollbar-fade {
+            0% {
+                --scroll-fade-bottom: var(--scroll-fade-size);
+                --scroll-fade-top: 0px;
+            }
+
+            5%, 95% {
+                --scroll-fade-bottom: var(--scroll-fade-size);
+                --scroll-fade-top: var(--scroll-fade-size);
+            }
+
+            100% {
+                --scroll-fade-bottom: 0px;
+                --scroll-fade-top: var(--scroll-fade-size);
+            }
+        }
+    }
+
     &-hidden {
         scrollbar-width: none;
 

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

@@ -0,0 +1,3 @@
+.--tabular {
+    font-variant-numeric: tabular-nums;
+}

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

@@ -1,43 +1,42 @@
 @use '/lib';
 @use '/tokens';
-@use './variables';
 
 .--text {
-    &-bold {
-        font-weight: var(--font-weight-500);
-
-        @each $key in lib.map-keys(tokens.$font-weight) {
-            @if $key > 500 {
-                &-#{$key} {
-                    font-weight: var(--font-weight-#{$key});
-                }
+    &-crop {
+        @supports (text-box: trim-both cap alphabetic) {
+            & {
+                text-box: trim-both cap alphabetic;
             }
-        }
-    }
 
-    &-center {
-        text-align: center;
-    }
+            &-top {
+                text-box: trim-start cap alphabetic;
+            }
 
-    &-crop {
-        &::after,
-        &::before,
-        &-bottom::after,
-        &-top::before {
-            content: '';
-            display: block;
-            height: 0;
-            width: 100%;
+            &-bottom {
+                text-box: trim-end cap alphabetic;
+            }
         }
 
-        &::after,
-        &-bottom::after {
-            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
-        }
+        @supports not (text-box: trim-both cap alphabetic) {
+            &::after,
+            &::before,
+            &-bottom::after,
+            &-top::before {
+                content: '';
+                display: block;
+                height: 0;
+                width: 100%;
+            }
+
+            &::after,
+            &-bottom::after {
+                margin-bottom: calc((1em - 1lh) * 0.618);
+            }
 
-        &::before,
-        &-top::before {
-            margin-top: calc((1 - var(--line-height)) * 0.618em);
+            &::before,
+            &-top::before {
+                margin-top: calc((1em - 1lh) * 0.618);
+            }
         }
 
         &-first-child {
@@ -53,50 +52,10 @@
         }
     }
 
-    &-italic {
-        font-style: italic;
-    }
-
-    &-line-through {
-        text-decoration: line-through;
-        text-decoration-thickness: var(--line-width);
-    }
-
-    &-multiplier {
-        font-size: calc(var(--font-size) * var(--text-multiplier));
-    }
-
-    &-outline {
-        color: var(--color);
-        word-break: break-word;
-        word-wrap: break-word;
-
-        @supports (-webkit-text-stroke-width: 1px) {
-            color: transparent;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke-color: var(--color);
-            -webkit-text-stroke-width: var(--stroke-width);
-        }
-    }
-
     &-truncate {
-        line-height: var(--size);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-
-    &-underline {
-        text-decoration: underline;
-
-        &-dotted {
-            text-decoration: underline;
-            text-decoration-style: dotted;
-        }
-    }
-
-    &-uppercase {
-        text-transform: uppercase;
-    }
-}
+}

package/src/lib/scss/css-variables.scss

@@ -1,16 +1,40 @@
 @use 'sass:meta';
 
 
-@mixin css-variables($prefix, $tokens) {
+// css-variables($prefix, $tokens): custom-property declarations.
+// css-variables($class, $prefix, $tokens): custom-property declarations inside classes.
+@mixin css-variables($class: null, $prefix: null, $tokens: null) {
+    @if $tokens == null {
+        $tokens: $prefix;
+        $prefix: $class;
+        $class: null;
+    }
+    @else if $prefix == null {
+        $prefix: $class;
+        $class: null;
+    }
+
+    @if $prefix == null or (meta.type-of($tokens) != 'map' and $tokens != ()) {
+        @error 'css-variables expects ($prefix, $tokens) or ($class, $prefix, $tokens), with a token map.';
+    }
+
+    @include -tokens($class, $prefix, '', $tokens);
+}
+
+@mixin -tokens($class, $prefix, $suffix, $tokens) {
     @each $key, $value in $tokens {
+        $name: '#{$suffix}-#{$key}';
+
         @if meta.type-of($value) == 'map' {
-            @each $subkey, $subvalue in $value {
-                --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
+            @include -tokens($class, $prefix, $name, $value);
+        }
+        @else if $class != null {
+            .#{$class}#{$name} {
+                --#{$prefix}#{$name}: #{$value};
             }
         }
         @else {
-            --#{$prefix}-#{$key}: #{$value};
+            --#{$prefix}#{$name}: #{$value};
         }
     }
 }
-

package/src/themes/dark/index.ts

@@ -1,4 +1,3 @@
-export { default as back } from './back';
 export { default as input } from './input';
 export { default as select } from './select';
 export { default as textarea } from './textarea';

package/src/themes/dark/select.ts

@@ -3,19 +3,21 @@ import select from '~/components/select';
 
 export default select.bind({
     attributes: {
-        class: '--background-black --border --border-black --color-white',
+        class: '--background-black --border-black --color-white',
         option: {
-            class: '--background-black --color-white --padding-horizontal-500 --width-full',
-            style: '--color-default: var(--color-grey-500);white-space: nowrap;'
+            class: '--background-black --color-white',
+            style: '--color-default: var(--color-grey-500); --padding-horizontal: var(--size-500); white-space: nowrap; width: 100%;'
         },
-        style: '--border-color-default: var(--color-black-300);',
+        style: '--border-color-default: var(--color-black-300); --border-width: var(--border-width-400); border: var(--border-width) solid var(--border-color);',
 
         'tooltip-content': {
-            class: '--border --border-radius-500',
             direction: 'sw',
             style: `
                 --background: var(--color-black-400);
                 --border-color: var(--color-black-300);
+                --border-radius: var(--border-radius-500);
+                --border-width: var(--border-width-400);
+                border: var(--border-width) solid var(--border-color);
             `
         }
     }

package/src/tokens/index.scss

@@ -3,9 +3,7 @@
 @forward 'scss/box-shadow';
 @forward 'scss/color';
 @forward 'scss/font-size';
-@forward 'scss/font-weight';
-@forward 'scss/line-height';
 @forward 'scss/size';
 @forward 'scss/spacer';
 @forward 'scss/state';
-@forward 'scss/transition-duration';
+@forward 'scss/transition';

package/src/tokens/scss/border-radius.scss

@@ -5,10 +5,5 @@ $border-radius: (
     400: 8px,
     500: 10px,
     600: 12px,
-    700: 16px,
-    800: 20px,
-
-    0px: 0px,
-    circle: 100%,
-    curved: 240px,
+    700: 16px
 );

package/src/tokens/scss/color.scss

@@ -13,9 +13,9 @@ $color: (
         500: oklch(48.45% 0.2617 266.3)
     ),
     'border': (
-        300: oklch(0.9683 0.0069 247.9),
-        400: oklch(0.9288 0.0126 255.51),
-        500: oklch(0.869 0.0198 252.89)
+        300: oklch(92.9% 0.013 255.508),
+        400: oklch(86.9% 0.022 252.894),
+        500: oklch(70.4% 0.04 256.788)
     ),
     'green': (
         300: oklch(87.03% 0.2708 144.9),