@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/pagination/cards.ts

@@ -0,0 +1,57 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import icon from '~/components/icon';
+import next from '@esportsplus/ui/svg/chevron-right.svg';
+import previous from '@esportsplus/ui/svg/chevron-left.svg';
+import type { Link } from './arrows';
+import '~/components/card/scss/index.scss';
+
+
+const PAGINATION_CARD = Symbol.for('@esportsplus/ui/pagination.cards.card');
+
+const PAGINATION_CARD_SUBTITLE = Symbol.for('@esportsplus/ui/pagination.cards.subtitle');
+
+const PAGINATION_CARD_TITLE = Symbol.for('@esportsplus/ui/pagination.cards.title');
+
+
+type A = Attributes & {
+    [PAGINATION_CARD]?: Attributes;
+    [PAGINATION_CARD_SUBTITLE]?: Attributes;
+    [PAGINATION_CARD_TITLE]?: Attributes;
+    'aria-label'?: string;
+    next?: Link;
+    previous?: Link;
+    // A soft halo around the card on hover and focus.
+    ring?: boolean;
+    // Lifts the card 1px on hover and focus and sinks it 1px below rest while pressed.
+    tactile?: boolean;
+};
+
+
+function card(attributes: A, direction: 'next' | 'previous', link: Link) {
+    let arrow = icon({ 'aria-hidden': 'true', class: 'pagination-card-arrow' }, direction === 'next' ? next : previous);
+
+    return html`
+        <a
+            class='card pagination-card pagination-card--${direction} ${attributes.ring && 'card--ring'} ${attributes.tactile && 'pagination-card--tactile'}'
+            href='${link.href}'
+            rel='${direction === 'next' ? 'next' : 'prev'}'
+            ${attributes[PAGINATION_CARD]}
+        >
+            ${direction === 'previous' && arrow}
+            <span class='pagination-card-title' ${attributes[PAGINATION_CARD_TITLE]}>${link.title}</span>
+            <span class='pagination-card-subtitle' ${attributes[PAGINATION_CARD_SUBTITLE]}>${link.label ?? (direction === 'next' ? 'Next' : 'Previous')}</span>
+            ${direction === 'next' && arrow}
+        </a>
+    `;
+}
+
+
+export default component(
+    ({ 'aria-label': label = 'Pagination', next, previous, ring, tactile, ...attributes }: A) => (next || previous) && html`
+        <nav aria-label='${label}' class='pagination pagination--cards' ${attributes}>
+            ${previous && card({ ...attributes, ring, tactile }, 'previous', previous)}
+            ${next && card({ ...attributes, ring, tactile }, 'next', next)}
+        </nav>
+    `,
+    { card: PAGINATION_CARD, subtitle: PAGINATION_CARD_SUBTITLE, title: PAGINATION_CARD_TITLE }
+);

package/src/components/pagination/index.ts

@@ -3,6 +3,8 @@ import { effect, reactive } from '@esportsplus/reactivity';
 import icon from '~/components/icon';
 import next from '@esportsplus/ui/svg/arrow-right.svg';
 import previous from '@esportsplus/ui/svg/arrow-left.svg';
+import arrows from './arrows';
+import cards from './cards';
 import dots from './dots';
 import '~/components/button/scss/index.scss';
 import './scss/index.scss';
@@ -112,7 +114,8 @@ const plain = ({ onchange, siblings = 1, state: api = reactive({ page: 1 }), tot
     `;
 };
 
-const pagination: typeof plain & { dots: typeof dots } = Object.assign(plain, { dots });
+const pagination: typeof plain & { arrows: typeof arrows, cards: typeof cards, dots: typeof dots } = Object.assign(plain, { arrows, cards, dots });
 
 
 export default pagination;
+export type { Link as PaginationLink } from './arrows';

package/src/components/pagination/scss/_arrows.scss

@@ -0,0 +1,69 @@
+@use '/tokens';
+@use 'css-utilities/background';
+@use 'css-utilities/surface';
+@use 'variables';
+
+.pagination {
+    // Qualified by the root so it wins over the base row's full width, which is output after this partial.
+    &#{&}--arrows {
+        flex: none;
+        gap: var(--gap);
+        justify-content: flex-start;
+        width: auto;
+    }
+
+    &-arrow {
+        @extend %background-state, %surface-raised-level;
+        // A surface a level above what holds it. The fallbacks resolve here, on the arrow's own level; a value set on
+        // the parent would resolve at the parent's.
+        --background-default: var(--arrow-background, var(--surface-background-default));
+        --background-hover: var(--arrow-background-hover, var(--surface-background-hover));
+        --background-pressed: var(--arrow-background-pressed, var(--surface-background-pressed));
+        align-items: center;
+        background: var(--background);
+        border: 0;
+        border-radius: var(--arrow-border-radius);
+        color: var(--arrow-color);
+        cursor: pointer;
+        display: inline-flex;
+        flex: none;
+        height: var(--arrow-size);
+        justify-content: center;
+        outline: none;
+        padding: 0;
+        transition: background-color var(--transition-duration) var(--transition-timing-function);
+        width: var(--arrow-size);
+
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--size-100) / 4);
+        }
+
+        // Touch leaves no hover fill behind a tap.
+        @media (hover: none) {
+            --background-hover: var(--background-default);
+        }
+
+        @include tokens.state(disabled) {
+            --background-hover: var(--background-default);
+            --background-pressed: var(--background-default);
+            cursor: default;
+            opacity: var(--disabled-opacity);
+        }
+
+        // Qualified by the button so it wins over the icon's own variables regardless of stylesheet order. The arrow
+        // glyphs sit a quarter of their box off centre, toward their tail; pulling that back centres them.
+        & &-icon {
+            --color: currentColor;
+            --size: var(--icon-size);
+        }
+
+        &--next &-icon {
+            margin-right: calc(var(--icon-size) / -4);
+        }
+
+        &--previous &-icon {
+            margin-left: calc(var(--icon-size) / -4);
+        }
+    }
+}

package/src/components/pagination/scss/_cards.scss

@@ -0,0 +1,121 @@
+@use 'css-utilities/color';
+@use 'variables';
+
+.pagination {
+    // Qualified by the root so it wins over the base flex row, which is output after this partial.
+    &#{&}--cards {
+        align-items: stretch;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+
+        @media (max-width: 560px) {
+            grid-template-columns: minmax(0, 1fr);
+        }
+    }
+
+    &-card {
+        @extend %color-state;
+        color: var(--color);
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+        min-width: 0;
+        outline: none;
+        text-decoration: none;
+
+        // Qualified by the card so it wins over the icon's own variables and position regardless of stylesheet order.
+        // Placed by where it sits in its card rather than which card it is, so a lone card keeps its arrow on its side.
+        & &-arrow {
+            --size: var(--icon-size);
+            position: absolute;
+            top: 50%;
+            transition:
+                color var(--transition-duration) var(--transition-timing-function),
+                translate var(--transition-duration) var(--transition-timing-function);
+            translate: var(--arrow-offset, 0) -50%;
+
+            &:first-child {
+                left: var(--arrow-inset);
+            }
+
+            &:last-child {
+                right: var(--arrow-inset);
+            }
+        }
+
+        // Each card's text leans toward the middle, away from its arrow on the outer edge. Held in the second column
+        // alone too, so a lone next card still sits on the right.
+        &--next {
+            align-items: flex-end;
+            grid-column: 2;
+            text-align: end;
+
+            @media (max-width: 560px) {
+                grid-column: auto;
+            }
+        }
+
+        &--previous {
+            align-items: flex-start;
+            text-align: start;
+        }
+
+        // Pressing sinks the card below where it rests, not just back to it. The shadow steps with the card's state;
+        // keyboard focus lifts it as hover does.
+        &--tactile {
+            &:active {
+                transform: translateY(1px);
+            }
+
+            &:focus-visible {
+                --box-shadow: var(--box-shadow-hover);
+            }
+
+            &:focus-visible,
+            &:hover {
+                transform: translateY(-1px);
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                transform: none !important;
+            }
+        }
+
+        &-subtitle {
+            color: var(--color);
+            font-size: var(--font-size);
+            transition: color var(--transition-duration) var(--transition-timing-function);
+        }
+
+        &-title {
+            color: var(--color);
+            font-size: var(--font-size);
+            font-weight: var(--font-weight);
+            overflow-wrap: anywhere;
+            text-transform: capitalize;
+            transition: color var(--transition-duration) var(--transition-timing-function);
+        }
+
+        // Shares the hover color with keyboard focus, which the shared color state leaves out.
+        &:focus-visible {
+            --color: var(--color-hover);
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: calc(var(--size-100) / 4);
+        }
+
+        // Nudges the arrow the way it points, so the card reads as the way to go.
+        &:focus-visible,
+        &:hover {
+            --arrow-offset: calc(var(--arrow-shift) * var(--direction));
+        }
+
+        // Clears the text from whichever edge holds the arrow, on top of the card's own padding.
+        &:has(> .pagination-card-arrow:first-child) {
+            padding-left: calc(var(--arrow-inset) + var(--icon-size) + var(--arrow-gap));
+        }
+
+        &:has(> .pagination-card-arrow:last-child) {
+            padding-right: calc(var(--arrow-inset) + var(--icon-size) + var(--arrow-gap));
+        }
+    }
+}

package/src/components/pagination/scss/_dots.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/absolute';
 @use 'variables';
 
 .pagination {
@@ -36,10 +36,7 @@
         background: var(--dot-color);
         border-radius: 999px;
         height: var(--dot-size);
-        scale: var(--mark-scale);
-        transition:
-            background-color var(--transition-duration) var(--transition-timing-function),
-            scale var(--transition-duration) var(--transition-timing-function);
+        transition: background-color var(--transition-duration) var(--transition-timing-function);
         width: 100%;
     }
 

package/src/components/pagination/scss/index.scss

@@ -1,4 +1,6 @@
 @use '/tokens';
+@use 'arrows';
+@use 'cards';
 @use 'dots';
 @use 'variables';
 
@@ -20,12 +22,6 @@
         width: calc((var(--count) - 1) * var(--step) + var(--pill-width));
     }
 
-    &-control,
-    &-page {
-        border: var(--border-width) solid var(--border-color);
-        height: var(--size);
-    }
-
     &-control {
         gap: var(--size-100);
 
@@ -35,6 +31,12 @@
         }
     }
 
+    &-control,
+    &-page {
+        border: var(--border-width) solid var(--border-color);
+        height: var(--size);
+    }
+
     &-page {
         font-variant: tabular-nums;
         min-width: var(--size);

package/src/components/pagination/scss/variables.scss

@@ -1,42 +1,106 @@
-@use '/tokens';
-
 .pagination {
     --gap: var(--size-300);
     --size: 32px;
 
+    &--arrows {
+        --arrow-border-radius: var(--border-radius-400);
+        --arrow-color: var(--color-text-500);
+        --arrow-size: var(--size-600);
+        --disabled-opacity: 0.4;
+        --focus-color: var(--color-primary-500);
+        --focus-width: var(--border-width-500);
+        --gap: var(--size-100);
+        --icon-size: var(--size-400);
+    }
+
     &--dots {
         --color: var(--color-text-500);
         --dot-color: oklch(from var(--color) l c h / 0.2);
         --dot-color-hover: oklch(from var(--color) l c h / 0.35);
-        --dot-gap: 6px;
+        --dot-gap: calc(var(--size-300) / 2);
         --dot-size: 6px;
         --focus-color: var(--color);
         --height: 32px;
         --pill-color: var(--color);
-        --pill-width: 20px;
-        --pressed-scale: 0.96;
+        --pill-width: var(--size-500);
         --step: calc(var(--dot-size) + var(--dot-gap));
         --track-color: var(--pill-color);
-        --transition-duration: 0.15s;
-        --transition-timing-function: ease-out;
+
+        // Twice the dots' tint, so the pill still reads as the active slot before its countdown fills it.
+        &-autoplay {
+            --track-color: oklch(from var(--pill-color) l c h / 0.4);
+        }
+
+        &-large {
+            --dot-gap: var(--size-100);
+            --dot-size: var(--size-100);
+            --pill-width: 28px;
+        }
     }
 
-    // Twice the dots' tint, so the pill still reads as the active slot before its countdown fills it.
-    &--dots-autoplay {
-        --track-color: oklch(from var(--pill-color) l c h / 0.4);
+    &-card {
+        --arrow-gap: var(--size-300);
+        // The card's content edge, as the card insets it inside its border. Resolved here, so the arrow inherits the
+        // card's padding rather than its own.
+        --arrow-inset: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+        --arrow-shift: 0px;
+        // A card, so a surface: its own level's background, filling toward the text as it's hovered and pressed.
+        --background-default: var(--surface-background-default);
+        --background-hover: var(--surface-background-hover);
+        --background-pressed: var(--surface-background-pressed);
+        --border-color-default: var(--surface-border-default);
+        --border-radius: var(--border-radius-600);
+        --border-width: var(--border-width-400);
+        --color-default: var(--color-text-300);
+        --color-hover: var(--color-text-400);
+        --color-pressed: var(--color-text-500);
+        --focus-color: var(--color-primary-500);
+        --focus-width: var(--border-width-500);
+        --gap-vertical: 0px;
+        --icon-size: var(--size-400);
+        --padding-horizontal: var(--size-400);
+        --padding-vertical: var(--size-400);
+
+
+        &--next {
+            --direction: 1;
+        }
+
+        &--previous {
+            --direction: -1;
+        }
+
+        &--tactile {
+            --box-shadow-hover: var(--surface-shadow-hover);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            --arrow-shift: 0px;
+        }
+
+        &-subtitle {
+            --color: var(--color-text-300);
+            --font-size: var(--font-size-300);
+        }
+
+        &-title {
+            --font-size: var(--font-size-400);
+            --font-weight: var(--font-weight-500);
+        }
     }
 
-    &--dots-large {
-        --dot-gap: 8px;
-        --dot-size: 8px;
-        --pill-width: 28px;
+    // Buttons, so surfaces: their own level's background and shadow.
+    &-control {
+        --background-default: var(--surface-background-default);
+        --box-shadow-default: var(--surface-shadow-default);
+        --color-default: var(--color-text-500);
     }
 
     &-control,
     &-page {
-        --background-hover: var(--color-grey-400);
-        --background-pressed: var(--color-grey-500);
-        --border-color-default: var(--color-border-300);
+        --background-hover: var(--surface-background-hover);
+        --background-pressed: var(--surface-background-pressed);
+        --border-color-default: var(--surface-border-default);
         --border-radius: var(--border-radius-400);
         --border-width: var(--border-width-400);
         --color-default: var(--color-text-300);
@@ -48,20 +112,9 @@
         --width: auto;
     }
 
-    &-control {
-        --background-default: var(--color-white-300);
-        --box-shadow-default: var(--box-shadow-100);
-        --color-default: var(--color-text-500);
-    }
-
     &-dot {
-        --mark-scale: none;
         --near: clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1);
 
-        &:active {
-            --mark-scale: var(--pressed-scale);
-        }
-
         @media (hover: hover) {
             &:hover {
                 --dot-color: var(--dot-color-hover);
@@ -70,16 +123,13 @@
     }
 
     &-page {
-        --background-active: var(--color-white-300);
-        --border-color-active: var(--color-border-300);
+        --background-active: var(--surface-background-default);
+        --border-color-active: var(--surface-border-default);
         --border-color-default: transparent;
+        --box-shadow-active: var(--surface-shadow-default);
         --color-active: var(--color-text-500);
         --padding-horizontal: 0px;
 
-        @include tokens.state(active) {
-            --box-shadow: var(--box-shadow-100);
-        }
-
         &--dots {
             --background-hover: transparent;
             --background-pressed: transparent;
@@ -90,10 +140,10 @@
     // The leading edge travels in the first 60% of the move and the trailing edge in the last 60%.
     &-pill {
         --k: clamp(0, round(down, var(--progress), 1), max(var(--count) - 2, 0));
-        --t: clamp(0, var(--progress) - var(--k), 1);
-        --lead-t: clamp(0, var(--t) / 0.6, 1);
-        --trail-t: clamp(0, (var(--t) - 0.4) / 0.6, 1);
         --lead: calc(var(--lead-t) * var(--lead-t) * (3 - 2 * var(--lead-t)));
+        --lead-t: clamp(0, var(--t) / 0.6, 1);
+        --t: clamp(0, var(--progress) - var(--k), 1);
         --trail: calc(var(--trail-t) * var(--trail-t) * (3 - 2 * var(--trail-t)));
+        --trail-t: clamp(0, (var(--t) - 0.4) / 0.6, 1);
     }
 }

package/src/components/progress/scss/_text.scss

@@ -1,4 +1,7 @@
-@use '/shared';
+@use 'css-utilities/absolute';
+@use 'css-utilities/hidden';
+@use 'css-utilities/icon';
+
 
 // Every part is exactly one line tall, so centring lines them up; baseline alignment breaks on the clipped digit
 // columns.
@@ -26,15 +29,15 @@
     &-done {
         align-items: center;
         display: flex;
-        filter: blur(4px);
+        filter: blur(var(--blur-400));
         gap: var(--done-gap);
         grid-area: 1 / 1;
         opacity: 0;
         pointer-events: none;
         transition:
-            filter 150ms var(--ease-out),
-            opacity 150ms var(--ease-out),
-            translate 150ms var(--ease-out);
+            filter var(--duration-fast) var(--ease-out),
+            opacity var(--duration-fast) var(--ease-out),
+            translate var(--duration-fast) var(--ease-out);
         translate: 0 4px;
         white-space: nowrap;
 
@@ -43,9 +46,9 @@
             opacity: 1;
             pointer-events: auto;
             transition:
-                filter 300ms var(--ease-out) 100ms,
-                opacity 300ms var(--ease-out) 100ms,
-                translate 300ms var(--ease-out) 100ms;
+                filter var(--duration-moderate) var(--ease-out) 100ms,
+                opacity var(--duration-moderate) var(--ease-out) 100ms,
+                translate var(--duration-moderate) var(--ease-out) 100ms;
             translate: 0 0;
         }
     }
@@ -58,15 +61,15 @@
         grid-area: 1 / 1;
         position: relative;
         transition:
-            filter 300ms var(--ease-out),
-            opacity 300ms var(--ease-out),
-            translate 300ms var(--ease-out);
+            filter var(--duration-moderate) var(--ease-out),
+            opacity var(--duration-moderate) var(--ease-out),
+            translate var(--duration-moderate) var(--ease-out);
         white-space: nowrap;
 
         &.--done {
-            filter: blur(4px);
+            filter: blur(var(--blur-400));
             opacity: 0;
-            transition-duration: 200ms;
+            transition-duration: var(--duration-moderate);
             translate: 0 -4px;
         }
     }
@@ -80,13 +83,13 @@
         display: flex;
         font-variant-numeric: tabular-nums;
         transition:
-            filter 300ms var(--ease-out),
-            opacity 300ms var(--ease-out);
+            filter var(--duration-moderate) var(--ease-out),
+            opacity var(--duration-moderate) var(--ease-out);
 
         &.--done {
-            filter: blur(4px);
+            filter: blur(var(--blur-400));
             opacity: 0;
-            transition-duration: 200ms;
+            transition-duration: var(--duration-moderate);
         }
     }
 
@@ -106,7 +109,7 @@
         @extend %absolute-top;
         display: flex;
         flex-direction: column;
-        transition: translate 300ms var(--ease-out);
+        transition: translate var(--duration-moderate) var(--ease-out);
         white-space: pre;
 
         span {

package/src/components/progress/scss/index.scss

@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: column;
     font-size: var(--font-size);
-    gap: 8px;
+    gap: var(--size-100);
     width: 100%;
 
     &-header {

package/src/components/progress/scss/variables.scss

@@ -1,13 +1,13 @@
 .progress {
     --color: var(--color-text-500);
-    --duration: 150ms;
+    --duration: var(--duration-fast);
     --ease: cubic-bezier(0.4, 0, 0.2, 1);
     --font-size: calc(var(--font-size-400) * 0.875);
     --height: 6px;
-    --indicator-color: var(--color-text-500);
+    --indicator-color: var(--color-primary-500);
     --muted-color: var(--color-text-300);
-    --status-font-size: 12px;
-    --track-color: var(--color-grey-500);
+    --status-font-size: var(--font-size-300);
+    --track-color: var(--surface-border-default);
 }
 
 
@@ -15,19 +15,19 @@
     // The check undraws at once; 'progress-text--done' draws it in.
     --check-duration: 0s;
     --check-offset: 1;
-    --check-size: 16px;
+    --check-size: var(--size-400);
     --color: var(--color-text-500);
-    --done-gap: 6px;
+    --done-gap: calc(var(--size-300) / 2);
     --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-out: var(--easing-out);
     --font-size: var(--font-size-400);
     --font-weight: var(--font-weight-500);
     --muted-color: var(--color-text-300);
-    --part-gap: 10px;
+    --part-gap: var(--size-200);
     --part-height: 24px;
     // Read by JS: about how long the ink takes to pour to a new value.
-    --pour-duration: 0.4s;
-    --track-color: oklch(from var(--color-text-500) l c h / 0.2);
+    --pour-duration: var(--duration-slow);
+    --track-color: var(--surface-border-hover);
 
     @media (prefers-reduced-motion: reduce) {
         --pour-duration: 0s;
@@ -39,13 +39,13 @@
     }
 
     &--done {
-        --check-duration: 300ms;
+        --check-duration: var(--duration-moderate);
         --check-offset: 0;
     }
 
     &--large {
         --check-size: 22px;
-        --done-gap: 8px;
+        --done-gap: var(--size-100);
         --font-size: var(--font-size-600);
         --part-gap: 14px;
         --part-height: 32px;

package/src/components/pull-to-refresh/scss/index.scss

@@ -1,4 +1,5 @@
-@use '/shared';
+@use 'css-utilities/absolute';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 // JS writes only '--pull-to-refresh-y' (feed offset in px, unitless) and '--threshold' (px to pull before letting go