@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,117 @@
+@use 'variables';
+
+.hover-card {
+    display: inline-block;
+    position: relative;
+
+
+    &-body {
+        display: block;
+    }
+
+    &-content {
+        background: var(--card-background);
+        border-radius: var(--card-radius);
+        box-shadow: var(--card-shadow);
+        color: var(--card-color);
+        display: block;
+        font-size: var(--card-font-size);
+        font-weight: var(--font-weight-400);
+        line-height: var(--card-line-height);
+        max-width: calc(100vw - 24px);
+        opacity: 0;
+        padding: var(--card-padding);
+        pointer-events: none;
+        position: absolute;
+        scale: var(--scale);
+        text-align: left;
+        // Exits are faster than entrances so a closing card never holds the eye.
+        transition:
+            opacity var(--close-duration) var(--timing-function),
+            scale var(--close-duration) var(--timing-function),
+            visibility 0s linear var(--close-duration);
+        visibility: hidden;
+        white-space: normal;
+        width: var(--card-width);
+        z-index: 50;
+
+        // An invisible strip across the gap keeps the pointer inside while it travels from trigger to card.
+        &::before {
+            content: '';
+            height: calc(var(--card-gap) + 4px);
+            inset-inline: 0;
+            position: absolute;
+        }
+
+        &--n {
+            bottom: 100%;
+            margin-bottom: var(--card-gap);
+
+            &::before {
+                bottom: calc((var(--card-gap) + 4px) * -1);
+            }
+        }
+
+        &--s {
+            margin-top: var(--card-gap);
+            top: 100%;
+
+            &::before {
+                top: calc((var(--card-gap) + 4px) * -1);
+            }
+        }
+
+        &.--active {
+            opacity: 1;
+            pointer-events: auto;
+            scale: 1;
+            transition:
+                opacity var(--open-duration) var(--timing-function),
+                scale var(--open-duration) var(--timing-function),
+                visibility 0s;
+            visibility: visible;
+        }
+
+        // Instant cards (one replacing another) skip both the fade and the scale.
+        &.--instant {
+            &,
+            &.--active {
+                transition: none;
+            }
+        }
+    }
+
+    &-trigger {
+        background: none;
+        border: 0;
+        border-radius: var(--border-radius-200);
+        color: var(--trigger-color);
+        cursor: pointer;
+        font: inherit;
+        font-weight: var(--font-weight-500);
+        outline: none;
+        padding: 0;
+        text-decoration: underline;
+        text-decoration-color: var(--trigger-decoration);
+        text-decoration-thickness: 1px;
+        text-underline-offset: 4px;
+        transition: text-decoration-color var(--open-duration) ease-out;
+        white-space: nowrap;
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--trigger-color);
+            outline-offset: var(--border-width-500);
+        }
+
+        &:hover,
+        &[aria-expanded='true'] {
+            text-decoration-color: var(--trigger-decoration-active);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-content {
+            scale: 1;
+        }
+    }
+}

package/src/components/hover-card/scss/variables.scss

@@ -0,0 +1,25 @@
+.hover-card {
+    --card-background: var(--color-white-300);
+    --card-color: var(--color-text-500);
+    --card-font-size: calc(var(--font-size-400) * 0.875);
+    --card-gap: 8px;
+    --card-line-height: 20px;
+    --card-padding: var(--size-400);
+    --card-radius: var(--size-500);
+    --card-shadow:
+        0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
+    --card-width: 300px;
+    --close-duration: 0.1s;
+    --open-duration: 0.15s;
+    --scale: 0.96;
+    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --trigger-color: var(--color-text-500);
+    --trigger-decoration: color-mix(in srgb, var(--color-text-500) 25%, transparent);
+    --trigger-decoration-active: var(--color-text-500);
+
+    &--fade {
+        --scale: 1;
+    }
+}

package/src/components/image/index.ts

@@ -0,0 +1,79 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type Status = 'error' | 'loading' | 'ready';
+
+
+export default ({ alt, fetchpriority, height, loading = 'lazy', placeholder, sizes, src, srcset, width, ...attributes }: Attributes & {
+    alt: string;
+    fetchpriority?: 'auto' | 'high' | 'low';
+    height: number;
+    loading?: 'eager' | 'lazy';
+    placeholder?: string;
+    sizes?: string;
+    src?: string;
+    srcset?: string;
+    width: number;
+}) => {
+    // Spread at runtime so unset values are skipped; an empty src would fire a spurious error.
+    let source = { fetchpriority, sizes, src, srcset },
+        state = reactive({ instant: false, status: 'loading' as Status });
+
+    function settle(status: Status, instant: boolean) {
+        state.instant = instant;
+        state.status = status;
+    }
+
+    return html`
+        <div
+            aria-busy='${() => String(state.status === 'loading')}'
+            class='image'
+            style='${`--aspect-ratio: ${width} / ${height}`}'
+            ${attributes}
+            ${{
+                class: () => `--${state.status}${state.instant ? ' --instant' : ''}`
+            }}
+        >
+            ${placeholder && html`
+                <img alt='' aria-hidden='true' class='image-placeholder' draggable='false' src='${placeholder}' />
+            `}
+            <img
+                alt='${alt}'
+                class='image-source'
+                decoding='async'
+                draggable='false'
+                height='${height}'
+                loading='${loading}'
+                width='${width}'
+                ${source}
+                ${{
+                    onerror: () => settle('error', false),
+                    onload: function(this: HTMLImageElement) {
+                        if (state.status === 'ready') {
+                            return;
+                        }
+
+                        this.decode().then(
+                            () => settle('ready', false),
+                            () => settle('error', false)
+                        );
+                    },
+                    onrender: (img: HTMLImageElement) => {
+                        // Memory-cached images have dimensions synchronously; reveal them without replaying the develop.
+                        // Deferred lazy images also report complete, so naturalWidth is the only reliable signal.
+                        if (img.complete && img.naturalWidth > 0) {
+                            settle('ready', true);
+                        }
+                    }
+                }}
+            />
+            <div aria-hidden='true' class='image-error'>
+                <svg fill='currentColor' viewBox='0 0 256 256'>
+                    <path d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z' />
+                </svg>
+            </div>
+        </div>
+    `;
+};

package/src/components/image/scss/index.scss

@@ -0,0 +1,82 @@
+@use 'variables';
+
+.image {
+    aspect-ratio: var(--aspect-ratio);
+    background: var(--background);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    &-error {
+        background: var(--error-background);
+        color: var(--error-color);
+        display: grid;
+        opacity: 0;
+        place-items: center;
+        transition: opacity var(--transition-duration) var(--timing-function);
+
+        svg {
+            height: var(--error-size);
+            width: var(--error-size);
+        }
+    }
+
+    &-error,
+    &-placeholder,
+    &-source {
+        height: 100%;
+        inset: 0;
+        position: absolute;
+        width: 100%;
+    }
+
+    &-placeholder {
+        filter: blur(var(--blur));
+        scale: var(--placeholder-scale);
+    }
+
+    &-placeholder,
+    &-source {
+        object-fit: cover;
+        user-select: none;
+    }
+
+    &-source {
+        filter: blur(var(--develop-blur)) saturate(var(--develop-saturate));
+        opacity: 0;
+        scale: var(--develop-scale);
+        transition:
+            filter var(--transition-duration) var(--timing-function),
+            opacity var(--transition-duration) var(--timing-function),
+            scale var(--transition-duration) var(--timing-function);
+    }
+
+    &.--error {
+        .image-error {
+            opacity: 1;
+        }
+    }
+
+    &.--instant {
+        .image-error,
+        .image-source {
+            transition: none;
+        }
+    }
+
+    &.--ready {
+        .image-source {
+            filter: blur(0) saturate(1);
+            opacity: 1;
+            scale: 1;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-error,
+        &-source {
+            transition: none;
+        }
+    }
+}

package/src/components/image/scss/variables.scss

@@ -0,0 +1,15 @@
+.image {
+    --aspect-ratio: auto;
+    --background: var(--color-grey-500);
+    --blur: 14px;
+    --border-radius: var(--border-radius-600);
+    --develop-blur: 18px;
+    --develop-saturate: 0.6;
+    --develop-scale: 1.06;
+    --error-background: var(--color-white-400);
+    --error-color: var(--color-text-300);
+    --error-size: 22px;
+    --placeholder-scale: 1.08;
+    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --transition-duration: 0.65s;
+}

package/src/components/index.ts

@@ -1,21 +1,117 @@
 export { default as accordion } from './accordion';
+export { default as announcementBanner } from './announcement-banner';
+export { default as autosave } from './autosave';
+export { default as backToTop } from './back-to-top';
+export { default as bentoGrid } from './bento-grid';
+export { default as bentoGridSpotlight } from './bento-grid-spotlight';
+export { default as bookmarkButton } from './bookmark-button';
+export { default as breadcrumb } from './breadcrumb';
+export { default as breadcrumbs } from './breadcrumbs';
+export { default as button } from './button';
+export { default as cardInput } from './card-input';
+export { default as carousel3d } from './carousel-3d';
 export { default as checkbox } from './checkbox';
+export { default as checkboxGroup } from './checkbox-group';
 export { default as clipboard } from './clipboard';
+export { default as codeMorph } from './code-morph';
+export { default as collapsibleSidebar } from './collapsible-sidebar';
+export { default as colorPicker } from './color-picker';
+export { default as command } from './command';
+export { default as commandPalette } from './command-palette';
+export { default as composer } from './composer';
+export { default as contributionHeatmap } from './contribution-heatmap';
 export { default as counter } from './counter';
+export { default as datalist } from './datalist';
+export { default as dateRangePicker } from './date-range-picker';
+export { default as dock } from './dock';
+export { default as dynamicIsland } from './dynamic-island';
+export { default as emailTypoFix } from './email-typo-fix';
+export { default as expandingCard } from './expanding-card';
+export { default as featureSpotlight } from './feature-spotlight';
+export { default as fileTree } from './file-tree';
+export { default as filterGrid } from './filter-grid';
 export { default as form } from './form';
+export { default as gradientText } from './gradient-text';
+export { default as header } from './header';
+export { default as highlight } from './highlight';
+export { default as hoverCard } from './hover-card';
 export { default as icon } from './icon';
+export { default as image } from './image';
+export { default as inlineEdit } from './inline-edit';
 export { default as input } from './input';
 export { default as json } from './json';
+export { default as kanbanBoard } from './kanban-board';
+export { default as lightbox } from './lightbox';
+export { default as lineShadowText } from './line-shadow-text';
 export { default as loading } from './loading';
+export { default as longPress } from './long-press';
+export { default as marquee } from './marquee';
+export { default as modal } from './modal';
+export { default as morphingButton } from './morphing-button';
+export { default as morphingNav } from './morphing-nav';
+export { default as multiStepForm } from './multi-step-form';
+export { default as nestedMenu } from './nested-menu';
+export { default as notificationBell } from './notification-bell';
 export { default as number } from './number';
+export { default as onboardingChecklist } from './onboarding-checklist';
 export { default as overlay } from './overlay';
+export { default as pageDots } from './page-dots';
+export { default as pagination } from './pagination';
+export { default as password } from './password';
+export { default as progress } from './progress';
+export { default as pullToRefresh } from './pull-to-refresh';
 export { default as radio } from './radio';
+export { default as radioCards } from './radio-cards';
 export { default as range } from './range';
+export { default as rangeFilter } from './range-filter';
+export { default as rangeSlider } from './range-slider';
+export { default as readingProgress } from './reading-progress';
+export { default as relativeTime } from './relative-time';
+export { default as scrollFade } from './scroll-fade';
+export { default as scrollSpine } from './scroll-spine';
+export { default as scrollVelocity } from './scroll-velocity';
+export { default as scrubInput } from './scrub-input';
 export { default as select } from './select';
-export { default as switch } from './switch';
+export { default as selectMenu } from './select-menu';
+export { default as selectionToolbar } from './selection-toolbar';
+export { default as settings } from './settings';
+export { default as shareButton } from './share-button';
+export { default as sheet } from './sheet';
+export { default as shinyText } from './shiny-text';
+export { default as shortcutRecorder } from './shortcut-recorder';
+export { default as shortcutSheet } from './shortcut-sheet';
 export { default as sidebar } from './sidebar';
+export { default as slider } from './slider';
+export { default as slidingTabs } from './sliding-tabs';
+export { default as snapCarousel } from './snap-carousel';
+export { default as sortable } from './sortable';
+export { default as sparkline } from './sparkline';
+export { default as stackedDrawer } from './stacked-drawer';
+export { default as statCounter } from './stat-counter';
+export { default as statusPicker } from './status-picker';
+export { default as stickyHeader } from './sticky-header';
+export { default as stickyStack } from './sticky-stack';
+export { default as storyProgress } from './story-progress';
+export { default as surfaceField } from './surface-field';
+export { default as swipeDeck } from './swipe-deck';
+export { default as switch } from './switch';
+export { default as tagInput } from './tag-input';
+export { default as taskList } from './task-list';
+export { default as tasklist } from './tasklist';
+export { default as textAnimate } from './text-animate';
+export { default as textProgress } from './text-progress';
 export { default as textarea } from './textarea';
 export { default as toaster, toast } from './toast';
 export { default as tooltip } from './tooltip';
+export { default as tree } from './tree';
+export { default as treeView } from './tree-view';
 export { default as truncate } from './truncate';
 export { default as typewriter } from './typewriter';
+export { default as typewriterRetype } from './typewriter-retype';
+export { default as undoToast } from './undo-toast';
+export { default as uptime } from './uptime';
+export { default as usageMeter } from './usage-meter';
+export { default as valueFlash } from './value-flash';
+export { default as waitlistJoin } from './waitlist-join';
+export { default as webSearch } from './web-search';
+export { default as wordRotator } from './word-rotator';

package/src/components/inline-edit/index.ts

@@ -0,0 +1,177 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import input from '~/components/input';
+import textarea from '~/components/textarea';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [INLINE_EDIT_DISPLAY]?: Attributes;
+    [INLINE_EDIT_FIELD]?: Field;
+    label: string;
+    multiline?: boolean;
+    onsave?: (value: string) => void;
+    placeholder?: string;
+    state?: State;
+    value?: string;
+};
+
+type D = Attributes & Pick<A, typeof INLINE_EDIT_DISPLAY | typeof INLINE_EDIT_FIELD>;
+
+type Field = Parameters<typeof input>[0];
+
+type State = {
+    editing: boolean;
+    saved: boolean;
+    value: string;
+};
+
+
+const INLINE_EDIT_DISPLAY = Symbol.for('@esportsplus/ui/inline-edit.display');
+
+const INLINE_EDIT_FIELD = Symbol.for('@esportsplus/ui/inline-edit.field');
+
+// Long enough to notice after the field settles, short enough that the pencil is back before the next edit.
+const SAVED_FOR = 1600;
+
+
+function template(
+    this: { attributes?: D } | void,
+    {
+        label,
+        multiline = false,
+        onsave,
+        placeholder = '',
+        value = '',
+        state = reactive({ editing: false, saved: false, value }),
+        ...attributes
+    }: A
+) {
+    let display: HTMLElement | undefined,
+        draft = '',
+        local = reactive({ draft: '' }),
+        parts = { ...this?.attributes?.[INLINE_EDIT_FIELD], ...attributes[INLINE_EDIT_FIELD] },
+        timer: ReturnType<typeof setTimeout> | undefined;
+
+    function field() {
+        let own = {
+            'aria-label': label,
+            class: 'inline-edit-field',
+            onblur: () => finish(true, false),
+            onconnect: (element: HTMLInputElement | HTMLTextAreaElement) => {
+                element.focus();
+                // Caret at the end, where most edits start.
+                element.setSelectionRange(element.value.length, element.value.length);
+            },
+            oninput: (e: Event) => {
+                local.draft = (e.currentTarget as HTMLInputElement | HTMLTextAreaElement).value;
+            },
+            onkeydown: (e: KeyboardEvent) => {
+                // Shift+Enter still adds a line break to a multiline field.
+                if (e.key === 'Enter' && !(multiline && e.shiftKey)) {
+                    e.preventDefault();
+                    finish(true, true);
+                }
+                else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    finish(false, true);
+                }
+            },
+            placeholder,
+            value: draft
+        };
+
+        if (multiline) {
+            return textarea.bind({ attributes: parts })({ ...own, rows: 1 });
+        }
+
+        return input.call({ attributes: parts }, own);
+    }
+
+    function finish(commit: boolean, keyboard: boolean) {
+        if (!state.editing) {
+            return;
+        }
+
+        state.editing = false;
+
+        // Keyboard exits hand focus back to the text; a click elsewhere keeps focus wherever the click put it.
+        // Deferred until the display is visible again; class updates are batched onto the next frame.
+        if (keyboard) {
+            requestAnimationFrame(() => requestAnimationFrame(() => display?.focus()));
+        }
+
+        let next = multiline ? local.draft.trim() : local.draft.replace(/\s+/g, ' ').trim();
+
+        if (!commit || next === state.value) {
+            return;
+        }
+
+        state.value = next;
+        state.saved = true;
+        onsave?.(next);
+
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            state.saved = false;
+        }, SAVED_FOR);
+    }
+
+    return html`
+        <div
+            class='inline-edit'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                class: [
+                    multiline && 'inline-edit--multiline',
+                    () => state.editing && '--active',
+                    () => state.saved && '--saved',
+                    () => state.value.trim() === '' && '--empty'
+                ],
+                ondisconnect: () => {
+                    clearTimeout(timer);
+                }
+            }}
+        >
+            <button
+                class='inline-edit-display'
+                type='button'
+                ${this?.attributes?.[INLINE_EDIT_DISPLAY]}
+                ${attributes[INLINE_EDIT_DISPLAY]}
+                ${{
+                    onclick: () => {
+                        draft = state.value;
+                        local.draft = draft;
+                        state.editing = true;
+                    },
+                    onrender: (element: HTMLElement) => {
+                        display = element;
+                    }
+                }}
+            >
+                <span class='inline-edit-label'>Edit ${label}: </span>
+                ${() => {
+                    // While editing it mirrors the draft so the cell (and a multiline field) grows with it; the trailing space keeps a new empty line from collapsing.
+                    if (state.editing) {
+                        return `${local.draft} `;
+                    }
+
+                    return state.value.trim() === '' ? placeholder : state.value;
+                }}
+            </button>
+            ${() => state.editing ? field() : ''}
+            <span aria-hidden='true' class='inline-edit-icon'>
+                <svg class='inline-edit-icon-pencil' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
+                    <path d='M9.75 3.75 12.25 6.25M3.25 12.75l.6-2.6 6.9-6.9a1.25 1.25 0 0 1 1.77 0l.73.73a1.25 1.25 0 0 1 0 1.77l-6.9 6.9Z' />
+                </svg>
+                <svg class='inline-edit-icon-check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
+                    <path d='m3.5 8.5 3 3 6-7' />
+                </svg>
+            </span>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { display: INLINE_EDIT_DISPLAY, field: INLINE_EDIT_FIELD } as const);