@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/sortable/scss/index.scss

@@ -0,0 +1,282 @@
+@use 'variables';
+
+.sortable {
+    > * {
+        -webkit-touch-callout: none;
+    }
+
+    // Stays in the container (so selectors like '.toolbar > button' keep matching) but is lifted out of
+    // flow with 'position: fixed'; the placeholder holds its slot.
+    > .--dragging {
+        cursor: grabbing;
+        transition:
+            box-shadow var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+        will-change: transform;
+        z-index: var(--drag-z-index);
+
+        &:not(.--dropping) {
+            animation: var(--drag-animation);
+            box-shadow: var(--drag-box-shadow);
+            scale: var(--drag-scale);
+        }
+    }
+
+    &.--active {
+        user-select: none;
+    }
+
+
+    // Nested anywhere inside an item; only rendered while that item is held. The dragged item is
+    // 'position: fixed', so this covers it without the item needing its own positioning.
+    &-overlay {
+        align-items: center;
+        background: inherit;
+        border-radius: inherit;
+        display: none;
+        inset: 0;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition:
+            display var(--overlay-transition-duration) allow-discrete,
+            opacity var(--overlay-transition-duration) var(--transition-timing-function);
+        z-index: 1;
+
+        .sortable > .--dragging & {
+            display: flex;
+            opacity: 1;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+
+        .sortable > .--dropping & {
+            opacity: 0;
+        }
+    }
+
+    &-placeholder {
+        background: var(--placeholder-background);
+        border: var(--placeholder-border-width) dashed var(--placeholder-border-color);
+        border-radius: var(--radius);
+        box-sizing: border-box;
+        flex: none;
+        pointer-events: none;
+        transition:
+            opacity var(--transition-duration) var(--transition-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function);
+
+        @starting-style {
+            opacity: 0;
+            scale: 0.9;
+        }
+    }
+}
+
+
+// Scale keyframes build on '--drag-scale' so the lift survives the animation.
+@keyframes sortable-breathe {
+    from {
+        scale: var(--drag-scale);
+    }
+
+    to {
+        scale: calc(var(--drag-scale) * 1.025);
+    }
+}
+
+@keyframes sortable-float {
+    from {
+        translate: 0 0;
+    }
+
+    to {
+        translate: 0 -2px;
+    }
+}
+
+@keyframes sortable-heartbeat {
+    0%, 28%, 70%, 100% {
+        scale: var(--drag-scale);
+    }
+
+    14%, 42% {
+        scale: calc(var(--drag-scale) * 1.03);
+    }
+}
+
+@keyframes sortable-jelly {
+    from {
+        scale: calc(var(--drag-scale) * 1.02) calc(var(--drag-scale) * 0.98);
+    }
+
+    to {
+        scale: calc(var(--drag-scale) * 0.98) calc(var(--drag-scale) * 1.02);
+    }
+}
+
+@keyframes sortable-jiggle {
+    0%, 100% {
+        rotate: -0.7deg;
+        translate: 0 0.3px;
+    }
+
+    25% {
+        rotate: 0.5deg;
+        translate: 0.3px 0;
+    }
+
+    50% {
+        rotate: 0.7deg;
+        translate: 0 -0.3px;
+    }
+
+    75% {
+        rotate: -0.5deg;
+        translate: -0.3px 0;
+    }
+}
+
+@keyframes sortable-orbit {
+    0%, 100% {
+        translate: 1.2px 0;
+    }
+
+    12.5% {
+        translate: 0.85px 0.85px;
+    }
+
+    25% {
+        translate: 0 1.2px;
+    }
+
+    37.5% {
+        translate: -0.85px 0.85px;
+    }
+
+    50% {
+        translate: -1.2px 0;
+    }
+
+    62.5% {
+        translate: -0.85px -0.85px;
+    }
+
+    75% {
+        translate: 0 -1.2px;
+    }
+
+    87.5% {
+        translate: 0.85px -0.85px;
+    }
+}
+
+@keyframes sortable-pop {
+    0% {
+        scale: 1;
+    }
+
+    45% {
+        scale: calc(var(--drag-scale) * 1.06);
+    }
+
+    75% {
+        scale: calc(var(--drag-scale) * 0.98);
+    }
+
+    100% {
+        scale: var(--drag-scale);
+    }
+}
+
+@keyframes sortable-settle {
+    0%, 100% {
+        rotate: 0deg;
+    }
+
+    15% {
+        rotate: 3deg;
+    }
+
+    30% {
+        rotate: -2deg;
+    }
+
+    45% {
+        rotate: 1.2deg;
+    }
+
+    60% {
+        rotate: -0.6deg;
+    }
+
+    75% {
+        rotate: 0.25deg;
+    }
+}
+
+@keyframes sortable-shimmy {
+    from {
+        translate: -0.6px 0;
+    }
+
+    to {
+        translate: 0.6px 0;
+    }
+}
+
+@keyframes sortable-sway {
+    from {
+        rotate: -1.2deg;
+    }
+
+    to {
+        rotate: 1.2deg;
+    }
+}
+
+@keyframes sortable-tremble {
+    0%, 100% {
+        rotate: 0deg;
+        translate: 0 0;
+    }
+
+    20% {
+        rotate: -0.3deg;
+        translate: -0.4px 0.3px;
+    }
+
+    40% {
+        rotate: 0.2deg;
+        translate: 0.5px -0.2px;
+    }
+
+    60% {
+        rotate: -0.1deg;
+        translate: -0.2px -0.4px;
+    }
+
+    80% {
+        rotate: 0.3deg;
+        translate: 0.3px 0.4px;
+    }
+}
+
+@keyframes sortable-wiggle {
+    from {
+        rotate: -0.6deg;
+    }
+
+    to {
+        rotate: 0.6deg;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .sortable > .--dragging:not(.--dropping) {
+        animation: none;
+    }
+}

package/src/components/sortable/scss/variables.scss

@@ -0,0 +1,59 @@
+.sortable {
+    --drag-animation: none;
+    --drag-box-shadow: var(--box-shadow-400);
+    --drag-scale: 1.06;
+    --drag-z-index: 9999;
+    --overlay-transition-duration: 0.16s;
+    --placeholder-background: transparent;
+    --placeholder-border-color: var(--color-border-500);
+    --placeholder-border-width: var(--border-width-400);
+    // Read once per drag by the swing spring (JS): lean limit, velocity → lean gain (deg per px/s),
+    // spring pull and friction. Lower damping relative to stiffness means more wobble before rest.
+    --swing-angle: 8deg;
+    --swing-damping: 11;
+    --swing-stiffness: 260;
+    --swing-strength: 0.006;
+
+    // Swing presets, driven by drag movement.
+    $swings: (
+        bouncy: (angle: 10deg, damping: 6, stiffness: 300, strength: 0.007),
+        damped: (angle: 6deg, damping: 32, stiffness: 260, strength: 0.006),
+        floppy: (angle: 14deg, damping: 4, stiffness: 120, strength: 0.01),
+        heavy: (angle: 10deg, damping: 7, stiffness: 90, strength: 0.007),
+        rigid: (angle: 0deg, damping: 11, stiffness: 260, strength: 0),
+        snappy: (angle: 6deg, damping: 18, stiffness: 600, strength: 0.005),
+        subtle: (angle: 4deg, damping: 16, stiffness: 300, strength: 0.003),
+        wobbly: (angle: 8deg, damping: 5, stiffness: 700, strength: 0.006)
+    );
+
+    // Animations on the held item, independent of movement; they stack with any swing preset.
+    $animations: (
+        breathe: sortable-breathe 1.8s ease-in-out infinite alternate,
+        drift: #{sortable-sway 1.9s ease-in-out infinite alternate, sortable-float 1.3s ease-in-out infinite alternate},
+        float: sortable-float 1.6s ease-in-out infinite alternate,
+        heartbeat: sortable-heartbeat 1.4s ease-in-out infinite,
+        jelly: sortable-jelly 0.5s ease-in-out infinite alternate,
+        jiggle: sortable-jiggle 0.28s linear infinite,
+        orbit: sortable-orbit 1.6s linear infinite,
+        pop: sortable-pop 0.45s cubic-bezier(0.3, 0, 0.3, 1),
+        settle: sortable-settle 0.9s ease-out,
+        shimmy: sortable-shimmy 0.09s linear infinite alternate,
+        sway: sortable-sway 1.4s ease-in-out infinite alternate,
+        tremble: sortable-tremble 0.4s linear infinite,
+        wiggle: sortable-wiggle 0.16s ease-in-out infinite alternate
+    );
+
+    @each $name, $swing in $swings {
+        &--#{$name} {
+            @each $property, $value in $swing {
+                --swing-#{$property}: #{$value};
+            }
+        }
+    }
+
+    @each $name, $animation in $animations {
+        &--#{$name} {
+            --drag-animation: #{$animation};
+        }
+    }
+}

package/src/components/sparkline/index.ts

@@ -0,0 +1,234 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [SPARKLINE_PLOT]?: Attributes;
+    data: Point[];
+    format?: (value: number) => string;
+    state?: State;
+    title: string;
+};
+
+type Point = {
+    label: string;
+    value: number;
+};
+
+type State = {
+    active: boolean;
+    index: number;
+};
+
+
+const HEIGHT = 160;
+
+const KEYS: Record<string, (index: number, last: number) => number> = {
+    ArrowLeft: (index) => index - 1,
+    ArrowRight: (index) => index + 1,
+    End: (_, last) => last,
+    Home: () => 0
+};
+
+// Room for the scrub dot and its ring at the extremes.
+const PAD_X = 8;
+
+const PAD_Y = 10;
+
+const SPARKLINE_PLOT = Symbol.for('@esportsplus/ui/sparkline.plot');
+
+// Keeps the tooltip inside the chart near either edge.
+const TIP_INSET = 72;
+
+const WIDTH = 520;
+
+
+function percent(value: number, of: number) {
+    return `${(value / of) * 100}%`;
+}
+
+
+function template(this: { attributes?: Partial<A> } | void, { data, format = String, state = reactive({ active: false, index: data.length - 1 }), title, ...attributes }: A) {
+    let first = data[0],
+        last = data[data.length - 1],
+        max = -Infinity,
+        min = Infinity,
+        observer: IntersectionObserver | undefined,
+        plot: HTMLElement | undefined,
+        view = reactive({ announcement: '', shown: false });
+
+    for (let i = 0, n = data.length; i < n; i++) {
+        max = Math.max(max, data[i].value);
+        min = Math.min(min, data[i].value);
+    }
+
+    let delta = last.value - first.value,
+        span = max - min || 1,
+        step = (WIDTH - PAD_X * 2) / Math.max(data.length - 1, 1);
+
+    function describe(index: number) {
+        return `${data[index].label}: ${format(data[index].value)}`;
+    }
+
+    function nearest(clientX: number) {
+        if (!plot) {
+            return state.index;
+        }
+
+        let box = plot.getBoundingClientRect(),
+            x = ((clientX - box.left) / box.width) * WIDTH;
+
+        return Math.min(Math.max(Math.round((x - PAD_X) / step), 0), data.length - 1);
+    }
+
+    function x(index: number) {
+        return PAD_X + index * step;
+    }
+
+    function y(value: number) {
+        return PAD_Y + (1 - (value - min) / span) * (HEIGHT - PAD_Y * 2);
+    }
+
+    let line = data.map((point, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(point.value).toFixed(1)}`).join(' '),
+        area = `${line} L${x(data.length - 1)} ${HEIGHT} L${x(0)} ${HEIGHT} Z`;
+
+    return html`
+        <div class='sparkline' ${this?.attributes} ${attributes}>
+            <div class='sparkline-header'>
+                <div>
+                    <div class='sparkline-title'>${title}</div>
+                    <div class='sparkline-value'>${format(last.value)}</div>
+                </div>
+                <div class='sparkline-delta'>
+                    <span class='sparkline-delta-value'>${`${delta > 0 ? '+' : delta < 0 ? '-' : ''}${format(Math.abs(delta))}`}</span>
+                    vs ${first.label}
+                </div>
+            </div>
+
+            <div
+                aria-roledescription='line chart'
+                class='sparkline-plot'
+                role='group'
+                tabindex='0'
+                ${this?.attributes?.[SPARKLINE_PLOT]}
+                ${attributes[SPARKLINE_PLOT]}
+                ${{
+                    'aria-label': `${title}, ${data.length} points. Use arrow keys to read values.`,
+                    class: () => `${state.active ? '--active' : ''} ${view.shown ? '--shown' : ''}`,
+                    onblur: () => {
+                        state.active = false;
+                    },
+                    onconnect: (element: HTMLElement) => {
+                        plot = element;
+                        observer = new IntersectionObserver((entries) => {
+                            if (!entries.some((entry) => entry.isIntersecting)) {
+                                return;
+                            }
+
+                            observer?.disconnect();
+                            view.shown = true;
+                        });
+                        observer.observe(element);
+                    },
+                    ondisconnect: () => {
+                        observer?.disconnect();
+                    },
+                    onfocus: () => {
+                        state.active = true;
+                        view.announcement = describe(state.index);
+                    },
+                    onkeydown: (e: KeyboardEvent) => {
+                        let key = KEYS[e.key];
+
+                        if (!key) {
+                            return;
+                        }
+
+                        e.preventDefault();
+
+                        let index = Math.min(Math.max(key(state.index, data.length - 1), 0), data.length - 1);
+
+                        state.active = true;
+                        state.index = index;
+                        view.announcement = describe(index);
+                    },
+                    onpointercancel: () => {
+                        state.active = false;
+                    },
+                    onpointerdown: (e: PointerEvent) => {
+                        if (e.pointerType !== 'touch') {
+                            return;
+                        }
+
+                        state.index = nearest(e.clientX);
+                        state.active = true;
+                    },
+                    onpointerleave: (e: PointerEvent) => {
+                        if (e.pointerType !== 'touch') {
+                            state.active = false;
+                        }
+                    },
+                    onpointermove: (e: PointerEvent) => {
+                        if (e.pointerType === 'touch' && !state.active) {
+                            return;
+                        }
+
+                        state.index = nearest(e.clientX);
+                        state.active = true;
+                    },
+                    onpointerup: (e: PointerEvent) => {
+                        if (e.pointerType === 'touch') {
+                            state.active = false;
+                        }
+                    }
+                }}
+            >
+                <svg aria-hidden='true' class='sparkline-svg' viewBox='0 0 ${WIDTH} ${HEIGHT}'>
+                    <path class='sparkline-area' d='${area}' />
+                    <path class='sparkline-line' d='${line}' fill='none' pathLength='1' />
+                </svg>
+
+                <div aria-hidden='true' class='sparkline-overlay'>
+                    <div class='sparkline-cursor' style='${() => `left: ${percent(x(state.index), WIDTH)}`}'></div>
+                    <div
+                        class='sparkline-dot'
+                        style='${() => `left: ${percent(x(state.index), WIDTH)}; top: ${percent(y(data[state.index].value), HEIGHT)}`}'
+                    ></div>
+                    <div
+                        class='sparkline-tip'
+                        style='${() => `left: ${percent(Math.min(Math.max(x(state.index), TIP_INSET), WIDTH - TIP_INSET), WIDTH)}`}'
+                    >
+                        <span class='sparkline-tip-value'>${() => format(data[state.index].value)}</span>
+                        <span class='sparkline-tip-label'>${() => data[state.index].label}</span>
+                    </div>
+                </div>
+            </div>
+
+            <span aria-live='polite' class='sparkline-sr'>${() => view.announcement}</span>
+            <div class='sparkline-sr'>
+                <table>
+                    <caption>${title}</caption>
+                    <thead>
+                        <tr>
+                            <th scope='col'>Day</th>
+                            <th scope='col'>Value</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${data.map((point) => html`
+                            <tr>
+                                <th scope='row'>${point.label}</th>
+                                <td>${format(point.value)}</td>
+                            </tr>
+                        `)}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { plot: SPARKLINE_PLOT } as const);
+export type { Point as SparklinePoint, State as SparklineState };