@esportsplus/ui 0.51.7 → 0.54.0

package/src/components/tooltip/onclick.ts

@@ -1,49 +1,15 @@
-import { html, type Attributes } from '@esportsplus/template';
+import { component, html, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import root from '~/components/root';
-import template from '~/components/template';
 
 
 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 template.factory<Attributes & { state?: { active: boolean }, toggle?: boolean }>(
+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`
@@ -52,42 +18,19 @@ export default template.factory<Attributes & { state?: { active: boolean }, togg
                 ${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/onhover.ts

@@ -1,7 +1,6 @@
-import { html, Attributes } from '@esportsplus/template';
+import { component, html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 
 
 type A = Attributes & { state?: { active: boolean } };
@@ -10,7 +9,7 @@ type A = Attributes & { state?: { active: boolean } };
 const OMIT = ['state'];
 
 
-export default template.factory(
+export default component(
     (attributes: A, content) => {
         let state = attributes.state || reactive({ active: false });
 

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/components/typewriter/index.ts

@@ -1,6 +1,5 @@
-import { html } from '@esportsplus/template';
+import { component, html } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
@@ -8,7 +7,7 @@ import './scss/index.scss';
 const EMPTY_NODE = html` `;
 
 
-export default template.factory(
+export default component(
     function(_, content: string[]) {
         let state = reactive({ text: '' });
 

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,23 +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 './scroller/scss/index.scss';
+@forward './scrollbar/scss/index.scss';
 @forward './skeleton/scss/index.scss';
-@forward './size/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

@@ -0,0 +1,95 @@
+@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;
+    scroll-behavior: smooth;
+    scrollbar-color: var(--scrollbar-color) transparent;
+    scrollbar-gutter: stable;
+
+    @supports selector(::-webkit-scrollbar) {
+        scrollbar-color: auto;
+        scrollbar-width: auto;
+
+        &::-webkit-scrollbar {
+            width: var(--scrollbar-width);
+        }
+        &::-webkit-scrollbar-button {
+            display: none;
+            height: 0;
+            width: 0;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-color);
+            border-radius: var(--scrollbar-border-width);
+        }
+    }
+
+    &.--flex-column {
+        overflow-x: hidden;
+    }
+    &.--flex-row {
+        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;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &-snap {
+        overflow: auto;
+        overscroll-behavior-x: contain;
+        scroll-snap-type: both mandatory;
+
+        > * {
+            scroll-snap-align: center;
+            scroll-snap-stop: normal;
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+.--scrollbar {
+    --scrollbar-border-width: 1px;
+    --scrollbar-color: var(--color-black-300);
+    --scrollbar-width: 4px;
+}

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