@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/dock/scss/index.scss

@@ -0,0 +1,102 @@
+@use '/tokens';
+@use 'variables';
+
+.dock {
+    align-items: flex-end;
+    background: var(--background);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow);
+    display: flex;
+    gap: var(--gap);
+    height: var(--height);
+    padding: 0 var(--padding) var(--padding);
+
+
+    // Width and height grow instead of scale on purpose: the neighbours have to move apart, not overlap.
+    &-button {
+        --size: var(--size-rest);
+        align-items: center;
+        background: var(--item-background);
+        border: 0;
+        border-radius: var(--item-radius);
+        box-shadow: var(--item-box-shadow);
+        color: var(--item-color);
+        cursor: pointer;
+        display: flex;
+        flex-shrink: 0;
+        height: var(--size);
+        justify-content: center;
+        outline: none;
+        position: relative;
+        // Lands on its base, so the squash spreads along the dock.
+        transform-origin: 50% 100%;
+        transition: scale 0.15s ease-out;
+        width: var(--size);
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--item-color);
+            outline-offset: 2px;
+        }
+
+        svg {
+            height: calc(var(--size) * var(--icon-ratio));
+            width: calc(var(--size) * var(--icon-ratio));
+        }
+    }
+
+    &-item.tooltip {
+        cursor: default;
+        display: flex;
+        flex-shrink: 0;
+    }
+
+    &-label.tooltip-message {
+        --border-radius: var(--border-radius-300);
+        --box-shadow: none;
+        --font-weight: var(--font-weight-500);
+        --offset: 4px;
+        --padding-horizontal: 8px;
+        --padding-vertical: 4px;
+        --spacer: 12px;
+        --transition-duration: 0.15s;
+        --transition-timing-function: ease-out;
+
+        // Once a label is up, moving along the dock swaps it with no animation.
+        &.--instant {
+            transition: none;
+        }
+    }
+
+    &-light {
+        background: var(--light-color);
+        border-radius: 50%;
+        height: var(--light-size);
+        left: 50%;
+        margin: 4px 0 0 calc(var(--light-size) / -2);
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        scale: 0.5;
+        top: 100%;
+        transition:
+            opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1),
+            scale 0.15s cubic-bezier(0.23, 1, 0.32, 1);
+        width: var(--light-size);
+
+        @include tokens.state(active) {
+            opacity: 1;
+            scale: 1;
+            transition-delay: var(--light-delay);
+            transition-duration: 0.2s;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        --light-delay: 0s;
+    }
+}

package/src/components/dock/scss/variables.scss

@@ -0,0 +1,30 @@
+.dock {
+    --background: var(--color-grey-400);
+    --box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-200);
+    --gap: 8px;
+    --height: 64px;
+    --icon-ratio: 0.45;
+    --item-background: var(--color-white-300);
+    --item-box-shadow: 0 0 0 var(--border-width-400) var(--color-border-300), var(--box-shadow-100);
+    --item-color: var(--color-text-500);
+    --item-radius: 999px;
+    --light-color: var(--color-text-500);
+    // The running light comes on as the icon first lands (0.55 of the 700ms hop), not on click.
+    --light-delay: 0.385s;
+    --light-size: 4px;
+    --padding: 12px;
+    --radius: 999px;
+    // Read by the magnification spring (JS) when the dock connects.
+    --size-peak: 72px;
+    --size-rest: 40px;
+
+
+    &--square {
+        --item-radius: var(--border-radius-600);
+        --radius: var(--border-radius-700);
+    }
+
+    &--subtle {
+        --size-peak: 54px;
+    }
+}

package/src/components/dynamic-island/index.ts

@@ -0,0 +1,161 @@
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { effect, reactive, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+const DYNAMIC_ISLAND_TOGGLE = Symbol.for('@esportsplus/ui/dynamic-island.toggle');
+
+
+type A = Attributes & {
+    [DYNAMIC_ISLAND_TOGGLE]?: Attributes;
+    state?: State;
+};
+
+type Mode = 'idle' | 'music' | 'ring' | 'timer';
+
+type State = {
+    artist: string;
+    elapsed: number;
+    mode: Mode;
+    playing: boolean;
+    title: string;
+};
+
+
+// Uneven durations and negative delays so the bars never fall into step; `rest` is the static height
+// shown under reduced motion.
+const BARS = [
+    { delay: -120, duration: 520, rest: 0.55 },
+    { delay: -400, duration: 760, rest: 0.9 },
+    { delay: -250, duration: 610, rest: 0.4 },
+    { delay: -600, duration: 840, rest: 0.7 }
+];
+
+
+function describe(mode: Mode, playing: boolean, elapsed: number, title: string) {
+    if (mode === 'timer') {
+        return `Timer, ${Math.floor(elapsed / 60)}:${pad(elapsed % 60)}`;
+    }
+
+    if (mode === 'music') {
+        return `${playing ? 'Playing' : 'Paused'}, ${title}`;
+    }
+
+    if (mode === 'ring') {
+        return 'Ringer on';
+    }
+
+    return 'Idle';
+}
+
+function format(seconds: number) {
+    return `${pad(Math.floor(seconds / 60))}:${pad(seconds % 60)}`;
+}
+
+function pad(value: number) {
+    return String(value).padStart(2, '0');
+}
+
+
+function template(
+    this: { attributes?: Partial<A> } | void,
+    { state = reactive({ artist: 'M83', elapsed: 0, mode: 'idle' as Mode, playing: true, title: 'Midnight City' }), ...attributes }: A = {}
+) {
+    let bound = this?.attributes,
+        stop: VoidFunction | undefined,
+        view = reactive({ announcement: '' });
+
+    function content(mode: Mode, children: Renderable<unknown>) {
+        return html`
+            <div
+                class='dynamic-island-content dynamic-island-content--${mode} ${() => state.mode === mode && '--active'}'
+                inert='${() => state.mode !== mode}'
+            >
+                ${children}
+            </div>
+        `;
+    }
+
+    return html`
+        <div
+            class='dynamic-island ${() => `dynamic-island--${state.mode}`}'
+            ${bound}
+            ${attributes}
+            ${{
+                onconnect: () => {
+                    let initial = true;
+
+                    // Announced once per change rather than on every tick, so a screen reader is not read
+                    // the clock every second.
+                    stop = effect(() => {
+                        let mode = state.mode,
+                            playing = state.playing;
+
+                        if (initial) {
+                            initial = false;
+                            return;
+                        }
+
+                        view.announcement = untrack(() => describe(mode, playing, state.elapsed, state.title));
+                    });
+                },
+                ondisconnect: () => {
+                    stop?.();
+                }
+            }}
+        >
+            <div class='dynamic-island-pill'>
+                ${content('idle', html`<span class='dynamic-island-lens'></span>`)}
+                ${content('timer', html`
+                    <svg aria-hidden='true' class='dynamic-island-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'>
+                        <circle cx='8' cy='9' r='5.25' />
+                        <path d='M8 6.5V9l1.5 1.25M6.5 1.75h3' />
+                    </svg>
+                    <span class='dynamic-island-time'>${() => format(state.elapsed)}</span>
+                `)}
+                ${content('ring', html`
+                    <svg aria-hidden='true' class='dynamic-island-icon dynamic-island-bell' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'>
+                        <path d='M4 11.25V7.5a4 4 0 0 1 8 0v3.75l1 1H3Z' />
+                        <path d='M6.75 13.75a1.25 1.25 0 0 0 2.5 0' />
+                    </svg>
+                    <span class='dynamic-island-label'>Ringer on</span>
+                `)}
+                ${content('music', html`
+                    <div class='dynamic-island-track'>
+                        <span class='dynamic-island-title'>${() => state.title}</span>
+                        <span class='dynamic-island-artist'>${() => state.artist}</span>
+                    </div>
+                    <span aria-hidden='true' class='dynamic-island-eq ${() => !state.playing && '--paused'}'>
+                        ${BARS.map((bar) => html`
+                            <span style='${`--rest: ${bar.rest}; animation-delay: ${bar.delay}ms; animation-duration: ${bar.duration}ms;`}'></span>
+                        `)}
+                    </span>
+                    <button
+                        aria-label='${() => state.playing ? 'Pause' : 'Play'}'
+                        class='dynamic-island-toggle ${() => state.playing && '--playing'}'
+                        type='button'
+                        ${bound?.[DYNAMIC_ISLAND_TOGGLE]}
+                        ${attributes[DYNAMIC_ISLAND_TOGGLE]}
+                        ${{
+                            onclick: () => {
+                                state.playing = !state.playing;
+                            }
+                        }}
+                    >
+                        <svg aria-hidden='true' class='dynamic-island-play' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'>
+                            <path d='M5.5 3.5v9l7-4.5Z' fill='currentColor' />
+                        </svg>
+                        <svg aria-hidden='true' class='dynamic-island-pause' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'>
+                            <path d='M5 3.5v9M11 3.5v9' />
+                        </svg>
+                    </button>
+                `)}
+            </div>
+            <span aria-live='polite' class='dynamic-island-sr'>${() => view.announcement}</span>
+        </div>
+    `;
+}
+
+
+export default Object.assign(template, { toggle: DYNAMIC_ISLAND_TOGGLE } as const);
+export type { Mode as DynamicIslandMode, State as DynamicIslandState };

package/src/components/dynamic-island/scss/index.scss

@@ -0,0 +1,278 @@
+@use 'variables';
+
+// Fixed to the tallest state and anchored at the top, so the island grows down and out symmetrically
+// and nothing below it ever moves.
+.dynamic-island {
+    display: flex;
+    height: max(var(--idle-height), var(--music-height), var(--ring-height), var(--timer-height));
+    justify-content: center;
+    position: relative;
+    width: 100%;
+
+    &-artist {
+        color: oklch(from var(--color) l c h / 0.6);
+        font-size: 14px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-bell {
+        transform-origin: 50% 15%;
+    }
+
+    // Each state's content is laid out at its own final size and centered, so text never reflows while
+    // the pill morphs around it; the pill clips it until the shape catches up. Old content clears out
+    // fast and the new one waits a beat, so the two never read as overlapping text.
+    &-content {
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        filter: blur(4px);
+        gap: 16px;
+        height: var(--height);
+        left: 0;
+        margin: 0 auto;
+        max-width: var(--max-width);
+        opacity: 0;
+        padding: 0 18px;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        scale: 0.95;
+        top: 0;
+        transition:
+            filter var(--content-exit-duration) var(--ease-out),
+            opacity var(--content-exit-duration) var(--ease-out),
+            scale 0s var(--content-exit-duration),
+            visibility 0s var(--content-exit-duration);
+        visibility: hidden;
+        width: var(--width);
+
+        @each $mode in idle, music, ring, timer {
+            &--#{$mode} {
+                --height: var(--#{$mode}-height);
+                --width: var(--#{$mode}-width);
+            }
+        }
+
+        &--music {
+            padding: 0 24px;
+        }
+
+        &.--active {
+            filter: blur(0);
+            opacity: 1;
+            pointer-events: auto;
+            scale: 1;
+            transition:
+                filter var(--content-duration) var(--ease-out) var(--content-delay),
+                opacity var(--content-duration) var(--ease-out) var(--content-delay),
+                scale var(--content-duration) var(--ease-out) var(--content-delay);
+            visibility: visible;
+        }
+    }
+
+    &-content--ring.--active &-bell {
+        animation: dynamic-island-bell 0.6s ease-in-out 0.15s;
+    }
+
+    // An endless loop nothing interrupts; pausing freezes the bars in place rather than snapping them.
+    &-eq {
+        align-items: flex-end;
+        display: flex;
+        gap: 4px;
+        height: 20px;
+
+        span {
+            animation: dynamic-island-eq ease-in-out infinite alternate;
+            background: var(--color);
+            border-radius: 999px;
+            height: 100%;
+            scale: 1 var(--rest);
+            transform-origin: bottom;
+            width: 4px;
+        }
+
+        &.--paused span {
+            animation-play-state: paused;
+        }
+    }
+
+    &-icon {
+        flex-shrink: 0;
+        height: 20px;
+        width: 20px;
+    }
+
+    &-label {
+        font-size: 14px;
+        font-weight: 500;
+        margin-left: auto;
+    }
+
+    // A faint lens, like the camera sitting in the real cutout.
+    &-lens {
+        background: oklch(from var(--color) l c h / 0.15);
+        border-radius: 999px;
+        height: 12px;
+        margin-left: auto;
+        width: 12px;
+    }
+
+    &-pause,
+    &-play {
+        grid-area: 1 / 1;
+        height: 20px;
+        transition:
+            filter 0.3s var(--spring),
+            opacity 0.3s var(--spring),
+            scale 0.3s var(--spring);
+        width: 20px;
+    }
+
+    &-pause,
+    &-toggle.--playing &-play {
+        filter: blur(4px);
+        opacity: 0;
+        scale: 0.25;
+    }
+
+    &-toggle.--playing &-pause {
+        filter: blur(0);
+        opacity: 1;
+        scale: 1;
+    }
+
+    &-pill {
+        background: var(--background);
+        border-radius: var(--shape-radius);
+        color: var(--color);
+        height: var(--shape-height);
+        max-width: var(--max-width);
+        overflow: hidden;
+        position: relative;
+        transition:
+            border-radius var(--morph-duration) var(--morph-easing),
+            height var(--morph-duration) var(--morph-easing),
+            width var(--morph-duration) var(--morph-easing);
+        width: var(--shape-width);
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-time {
+        font-size: 15px;
+        font-variant-numeric: tabular-nums;
+        font-weight: 600;
+        margin-left: auto;
+    }
+
+    &-title {
+        font-size: 15px;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-toggle {
+        background: transparent;
+        border: 0;
+        border-radius: 999px;
+        color: inherit;
+        cursor: pointer;
+        display: grid;
+        flex-shrink: 0;
+        height: 44px;
+        margin-right: -6px;
+        outline: none;
+        padding: 0;
+        place-items: center;
+        touch-action: manipulation;
+        transition:
+            background-color 0.15s ease-out,
+            scale 0.15s ease-out;
+        width: 44px;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-ring-color);
+        }
+
+        &:hover {
+            background: oklch(from var(--color) l c h / 0.1);
+        }
+    }
+
+    &-track {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --morph-duration: 0.3s;
+        --morph-easing: var(--spring);
+
+        &-content,
+        &-content.--active,
+        &-pause,
+        &-toggle.--playing &-play {
+            filter: none;
+            scale: 1;
+        }
+
+        &-content--ring.--active &-bell,
+        &-eq span {
+            animation: none;
+        }
+
+        &-toggle {
+            transition: background-color 0.15s ease-out;
+        }
+    }
+}
+
+@keyframes dynamic-island-bell {
+    0%, 100% {
+        rotate: 0deg;
+    }
+
+    20% {
+        rotate: -16deg;
+    }
+
+    40% {
+        rotate: 13deg;
+    }
+
+    60% {
+        rotate: -9deg;
+    }
+
+    80% {
+        rotate: 5deg;
+    }
+}
+
+@keyframes dynamic-island-eq {
+    from {
+        scale: 1 0.3;
+    }
+
+    to {
+        scale: 1 1;
+    }
+}

package/src/components/dynamic-island/scss/variables.scss

@@ -0,0 +1,39 @@
+.dynamic-island {
+    --background: var(--color-text-500);
+    --color: var(--color-white-300);
+    --content-delay: 0.08s;
+    --content-duration: 0.25s;
+    --content-exit-duration: 0.12s;
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --focus-ring-color: var(--color-white-300);
+    --idle-height: 42px;
+    --idle-radius: 21px;
+    --idle-width: 156px;
+    // Caps the widest shape at the viewport minus the page gutters.
+    --max-width: calc(100vw - 2rem);
+    // Spring with a 0.4s visual duration and 0.25 bounce: the elastic settle Apple uses for the island.
+    --morph-duration: 0.7s;
+    --morph-easing: linear(0, 0.0234, 0.0831, 0.1661, 0.2617, 0.3622, 0.4617, 0.5561, 0.6426, 0.7198, 0.7869, 0.8439, 0.8913, 0.9297, 0.96, 0.9833, 1.0005, 1.0127, 1.0208, 1.0257, 1.0279, 1.0283, 1.0273, 1.0254, 1.023, 1.0202, 1.0173, 1.0145, 1.0119, 1.0095, 1.0074, 1.0056, 1.004, 1.0028, 1.0017, 1.0009, 1.0003, 0.9999, 0.9996, 0.9994, 1);
+    --music-height: 100px;
+    --music-radius: 36px;
+    --music-width: 390px;
+    --ring-height: 46px;
+    --ring-radius: 23px;
+    --ring-width: 220px;
+    --shape-height: var(--idle-height);
+    --shape-radius: var(--idle-radius);
+    --shape-width: var(--idle-width);
+    // Critically damped spring (no bounce) sampled over its duration.
+    --spring: 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);
+    --timer-height: 46px;
+    --timer-radius: 23px;
+    --timer-width: 260px;
+
+    @each $mode in idle, music, ring, timer {
+        &--#{$mode} {
+            --shape-height: var(--#{$mode}-height);
+            --shape-radius: var(--#{$mode}-radius);
+            --shape-width: var(--#{$mode}-width);
+        }
+    }
+}