@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/composer/index.js

@@ -0,0 +1,79 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import icon from '../icon/index.js';
+import textarea from '../textarea/index.js';
+import arrow from './svg/arrow-up.svg';
+import './scss/index.scss';
+const template_1pzsz612 = template_u1.template(`<div class='composer'><div class='composer-input'><!--$--><div class='composer-toolbar'><div class='composer-actions'></div><button aria-label='Send' class='composer-send' type='button'>`);
+const template_1pzsz618 = template_u1.template(`<div class='composer-footer'>`);
+class ReactiveObject_1pzsz610 extends reactivity_u0.ReactiveObject {
+    #processing = this[reactivity_u0.SIGNAL](false);
+    #value = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get processing() {
+        return reactivity_u0.read(this.#processing);
+    }
+    set processing(_v0) {
+        reactivity_u0.write(this.#processing, _v0);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v1) {
+        reactivity_u0.write(this.#value, _v1);
+    }
+}
+const COMPOSER_SEND = Symbol.for('@esportsplus/ui/composer.send');
+const COMPOSER_TEXTAREA = Symbol.for('@esportsplus/ui/composer.textarea');
+export default component(function ({ actions, footer, state = new ReactiveObject_1pzsz610(), submit, ...attributes }) {
+    let disabled = () => state.processing || !state.value.trim();
+    let send = async () => {
+        if (disabled()) {
+            return;
+        }
+        state.processing = true;
+        try {
+            await submit(state.value);
+            state.value = '';
+        }
+        finally {
+            state.processing = false;
+        }
+    };
+    return (() => {
+        let root_1pzsz611 = template_1pzsz612(), element_1pzsz613 = root_1pzsz611.firstChild, element_1pzsz614 = element_1pzsz613.firstElementChild.firstChild, element_1pzsz615 = element_1pzsz613.firstElementChild.firstElementChild.firstElementChild, element_1pzsz616 = element_1pzsz615.nextElementSibling;
+        template_u1.setProperties(element_1pzsz613, this?.attributes);
+        template_u1.setProperties(element_1pzsz613, attributes);
+        template_u1.slot(element_1pzsz614, textarea({
+            autoresize: { height: { max: '320px', min: '72px' } },
+            ...this?.attributes?.[COMPOSER_TEXTAREA],
+            ...attributes[COMPOSER_TEXTAREA],
+            oninput: (e) => {
+                state.value = e.target.value;
+            },
+            onkeydown: (e) => {
+                if (e.key !== 'Enter' || e.isComposing || e.shiftKey) {
+                    return;
+                }
+                e.preventDefault();
+                void send();
+            },
+            value: () => state.value
+        }));
+        template_u1.slot(element_1pzsz615, actions, 1);
+        template_u1.setProperties(element_1pzsz616, this?.attributes?.[COMPOSER_SEND]);
+        template_u1.setProperties(element_1pzsz616, attributes[COMPOSER_SEND]);
+        template_u1.setProperty(element_1pzsz616, 'disabled', disabled);
+        template_u1.delegate(element_1pzsz616, 'click', send);
+        template_u1.slot(element_1pzsz616, icon({ 'aria-hidden': true }, arrow), 1);
+        template_u1.slot(element_1pzsz613, footer && (() => {
+            let root_1pzsz617 = template_1pzsz618(), element_1pzsz619 = root_1pzsz617.firstChild;
+            template_u1.slot(element_1pzsz619, footer, 1);
+            return root_1pzsz617;
+        })(), 2);
+        return root_1pzsz611;
+    })();
+}, { send: COMPOSER_SEND, textarea: COMPOSER_TEXTAREA });

package/build/components/composer/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.composer{--background:var(--color-grey-400);--border-radius:var(--border-radius-700);--width:100%}.composer-action{--background:transparent;--background-hover:color-mix(in srgb, var(--color-text-500), transparent 94%);--background-pressed:color-mix(in srgb, var(--color-text-500), transparent 90%);--border-radius:var(--border-radius-300);--color:var(--color-text-400);--color-hover:var(--color-text-500);--font-size:var(--font-size-400);--gap:var(--size-100);--padding-horizontal:var(--size-200);--padding-vertical:var(--size-100)}.composer-action:not(.--active):hover{--background:var(--background-hover);--color:var(--color-hover)}.composer-action:not(.--active):active{--background:var(--background-pressed);--color:var(--color-hover)}.composer-actions,.composer-footer{--gap:var(--size-100)}.composer-footer{--padding-horizontal:var(--size-300);--padding-vertical:var(--size-200)}.composer-input{--background:var(--color-white-300);--border-color:var(--border-color-default);--border-color-active:var(--color-border-400);--border-color-default:var(--color-border-300);--border-width:var(--border-width-400);--box-shadow:none}.composer-input:focus-within{--border-color:var(--border-color-active)}.composer-input .textarea{--color-default:var(--color-text-500);--font-size:var(--font-size-400);--padding-horizontal:var(--size-500);--padding-vertical:var(--size-400);--placeholder-color:var(--color-text-300)}.composer-send{--background:var(--color-text-500);--background-disabled:var(--color-text-300);--color:var(--color-white-300);--icon-size:var(--size-300);--size:var(--size-600)}.composer-separator{--background:var(--color-border-300);--height:var(--size-400);--margin-horizontal:var(--size-100);--width:var(--border-width-400)}.composer-toolbar{--gap:var(--size-300);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}.composer{background:var(--background);border-radius:var(--border-radius);width:var(--width);flex-direction:column;display:flex;position:relative}.composer-action{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);align-items:center;gap:var(--gap);padding:var(--padding-vertical) var(--padding-horizontal);transition:background var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);white-space:nowrap;border:0;flex:none;display:inline-flex}.composer-actions,.composer-footer{align-items:center;gap:var(--gap);flex-wrap:wrap;min-width:0;display:flex}.composer-footer{padding:var(--padding-vertical) var(--padding-horizontal)}.composer-input{background:var(--background);border:var(--border-width) solid var(--border-color);border-radius:inherit;box-shadow:var(--box-shadow);cursor:text;transition:border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);flex-direction:column;display:flex}.composer-input .textarea::placeholder{color:var(--placeholder-color)}.composer-send{background:var(--background);color:var(--color);cursor:pointer;flex:0 0 var(--size);height:var(--size);transition:background var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);width:var(--size);border:0;border-radius:100%;justify-content:center;align-items:center;margin-left:auto;padding:0;display:flex}.composer-send:disabled{background:var(--background-disabled);cursor:default}.composer-send .icon{--size:var(--icon-size)}.composer-separator{background:var(--background);flex:0 0 var(--width);height:var(--height);margin:0 var(--margin-horizontal);width:var(--width);align-self:center}.composer-toolbar{align-items:center;gap:var(--gap);padding:0 var(--padding-horizontal) var(--padding-vertical);display:flex}}
+/*$vite$:1*/

package/build/components/composer/svg/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

package/build/components/container/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.container{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;gap:var(--gap-vertical) var(--gap-horizontal);margin:var(--margin-vertical) auto;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}}
+@layer components {.container{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;gap:var(--gap-vertical) var(--gap-horizontal);margin-block:var(--margin-vertical);width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);flex-wrap:wrap;justify-content:flex-start;margin-inline:auto;display:flex;position:relative}}
 /*$vite$:1*/

package/build/components/contribution-heatmap/index.d.ts

@@ -0,0 +1,30 @@
+import { type Attributes } from '@esportsplus/template';
+import '../tooltip/scss/index.scss';
+import './scss/index.scss';
+type A = Attributes & {
+    [CONTRIBUTION_HEATMAP_CELL]?: Attributes;
+    data: Day[];
+    label?: string;
+    onscroll?: never;
+    state?: State;
+    thresholds?: number[];
+};
+type Day = {
+    count: number;
+    date: string;
+    level?: number;
+};
+type State = {
+    index: number;
+};
+declare const CONTRIBUTION_HEATMAP_CELL: unique symbol;
+declare function legend(attributes?: Attributes): DocumentFragment | Text;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { data, label, state, thresholds, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly cell: typeof CONTRIBUTION_HEATMAP_CELL;
+    readonly legend: typeof legend;
+};
+export default _default;
+export type { Day as ContributionHeatmapDay, State as ContributionHeatmapState };

package/build/components/contribution-heatmap/index.js

@@ -0,0 +1,236 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup } from '@esportsplus/reactivity';
+import '../tooltip/scss/index.scss';
+import './scss/index.scss';
+const template_0su8xra2 = template_u1.template(`<div aria-hidden='true' class='contribution-heatmap-legend'><span>Less</span><!--$--><span>More`);
+const template_0su8xra6 = template_u1.template(`<span class='contribution-heatmap-swatch'>`);
+const template_0su8xra9 = template_u1.template(`<div class='contribution-heatmap'><div aria-hidden='true' class='contribution-heatmap-days'></div><div class='contribution-heatmap-scroll'><div class='contribution-heatmap-body'><div aria-hidden='true' class='contribution-heatmap-months'></div><div aria-readonly='true' class='contribution-heatmap-grid' role='grid'></div></div></div><div aria-hidden='true' class='contribution-heatmap-tip tooltip'><span class='tooltip-message tooltip-message--n'>`);
+const template_0su8xrai = template_u1.template(`<span>`);
+const template_0su8xran = template_u1.template(`<div class='contribution-heatmap-row' role='row'>`);
+const template_0su8xrap = template_u1.template(`<div class='contribution-heatmap-cell contribution-heatmap-cell--empty' role='presentation'>`);
+const template_0su8xrar = template_u1.template(`<div class='contribution-heatmap-cell' role='gridcell' tabindex='-1'>`);
+class ReactiveObject_0su8xra0 extends reactivity_u0.ReactiveObject {
+    #index;
+    constructor(_p0) {
+        super(null);
+        this.#index = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v0) {
+        reactivity_u0.write(this.#index, _v0);
+    }
+}
+const CELL = 10;
+const CONTRIBUTION_HEATMAP_CELL = Symbol.for('@esportsplus/ui/contribution-heatmap.cell');
+const DAYS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
+const LEVELS = [0, 1, 2, 3, 4];
+const LONG_DATE = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', timeZone: 'UTC', weekday: 'long', year: 'numeric' });
+const MONTH = new Intl.DateTimeFormat('en-US', { month: 'short', timeZone: 'UTC' });
+const NUMBER = new Intl.NumberFormat('en-US');
+const PITCH = 13;
+const SHORT_DATE = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'short', timeZone: 'UTC' });
+const THRESHOLDS = [1, 4, 7, 10];
+function levelOf(count, thresholds) {
+    let level = 0;
+    for (let i = 0, n = thresholds.length; i < n; i++) {
+        if (count >= thresholds[i]) {
+            level++;
+        }
+    }
+    return level;
+}
+function phrase(count) {
+    if (count === 0) {
+        return 'No contributions';
+    }
+    return `${NUMBER.format(count)} contribution${count === 1 ? '' : 's'}`;
+}
+function legend(attributes = {}) {
+    return (() => {
+        let root_0su8xra1 = template_0su8xra2(), element_0su8xra3 = root_0su8xra1.firstChild, element_0su8xra4 = element_0su8xra3.firstChild.nextSibling;
+        template_u1.setProperties(element_0su8xra3, attributes);
+        template_u1.slot(element_0su8xra4, LEVELS.map((level) => {
+            let root_0su8xra5 = template_0su8xra6(), element_0su8xra7 = root_0su8xra5.firstChild;
+            template_u1.setProperty(element_0su8xra7, 'data-level', level);
+            return root_0su8xra5;
+        }));
+        return root_0su8xra1;
+    })();
+}
+function template({ data, label, state = new ReactiveObject_0su8xra0(data.length - 1), thresholds = THRESHOLDS, ...attributes }) {
+    let cells = [], focusable, grid, months = [], observer, tip, weeks = Math.ceil(data.length / 7), wrap;
+    for (let i = 0, n = data.length; i < n; i++) {
+        let day = data[i], date = new Date(`${day.date}T00:00:00Z`);
+        cells.push({
+            date,
+            label: `${phrase(day.count)} on ${LONG_DATE.format(date)}`,
+            level: day.level ?? levelOf(day.count, thresholds),
+            tip: `${phrase(day.count)} on ${SHORT_DATE.format(date)}`
+        });
+        if (date.getUTCDate() !== 1) {
+            continue;
+        }
+        let column = Math.floor(i / 7);
+        if (months.length && column - months[months.length - 1].column < 3) {
+            months.pop();
+        }
+        months.push({ column, name: MONTH.format(date) });
+    }
+    function cellFrom(target) {
+        return target?.closest('[data-i]') ?? null;
+    }
+    function hide() {
+        tip?.classList.remove('--active');
+    }
+    function move(next) {
+        let index = Math.min(Math.max(next, 0), data.length - 1);
+        state.index = index;
+        grid?.querySelector(`[data-i="${index}"]`)?.focus();
+    }
+    function rove(index) {
+        let element = grid?.querySelector(`[data-i="${index}"]`);
+        if (!element || element === focusable) {
+            return;
+        }
+        if (focusable) {
+            focusable.tabIndex = -1;
+        }
+        element.tabIndex = 0;
+        focusable = element;
+    }
+    function show(element) {
+        let cell = cells[Number(element.dataset.i)], message = tip?.firstElementChild;
+        if (!cell || !message || !tip || !wrap) {
+            return;
+        }
+        message.textContent = cell.tip;
+        let box = wrap.getBoundingClientRect(), rect = element.getBoundingClientRect(), scale = wrap.offsetWidth / box.width || 1, width = message.offsetWidth, x = Math.min(Math.max((rect.left - box.left + rect.width / 2) * scale, width / 2), wrap.offsetWidth - width / 2), y = (rect.top - box.top) * scale;
+        tip.style.transform = `translate(${x}px, ${y}px)`;
+        tip.classList.add('--active');
+    }
+    let stop = effect(() => {
+        rove(state.index);
+    });
+    onCleanup(() => {
+        observer?.disconnect();
+        stop();
+    });
+    return (() => {
+        let root_0su8xra8 = template_0su8xra9(), element_0su8xraa = root_0su8xra8.firstChild, element_0su8xrab = element_0su8xraa.firstElementChild, element_0su8xrac = element_0su8xrab.nextElementSibling, element_0su8xrad = element_0su8xrac.firstElementChild, element_0su8xrae = element_0su8xrad.firstElementChild, element_0su8xraf = element_0su8xrae.nextElementSibling, element_0su8xrag = element_0su8xrac.nextElementSibling;
+        template_u1.setProperties(element_0su8xraa, this?.attributes);
+        template_u1.setProperties(element_0su8xraa, attributes);
+        template_u1.onrender(element_0su8xraa, (element) => {
+            wrap = element;
+        });
+        template_u1.slot(element_0su8xrab, DAYS.map((day) => {
+            let root_0su8xrah = template_0su8xrai(), element_0su8xraj = root_0su8xrah.firstChild;
+            template_u1.slot(element_0su8xraj, day, 1);
+            return root_0su8xrah;
+        }), 1);
+        template_u1.onconnect(element_0su8xrac, (element) => {
+            element.scrollLeft = element.scrollWidth;
+        });
+        template_u1.on(element_0su8xrac, 'scroll', hide);
+        template_u1.setList(element_0su8xrad, 'style', template_u1.interpolate(["width: ", (weeks * PITCH - (PITCH - CELL)), "px"]));
+        template_u1.slot(element_0su8xrae, months.map((month) => {
+            let root_0su8xrak = template_0su8xrai(), element_0su8xral = root_0su8xrak.firstChild;
+            template_u1.setList(element_0su8xral, 'style', template_u1.interpolate(["left: ", (month.column * PITCH), "px"]));
+            template_u1.slot(element_0su8xral, month.name, 1);
+            return root_0su8xrak;
+        }), 1);
+        template_u1.setProperty(element_0su8xraf, 'aria-label', label ?? `Contributions over the last ${weeks} weeks`);
+        template_u1.onconnect(element_0su8xraf, (element) => {
+            grid = element;
+            rove(state.index);
+            observer = new IntersectionObserver((entries) => {
+                if (!entries.some((entry) => entry.isIntersecting)) {
+                    return;
+                }
+                observer?.disconnect();
+                element.classList.add('--shown');
+            }, { threshold: 0.4 });
+            observer.observe(element);
+        });
+        template_u1.on(element_0su8xraf, 'focusin', (e) => {
+            let element = cellFrom(e.target);
+            if (!element) {
+                return;
+            }
+            state.index = Number(element.dataset.i);
+            show(element);
+        });
+        template_u1.on(element_0su8xraf, 'focusout', (e) => {
+            if (!grid?.contains(e.relatedTarget)) {
+                hide();
+            }
+        });
+        template_u1.delegate(element_0su8xraf, 'keydown', (e) => {
+            let element = cellFrom(e.target);
+            if (!element) {
+                return;
+            }
+            if (e.key === 'Escape') {
+                hide();
+                return;
+            }
+            let i = Number(element.dataset.i), day = i % 7, next = {
+                ArrowDown: day < 6 ? i + 1 : i,
+                ArrowLeft: i - 7,
+                ArrowRight: i + 7,
+                ArrowUp: day > 0 ? i - 1 : i,
+                End: (weeks - 1) * 7 + day,
+                Home: day
+            }[e.key];
+            if (next === undefined) {
+                return;
+            }
+            e.preventDefault();
+            move(next);
+        });
+        template_u1.delegate(element_0su8xraf, 'pointerdown', (e) => {
+            let element = cellFrom(e.target);
+            if (e.pointerType === 'touch' && element) {
+                show(element);
+            }
+        });
+        template_u1.on(element_0su8xraf, 'pointerleave', (e) => {
+            if (e.pointerType !== 'touch') {
+                hide();
+            }
+        });
+        template_u1.delegate(element_0su8xraf, 'pointerover', (e) => {
+            let element = cellFrom(e.target);
+            if (e.pointerType !== 'touch' && element) {
+                show(element);
+            }
+        });
+        template_u1.slot(element_0su8xraf, DAYS.map((_, day) => {
+            let root_0su8xram = template_0su8xran(), element_0su8xrao = root_0su8xram.firstChild;
+            template_u1.slot(element_0su8xrao, Array.from({ length: weeks }, (_, week) => {
+                let i = week * 7 + day, cell = cells[i];
+                if (!cell) {
+                    return template_0su8xrap();
+                }
+                return (() => {
+                    let root_0su8xraq = template_0su8xrar(), element_0su8xras = root_0su8xraq.firstChild;
+                    template_u1.setProperty(element_0su8xras, 'aria-label', cell.label);
+                    template_u1.setProperty(element_0su8xras, 'data-i', i);
+                    template_u1.setProperty(element_0su8xras, 'data-level', cell.level);
+                    template_u1.setList(element_0su8xras, 'style', template_u1.interpolate(["--column: ", (week)]));
+                    template_u1.setProperties(element_0su8xras, this?.attributes?.[CONTRIBUTION_HEATMAP_CELL]);
+                    template_u1.setProperties(element_0su8xras, attributes[CONTRIBUTION_HEATMAP_CELL]);
+                    return root_0su8xraq;
+                })();
+            }), 1);
+            return root_0su8xram;
+        }), 1);
+        template_u1.onrender(element_0su8xrag, (element) => {
+            tip = element;
+        });
+        return root_0su8xra8;
+    })();
+}
+export default Object.assign(template, { cell: CONTRIBUTION_HEATMAP_CELL, legend });

package/build/components/contribution-heatmap/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.contribution-heatmap,.contribution-heatmap-legend{--cell-radius:var(--border-radius-100);--cell-size:10px;--color:var(--color-text-300);--focus-color:var(--color-text-500);--font-size:var(--font-size-300);--hover-color:color-mix(in oklab, var(--color-text-500) 50%, transparent);--level-0:color-mix(in oklab, var(--level-color) 7%, transparent);--level-1:color-mix(in oklab, var(--level-color) 25%, transparent);--level-2:color-mix(in oklab, var(--level-color) 45%, transparent);--level-3:color-mix(in oklab, var(--level-color) 70%, transparent);--level-4:var(--level-color);--level-color:var(--color-text-500);--pitch:13px;--stagger:8ms;--transition-duration:.3s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.contribution-heatmap--blue,.contribution-heatmap-legend--blue{--level-color:var(--color-blue-400)}.contribution-heatmap-tip .tooltip-message{--border-radius:var(--border-radius-300);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--offset:0px;--padding-horizontal:var(--size-100);--padding-vertical:calc(var(--size-100) / 2);--spacer:6px;--transition-duration:75ms;--transition-timing-function:ease-out}.contribution-heatmap{color:var(--color);font-size:var(--font-size);grid-template-columns:auto minmax(0,max-content);width:fit-content;max-width:100%;display:grid;position:relative}.contribution-heatmap-cell{background:var(--level-0);border-radius:var(--cell-radius);height:var(--cell-size);opacity:0;transition:opacity var(--transition-duration) var(--transition-timing-function) calc(var(--column) * var(--stagger)), scale var(--transition-duration) var(--transition-timing-function) calc(var(--column) * var(--stagger));width:var(--cell-size);outline:none;flex-shrink:0;scale:.6}.contribution-heatmap-cell:hover{outline:1px solid var(--hover-color);outline-offset:1px}.contribution-heatmap-cell:focus-visible{outline:2px solid var(--focus-color);outline-offset:1px}.contribution-heatmap-cell--empty{background:0 0}.contribution-heatmap-cell[data-level="1"]{background:var(--level-1)}.contribution-heatmap-cell[data-level="2"]{background:var(--level-2)}.contribution-heatmap-cell[data-level="3"]{background:var(--level-3)}.contribution-heatmap-cell[data-level="4"]{background:var(--level-4)}.contribution-heatmap-days{margin-inline-end:5px;flex-direction:column;margin-top:23px;display:flex}.contribution-heatmap-days span{height:var(--pitch);line-height:var(--cell-size)}.contribution-heatmap-grid{gap:calc(var(--pitch) - var(--cell-size));flex-direction:column;display:flex}.contribution-heatmap-grid.--shown .contribution-heatmap-cell{opacity:1;scale:1}.contribution-heatmap-months{height:20px;position:relative}.contribution-heatmap-months span{line-height:1;position:absolute;top:0}.contribution-heatmap-row{gap:calc(var(--pitch) - var(--cell-size));display:flex}.contribution-heatmap-scroll{overscroll-behavior-x:contain;min-width:0;padding:3px;overflow-x:auto}.contribution-heatmap .contribution-heatmap-tip{cursor:auto;pointer-events:none;z-index:10;width:0;height:0;position:absolute;top:0;left:0}.contribution-heatmap .contribution-heatmap-tip.--active .tooltip-message{--transition-duration:.1s}@media (prefers-reduced-motion:reduce){.contribution-heatmap-cell{transition:none;scale:1}}.contribution-heatmap-legend{color:var(--color);font-size:var(--font-size);align-items:center;gap:4px;display:flex}.contribution-heatmap-legend>span:first-child{margin-inline-end:4px}.contribution-heatmap-legend>span:last-child{margin-inline-start:4px}.contribution-heatmap-swatch{border-radius:var(--cell-radius);height:var(--cell-size);width:var(--cell-size)}.contribution-heatmap-swatch[data-level="0"]{background:var(--level-0)}.contribution-heatmap-swatch[data-level="1"]{background:var(--level-1)}.contribution-heatmap-swatch[data-level="2"]{background:var(--level-2)}.contribution-heatmap-swatch[data-level="3"]{background:var(--level-3)}.contribution-heatmap-swatch[data-level="4"]{background:var(--level-4)}}
+/*$vite$:1*/

package/build/components/counter/index.d.ts

@@ -1,11 +1,13 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default _default;
-declare function _default({ currency, decimals, delay, max, state: api, suffix, value, ...attributes }: Attributes & {
+declare function _default({ currency, decimals, delay, max, prefix, startOnView, state: api, suffix, value, ...attributes }: Attributes & {
     currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
     decimals?: number;
     delay?: number;
     max?: number;
+    prefix?: string;
+    startOnView?: boolean;
     state?: {
         value: number;
     };

package/build/components/counter/index.js

@@ -1,11 +1,11 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
 import './scss/index.scss';
-const template_ur = template_u0.template(`<span class='counter-character counter-character--symbol'>`);
-const template_uu = template_u0.template(`<span>`);
-const template_ux = template_u0.template(`<div class='counter-character'><div class='counter-character-track' ><span>9</span><!--$--><span>0`);
-const template_u11 = template_u0.template(`<div class='counter' >`);
+const template_00nd5up3 = template_u1.template(`<div class='counter'>`);
+const template_00nd5up6 = template_u1.template(`<span class='counter-character counter-character--symbol'>`);
+const template_00nd5up9 = template_u1.template(`<div class='counter-character'><div class='counter-character-track'><span>9</span><!--$--><span>0`);
+const template_00nd5upd = template_u1.template(`<span>`);
 class ReactiveObject_00nd5up0 extends reactivity_u0.ReactiveObject {
     #value = this[reactivity_u0.SIGNAL](-1);
     constructor() {
@@ -31,13 +31,13 @@ class ReactiveObject_00nd5up1 extends reactivity_u0.ReactiveObject {
     }
 }
 let formatters = {};
-export default ({ currency, decimals = 2, delay, max, state: api = new ReactiveObject_00nd5up0(), suffix, value, ...attributes }) => {
+export default ({ currency, decimals = 2, delay, max, prefix, startOnView, state: api = new ReactiveObject_00nd5up0(), suffix, value, ...attributes }) => {
     let formatter = currency === 'IGNORE'
         ? undefined
         : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
             style: 'currency',
             currency: currency || 'USD'
-        }), animation = new ReactiveObject_00nd5up1(), render = new reactivity_u0.ReactiveArray(), stop = effect(() => {
+        }), animation = new ReactiveObject_00nd5up1(), observer, render = new reactivity_u0.ReactiveArray(), 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');
         if (formatter) {
@@ -50,21 +50,29 @@ export default ({ currency, decimals = 2, delay, max, state: api = new ReactiveO
             });
         }
         values = values.split('');
+        if (prefix) {
+            values.unshift(...prefix.split(''));
+        }
         if (suffix) {
             values.push(' ', ...suffix.split(''));
         }
         untrack(() => {
+            let remaining = values.filter((value) => !isNaN(parseInt(value, 10))).length;
             for (let i = 0, n = values.length; i < n; i++) {
-                let value = values[i], digit = !isNaN(parseInt(value, 10));
+                let previous = render[i], value = values[i], digit = !isNaN(parseInt(value, 10)), index = digit ? --remaining : 0;
                 if (digit && (!started || padding > 0)) {
                     padding--;
                     value = '0';
                 }
-                if (render[i]?.digit === digit) {
-                    render[i].value = value;
+                if (previous?.digit === digit) {
+                    previous.index = index;
+                    if (previous.value !== value) {
+                        previous.roll = previous.roll === 1 ? 2 : 1;
+                        previous.value = value;
+                    }
                 }
                 else {
-                    let character = reactivity_u0.reactive({ digit, value });
+                    let character = reactivity_u0.reactive({ digit, index, roll: 0, value });
                     render.$set(i, character);
                 }
             }
@@ -72,33 +80,52 @@ export default ({ currency, decimals = 2, delay, max, state: api = new ReactiveO
                 render.splice(values.length);
             }
         });
-    }), timer = setTimeout(() => animation.started = true, delay ?? 1000);
+    }), timer;
+    function start() {
+        timer = setTimeout(() => animation.started = true, delay ?? 1000);
+    }
     onCleanup(() => {
         clearTimeout(timer);
+        observer?.disconnect();
         stop();
     });
     return (() => {
-        let root_u10 = template_u11(), element_u12 = root_u10.firstChild;
-        template_u0.setProperties(element_u12, attributes);
-        element_u12.appendChild(new template_u0.ArraySlot(render, function (character) {
+        let root_00nd5up2 = template_00nd5up3(), element_00nd5up4 = root_00nd5up2.firstChild;
+        template_u1.setProperties(element_00nd5up4, attributes);
+        template_u1.onconnect(element_00nd5up4, (element) => {
+            if (!startOnView) {
+                start();
+                return;
+            }
+            observer = new IntersectionObserver((entries) => {
+                if (!entries.some((entry) => entry.isIntersecting)) {
+                    return;
+                }
+                observer?.disconnect();
+                start();
+            });
+            observer.observe(element);
+        });
+        element_00nd5up4.appendChild(new template_u1.ArraySlot(render, function (character) {
             if (!character.digit) {
                 return (() => {
-                    let root_uq = template_ur(), element_us = root_uq.firstChild;
-                    new template_u0.EffectSlot(element_us, () => character.value, 1);
-                    return root_uq;
+                    let root_00nd5up5 = template_00nd5up6(), element_00nd5up7 = root_00nd5up5.firstChild;
+                    new template_u1.EffectSlot(element_00nd5up7, () => character.value, 1);
+                    return root_00nd5up5;
                 })();
             }
             return (() => {
-                let root_uw = template_ux(), element_uy = root_uw.firstChild.firstElementChild, element_uz = element_uy.firstChild.nextSibling;
-                template_u0.setList(element_uy, 'style', () => `--value: ${character.value}`);
-                template_u0.slot(element_uz, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
-                    let root_ut = template_uu(), element_uv = root_ut.firstChild;
-                    template_u0.slot(element_uv, value, 1);
-                    return root_ut;
+                let root_00nd5up8 = template_00nd5up9(), element_00nd5upa = root_00nd5up8.firstChild.firstElementChild, element_00nd5upb = element_00nd5upa.firstChild.nextSibling;
+                template_u1.setProperty(element_00nd5upa, 'data-roll', () => character.roll);
+                template_u1.setList(element_00nd5upa, 'style', () => `--index: ${character.index}; --value: ${character.value}`);
+                template_u1.slot(element_00nd5upb, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => {
+                    let root_00nd5upc = template_00nd5upd(), element_00nd5upe = root_00nd5upc.firstChild;
+                    template_u1.slot(element_00nd5upe, value, 1);
+                    return root_00nd5upc;
                 }));
-                return root_uw;
+                return root_00nd5up8;
             })();
         }, true).fragment);
-        return root_u10;
+        return root_00nd5up2;
     })();
 };

package/build/components/counter/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.counter{--font-size:clamp(2rem, 4vw + 1rem, 8rem);--font-weight:var(--font-weight-400);--mask-size:.24;--timing-function:var(--timing-bounce-out);--transition-duration:2s}.counter-character{--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter{transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);transform-style:flat;place-items:center;gap:2px;display:flex}.counter-character,.counter-character-track span{color:#0000;transform-style:flat;background:linear-gradient(#fafafa 50%,#737373) fixed;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size) * var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:1lh;overflow:visible}.counter-character--fraction .counter-character-track span{flex-direction:column;align-items:end;padding:calc(.2lh - .2em) 0;display:flex}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-right:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * -1lh);transition:translate var(--transition-duration) var(--timing-function);display:grid}.counter-character-track span{transform-style:flat;height:1lh}}
+@layer components {.counter{--blur:.05em;--font-size:clamp(2rem, 4vw + 1rem, 8rem);--font-weight:var(--font-weight-400);--mask-size:.24;--stagger:0s;--timing-function:linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1);--transition-duration:2s}.counter--linear{--timing-function:linear;--transition-duration:1.2s}.counter--snap{--timing-function:cubic-bezier(.16, 1, .3, 1);--transition-duration:.64s}.counter--spring{--timing-function:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .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%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);--transition-duration:1.2s}.counter--stagger{--stagger:80ms}.counter-character{--scale:1}.counter-character--fraction,.counter-character--symbol{--opacity:.8}.counter-character--fraction{--font-weight:var(--font-weight-300);--scale:.75}.counter-character--symbol:first-child{--scale:.8}.counter--ticker{--font-size:1em;--mask-size:.12;--stagger:60ms;--timing-function:cubic-bezier(.22, 1, .36, 1);--transition-duration:.9s}.counter--ticker .counter-character--symbol{--opacity:1;--scale:1}.counter{transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);transform-style:flat;place-items:center;gap:2px;display:flex}.counter-character,.counter-character-track span{color:#0000;transform-style:flat;background:linear-gradient(#fafafa 50%,#737373) fixed;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);transform-style:flat;display:grid;overflow:hidden}.counter-character--fraction{font-size:calc(var(--font-size) * var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);height:1lh;overflow:visible}.counter-character--fraction .counter-character-track span{flex-direction:column;align-items:end;padding:calc(.2lh - .2em) 0;display:flex}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-inline-end:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * -1lh);transition:translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));display:grid}.counter-character-track span{transform-style:flat;height:1lh}@media (prefers-reduced-motion:no-preference){.counter--blur .counter-character-track{animation:var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}.counter--blur .counter-character-track[data-roll="1"]{animation-name:counter-blur-1}.counter--blur .counter-character-track[data-roll="2"]{animation-name:counter-blur-2}}.counter--ticker{gap:0}.counter--ticker .counter-character,.counter--ticker .counter-character-track span{color:inherit;background:0 0}@media (prefers-reduced-motion:reduce){.counter,.counter-character-track{transition:none}}@keyframes counter-blur-1{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}@keyframes counter-blur-2{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}}
 /*$vite$:1*/

package/build/components/datalist/index.d.ts

@@ -0,0 +1,37 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+declare const DATALIST_LENS: unique symbol;
+declare const DATALIST_OPTION: unique symbol;
+declare const DATALIST_SCROLLER: unique symbol;
+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 State = {
+    error: string;
+    selected?: number | string;
+    settled: boolean;
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly lens: typeof DATALIST_LENS;
+    readonly option: typeof DATALIST_OPTION;
+    readonly scroller: typeof DATALIST_SCROLLER;
+}>;
+export default _default;