@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/highlight/scss/index.scss

@@ -4,27 +4,61 @@
     background: var(--background);
     border-radius: var(--border-radius);
     display: none;
-    height: var(--height);
+    height: calc(var(--height) - var(--inset-block) * 2 + var(--slide-height));
     left: 0;
     opacity: 0;
     pointer-events: none;
     position: absolute;
     scale: var(--scale-hidden);
     top: 0;
+    // Position and size sit on the item at all times; gliding between items is an offset the script adds on top.
     transition:
         background var(--transition-duration) var(--transition-timing-function),
-        border-radius var(--glide-duration) var(--glide-timing-function),
+        border-radius var(--glide) var(--glide-timing-function),
         display var(--fade-duration) allow-discrete,
-        height var(--glide-duration) var(--glide-timing-function),
         opacity var(--fade-duration) var(--transition-timing-function),
-        scale var(--fade-duration) var(--transition-timing-function),
-        translate var(--glide-duration) var(--glide-timing-function),
-        width var(--glide-duration) var(--glide-timing-function);
-    translate: var(--x) var(--y);
-    width: var(--width);
+        scale var(--fade-duration) var(--transition-timing-function);
+    translate: calc(var(--x) + var(--inset-inline) + var(--slide-x)) calc(var(--y) + var(--inset-block) + var(--slide-y));
+    width: calc(var(--width) - var(--inset-inline) * 2 + var(--slide-width));
     z-index: -1;
 
-    &.--visible {
+    &--line::after {
+        background: var(--line-color);
+        border-radius: var(--line-radius);
+        content: '';
+        position: absolute;
+    }
+
+    &--unfilled {
+        background: transparent;
+    }
+
+    // The line runs along the item's own edge, so it reaches back out past the inset.
+    &--line-bottom::after {
+        bottom: calc(var(--line-offset) - var(--inset-block));
+        height: var(--line-width);
+        inset-inline: calc(var(--inset-inline) * -1);
+    }
+
+    &--line-left::after {
+        inset-block: calc(var(--inset-block) * -1);
+        left: calc(var(--line-offset) - var(--inset-inline));
+        width: var(--line-width);
+    }
+
+    &--line-right::after {
+        inset-block: calc(var(--inset-block) * -1);
+        right: calc(var(--line-offset) - var(--inset-inline));
+        width: var(--line-width);
+    }
+
+    &--line-top::after {
+        height: var(--line-width);
+        inset-inline: calc(var(--inset-inline) * -1);
+        top: calc(var(--line-offset) - var(--inset-block));
+    }
+
+    &--visible {
         display: block;
         opacity: 1;
         scale: 1;
@@ -36,8 +70,14 @@
         }
     }
 
+    // The layer jumps to its item. Doubled to outrank the active state's own glide.
     @media (prefers-reduced-motion: reduce) {
         transition: background var(--transition-duration) var(--transition-timing-function);
+
+        &.highlight {
+            --glide: 0s;
+            --glide-tail: 0s;
+        }
     }
 }
 

package/src/components/highlight/scss/variables.scss

@@ -1,5 +1,31 @@
 @use '/tokens';
 
+// A glide's offset, added onto the layer's box. Registered so it can run negative, which width and height can't,
+// and so the leading and trailing edges' animations can add together.
+@property --slide-height {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --slide-width {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --slide-x {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
+@property --slide-y {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
 .highlight {
     --background: var(--background-default);
     --background-active: color-mix(in srgb, currentColor 10%, transparent);
@@ -7,20 +33,53 @@
     --background-hover: var(--background-default);
     --background-pressed: color-mix(in srgb, currentColor 14%, transparent);
     --fade-duration: 0.2s;
-    --glide-duration: 0.6s;
+    // What each layer glides with: the active layer takes '--glide-duration-active', so a selection can jump ('0s')
+    // while hover still glides.
+    --glide: var(--glide-duration);
+    --glide-duration: 0.24s;
+    --glide-duration-active: var(--glide-duration);
+    // What the edge trailing a glide takes; longer than '--glide' stretches the layer toward the new item.
+    --glide-tail: var(--glide-tail-duration);
+    --glide-tail-duration: var(--glide-duration);
+    --glide-tail-duration-active: var(--glide-duration-active);
     // Damped spring (~4% overshoot) sampled into linear() so the glide settles past its target and back.
     --glide-timing-function: linear(0, 0.035, 0.123, 0.239, 0.367, 0.494, 0.611, 0.715, 0.803, 0.874, 0.929, 0.971, 1, 1.02, 1.032, 1.037, 1.038, 1.037, 1.033, 1.028, 1.024, 1.019, 1.014, 1.01, 1);
+    // The first and last tracked items settle without overshoot, keeping the glide inside the group's ends.
+    --glide-timing-function-edge: cubic-bezier(0.22, 1, 0.36, 1);
+    // Pulls the layer in from its item's box, top and bottom or left and right.
+    --inset-block: 0px;
+    --inset-inline: 0px;
+    --line-color: currentColor;
+    // How far the fills keep clear of the line's side, and the one across from it.
+    --line-inset: 6px;
+    // In from the item's edge; negative pushes the line out, e.g. over the container's own border.
+    --line-offset: 0px;
+    --line-radius: calc(var(--line-width) / 2);
+    --line-width: 2px;
     --scale-hidden: 0.92;
 
     @include tokens.state(active) {
         --background: var(--background-active);
+        --glide: var(--glide-duration-active);
+        --glide-tail: var(--glide-tail-duration-active);
     }
 
-    &.--hover {
+    &--hover {
         --background: var(--background-hover);
     }
 
-    &.--pressed {
+    // Horizontal and vertical lines look alike: the fills stop short of the line, which runs along the item's edge.
+    &--line-bottom,
+    &--line-top {
+        --inset-block: var(--line-inset);
+    }
+
+    &--line-left,
+    &--line-right {
+        --inset-inline: var(--line-inset);
+    }
+
+    &--pressed {
         --background: var(--background-pressed);
     }
 }

package/src/components/icon/scss/index.scss

@@ -10,7 +10,6 @@
 
 
     svg {
-        color: currentColor;
         fill: currentColor;
         height: 100%;
         width: 100%;

package/src/components/image/index.ts

@@ -1,79 +1,6 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
+import lazyload from './lazyload';
 import './scss/index.scss';
 
 
-type Status = 'error' | 'loading' | 'ready';
-
-
-export default ({ alt, fetchpriority, height, loading = 'lazy', placeholder, sizes, src, srcset, width, ...attributes }: Attributes & {
-    alt: string;
-    fetchpriority?: 'auto' | 'high' | 'low';
-    height: number;
-    loading?: 'eager' | 'lazy';
-    placeholder?: string;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    width: number;
-}) => {
-    // Spread at runtime so unset values are skipped; an empty src would fire a spurious error.
-    let source = { fetchpriority, sizes, src, srcset },
-        state = reactive({ instant: false, status: 'loading' as Status });
-
-    function settle(status: Status, instant: boolean) {
-        state.instant = instant;
-        state.status = status;
-    }
-
-    return html`
-        <div
-            aria-busy='${() => String(state.status === 'loading')}'
-            class='image'
-            style='${`--aspect-ratio: ${width} / ${height}`}'
-            ${attributes}
-            ${{
-                class: () => `--${state.status}${state.instant ? ' --instant' : ''}`
-            }}
-        >
-            ${placeholder && html`
-                <img alt='' aria-hidden='true' class='image-placeholder' draggable='false' src='${placeholder}' />
-            `}
-            <img
-                alt='${alt}'
-                class='image-source'
-                decoding='async'
-                draggable='false'
-                height='${height}'
-                loading='${loading}'
-                width='${width}'
-                ${source}
-                ${{
-                    onerror: () => settle('error', false),
-                    onload: function(this: HTMLImageElement) {
-                        if (state.status === 'ready') {
-                            return;
-                        }
-
-                        this.decode().then(
-                            () => settle('ready', false),
-                            () => settle('error', false)
-                        );
-                    },
-                    onrender: (img: HTMLImageElement) => {
-                        // Memory-cached images have dimensions synchronously; reveal them without replaying the develop.
-                        // Deferred lazy images also report complete, so naturalWidth is the only reliable signal.
-                        if (img.complete && img.naturalWidth > 0) {
-                            settle('ready', true);
-                        }
-                    }
-                }}
-            />
-            <div aria-hidden='true' class='image-error'>
-                <svg fill='currentColor' viewBox='0 0 256 256'>
-                    <path d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z' />
-                </svg>
-            </div>
-        </div>
-    `;
-};
+export default { lazyload };
+export { lazyload };

package/src/components/image/lazyload.ts

@@ -0,0 +1,95 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+
+
+type Status = 'error' | 'loading' | 'ready';
+
+
+export default ({ alt, crossorigin, fetchpriority, height, loading = 'lazy', placeholder, referrerpolicy, sizes, src, srcset, width, ...attributes }: Attributes & {
+    alt: string;
+    crossorigin?: 'anonymous' | 'use-credentials';
+    fetchpriority?: 'auto' | 'high' | 'low';
+    height: number;
+    loading?: 'eager' | 'lazy';
+    placeholder: string;
+    referrerpolicy?: ReferrerPolicy;
+    sizes?: string;
+    src: string;
+    srcset?: string;
+    width: number;
+}) => {
+    // Spread at runtime so unset values are skipped.
+    let source = { crossorigin, fetchpriority, referrerpolicy, sizes, srcset },
+        state = reactive({ covered: true, status: 'loading' as Status });
+
+    function uncover(e: TransitionEvent) {
+        if (e.propertyName === 'opacity') {
+            state.covered = false;
+        }
+    }
+
+    return html`
+        <div
+            aria-busy='${() => String(state.status === 'loading')}'
+            class='image-lazyload'
+            style='${`--aspect-ratio: ${width} / ${height}`}'
+            ${attributes}
+            ${{
+                class: () => `image-lazyload--${state.status}`
+            }}
+        >
+            <img
+                alt='${alt}'
+                class='image-lazyload-source'
+                decoding='async'
+                draggable='false'
+                height='${height}'
+                loading='${loading}'
+                src='${src}'
+                width='${width}'
+                ${source}
+                ${{
+                    onconnect: (img: HTMLImageElement) => {
+                        // Memory-cached images have dimensions synchronously; drop the placeholder without a fade.
+                        // Deferred lazy images also report complete, so naturalWidth is the only reliable signal.
+                        if (img.complete && img.naturalWidth > 0) {
+                            state.covered = false;
+                            state.status = 'ready';
+                        }
+                    },
+                    onerror: () => {
+                        state.status = 'error';
+                    },
+                    onload: function(this: HTMLImageElement) {
+                        if (state.status === 'ready') {
+                            return;
+                        }
+
+                        this.decode().then(
+                            () => {
+                                state.status = 'ready';
+                            },
+                            () => {
+                                state.status = 'error';
+                            }
+                        );
+                    }
+                }}
+            />
+            ${() => state.covered && html`
+                <img
+                    alt=''
+                    aria-hidden='true'
+                    class='image-lazyload-placeholder'
+                    decoding='async'
+                    draggable='false'
+                    src='${placeholder}'
+                    ${{
+                        ontransitioncancel: uncover,
+                        ontransitionend: uncover
+                    }}
+                />
+            `}
+        </div>
+    `;
+};

package/src/components/image/scss/index.scss

@@ -1,82 +1,96 @@
+@use '/shared';
 @use 'variables';
 
 .image {
-    aspect-ratio: var(--aspect-ratio);
     background: var(--background);
+    background-position: center;
+    background-size: cover;
     border-radius: var(--border-radius);
-    overflow: hidden;
+    height: var(--height);
     position: relative;
-    width: 100%;
+    width: var(--width);
 
-    &-error {
-        background: var(--error-background);
-        color: var(--error-color);
-        display: grid;
-        opacity: 0;
-        place-items: center;
-        transition: opacity var(--transition-duration) var(--timing-function);
 
-        svg {
-            height: var(--error-size);
-            width: var(--error-size);
+    &--stack {
+        & + & {
+            margin-left: calc(var(--stack-overlap) * -1);
         }
-    }
 
-    &-error,
-    &-placeholder,
-    &-source {
-        height: 100%;
-        inset: 0;
-        position: absolute;
-        width: 100%;
+        // Cuts out the next sibling's shape (assumed to share this image'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(+ .image--stack) {
+            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%;
+        }
     }
 
-    &-placeholder {
-        filter: blur(var(--blur));
-        scale: var(--placeholder-scale);
-    }
+    &--status {
+        // Chromium rounds the mask clip by border-radius, which would crop the dot on circles
+        mask-clip: no-clip;
+        mask-image: var(--status-mask);
 
-    &-placeholder,
-    &-source {
-        object-fit: cover;
-        user-select: none;
+        // 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);
+        }
     }
 
-    &-source {
-        filter: blur(var(--develop-blur)) saturate(var(--develop-saturate));
-        opacity: 0;
-        scale: var(--develop-scale);
-        transition:
-            filter var(--transition-duration) var(--timing-function),
-            opacity var(--transition-duration) var(--timing-function),
-            scale var(--transition-duration) var(--timing-function);
-    }
 
-    &.--error {
-        .image-error {
-            opacity: 1;
+    &-lazyload {
+        aspect-ratio: var(--aspect-ratio);
+        background: var(--background);
+        border-radius: var(--border-radius);
+        isolation: isolate;
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+
+        &--error {
+            --source-visibility: hidden;
         }
-    }
 
-    &.--instant {
-        .image-error,
-        .image-source {
-            transition: none;
+        &--ready {
+            --placeholder-opacity: 0;
         }
-    }
 
-    &.--ready {
-        .image-source {
-            filter: blur(0) saturate(1);
-            opacity: 1;
-            scale: 1;
+        &-placeholder,
+        &-source {
+            @extend %absolute-full;
+            height: 100%;
+            object-fit: cover;
+            user-select: none;
+            width: 100%;
+        }
+
+        // Covers the source while it streams in, then fades out and is removed from the DOM.
+        &-placeholder {
+            opacity: var(--placeholder-opacity, 1);
+            pointer-events: none;
+            transition: opacity var(--transition-duration) var(--timing-function);
+            z-index: 1;
         }
-    }
 
-    @media (prefers-reduced-motion: reduce) {
-        &-error,
+        // Unset until an error, so it inherits like any other element's.
         &-source {
-            transition: none;
+            visibility: var(--source-visibility);
+            z-index: 0;
         }
     }
-}
+}

package/src/components/image/scss/variables.scss

@@ -1,15 +1,40 @@
 .image {
-    --aspect-ratio: auto;
-    --background: var(--color-grey-500);
-    --blur: 14px;
-    --border-radius: var(--border-radius-600);
-    --develop-blur: 18px;
-    --develop-saturate: 0.6;
-    --develop-scale: 1.06;
-    --error-background: var(--color-white-400);
-    --error-color: var(--color-text-300);
-    --error-size: 22px;
-    --placeholder-scale: 1.08;
-    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --transition-duration: 0.65s;
-}
+    --background: transparent;
+    --border-radius: var(--border-radius-300);
+    --height: var(--size);
+    --size: var(--size-700);
+    --width: var(--size);
+
+
+    &--stack {
+        --stack-gap: var(--border-width-500);
+        --stack-overlap: calc(var(--width) / 4);
+
+        &:has(+ .image--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));
+        }
+    }
+
+    &--status {
+        --status-color: var(--color-green-400);
+        --status-gap: var(--border-width-500);
+        --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)
+        );
+        --status-size: calc(min(var(--height), var(--width)) * 0.3);
+    }
+
+
+    &-lazyload {
+        --aspect-ratio: auto;
+        --background: var(--color-grey-500);
+        --border-radius: var(--border-radius-600);
+        --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --transition-duration: 0.65s;
+    }
+}