@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/button/scss/variables.scss

@@ -1,21 +1,23 @@
 @use '/tokens';
+@use 'css-utilities/surface';
 
+// A surface, so its fills and whatever sits in it read from a level above its parent. Flat by default, since most
+// buttons are transparent; a tactile one rises off its parent with the surface's shadow.
 .button {
+    @extend %surface-raised-level;
     --border-color-default: var(--background);
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
 
 
     &--feedback {
-        --draw-duration: 0.26s;
-        --draw-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --draw-duration: var(--duration-moderate);
+        --draw-timing-function: var(--easing-out);
         --error-color: var(--color-red-400);
-        --face-blur: 3px;
+        --face-blur: var(--blur-400);
         // Stands in for an overdamped spring (stiffness 260, damping 34, mass 0.8), which never overshoots.
-        --face-duration: 0.4s;
+        --face-duration: var(--duration-slow);
         --face-gap: 0.375em;
-        --face-offset: 3px;
-        --face-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+        --face-offset: calc(var(--size-300) / 4);
+        --face-timing-function: var(--easing-out);
         --icon-size: 0.875em;
         --spin-duration: 0.85s;
         --success-color: var(--color-green-500);
@@ -30,33 +32,34 @@
     // Leaves the surface alone and sweeps colour through the label only.
     &--hold-text {
         --fill-background: transparent;
-        --fill-color: var(--color-primary-400);
+        --fill-color: var(--color-accent-400);
     }
 
     // A hairline ring plus an inset bottom edge gives the keycap its depth; pressing drops the cap by that edge.
     &--kbd {
-        --background-active: var(--color-text-500);
-        --background-default: var(--color-white-300);
+        --background-active: var(--color-primary-500);
+        --background-default: var(--surface-background-default);
+        --background-pressed: var(--background-active);
         --border-radius: var(--border-radius-300);
+        --box-shadow-active: none;
         --box-shadow-default:
             0 0 0 var(--border-width-400) var(--kbd-border-color),
             inset 0 calc(var(--border-width-400) * -1) 0 var(--kbd-border-color);
-        --color-active: var(--color-white-300);
+        --box-shadow-pressed: none;
+        --color-active: var(--surface-background-default);
         --color-default: var(--color-text-300);
+        --color-pressed: var(--color-active);
         --font-size: calc(var(--font-size-300) * 0.95);
-        --kbd-border-color: var(--color-border-300);
+        --kbd-border-color: var(--surface-border-default);
         --kbd-size: 24px;
         --line-height: 1;
-        --padding-horizontal: 6px;
+        --padding-horizontal: calc(var(--size-300) / 2);
         --padding-vertical: 0px;
-        --transition-duration: 0.3s;
-        --transition-timing-function: ease-out;
+        --transition-duration: var(--duration-moderate);
+        --transition-timing-function: var(--easing-spring);
 
         // Lights instantly and releases with the slower fade.
         @include tokens.state(active pressed) {
-            --background: var(--background-active);
-            --box-shadow: none;
-            --color: var(--color-active);
             --transition-duration: 0s;
         }
     }
@@ -67,25 +70,24 @@
         --color-default: var(--morph-color);
         --font-size: var(--morph-font-size);
         --font-weight: var(--font-weight-500);
-        --icon-swap-duration: 300ms;
+        --icon-swap-duration: var(--duration-moderate);
         --icon-swap-timing-function: var(--morph-spring);
-        --line-height: 20px;
-        --morph-background: var(--color-text-500);
+        --line-height: var(--size-500);
+        --morph-background: var(--color-primary-500);
         --morph-background-error: var(--color-red-500);
-        --morph-color: var(--color-white-300);
+        --morph-color: var(--color-surface);
         --morph-color-error: var(--color-white-300);
-        --morph-focus-color: color-mix(in oklab, var(--color-text-500) 38%, transparent);
-        --morph-font-size: 14px;
+        --morph-focus-color: var(--surface-border-pressed);
+        --morph-font-size: var(--font-size-300);
         --morph-height: 40px;
-        --morph-icon-size: 16px;
+        --morph-icon-size: var(--size-400);
         // JS measures the width morph; CSS owns the failed-save shake.
-        --morph-resize-duration: 300ms;
+        --morph-resize-duration: var(--duration-moderate);
         --morph-resize-easing: var(--morph-spring);
-        --morph-scale-pressed: 0.96;
-        --morph-shake-duration: 350ms;
-        --morph-shake-easing: ease-in-out;
-        --morph-spring: linear(0, 0.057, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.896, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
-        --padding-horizontal: 20px;
+        --morph-shake-duration: var(--duration-slow);
+        --morph-shake-easing: var(--easing-in-out);
+        --morph-spring: var(--easing-spring);
+        --padding-horizontal: var(--size-500);
         --padding-vertical: 0px;
 
         @media (prefers-reduced-motion: reduce) {
@@ -111,69 +113,71 @@
     }
 }
 
-.button-fan {
-    --focus-color: currentColor;
-    --focus-offset: 2px;
-    --focus-width: 2px;
-    --option-opacity-duration: 0.2s;
-    --option-pressed-scale: 0.92;
-    --option-scale: 0.5;
-    --option-spring: linear(0, 0.067, 0.221, 0.406, 0.586, 0.741, 0.862, 0.949, 1.006, 1.037, 1.051, 1.053, 1.047, 1.038, 1.028, 1.019, 1.011, 1.006, 1.002, 0.999, 0.998, 0.997, 0.997, 0.998, 1);
-    --option-spring-duration: 0.6s;
-    --spacer: var(--size-300);
-    --stagger: 30ms;
-    --swap-rotate: 90deg;
-    --swap-spring: linear(0, 0.07, 0.228, 0.418, 0.602, 0.759, 0.88, 0.965, 1.019, 1.047, 1.058, 1.056, 1.048, 1.038, 1.027, 1.017, 1.009, 1.003, 1, 0.998, 0.997, 0.997, 0.997, 0.998, 1);
-    --swap-spring-duration: 0.44s;
-    --trigger-pressed-scale: 0.94;
-
-
-    &--e {
-        --direction-x: -1;
-        --direction-y: 0;
-        --origin: left center;
-    }
+.button {
+    &-fan {
+        --focus-color: currentColor;
+        --focus-offset: calc(var(--size-100) / 4);
+        --focus-width: var(--border-width-500);
+        --option-opacity-duration: var(--duration-fast);
+        --option-scale: 0.5;
+        --option-spring: var(--easing-spring);
+        --option-spring-duration: var(--duration-moderate);
+        --spacer: var(--size-300);
+        --stagger: 30ms;
+        --swap-rotate: 90deg;
+        --swap-spring: var(--easing-spring);
+        --swap-spring-duration: var(--duration-fast);
+
+
+        &--e {
+            --direction-x: -1;
+            --direction-y: 0;
+            --origin: left center;
+        }
 
-    &--n {
-        --direction-x: 0;
-        --direction-y: 1;
-        --origin: center bottom;
-    }
+        &--n {
+            --direction-x: 0;
+            --direction-y: 1;
+            --origin: center bottom;
+        }
 
-    &--s {
-        --direction-x: 0;
-        --direction-y: -1;
-        --origin: center top;
-    }
+        &--s {
+            --direction-x: 0;
+            --direction-y: -1;
+            --origin: center top;
+        }
+
+        &--tactile {
+            --box-shadow-default: var(--surface-shadow-default);
+        }
 
-    &--w {
-        --direction-x: 1;
-        --direction-y: 0;
-        --origin: right center;
+        &--w {
+            --direction-x: 1;
+            --direction-y: 0;
+            --origin: right center;
+        }
     }
-}
 
-.button-kbd {
-    --gap: var(--size-200);
-    --plus-color: color-mix(in srgb, currentColor 60%, transparent);
-    --plus-size: var(--size-300);
-}
+    &-kbd {
+        --gap: var(--size-200);
+        --plus-color: color-mix(in srgb, currentColor 60%, transparent);
+        --plus-size: var(--size-300);
+    }
 
-.button-sidebar {
-    --divider-duration: 180ms;
-    // How far the divider slides out of the frame while its panel is hidden.
-    --divider-travel: -12px;
-    --divider-x: 0px;
-    --icon-size: var(--size-400);
-    --shadow-opacity: 0.2;
-}
+    &-sidebar {
+        --icon-size: var(--size-400);
+        --panel-duration: var(--duration-fast);
+        // 1 while the panel shows, 0 while hidden; the pill's width and offset both derive from it.
+        --panel-open: 1;
+    }
 
-.button-split {
-    --chevron-duration: 0.2s;
-    --chevron-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    --focus-color: currentColor;
-    --focus-offset: 2px;
-    --focus-width: 2px;
-    --icon-size: var(--size-400);
-    --trigger-padding-horizontal: var(--size-200);
+    &-split {
+        --chevron-duration: var(--duration-fast);
+        --chevron-timing-function: var(--easing-spring);
+        --focus-color: currentColor;
+        --focus-offset: calc(var(--size-100) / 4);
+        --focus-width: var(--border-width-500);
+        --icon-size: var(--size-400);
+        --trigger-padding-horizontal: var(--size-200);
+    }
 }

package/src/components/button/sidebar.ts

@@ -1,8 +1,12 @@
 import { component, html, type Attributes } from '@esportsplus/template';
+import { effect, reactive } from '@esportsplus/reactivity';
 
 
 type A = Attributes & {
     'aria-expanded'?: never;
+    onconnect?: never;
+    onfocusout?: never;
+    onpointerleave?: never;
     // Whether the panel the button toggles is showing.
     open: boolean | (() => boolean);
     // The edge the panel sits on; the glyph mirrors for 'right'.
@@ -10,19 +14,16 @@ type A = Attributes & {
 };
 
 
-let uid = 0;
-
-
 function read<T>(value: T | (() => T)) {
     return typeof value === 'function' ? (value as () => T)() : value;
 }
 
 
-// A panel glyph whose divider slides out of the frame while the panel is hidden, and previews the next state on hover
-// and focus. Colors and sizing come from the caller's attributes.
+// A frame with an inset panel pill that thins to a line while the panel is hidden, and previews the next state on
+// hover and focus. Colors and sizing come from the caller's attributes.
 export default component(
     ({ open, side = 'left', ...attributes }: A) => {
-        let clip = `button-sidebar-${++uid}`;
+        let state = reactive({ held: false });
 
         return html`
             <button
@@ -31,27 +32,38 @@ export default component(
                 ${attributes}
                 ${{
                     'aria-expanded': () => String(read(open)),
-                    class: () => read(side) === 'right' && 'button-sidebar--right'
+                    class: () => `${read(side) === 'right' ? 'button-sidebar--right' : ''} ${state.held ? 'button-sidebar--held' : ''}`,
+                    // A toggle under the pointer or focus would otherwise flip straight to previewing the state it
+                    // just left, so the glyph holds the new state until the pointer or focus leaves.
+                    onconnect: (element: HTMLElement) => {
+                        let current = read(open);
+
+                        effect(() => {
+                            let next = read(open);
+
+                            if (next === current) {
+                                return;
+                            }
+
+                            current = next;
+
+                            if (element.matches(':hover, :focus-visible')) {
+                                state.held = true;
+                            }
+                        });
+                    },
+                    onfocusout: () => {
+                        state.held = false;
+                    },
+                    onpointerleave: () => {
+                        state.held = false;
+                    }
                 }}
             >
                 <span aria-hidden='true' class='icon button-sidebar-icon'>
-                    <svg class='button-sidebar-graphic' fill='none' focusable='false' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
-                        <defs>
-                            <clipPath ${{ id: clip }}>
-                                <rect x='2.25' y='2.75' width='11.5' height='11' rx='1.5' />
-                            </clipPath>
-                        </defs>
-                        <g class='button-sidebar-shadow'>
-                            <path fill='currentColor' stroke='none' d='M3.75 2.75h2.5v11h-2.5a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5Z' />
-                            <path d='M6.25 2.75v11' />
-                        </g>
-                        <g ${{ 'clip-path': `url(#${clip})` }}>
-                            <g class='button-sidebar-divider'>
-                                <path fill='currentColor' stroke='none' d='M3.75 2.75h2.5v11h-2.5a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5Z' />
-                                <path d='M6.25 2.75v11' />
-                            </g>
-                        </g>
-                        <rect x='2.25' y='2.75' width='11.5' height='11' rx='1.5' />
+                    <svg class='button-sidebar-graphic' fill='none' focusable='false' stroke='currentColor' stroke-width='1.5' viewBox='0 0 16 16'>
+                        <path class='button-sidebar-panel' d='M5.5 5.5v5' stroke-linecap='round' />
+                        <rect x='2.25' y='2.25' width='11.5' height='11.5' rx='2.75' />
                     </svg>
                 </span>
             </button>

package/src/components/capslock/index.ts

@@ -45,8 +45,8 @@ export default component(
                     <span class='capslock-key-light'></span>
                     <svg class='capslock-key-icon'><use href='#${capsLock}' /></svg>
                 </kbd>
-                <span aria-hidden='true' class='capslock-text --flex-vertical'>Caps Lock On</span>
-                <span aria-live='polite' class='capslock-live --flex-vertical'>${() => state.active && 'Caps Lock On'}</span>
+                <span aria-hidden='true' class='capslock-text'>Caps Lock On</span>
+                <span aria-live='polite' class='capslock-live'>${() => state.active && 'Caps Lock On'}</span>
             </div>
         `;
     }

package/src/components/capslock/scss/index.scss

@@ -1,9 +1,10 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/flex';
+@use 'css-utilities/hidden';
 @use 'variables';
 
 .capslock {
-    filter: blur(2px);
+    filter: blur(var(--blur-300));
     opacity: 0;
     transition:
         filter var(--transition-duration) var(--transition-timing-function),
@@ -13,7 +14,7 @@
     @include tokens.state(active) {
         filter: none;
         opacity: 1;
-        transition-duration: 200ms;
+        transition-duration: var(--duration-moderate);
     }
 
     @include tokens.state(inactive) {
@@ -39,14 +40,18 @@
             position: absolute;
             top: var(--light-inset);
             transition:
-                background-color 300ms ease-out,
-                box-shadow 300ms ease-out;
+                background-color var(--duration-moderate) var(--easing-out),
+                box-shadow var(--duration-moderate) var(--easing-out);
             width: var(--light-size);
         }
     }
 
     &-live {
-        @extend %hidden-visually;
+        @extend %flex-vertical, %hidden-visually;
+    }
+
+    &-text {
+        @extend %flex-vertical;
     }
 
     @media (prefers-reduced-motion: reduce) {

package/src/components/capslock/scss/variables.scss

@@ -3,15 +3,13 @@
 .capslock {
     --font-size: var(--font-size-300);
     --gap-horizontal: var(--size-200);
-    --icon-height: 10px;
+    --icon-height: var(--size-200);
     --icon-width: 12px;
-    --light-color: var(--color-border-400);
+    --light-color: var(--surface-border-hover);
     --light-color-active: var(--color-green-400);
-    --light-inset: 3px;
+    --light-inset: calc(var(--size-300) / 4);
     --light-shadow: none;
     --light-size: 4px;
-    --transition-duration: 150ms;
-    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 
     @include tokens.state(active) {
         --light-color: var(--light-color-active);

package/src/components/card/scss/_expand.scss

@@ -1,33 +1,9 @@
-@use '/shared';
 @use '/tokens';
+@use 'css-utilities/reset';
+@use 'css-utilities/surface';
+@use 'css-utilities/text';
 @use 'variables';
 
-// Chained through '.card' so the base transition and padding, emitted after this file, can't override it.
-.card.card--expand {
-    align-items: flex-start;
-    border: 0;
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    font: inherit;
-    gap: 6px;
-    outline: none;
-    text-align: left;
-    touch-action: manipulation;
-    transition: scale 0.15s ease-out;
-    user-select: none;
-
-    @include tokens.state(pressed) {
-        scale: var(--pressed-scale);
-    }
-
-    &:focus-visible {
-        outline: 2px solid var(--focus-ring-color);
-        outline-offset: 2px;
-    }
-}
-
 .card-expand {
     @extend %reset-list;
     color: var(--text-color);
@@ -40,24 +16,20 @@
     &-close {
         flex-shrink: 0;
         height: var(--size);
-        margin: -8px -8px 0 0;
+        margin: calc(var(--size-100) * -1) calc(var(--size-100) * -1) 0 0;
         width: var(--size);
 
-        @include tokens.state(pressed) {
-            scale: 0.96;
-        }
-
         // Grows the hit area to 44px around the 32px circle.
         &::before {
             border-radius: inherit;
             content: '';
-            inset: -6px;
+            inset: calc(var(--size-300) / -2);
             position: absolute;
         }
 
         &:focus-visible {
             outline: 2px solid var(--focus-ring-color);
-            outline-offset: 2px;
+            outline-offset: calc(var(--size-100) / 4);
         }
     }
 
@@ -68,9 +40,9 @@
 
     &-detail {
         color: var(--muted-color);
-        font-size: 15px;
+        font-size: var(--font-size-400);
         line-height: 24px;
-        margin: 10px 0 0;
+        margin: var(--size-200) 0 0;
         text-wrap: pretty;
     }
 
@@ -86,7 +58,7 @@
     &-header {
         align-items: flex-start;
         display: flex;
-        gap: 16px;
+        gap: var(--size-400);
         justify-content: space-between;
     }
 
@@ -94,7 +66,7 @@
         align-items: flex-start;
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: calc(var(--size-100) / 2);
     }
 
     &-icon {
@@ -102,13 +74,22 @@
         width: 18px;
     }
 
+    // The view transition is the only motion; the overlay's own fade would play inside the snapshot.
+    &-item--morphing > .card.card-expand-dialog {
+        &,
+        &::backdrop {
+            transition: none;
+        }
+    }
+
     // Holds the slot at the card's exact size so the list never jumps, and marks where it returns to. The item's
     // classes are bound to the same state as its dialog's '--active' and land in the same flush, before the view
     // transition captures the new state; ':has()' on the dialog would restyle the whole document on every DOM change.
     // Chained through '.card' to outrank the card's own states, its pressed scale among them.
     &-item.--active > .card.card--expand {
-        --background: var(--slot-background);
-        --box-shadow: inset 0 0 0 var(--border-width-400) var(--slot-border-color);
+        @extend %surface-sunken-level;
+        --background-default: var(--surface-background-default);
+        --box-shadow-default: inset 0 0 0 var(--border-width-400) var(--slot-border-color);
         cursor: default;
         scale: 1;
 
@@ -117,18 +98,10 @@
         }
     }
 
-    // The view transition is the only motion; the overlay's own fade would play inside the snapshot.
-    &-item--morphing > .card.card-expand-dialog {
-        &,
-        &::backdrop {
-            transition: none;
-        }
-    }
-
     &-meta {
         color: var(--muted-color);
         flex-shrink: 0;
-        font-size: 13px;
+        font-size: var(--font-size-300);
         font-variant-numeric: tabular-nums;
         margin: 0;
         view-transition-name: var(--meta-transition-name, none);
@@ -144,7 +117,7 @@
     &-row {
         align-items: baseline;
         display: flex;
-        gap: 16px;
+        gap: var(--size-400);
         justify-content: space-between;
         width: 100%;
     }
@@ -152,15 +125,15 @@
     &-summary {
         @extend %text-truncate;
         color: var(--muted-color);
-        font-size: 14px;
+        font-size: var(--font-size-300);
         margin: 0;
         view-transition-name: var(--summary-transition-name, none);
 
         // In the open panel, where it shows in full.
         &--full {
-            font-size: 15px;
+            font-size: var(--font-size-400);
             line-height: 24px;
-            margin-top: 16px;
+            margin-top: var(--size-400);
             white-space: normal;
         }
     }
@@ -168,8 +141,8 @@
     &-title {
         @extend %text-truncate;
         color: var(--text-color);
-        font-size: 15px;
-        font-weight: 500;
+        font-size: var(--font-size-400);
+        font-weight: var(--font-weight-500);
         margin: 0;
         view-transition-name: var(--title-transition-name, none);
     }
@@ -197,28 +170,49 @@
     }
 }
 
+// Chained through '.card' so the base transition and padding, emitted after this file, can't override it.
+.card.card--expand {
+    align-items: flex-start;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    font: inherit;
+    gap: calc(var(--size-300) / 2);
+    outline: none;
+    text-align: left;
+    touch-action: manipulation;
+    user-select: none;
+
+    &:focus-visible {
+        outline: 2px solid var(--focus-ring-color);
+        outline-offset: calc(var(--size-100) / 4);
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .card.card--expand {
         transition: none;
     }
 }
 
+// The snapshots can't carry the shadow through a clip, so the box wears its own.
+::view-transition-group(card-expand) {
+    border-radius: variables.$expand-border-radius;
+    box-shadow: variables.$expand-transition-box-shadow;
+    overflow: clip;
+}
+
 ::view-transition-group(card-expand),
 ::view-transition-group(card-expand-meta),
 ::view-transition-group(card-expand-summary),
 ::view-transition-group(card-expand-title) {
-    animation-duration: 0.35s;
+    animation-duration: var(--duration-slow);
     // Critically damped spring: a card overshooting its own slot reads as a glitch, not play.
     animation-timing-function: linear(0, 0.0575, 0.1803, 0.3208, 0.4551, 0.5729, 0.6711, 0.7501, 0.8122, 0.8601, 0.8966, 0.924, 0.9445, 0.9596, 0.9708, 0.9789, 0.9848, 0.9891, 0.9922, 0.9944, 0.996, 0.9972, 0.998, 0.9986, 1);
 }
 
-// The snapshots can't carry the shadow through a clip, so the box wears its own.
-::view-transition-group(card-expand) {
-    border-radius: variables.$expand-border-radius;
-    box-shadow: variables.$expand-box-shadow;
-    overflow: clip;
-}
-
 // Kept at natural size: the growing box uncovers the dialog, and text moves without its glyphs being squashed.
 ::view-transition-new(card-expand),
 ::view-transition-new(card-expand-meta),
@@ -233,7 +227,7 @@
 
 @keyframes card-expand-reveal {
     from {
-        filter: blur(4px);
+        filter: blur(var(--blur-400));
         opacity: 0;
         translate: 0 4px;
     }