@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/datalist/index.js

@@ -0,0 +1,159 @@
+import * as template_u1 from '@esportsplus/template';
+import { component, on } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import form from '../form/index.js';
+import './scss/index.scss';
+const template_0tf9kxv2 = template_u1.template(`<div class='datalist'><div class='datalist-lens' aria-hidden='true'></div><div class='datalist-scroller' role='listbox' tabindex='0'><div class='datalist-track'></div></div><input class='datalist-tag' />`);
+const template_0tf9kxv9 = template_u1.template(`<div class='datalist-option ' role='option'>`);
+class ReactiveObject_0tf9kxv0 extends reactivity_u0.ReactiveObject {
+    #error = this[reactivity_u0.SIGNAL]('');
+    #selected;
+    #settled = this[reactivity_u0.SIGNAL](true);
+    constructor(_p0) {
+        super(null);
+        this.#selected = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v0) {
+        reactivity_u0.write(this.#error, _v0);
+    }
+    get selected() {
+        return reactivity_u0.read(this.#selected);
+    }
+    set selected(_v1) {
+        reactivity_u0.write(this.#selected, _v1);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v2) {
+        reactivity_u0.write(this.#settled, _v2);
+    }
+}
+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 = {
+    ArrowDown: 1,
+    ArrowUp: -1,
+    PageDown: 5,
+    PageUp: -5
+};
+let uid = 0;
+export default component(function ({ options, selected, state = new ReactiveObject_0tf9kxv0(selected ?? Object.keys(options)[0]), ...attributes }) {
+    let keys = Object.keys(options), active = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false]))), height = 0, id = `datalist-${++uid}`, observer, previous, scroller, timer;
+    function clamp(index) {
+        return Math.min(Math.max(index, 0), keys.length - 1);
+    }
+    function measure() {
+        let option = scroller?.querySelector('.datalist-option');
+        if (!scroller || !option) {
+            return;
+        }
+        height = option.offsetHeight;
+        scroller.style.setProperty('--half', `${scroller.clientHeight / 2 / height}`);
+        paint();
+    }
+    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) {
+        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 (() => {
+        let root_0tf9kxv1 = template_0tf9kxv2(), element_0tf9kxv3 = root_0tf9kxv1.firstChild, element_0tf9kxv4 = element_0tf9kxv3.firstElementChild, element_0tf9kxv5 = element_0tf9kxv4.nextElementSibling, element_0tf9kxv6 = element_0tf9kxv5.firstElementChild, element_0tf9kxv7 = element_0tf9kxv5.nextElementSibling;
+        template_u1.setProperties(element_0tf9kxv3, this?.attributes);
+        template_u1.setProperties(element_0tf9kxv3, attributes);
+        template_u1.setProperties(element_0tf9kxv4, this?.attributes?.[DATALIST_LENS]);
+        template_u1.setProperties(element_0tf9kxv4, attributes[DATALIST_LENS]);
+        template_u1.setProperties(element_0tf9kxv5, this?.attributes?.[DATALIST_SCROLLER]);
+        template_u1.setProperties(element_0tf9kxv5, attributes[DATALIST_SCROLLER]);
+        template_u1.setProperty(element_0tf9kxv5, 'aria-activedescendant', () => `${id}-${keys.indexOf(String(state.selected))}`);
+        template_u1.onconnect(element_0tf9kxv5, (element) => {
+            scroller = element;
+            measure();
+            scroller.scrollTop = clamp(keys.indexOf(String(state.selected))) * height;
+            paint();
+            on(element, 'scrollend', settle);
+            observer = new ResizeObserver(measure);
+            observer.observe(scroller);
+        });
+        template_u1.delegate(element_0tf9kxv5, 'keydown', (e) => {
+            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);
+        });
+        template_u1.on(element_0tf9kxv5, 'scroll', onscroll);
+        template_u1.slot(element_0tf9kxv6, keys.map((key, index) => {
+            let root_0tf9kxv8 = template_0tf9kxv9(), element_0tf9kxva = root_0tf9kxv8.firstChild;
+            template_u1.setList(element_0tf9kxva, 'class', () => active[key] && '--active');
+            template_u1.setProperty(element_0tf9kxva, 'id', template_u1.interpolate([(id), "-", (index)]));
+            template_u1.setList(element_0tf9kxva, 'style', template_u1.interpolate(["--index: ", (index)]));
+            template_u1.setProperties(element_0tf9kxva, this?.attributes?.[DATALIST_OPTION]);
+            template_u1.setProperties(element_0tf9kxva, attributes[DATALIST_OPTION]);
+            template_u1.setProperty(element_0tf9kxva, 'aria-selected', () => active[key] ? 'true' : 'false');
+            template_u1.delegate(element_0tf9kxva, 'click', () => scrollTo(index));
+            template_u1.slot(element_0tf9kxva, options[key], 1);
+            return root_0tf9kxv8;
+        }), 1);
+        template_u1.setProperty(element_0tf9kxv7, 'name', attributes.name);
+        template_u1.onrender(element_0tf9kxv7, form.input.onrender(state));
+        template_u1.setProperty(element_0tf9kxv7, 'value', () => state.selected);
+        return root_0tf9kxv1;
+    })();
+}, { lens: DATALIST_LENS, option: DATALIST_OPTION, scroller: DATALIST_SCROLLER });

package/build/components/datalist/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.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}.datalist-lens{--background:var(--color-border-300);--border-radius:var(--border-radius-600)}.datalist-option{--opacity-falloff:.55;--rotate:38deg;--scale:1.14;--scale-falloff:.34}.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);width:min(100%, var(--width));position:relative}.datalist-lens{top:50%;right:var(--padding);left:var(--padding);background:var(--background);border-radius:var(--border-radius);height:var(--item-height);pointer-events:none;position:absolute;transform:translateY(-50%)}.datalist-option{--t:clamp(-1, calc((var(--index) - var(--offset,0)) / var(--half,2.5)), 1);--t-abs:max(var(--t), var(--t) * -1);cursor:pointer;font-variant:tabular-nums;height:var(--item-height);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));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:none;display:flex}@media (prefers-reduced-motion:reduce){.datalist-option{opacity:1;transform:none}}.datalist-scroller{border-radius:var(--border-radius);height:var(--height);overscroll-behavior:contain;perspective:var(--perspective);scroll-snap-type:y mandatory;scrollbar-width:none;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%)}.datalist-scroller::-webkit-scrollbar{display:none}.datalist-scroller:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.datalist-track{padding-block:calc((var(--height) - var(--item-height)) / 2)}.datalist-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+/*$vite$:1*/

package/build/components/date-range-picker/index.d.ts

@@ -0,0 +1,28 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [DATE_RANGE_PICKER_DAY]?: Attributes;
+    onapply?: (range: Range) => void;
+    state?: State;
+    today?: string;
+    value?: Range | null;
+};
+type Range = {
+    end: string;
+    start: string;
+};
+type State = {
+    end: string | null;
+    start: string | null;
+};
+declare const DATE_RANGE_PICKER_DAY: unique symbol;
+declare function describe(range: Range): string;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { onapply, state, today, value, ...attributes }?: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly day: typeof DATE_RANGE_PICKER_DAY;
+    readonly describe: typeof describe;
+};
+export default _default;
+export type { Range, State };

package/build/components/date-range-picker/index.js

@@ -0,0 +1,443 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { computed, dispose, read, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1wcxcxi1 = template_u1.template(`<td class='date-range-picker-cell'>`);
+const template_1wcxcxi3 = template_u1.template(`<td class='date-range-picker-cell' role='gridcell'><button class='date-range-picker-day' type='button'><!--$-->`);
+const template_1wcxcxi7 = template_u1.template(`<span aria-hidden='true' class='date-range-picker-today'>`);
+const template_1wcxcxi9 = template_u1.template(`<div class='date-range-picker-month'><p class='date-range-picker-month-title'></p><table class='date-range-picker-grid' role='grid'><thead><tr></tr></thead><tbody>`);
+const template_1wcxcxif = template_u1.template(`<th scope='col'>`);
+const template_1wcxcxii = template_u1.template(`<tr>`);
+const template_1wcxcxil = template_u1.template(`<div class='date-range-picker-months'>`);
+const template_1wcxcxio = template_u1.template(`<div class='date-range-picker'><div aria-label='Presets' class='date-range-picker-presets' role='group'></div><div class='date-range-picker-area'><div class='date-range-picker-nav'><button aria-label='Previous month' class='button date-range-picker-step' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M10 3.5 5.5 8l4.5 4.5' /></svg></button><button aria-label='Next month' class='button date-range-picker-step' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m6 3.5 4.5 4.5L6 12.5' /></svg></button></div><span aria-live='polite' class='date-range-picker-live'></span></div><div class='date-range-picker-footer'><div class='date-range-picker-status'><p class='date-range-picker-summary'></p><p class='date-range-picker-hint'></p></div><button class='button date-range-picker-clear' type='button'> Clear </button><button class='button date-range-picker-apply' type='button'><span class='date-range-picker-apply-labels'><span class='date-range-picker-apply-label date-range-picker-apply-label--done'><svg aria-hidden='true' class='date-range-picker-apply-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg><span class='date-range-picker-apply-text'>Applied</span></span><span class='date-range-picker-apply-label date-range-picker-apply-label--idle'>Apply</span></span></button></div><span aria-live='polite' class='date-range-picker-live'>`);
+const template_1wcxcxi11 = template_u1.template(`<button class='button date-range-picker-preset' type='button'>`);
+class ReactiveObject_1wcxcxi0 extends reactivity_u0.ReactiveObject {
+    #applied = this[reactivity_u0.SIGNAL](false);
+    #focused;
+    #hover;
+    #single = this[reactivity_u0.SIGNAL](false);
+    #view;
+    constructor(_p0, _p1, _p2) {
+        super(null);
+        this.#focused = this[reactivity_u0.SIGNAL](_p0);
+        this.#hover = this[reactivity_u0.SIGNAL](_p1);
+        this.#view = this[reactivity_u0.SIGNAL](_p2);
+    }
+    get applied() {
+        return reactivity_u0.read(this.#applied);
+    }
+    set applied(_v0) {
+        reactivity_u0.write(this.#applied, _v0);
+    }
+    get focused() {
+        return reactivity_u0.read(this.#focused);
+    }
+    set focused(_v1) {
+        reactivity_u0.write(this.#focused, _v1);
+    }
+    get hover() {
+        return reactivity_u0.read(this.#hover);
+    }
+    set hover(_v2) {
+        reactivity_u0.write(this.#hover, _v2);
+    }
+    get single() {
+        return reactivity_u0.read(this.#single);
+    }
+    set single(_v3) {
+        reactivity_u0.write(this.#single, _v3);
+    }
+    get view() {
+        return reactivity_u0.read(this.#view);
+    }
+    set view(_v4) {
+        reactivity_u0.write(this.#view, _v4);
+    }
+}
+const CELLS = 42;
+const DATE_RANGE_PICKER_DAY = Symbol.for('@esportsplus/ui/date-range-picker.day');
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+const SLIDE = 56;
+const TWO_MONTHS_AT = 540;
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+function addDays(iso, days) {
+    let d = fromIso(iso);
+    return toIso(new Date(d.getFullYear(), d.getMonth(), d.getDate() + days));
+}
+function addMonths(iso, months) {
+    let d = fromIso(iso), last = new Date(d.getFullYear(), d.getMonth() + months + 1, 0);
+    return toIso(new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate())));
+}
+function dayLabel(iso) {
+    return fromIso(iso).toLocaleDateString('en-US', { day: 'numeric', month: 'long', weekday: 'long', year: 'numeric' });
+}
+function daysBetween(a, b) {
+    return Math.round((fromIso(b).getTime() - fromIso(a).getTime()) / 86_400_000);
+}
+function describe(range) {
+    let days = daysBetween(range.start, range.end) + 1, sameYear = range.start.slice(0, 4) === range.end.slice(0, 4), span = range.start === range.end
+        ? short(range.start, true)
+        : `${short(range.start, !sameYear)} to ${short(range.end, true)}`;
+    return `${span} · ${days} day${days === 1 ? '' : 's'}`;
+}
+function fromIso(iso) {
+    let [y, m, d] = iso.split('-').map(Number);
+    return new Date(y, m - 1, d);
+}
+function monthEnd(month) {
+    return toIso(new Date(Math.floor(month / 12), (month % 12) + 1, 0));
+}
+function monthIndex(iso) {
+    let [y, m] = iso.split('-').map(Number);
+    return y * 12 + m - 1;
+}
+function monthStart(month) {
+    return toIso(new Date(Math.floor(month / 12), month % 12, 1));
+}
+function monthTitle(month) {
+    return new Date(Math.floor(month / 12), month % 12, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+}
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+function presets(today) {
+    let month = monthIndex(today);
+    return [
+        { label: 'Last 7 days', range: { end: today, start: addDays(today, -6) } },
+        { label: 'Last 30 days', range: { end: today, start: addDays(today, -29) } },
+        { label: 'This month', range: { end: monthEnd(month), start: monthStart(month) } },
+        { label: 'Last month', range: { end: monthEnd(month - 1), start: monthStart(month - 1) } }
+    ];
+}
+function short(iso, withYear) {
+    return fromIso(iso).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: withYear ? 'numeric' : undefined });
+}
+function template({ onapply, state, today = toIso(new Date()), value, ...attributes } = {}) {
+    let applied, area, defaults = this?.attributes, entering = 0, id = `date-range-picker-${Math.random().toString(36).slice(2, 8)}`, observer, pending = null, s = state || reactivity_u0.reactive({ end: value?.end ?? null, start: value?.start ?? null }), ui = new ReactiveObject_1wcxcxi0(null, null, null), viewCount = computed(() => ui.single ? 1 : 2), viewMonth = computed(() => {
+        if (ui.view !== null) {
+            return ui.view;
+        }
+        let month = monthIndex(s.start ?? today);
+        return s.end && !ui.single && monthIndex(s.end) === month ? month - 1 : month;
+    }), rangeHi = computed(() => {
+        if (s.start !== null && s.end === null) {
+            return ui.hover ? (ui.hover < s.start ? s.start : ui.hover) : s.start;
+        }
+        return s.end;
+    }), rangeLo = computed(() => {
+        if (s.start !== null && s.end === null && ui.hover) {
+            return ui.hover < s.start ? ui.hover : s.start;
+        }
+        return s.start;
+    }), tabbable = computed(() => {
+        let focused = ui.focused ?? s.start ?? today, month = monthIndex(focused), shown = read(viewMonth);
+        return month >= shown && month < shown + read(viewCount) ? focused : monthStart(shown);
+    });
+    function band(iso, col, last) {
+        let hi = read(rangeHi), lo = read(rangeLo);
+        if (!inRange(iso)) {
+            return '';
+        }
+        let rowEnd = col === 6 || iso === last, rowStart = col === 0 || iso.endsWith('-01');
+        if ((iso === lo && rowEnd) || (iso === hi && rowStart)) {
+            return '';
+        }
+        return `--band${iso === lo ? ' --band-lo' : ''}${iso === hi ? ' --band-hi' : ''}${rowStart && iso !== lo ? ' --band-start' : ''}${rowEnd && iso !== hi ? ' --band-end' : ''}`;
+    }
+    function cell(iso, col, last) {
+        if (!iso) {
+            return template_1wcxcxi1();
+        }
+        return (() => {
+            let root_1wcxcxi2 = template_1wcxcxi3(), element_1wcxcxi4 = root_1wcxcxi2.firstChild, element_1wcxcxi5 = element_1wcxcxi4.firstElementChild, element_1wcxcxi6 = element_1wcxcxi5.firstChild;
+            template_u1.setProperty(element_1wcxcxi4, 'aria-selected', () => String(inRange(iso) || iso === s.start || iso === s.end));
+            template_u1.setList(element_1wcxcxi4, 'class', () => band(iso, col, last));
+            template_u1.setProperty(element_1wcxcxi5, 'aria-label', dayLabel(iso));
+            template_u1.setProperty(element_1wcxcxi5, 'data-date', iso);
+            template_u1.setProperties(element_1wcxcxi5, iso === today ? { 'aria-current': 'date' } : {});
+            template_u1.setProperties(element_1wcxcxi5, defaults?.[DATE_RANGE_PICKER_DAY]);
+            template_u1.setProperties(element_1wcxcxi5, attributes[DATE_RANGE_PICKER_DAY]);
+            template_u1.setList(element_1wcxcxi5, 'class', () => dayClass(iso));
+            template_u1.setProperty(element_1wcxcxi5, 'tabindex', () => {
+                let day = read(tabbable);
+                return day === iso ? '0' : '-1';
+            });
+            template_u1.slot(element_1wcxcxi6, Number(iso.slice(8)));
+            template_u1.slot(element_1wcxcxi5, iso === today && template_1wcxcxi7(), 2);
+            return root_1wcxcxi2;
+        })();
+    }
+    function dayClass(iso) {
+        if (iso === s.start || iso === s.end) {
+            return '--active';
+        }
+        let hi = read(rangeHi), lo = read(rangeLo);
+        return (iso === lo || iso === hi) && picking() && ui.hover ? '--edge' : '';
+    }
+    function focus(iso) {
+        pending = iso;
+        requestAnimationFrame(settle);
+    }
+    function goTo(iso) {
+        ui.focused = iso;
+        if (picking()) {
+            ui.hover = iso;
+        }
+        reveal(iso);
+        focus(iso);
+    }
+    function inRange(iso) {
+        let hi = read(rangeHi), lo = read(rangeLo);
+        return lo !== null && hi !== null && lo !== hi && iso >= lo && iso <= hi;
+    }
+    function keydown(e) {
+        let target = e.target.closest('[data-date]');
+        if (!target) {
+            return;
+        }
+        let focused = ui.focused ?? s.start ?? today, weekday = fromIso(focused).getDay(), years = e.shiftKey ? 12 : 1, moves = {
+            ArrowDown: () => addDays(focused, 7),
+            ArrowLeft: () => addDays(focused, -1),
+            ArrowRight: () => addDays(focused, 1),
+            ArrowUp: () => addDays(focused, -7),
+            End: () => addDays(focused, 6 - weekday),
+            Home: () => addDays(focused, -weekday),
+            PageDown: () => addMonths(focused, years),
+            PageUp: () => addMonths(focused, -years)
+        }, move = moves[e.key];
+        if (move) {
+            e.preventDefault();
+            goTo(move());
+        }
+        else if (e.key === 'Escape' && picking()) {
+            e.preventDefault();
+            s.start = null;
+            ui.hover = null;
+        }
+    }
+    function month(index) {
+        let first = fromIso(monthStart(index)), last = monthEnd(index), lead = first.getDay(), title = `${id}-${index}`, days = [];
+        for (let i = 0; i < CELLS; i++) {
+            let iso = toIso(new Date(first.getFullYear(), first.getMonth(), i - lead + 1));
+            days.push(monthIndex(iso) === index ? iso : null);
+        }
+        return (() => {
+            let root_1wcxcxi8 = template_1wcxcxi9(), element_1wcxcxia = root_1wcxcxi8.firstChild.firstElementChild, element_1wcxcxib = element_1wcxcxia.nextElementSibling, element_1wcxcxic = element_1wcxcxib.firstElementChild.firstElementChild, element_1wcxcxid = element_1wcxcxib.firstElementChild.nextElementSibling;
+            template_u1.setProperty(element_1wcxcxia, 'id', title);
+            template_u1.slot(element_1wcxcxia, monthTitle(index), 1);
+            template_u1.setProperty(element_1wcxcxib, 'aria-labelledby', title);
+            template_u1.slot(element_1wcxcxic, WEEKDAYS.map((day) => {
+                let root_1wcxcxie = template_1wcxcxif(), element_1wcxcxig = root_1wcxcxie.firstChild;
+                template_u1.setProperty(element_1wcxcxig, 'abbr', day);
+                template_u1.slot(element_1wcxcxig, day.slice(0, 2), 1);
+                return root_1wcxcxie;
+            }), 1);
+            template_u1.slot(element_1wcxcxid, [0, 1, 2, 3, 4, 5].map((week) => {
+                let root_1wcxcxih = template_1wcxcxii(), element_1wcxcxij = root_1wcxcxih.firstChild;
+                template_u1.slot(element_1wcxcxij, days.slice(week * 7, week * 7 + 7).map((iso, col) => cell(iso, col, last)), 1);
+                return root_1wcxcxih;
+            }), 1);
+            return root_1wcxcxi8;
+        })();
+    }
+    function months(view, count) {
+        return (() => {
+            let root_1wcxcxik = template_1wcxcxil(), element_1wcxcxim = root_1wcxcxik.firstChild;
+            template_u1.onconnect(element_1wcxcxim, (element) => {
+                let direction = Number(element.dataset.entering);
+                settle();
+                if (!direction) {
+                    return;
+                }
+                delete element.dataset.entering;
+                element.style.removeProperty('opacity');
+                element.animate(matchMedia(REDUCED_MOTION).matches
+                    ? { opacity: [0, 1] }
+                    : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1], transform: [`translateX(${direction * SLIDE}px)`, 'none'] }, { duration: 250, easing: EASE_OUT });
+            });
+            template_u1.onrender(element_1wcxcxim, (element) => {
+                if (!entering) {
+                    return;
+                }
+                element.dataset.entering = String(entering);
+                element.style.opacity = '0';
+                entering = 0;
+            });
+            template_u1.slot(element_1wcxcxim, Array.from({ length: count }, (_, i) => month(view + i)), 1);
+            return root_1wcxcxik;
+        })();
+    }
+    function picking() {
+        return s.start !== null && s.end === null;
+    }
+    function reveal(iso) {
+        let m = monthIndex(iso), shown = read(viewMonth);
+        if (m < shown) {
+            showView(m);
+        }
+        else if (m > shown + read(viewCount) - 1) {
+            showView(m - read(viewCount) + 1);
+        }
+        else {
+            showView(shown);
+        }
+    }
+    function select(iso) {
+        let start = s.start;
+        ui.applied = false;
+        ui.focused = iso;
+        reveal(iso);
+        if (!picking() || start === null) {
+            s.start = iso;
+            s.end = null;
+            ui.hover = iso;
+        }
+        else if (iso < start) {
+            s.end = start;
+            s.start = iso;
+            ui.hover = null;
+        }
+        else {
+            s.end = iso;
+            ui.hover = null;
+        }
+    }
+    function setRange(range) {
+        let shown = read(viewMonth);
+        ui.applied = false;
+        ui.hover = null;
+        s.end = range?.end ?? null;
+        s.start = range?.start ?? null;
+        if (!range) {
+            showView(shown);
+            return;
+        }
+        ui.focused = range.start;
+        let end = monthIndex(range.end), visible = monthIndex(range.start) >= shown && end <= shown + read(viewCount) - 1;
+        showView(visible ? shown : Math.max(monthIndex(range.start), end - read(viewCount) + 1));
+    }
+    function settle() {
+        let button = pending && area?.querySelector(`.date-range-picker-months:not([data-exiting]):not([data-stale]) [data-date='${pending}']`);
+        if (!button) {
+            return;
+        }
+        pending = null;
+        button.focus({ preventScroll: true });
+    }
+    function showView(next) {
+        let shown = read(viewMonth);
+        if (next !== shown && area) {
+            let current = area.querySelector(':scope > .date-range-picker-months:not([data-exiting]):not([data-stale])');
+            entering = next > shown ? 1 : -1;
+            if (current) {
+                current.dataset.stale = '';
+                let direction = entering, ghost = current.cloneNode(true);
+                ghost.dataset.exiting = '';
+                ghost.inert = true;
+                ghost.style.left = `${current.offsetLeft}px`;
+                ghost.style.top = `${current.offsetTop}px`;
+                ghost.style.width = `${current.offsetWidth}px`;
+                area.append(ghost);
+                ghost.animate(matchMedia(REDUCED_MOTION).matches
+                    ? { opacity: [1, 0] }
+                    : { filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0], transform: ['none', `translateX(${direction * -SLIDE * 0.6}px)`] }, { duration: 180, easing: EASE_OUT, fill: 'forwards' }).onfinish = () => ghost.remove();
+            }
+        }
+        ui.view = next;
+    }
+    function step(months) {
+        let focused = ui.focused ?? s.start ?? today;
+        showView(read(viewMonth) + months);
+        ui.focused = addMonths(focused, months);
+    }
+    function summary() {
+        if (s.start !== null && s.end !== null) {
+            return describe({ end: s.end, start: s.start });
+        }
+        return s.start !== null ? `From ${short(s.start, true)}` : 'No dates selected';
+    }
+    return (() => {
+        let root_1wcxcxin = template_1wcxcxio(), element_1wcxcxip = root_1wcxcxin.firstChild, element_1wcxcxiq = element_1wcxcxip.firstElementChild, element_1wcxcxir = element_1wcxcxiq.nextElementSibling, element_1wcxcxis = element_1wcxcxir.firstElementChild.firstElementChild, element_1wcxcxit = element_1wcxcxis.nextElementSibling, element_1wcxcxiu = element_1wcxcxir.firstElementChild.nextElementSibling, element_1wcxcxiv = element_1wcxcxir.nextElementSibling.firstElementChild.firstElementChild, element_1wcxcxiw = element_1wcxcxiv.nextElementSibling, element_1wcxcxix = element_1wcxcxir.nextElementSibling.firstElementChild.nextElementSibling, element_1wcxcxiy = element_1wcxcxix.nextElementSibling, element_1wcxcxiz = element_1wcxcxir.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_1wcxcxip, defaults);
+        template_u1.setProperties(element_1wcxcxip, attributes);
+        template_u1.onconnect(element_1wcxcxip, (element) => {
+            observer = new ResizeObserver(([entry]) => {
+                ui.single = entry.contentRect.width < TWO_MONTHS_AT;
+            });
+            observer.observe(element);
+        });
+        template_u1.ondisconnect(element_1wcxcxip, () => {
+            clearTimeout(applied);
+            observer?.disconnect();
+            dispose(rangeHi);
+            dispose(rangeLo);
+            dispose(tabbable);
+            dispose(viewCount);
+            dispose(viewMonth);
+        });
+        template_u1.slot(element_1wcxcxiq, presets(today).map((chip) => {
+            let root_1wcxcxi10 = template_1wcxcxi11(), element_1wcxcxi12 = root_1wcxcxi10.firstChild;
+            template_u1.setProperty(element_1wcxcxi12, 'aria-pressed', () => String(s.start === chip.range.start && s.end === chip.range.end));
+            template_u1.delegate(element_1wcxcxi12, 'click', () => setRange(chip.range));
+            template_u1.slot(element_1wcxcxi12, chip.label, 1);
+            return root_1wcxcxi10;
+        }), 1);
+        template_u1.delegate(element_1wcxcxir, 'click', (e) => {
+            let day = e.target.closest('[data-date]');
+            if (day?.dataset.date) {
+                select(day.dataset.date);
+            }
+        });
+        template_u1.delegate(element_1wcxcxir, 'keydown', keydown);
+        template_u1.on(element_1wcxcxir, 'mouseleave', () => {
+            if (picking()) {
+                ui.hover = null;
+            }
+        });
+        template_u1.delegate(element_1wcxcxir, 'pointerover', (e) => {
+            if (e.pointerType === 'touch' || !picking()) {
+                return;
+            }
+            let day = e.target.closest('[data-date]');
+            if (day?.dataset.date && !day.closest('[data-exiting]')) {
+                ui.hover = day.dataset.date;
+            }
+        });
+        template_u1.onrender(element_1wcxcxir, (element) => {
+            area = element;
+        });
+        template_u1.delegate(element_1wcxcxis, 'click', () => step(-1));
+        template_u1.delegate(element_1wcxcxit, 'click', () => step(1));
+        new template_u1.EffectSlot(element_1wcxcxiu, () => Array.from({ length: read(viewCount) }, (_, i) => monthTitle(read(viewMonth) + i)).join(' and '), 1);
+        new template_u1.EffectSlot(element_1wcxcxir, () => {
+            let count = read(viewCount), view = read(viewMonth);
+            return untrack(() => months(view, count));
+        }, 2);
+        template_u1.setList(element_1wcxcxiv, 'class', () => s.start !== null && '--active');
+        new template_u1.EffectSlot(element_1wcxcxiv, summary, 1);
+        new template_u1.EffectSlot(element_1wcxcxiw, () => s.start !== null && s.end !== null ? '' : picking() ? 'Pick an end date' : 'Pick a start date', 1);
+        template_u1.setList(element_1wcxcxix, 'class', () => s.start === null && '--disabled');
+        template_u1.setProperty(element_1wcxcxix, 'inert', () => s.start === null);
+        template_u1.delegate(element_1wcxcxix, 'click', () => setRange(null));
+        template_u1.setList(element_1wcxcxiy, 'class', () => ui.applied && '--applied');
+        template_u1.setProperty(element_1wcxcxiy, 'disabled', () => s.start === null || s.end === null);
+        template_u1.delegate(element_1wcxcxiy, 'click', () => {
+            if (s.start === null || s.end === null) {
+                return;
+            }
+            onapply?.({ end: s.end, start: s.start });
+            ui.applied = true;
+            clearTimeout(applied);
+            applied = setTimeout(() => {
+                ui.applied = false;
+            }, 1600);
+        });
+        new template_u1.EffectSlot(element_1wcxcxiz, () => ui.applied ? `Applied ${summary()}` : '', 1);
+        return root_1wcxcxin;
+    })();
+}
+function toIso(d) {
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+export default Object.assign(template, { day: DATE_RANGE_PICKER_DAY, describe });

package/build/components/date-range-picker/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.date-range-picker{--accent:var(--color-text-500);--accent-contrast:var(--color-white-300);--background:var(--color-white-300);--band:oklch(from var(--color-text-500) l c h / .07);--border:var(--color-border-300);--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--color-muted:var(--color-text-300);--day-size:36px;--edge:oklch(from var(--color-text-500) l c h / .14);--focus-ring:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--font-size-small:calc(var(--font-size-400) * .75);--font-size-title:calc(var(--font-size-400) * .9375);--foreground:var(--color-text-500);--hover:oklch(from var(--color-text-500) l c h / .05);--icon-duration:.446s;--icon-timing-function:linear(0, .118, .319, .509, .657, .769, .848, .901, .937, .96, .975, .984, .99, .994, 1);--radius:24px;--row-height:40px;--width:600px;background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--foreground);font-size:var(--font-size);max-width:100%;width:var(--width);padding:16px}.date-range-picker-apply{--background-default:var(--accent);--color-default:var(--accent-contrast);--padding-horizontal:16px;--padding-vertical:0px;font-weight:var(--font-weight-500);border-radius:999px;height:36px}.date-range-picker-apply:disabled{opacity:.4}.date-range-picker-apply:not(:disabled):active{scale:.96}.date-range-picker-apply-label{grid-area:1/1;justify-content:center;align-items:center;gap:6px;display:flex}.date-range-picker-apply-label--idle,.date-range-picker-apply-text{transition:filter .2s ease-out,opacity .2s ease-out}.--applied .date-range-picker-apply-label--idle{filter:blur(4px);opacity:0}.date-range-picker-apply-icon{filter:blur(4px);opacity:0;height:16px;transition:filter var(--icon-duration) var(--icon-timing-function), opacity var(--icon-duration) var(--icon-timing-function), scale var(--icon-duration) var(--icon-timing-function);width:16px;scale:.25}.--applied .date-range-picker-apply-icon{filter:none;opacity:1;scale:1}.date-range-picker-apply-labels{display:grid}.date-range-picker-apply-text{filter:blur(4px);opacity:0}.--applied .date-range-picker-apply-text{filter:none;opacity:1}.date-range-picker-apply,.date-range-picker-clear,.date-range-picker-preset,.date-range-picker-step{font-size:var(--font-size);outline:0 solid var(--focus-ring);outline-offset:2px;-webkit-user-select:none;user-select:none}.date-range-picker-apply:focus-visible,.date-range-picker-clear:focus-visible,.date-range-picker-preset:focus-visible,.date-range-picker-step:focus-visible{outline-width:2px}.date-range-picker-area{height:calc(var(--row-height) + 32px + var(--row-height) * 6 + 8px);margin:-4px;padding:4px;position:relative;overflow:hidden}.date-range-picker-cell{height:var(--row-height);padding:0;position:relative}.date-range-picker-cell.--band:before{background:var(--band);content:"";position:absolute;inset:2px 0}.date-range-picker-cell.--band-end:before{border-top-right-radius:999px;border-bottom-right-radius:999px}.date-range-picker-cell.--band-hi:before{right:50%}.date-range-picker-cell.--band-lo:before{left:50%}.date-range-picker-cell.--band-start:before{border-top-left-radius:999px;border-bottom-left-radius:999px}.date-range-picker-clear{--background-hover:var(--hover);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:14px;--padding-vertical:0px;outline-offset:0;border-radius:999px;height:36px}.date-range-picker-clear:active{scale:.96}.date-range-picker-clear.--disabled{opacity:.4}.date-range-picker-day{color:var(--foreground);cursor:pointer;font:inherit;font-variant-numeric:tabular-nums;height:var(--day-size);outline:0 solid var(--focus-ring);outline-offset:1px;touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--day-size);background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0 auto;padding:0;transition:background-color .15s ease-out,scale .15s ease-out;display:flex;position:relative}.date-range-picker-day:active{scale:.96}.date-range-picker-day:focus-visible{outline-width:2px}.date-range-picker-day:hover{background:var(--band)}.date-range-picker-day.--edge{background:var(--edge)}.date-range-picker-day.--active{background:var(--accent);color:var(--accent-contrast)}.date-range-picker-footer{border-top:1px solid var(--border);align-items:center;gap:8px;height:56px;margin:12px -16px 0;padding:12px 16px 0;display:flex}.date-range-picker-grid{border-collapse:collapse;table-layout:fixed;width:100%}.date-range-picker-grid th{color:var(--color-muted);font-size:var(--font-size-small);font-weight:var(--font-weight-500);text-align:center;height:32px;padding:0}.date-range-picker-hint{color:var(--color-muted);font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;height:16px;line-height:16px;overflow:hidden}.date-range-picker-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.date-range-picker-month{flex:1 1 0;min-width:0}.date-range-picker-month-title{font-size:var(--font-size-title);font-weight:var(--font-weight-500);height:var(--row-height);justify-content:center;align-items:center;display:flex}.date-range-picker-months{gap:24px;display:flex}.date-range-picker-months[data-exiting]{pointer-events:none;position:absolute}.date-range-picker-nav{pointer-events:none;z-index:1;justify-content:space-between;display:flex;position:absolute;inset:4px 4px auto}.date-range-picker-presets{scrollbar-width:none;gap:6px;margin:-4px -16px 8px;padding:4px 16px;display:flex;overflow-x:auto}.date-range-picker-preset{--background-hover:var(--hover);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:14px;--padding-vertical:0px;box-shadow:inset 0 0 0 1px var(--border);border-radius:999px;flex-shrink:0;height:36px}.date-range-picker-preset:active{scale:.96}.date-range-picker-preset[aria-pressed=true]{--background-default:var(--accent);--background-hover:var(--accent);--color-default:var(--accent-contrast);--color-hover:var(--accent-contrast);box-shadow:none}.date-range-picker-status{flex:1 1 0;min-width:0}.date-range-picker-step{--background-hover:var(--hover);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:0px;--padding-vertical:0px;outline-offset:0;pointer-events:auto;touch-action:manipulation;border-radius:50%;width:40px;height:40px}.date-range-picker-step:active{scale:.96}.date-range-picker-step svg{width:16px;height:16px}.date-range-picker-summary{color:var(--color-muted);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.date-range-picker-summary.--active{color:var(--foreground)}.date-range-picker-today{background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:4px;left:50%;translate:-50%}@media (prefers-reduced-motion:reduce){.date-range-picker-apply-icon{filter:none;scale:1}.date-range-picker-day{transition:background-color .15s ease-out}}}
+/*$vite$:1*/