@esportsplus/ui 0.55.0 → 0.56.3

package/package.json

@@ -2,13 +2,13 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/action": "^0.1.8",
-    "@esportsplus/reactivity": "^0.36.7",
-    "@esportsplus/template": "^0.50.0",
-    "@esportsplus/utilities": "^0.28.5",
+    "@esportsplus/reactivity": "^0.38.0",
+    "@esportsplus/template": "^0.54.0",
+    "@esportsplus/utilities": "^0.28.6",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.35.1",
+    "@esportsplus/typescript": "^0.37.0",
     "@types/node": "^26.6.2",
     "@types/shelljs": "^0.10.0",
     "autoprefixer": "^10.6.1",
@@ -19,7 +19,7 @@
     "postcss-scss": "4.0.9",
     "sass": "^1.105.0",
     "shelljs": "^0.10.0",
-    "vite": "^8.3.0"
+    "vite": "^8.3.1"
   },
   "exports": {
     "./css-utilities.scss": "./build/css-utilities/index.scss",
@@ -58,7 +58,7 @@
     "**/*.scss"
   ],
   "type": "module",
-  "version": "0.55.0",
+  "version": "0.56.3",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/pnpm-workspace.yaml

@@ -11,13 +11,13 @@ allowBuilds:
 # first-party upgrades (reactivity, template, ...) be consumed immediately
 # instead of waiting out the release-age cutoff.
 minimumReleaseAgeExclude:
-  - '@esportsplus/typescript@0.34.1 || 0.34.2 || 0.34.3 || 0.34.4 || 0.35.1'
+  - '@esportsplus/typescript@0.34.1 || 0.34.2 || 0.34.3 || 0.34.4 || 0.35.1 || 0.36.1 || 0.37.0'
   - '@esportsplus/action@0.1.7 || 0.1.8'
   - '@esportsplus/queue@0.4.5 || 0.4.6'
-  - '@esportsplus/reactivity@0.36.4 || 0.36.6 || 0.36.7'
-  - '@esportsplus/template@0.44.4 || 0.44.6 || 0.45.0 || 0.45.1 || 0.45.3 || 0.46.1 || 0.46.2 || 0.46.3 || 0.46.4 || 0.46.5 || 0.46.6 || 0.48.1 || 0.49.0 || 0.50.0'
-  - '@esportsplus/utilities@0.28.3 || 0.28.4 || 0.28.5'
-  - '@esportsplus/vite@0.14.2 || 0.14.5 || 0.14.6'
+  - '@esportsplus/reactivity@0.36.4 || 0.36.6 || 0.36.7 || 0.37.0 || 0.37.2 || 0.38.0'
+  - '@esportsplus/template@0.44.4 || 0.44.6 || 0.45.0 || 0.45.1 || 0.45.3 || 0.46.1 || 0.46.2 || 0.46.3 || 0.46.4 || 0.46.5 || 0.46.6 || 0.48.1 || 0.49.0 || 0.50.0 || 0.51.0 || 0.52.1 || 0.54.0'
+  - '@esportsplus/utilities@0.28.3 || 0.28.4 || 0.28.5 || 0.28.6'
+  - '@esportsplus/vite@0.14.2 || 0.14.5 || 0.14.6 || 0.14.7 || 0.14.8'
   - '@esportsplus/*'
   # browserslist's data packages (pulled transitively via autoprefixer) republish daily, so a
   # fresh lockfile always pins a <24h version. They are data-only build-time deps, so exempt them

package/src/components/accordion/index.ts

@@ -1,9 +1,10 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html, component, type Attributes } from '@esportsplus/template';
+import more from './more';
 import './scss/index.scss';
 
 
-export default component<Attributes & { state?: { active: boolean | number } }>(
+const base = component<Attributes & { state?: { active: boolean | number } }>(
     function({ state = reactive({ active: false }), ...attributes }, content) {
         return html`
             <div
@@ -19,3 +20,8 @@ export default component<Attributes & { state?: { active: boolean | number } }>(
         `;
     }
 );
+
+const accordion: typeof base & { more: typeof more } = Object.assign(base, { more });
+
+
+export default accordion;

package/src/components/accordion/more.ts

@@ -0,0 +1,97 @@
+import { reactive } from '@esportsplus/reactivity';
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+
+
+const MORE_TRIGGER = Symbol.for('@esportsplus/ui/accordion.more.trigger');
+
+
+type A = Attributes & {
+    [MORE_TRIGGER]?: Attributes,
+    label?: string,
+    less?: Renderable<unknown>,
+    lines?: number,
+    maxHeight?: number,
+    more?: Renderable<unknown>,
+    onconnect?: never,
+    ondisconnect?: never,
+    state?: { active: boolean }
+};
+
+
+export default component(
+    ({
+        label = 'Expanded content',
+        less = 'Show less',
+        lines = 3,
+        maxHeight = 320,
+        more = 'Show more',
+        state = reactive({ active: false }),
+        ...attributes
+    }: A, content) => {
+        let id = `accordion-more-${crypto.randomUUID()}`,
+            measured = reactive({ clamped: false, height: 0 }),
+            observer: ResizeObserver | undefined,
+            scrollable = () => state.active && measured.height > maxHeight;
+
+        return html`
+            <div
+                class='accordion-more ${() => state.active && '--active'} ${() => measured.clamped && '--clamped'} ${() => scrollable() && '--scrollable'}'
+                ${attributes}
+                ${{
+                    onconnect: (element: HTMLElement) => {
+                        let body = element.querySelector<HTMLElement>('.accordion-more-body')!;
+
+                        observer = new ResizeObserver(() => {
+                            let computed = getComputedStyle(body),
+                                height = body.offsetHeight,
+                                line = parseFloat(computed.lineHeight) || parseFloat(computed.fontSize) * 1.2;
+
+                            measured.clamped = height > Math.ceil(line * lines);
+                            measured.height = height;
+                        });
+                        observer.observe(body);
+                    },
+                    ondisconnect: () => {
+                        observer?.disconnect();
+                    },
+                    style: () => `${measured.height ? `--height: ${measured.height}px; ` : ''}--lines: ${lines}; --max-height: ${maxHeight}px;`
+                }}
+            >
+                <div
+                    class='accordion-more-content'
+                    id='${id}'
+                    ${{
+                        'aria-label': () => scrollable() && label,
+                        role: () => scrollable() && 'region',
+                        tabindex: () => scrollable() && '0'
+                    }}
+                >
+                    <div class='accordion-more-body'>${content}</div>
+                </div>
+
+                <button
+                    aria-controls='${id}'
+                    class='accordion-more-trigger'
+                    type='button'
+                    ${attributes[MORE_TRIGGER]}
+                    ${{
+                        'aria-expanded': () => state.active ? 'true' : 'false',
+                        disabled: () => !measured.clamped,
+                        onclick: () => {
+                            state.active = !state.active;
+                        }
+                    }}
+                >
+                    <span class='accordion-more-trigger-label'>
+                        <span ${{ 'aria-hidden': () => state.active && 'true' }}>${more}</span>
+                        <span ${{ 'aria-hidden': () => !state.active && 'true' }}>${less}</span>
+                    </span>
+                    <svg class='accordion-more-trigger-icon' aria-hidden='true' viewBox='0 0 12 12'>
+                        <path d='M3 4.5 6 7.5 9 4.5' />
+                    </svg>
+                </button>
+            </div>
+        `;
+    },
+    { trigger: MORE_TRIGGER }
+);

package/src/components/accordion/scss/index.scss

@@ -1,5 +1,12 @@
 @use '/tokens';
 
+// Registered so the mask's fade length interpolates instead of snapping.
+@property --accordion-more-fade {
+    inherits: false;
+    initial-value: 0px;
+    syntax: '<length>';
+}
+
 .accordion {
     display: grid;
     grid-template-rows: 1fr;
@@ -13,4 +20,138 @@
         min-height: 0;
         overflow: hidden;
     }
+
+    &-more {
+        --fade-size: 2lh;
+        --focus-color: var(--color-blue-400);
+        --transition-duration: .48s;
+        --transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+        --trigger-transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+        display: flex;
+        flex-direction: column;
+        gap: var(--size-300);
+
+        // Content box height animates between two measured lengths; the body keeps
+        // its natural layout so text never reflows mid-transition.
+        &-content {
+            --accordion-more-fade: 0px;
+            height: min(var(--height, 100vh), calc(var(--lines) * 1lh));
+            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--accordion-more-fade)), transparent);
+            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--accordion-more-fade)), transparent);
+            overflow: hidden;
+            transition:
+                --accordion-more-fade calc(var(--transition-duration) / 2) var(--transition-timing-function),
+                height var(--transition-duration) var(--transition-timing-function);
+
+            &:focus-visible {
+                border-radius: var(--border-radius-300);
+                outline: var(--border-width-400) solid var(--focus-color);
+                outline-offset: var(--size-100);
+            }
+        }
+
+        &.--clamped:not(.--active) &-content {
+            --accordion-more-fade: var(--fade-size);
+        }
+
+        @include tokens.state(active) {
+            .accordion-more-content {
+                height: min(var(--height, var(--max-height)), var(--max-height));
+            }
+        }
+
+        &.--scrollable &-content {
+            overflow-y: auto;
+            overscroll-behavior: contain;
+        }
+
+        &-trigger {
+            align-items: center;
+            align-self: flex-start;
+            background: transparent;
+            border: var(--border-width-400) solid color-mix(in srgb, currentColor 16%, transparent);
+            border-radius: 999px;
+            color: inherit;
+            cursor: pointer;
+            display: inline-flex;
+            font: inherit;
+            font-size: var(--font-size-300);
+            gap: var(--size-200);
+            padding: var(--size-100) var(--size-300) var(--size-100) var(--size-400);
+            transition:
+                background-color .16s,
+                border-color .16s,
+                opacity .16s;
+
+            &:hover {
+                background: color-mix(in srgb, currentColor 6%, transparent);
+                border-color: color-mix(in srgb, currentColor 28%, transparent);
+            }
+
+            &:focus-visible {
+                outline: var(--border-width-400) solid var(--focus-color);
+                outline-offset: var(--size-100);
+            }
+
+            &:disabled {
+                opacity: 0;
+                pointer-events: none;
+                visibility: hidden;
+            }
+
+            &-icon {
+                fill: none;
+                height: 12px;
+                stroke: currentColor;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+                stroke-width: 1.5;
+                transition: rotate .4s var(--trigger-transition-timing-function);
+                width: 12px;
+            }
+
+            // Both labels share one grid cell so the pill sizes to the wider label
+            // and the swap crossfades in place.
+            &-label {
+                display: grid;
+
+                > span {
+                    grid-area: 1 / 1;
+                    transition:
+                        opacity .2s,
+                        translate .32s var(--trigger-transition-timing-function);
+                }
+
+                > span:last-child {
+                    opacity: 0;
+                    translate: 0 50%;
+                }
+            }
+        }
+
+        @include tokens.state(active) {
+            .accordion-more-trigger-icon {
+                rotate: 180deg;
+            }
+
+            .accordion-more-trigger-label > span:first-child {
+                opacity: 0;
+                translate: 0 -50%;
+            }
+
+            .accordion-more-trigger-label > span:last-child {
+                opacity: 1;
+                translate: 0 0;
+            }
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &-more-content,
+        &-more-trigger-icon,
+        &-more-trigger-label > span {
+            transition: none;
+        }
+    }
 }

package/src/components/anchor/scss/index.scss

@@ -7,7 +7,7 @@
     position: absolute;
     transition:
         opacity var(--transition-duration) var(--transition-timing-function),
-        transform var(--transition-duration) var(--transition-timing-function);
+        translate var(--transition-duration) var(--transition-timing-function);
     z-index: 9;
 
 
@@ -23,7 +23,7 @@
     &--n,
     &--s {
         right: 50%;
-        transform: translateX(50%);
+        translate: 50%;
     }
 
     &--ne,

package/src/components/announcement-banner/index.ts

@@ -0,0 +1,81 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [ANNOUNCEMENT_BANNER_CONTENT]?: Attributes;
+    [ANNOUNCEMENT_BANNER_DISMISS]?: Attributes;
+    icon?: Renderable<unknown>;
+    label?: string;
+    link?: { href: string, label: string };
+    ondismiss?: () => void;
+    state?: State;
+};
+
+type State = { open: boolean };
+
+
+const ANNOUNCEMENT_BANNER_CONTENT = Symbol.for('@esportsplus/ui/announcement-banner.content');
+
+const ANNOUNCEMENT_BANNER_DISMISS = Symbol.for('@esportsplus/ui/announcement-banner.dismiss');
+
+
+export default Object.assign(
+    component<A>(function(this, { icon, label = 'Announcement', link, ondismiss, state = reactive({ open: true }), ...attributes }, content) {
+        let opened = false,
+            returning = false;
+
+        return html`
+            <div
+                class='announcement-banner'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    class: () => {
+                        if (state.open) {
+                            opened = true;
+                        }
+                        else if (opened) {
+                            // After a dismissal, showing again reverses it instead of sliding in.
+                            returning = true;
+                        }
+
+                        return `${state.open ? '--active' : ''} ${returning ? 'announcement-banner--returning' : ''}`;
+                    }
+                }}
+            >
+                <div class='announcement-banner-clip'>
+                    <section
+                        aria-label='${label}'
+                        class='announcement-banner-content'
+                        tabindex='-1'
+                        ${{ inert: () => !state.open }}
+                        ${this?.attributes?.[ANNOUNCEMENT_BANNER_CONTENT]}
+                        ${attributes[ANNOUNCEMENT_BANNER_CONTENT]}
+                    >
+                        ${icon && html`<span aria-hidden='true' class='announcement-banner-icon'>${icon}</span>`}
+                        <p class='announcement-banner-text'>${content}</p>
+                        ${link && html`<a class='announcement-banner-link' href='${link.href}'>${link.label}</a>`}
+                        <button
+                            aria-label='Dismiss announcement'
+                            class='button announcement-banner-dismiss'
+                            type='button'
+                            onclick=${() => {
+                                state.open = false;
+                                ondismiss?.();
+                            }}
+                            ${this?.attributes?.[ANNOUNCEMENT_BANNER_DISMISS]}
+                            ${attributes[ANNOUNCEMENT_BANNER_DISMISS]}
+                        >
+                            <svg viewBox='0 0 16 16'>
+                                <path d='m4.5 4.5 7 7M11.5 4.5l-7 7' />
+                            </svg>
+                        </button>
+                    </section>
+                </div>
+            </div>
+        `;
+    }),
+    { content: ANNOUNCEMENT_BANNER_CONTENT, dismiss: ANNOUNCEMENT_BANNER_DISMISS } as const
+);

package/src/components/announcement-banner/scss/index.scss

@@ -0,0 +1,183 @@
+@use '/tokens';
+@use 'variables';
+
+.announcement-banner {
+    display: grid;
+    grid-template-rows: 0fr;
+    // Waits for the content to mostly fade, so the text never gets squeezed while readable.
+    transition: grid-template-rows 240ms var(--announcement-banner-drawer) 80ms;
+
+
+    &-clip {
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    &-content {
+        align-items: center;
+        background: var(--announcement-banner-background);
+        color: var(--announcement-banner-color);
+        display: flex;
+        filter: blur(2px);
+        flex-wrap: nowrap;
+        font-size: var(--announcement-banner-font-size);
+        gap: 10px;
+        height: var(--announcement-banner-height);
+        opacity: 0;
+        outline: none;
+        padding-inline: 16px 6px;
+        transition:
+            filter 120ms var(--announcement-banner-ease),
+            opacity 120ms var(--announcement-banner-ease);
+        translate: 0 -100%;
+    }
+
+    &-dismiss.button {
+        --background-default: transparent;
+        --background-hover: color-mix(in oklab, var(--announcement-banner-color) 15%, transparent);
+        --border-radius: 999px;
+        --color-default: color-mix(in oklab, var(--announcement-banner-color) 70%, transparent);
+        --color-hover: var(--announcement-banner-color);
+        --padding-horizontal: 0px;
+        --padding-vertical: 0px;
+
+        border: 0;
+        flex-shrink: 0;
+        height: 32px;
+        margin-inline-start: auto;
+        outline: none;
+        touch-action: manipulation;
+        transition:
+            background-color 150ms ease-out,
+            color 150ms ease-out,
+            scale 150ms ease-out;
+        user-select: none;
+        width: 32px;
+
+        // Grows the hit area to 40px without growing the circle.
+        &::before {
+            border-radius: 999px;
+            content: '';
+            inset: -4px;
+            position: absolute;
+        }
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--announcement-banner-color);
+        }
+
+        svg {
+            fill: none;
+            height: var(--announcement-banner-icon-size);
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-width: 1.5;
+            width: var(--announcement-banner-icon-size);
+        }
+    }
+
+    &-icon {
+        display: flex;
+        flex-shrink: 0;
+
+        svg {
+            fill: none;
+            height: var(--announcement-banner-icon-size);
+            stroke: currentColor;
+            stroke-linejoin: round;
+            stroke-width: 1.5;
+            width: var(--announcement-banner-icon-size);
+        }
+    }
+
+    &-link {
+        border-radius: var(--border-radius-100);
+        color: inherit;
+        flex-shrink: 0;
+        font-weight: var(--font-weight-500);
+        outline: none;
+        text-decoration: underline;
+        text-decoration-color: color-mix(in oklab, var(--announcement-banner-color) 40%, transparent);
+        text-underline-offset: 3px;
+        transition: text-decoration-color 150ms ease-out;
+
+        &:hover {
+            text-decoration-color: var(--announcement-banner-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--announcement-banner-color);
+            outline-offset: 2px;
+        }
+    }
+
+    &-text {
+        flex: 0 1 auto;
+        margin: 0;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: auto;
+    }
+
+
+    &--returning {
+        .announcement-banner-content {
+            translate: 0 0;
+        }
+    }
+
+
+    @include tokens.state(active) {
+        grid-template-rows: 1fr;
+        transition: grid-template-rows 280ms var(--announcement-banner-drawer);
+
+        .announcement-banner-content {
+            filter: blur(0px);
+            opacity: 1;
+            transition:
+                filter 200ms var(--announcement-banner-ease),
+                opacity 200ms var(--announcement-banner-ease),
+                translate 280ms var(--announcement-banner-drawer);
+            translate: 0 0;
+        }
+
+        // Starts once the space has mostly opened.
+        &.announcement-banner--returning .announcement-banner-content {
+            transition:
+                filter 200ms var(--announcement-banner-ease) 120ms,
+                opacity 200ms var(--announcement-banner-ease) 120ms;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &.--active {
+            transition: none;
+        }
+
+        .announcement-banner-content,
+        &.--active .announcement-banner-content,
+        &.--active.announcement-banner--returning .announcement-banner-content {
+            filter: none;
+            transition: opacity 200ms var(--announcement-banner-ease);
+            translate: 0 0;
+        }
+
+        &-dismiss.button {
+            transition:
+                background-color 150ms ease-out,
+                color 150ms ease-out;
+
+            &:active {
+                scale: 1;
+            }
+        }
+    }
+}

package/src/components/announcement-banner/scss/variables.scss

@@ -0,0 +1,18 @@
+.announcement-banner {
+    --announcement-banner-background: var(--color-text-500);
+    --announcement-banner-color: var(--color-white-300);
+    --announcement-banner-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+    --announcement-banner-ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --announcement-banner-font-size: 14px;
+    --announcement-banner-height: 44px;
+    --announcement-banner-icon-size: 16px;
+
+
+    &--blue {
+        --announcement-banner-background: var(--color-blue-400);
+    }
+
+    &--purple {
+        --announcement-banner-background: var(--color-purple-400);
+    }
+}