@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/counter/index.ts

@@ -1,13 +1,30 @@
 import { html, type Attributes } from '@esportsplus/template';
 import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import { onceVisible } from '~/shared/visible';
 import './scss/index.scss';
 
 
+type Currency = 'EUR' | 'GBP' | 'IGNORE' | 'USD';
+
+
+const DIGIT = /\d/;
+
+
 let formatters: Record<string, Intl.NumberFormat> = {};
 
 
-export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state: api = reactive({ value: -1 }), suffix, value, ...attributes }: Attributes & {
-    currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
+// Both paths use the visitor's locale; 'IGNORE' formats a plain number instead of a currency.
+function formatter(currency: Currency, decimals: number) {
+    if (currency === 'IGNORE') {
+        return formatters[decimals] ??= new Intl.NumberFormat(undefined, { maximumFractionDigits: decimals });
+    }
+
+    return formatters[currency] ??= new Intl.NumberFormat(undefined, { currency, style: 'currency' });
+}
+
+
+export default ({ currency = 'USD', decimals = 2, delay, max, prefix, startOnView, value, state: api = reactive({ value }), suffix, ...attributes }: Attributes & {
+    currency?: Currency;
     decimals?: number;
     delay?: number;
     max?: number;
@@ -17,116 +34,74 @@ export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state
     suffix?: string;
     value: number;
 }) => {
-    let formatter = currency === 'IGNORE'
-            ? undefined
-            : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
-                style: 'currency',
-                currency: currency || 'USD'
-            }),
-        animation = reactive({ started: false }),
-        observer: IntersectionObserver | undefined,
+    let animation = reactive({ started: false }),
+        format = formatter(currency, decimals),
         render = reactive([] as { digit: boolean; index: number; roll: number; value: string }[]),
-        stop = effect(() => {
-            let target = api.value === -1 ? value : api.value,
-                started = animation.started;
-
-            let padding = (max || target).toFixed(decimals).length - target.toFixed(decimals).length,
-                values = target.toString().padStart(target.toString().length + padding, '1') as any;
-
-            if (formatter) {
-                values = formatter.format(values);
-            }
-            else {
-                values = Number(values).toLocaleString([], {
-                    minimumFractionDigits: 0,
-                    maximumFractionDigits: decimals
-                });
-            }
+        timer: ReturnType<typeof setTimeout> | undefined;
 
-            values = values.split('');
+    effect(() => {
+        let started = animation.started,
+            target = api.value;
 
-            if (prefix) {
-                values.unshift(...prefix.split(''));
-            }
+        let padding = (max || target).toFixed(decimals).length - target.toFixed(decimals).length,
+            values = format.format(Number(target.toString().padStart(target.toString().length + padding, '1'))).split('');
 
-            if (suffix) {
-                values.push(' ', ...suffix.split(''));
-            }
+        if (prefix) {
+            values.unshift(...prefix.split(''));
+        }
 
-            untrack(() => {
-                let remaining = values.filter((value: string) => !isNaN(parseInt(value, 10))).length;
+        if (suffix) {
+            values.push(' ', ...suffix.split(''));
+        }
 
-                for (let i = 0, n = values.length; i < n; i++) {
-                    let previous = render[i],
-                        value = values[i],
-                        digit = !isNaN(parseInt(value, 10)),
-                        index = digit ? --remaining : 0;
+        untrack(() => {
+            let remaining = values.filter((value) => DIGIT.test(value)).length;
 
-                    if (digit && (!started || padding > 0)) {
-                        padding--;
-                        value = '0';
-                    }
+            for (let i = 0, n = values.length; i < n; i++) {
+                let previous = render[i],
+                    value = values[i],
+                    digit = DIGIT.test(value),
+                    index = digit ? --remaining : 0;
 
-                    // Preserve the track so CSS can transition between digit positions.
-                    if (previous?.digit === digit) {
-                        previous.index = index;
+                if (digit && (!started || padding > 0)) {
+                    padding--;
+                    value = '0';
+                }
 
-                        if (previous.value !== value) {
-                            previous.roll = previous.roll === 1 ? 2 : 1;
-                            previous.value = value;
-                        }
-                    }
-                    else {
-                        let character = reactive({ digit, index, roll: 0, value });
+                // Preserve the track so CSS can transition between digit positions.
+                if (previous?.digit === digit) {
+                    previous.index = index;
 
-                        render[i] = character;
+                    if (previous.value !== value) {
+                        previous.roll = previous.roll === 1 ? 2 : 1;
+                        previous.value = value;
                     }
                 }
+                else {
+                    let character = reactive({ digit, index, roll: 0, value });
 
-                if (render.length > values.length) {
-                    render.splice(values.length);
+                    render[i] = character;
                 }
-            });
-        }),
-        timer: ReturnType<typeof setTimeout> | undefined;
+            }
+
+            if (render.length > values.length) {
+                render.splice(values.length);
+            }
+        });
+    });
 
     function start() {
         timer = setTimeout(() => animation.started = true, delay ?? 1000);
     }
 
-    onCleanup(() => {
-        clearTimeout(timer);
-        observer?.disconnect();
-        stop();
-    });
+    onCleanup(() => clearTimeout(timer));
 
     return html`
-        <div
-            class='counter'
-            ${attributes}
-            ${{
-                onconnect: (element: HTMLElement) => {
-                    if (!startOnView) {
-                        start();
-                        return;
-                    }
-
-                    observer = new IntersectionObserver((entries) => {
-                        if (!entries.some((entry) => entry.isIntersecting)) {
-                            return;
-                        }
-
-                        observer?.disconnect();
-                        start();
-                    });
-                    observer.observe(element);
-                }
-            }}
-        >
+        <div class='counter' ${attributes} ${startOnView ? onceVisible(start) : { onconnect: start }}>
             ${html.reactive(render, function (character) {
                     if (!character.digit) {
                         return html`
-                            <span class='counter-character counter-character--symbol'>
+                            <span aria-hidden='true' class='counter-character counter-character--symbol'>
                                 ${() => character.value}
                             </span>
                         `;
@@ -134,19 +109,19 @@ export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state
 
                     // Alternating the roll parity swaps between identical keyframes, restarting the per-roll animation.
                     return html`
-                        <div class='counter-character'>
+                        <div aria-hidden='true' class='counter-character'>
                             <div
-                                class='counter-character-track'
-                                data-roll='${() => character.roll}'
+                                class='counter-character-track ${() => character.roll && `counter-character-track--roll-${character.roll}`}'
                                 style='${() => `--index: ${character.index}; --value: ${character.value}`}'
                             >
-                                <span>9</span>
-                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
-                                <span>0</span>
+                                <span class='counter-digit'>9</span>
+                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span class='counter-digit'>${value}</span>`)}
+                                <span class='counter-digit'>0</span>
                             </div>
                         </div>
                     `;
                 })}
+            <span class='counter-sr'>${prefix}${() => format.format(api.value)}${suffix && ` ${suffix}`}</span>
         </div>
     `;
 };

package/src/components/counter/scss/index.scss

@@ -1,19 +1,20 @@
+@use '/shared';
 @use 'variables';
 
 .counter {
+    color: var(--color);
     display: flex;
     gap: 2px;
     place-items: center;
     transition: transform calc(var(--transition-duration) / 4) var(--transition-duration);
-    transform-style: flat;
 
-    &-character,
-    &-character-track span {
-        background: linear-gradient(hsl(0 0% 98%) 50%, hsl(0 0% 45%));
-        background-attachment: fixed;
+    // Only the elements holding glyphs are painted, so a translucent '--fill' never stacks over itself.
+    // The text fill goes transparent rather than 'color', which keeps 'currentColor' usable in '--fill'.
+    &-character--symbol,
+    &-digit {
+        background: var(--fill, linear-gradient(currentColor, currentColor));
         background-clip: text;
-        color: transparent;
-        transform-style: flat;
+        -webkit-text-fill-color: transparent;
     }
 
     &-character {
@@ -22,26 +23,7 @@
         font-variant: tabular-nums;
         font-weight: var(--font-weight);
         height: 1lh;
-        mask: linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - (1lh * var(--mask-size))), transparent);
         overflow: hidden;
-        transform-style: flat;
-
-        &--fraction {
-            font-size: calc(var(--font-size) * var(--scale));
-            font-weight: var(--font-weight-300);
-            opacity: var(--opacity);
-            overflow: visible;
-            height: 1lh;
-
-            .counter-character-track {
-                span {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: end;
-                    padding: calc((1lh - 1em) * 0.2) 0;
-                }
-            }
-        }
 
         &--symbol {
             font-size: calc(var(--font-size) * var(--scale));
@@ -55,37 +37,27 @@
             translate: 0 calc((var(--value) + 1) * (1lh * -1));
             transition: translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));
 
-            span {
-                height: 1lh;
-                transform-style: flat;
+            // Each roll names its own animation, which only '--blur' sets.
+            @media (prefers-reduced-motion: no-preference) {
+                @each $roll in 1 2 {
+                    &--roll-#{$roll} {
+                        animation: var(--roll-#{$roll}-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger));
+                    }
+                }
             }
         }
     }
 
-    &--blur {
-        @media (prefers-reduced-motion: no-preference) {
-            .counter-character-track {
-                animation: var(--transition-duration) ease-out calc(var(--index) * var(--stagger));
-
-                &[data-roll='1'] {
-                    animation-name: counter-blur-1;
-                }
+    &-digit {
+        height: 1lh;
+    }
 
-                &[data-roll='2'] {
-                    animation-name: counter-blur-2;
-                }
-            }
-        }
+    &-sr {
+        @extend %hidden-visually;
     }
 
     &--ticker {
         gap: 0;
-
-        .counter-character,
-        .counter-character-track span {
-            background: none;
-            color: inherit;
-        }
     }
 
     @media (prefers-reduced-motion: reduce) {

package/src/components/counter/scss/variables.scss

@@ -1,17 +1,31 @@
 .counter {
-    // TODO: Switch to clamped font size css variables
     --blur: 0.05em;
-    --font-size: clamp(2rem, 4vw + 1rem, 8rem);
+    --color: var(--color-black-400);
+    // A gradient here paints the digits in place of '--color'; 'initial' also stops an ancestor's from leaking in.
+    --fill: initial;
+    // Sized by the surrounding text; set 'font-size' on the counter or a parent to scale it.
+    --font-size: 1em;
     --font-weight: var(--font-weight-400);
-    --mask-size: 0.24;
+    --roll-1-animation: none;
+    --roll-2-animation: none;
     --stagger: 0s;
     // Bounce-out
     --timing-function: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765, 1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1, 0.988, 0.984, 0.988, 1);
     --transition-duration: 2s;
 
-    &--linear {
-        --timing-function: linear;
-        --transition-duration: 1.2s;
+    &--blur {
+        --roll-1-animation: counter-blur-1;
+        --roll-2-animation: counter-blur-2;
+    }
+
+    // Takes the surrounding text color instead of '--color'.
+    &--inherit {
+        --color: currentColor;
+    }
+
+    // Built from the text color, so it follows '--color' and '--inherit'.
+    &--shade {
+        --fill: linear-gradient(currentColor 50%, color-mix(in srgb, currentColor 45%, transparent));
     }
 
     &--snap {
@@ -24,39 +38,14 @@
         --transition-duration: 1.2s;
     }
 
-    &--stagger {
-        --stagger: 80ms;
-    }
-
-    &-character {
-        --scale: 1;
-
-        &--fraction,
-        &--symbol {
-            --opacity: 0.8;
-        }
-
-        &--fraction {
-            --font-weight: var(--font-weight-300);
-            --scale: 0.75;
-        }
-
-        &--symbol:first-child {
-            --scale: 0.8;
-        }
-    }
-
-    // After &-character so the symbol override wins the equal-specificity :first-child rule.
     &--ticker {
-        --font-size: 1em;
-        --mask-size: 0.12;
         --stagger: 0.06s;
         --timing-function: cubic-bezier(0.22, 1, 0.36, 1);
         --transition-duration: 0.9s;
+    }
 
-        .counter-character--symbol {
-            --opacity: 1;
-            --scale: 1;
-        }
+    &-character--symbol {
+        --opacity: 1;
+        --scale: 1;
     }
 }

package/src/components/datalist/index.ts

@@ -1,6 +1,8 @@
 import { component, html, on, type Attributes, type Element, type Renderable } from '@esportsplus/template';
 import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
 import form from '~/components/form';
+import scrollbar from '~/css-utilities/scrollbar';
+import { observeSize } from '~/shared/resize';
 import './scss/index.scss';
 
 
@@ -29,7 +31,12 @@ type A = {
     [DATALIST_SCROLLER]?: Attributes & {
         'aria-activedescendant'?: never;
         onconnect?: never;
+        ondragstart?: never;
         onkeydown?: never;
+        onpointercancel?: never;
+        onpointerdown?: never;
+        onpointermove?: never;
+        onpointerup?: never;
         onscroll?: never;
     };
     options: Record<number | string, Renderable<unknown>>;
@@ -73,11 +80,13 @@ export default component(
             active = reactive(
                 Object.fromEntries( keys.map(key => [key, false]) ) as Record<string, boolean>
             ),
+            drum = reactive({ half: 0, offset: 0 }),
             height = 0,
             id = `datalist-${++uid}`,
-            observer: ResizeObserver | undefined,
+            option: HTMLElement | undefined,
             previous: string | undefined,
             scroller: HTMLElement | undefined,
+            timeline = typeof CSS !== 'undefined' && CSS.supports('animation-timeline: view()'),
             timer: ReturnType<typeof setTimeout> | undefined;
 
         function clamp(index: number) {
@@ -85,18 +94,27 @@ export default component(
         }
 
         function measure() {
-            let option = scroller?.querySelector<HTMLElement>('.datalist-option');
-
             if (!scroller || !option) {
                 return;
             }
 
-            height = option.offsetHeight;
-            scroller.style.setProperty('--half', `${scroller.clientHeight / 2 / height}`);
+            let next = option.offsetHeight;
+
+            // Measured while hidden (0) or at another item size, the scroller no longer sits on the selection
+            if (next !== height) {
+                height = next;
+                scroller.scrollTo({ behavior: 'instant', top: clamp(keys.indexOf(String(state.selected))) * height });
+            }
+
+            if (!height || timeline) {
+                return;
+            }
+
+            drum.half = scroller.clientHeight / 2 / height;
             paint();
         }
 
-        // Selection is derived from scroll position; the drum transform reads `--offset` in CSS
+        // Selection is derived from scroll position
         function onscroll() {
             if (!scroller || !height) {
                 return;
@@ -115,15 +133,17 @@ export default component(
             timer = setTimeout(settle, SETTLE_DELAY);
         }
 
+        // Fallback for engines without scroll-driven animations; the drum transform reads `--offset` in CSS
         function paint() {
-            scroller!.style.setProperty('--offset', `${scroller!.scrollTop / height}`);
+            if (timeline) {
+                return;
+            }
+
+            drum.offset = scroller!.scrollTop / height;
         }
 
         function scrollTo(index: number) {
-            scroller?.scrollTo({
-                behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
-                top: clamp(index) * height
-            });
+            scroller?.scrollTo({ top: clamp(index) * height });
         }
 
         function settle() {
@@ -131,7 +151,7 @@ export default component(
             state.settled = true;
         }
 
-        let stop = effect(() => {
+        effect(() => {
             let key = String(state.selected);
 
             untrack(() => {
@@ -150,35 +170,31 @@ export default component(
             });
         });
 
-        onCleanup(() => {
-            clearTimeout(timer);
-            observer?.disconnect();
-            stop();
-        });
+        onCleanup(() => clearTimeout(timer));
 
         return html`
             <div class='datalist' ${this?.attributes} ${attributes}>
                 <div class='datalist-lens' aria-hidden='true' ${this?.attributes?.[DATALIST_LENS]} ${attributes[DATALIST_LENS]}></div>
 
                 <div
-                    class='datalist-scroller'
+                    class='datalist-scroller --scrollbar-hidden'
                     role='listbox'
                     tabindex='0'
                     ${this?.attributes?.[DATALIST_SCROLLER]}
                     ${attributes[DATALIST_SCROLLER]}
+                    ${scrollbar.drag('vertical')}
+                    ${observeSize(measure)}
                     ${{
-                        'aria-activedescendant': () => `${id}-${keys.indexOf(String(state.selected))}`,
+                        'aria-activedescendant': () => {
+                            let index = keys.indexOf(String(state.selected));
+
+                            return index !== -1 && `${id}-${index}`;
+                        },
                         onconnect: (element: Element) => {
-                            scroller = element;
-                            measure();
-                            scroller.scrollTop = clamp(keys.indexOf(String(state.selected))) * height;
-                            paint();
+                            scroller = element as HTMLElement;
 
                             // `scrollend` does not bubble so it cannot be delegated
                             on(element, 'scrollend', settle);
-
-                            observer = new ResizeObserver(measure);
-                            observer.observe(scroller);
                         },
                         onkeydown: (e: KeyboardEvent) => {
                             let index = keys.indexOf(String(state.selected));
@@ -199,7 +215,8 @@ export default component(
                             e.preventDefault();
                             scrollTo(index);
                         },
-                        onscroll
+                        onscroll,
+                        style: () => drum.half && `--half: ${drum.half}; --offset: ${drum.offset};`
                     }}
                 >
                     <div class='datalist-track'>
@@ -213,7 +230,10 @@ export default component(
                                 ${attributes[DATALIST_OPTION]}
                                 ${{
                                     'aria-selected': () => active[key] ? 'true' : 'false',
-                                    onclick: () => scrollTo(index)
+                                    onclick: () => scrollTo(index),
+                                    onconnect: (element: HTMLElement) => {
+                                        option ??= element;
+                                    }
                                 }}
                             >
                                 ${options[key]}
@@ -225,7 +245,7 @@ export default component(
                 <input class='datalist-tag'
                     ${{
                         name: attributes.name,
-                        onrender: form.input.onrender(state),
+                        onconnect: form.input.onconnect(state),
                         value: () => state.selected
                     }}
                 />