@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/button/scss/_morph.scss

@@ -0,0 +1,119 @@
+@use '/shared';
+@use '/tokens';
+
+// Compound selector so these win over `.button`, whose rules follow this partial.
+.button.button--morph {
+    border: 0;
+    display: inline-flex;
+    height: var(--morph-height);
+    outline: none;
+    overflow: hidden;
+    touch-action: manipulation;
+    transition:
+        background-color 200ms ease-out,
+        color 200ms ease-out,
+        scale 200ms ease-out;
+    user-select: none;
+
+    &:active:not([aria-disabled='true']) {
+        scale: var(--morph-scale-pressed);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--morph-focus-color);
+        outline-offset: 2px;
+    }
+
+    &[aria-disabled='true'] {
+        cursor: default;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        transition:
+            background-color 200ms ease-out,
+            color 200ms ease-out;
+
+        &:active:not([aria-disabled='true']) {
+            scale: 1;
+        }
+    }
+}
+
+.button--morph {
+    // Wait for the width to mostly open before shaking the settled shape.
+    &-error {
+        animation: button-morph-shake var(--morph-shake-duration) var(--morph-shake-easing) 150ms;
+    }
+
+    // Keyed off the status, since the icons are <svg>s, which take no dynamic class.
+    &-loading .button-morph-icon--loading,
+    &-success .button-morph-icon--success {
+        @extend %icon-swap-active;
+    }
+}
+
+.button-morph {
+    // Every layer shares one grid cell, so the idle width is the widest label;
+    // in the circle the cell overflows both sides equally and the button clips it.
+    &-content {
+        display: grid;
+        flex-shrink: 0;
+        place-items: center;
+    }
+
+    &-icon {
+        @extend %icon-stroke, %icon-swap;
+        grid-area: 1 / 1;
+        height: var(--morph-icon-size);
+        width: var(--morph-icon-size);
+    }
+
+    &-live {
+        @extend %hidden-visually;
+    }
+
+    // Turns about the icon box: the arc alone is off-centre, so its own box would wobble. The turn is the
+    // '.button--processing' keyframes, which '.button-icon--spin' shares too.
+    &-spinner {
+        animation: button--processing 700ms linear infinite;
+        transform-box: view-box;
+        transform-origin: center;
+    }
+
+    // Leaves in 150ms, before the width has closed on it; arrives in 200ms as it opens.
+    &-text {
+        filter: blur(4px);
+        grid-area: 1 / 1;
+        opacity: 0;
+        transition:
+            filter 150ms ease-out,
+            opacity 150ms ease-out;
+        white-space: nowrap;
+
+        @include tokens.state(active) {
+            filter: blur(0px);
+            opacity: 1;
+            transition-duration: 200ms;
+        }
+    }
+}
+
+
+// Swings that die away, like a head shaking no.
+@keyframes button-morph-shake {
+    0%, 100% {
+        translate: 0;
+    }
+    20% {
+        translate: -6px;
+    }
+    40% {
+        translate: 5px;
+    }
+    60% {
+        translate: -3px;
+    }
+    80% {
+        translate: 2px;
+    }
+}

package/src/components/button/scss/_sidebar.scss

@@ -0,0 +1,50 @@
+.button-sidebar {
+    // Hidden panels keep the divider slid out; hover and focus preview the opposite state.
+    &[aria-expanded='false'],
+    &[aria-expanded='true']:focus-visible {
+        --divider-x: var(--divider-travel);
+    }
+
+    &[aria-expanded='false']:focus-visible {
+        --divider-x: 0px;
+    }
+
+    @media (hover: hover) {
+        &[aria-expanded='false']:hover {
+            --divider-x: 0px;
+        }
+
+        &[aria-expanded='true']:hover {
+            --divider-x: var(--divider-travel);
+        }
+    }
+
+    // The frame clips the divider, so it disappears as it leaves rather than sliding past the glyph.
+    &-divider {
+        transform: translateX(var(--divider-x));
+        transition: transform var(--divider-duration) ease;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
+
+    // Chained through '.icon' so it wins over the icon's own size and fill regardless of stylesheet order.
+    &-icon.icon {
+        --size: var(--icon-size);
+
+        // Drawn in strokes, with fills set per path, where the icon would fill the whole SVG.
+        .button-sidebar-graphic {
+            fill: none;
+            overflow: hidden;
+        }
+    }
+
+    &-shadow {
+        opacity: var(--shadow-opacity);
+    }
+
+    &--right &-graphic {
+        scale: -1 1;
+    }
+}

package/src/components/button/scss/_split.scss

@@ -0,0 +1,53 @@
+.button-split {
+    align-items: stretch;
+    display: inline-flex;
+    isolation: isolate;
+
+
+    &-chevron {
+        transition: rotate var(--chevron-duration) var(--chevron-timing-function);
+    }
+
+    &-menu {
+        display: flex;
+
+        // Hangs from the trigger's end edge so it stays under the whole group.
+        > .tooltip-menu-panel:not(.tooltip-menu-panel--expand) {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    > .button-split-action {
+        border-end-end-radius: 0;
+        border-start-end-radius: 0;
+    }
+
+    // Overlaps the shared edge so the two borders read as one divider.
+    > .button-split-menu > .button-split-trigger {
+        --padding-horizontal: var(--trigger-padding-horizontal);
+        border-end-start-radius: 0;
+        border-start-start-radius: 0;
+        margin-inline-start: calc(var(--border-width) * -1);
+
+        &[aria-expanded='true'] .button-split-chevron {
+            rotate: 180deg;
+        }
+    }
+
+    > .button-split-action,
+    > .button-split-menu > .button-split-trigger {
+        &:focus-visible {
+            outline: var(--focus-width) solid var(--focus-color);
+            outline-offset: var(--focus-offset);
+            z-index: 1;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-chevron {
+            transition: none;
+        }
+    }
+}

package/src/components/button/scss/index.scss

@@ -1,12 +1,14 @@
-@use '/lib';
+@use '/shared';
 @use '/tokens';
 @use 'fan';
 @use 'kbd';
+@use 'morph';
+@use 'sidebar';
+@use 'split';
 @use 'variables';
-@use '../../text/scss/index';
 
 .button {
-    @extend .text;
+    @extend %background-state, %border-state, %color-state, %text;
     align-content: center;
     align-items: center;
     background: var(--background);
@@ -16,22 +18,21 @@
     justify-content: center;
     padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
     padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
-    transition: all var(--transition-duration) var(--transition-timing-function);
+    transition:
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        box-shadow var(--transition-duration) var(--transition-timing-function),
+        color var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        scale var(--transition-duration) var(--transition-timing-function),
+        translate var(--transition-duration) var(--transition-timing-function);
     white-space: nowrap;
     translate: 0;
 
 
     // Pseudo Element Box Shadow
     &::after {
-        @include lib.position(absolute, full);
-        border-radius: inherit;
-        box-shadow: var(--box-shadow);
-        content: '';
-        pointer-events: none;
-        transition:
-            box-shadow var(--transition-duration) var(--transition-timing-function),
-            opacity var(--transition-duration) var(--transition-timing-function);
-        z-index: -1;
+        @extend %layer-box-shadow;
     }
 
 
@@ -62,6 +63,10 @@
     }
 
     &--kbd {
+        font-family: inherit;
+        min-height: var(--kbd-size);
+        min-width: var(--kbd-size);
+
         @include tokens.state(active pressed) {
             translate: 0 1px;
         }
@@ -72,7 +77,7 @@
         pointer-events: none;
 
         &::before {
-            @include lib.position(absolute, center);
+            @extend %absolute-center;
             animation: button--processing var(--animation-duration) infinite linear;
             border: var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);
             border-left-color: var(--processing-color);
@@ -158,21 +163,21 @@
             translate var(--face-duration) var(--face-timing-function);
         translate: 0 var(--face-offset);
 
-        &.--active {
+        @include tokens.state(active) {
             filter: blur(0);
             opacity: 1;
             translate: 0;
 
-            .button-icon--draw path {
+            .button-icon--draw {
                 stroke-dashoffset: 0;
             }
         }
 
-        &[data-tone='error'] .button-icon {
+        &.button-face--error .button-icon {
             color: var(--error-color);
         }
 
-        &[data-tone='success'] .button-icon {
+        &.button-face--success .button-icon {
             color: var(--success-color);
         }
     }
@@ -183,24 +188,24 @@
     }
 
     &-fill {
-        @include lib.position(absolute, full);
+        @extend %layer;
         background: var(--fill-background);
-        border-radius: inherit;
         clip-path: inset(0 100% 0 0);
         color: var(--fill-color);
         display: grid;
         place-items: center;
-        pointer-events: none;
     }
 
+    // Sprite icons carry their own stroke; these reach the shared check, which carries none. The dash values inherit
+    // into the sprite, so '--draw' icons still draw in.
     &-icon {
+        @extend %icon-stroke;
         flex-shrink: 0;
         height: var(--icon-size);
         width: var(--icon-size);
 
-        &--draw path {
-            stroke-dasharray: 1;
-            stroke-dashoffset: 1;
+        &--draw {
+            @extend %icon-stroke-draw;
             transition: stroke-dashoffset var(--draw-duration) var(--draw-timing-function);
         }
 
@@ -210,12 +215,15 @@
     }
 
     &-status {
-        clip-path: inset(50%);
-        height: 1px;
-        overflow: hidden;
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
+        @extend %hidden-visually;
+    }
+
+    // An icon resolves '--color' itself rather than inheriting the label's eased colour, so it eases alongside. Zero
+    // specificity, so an icon's own transition wins.
+    :where(&) :where(.icon) {
+        transition:
+            color var(--transition-duration) var(--transition-timing-function),
+            opacity var(--transition-duration) var(--transition-timing-function);
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -225,8 +233,14 @@
         }
 
         &-face,
-        &-icon--draw path {
+        &-icon--draw {
             transition: none;
         }
+
+        &--kbd {
+            @include tokens.state(active pressed) {
+                translate: none;
+            }
+        }
     }
 }

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

@@ -1,38 +1,10 @@
-@use '/lib';
 @use '/tokens';
 
 .button {
-    --background: var(--background-default);
-    --background-active: var(--background-default);
-    --background-default: transparent;
-    --background-hover: var(--background-default);
-    --background-pressed: var(--background-default);
-    --border-color: var(--border-color-default);
-    --border-color-active: var(--border-color-default);
     --border-color-default: var(--background);
-    --border-color-hover: var(--border-color-default);
-    --border-color-pressed: var(--border-color-default);
     --box-shadow: var(--box-shadow-default);
     --box-shadow-default: none;
 
-    @include tokens.state(active) {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --color: var(--color-active);
-    }
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-        --border-color: var(--border-color-hover);
-        --color: var(--color-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-        --border-color: var(--border-color-pressed);
-        --color: var(--color-pressed);
-    }
-
 
     &--feedback {
         --draw-duration: 0.26s;
@@ -55,18 +27,78 @@
         --fill-color: var(--background);
     }
 
-    // The bottom shadow is the cap's side wall; pressing sinks the cap 1px into it.
-    &--kbd {
-        --box-shadow-default: 0 var(--kbd-depth) 0 var(--kbd-shadow-color);
-        --kbd-depth: 2px;
-        --kbd-shadow-color: color-mix(in srgb, var(--background-default) 60%, black);
+    // Leaves the surface alone and sweeps colour through the label only.
+    &--hold-text {
+        --fill-background: transparent;
+        --fill-color: var(--color-primary-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);
+        --border-radius: var(--border-radius-300);
+        --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);
+        --color-default: var(--color-text-300);
+        --font-size: calc(var(--font-size-300) * 0.95);
+        --kbd-border-color: var(--color-border-300);
+        --kbd-size: 24px;
+        --line-height: 1;
+        --padding-horizontal: 6px;
+        --padding-vertical: 0px;
+        --transition-duration: 0.3s;
+        --transition-timing-function: ease-out;
+
+        // Lights instantly and releases with the slower fade.
         @include tokens.state(active pressed) {
             --background: var(--background-active);
-            --box-shadow: 0 calc(var(--kbd-depth) - 1px) 0 var(--kbd-shadow-color);
+            --box-shadow: none;
+            --color: var(--color-active);
+            --transition-duration: 0s;
         }
     }
 
+    &--morph {
+        --background-default: var(--morph-background);
+        --border-radius: 999px;
+        --color-default: var(--morph-color);
+        --font-size: var(--morph-font-size);
+        --font-weight: var(--font-weight-500);
+        --icon-swap-duration: 300ms;
+        --icon-swap-timing-function: var(--morph-spring);
+        --line-height: 20px;
+        --morph-background: var(--color-text-500);
+        --morph-background-error: var(--color-red-500);
+        --morph-color: var(--color-white-300);
+        --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-height: 40px;
+        --morph-icon-size: 16px;
+        // JS measures the width morph; CSS owns the failed-save shake.
+        --morph-resize-duration: 300ms;
+        --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;
+        --padding-vertical: 0px;
+
+        @media (prefers-reduced-motion: reduce) {
+            --morph-resize-duration: 0s;
+            --morph-shake-duration: 0s;
+        }
+    }
+
+    &--morph-error {
+        --background-default: var(--morph-background-error);
+        --color-default: var(--morph-color-error);
+    }
+
     &--processing {
         --animation-duration: 0.64s;
         --border-width: var(--border-width-400);
@@ -126,3 +158,22 @@
     --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;
+}
+
+.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);
+}

package/src/components/button/sidebar.ts

@@ -0,0 +1,60 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+
+
+type A = Attributes & {
+    'aria-expanded'?: never;
+    // Whether the panel the button toggles is showing.
+    open: boolean | (() => boolean);
+    // The edge the panel sits on; the glyph mirrors for 'right'.
+    side?: 'left' | 'right' | (() => 'left' | 'right');
+};
+
+
+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.
+export default component(
+    ({ open, side = 'left', ...attributes }: A) => {
+        let clip = `button-sidebar-${++uid}`;
+
+        return html`
+            <button
+                class='button button-sidebar'
+                type='button'
+                ${attributes}
+                ${{
+                    'aria-expanded': () => String(read(open)),
+                    class: () => read(side) === 'right' && 'button-sidebar--right'
+                }}
+            >
+                <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>
+                </span>
+            </button>
+        `;
+    }
+);

package/src/components/button/split.ts

@@ -0,0 +1,60 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import tooltip from '~/components/tooltip';
+import type { A as MenuAttributes } from '~/components/tooltip/menu';
+import chevronSvg from '@esportsplus/ui/svg/chevron-down.svg';
+
+
+const SPLIT_ACTION = Symbol.for('@esportsplus/ui/button.split.action');
+
+const SPLIT_ITEM = Symbol.for('@esportsplus/ui/button.split.item');
+
+const SPLIT_PANEL = Symbol.for('@esportsplus/ui/button.split.panel');
+
+const SPLIT_TRIGGER = Symbol.for('@esportsplus/ui/button.split.trigger');
+
+
+type A = Attributes & Pick<MenuAttributes, 'animate' | 'controller' | 'expand' | 'items' | 'onselect' | 'openOn' | 'state'> & {
+    [SPLIT_ACTION]?: Attributes,
+    [SPLIT_ITEM]?: Attributes,
+    [SPLIT_PANEL]?: Attributes,
+    [SPLIT_TRIGGER]?: Attributes & { onclick?: never },
+    trigger?: Renderable<unknown>
+};
+
+
+const chevron = () => html`<svg aria-hidden='true' class='button-icon button-split-chevron'><use href='#${chevronSvg}' /></svg>`;
+
+
+export default component(
+    ({ animate, controller, expand, items, onselect, openOn, state, trigger, ...attributes }: A, content) => {
+        return html`
+            <div class='button-split' role='group' ${attributes}>
+                <button class='button button-split-action' type='button' ${attributes[SPLIT_ACTION]}>
+                    ${content}
+                </button>
+
+                ${tooltip.menu(
+                    {
+                        animate,
+                        class: 'button-split-menu',
+                        controller,
+                        expand,
+                        items,
+                        onselect,
+                        openOn,
+                        state,
+                        [tooltip.menu.item]: attributes[SPLIT_ITEM],
+                        [tooltip.menu.panel]: attributes[SPLIT_PANEL],
+                        [tooltip.menu.trigger]: {
+                            'aria-label': 'More options',
+                            ...attributes[SPLIT_TRIGGER],
+                            class: ['button button-split-trigger', attributes[SPLIT_TRIGGER]?.class ?? []].flat()
+                        }
+                    },
+                    trigger ?? chevron()
+                )}
+            </div>
+        `;
+    },
+    { action: SPLIT_ACTION, item: SPLIT_ITEM, panel: SPLIT_PANEL, trigger: SPLIT_TRIGGER }
+);