@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/error/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .error {
@@ -6,6 +6,22 @@
     display: inline-flex;
     vertical-align: middle;
 
+    &-live {
+        @extend %hidden-visually;
+    }
+
+    // Long messages wrap instead of running off in one line.
+    &-message.tooltip-content {
+        --background-default: var(--error-background);
+        --max-width: var(--error-max-width);
+        --spacer: var(--error-spacer);
+        --width: max-content;
+        color: var(--error-text);
+        font-size: var(--error-font-size);
+        padding: var(--error-padding);
+        white-space: normal;
+    }
+
     // The control draws its edge from '--border-color', as the form controls do. Doubled, so it outranks the control's
     // own hover and active states whatever order the sheets load in.
     &.error--invalid.error--invalid > :not(.error-live, .error-message) {
@@ -13,11 +29,11 @@
     }
 
     &.error--shake-1 > :not(.error-live, .error-message) {
-        animation: error-shake-1 320ms ease-out;
+        animation: error-shake-1 var(--duration-slow) var(--easing-out);
     }
 
     &.error--shake-2 > :not(.error-live, .error-message) {
-        animation: error-shake-2 320ms ease-out;
+        animation: error-shake-2 var(--duration-slow) var(--easing-out);
     }
 
     // The tooltip's repaint behind its trigger, which the goo bridges from while the morph runs, so the neck reads as
@@ -27,22 +43,6 @@
         inset: 0 var(--error-reach);
     }
 
-    &-live {
-        @extend %hidden-visually;
-    }
-
-    // Long messages wrap instead of running off in one line.
-    &-message.tooltip-content {
-        --background: var(--error-background);
-        --max-width: var(--error-max-width);
-        --spacer: var(--error-spacer);
-        --width: max-content;
-        color: var(--error-text);
-        font-size: var(--error-font-size);
-        padding: var(--error-padding);
-        white-space: normal;
-    }
-
     @media (prefers-reduced-motion: reduce) {
         &:is(.error--shake-1, .error--shake-2) > * {
             animation: none;

package/src/components/error/scss/variables.scss

@@ -1,7 +1,7 @@
 // Prefixed, unlike most components: the wrapper's custom properties inherit into the control it wraps, and a plain
 // '--color' or '--background' there would restyle it.
 .error {
-    --error-background: var(--color-black-400);
+    --error-background: var(--color-primary-400);
     --error-color: var(--color-red-400);
     --error-font-size: var(--font-size-300);
     --error-max-width: 240px;
@@ -9,5 +9,5 @@
     // How far the shake swings each way; the fill behind the control is pulled in by as much.
     --error-reach: 4px;
     --error-spacer: 4px;
-    --error-text: var(--color-white-400);
+    --error-text: var(--surface-background-default);
 }

package/src/components/filter/index.ts

@@ -47,10 +47,13 @@ export default <T>({ filters, height = false, items, label, state = reactive({ a
         elements: (HTMLElement | undefined)[] = [],
         // How items come, go and move, from the list's CSS; null where it has no duration.
         enter: KeyframeAnimationOptions | null = null,
+        // What items grow from and shrink to as they come and go.
+        enterScale = '1',
         heldFocus = false,
         id = `filter-${++instance}`,
         leave: KeyframeAnimationOptions | null = null,
         leaving = new Map<HTMLElement, string>(),
+        leaveScale = '1',
         list: HTMLElement | undefined,
         move: KeyframeAnimationOptions | null = null,
         resize: Animation | undefined,
@@ -248,7 +251,7 @@ export default <T>({ filters, height = false, items, label, state = reactive({ a
             element.style.top = `${rect.top - origin.top}px`;
             element.style.width = `${rect.width}px`;
 
-            play(element, [{ opacity: 1, transform: 'scale(1)' }, { opacity: 0, transform: 'scale(0.98)' }], leave).onfinish = () => {
+            play(element, [{ opacity: 1, transform: 'scale(1)' }, { opacity: 0, transform: `scale(${leaveScale})` }], leave).onfinish = () => {
                 animations.delete(element);
                 release(element);
                 element.style.display = 'none';
@@ -311,7 +314,7 @@ export default <T>({ filters, height = false, items, label, state = reactive({ a
 
             if (!rect) {
                 if (enter && near(last, view)) {
-                    play(element, [{ opacity: 0, transform: 'scale(0.97)' }, { opacity: 1, transform: 'scale(1)' }], enter);
+                    play(element, [{ opacity: 0, transform: `scale(${enterScale})` }, { opacity: 1, transform: 'scale(1)' }], enter);
                 }
 
                 continue;
@@ -341,7 +344,9 @@ export default <T>({ filters, height = false, items, label, state = reactive({ a
         let computed = list && getComputedStyle(list);
 
         enter = computed ? timing(computed, 'enter') : null;
+        enterScale = computed?.getPropertyValue('--enter-scale').trim() || '1';
         leave = computed ? timing(computed, 'leave') : null;
+        leaveScale = computed?.getPropertyValue('--leave-scale').trim() || '1';
         move = computed ? timing(computed, 'move') : null;
         update(!!(enter || leave || move));
     });

package/src/components/filter/scss/index.scss

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .filter-announcer {

package/src/components/filter/scss/variables.scss

@@ -1,17 +1,18 @@
 // On the list; read by JS when a filter changes which items show.
 .filter {
-    --enter-duration: 200ms;
-    --enter-easing: cubic-bezier(0.23, 1, 0.32, 1);
-    --leave-duration: 140ms;
-    --leave-easing: cubic-bezier(0.4, 0, 1, 1);
-    // Same duration and curve as accordion.more's height transition.
-    --move-duration: 480ms;
-    --move-easing: cubic-bezier(0.22, 1, 0.36, 1);
+    --enter-duration: var(--duration-moderate);
+    --enter-easing: var(--easing-spring);
+    --enter-scale: 0.97;
+    --leave-duration: var(--duration-moderate-exit);
+    --leave-easing: var(--easing-spring);
+    --leave-scale: 0.98;
+    --move-duration: var(--duration-moderate);
+    --move-easing: var(--easing-spring);
 
-    // Items appear and go in place.
+    // Items fade in and out where they land, and the rest jump to their places.
     @media (prefers-reduced-motion: reduce) {
-        --enter-duration: 0s;
-        --leave-duration: 0s;
+        --enter-scale: 1;
+        --leave-scale: 1;
         --move-duration: 0s;
     }
 }

package/src/components/frame/scss/index.scss

@@ -5,15 +5,9 @@
 // active frame's, usually set once on the parent. Without a modifier frames switch instantly; the modifiers move them,
 // stacked in one grid cell so the tallest sets the height, and the parent clips whatever sits outside it.
 .frame {
-    &--scroll,
-    &--slide,
-    &--swap {
-        grid-area: 1 / 1;
-        min-width: 0;
-
-        @include tokens.state(inactive) {
-            pointer-events: none;
-        }
+    // Each frame sits its distance from the active one away, so the frames move together like one track.
+    &--scroll {
+        translate: 0 calc((var(--n) - var(--i, 0)) * (100% + var(--gap-vertical)));
     }
 
     &--scroll,
@@ -25,9 +19,15 @@
         }
     }
 
-    // Each frame sits its distance from the active one away, so the frames move together like one track.
-    &--scroll {
-        translate: 0 calc((var(--n) - var(--i, 0)) * (100% + var(--gap-vertical)));
+    &--scroll,
+    &--slide,
+    &--swap {
+        grid-area: 1 / 1;
+        min-width: 0;
+
+        @include tokens.state(inactive) {
+            pointer-events: none;
+        }
     }
 
     &--slide {

package/src/components/frame/scss/variables.scss

@@ -7,17 +7,17 @@
     // 'frame--swap'. The drift and blur take '--swap-duration', the fade '--swap-fade-duration', shorter so two frames
     // barely overlap and never read as doubled text; the outgoing frame takes the '--swap-exit-*' pair, so it can
     // clear out quicker than the incoming one arrives.
-    --swap-blur: 2px;
-    --swap-duration: 0.32s;
-    --swap-exit-duration: var(--swap-duration);
-    --swap-exit-fade-duration: var(--swap-fade-duration);
-    --swap-fade-duration: 0.16s;
+    --swap-blur: var(--blur-300);
+    --swap-duration: var(--duration-moderate);
+    --swap-exit-duration: var(--duration-moderate-exit);
+    --swap-exit-fade-duration: var(--duration-fast-exit);
+    --swap-fade-duration: var(--duration-fast);
     --swap-fade-timing-function: linear;
     // How far off to its side a waiting frame sits; a share of its own size, so short labels and wide views travel alike.
     --swap-shift: 60%;
-    --swap-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
-    --transition-duration: 0.32s;
-    --transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    --swap-timing-function: var(--easing-spring);
+    --transition-duration: var(--duration-moderate);
+    --transition-timing-function: var(--easing-spring);
 
     // Swaps still crossfade, without the drift or blur.
     @media (prefers-reduced-motion: reduce) {

package/src/components/heatmap/index.ts

@@ -1,7 +1,7 @@
 import { effect, reactive, untrack } from '@esportsplus/reactivity';
 import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
 import tooltip from '~/components/tooltip';
-import scrollbar from '~/css-utilities/scrollbar';
+import scrollbar from '~/modifiers/scrollbar';
 import { clamp } from '~/shared/clamp';
 import { onceVisible } from '~/shared/visible';
 import './scss/index.scss';
@@ -137,8 +137,8 @@ function template(this: { attributes?: Partial<A> } | void, { data, describe = s
             </div>
 
             <div
-                class='heatmap-scroll --scrollbar --scrollbar-horizontal'
-                ${scrollbar.drag('horizontal')}
+                class='heatmap-scroll'
+                ${scrollbar({ drag: 'horizontal', horizontal: true })}
                 ${{
                     // On a narrow screen, open on the most recent weeks.
                     onconnect: (element: HTMLElement) => {

package/src/components/heatmap/scss/index.scss

@@ -28,10 +28,8 @@
             scale var(--transition-duration) var(--transition-timing-function) calc(var(--column) * var(--stagger));
         width: var(--cell-size);
 
-        // Rings the hovered day outside itself, so it shows on the darkest level too.
-        &:hover {
-            outline: 1px solid var(--hover-color);
-            outline-offset: 1px;
+        &--empty {
+            background: none;
         }
 
         &:focus-visible {
@@ -39,8 +37,10 @@
             outline-offset: 1px;
         }
 
-        &--empty {
-            background: none;
+        // Rings the hovered day outside itself, so it shows on the darkest level too.
+        &:hover {
+            outline: 1px solid var(--hover-color);
+            outline-offset: 1px;
         }
 
         @for $level from 1 through 4 {
@@ -59,7 +59,7 @@
     &-days {
         display: flex;
         flex-direction: column;
-        margin-inline-end: 5px;
+        margin-inline-end: calc(var(--size-200) / 2);
         margin-top: calc(var(--months-height) + var(--ring-space));
     }
 
@@ -102,30 +102,32 @@
     }
 }
 
-.heatmap-legend {
-    align-items: center;
-    color: var(--color);
-    display: flex;
-    font-size: var(--font-size);
-    gap: 4px;
+.heatmap {
+    &-legend {
+        align-items: center;
+        color: var(--color);
+        display: flex;
+        font-size: var(--font-size);
+        gap: calc(var(--size-100) / 2);
 
-    &-less {
-        margin-inline-end: 4px;
-    }
+        &-less {
+            margin-inline-end: calc(var(--size-100) / 2);
+        }
 
-    &-more {
-        margin-inline-start: 4px;
+        &-more {
+            margin-inline-start: calc(var(--size-100) / 2);
+        }
     }
-}
 
-.heatmap-swatch {
-    border-radius: var(--cell-radius);
-    height: var(--cell-size);
-    width: var(--cell-size);
+    &-swatch {
+        border-radius: var(--cell-radius);
+        height: var(--cell-size);
+        width: var(--cell-size);
 
-    @for $level from 0 through 4 {
-        &--level-#{$level} {
-            background: var(--level-#{$level});
+        @for $level from 0 through 4 {
+            &--level-#{$level} {
+                background: var(--level-#{$level});
+            }
         }
     }
 }

package/src/components/heatmap/scss/variables.scss

@@ -1,26 +1,34 @@
+// Compact for a dense grid. Tabular figures, so the tooltip holds its width as the counts change cell to cell.
+.heatmap .tooltip-shared {
+    --padding: var(--size-100) var(--size-200);
+    --radius: var(--border-radius-300);
+    --spacer: 6px;
+    font-variant-numeric: tabular-nums;
+}
+
 .heatmap,
 .heatmap-legend {
     --cell-radius: var(--border-radius-100);
-    --cell-size: 10px;
+    --cell-size: var(--size-200);
     --color: var(--color-text-300);
-    --focus-color: var(--color-text-500);
+    --focus-color: var(--color-primary-500);
     --font-size: var(--font-size-300);
-    --hover-color: color-mix(in oklab, var(--color-text-500) 50%, transparent);
+    --hover-color: color-mix(in oklab, var(--color-primary-500) 50%, transparent);
     // One hue, light to dark. Level 0 stays faintly visible so empty days still read as part of the grid.
     --level-0: color-mix(in oklab, var(--level-color) 7%, transparent);
     --level-1: color-mix(in oklab, var(--level-color) 25%, transparent);
     --level-2: color-mix(in oklab, var(--level-color) 45%, transparent);
     --level-3: color-mix(in oklab, var(--level-color) 70%, transparent);
     --level-4: var(--level-color);
-    --level-color: var(--color-text-500);
-    --months-height: 20px;
-    --pitch: 13px;
+    --level-color: var(--color-primary-500);
+    --months-height: var(--size-500);
+    --pitch: var(--size-300);
     --ring-space: 3px;
     --scrollbar-spacing: var(--size-300);
     // Per column, so the whole year sweeps in under half a second and reads as one gesture.
     --stagger: 8ms;
-    --transition-duration: 0.3s;
-    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --transition-duration: var(--duration-moderate);
+    --transition-timing-function: var(--easing-out);
 }
 
 .heatmap--blue,
@@ -40,19 +48,12 @@
     }
 }
 
-// Compact for a dense grid.
-.heatmap .tooltip-shared {
-    --padding: var(--size-100) var(--size-200);
-    --radius: var(--border-radius-300);
-    --spacer: 6px;
-}
-
 // A long glide lags behind a pointer sweeping across 13px cells, and the content keeps pace with it. Gated so
 // it can't undo the tooltip's reduced-motion override.
 @media (prefers-reduced-motion: no-preference) {
     .heatmap .tooltip-shared {
-        --glide-duration: 0.15s;
-        --swap-duration: 0.15s;
+        --glide-duration: var(--duration-fast);
+        --swap-duration: var(--duration-fast);
         --swap-fade-duration: 0.1s;
     }
 }

package/src/components/highlight/scss/index.scss

@@ -22,17 +22,6 @@
     width: calc(var(--width) - var(--inset-inline) * 2 + var(--slide-width));
     z-index: -1;
 
-    &--line::after {
-        background: var(--line-color);
-        border-radius: var(--line-radius);
-        content: '';
-        position: absolute;
-    }
-
-    &--unfilled {
-        background: transparent;
-    }
-
     // The line runs along the item's own edge, so it reaches back out past the inset.
     &--line-bottom::after {
         bottom: calc(var(--line-offset) - var(--inset-block));
@@ -58,6 +47,17 @@
         top: calc(var(--line-offset) - var(--inset-block));
     }
 
+    &--line::after {
+        background: var(--line-color);
+        border-radius: var(--line-radius);
+        content: '';
+        position: absolute;
+    }
+
+    &--unfilled {
+        background: transparent;
+    }
+
     &--visible {
         display: block;
         opacity: 1;
@@ -70,9 +70,13 @@
         }
     }
 
-    // The layer jumps to its item. Doubled to outrank the active state's own glide.
+    // The layer jumps to its item and only fades in and out. Doubled to outrank the active state's own glide.
     @media (prefers-reduced-motion: reduce) {
-        transition: background var(--transition-duration) var(--transition-timing-function);
+        --scale-hidden: 1;
+        transition:
+            background var(--transition-duration) var(--transition-timing-function),
+            display var(--fade-duration) allow-discrete,
+            opacity var(--fade-duration) var(--transition-timing-function);
 
         &.highlight {
             --glide: 0s;

package/src/components/highlight/scss/variables.scss

@@ -1,4 +1,5 @@
 @use '/tokens';
+@use 'css-utilities/background';
 
 // A glide's offset, added onto the layer's box. Registered so it can run negative, which width and height can't,
 // and so the leading and trailing edges' animations can add together.
@@ -27,39 +28,36 @@
 }
 
 .highlight {
-    --background: var(--background-default);
+    @extend %background-state;
     --background-active: color-mix(in srgb, currentColor 10%, transparent);
     --background-default: color-mix(in srgb, currentColor 6%, transparent);
     --background-hover: var(--background-default);
     --background-pressed: color-mix(in srgb, currentColor 14%, transparent);
-    --fade-duration: 0.2s;
+    --fade-duration: var(--duration-fast);
     // What each layer glides with: the active layer takes '--glide-duration-active', so a selection can jump ('0s')
     // while hover still glides.
     --glide: var(--glide-duration);
-    --glide-duration: 0.24s;
+    --glide-duration: var(--duration-moderate);
     --glide-duration-active: var(--glide-duration);
     // What the edge trailing a glide takes; longer than '--glide' stretches the layer toward the new item.
     --glide-tail: var(--glide-tail-duration);
     --glide-tail-duration: var(--glide-duration);
     --glide-tail-duration-active: var(--glide-duration-active);
-    // Damped spring (~4% overshoot) sampled into linear() so the glide settles past its target and back.
-    --glide-timing-function: linear(0, 0.035, 0.123, 0.239, 0.367, 0.494, 0.611, 0.715, 0.803, 0.874, 0.929, 0.971, 1, 1.02, 1.032, 1.037, 1.038, 1.037, 1.033, 1.028, 1.024, 1.019, 1.014, 1.01, 1);
-    // The first and last tracked items settle without overshoot, keeping the glide inside the group's ends.
-    --glide-timing-function-edge: cubic-bezier(0.22, 1, 0.36, 1);
+    --glide-timing-function: var(--easing-spring);
+    --glide-timing-function-edge: var(--easing-spring);
     // Pulls the layer in from its item's box, top and bottom or left and right.
     --inset-block: 0px;
     --inset-inline: 0px;
     --line-color: currentColor;
     // How far the fills keep clear of the line's side, and the one across from it.
-    --line-inset: 6px;
+    --line-inset: calc(var(--size-300) / 2);
     // In from the item's edge; negative pushes the line out, e.g. over the container's own border.
     --line-offset: 0px;
     --line-radius: calc(var(--line-width) / 2);
-    --line-width: 2px;
+    --line-width: var(--border-width-500);
     --scale-hidden: 0.92;
 
     @include tokens.state(active) {
-        --background: var(--background-active);
         --glide: var(--glide-duration-active);
         --glide-tail: var(--glide-tail-duration-active);
     }

package/src/components/icon/scss/index.scss

@@ -9,6 +9,16 @@
     width: var(--width);
 
 
+    // Turns by '--rotate', easing between turns, so a chevron can follow its control's state.
+    &--rotate {
+        rotate: var(--rotate);
+        transition: rotate var(--duration-fast) var(--easing-out);
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+
     svg {
         fill: currentColor;
         height: 100%;

package/src/components/icon/scss/variables.scss

@@ -3,4 +3,9 @@
     --height: var(--size);
     --size: var(--size-400);
     --width: var(--size);
+
+
+    &--rotate {
+        --rotate: 0deg;
+    }
 }

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

@@ -1,4 +1,4 @@
-@use '/shared';
+@use 'css-utilities/absolute';
 @use 'variables';
 
 .image {
@@ -70,6 +70,14 @@
             --placeholder-opacity: 0;
         }
 
+        // Covers the source while it streams in, then fades out and is removed from the DOM.
+        &-placeholder {
+            opacity: var(--placeholder-opacity, 1);
+            pointer-events: none;
+            transition: opacity var(--transition-duration) var(--timing-function);
+            z-index: 1;
+        }
+
         &-placeholder,
         &-source {
             @extend %absolute-full;
@@ -79,14 +87,6 @@
             width: 100%;
         }
 
-        // Covers the source while it streams in, then fades out and is removed from the DOM.
-        &-placeholder {
-            opacity: var(--placeholder-opacity, 1);
-            pointer-events: none;
-            transition: opacity var(--transition-duration) var(--timing-function);
-            z-index: 1;
-        }
-
         // Unset until an error, so it inherits like any other element's.
         &-source {
             visibility: var(--source-visibility);

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

@@ -1,3 +1,7 @@
+@use 'css-utilities/background';
+@use 'css-utilities/surface';
+
+
 .image {
     --background: transparent;
     --border-radius: var(--border-radius-300);
@@ -31,10 +35,11 @@
 
 
     &-lazyload {
+        @extend %background-state, %surface-sunken-level;
         --aspect-ratio: auto;
-        --background: var(--color-grey-500);
+        --background-default: var(--surface-background-default);
         --border-radius: var(--border-radius-600);
-        --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --timing-function: var(--easing-out);
         --transition-duration: 0.65s;
     }
 }

package/src/components/index.ts

@@ -59,6 +59,8 @@ export { default as surfaceField } from './surface-field';
 export { default as switch } from './switch';
 export { default as tasklist } from './tasklist';
 export { default as textarea } from './textarea';
+export { default as theme } from './theme';
+export { default as themePicker } from './theme-picker';
 export { default as toaster } from './toast';
 export { default as tooltip } from './tooltip';
 export { default as truncate } from './truncate';