@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/textarea/index.ts

@@ -7,7 +7,7 @@ import './scss/index.scss';
 type Autoresize = { height: { max: `${number}px`, min: `${number}px` } };
 
 
-function autoresize({ height }: Autoresize) {
+function autoresize({ height }: Autoresize, oninput: Attributes['oninput']) {
     let attributes = {
             class: 'textarea--autoresize',
             style: `
@@ -23,11 +23,14 @@ function autoresize({ height }: Autoresize) {
     return {
         ...attributes,
         class: `${attributes.class} textarea--autoresize-fallback`,
-        oninput: (e: InputEvent) => {
+        oninput: function(this: HTMLElement, e: InputEvent) {
             let element = e.target as HTMLTextAreaElement;
 
             element.style.setProperty('--content-height', '0px');
             element.style.setProperty('--content-height', `${element.scrollHeight}px`);
+
+            // The runtime keeps one listener per event, so this handler replaces the caller's
+            oninput?.call(this, e);
         }
     };
 }
@@ -54,7 +57,7 @@ export default component(function(
             class='textarea'
             ${this?.attributes}
             ${attributes}
-            ${resize && autoresize(resize)}
+            ${resize && autoresize(resize, attributes.oninput ?? this?.attributes?.oninput)}
             ${{
                 class: () => state.active && '--active',
                 onfocusin: () => {

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

@@ -9,9 +9,8 @@
     flex: 1 1 auto;
     font-size: var(--font-size);
     min-width: 0;
-    padding:
-        max(0px, calc(var(--padding-vertical) - var(--border-width)))
-        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+    padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
+    padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
         background var(--transition-duration) var(--transition-timing-function),

package/src/components/thumbnail/scss/index.scss

@@ -8,4 +8,55 @@
     height: var(--height);
     position: relative;
     width: var(--width);
+
+
+    &--stack {
+        & + & {
+            margin-left: calc(var(--stack-overlap) * -1);
+        }
+
+        // Cuts out the next sibling's shape (assumed to share this thumbnail's size), grown by
+        // the gap: band right of its corner centers, band between its corners, and its two left
+        // corner arcs. `min()` lets percentage radii (e.g. 100% circles) resolve in any context;
+        // arc radii live in the color stops since Chromium rejects mixed-unit calc() as a size.
+        &:has(+ .thumbnail--stack) {
+            --stack-cut: calc(var(--stack-radius) + var(--stack-gap));
+            --stack-radius: min(var(--border-radius), var(--height) / 2, var(--width) / 2);
+            --stack-x: calc(100% - var(--stack-overlap) + var(--stack-radius));
+            mask-composite: subtract, add, add, add, add;
+            mask-image:
+                var(--status-mask, linear-gradient(#000 0 0)),
+                linear-gradient(to right, transparent var(--stack-x), #000 0),
+                linear-gradient(to right, transparent calc(100% - var(--stack-overlap) - var(--stack-gap)), #000 0),
+                radial-gradient(circle at var(--stack-x) var(--stack-radius), #000 calc(var(--stack-cut) - 0.5px), transparent calc(var(--stack-cut) + 0.5px)),
+                radial-gradient(circle at var(--stack-x) calc(100% - var(--stack-radius)), #000 calc(var(--stack-cut) - 0.5px), transparent calc(var(--stack-cut) + 0.5px));
+            mask-position: 0 0, 0 0, 0 50%, 0 0, 0 0;
+            mask-repeat: no-repeat;
+            mask-size: 100% 100%, 100% 100%, 100% calc(100% - var(--stack-radius) * 2), 100% 100%, 100% 100%;
+        }
+    }
+
+    &--status {
+        --status-mask: radial-gradient(
+            circle at calc(100% - var(--status-size) / 2) calc(100% - var(--status-size) / 2),
+            #000 calc(var(--status-size) / 2 - 0.5px),
+            transparent calc(var(--status-size) / 2 + 0.5px) calc(var(--status-size) / 2 + var(--status-gap) - 0.5px),
+            #000 calc(var(--status-size) / 2 + var(--status-gap) + 0.5px)
+        );
+        // Chromium rounds the mask clip by border-radius, which would crop the dot on circles
+        mask-clip: no-clip;
+        mask-image: var(--status-mask);
+
+        // Oversized by 1px so the mask alone defines the dot's edge, leaving no background fringe beneath it
+        &::after {
+            background: var(--status-color);
+            border-radius: 100%;
+            bottom: -0.5px;
+            content: '';
+            height: calc(var(--status-size) + 1px);
+            position: absolute;
+            right: -0.5px;
+            width: calc(var(--status-size) + 1px);
+        }
+    }
 }

package/src/components/thumbnail/scss/variables.scss

@@ -4,4 +4,16 @@
     --height: var(--size);
     --size: var(--size-700);
     --width: var(--size);
+
+
+    &--stack {
+        --stack-gap: var(--border-width-500);
+        --stack-overlap: calc(var(--width) / 4);
+    }
+
+    &--status {
+        --status-color: var(--color-green-400);
+        --status-gap: var(--border-width-500);
+        --status-size: calc(min(var(--height), var(--width)) * 0.3);
+    }
 }

package/src/components/toast/index.ts

@@ -27,6 +27,15 @@ const ICONS = { error, info, loading, success, warning };
 const dismiss = toast.dismiss;
 
 
+function countdown(toast: Toast) {
+    return html`
+        <svg aria-hidden='true' class='toast-countdown' data-cycle='${toast.cycle}' viewBox='0 0 20 20'>
+            <circle class='toast-countdown-track' cx='10' cy='10' r='8' />
+            <circle class='toast-countdown-ring' cx='10' cy='10' r='8' style='animation-duration: ${toast.duration}ms;' />
+        </svg>
+    `;
+}
+
 function row(toast: Toast, position: Position) {
     let swipe = reactive({ direction: '', x: 0, y: 0 }),
         horizontal = position.endsWith('left') || position.endsWith('right'),
@@ -122,6 +131,7 @@ function row(toast: Toast, position: Position) {
             }}
         >
             <div class='toast-content'>
+                ${() => toast.countdown && countdown(toast)}
                 ${toast.type !== 'message' ? icon({ class: 'toast-icon' }, ICONS[toast.type]) : ''}
 
                 <div class='--flex-column --flex-fill'>
@@ -133,7 +143,7 @@ function row(toast: Toast, position: Position) {
                     `}
                 </div>
 
-                ${toast.type === 'error' && typeof toast.description === 'string' && clipboard.onclick(
+                ${toast.type === 'error' && typeof toast.description === 'string' && clipboard.copy(
                     {
                         class: 'toast-copy button',
                         value: String(toast.description)

package/src/components/toast/manager.ts

@@ -9,10 +9,12 @@ type Action = {
 
 type Options = {
     action?: Action;
+    countdown?: boolean;
     description?: Renderable<unknown> | string;
     dismissible?: boolean;
     duration?: number;
     id?: string;
+    ondismiss?: () => void;
     priority?: 'low' | 'high';
 };
 
@@ -26,7 +28,9 @@ type Timer = {
 
 type Toast = {
     action?: Action;
+    countdown: boolean;
     createdAt: number;
+    cycle: number;
     description?: Renderable<unknown> | string;
     dismissible: boolean;
     duration: number;
@@ -53,7 +57,8 @@ const DURATIONS: Record<Type, number> = {
 const EXIT_DURATION = 300;
 
 
-let counter = 0,
+let callbacks = new Map<string, () => void>(),
+    counter = 0,
     paused = false,
     timers = new Map<string, Timer>();
 
@@ -129,7 +134,9 @@ function create(type: Type, title: Renderable<unknown> | string, options: Option
     let id = options.id ?? `toast-${++counter}`,
         toast = reactive({
             action: options.action,
+            countdown: options.countdown ?? false,
             createdAt: Date.now(),
+            cycle: 0,
             description: options.description,
             dismissible: options.dismissible ?? true,
             duration: options.duration ?? DURATIONS[type],
@@ -141,6 +148,10 @@ function create(type: Type, title: Renderable<unknown> | string, options: Option
             type
         }) as Toast;
 
+    if (options.ondismiss) {
+        callbacks.set(id, options.ondismiss);
+    }
+
     toasts.push(toast);
 
     queueMicrotask(() => {
@@ -168,6 +179,13 @@ function dismiss(id: string) {
     toast.status = 'ending';
 
     setTimeout(() => remove(id), EXIT_DURATION);
+
+    let callback = callbacks.get(id);
+
+    if (callback) {
+        callbacks.delete(id);
+        callback();
+    }
 }
 
 function normalizeToastHeight(height: number | null | undefined): number {
@@ -190,6 +208,7 @@ function pause() {
 function remove(id: string) {
     let index = toasts.findIndex((toast) => toast.id === id);
 
+    callbacks.delete(id);
     clearTimer(id);
 
     if (index !== -1) {
@@ -213,6 +232,9 @@ function schedule(toast: Toast) {
         return;
     }
 
+    // Restarts a countdown ring bound to this timer.
+    toast.cycle += 1;
+
     if (state.active) {
         timers.set(toast.id, {
             handle: undefined,
@@ -241,6 +263,10 @@ function update(id: string, options: Options) {
         toast.action = options.action;
     }
 
+    if (options.countdown !== undefined) {
+        toast.countdown = options.countdown;
+    }
+
     if (options.description !== undefined) {
         toast.description = options.description;
     }
@@ -249,6 +275,10 @@ function update(id: string, options: Options) {
         toast.dismissible = options.dismissible;
     }
 
+    if (options.ondismiss !== undefined) {
+        callbacks.set(id, options.ondismiss);
+    }
+
     if (options.priority !== undefined) {
         toast.priority = options.priority;
     }

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

@@ -29,7 +29,7 @@
 
     &[data-position$='center'] {
         left: 50%;
-        transform: translateX(-50%);
+        translate: -50%;
     }
 }
 
@@ -40,15 +40,16 @@
     border-radius: var(--border-radius-500);
     box-shadow: var(--box-shadow-300);
     color: var(--color-text-400);
-    left: 0;
+    inset-inline: 0;
     overflow: visible;
     position: absolute;
-    right: 0;
-    transform: translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
+    scale: var(--toast-scale);
     transition:
-        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+        translate 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+        scale 0.4s cubic-bezier(0.22, 1, 0.36, 1),
         opacity 0.3s,
         height 0.2s;
+    translate: var(--toast-swipe-x) calc(var(--toast-swipe-y) + (var(--toast-index) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-calc-height)));
     user-select: none;
     width: 100%;
     z-index: calc(9999 - var(--toast-index, 0));
@@ -64,8 +65,8 @@
         --toast-calc-offset-y: calc((var(--toast-offset-y, 0px) * -1) + (var(--toast-index, 0) * var(--toast-gap) * -1) + var(--toast-swipe-y, 0px));
         bottom: 0;
         top: auto;
-        transform: translateX(var(--toast-swipe-x)) translateY(calc(var(--toast-swipe-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale));
         transform-origin: bottom;
+        translate: var(--toast-swipe-x) calc(var(--toast-swipe-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-calc-height)));
     }
 
 
@@ -100,8 +101,8 @@
         display: flex;
         height: var(--size-500);
         justify-content: center;
+        inset-inline-end: calc(var(--size-200) * -1);
         position: absolute;
-        right: calc(var(--size-200) * -1);
         top: calc(var(--size-200) * -1);
         width: var(--size-500);
         z-index: 1;
@@ -126,6 +127,30 @@
         justify-content: center;
     }
 
+    // The ring is the timer itself: linear because it is a clock.
+    &-countdown {
+        flex-shrink: 0;
+        height: 20px;
+        rotate: -90deg;
+        width: 20px;
+
+        circle {
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 2;
+        }
+
+        &-ring {
+            animation: toast-countdown linear forwards;
+            stroke-dasharray: var(--toast-countdown-length);
+            stroke-linecap: round;
+        }
+
+        &-track {
+            opacity: 0.2;
+        }
+    }
+
     &-description {
         color: var(--color-text-300);
         overflow-wrap: anywhere;
@@ -140,7 +165,7 @@
     }
 
     &-details {
-        margin-top: var(--size-200);
+        margin-block-start: var(--size-200);
         max-height: 160px;
         overflow-y: auto;
     }
@@ -210,7 +235,8 @@
 // active (viewport hovered): everything fans out to its own measured offset.
 .toaster.--active .toast {
     height: auto;
-    transform: translateX(var(--toast-swipe-x)) translateY(var(--toast-calc-offset-y));
+    scale: 1;
+    translate: var(--toast-swipe-x) var(--toast-calc-offset-y);
 }
 
 .toaster.--active .toast-content {
@@ -218,17 +244,24 @@
 }
 
 
+// Hovering the stack pauses every timer, so the rings pause with them.
+.toaster.--active .toast-countdown-ring {
+    animation-play-state: paused;
+}
+
+
 // Entering: start off-screen (faded) and let the base transform animate in.
 .toaster .toast.toast--starting {
     opacity: 0;
+    scale: 1;
 }
 
 .toaster[data-position*='top'] .toast.toast--starting {
-    transform: translateY(-120%);
+    translate: 0 -120%;
 }
 
 .toaster[data-position*='bottom'] .toast.toast--starting {
-    transform: translateY(120%);
+    translate: 0 120%;
 }
 
 
@@ -236,30 +269,31 @@
 // direction the gesture reported).
 .toaster .toast.toast--ending {
     opacity: 0;
+    scale: 1;
 }
 
 .toaster[data-position*='top'] .toast.toast--ending {
-    transform: translateY(calc(-100% - var(--toast-inset)));
+    translate: 0 calc(-100% - var(--toast-inset));
 }
 
 .toaster[data-position*='bottom'] .toast.toast--ending {
-    transform: translateY(calc(100% + var(--toast-inset)));
+    translate: 0 calc(100% + var(--toast-inset));
 }
 
 .toaster .toast.toast--ending[data-swipe-direction='left'] {
-    transform: translateX(calc(var(--toast-swipe-x) - 100% - var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+    translate: calc(var(--toast-swipe-x) - 100% - var(--toast-inset)) var(--toast-calc-offset-y);
 }
 
 .toaster .toast.toast--ending[data-swipe-direction='right'] {
-    transform: translateX(calc(var(--toast-swipe-x) + 100% + var(--toast-inset))) translateY(var(--toast-calc-offset-y));
+    translate: calc(var(--toast-swipe-x) + 100% + var(--toast-inset)) var(--toast-calc-offset-y);
 }
 
 .toaster .toast.toast--ending[data-swipe-direction='up'] {
-    transform: translateY(calc(var(--toast-swipe-y) - 100% - var(--toast-inset)));
+    translate: 0 calc(var(--toast-swipe-y) - 100% - var(--toast-inset));
 }
 
 .toaster .toast.toast--ending[data-swipe-direction='down'] {
-    transform: translateY(calc(var(--toast-swipe-y) + 100% + var(--toast-inset)));
+    translate: 0 calc(var(--toast-swipe-y) + 100% + var(--toast-inset));
 }
 
 
@@ -269,8 +303,22 @@
 }
 
 
+@media (prefers-reduced-motion: reduce) {
+    .toast,
+    .toast-content {
+        transition: none;
+    }
+}
+
+
+@keyframes toast-countdown {
+    to {
+        stroke-dashoffset: var(--toast-countdown-length);
+    }
+}
+
 @keyframes toast-spin {
     to {
-        transform: rotate(360deg);
+        rotate: 360deg;
     }
 }

package/src/components/toast/scss/variables.scss

@@ -9,6 +9,8 @@
     --toast-calc-height: max(var(--toast-frontmost-height, var(--toast-height, 0px)), var(--toast-height, 0px));
     --toast-calc-offset-y: calc(var(--toast-offset-y, 0px) + (var(--toast-index, 0) * var(--toast-gap)) + var(--toast-swipe-y, 0px));
     --toast-color: var(--color-text-300);
+    // Circumference of the r=8 countdown ring: 2 * PI * 8.
+    --toast-countdown-length: 50.27;
     --toast-height: 0px;
     --toast-index: 0;
     --toast-offset-y: 0px;

package/src/components/tooltip/context.ts

@@ -0,0 +1,96 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import render, { type Option } from './options';
+
+
+const CONTEXT_OPTION = Symbol.for('@esportsplus/ui/tooltip.context.option');
+
+const CONTEXT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/tooltip.context.tooltip-content');
+
+
+type A = Attributes & {
+    [CONTEXT_OPTION]?: Attributes,
+    [CONTEXT_TOOLTIP_CONTENT]?: Attributes,
+    oncontextmenu?: never,
+    ondocumentclick?: never,
+    ondocumentcontextmenu?: never,
+    ondocumentkeydown?: never,
+    options: Option[],
+    state?: { active: boolean }
+};
+
+
+export default component(
+    ({ options, state = reactive({ active: false }), ...attributes }: A, content) => {
+        let menu: HTMLElement | undefined;
+
+        return html`
+            <div
+                class='tooltip tooltip--context'
+                ${attributes}
+                ${{
+                    class: () => state.active && '--active',
+                    oncontextmenu: function(this: HTMLElement, event: MouseEvent) {
+                        if (!menu) {
+                            return;
+                        }
+
+                        event.preventDefault();
+
+                        let bounds = this.getBoundingClientRect(),
+                            x = event.clientX,
+                            xflip = x + menu.offsetWidth > window.innerWidth,
+                            y = event.clientY,
+                            yflip = y + menu.offsetHeight > window.innerHeight;
+
+                        // Flip toward the cursor when the menu would overflow the viewport
+                        if (xflip) {
+                            x -= menu.offsetWidth;
+                        }
+
+                        if (yflip) {
+                            y -= menu.offsetHeight;
+                        }
+
+                        menu.style.left = `${x - bounds.left - this.clientLeft + this.scrollLeft}px`;
+                        menu.style.top = `${y - bounds.top - this.clientTop + this.scrollTop}px`;
+                        menu.style.transformOrigin = `${xflip ? 'right' : 'left'} ${yflip ? 'bottom' : 'top'}`;
+
+                        state.active = true;
+                    },
+                    ondocumentclick: () => {
+                        state.active = false;
+                    },
+                    ondocumentcontextmenu: function(this: HTMLElement, event: MouseEvent) {
+                        if (!state.active || this.contains(event.target as Node | null)) {
+                            return;
+                        }
+
+                        state.active = false;
+                    },
+                    ondocumentkeydown: (event: KeyboardEvent) => {
+                        if (event.key === 'Escape') {
+                            state.active = false;
+                        }
+                    }
+                }}
+            >
+                ${content}
+
+                <div
+                    class='tooltip-content tooltip-content--context'
+                    ${attributes[CONTEXT_TOOLTIP_CONTENT]}
+                    ${{
+                        inert: () => !state.active,
+                        onrender: (element: HTMLElement) => {
+                            menu = element;
+                        }
+                    }}
+                >
+                    ${render(options, attributes[CONTEXT_OPTION])}
+                </div>
+            </div>
+        `;
+    },
+    { option: CONTEXT_OPTION, tooltipContent: CONTEXT_TOOLTIP_CONTENT }
+);