@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/highlight/index.ts

@@ -0,0 +1,239 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    onconnect?: never;
+    ondisconnect?: never;
+    ondocumentfocusin?: never;
+    ondocumentfocusout?: never;
+    ondocumentpointercancel?: never;
+    ondocumentpointerdown?: never;
+    ondocumentpointerout?: never;
+    ondocumentpointerover?: never;
+    ondocumentpointerup?: never;
+};
+
+
+function active(parent: Element, self: Element) {
+    let children = parent.children;
+
+    for (let i = 0, n = children.length; i < n; i++) {
+        let child = children[i];
+
+        if (child !== self && child.classList.contains('--active')) {
+            return child;
+        }
+    }
+
+    return null;
+}
+
+function sibling(parent: Element, self: Element, node: EventTarget | null) {
+    let element = node instanceof Element ? node : null;
+
+    while (element && element.parentElement !== parent) {
+        element = element.parentElement;
+    }
+
+    if (!element || element === self || element.classList.contains('--disabled')) {
+        return null;
+    }
+
+    return element;
+}
+
+
+export default component<A>(
+    (attributes) => {
+        let focused: Element | null = null,
+            hovered: Element | null = null,
+            mutations: MutationObserver | undefined,
+            parent: HTMLElement | null = null,
+            pressed = false,
+            resize: ResizeObserver | undefined,
+            self: HTMLElement | null = null,
+            state = reactive({
+                height: 0,
+                radius: '0px',
+                variant: '',
+                visible: false,
+                width: 0,
+                x: 0,
+                y: 0
+            });
+
+        function release() {
+            if (pressed) {
+                pressed = false;
+                update();
+            }
+        }
+
+        function update() {
+            if (!parent || !self) {
+                return;
+            }
+
+            if (hovered?.parentElement !== parent) {
+                hovered = null;
+            }
+
+            if (focused?.parentElement !== parent) {
+                focused = null;
+            }
+
+            let target = hovered || focused || active(parent, self);
+
+            if (!target) {
+                state.visible = false;
+                return;
+            }
+
+            let box = parent.getBoundingClientRect(),
+                rect = target.getBoundingClientRect();
+
+            state.height = rect.height;
+            state.radius = getComputedStyle(target).borderRadius;
+            state.variant = target.classList.contains('--active')
+                ? '--active'
+                : pressed && target === hovered ? '--pressed' : '--hover';
+            state.visible = true;
+            state.width = rect.width;
+            state.x = rect.left - box.left - parent.clientLeft + parent.scrollLeft;
+            state.y = rect.top - box.top - parent.clientTop + parent.scrollTop;
+        }
+
+        return html`
+            <div
+                aria-hidden='true'
+                class='highlight'
+                ${attributes}
+                ${{
+                    class: () => `${state.variant}${state.visible ? ' --visible' : ''}`,
+                    onconnect: (element: HTMLElement) => {
+                        let container = element.parentElement;
+
+                        if (!container) {
+                            return;
+                        }
+
+                        parent = container;
+                        self = element;
+
+                        mutations = new MutationObserver((records) => {
+                            let changed = false;
+
+                            for (let i = 0, n = records.length; i < n; i++) {
+                                let record = records[i];
+
+                                // Our own class flips are mutations too; reacting to them would loop.
+                                if (record.target === element) {
+                                    continue;
+                                }
+
+                                changed = true;
+
+                                for (let node of record.addedNodes) {
+                                    if (node instanceof Element) {
+                                        resize?.observe(node);
+                                    }
+                                }
+
+                                for (let node of record.removedNodes) {
+                                    if (node instanceof Element) {
+                                        resize?.unobserve(node);
+                                    }
+                                }
+                            }
+
+                            if (changed) {
+                                update();
+                            }
+                        });
+                        mutations.observe(container, { attributeFilter: ['class'], attributes: true, childList: true, subtree: true });
+
+                        resize = new ResizeObserver(update);
+                        resize.observe(container);
+
+                        for (let child of container.children) {
+                            if (child !== element) {
+                                resize.observe(child);
+                            }
+                        }
+
+                        update();
+                    },
+                    ondisconnect: () => {
+                        mutations?.disconnect();
+                        mutations = undefined;
+                        resize?.disconnect();
+                        resize = undefined;
+
+                        focused = null;
+                        hovered = null;
+                        parent = null;
+                        self = null;
+                    },
+                    ondocumentfocusin: (e: FocusEvent) => {
+                        if (!parent || !self || !parent.contains(e.target as Node | null)) {
+                            return;
+                        }
+
+                        focused = (e.target as Element).matches(':focus-visible') ? sibling(parent, self, e.target) : null;
+                        update();
+                    },
+                    ondocumentfocusout: (e: FocusEvent) => {
+                        if (!parent?.contains(e.target as Node | null) || parent.contains(e.relatedTarget as Node | null)) {
+                            return;
+                        }
+
+                        focused = null;
+                        update();
+                    },
+                    ondocumentpointercancel: release,
+                    ondocumentpointerdown: (e: PointerEvent) => {
+                        let target = parent && self ? sibling(parent, self, e.target) : null;
+
+                        if (!target) {
+                            return;
+                        }
+
+                        hovered = target;
+                        pressed = true;
+                        update();
+                    },
+                    // Crossing gaps between siblings keeps the last one so the highlight glides instead of snapping back.
+                    ondocumentpointerout: (e: PointerEvent) => {
+                        if (!parent?.contains(e.target as Node | null) || parent.contains(e.relatedTarget as Node | null)) {
+                            return;
+                        }
+
+                        hovered = null;
+                        pressed = false;
+                        update();
+                    },
+                    ondocumentpointerover: (e: PointerEvent) => {
+                        let target = parent && self ? sibling(parent, self, e.target) : null;
+
+                        if (!target || target === hovered) {
+                            return;
+                        }
+
+                        hovered = target;
+                        update();
+                    },
+                    ondocumentpointerup: release,
+                    style: () => `
+                        --border-radius: ${state.radius};
+                        --height: ${state.height}px;
+                        --width: ${state.width}px;
+                        --x: ${state.x}px;
+                        --y: ${state.y}px;
+                    `
+                }}
+            ></div>
+        `;
+    }
+);

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

@@ -0,0 +1,48 @@
+@use 'variables';
+
+.highlight {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    display: none;
+    height: var(--height);
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    scale: var(--scale-hidden);
+    top: 0;
+    transition:
+        background var(--transition-duration) var(--transition-timing-function),
+        border-radius var(--glide-duration) 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);
+    z-index: -1;
+
+    &.--visible {
+        display: block;
+        opacity: 1;
+        scale: 1;
+
+        // Entering from display: none has no prior box, so position snaps and only the fade/scale plays.
+        @starting-style {
+            opacity: 0;
+            scale: var(--scale-hidden);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        transition: background var(--transition-duration) var(--transition-timing-function);
+    }
+}
+
+// Zero specificity so a container that is already positioned (absolute, fixed, sticky) keeps its own value.
+:where(:has(> .highlight)) {
+    isolation: isolate;
+    position: relative;
+}

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

@@ -0,0 +1,26 @@
+@use '/tokens';
+
+.highlight {
+    --background: var(--background-default);
+    --background-active: color-mix(in srgb, currentColor 10%, transparent);
+    --background-default: color-mix(in srgb, currentColor 6%, transparent);
+    --background-hover: var(--background-default);
+    --background-pressed: color-mix(in srgb, currentColor 14%, transparent);
+    --fade-duration: 0.2s;
+    --glide-duration: 0.6s;
+    // 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);
+    --scale-hidden: 0.92;
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+    }
+
+    &.--hover {
+        --background: var(--background-hover);
+    }
+
+    &.--pressed {
+        --background: var(--background-pressed);
+    }
+}

package/src/components/hover-card/index.ts

@@ -0,0 +1,319 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [HOVER_CARD_CONTENT]?: Attributes;
+    [HOVER_CARD_TRIGGER]?: Attributes;
+    card: Renderable<unknown>;
+    group?: Group;
+    label?: string;
+    ondocumentpointerdown?: never;
+    onfocusin?: never;
+    onfocusout?: never;
+    onkeydown?: never;
+    onpointerout?: never;
+    onpointerover?: never;
+    state?: { active: boolean };
+};
+
+type Card = {
+    close: (instant: boolean) => void;
+    open: (instant: boolean, from?: DOMRect) => void;
+    rect: () => DOMRect | undefined;
+};
+
+type Group = {
+    close: VoidFunction;
+    release: (card: Card) => void;
+    request: (card: Card, immediate?: boolean) => void;
+};
+
+
+// Covers the moment the pointer is between the trigger and the card, or wobbles off an edge.
+const CLOSE_GRACE = 150;
+
+// The contents re-develop on arrival instead of swapping in place.
+const DEVELOP: KeyframeAnimationOptions = { duration: 220, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+
+// Keeps the card this far from the viewport edges.
+const EDGE = 12;
+
+const GAP = 8;
+
+const HOVER_CARD_CONTENT = Symbol.for('@esportsplus/ui/hover-card.content');
+
+const HOVER_CARD_TRIGGER = Symbol.for('@esportsplus/ui/hover-card.trigger');
+
+// Long enough that sweeping the pointer across a paragraph opens nothing.
+const OPEN_DELAY = 500;
+
+// Just after a card closes, hovering another trigger skips the delay: the reader is browsing, not passing through.
+const SKIP_DELAY_FOR = 300;
+
+// The trip between two triggers: long enough to follow a card crossing a paragraph, decelerating onto the
+// new trigger so the eye lands with it.
+const TRAVEL: KeyframeAnimationOptions = { duration: 260, easing: 'cubic-bezier(0.32, 0.72, 0, 1)' };
+
+
+let uid = 0;
+
+
+// Shares one open card between every trigger using it, which is what lets a second trigger open instantly,
+// travelling over from the first, while a card is showing.
+function group(): Group {
+    let closeTimer: ReturnType<typeof setTimeout> | undefined,
+        closedAt = -Infinity,
+        current: Card | null = null,
+        // Where the last card was when it closed, for a quick return trip.
+        last: DOMRect | null = null,
+        openTimer: ReturnType<typeof setTimeout> | undefined;
+
+    function commit(next: Card | null, instant = false, from?: DOMRect) {
+        let previous = current;
+
+        if (previous && previous !== next) {
+            if (!next) {
+                closedAt = performance.now();
+                last = previous.rect() ?? null;
+            }
+
+            // Instant when another card is taking its place.
+            previous.close(next !== null);
+        }
+
+        current = next;
+        next?.open(instant, from);
+    }
+
+    return {
+        close: () => {
+            clearTimeout(closeTimer);
+            clearTimeout(openTimer);
+
+            if (current) {
+                commit(null);
+            }
+        },
+        release: (card) => {
+            clearTimeout(openTimer);
+
+            if (current !== card) {
+                return;
+            }
+
+            clearTimeout(closeTimer);
+            closeTimer = setTimeout(() => commit(null), CLOSE_GRACE);
+        },
+        request: (card, immediate) => {
+            clearTimeout(closeTimer);
+
+            if (current === card) {
+                return;
+            }
+
+            clearTimeout(openTimer);
+
+            let recent = performance.now() - closedAt < SKIP_DELAY_FOR;
+
+            if (current) {
+                commit(card, true, current.rect());
+            }
+            else if (recent && last) {
+                commit(card, true, last);
+            }
+            else if (immediate || recent) {
+                commit(card, false);
+            }
+            else {
+                openTimer = setTimeout(() => commit(card, false), OPEN_DELAY);
+            }
+        }
+    };
+}
+
+function place(element: HTMLElement, root: HTMLElement, trigger: HTMLElement) {
+    let rect = trigger.getBoundingClientRect(),
+        below = innerHeight - rect.bottom,
+        south = below >= element.offsetHeight + GAP + EDGE || below >= rect.top,
+        width = Math.min(element.offsetWidth, innerWidth - EDGE * 2),
+        left = Math.min(Math.max(rect.left + rect.width / 2 - width / 2, EDGE), innerWidth - EDGE - width);
+
+    element.classList.toggle('hover-card-content--n', !south);
+    element.classList.toggle('hover-card-content--s', south);
+    element.style.left = `${left - root.getBoundingClientRect().left}px`;
+    // Scales out of the trigger itself, even when the card is pushed sideways.
+    element.style.transformOrigin = `${rect.left + rect.width / 2 - left}px ${south ? '0%' : '100%'}`;
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+
+export default Object.assign(
+    component<A>(
+        function(this, { card, group: shared, label, state = reactive({ active: false }), ...attributes }, content) {
+            let animations: Animation[] = [],
+                body: HTMLElement | undefined,
+                element: HTMLElement | undefined,
+                id = `hover-card-${++uid}`,
+                owner = shared ?? group(),
+                pointer = 'mouse',
+                root: HTMLElement | undefined,
+                self: Card = {
+                    close: (instant) => {
+                        if (!element) {
+                            return;
+                        }
+
+                        element.classList.toggle('--instant', instant);
+                        element.classList.remove('--active');
+                        state.active = false;
+                    },
+                    open: (instant, from) => {
+                        if (!element || !body || !root || !trigger) {
+                            return;
+                        }
+
+                        for (let i = 0, n = animations.length; i < n; i++) {
+                            animations[i].cancel();
+                        }
+
+                        animations = [];
+                        place(element, root, trigger);
+                        element.classList.toggle('--instant', instant);
+                        element.classList.add('--active');
+                        state.active = true;
+
+                        if (!from) {
+                            return;
+                        }
+
+                        let to = element.getBoundingClientRect(),
+                            dx = from.left - to.left,
+                            dy = from.top - to.top,
+                            still = reduced();
+
+                        if (!still && (dx || dy)) {
+                            animations.push(element.animate({ translate: [`${dx}px ${dy}px`, '0 0'] }, TRAVEL));
+                        }
+
+                        animations.push(
+                            body.animate(
+                                still ? { opacity: [0, 1] } : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1] },
+                                DEVELOP
+                            )
+                        );
+                    },
+                    rect: () => element?.isConnected ? element.getBoundingClientRect() : undefined
+                },
+                trigger: HTMLElement | undefined;
+
+            return html`
+                <span
+                    class='hover-card'
+                    ${this?.attributes}
+                    ${attributes}
+                    ${{
+                        ondocumentpointerdown: (e: PointerEvent) => {
+                            // Taps have no hover, so a tap opens the card and a tap anywhere else closes it.
+                            if (state.active && root && !root.contains(e.target as Node | null)) {
+                                owner.close();
+                            }
+                        },
+                        onfocusin: (e: FocusEvent) => {
+                            // Keyboard focus only; a tap also focuses the trigger, and opening here would let the
+                            // click that follows close it again.
+                            if (e.target === trigger && trigger?.matches(':focus-visible')) {
+                                owner.request(self, true);
+                            }
+                        },
+                        onfocusout: (e: FocusEvent) => {
+                            if (!root?.contains(e.relatedTarget as Node | null)) {
+                                owner.release(self);
+                            }
+                        },
+                        onkeydown: (e: KeyboardEvent) => {
+                            if (e.key !== 'Escape' || !state.active) {
+                                return;
+                            }
+
+                            owner.close();
+                            trigger?.focus();
+                        },
+                        onpointerout: (e: PointerEvent) => {
+                            if (e.pointerType === 'touch' || root?.contains(e.relatedTarget as Node | null)) {
+                                return;
+                            }
+
+                            owner.release(self);
+                        },
+                        onpointerover: (e: PointerEvent) => {
+                            if (e.pointerType === 'touch' || root?.contains(e.relatedTarget as Node | null)) {
+                                return;
+                            }
+
+                            owner.request(self);
+                        },
+                        onrender: (el: HTMLElement) => {
+                            root = el;
+                        }
+                    }}
+                >
+                    <button
+                        class='hover-card-trigger'
+                        type='button'
+                        ${this?.attributes?.[HOVER_CARD_TRIGGER]}
+                        ${attributes[HOVER_CARD_TRIGGER]}
+                        ${{
+                            'aria-controls': () => state.active ? id : undefined,
+                            'aria-expanded': () => state.active ? 'true' : 'false',
+                            onclick: (e: MouseEvent) => {
+                                // A mouse has already opened it by hovering; taps and keys toggle.
+                                if (state.active && (e.detail === 0 || pointer === 'touch')) {
+                                    owner.close();
+                                }
+                                else {
+                                    owner.request(self, true);
+                                }
+                            },
+                            onpointerdown: (e: PointerEvent) => {
+                                pointer = e.pointerType;
+                            },
+                            onrender: (el: HTMLElement) => {
+                                trigger = el;
+                            }
+                        }}
+                    >
+                        ${content}
+                    </button>
+
+                    <span
+                        aria-label='${label ?? ''}'
+                        class='hover-card-content hover-card-content--s'
+                        id='${id}'
+                        role='group'
+                        ${this?.attributes?.[HOVER_CARD_CONTENT]}
+                        ${attributes[HOVER_CARD_CONTENT]}
+                        ${{
+                            ondisconnect: () => {
+                                owner.release(self);
+                            },
+                            onrender: (el: HTMLElement) => {
+                                element = el;
+                            }
+                        }}
+                    >
+                        <span class='hover-card-body' ${{ onrender: (el: HTMLElement) => { body = el; } }}>
+                            ${card}
+                        </span>
+                    </span>
+                </span>
+            `;
+        }
+    ),
+    { content: HOVER_CARD_CONTENT, group, trigger: HOVER_CARD_TRIGGER } as const
+);
+export type { Group };