@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/overlay/scss/index.scss

@@ -1,59 +1,50 @@
-@use '/shared';
+@use 'sass:list';
 @use '/tokens';
+@use 'css-utilities/anchor';
+@use 'css-utilities/surface';
 @use 'variables';
 
-// Zero specificity so paired classes (e.g. '.card') still win over the dialog UA reset.
-:where(dialog.overlay) {
-    background: transparent;
-    border: 0;
-    color: inherit;
-    inset: 0;
-    max-height: calc(100% - (var(--margin-vertical) * 2));
-    max-width: 100%;
-    padding: 0;
-    // Only non-modal overlays stay out of the top layer and need it.
-    z-index: 9;
-}
 
-// Outranks pairings like '.card { position: relative }'. Modal overlays pin to the viewport; non-modal ones
-// sit in their positioned container, which may be the viewport too via an inline 'position: fixed'.
-dialog.overlay {
-    position: fixed;
+// How far the edge fill reaches past each placement's sides, top, right, bottom and left.
+$edge-fill: (
+    e: (0 50vw 0 0),
+    n: (50vh 0 0 0),
+    ne: (50vh 50vw 0 0),
+    nw: (50vh 0 0 50vw),
+    s: (0 0 50vh 0),
+    se: (0 50vw 50vh 0),
+    sw: (0 0 50vh 50vw),
+    w: (0 0 0 50vw)
+);
 
-    &:not(:modal) {
-        position: absolute;
-    }
 
-    // A flow overlay occupies a row in its parent instead of covering that parent's content.
-    &.overlay--flow:not(:modal) {
-        align-self: start;
-        inset: auto;
-        margin: 0;
-        max-height: none;
-        max-width: none;
-        min-height: 0;
-        position: relative;
-        width: 100%;
-        z-index: auto;
+// Each side that reaches out, 1px deeper so it tucks under the box's edge.
+@function edge-fill-width($sides) {
+    $widths: ();
 
-        // Keep its natural height available to the parent's collapsing grid while it is closed.
-        &:not([open]) {
-            display: block;
-            visibility: hidden;
+    @each $side in $sides {
+        @if $side == 0 {
+            $widths: list.append($widths, 0);
+        }
+        @else {
+            $widths: list.append($widths, calc(#{$side} + 1px));
         }
     }
+
+    @return $widths;
 }
 
+
 .overlay {
     @extend %anchor;
     margin: auto;
+    transform-origin: center;
     transition:
         filter var(--transition-duration) var(--transition-timing-function),
         opacity var(--transition-duration) var(--transition-timing-function),
         scale var(--transition-duration) var(--transition-timing-function),
         transform var(--transition-duration) var(--transition-timing-function),
         translate var(--transition-duration) var(--transition-timing-function);
-    transform-origin: center;
     width: min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)));
 
     @include tokens.state(inactive) {
@@ -87,7 +78,7 @@ dialog.overlay {
     }
 
 
-    @each $placement in shared.$anchor-placements {
+    @each $placement in anchor.$placements {
         &--#{$placement} {
             @extend %anchor--#{$placement};
         }
@@ -98,9 +89,8 @@ dialog.overlay {
         backdrop-filter: blur(var(--blur));
     }
 
-    &--e,
-    &--w {
-        height: calc(100% - (var(--margin-vertical) * 2));
+    &--e {
+        transform-origin: right;
     }
 
     // Pinned to the edges its placement names, squaring the corners that meet them unless floating; a corner
@@ -116,6 +106,15 @@ dialog.overlay {
         }
     }
 
+    &--e,
+    &--w {
+        height: calc(100% - (var(--margin-vertical) * 2));
+    }
+
+    &--n {
+        transform-origin: top;
+    }
+
     &--n,
     &--ne,
     &--nw {
@@ -127,6 +126,18 @@ dialog.overlay {
         }
     }
 
+    &--ne {
+        transform-origin: top right;
+    }
+
+    &--nw {
+        transform-origin: top left;
+    }
+
+    &--s {
+        transform-origin: bottom;
+    }
+
     &--s,
     &--se,
     &--sw {
@@ -138,6 +149,18 @@ dialog.overlay {
         }
     }
 
+    &--se {
+        transform-origin: bottom right;
+    }
+
+    &--sw {
+        transform-origin: bottom left;
+    }
+
+    &--w {
+        transform-origin: left;
+    }
+
     &--w,
     &--nw,
     &--sw {
@@ -149,38 +172,57 @@ dialog.overlay {
         }
     }
 
-    &--e {
-        transform-origin: right;
-    }
 
-    &--n {
-        transform-origin: top;
-    }
+    &-handle {
+        background: var(--handle-color);
+        border-radius: var(--handle-thickness);
+        height: var(--handle-thickness);
+        position: absolute;
+        touch-action: none;
+        width: var(--handle-length);
 
-    &--ne {
-        transform-origin: top right;
-    }
+        .overlay--e > & {
+            left: var(--handle-offset);
+        }
 
-    &--nw {
-        transform-origin: top left;
-    }
+        .overlay--e > &,
+        .overlay--w > & {
+            height: var(--handle-length);
+            top: 50%;
+            translate: 0 -50%;
+            width: var(--handle-thickness);
+        }
 
-    &--s {
-        transform-origin: bottom;
-    }
+        .overlay--n > &,
+        .overlay--ne > &,
+        .overlay--nw > & {
+            bottom: var(--handle-offset);
+        }
 
-    &--se {
-        transform-origin: bottom right;
-    }
+        .overlay--n > &,
+        .overlay--ne > &,
+        .overlay--nw > &,
+        .overlay--s > &,
+        .overlay--se > &,
+        .overlay--sw > & {
+            left: 50%;
+            translate: -50% 0;
+        }
 
-    &--sw {
-        transform-origin: bottom left;
-    }
+        .overlay--s > &,
+        .overlay--se > &,
+        .overlay--sw > & {
+            top: var(--handle-offset);
+        }
 
-    &--w {
-        transform-origin: left;
-    }
+        .overlay--w > & {
+            right: var(--handle-offset);
+        }
 
+        .overlay:not(.overlay--e, .overlay--n, .overlay--ne, .overlay--nw, .overlay--s, .overlay--se, .overlay--sw, .overlay--w) > & {
+            display: none;
+        }
+    }
 
     // '--depth' is how many layers are open above this one, fractional while the top one is dragged away.
     &.overlay--covered {
@@ -206,48 +248,40 @@ dialog.overlay {
         }
     }
 
-    // Border paint reaches outside a scrolling surface without adding overflow or using its pseudo-elements.
-    // Matching width and outset keeps the fill entirely outside the original border box.
-    &.overlay--edge-fill {
-        border-image-source: linear-gradient(var(--edge-background), var(--edge-background));
-        border-image-slice: 1;
-        border-image-width: var(--edge-fill);
-        border-image-outset: var(--edge-fill);
-        border-image-repeat: stretch;
-
-        &.overlay--e {
-            --edge-fill: 0 50vw 0 0;
-        }
-
-        &.overlay--n {
-            --edge-fill: 50vh 0 0 0;
-        }
-
-        &.overlay--ne {
-            --edge-fill: 50vh 50vw 0 0;
-        }
-
-        &.overlay--nw {
-            --edge-fill: 50vh 0 0 50vw;
-        }
-
-        &.overlay--s {
-            --edge-fill: 0 0 50vh 0;
-        }
+    // Fades with the drag, in step with its backdrop.
+    &.overlay--dragging {
+        cursor: grabbing;
+        opacity: calc(1 - var(--progress, 0));
+    }
 
-        &.overlay--se {
-            --edge-fill: 0 50vw 50vh 0;
+    // Following the finger: the layers beneath the dragged one track it too, so neither may ease.
+    &.overlay--dragging,
+    &.overlay--tracking {
+        &,
+        &::backdrop {
+            transition: none;
         }
+    }
 
-        &.overlay--sw {
-            --edge-fill: 0 0 50vh 50vw;
-        }
+    // Border paint reaches outside a scrolling surface without adding overflow or using its pseudo-elements. The
+    // fill reaches 1px past its outset into the box, under the content: two paints meeting on one fractional edge
+    // each antialias it, and the page shows through the seam.
+    &.overlay--edge-fill {
+        border-image-outset: var(--edge-fill);
+        border-image-repeat: stretch;
+        border-image-slice: 1;
+        border-image-source: linear-gradient(var(--edge-background), var(--edge-background));
+        border-image-width: var(--edge-fill-width);
 
-        &.overlay--w {
-            --edge-fill: 0 0 0 50vw;
+        @each $placement, $sides in $edge-fill {
+            &.overlay--#{$placement} {
+                --edge-fill: #{$sides};
+                --edge-fill-width: #{edge-fill-width($sides)};
+            }
         }
     }
 
+
     // Always open; '--active' expands it. Rows keep their width and are clipped rather than reflowed, so the
     // collapsed rail shows whatever leads each row (usually an icon).
     &.overlay--rail {
@@ -272,73 +306,6 @@ dialog.overlay {
         }
     }
 
-    // Fades with the drag, in step with its backdrop.
-    &.overlay--dragging {
-        cursor: grabbing;
-        opacity: calc(1 - var(--progress, 0));
-    }
-
-    // Following the finger: the layers beneath the dragged one track it too, so neither may ease.
-    &.overlay--dragging,
-    &.overlay--tracking {
-        &,
-        &::backdrop {
-            transition: none;
-        }
-    }
-
-
-    &-handle {
-        background: var(--handle-color);
-        border-radius: var(--handle-thickness);
-        height: var(--handle-thickness);
-        position: absolute;
-        touch-action: none;
-        width: var(--handle-length);
-
-        .overlay:not(.overlay--e, .overlay--n, .overlay--ne, .overlay--nw, .overlay--s, .overlay--se, .overlay--sw, .overlay--w) > & {
-            display: none;
-        }
-
-        .overlay--e > &,
-        .overlay--w > & {
-            height: var(--handle-length);
-            top: 50%;
-            translate: 0 -50%;
-            width: var(--handle-thickness);
-        }
-
-        .overlay--e > & {
-            left: var(--handle-offset);
-        }
-
-        .overlay--n > &,
-        .overlay--ne > &,
-        .overlay--nw > &,
-        .overlay--s > &,
-        .overlay--se > &,
-        .overlay--sw > & {
-            left: 50%;
-            translate: -50% 0;
-        }
-
-        .overlay--n > &,
-        .overlay--ne > &,
-        .overlay--nw > & {
-            bottom: var(--handle-offset);
-        }
-
-        .overlay--s > &,
-        .overlay--se > &,
-        .overlay--sw > & {
-            top: var(--handle-offset);
-        }
-
-        .overlay--w > & {
-            right: var(--handle-offset);
-        }
-    }
-
     // Every placement fades in place instead of travelling.
     @media (prefers-reduced-motion: reduce) {
         --opacity: 0;
@@ -351,14 +318,14 @@ dialog.overlay {
                 opacity var(--transition-duration) var(--transition-timing-function);
         }
 
-        &::backdrop {
-            transition: opacity var(--transition-duration) var(--transition-timing-function);
-        }
-
         &.overlay--covered {
             scale: none;
             translate: none;
         }
+
+        &::backdrop {
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+        }
     }
 }
 
@@ -388,3 +355,47 @@ dialog.overlay {
         }
     }
 }
+
+// Zero specificity so paired classes (e.g. '.card') still win over the dialog UA reset.
+:where(dialog.overlay) {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    inset: 0;
+    max-height: calc(100% - (var(--margin-vertical) * 2));
+    max-width: 100%;
+    padding: 0;
+    // Only non-modal overlays stay out of the top layer and need it.
+    z-index: 9;
+}
+
+// Outranks pairings like '.card { position: relative }'. Modal overlays pin to the viewport; non-modal ones
+// sit in their positioned container, which may be the viewport too via an inline 'position: fixed'.
+dialog.overlay {
+    // A fresh surface stack above everything; outranks a paired surface, such as '.card', that would count up instead.
+    @extend %surface-root-level;
+    position: fixed;
+
+    // A flow overlay occupies a row in its parent instead of covering that parent's content.
+    &.overlay--flow:not(:modal) {
+        align-self: start;
+        inset: auto;
+        margin: 0;
+        max-height: none;
+        max-width: none;
+        min-height: 0;
+        position: relative;
+        width: 100%;
+        z-index: auto;
+
+        // Keep its natural height available to the parent's collapsing grid while it is closed.
+        &:not([open]) {
+            display: block;
+            visibility: hidden;
+        }
+    }
+
+    &:not(:modal) {
+        position: absolute;
+    }
+}

package/src/components/overlay/scss/variables.scss

@@ -1,20 +1,18 @@
-// The same curve run backwards, so an exit plays its entrance in reverse.
-@function reversed($x1, $y1, $x2, $y2) {
-    @return cubic-bezier(1 - $x2, 1 - $y2, 1 - $x1, 1 - $y1);
-}
-
-
 .overlay {
     --backdrop: color-mix(in srgb, var(--color-black-500) 64%, transparent);
+    --close-duration: var(--duration-slow-exit);
+    // Read by JS for a flow overlay's space, which grows and gives way without bouncing.
+    --ease: var(--easing-spring);
     // Read by JS: the longest a dragged-away overlay is thrown for.
     --fling-duration: 500ms;
-    --handle-color: var(--color-border-300);
+    --handle-color: var(--surface-border-default);
     --handle-length: 40px;
     --handle-offset: var(--size-200);
     --handle-thickness: 6px;
     --margin-horizontal: 0px;
     --margin-vertical: 0px;
     --max-width: 480px;
+    --open-duration: var(--duration-slow);
     --scale: 1;
     --stack-dim: 0.2;
     --stack-peek: 18px;
@@ -22,6 +20,8 @@
     // Covered layers scale about their anchor, so the far edge moves back by '--stack-span' of the size before it
     // peeks.
     --stack-shift: calc(var(--depth, 0) * var(--stack-peek) + (1 - pow(var(--stack-scale), var(--depth, 0))) * var(--stack-span));
+    --transition-duration: var(--open-duration);
+    --transition-timing-function: var(--easing-spring-bounce);
     --width-closed: 64px;
 
     // Dragged away, it fades where it was let go.
@@ -29,60 +29,23 @@
         --fling-duration: 0s;
     }
 
-    // The root curve, reversed.
-    &:where(:not(.--active)) {
-        --transition-timing-function: #{reversed(0.4, 0, 0.2, 1)};
-    }
-
-    &--e,
-    &--n,
-    &--ne,
-    &--nw,
-    &--s,
-    &--se,
-    &--sw,
-    &--w {
-        --close-duration: 0.3s;
-        // The iOS drawer curve: fast out of the gate, long gentle settle.
-        --ease: cubic-bezier(0.32, 0.72, 0, 1);
-        --open-duration: 0.5s;
-        --transition-duration: var(--open-duration);
-        --transition-timing-function: var(--ease);
-
-        // Exits get out of the way faster than entrances arrive.
-        &:where(:not(.--active)) {
-            --transition-duration: var(--close-duration);
-        }
-    }
-
-    &--e,
-    &--w {
-        --max-width: 320px;
-    }
-
-    &--floating {
-        --margin-horizontal: var(--size-100);
-        --margin-vertical: var(--size-100);
-    }
-
     // Motion modifiers follow placement so they win when paired with an edge.
     &--alert {
         --backdrop: rgb(0 0 0 / 10%);
-        --blur: 4px;
+        --blur: var(--blur-400);
         --opacity: 0;
         --scale: 0.95;
-        --transition-duration: 100ms;
-        --transition-timing-function: ease;
         --translate: 0px;
-
-        &:where(:not(.--active)) {
-            --transition-timing-function: #{reversed(0.25, 0.1, 0.25, 1)};
-        }
     }
 
     &--blur {
         --backdrop: color-mix(in srgb, var(--color-black-500) 32%, transparent);
-        --blur: 8px;
+        --blur: var(--blur-500);
+    }
+
+    &--e,
+    &--w {
+        --max-width: 320px;
     }
 
     &--fade {
@@ -90,6 +53,11 @@
         --translate: 0px;
     }
 
+    &--floating {
+        --margin-horizontal: var(--size-100);
+        --margin-vertical: var(--size-100);
+    }
+
     &--scale {
         --opacity: 0;
         --scale: 0.92;
@@ -99,12 +67,13 @@
     &--spring {
         --opacity: 0;
         --scale: 0.8;
-        --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
         --translate: 0px;
+    }
 
-        &:where(:not(.--active)) {
-            --transition-timing-function: #{reversed(0.34, 1.56, 0.64, 1)};
-        }
+    // Exits get out of the way faster than entrances arrive, and settle without the bounce.
+    &:where(:not(.--active)) {
+        --transition-duration: var(--close-duration);
+        --transition-timing-function: var(--easing-spring);
     }
 }
 
@@ -112,6 +81,6 @@
     --dim: 0.2;
     --peek: 18px;
     --scale: 0.94;
-    --transition-duration: 0.5s;
-    --transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    --transition-duration: var(--duration-slow);
+    --transition-timing-function: var(--easing-spring);
 }

package/src/components/page/scss/index.scss

@@ -1,13 +1,19 @@
 @use 'variables';
 
 .page {
-    display: flex;
-    flex-flow: column;
-    gap: var(--gap-vertical) 0px;
-    min-height: 100svh;
-    position: relative;
-    width: 100%;
+    &,
+    &-header {
+        display: flex;
+        flex-flow: column;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+        position: relative;
+        width: 100%;
+    }
 
+    &-subtitle,
+    &-suptitle {
+        font-size: var(--font-size);
+    }
 
     &-subtitle,
     &-suptitle,
@@ -19,11 +25,6 @@
         z-index: 1;
     }
 
-    &-subtitle,
-    &-suptitle {
-        font-size: var(--font-size);
-    }
-
     &-title {
         text-wrap: balance;
     }

package/src/components/page/scss/variables.scss

@@ -2,6 +2,11 @@
     --gap-horizontal: 0px;
     --gap-vertical: 0px;
 
+    &-header {
+        --gap-horizontal: var(--size-400);
+        --gap-vertical: var(--size-100);
+    }
+
     &-subtitle,
     &-suptitle {
         --color: var(--color-default);

package/src/components/pagination/arrows.ts

@@ -0,0 +1,58 @@
+import { html, type Attributes } from '@esportsplus/template';
+import icon from '~/components/icon';
+import next from '@esportsplus/ui/svg/arrow-right.svg';
+import previous from '@esportsplus/ui/svg/arrow-left.svg';
+
+
+type A = Attributes & {
+    'aria-label'?: string;
+    next?: Link;
+    previous?: Link;
+};
+
+type Link = {
+    // A line under the title; cards only.
+    description?: string;
+    href: string;
+    // The small line above the title, 'Previous' or 'Next' when omitted; cards only.
+    label?: string;
+    title: string;
+};
+
+
+function arrow(direction: 'next' | 'previous', link?: Link) {
+    let graphic = icon({ 'aria-hidden': 'true', class: 'pagination-arrow-icon' }, direction === 'next' ? next : previous),
+        name = direction === 'next' ? 'Next' : 'Previous';
+
+    if (!link) {
+        return html`
+            <button aria-label='${name}' class='pagination-arrow pagination-arrow--${direction} --disabled' disabled type='button'>
+                ${graphic}
+            </button>
+        `;
+    }
+
+    return html`
+        <a
+            aria-label='${name}: ${link.title}'
+            class='pagination-arrow pagination-arrow--${direction}'
+            href='${link.href}'
+            rel='${direction === 'next' ? 'next' : 'prev'}'
+            title='${name}: ${link.title}'
+        >
+            ${graphic}
+        </a>
+    `;
+}
+
+
+// Both stay in place with a missing side disabled, so the pair never shifts between pages.
+export default ({ 'aria-label': label = 'Pagination', next, previous, ...attributes }: A) => html`
+    <nav aria-label='${label}' class='pagination pagination--arrows' ${attributes}>
+        ${arrow('previous', previous)}
+        ${arrow('next', next)}
+    </nav>
+`;
+
+
+export type { Link };