@esportsplus/ui 0.54.0 → 0.56.2

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

@@ -45,14 +45,15 @@
 
         &--symbol {
             font-size: calc(var(--font-size) * var(--scale));
-            margin-right: 0.1ch;
+            margin-inline-end: 0.1ch;
             opacity: var(--opacity);
         }
 
+        // --index counts digits from the right, so the rightmost digit settles first.
         &-track {
             display: grid;
             translate: 0 calc((var(--value) + 1) * (1lh * -1));
-            transition: translate var(--transition-duration) var(--timing-function);
+            transition: translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));
 
             span {
                 height: 1lh;
@@ -60,4 +61,57 @@
             }
         }
     }
+
+    &--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;
+                }
+
+                &[data-roll='2'] {
+                    animation-name: counter-blur-2;
+                }
+            }
+        }
+    }
+
+    &--ticker {
+        gap: 0;
+
+        .counter-character,
+        .counter-character-track span {
+            background: none;
+            color: inherit;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &-character-track {
+            transition: none;
+        }
+    }
+}
+
+@keyframes counter-blur-1 {
+    0%, 100% {
+        filter: blur(0);
+    }
+
+    20% {
+        filter: blur(var(--blur));
+    }
+}
+
+@keyframes counter-blur-2 {
+    0%, 100% {
+        filter: blur(0);
+    }
+
+    20% {
+        filter: blur(var(--blur));
+    }
 }

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

@@ -1,11 +1,33 @@
 .counter {
     // TODO: Switch to clamped font size css variables
+    --blur: 0.05em;
     --font-size: clamp(2rem, 4vw + 1rem, 8rem);
     --font-weight: var(--font-weight-400);
     --mask-size: 0.24;
-    --timing-function: var(--timing-bounce-out);
+    --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;
+    }
+
+    &--snap {
+        --timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+        --transition-duration: 0.64s;
+    }
+
+    &--spring {
+        --timing-function: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
+        --transition-duration: 1.2s;
+    }
+
+    &--stagger {
+        --stagger: 80ms;
+    }
+
     &-character {
         --scale: 1;
 
@@ -23,4 +45,18 @@
             --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;
+        }
+    }
+}

package/src/components/datalist/index.ts

@@ -0,0 +1,236 @@
+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 './scss/index.scss';
+
+
+const DATALIST_LENS = Symbol.for('@esportsplus/ui/datalist.lens');
+
+const DATALIST_OPTION = Symbol.for('@esportsplus/ui/datalist.option');
+
+const DATALIST_SCROLLER = Symbol.for('@esportsplus/ui/datalist.scroller');
+
+const SETTLE_DELAY = 140;
+
+const STEPS: Record<string, number> = {
+    ArrowDown: 1,
+    ArrowUp: -1,
+    PageDown: 5,
+    PageUp: -5
+};
+
+
+type A = {
+    [DATALIST_LENS]?: Attributes;
+    [DATALIST_OPTION]?: Attributes & {
+        'aria-selected'?: never;
+        onclick?: never;
+    };
+    [DATALIST_SCROLLER]?: Attributes & {
+        'aria-activedescendant'?: never;
+        onconnect?: never;
+        onkeydown?: never;
+        onscroll?: never;
+    };
+    options: Record<number | string, Renderable<unknown>>;
+} & (
+    {
+        selected?: number | string;
+        state?: never;
+    } | {
+        selected?: never;
+        state: State;
+    }
+) & Attributes;
+
+type D = Attributes & Pick<A, typeof DATALIST_LENS | typeof DATALIST_OPTION | typeof DATALIST_SCROLLER>;
+
+type State = {
+    error: string;
+    selected?: number | string;
+    settled: boolean;
+};
+
+
+let uid = 0;
+
+
+export default component(
+    function(
+        this: { attributes?: D },
+        {
+            options,
+            selected,
+            state = reactive({
+                error: '',
+                selected: selected ?? Object.keys(options)[0],
+                settled: true
+            }),
+            ...attributes
+        }: A
+    ) {
+        let keys = Object.keys(options),
+            active = reactive(
+                Object.fromEntries( keys.map(key => [key, false]) ) as Record<string, boolean>
+            ),
+            height = 0,
+            id = `datalist-${++uid}`,
+            observer: ResizeObserver | undefined,
+            previous: string | undefined,
+            scroller: HTMLElement | undefined,
+            timer: ReturnType<typeof setTimeout> | undefined;
+
+        function clamp(index: number) {
+            return Math.min(Math.max(index, 0), keys.length - 1);
+        }
+
+        function measure() {
+            let option = scroller?.querySelector<HTMLElement>('.datalist-option');
+
+            if (!scroller || !option) {
+                return;
+            }
+
+            height = option.offsetHeight;
+            scroller.style.setProperty('--half', `${scroller.clientHeight / 2 / height}`);
+            paint();
+        }
+
+        // Selection is derived from scroll position; the drum transform reads `--offset` in CSS
+        function onscroll() {
+            if (!scroller || !height) {
+                return;
+            }
+
+            paint();
+
+            let key = keys[clamp(Math.round(scroller.scrollTop / height))];
+
+            if (key !== String(state.selected)) {
+                state.selected = key;
+            }
+
+            state.settled = false;
+            clearTimeout(timer);
+            timer = setTimeout(settle, SETTLE_DELAY);
+        }
+
+        function paint() {
+            scroller!.style.setProperty('--offset', `${scroller!.scrollTop / height}`);
+        }
+
+        function scrollTo(index: number) {
+            scroller?.scrollTo({
+                behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+                top: clamp(index) * height
+            });
+        }
+
+        function settle() {
+            clearTimeout(timer);
+            state.settled = true;
+        }
+
+        let stop = effect(() => {
+            let key = String(state.selected);
+
+            untrack(() => {
+                if (previous !== undefined) {
+                    active[previous] = false;
+                }
+
+                active[key] = true;
+                previous = key;
+
+                let index = keys.indexOf(key);
+
+                if (scroller && height && index !== -1 && index !== Math.round(scroller.scrollTop / height)) {
+                    scrollTo(index);
+                }
+            });
+        });
+
+        onCleanup(() => {
+            clearTimeout(timer);
+            observer?.disconnect();
+            stop();
+        });
+
+        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'
+                    role='listbox'
+                    tabindex='0'
+                    ${this?.attributes?.[DATALIST_SCROLLER]}
+                    ${attributes[DATALIST_SCROLLER]}
+                    ${{
+                        'aria-activedescendant': () => `${id}-${keys.indexOf(String(state.selected))}`,
+                        onconnect: (element: Element) => {
+                            scroller = element;
+                            measure();
+                            scroller.scrollTop = clamp(keys.indexOf(String(state.selected))) * height;
+                            paint();
+
+                            // `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));
+
+                            if (e.key in STEPS) {
+                                index += STEPS[e.key];
+                            }
+                            else if (e.key === 'Home') {
+                                index = 0;
+                            }
+                            else if (e.key === 'End') {
+                                index = keys.length - 1;
+                            }
+                            else {
+                                return;
+                            }
+
+                            e.preventDefault();
+                            scrollTo(index);
+                        },
+                        onscroll
+                    }}
+                >
+                    <div class='datalist-track'>
+                        ${keys.map((key, index) => html`
+                            <div
+                                class='datalist-option ${() => active[key] && '--active'}'
+                                id='${id}-${index}'
+                                role='option'
+                                style='--index: ${index}'
+                                ${this?.attributes?.[DATALIST_OPTION]}
+                                ${attributes[DATALIST_OPTION]}
+                                ${{
+                                    'aria-selected': () => active[key] ? 'true' : 'false',
+                                    onclick: () => scrollTo(index)
+                                }}
+                            >
+                                ${options[key]}
+                            </div>
+                        `)}
+                    </div>
+                </div>
+
+                <input class='datalist-tag'
+                    ${{
+                        name: attributes.name,
+                        onrender: form.input.onrender(state),
+                        value: () => state.selected
+                    }}
+                />
+            </div>
+        `;
+    },
+    { lens: DATALIST_LENS, option: DATALIST_OPTION, scroller: DATALIST_SCROLLER }
+);

package/src/components/datalist/scss/index.scss

@@ -0,0 +1,84 @@
+@use '/lib';
+@use 'variables';
+
+.datalist {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    color: var(--color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    padding: var(--padding);
+    position: relative;
+    width: min(100%, var(--width));
+
+    &-lens {
+        @include lib.position(absolute, 50% var(--padding) null var(--padding));
+        background: var(--background);
+        border-radius: var(--border-radius);
+        height: var(--item-height);
+        pointer-events: none;
+        transform: translateY(-50%);
+    }
+
+    &-option {
+        // `--offset` (scroll position) and `--half` (half viewport) are written by JS in item units
+        --t: clamp(-1, calc((var(--index) - var(--offset, 0)) / var(--half, 2.5)), 1);
+        --t-abs: max(var(--t), var(--t) * -1);
+
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        font-variant: tabular-nums;
+        height: var(--item-height);
+        justify-content: center;
+        opacity: calc(1 - var(--opacity-falloff) * var(--t-abs));
+        scroll-snap-align: center;
+        transform:
+            scale(calc(var(--scale) - var(--scale-falloff) * var(--t-abs)))
+            rotateX(calc(var(--rotate) * var(--t) * -1));
+        // Driven per scroll frame; the inherited root transition would ease it behind the scroll
+        transition: none;
+        user-select: none;
+
+        @media (prefers-reduced-motion: reduce) {
+            opacity: 1;
+            transform: none;
+        }
+    }
+
+    &-scroller {
+        border-radius: var(--border-radius);
+        height: var(--height);
+        mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        perspective: var(--perspective);
+        position: relative;
+        scroll-snap-type: y mandatory;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--focus-width) * -1);
+        }
+    }
+
+    // Padding lives on the track, not the scroller, since some engines drop a scroller's block-end padding from its scroll range
+    &-track {
+        padding-block: calc((var(--height) - var(--item-height)) / 2);
+    }
+
+    // Hide HTML Field Element
+    &-tag {
+        @include lib.position(absolute, 0 null null 0);
+        height: 0px;
+        opacity: 0;
+        pointer-events: none;
+        width: 0px;
+        z-index: 0;
+    }
+}

package/src/components/datalist/scss/variables.scss

@@ -0,0 +1,26 @@
+.datalist {
+    --background: transparent;
+    --border-radius: var(--border-radius-700);
+    --color: var(--color-text-500);
+    --focus-color: var(--color-border-500);
+    --focus-width: 2px;
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-500);
+    --height: calc(var(--item-height) * 5);
+    --item-height: 40px;
+    --padding: var(--size-200);
+    --perspective: 704px;
+    --width: 224px;
+
+    &-lens {
+        --background: var(--color-border-300);
+        --border-radius: var(--border-radius-600);
+    }
+
+    &-option {
+        --opacity-falloff: 0.55;
+        --rotate: 38deg;
+        --scale: 1.14;
+        --scale-falloff: 0.34;
+    }
+}