@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/back-to-top/scss/variables.scss

@@ -0,0 +1,30 @@
+.back-to-top {
+    --background: var(--color-white-300);
+    --box-shadow:
+        0 0 0 var(--border-width-400) 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);
+    --color: var(--color-text-500);
+    --enter-duration: 0.25s;
+    --enter-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --exit-duration: 0.15s;
+    --focus-color: var(--color);
+    --hidden-blur: 4px;
+    --hidden-scale: 0.85;
+    --hover-lift: -2px;
+    --offset: var(--size-500);
+    --pressed-scale: 0.96;
+    --ring-color: var(--color);
+    --ring-width: 1.5;
+    --size: 44px;
+    --track-color: var(--color-border-300);
+    --transition-duration: 0.15s;
+    --transition-timing-function: ease-out;
+    --z-index: 10;
+
+    &--dark {
+        --background: var(--color-text-500);
+        --color: var(--color-white-300);
+        --track-color: oklch(from var(--color-white-300) l c h / 0.2);
+    }
+}

package/src/components/banner/scss/variables.scss

@@ -4,7 +4,7 @@
     }
 
     &--gradient {
-        --from: rgba(3,0,19, 0.32);
+        --from: rgb(3 0 19 / 32%);
         --to: var(--color-black-500);
     }
 }

package/src/components/bento-grid/index.ts

@@ -0,0 +1,63 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type Card = Attributes & {
+    // Decorative art behind the text; it is hidden from assistive tech.
+    background?: Renderable<unknown>;
+    cta?: string;
+    description: string;
+    href?: string;
+    icon?: Renderable<unknown>;
+    name: string;
+    // Columns the card spans once the grid is wide enough for three.
+    span?: 1 | 2 | 3;
+};
+
+
+function arrow() {
+    return html`
+        <svg aria-hidden='true' class='bento-grid-arrow' fill='none' viewBox='0 0 15 15'>
+            <path
+                d='M8.15 3.15a.5.5 0 0 1 .7 0l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7L11.29 8H2.5a.5.5 0 0 1 0-1h8.79L8.15 3.85a.5.5 0 0 1 0-.7Z'
+                fill='currentColor'
+            />
+        </svg>
+    `;
+}
+
+function card({ background, cta = 'Learn more', description, href = '#', icon, name, span = 3, ...attributes }: Card) {
+    return html`
+        <div class='bento-grid-card' style='${`--span: ${span}`}' ${attributes}>
+            <div aria-hidden='true' class='bento-grid-background'>${background}</div>
+            <div class='bento-grid-body'>
+                <div class='bento-grid-content'>
+                    ${icon && html`<span aria-hidden='true' class='bento-grid-icon'>${icon}</span>`}
+                    <h3 class='bento-grid-name'>${name}</h3>
+                    <p class='bento-grid-description'>${description}</p>
+                </div>
+            </div>
+            <div class='bento-grid-cta'>
+                <a class='bento-grid-link' href='${href}'>
+                    ${cta}
+                    ${arrow()}
+                </a>
+            </div>
+            <div aria-hidden='true' class='bento-grid-overlay'></div>
+        </div>
+    `;
+}
+
+
+export default Object.assign(
+    component<Attributes>(
+        function(this, attributes, content) {
+            return html`
+                <div class='bento-grid' ${this?.attributes} ${attributes}>
+                    ${content}
+                </div>
+            `;
+        }
+    ),
+    { card }
+);

package/src/components/bento-grid/scss/index.scss

@@ -0,0 +1,174 @@
+@use 'variables';
+
+// Cards read the grid's width rather than the viewport's, so the layout holds up inside narrow columns and panels.
+.bento-grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--gap);
+    grid-auto-rows: var(--row-height);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    width: 100%;
+
+    &-arrow {
+        flex-shrink: 0;
+        height: 16px;
+        transition: translate var(--duration) var(--ease);
+        width: 16px;
+    }
+
+    &-background {
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+
+        > * {
+            pointer-events: auto;
+        }
+    }
+
+    // Pushed to the bottom, leaving the top of the card to the background art.
+    &-body {
+        margin-top: auto;
+        padding: var(--padding);
+        position: relative;
+        z-index: 1;
+    }
+
+    &-card {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        display: flex;
+        flex-direction: column;
+        grid-column: span 3;
+        justify-content: space-between;
+        overflow: hidden;
+        position: relative;
+    }
+
+    &-content {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        pointer-events: none;
+        transition: translate var(--duration) var(--ease);
+    }
+
+    &-cta {
+        display: flex;
+        padding: 0 var(--padding) var(--padding);
+        position: relative;
+        z-index: 1;
+    }
+
+    &-description {
+        color: var(--description-color);
+        margin: 0;
+        max-width: 32rem;
+    }
+
+    &-icon {
+        color: var(--icon-color);
+        display: flex;
+        height: var(--icon-size);
+        transform-origin: left;
+        transition: scale var(--duration) var(--ease);
+        width: var(--icon-size);
+
+        svg {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    &-link {
+        align-items: center;
+        border-radius: 4px;
+        color: var(--link-color);
+        display: inline-flex;
+        font-size: var(--link-font-size);
+        font-weight: var(--font-weight-500);
+        gap: 8px;
+        outline: 0 solid var(--focus-color);
+        outline-offset: 2px;
+        text-decoration: none;
+        text-underline-offset: 4px;
+
+        &:focus-visible {
+            outline-width: 2px;
+        }
+
+        &:hover {
+            text-decoration: underline;
+
+            .bento-grid-arrow {
+                translate: 2px 0;
+            }
+        }
+    }
+
+    &-name {
+        color: var(--name-color);
+        font-size: var(--name-font-size);
+        font-weight: var(--font-weight-600);
+        margin: 0;
+    }
+
+    &-overlay {
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: background-color var(--duration) var(--ease);
+    }
+
+    &-card:hover &-overlay {
+        background: var(--overlay-hover);
+    }
+
+    &-card:hover &-icon,
+    &-card:focus-within &-icon {
+        scale: 0.75;
+    }
+
+    // Wide enough for columns: the call to action waits below the card and the text lifts to make room for it.
+    @container (min-width: 720px) {
+        &-card {
+            grid-column: span var(--span);
+        }
+
+        &-cta {
+            bottom: 0;
+            inset-inline: 0;
+            opacity: 0;
+            padding: var(--padding);
+            position: absolute;
+            transition:
+                opacity var(--duration) var(--ease),
+                translate var(--duration) var(--ease);
+            translate: 0 40px;
+        }
+
+        &-card:hover &-content,
+        &-card:focus-within &-content {
+            translate: 0 -40px;
+        }
+
+        &-card:hover &-cta,
+        &-card:focus-within &-cta {
+            opacity: 1;
+            translate: 0 0;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-arrow,
+        &-content,
+        &-icon {
+            transition: none;
+        }
+
+        &-cta {
+            translate: 0 0 !important;
+        }
+    }
+}

package/src/components/bento-grid/scss/variables.scss

@@ -0,0 +1,19 @@
+.bento-grid {
+    --background: var(--color-white-300);
+    --border-radius: 12px;
+    --box-shadow: 0 0 0 1px oklch(from var(--color-black-300) l c h / 0.03), 0 2px 4px oklch(from var(--color-black-300) l c h / 0.05), 0 12px 24px oklch(from var(--color-black-300) l c h / 0.05);
+    --description-color: var(--color-text-300);
+    --duration: 300ms;
+    --ease: cubic-bezier(0.4, 0, 0.2, 1);
+    --focus-color: oklch(from var(--color-text-500) l c h / 0.38);
+    --gap: 16px;
+    --icon-color: var(--color-text-400);
+    --icon-size: 48px;
+    --link-color: var(--color-text-500);
+    --link-font-size: calc(var(--font-size-400) * 0.875);
+    --name-color: var(--color-text-400);
+    --name-font-size: var(--font-size-500);
+    --overlay-hover: oklch(from var(--color-black-300) l c h / 0.03);
+    --padding: 16px;
+    --row-height: 22rem;
+}

package/src/components/bento-grid-spotlight/index.ts

@@ -0,0 +1,133 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type Card = Attributes & {
+    // Decorative art behind the content; it brightens on hover.
+    background?: Renderable<unknown>;
+    // A slow light that circles the border, brightening on hover.
+    beam?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    description?: Renderable<unknown>;
+    icon?: Renderable<unknown>;
+    rows?: 1 | 2 | 3;
+    // A soft glow that follows the pointer.
+    spotlight?: boolean;
+    // Leans the card toward the pointer.
+    tilt?: boolean;
+    title?: Renderable<unknown>;
+};
+
+
+// Degrees the card leans at its edges.
+const TILT = 5;
+
+// Pointer distance from the centre, in px, that reaches the full lean.
+const TILT_RANGE = 150;
+
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(max, Math.max(min, value));
+}
+
+
+const card = component<Card>(
+    function(this, { background, beam = true, columns = 1, description, icon, rows = 1, spotlight = true, tilt = false, title, ...attributes }, content) {
+        let footer = title || description || icon;
+
+        return html`
+            <div
+                class='bento-grid-spotlight-card ${tilt && '--tilt'}'
+                style='${`--columns: ${columns}; --rows: ${rows};`}'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    onpointerleave: function(this: HTMLElement) {
+                        this.style.setProperty('--tilt-x', '0deg');
+                        this.style.setProperty('--tilt-y', '0deg');
+                    },
+                    onpointermove: function(this: HTMLElement, event: PointerEvent) {
+                        let rect = this.getBoundingClientRect(),
+                            x = event.clientX - rect.left,
+                            y = event.clientY - rect.top;
+
+                        // Written straight to the element; a reactive style binding would lag a frame behind the pointer.
+                        this.style.setProperty('--spot-x', `${x}px`);
+                        this.style.setProperty('--spot-y', `${y}px`);
+
+                        if (tilt) {
+                            this.style.setProperty('--tilt-x', `${clamp((y - rect.height / 2) / TILT_RANGE, -1, 1) * -TILT}deg`);
+                            this.style.setProperty('--tilt-y', `${clamp((x - rect.width / 2) / TILT_RANGE, -1, 1) * TILT}deg`);
+                        }
+                    }
+                }}
+            >
+                ${spotlight && html`<div aria-hidden='true' class='bento-grid-spotlight-glow'></div>`}
+                ${beam && html`
+                    <div aria-hidden='true' class='bento-grid-spotlight-beam'>
+                        <div class='bento-grid-spotlight-beam-light'></div>
+                    </div>
+                `}
+                ${background && html`<div aria-hidden='true' class='bento-grid-spotlight-background'>${background}</div>`}
+
+                <div class='bento-grid-spotlight-body'>
+                    <div class='bento-grid-spotlight-visual'>${content}</div>
+
+                    ${footer && html`
+                        <div class='bento-grid-spotlight-footer'>
+                            ${icon && html`<div aria-hidden='true' class='bento-grid-spotlight-icon'>${icon}</div>`}
+                            <div>
+                                ${title && html`<h3 class='bento-grid-spotlight-title'>${title}</h3>`}
+                                ${description && html`<p class='bento-grid-spotlight-description'>${description}</p>`}
+                            </div>
+                        </div>
+                    `}
+                </div>
+            </div>
+        `;
+    }
+);
+
+
+export default Object.assign(
+    component<Attributes>(
+        function(this, attributes, content) {
+            let observer: IntersectionObserver | undefined,
+                ui = reactive({ visible: false });
+
+            return html`
+                <div
+                    class='bento-grid-spotlight'
+                    ${this?.attributes}
+                    ${attributes}
+                    ${{
+                        class: () => ui.visible && '--visible',
+                        onconnect: (element: HTMLElement) => {
+                            let children = element.firstElementChild!.children;
+
+                            // Cards rise in one after another in source order.
+                            for (let i = 0, n = children.length; i < n; i++) {
+                                (children[i] as HTMLElement).style.setProperty('--i', String(i));
+                            }
+
+                            observer = new IntersectionObserver((entries) => {
+                                if (entries.some((entry) => entry.isIntersecting)) {
+                                    ui.visible = true;
+                                    observer?.disconnect();
+                                }
+                            }, { rootMargin: '-50px' });
+                            observer.observe(element);
+                        },
+                        ondisconnect: () => {
+                            observer?.disconnect();
+                        }
+                    }}
+                >
+                    <div class='bento-grid-spotlight-grid'>${content}</div>
+                </div>
+            `;
+        }
+    ),
+    { card }
+);

package/src/components/bento-grid-spotlight/scss/index.scss

@@ -0,0 +1,226 @@
+@use 'variables';
+
+// Columns follow the component's own width, so the layout adapts inside panels and not only to the viewport.
+.bento-grid-spotlight {
+    container-type: inline-size;
+    margin-inline: auto;
+    max-width: var(--max-width);
+    width: 100%;
+
+    &-background {
+        inset: 0;
+        opacity: 0.5;
+        position: absolute;
+        transition: opacity var(--duration) ease;
+        z-index: 0;
+    }
+
+    // Only a ring the width of the border shows, so the rotating light reads as travelling around the edge.
+    &-beam {
+        border-radius: inherit;
+        inset: 0;
+        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+        mask-composite: exclude;
+        overflow: hidden;
+        padding: var(--beam-width);
+        pointer-events: none;
+        position: absolute;
+        z-index: 0;
+
+        &-light {
+            animation: bento-grid-spotlight-beam var(--beam-duration) linear infinite;
+            aspect-ratio: 1;
+            background: conic-gradient(from 0deg, var(--beam-from) 0%, var(--beam-to) 50%, var(--beam-from) 100%);
+            left: 50%;
+            opacity: 0.3;
+            position: absolute;
+            top: 50%;
+            transition: opacity var(--duration) ease;
+            translate: -50% -50%;
+            width: 250%;
+        }
+    }
+
+    &-body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: space-between;
+        padding: var(--padding);
+        position: relative;
+        z-index: 1;
+    }
+
+    &-card {
+        background: var(--background);
+        border: 1px solid var(--border-color);
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        display: flex;
+        flex-direction: column;
+        grid-row: span var(--rows);
+        overflow: hidden;
+        position: relative;
+        transition:
+            box-shadow var(--duration) ease,
+            scale var(--hover-duration) var(--hover-ease),
+            transform var(--tilt-duration) var(--tilt-ease),
+            translate var(--hover-duration) var(--hover-ease);
+
+        &.--tilt {
+            transform: perspective(var(--perspective)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
+        }
+
+        &:hover {
+            box-shadow: var(--box-shadow-hover);
+            scale: var(--hover-scale);
+            translate: 0 var(--hover-lift);
+
+            .bento-grid-spotlight-background,
+            .bento-grid-spotlight-glow,
+            .bento-grid-spotlight-beam-light {
+                opacity: 1;
+            }
+        }
+
+        &:active {
+            scale: var(--press-scale);
+        }
+    }
+
+    &-description {
+        color: var(--description-color);
+        font-size: var(--description-font-size);
+        margin: 4px 0 0;
+    }
+
+    &-footer {
+        align-items: flex-start;
+        display: flex;
+        gap: 16px;
+    }
+
+    &-visual:not(:empty) + &-footer {
+        margin-top: 24px;
+    }
+
+    &-glow {
+        background: radial-gradient(
+            var(--spotlight-size) circle at var(--spot-x, 50%) var(--spot-y, 50%),
+            var(--spotlight-color),
+            transparent 80%
+        );
+        inset: -1px;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity var(--duration) ease;
+        z-index: 0;
+    }
+
+    &-grid {
+        display: grid;
+        gap: var(--gap);
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    &-icon {
+        align-items: center;
+        background: var(--icon-background);
+        border-radius: 12px;
+        color: var(--title-color);
+        display: flex;
+        flex-shrink: 0;
+        height: 40px;
+        justify-content: center;
+        width: 40px;
+
+        svg {
+            height: 20px;
+            width: 20px;
+        }
+    }
+
+    &-title {
+        color: var(--title-color);
+        font-size: var(--title-font-size);
+        font-weight: var(--font-weight-500);
+        letter-spacing: -0.02em;
+        margin: 0;
+    }
+
+    &-visual {
+        flex: 1;
+        min-height: 0;
+    }
+
+    // Cards wait unseen until the grid scrolls in, then rise into place one after another on a spring.
+    &:not(.--visible) &-card {
+        opacity: 0;
+    }
+
+    &.--visible &-card {
+        animation: bento-grid-spotlight-enter var(--enter-duration) var(--enter-ease) backwards;
+        animation-delay: calc(var(--i, 0) * var(--enter-stagger));
+    }
+
+    @container (min-width: 560px) {
+        &-grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        &-card {
+            grid-column: span min(var(--columns), 2);
+        }
+    }
+
+    @container (min-width: 900px) {
+        &-grid {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        &-card {
+            grid-column: span var(--columns);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-beam-light {
+            animation: none;
+        }
+
+        &-card {
+            transition: box-shadow var(--duration) ease;
+
+            &,
+            &:active,
+            &:hover {
+                scale: 1;
+                transform: none;
+                translate: 0 0;
+            }
+        }
+
+        &:not(.--visible) &-card {
+            opacity: 1;
+        }
+
+        &.--visible &-card {
+            animation: none;
+        }
+    }
+}
+
+@keyframes bento-grid-spotlight-beam {
+    to {
+        rotate: 360deg;
+    }
+}
+
+@keyframes bento-grid-spotlight-enter {
+    from {
+        opacity: 0;
+        scale: 0.98;
+        translate: 0 12px;
+    }
+}

package/src/components/bento-grid-spotlight/scss/variables.scss

@@ -0,0 +1,36 @@
+.bento-grid-spotlight {
+    --background: var(--color-grey-300);
+    --beam-duration: 8s;
+    --beam-from: oklch(70.8% 0 0 / 0);
+    --beam-to: oklch(70.8% 0 0 / 0.4);
+    --beam-width: 1.5px;
+    --border-color: var(--color-border-300);
+    --border-radius: 16px;
+    --box-shadow: 0 1px 2px oklch(from var(--color-black-300) l c h / 0.05);
+    --box-shadow-hover: 0 10px 15px -3px oklch(from var(--color-border-300) l c h / 0.5), 0 4px 6px -4px oklch(from var(--color-border-300) l c h / 0.5);
+    --description-color: var(--color-text-300);
+    --description-font-size: calc(var(--font-size-400) * 0.875);
+    --duration: 300ms;
+    --enter-duration: 700ms;
+    // Spring (stiffness 260, damping 20): a small overshoot as each card lands.
+    --enter-ease: linear(0, 0.066, 0.211, 0.388, 0.574, 0.733, 0.862, 0.958, 1.025, 1.063, 1.079, 1.081, 1.073, 1.06, 1.045, 1.031, 1.018, 1.008, 1.001, 0.997, 0.994, 0.993, 0.994, 0.994, 0.996, 0.997, 0.998, 0.999, 1, 1, 1);
+    --enter-stagger: 100ms;
+    --gap: 24px;
+    --hover-duration: 570ms;
+    // Spring (stiffness 400, damping 25): quick and tactile.
+    --hover-ease: linear(0, 0.065, 0.212, 0.394, 0.575, 0.736, 0.866, 0.962, 1.025, 1.062, 1.077, 1.078, 1.069, 1.056, 1.041, 1.028, 1.017, 1.007, 1.001, 0.997, 0.995, 0.994, 0.994, 0.995, 0.996, 0.997, 0.998, 0.999, 1, 1, 1);
+    --hover-lift: -4px;
+    --hover-scale: 1.01;
+    --icon-background: oklch(from var(--color-border-300) l c h / 0.5);
+    --max-width: 80rem;
+    --padding: 20px;
+    --perspective: 1000px;
+    --press-scale: 0.98;
+    --spotlight-color: oklch(from var(--color-black-300) l c h / 0.05);
+    --spotlight-size: 350px;
+    --tilt-duration: 540ms;
+    // Spring (stiffness 300, damping 30): follows the pointer without wobbling.
+    --tilt-ease: linear(0, 0.043, 0.14, 0.261, 0.387, 0.505, 0.611, 0.702, 0.777, 0.837, 0.881, 0.918, 0.945, 0.965, 0.979, 0.989, 0.995, 0.999, 1.002, 1.003, 1.004, 1.004, 1.003, 1.003, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1);
+    --title-color: var(--color-text-500);
+    --title-font-size: calc(var(--font-size-400) * 1.125);
+}