@esportsplus/ui 0.53.0 → 0.55.0

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

@@ -1,7 +1,9 @@
 .text {
+    --border-width: 0px;
     --color: var(--color-default, inherit);
-    --font-size: var(--font-size-400);
-    --font-weight: var(--font-weight-400);
-    --line-height: var(--line-height-400);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
     --width: auto;
 }

package/src/components/textarea/index.ts

@@ -1,27 +1,60 @@
-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 form from '~/components/form';
 import './scss/index.scss';
 
 
-const OMIT = ['state'];
+type Autoresize = { height: { max: `${number}px`, min: `${number}px` } };
 
 
-export default function(
+function autoresize({ height }: Autoresize) {
+    let attributes = {
+            class: 'textarea--autoresize',
+            style: `
+                --max-height: ${height.max};
+                --min-height: ${height.min};
+            `
+        };
+
+    if (CSS.supports('field-sizing', 'content')) {
+        return attributes;
+    }
+
+    return {
+        ...attributes,
+        class: `${attributes.class} textarea--autoresize-fallback`,
+        oninput: (e: InputEvent) => {
+            let element = e.target as HTMLTextAreaElement;
+
+            element.style.setProperty('--content-height', '0px');
+            element.style.setProperty('--content-height', `${element.scrollHeight}px`);
+        }
+    };
+}
+
+
+export default component(function(
     this: { attributes?: Attributes },
-    attributes: Attributes & { state?: { active: boolean, error: string } }
-) {
-    let state = attributes.state || reactive({
+    {
+        autoresize: resize,
+        state = reactive({
             active: false,
             error: ''
-        });
+        }),
+        ...attributes
+    }: Attributes & {
+        autoresize?: Autoresize,
+        state?: { active: boolean, error: string }
+    }
+) {
+    attributes.value ??= '';
 
     return html`
         <textarea
             class='textarea'
-            ${this?.attributes && omit(this.attributes, OMIT)}
-            ${omit(attributes, OMIT)}
+            ${this?.attributes}
+            ${attributes}
+            ${resize && autoresize(resize)}
             ${{
                 class: () => state.active && '--active',
                 onfocusin: () => {
@@ -30,9 +63,8 @@ export default function(
                 onfocusout: () => {
                     state.active = false;
                 },
-                onrender: form.input.onrender(state),
-                value: attributes?.value || ''
+                onrender: form.input.onrender(state)
             }}
         ></textarea>
     `;
-};
+});

package/src/components/textarea/scss/index.scss

@@ -1,32 +1,43 @@
 @use 'variables';
 
 .textarea {
-    align-items: center;
     background: var(--background);
     border: var(--border-width) var(--border-style) var(--border-color);
     border-radius: var(--border-radius);
     color: var(--color);
     cursor: text;
-    display: flex;
-    field-sizing: content;
     flex: 1 1 auto;
-    flex-wrap: wrap;
     font-size: var(--font-size);
-    line-height: var(--line-height);
     min-width: 0;
-    padding: var(--padding-vertical) var(--padding-horizontal);
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    white-space: normal;
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        box-shadow var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     width: 100%;
 
     &:invalid,
     &:required {
         box-shadow: none;
     }
-}
+
+
+    &--autoresize {
+        field-sizing: content;
+        height: auto;
+        max-height: var(--max-height);
+        min-height: var(--min-height);
+        overflow-y: auto;
+        resize: none;
+
+        &-fallback {
+            box-sizing: border-box;
+            height: calc(var(--content-height, var(--min-height)) + 2 * var(--border-width));
+        }
+    }
+}

package/src/components/textarea/scss/variables.scss

@@ -19,7 +19,6 @@
     --color-hover: var(--color-default);
     --color-pressed: var(--color-default);
     --font-size: var(--font-size-400);
-    --line-height: var(--line-height-400);
     --padding-horizontal: var(--size-400);
     --padding-vertical: var(--size-400);
     --size: var(--size-400);

package/src/components/toast/scss/index.scss

@@ -95,7 +95,7 @@
         align-items: center;
         background: var(--background);
         border: 1px solid var(--color-border-400);
-        border-radius: var(--border-radius-circle);
+        border-radius: 100%;
         color: var(--color-text-500);
         display: flex;
         height: var(--size-500);

package/src/components/tooltip/constants.ts

@@ -0,0 +1,6 @@
+const MENU_OPTION = Symbol.for('@esportsplus/ui/tooltip.menu.option');
+
+const MENU_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.menu.tooltip-content');
+
+
+export { MENU_OPTION, MENU_TOOLTIP_CONTENT };

package/src/components/tooltip/index.ts

@@ -4,4 +4,7 @@ import onhover from './onhover';
 import './scss/index.scss';
 
 
-export default { menu, onclick, onhover };
+const tooltip: { menu: typeof menu, onclick: typeof onclick, onhover: typeof onhover } = { menu, onclick, onhover };
+
+
+export default tooltip;

package/src/components/tooltip/menu.ts

@@ -1,55 +1,44 @@
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
+import { MENU_OPTION, MENU_TOOLTIP_CONTENT } from './constants';
 import onclick from './onclick';
 
 
 type A = Attributes & {
+    [MENU_OPTION]?: Attributes,
+    [MENU_TOOLTIP_CONTENT]?: Attributes & { direction?: string },
     options: (Attributes & { content: Renderable<unknown> })[],
-    option?: Attributes,
     state?: { active: boolean },
-    toggle?: boolean,
-    'tooltip-content': Attributes & { direction?: string }
+    toggle?: boolean
 };
 
 
-const OMIT = ['options', 'option', 'tooltip-content'];
-
-const OMIT_OPTION = ['content'];
-
-const OMIT_TOOLTIP_CONTENT = ['direction'];
-
-
-export default component<A>(
-    (attributes, content) => {
-        let options = attributes.options,
-            option = attributes.option,
-            state = attributes.state || reactive({ active: false }),
-            tooltipContent = attributes?.['tooltip-content'],
-            tooltipContentDirection = tooltipContent?.direction || 'nw';
+export default Object.assign(component<A>(
+    ({ options, state = reactive({ active: false }), ...attributes }, content) => {
+        let { direction = 'nw', ...tooltipContent } = attributes[MENU_TOOLTIP_CONTENT] ?? {};
 
         return onclick(
-            { ...omit(attributes, OMIT), state },
+            { ...attributes, state },
             html`
                 ${content}
 
                 <div
-                    class='tooltip-content ${`tooltip-content--${tooltipContentDirection}`}'
-                    ${tooltipContent && omit(tooltipContent, OMIT_TOOLTIP_CONTENT)}
+                    class='tooltip-content ${`tooltip-content--${direction}`}'
+                    ${tooltipContent}
                     ${{
                         inert: () => !state.active
                     }}
                 >
-                    ${options.map((o) => {
+                    ${options.map(({ content, ...o }) => {
                         if (o.href) {
                             return html`
                                 <a
                                     class='link --width-full'
                                     target='_blank'
-                                    ${omit(o, OMIT_OPTION)}
-                                    ${option}
+                                    ${o}
+                                    ${attributes[MENU_OPTION]}
                                 >
-                                    ${o.content}
+                                    ${content}
                                 </a>
                             `;
                         }
@@ -57,10 +46,10 @@ export default component<A>(
                         return html`
                             <div
                                 class='link --width-full'
-                                ${omit(o, OMIT_OPTION)}
-                                ${option}
+                                ${o}
+                                ${attributes[MENU_OPTION]}
                             >
-                                ${o.content}
+                                ${content}
                             </div>
                         `;
                     })}
@@ -68,4 +57,4 @@ export default component<A>(
             `
         );
     }
-);
+), { option: MENU_OPTION, tooltipContent: MENU_TOOLTIP_CONTENT } as const);

package/src/components/tooltip/onclick.ts

@@ -1,96 +1,29 @@
 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 }),
-            toggle = attributes.toggle || false;
-
-        return html`
-            <div
-                class='tooltip'
-                ${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;
-                            return;
-                        }
-
-                        state.active = active;
-
-                        if (active) {
-                            queue.push({
-                                fn: () => state.active = false,
-                                tooltip: this
-                            });
-                        }
+    ({ state = reactive({ active: false }), toggle = false, ...attributes }, content) => html`
+        <div
+            class='tooltip'
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                onclick: function(e) {
+                    state.active = this === e.target || toggle ? !state.active : true;
+                },
+                ondocumentclick: function(this, event) {
+                    if (!this?.isConnected || !state.active) {
+                        return;
+                    }
 
-                        if (!scheduled) {
-                            root.onclick.push(() => {
-                                frame();
-                                scheduled = false;
-                            });
-                            scheduled = true;
-                        }
+                    if (!this.contains(event.target as Node | null)) {
+                        state.active = false;
                     }
-                }}
-            >
-                ${content}
-            </div>
-        `;
-    }
+                }
+            }}
+        >
+            ${content}
+        </div>
+    `
 );

package/src/components/tooltip/onhover.ts

@@ -1,34 +1,23 @@
 import { component, html, Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 
 
-type A = Attributes & { state?: { active: boolean } };
-
-
-const OMIT = ['state'];
-
-
-export default component(
-    (attributes: A, content) => {
-        let state = attributes.state || reactive({ active: false });
-
-        return html`
-            <div
-                class='tooltip'
-                ${omit(attributes, OMIT)}
-                ${{
-                    class: () => state.active && '--active',
-                    onmouseover: () => {
-                        state.active = true;
-                    },
-                    onmouseout: () => {
-                        state.active = false;
-                    }
-                }}
-            >
-                ${content}
-            </div>
-        `;
-    }
+export default component<Attributes & { state?: { active: boolean } }>(
+    ({ state = reactive({ active: false }), ...attributes }, content) => html`
+        <div
+            class='tooltip'
+            ${attributes}
+            ${{
+                class: () => state.active && '--active',
+                onmouseover: () => {
+                    state.active = true;
+                },
+                onmouseout: () => {
+                    state.active = false;
+                }
+            }}
+        >
+            ${content}
+        </div>
+    `
 );

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