@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/tasklist/scss/variables.scss

@@ -1,83 +1,110 @@
 @use '/tokens';
 
+// Shared by every part so the check, strike, and fade stay in sequence
 .tasklist {
-    --background: transparent;
-    --border-radius: var(--border-radius-300);
-    --check-duration: 280ms;
-    --description-color: var(--color-text-300);
-    --description-color-checked: var(--color-border-500);
-    --description-font-size: var(--font-size-300);
-    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
-    --font-size: var(--font-size-400);
-    --gap: var(--size-100);
-    --gap-horizontal: var(--size-300);
-    --label-color: var(--color-text-500);
-    --label-color-checked: var(--color-text-300);
-    --line-height: var(--size-500);
-    // Spring with stiffness 320 and damping 30, sampled across its 500ms settle
-    --move-duration: 500ms;
-    --move-timing-function: linear(0, 0.109, 0.322, 0.536, 0.71, 0.835, 0.916, 0.965, 0.991, 1.003, 1.007, 1.008, 1.006, 1.005, 1.003, 1.002, 1);
-    --nudge-distance: 8px;
-    --nudge-duration: 300ms;
-    --padding-horizontal: var(--size-200);
-    --padding-vertical: var(--size-100);
-    --pop-duration: 340ms;
-    --pop-scale: 1.08;
-    --strike-duration: 380ms;
-    --strike-color: currentColor;
-    --strike-width: 1.5px;
-
-
-    .tasklist-checkbox {
-        --background-active: var(--color-primary-400);
-        --border-color-active: var(--color-primary-400);
-        --border-color-default: var(--color-border-500);
+    --check-duration: 150ms;
+    --gap: 2px;
+    --strike-duration: 200ms;
+    --timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+
+    @media (prefers-reduced-motion: reduce) {
+        --check-duration: 0ms;
+        --strike-duration: 0ms;
+    }
+
+
+    &-checkbox {
+        --background-active: var(--color-text-500);
+        --border-color-active: var(--color-text-500);
+        --border-color-default: var(--color-border-400);
         --border-width: var(--border-width-400);
-        --size: var(--line-height);
-        --transition-duration: var(--check-duration);
+        --size: var(--size-500);
+    }
+
+    &-content {
+        --opacity: var(--opacity-default);
+        --opacity-active: 0.65;
+        --opacity-default: 1;
     }
 
-    &--plan {
-        --background-hover: color-mix(in oklch, var(--color-text-500) 3%, transparent);
+    &-description {
+        --color: var(--color-text-300);
+        --font-size: var(--font-size-300);
+    }
+
+    &-item {
+        --background: var(--background-default);
+        --background-default: transparent;
+        // Tints the default instead of replacing it, so an opaque row stays opaque while hovered
+        --background-hover: color-mix(in oklch, var(--color-text-500) 3%, var(--background-default));
         --border-radius: var(--border-radius-400);
-        --check-duration: 150ms;
-        --description-font-size: var(--font-size-100);
-        --font-size: var(--font-size-200);
-        --gap: 2px;
-        --gap-horizontal: 10px;
-        --grip-color: var(--color-border-300);
-        --grip-size: 12px;
-        --hover-duration: 150ms;
-        --index-color: var(--color-border-500);
-        --index-font-family: 'Geist Mono', ui-monospace, monospace;
-        --index-font-size: var(--font-size-100);
-        --label-font-weight: var(--font-weight-500);
-        --nudge-distance: 0px;
-        --off-opacity: 0.45;
-        --padding-horizontal: var(--size-100);
-        --pop-scale: 1;
+        // Read by JS: the slide that carries a row to its new place. Spring with stiffness 320 and damping 30,
+        // sampled across its 500ms settle
+        --move-duration: 500ms;
+        --move-easing: linear(0, 0.109, 0.322, 0.536, 0.71, 0.835, 0.916, 0.965, 0.991, 1.003, 1.007, 1.008, 1.006, 1.005, 1.003, 1.002, 1);
+        // The strike and fade wait on the check while it draws
+        --strike-delay: 0s;
+        --strike-length: 0%;
+        --transition-duration: 150ms;
+
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+        }
+
+        &:has(.checkbox-tag:checked) {
+            --strike-length: 100%;
+
+            .tasklist-content {
+                --opacity: var(--opacity-active);
+            }
+        }
+
+        &--checking {
+            --strike-delay: var(--check-duration);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            --move-duration: 0ms;
+        }
+    }
+
+    &-label {
+        --color: var(--color-text-500);
+        --font-weight: var(--font-weight-500);
         --strike-color: var(--color-border-400);
-        --strike-duration: 200ms;
-        --strike-width: 1px;
-
-        .tasklist-checkbox {
-            --background-active: var(--color-text-500);
-            --border-color-active: var(--color-text-500);
-            --border-color-default: var(--color-border-400);
-            --border-radius: 5px;
-            --border-width: 1px;
-            --border-width-offset-hover: 0px;
-            --box-shadow-active: none;
-            --size: 16px;
+        --strike-width: 2px;
+    }
+
+    &-row {
+        --font-size: var(--font-size-400);
+        --gap: 10px;
+        --line-height: var(--size-500);
+        --padding-horizontal: var(--size-100);
+        --padding-vertical: var(--size-100);
+
+        &--sortable {
+            &::before {
+                --background: var(--color-text-300);
+                --opacity: var(--opacity-default);
+                --opacity-default: 0;
+                --opacity-hover: 1;
+                --size: 16px;
+                --transition-duration: 150ms;
+            }
+
+            @include tokens.state(hover) {
+                &::before {
+                    --opacity: var(--opacity-hover);
+                }
+            }
         }
     }
 
-    @media (prefers-reduced-motion: reduce) {
-        --check-duration: 0ms;
-        --move-duration: 0ms;
-        --nudge-duration: 0ms;
-        --pop-duration: 0ms;
-        --strike-duration: 0ms;
+    &--plan .tasklist-label::before {
+        --color: var(--color-text-300);
+        --font-family: var(--font-family-mono);
+        --font-size: var(--font-size-200);
+        --font-weight: var(--font-weight-500);
+        --gap: 6px;
     }
 }

package/src/components/text/scss/index.scss

@@ -1,18 +1,5 @@
-@use 'variables';
+@use '/shared';
 
 .text {
-    color: var(--color);
-    display: flex;
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-    gap: var(--gap-vertical) var(--gap-horizontal);
-    position: relative;
-    transition: color var(--transition-duration) var(--transition-timing-function);
-    width: var(--width);
-
-
-    &.--text-truncate {
-        display: block;
-    }
+    @extend %text;
 }

package/src/components/textarea/index.ts

@@ -1,41 +1,14 @@
-import { component, html, type Attributes } from '@esportsplus/template';
+import { component, html, type Attributes, type Element } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import form from '~/components/form';
+import { observeSize } from '~/shared/resize';
+import { trackTransition } from '~/shared/transition';
 import './scss/index.scss';
 
 
 type Autoresize = { height: { max: `${number}px`, min: `${number}px` } };
 
 
-function autoresize({ height }: Autoresize, oninput: Attributes['oninput']) {
-    let attributes = {
-            class: 'textarea--autoresize',
-            style: `
-                --max-height: ${height.max};
-                --min-height: ${height.min};
-            `
-        };
-
-    if (CSS.supports('field-sizing', 'content')) {
-        return attributes;
-    }
-
-    return {
-        ...attributes,
-        class: `${attributes.class} textarea--autoresize-fallback`,
-        oninput: function(this: HTMLElement, e: InputEvent) {
-            let element = e.target as HTMLTextAreaElement;
-
-            element.style.setProperty('--content-height', '0px');
-            element.style.setProperty('--content-height', `${element.scrollHeight}px`);
-
-            // The runtime keeps one listener per event, so this handler replaces the caller's
-            oninput?.call(this, e);
-        }
-    };
-}
-
-
 export default component(function(
     this: { attributes?: Attributes },
     {
@@ -52,22 +25,152 @@ export default component(function(
 ) {
     attributes.value ??= '';
 
-    return html`
+    let field: HTMLTextAreaElement | undefined,
+        frame: number | undefined,
+        measured = reactive({ height: 0, scrollable: false }),
+        native = !!resize && CSS.supports('field-sizing', 'content'),
+        owner: HTMLFormElement | null | undefined,
+        probe: HTMLTextAreaElement | undefined,
+        resetFrame: number | undefined,
+        width: number | undefined,
+        limits = resize && `--max-height: ${resize.height.max}; --min-height: ${resize.height.min};`,
+        caller = attributes.oninput ?? this?.attributes?.oninput;
+
+    let motion = trackTransition('height', (running, element) => {
+        measured.scrollable = !!element && !running;
+    });
+
+    function schedule() {
+        if (native || frame !== undefined) {
+            return;
+        }
+
+        frame = requestAnimationFrame(() => {
+            frame = undefined;
+
+            if (probe) {
+                // Only the hidden measuring field is reset, so the visible height can transition uninterrupted.
+                probe.style.setProperty('--content-height', '0px');
+                probe.style.setProperty('--content-height', `${probe.scrollHeight}px`);
+            }
+        });
+    }
+
+    function reset() {
+        // Form reset restores the value after the event has been dispatched.
+        if (resetFrame !== undefined) {
+            cancelAnimationFrame(resetFrame);
+        }
+
+        resetFrame = requestAnimationFrame(() => {
+            resetFrame = undefined;
+
+            if (probe && field) {
+                probe.value = field.value;
+                schedule();
+            }
+        });
+    }
+
+    let observation = observeSize((size) => {
+            if (measured.height !== size.height) {
+                measured.scrollable = false;
+                measured.height = size.height;
+                motion.settle();
+            }
+
+            if (size.width !== width) {
+                width = size.width;
+                schedule();
+            }
+        }),
+        content = html`
         <textarea
             class='textarea'
             ${this?.attributes}
             ${attributes}
-            ${resize && autoresize(resize, attributes.oninput ?? this?.attributes?.oninput)}
-            ${{
-                class: () => state.active && '--active',
-                onfocusin: () => {
-                    state.active = true;
+            ${resize && {
+                ...motion.attributes,
+                class: ['textarea--autoresize', () => measured.scrollable && 'textarea--scrollable'],
+                onconnect: (element: Element<HTMLTextAreaElement>) => {
+                    field = element;
+                    motion.attributes.onconnect(element);
+                    owner = element.form;
+                    owner?.addEventListener('reset', reset);
                 },
-                onfocusout: () => {
-                    state.active = false;
+                ondisconnect: () => {
+                    motion.attributes.ondisconnect();
+                    owner?.removeEventListener('reset', reset);
+                    owner = undefined;
+
+                    if (resetFrame !== undefined) {
+                        cancelAnimationFrame(resetFrame);
+                        resetFrame = undefined;
+                    }
+
+                    field = undefined;
+                },
+                oninput: function(this: HTMLElement, event: InputEvent) {
+                    if (probe) {
+                        probe.value = (event.currentTarget as HTMLTextAreaElement).value;
+                        schedule();
+                    }
+
+                    caller?.call(this, event);
                 },
-                onrender: form.input.onrender(state)
+                style: [limits, () => measured.height && `--height: ${measured.height}px;`]
             }}
+            ${form.input.attributes(state)}
         ></textarea>
     `;
+
+    if (!resize) {
+        return content;
+    }
+
+    return html`
+        <div class='textarea-resize'>
+            ${content}
+            <textarea
+                aria-hidden='true'
+                class='textarea textarea--measure'
+                disabled
+                inert
+                tabindex='-1'
+                ${{
+                    // Mirror only sizing attributes: the probe has no name, id, validation or caller listeners.
+                    class: [this?.attributes?.class, attributes.class, !native && 'textarea--measure-fallback', () => state.active && '--active'].flat(),
+                    dir: attributes.dir ?? this?.attributes?.dir,
+                    lang: attributes.lang ?? this?.attributes?.lang,
+                    placeholder: attributes.placeholder ?? this?.attributes?.placeholder,
+                    rows: attributes.rows ?? this?.attributes?.rows,
+                    style: [this?.attributes?.style, attributes.style, limits].flat(),
+                    value: (element: HTMLElement) => {
+                        let source = attributes.value,
+                            value = typeof source === 'function' ? source(field ?? element) : source;
+
+                        schedule();
+                        return value;
+                    },
+                    wrap: attributes.wrap ?? this?.attributes?.wrap,
+                    onconnect: (element: HTMLTextAreaElement) => {
+                        probe = element;
+                        width = undefined;
+                        observation.onconnect(element);
+                        schedule();
+                    },
+                    ondisconnect: () => {
+                        observation.ondisconnect();
+
+                        if (frame !== undefined) {
+                            cancelAnimationFrame(frame);
+                            frame = undefined;
+                        }
+
+                        probe = undefined;
+                    }
+                }}
+            ></textarea>
+        </div>
+    `;
 });

package/src/components/textarea/scss/index.scss

@@ -1,42 +1,65 @@
+@use '../../input/scss/field';
 @use 'variables';
 
 .textarea {
-    background: var(--background);
-    border: var(--border-width) var(--border-style) var(--border-color);
-    border-radius: var(--border-radius);
-    color: var(--color);
-    cursor: text;
-    flex: 1 1 auto;
-    font-size: var(--font-size);
-    min-width: 0;
-    padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
-    padding-inline: max(0px, calc(var(--padding-horizontal) - var(--border-width)));
-    position: relative;
     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),
+        height var(--resize-duration) var(--resize-timing-function),
         opacity var(--transition-duration) var(--transition-timing-function),
         transform var(--transition-duration) var(--transition-timing-function);
-    width: 100%;
+    @include field.base;
 
-    &:invalid,
-    &:required {
-        box-shadow: none;
-    }
+    &--autoresize {
+        --scrollbar-gutter: stable;
+        --scrollbar-overflow: hidden;
+        box-sizing: border-box;
+        field-sizing: fixed;
+        height: var(--height, var(--min-height));
+        max-height: var(--max-height);
+        min-height: var(--min-height);
+        overflow-y: var(--scrollbar-overflow);
+        resize: none;
+        scrollbar-gutter: var(--scrollbar-gutter);
 
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+    }
 
-    &--autoresize {
+    // The visible field animates while this independent, inaccessible field retains its natural height.
+    &--measure {
+        --scrollbar-gutter: stable;
+        box-sizing: border-box;
         field-sizing: content;
         height: auto;
+        inset: 0 auto auto 0;
         max-height: var(--max-height);
         min-height: var(--min-height);
         overflow-y: auto;
+        pointer-events: none;
+        position: absolute;
         resize: none;
+        scrollbar-gutter: var(--scrollbar-gutter);
+        transition: none;
+        visibility: hidden;
 
         &-fallback {
-            box-sizing: border-box;
             height: calc(var(--content-height, var(--min-height)) + 2 * var(--border-width));
         }
     }
+
+    // Only ever set alongside '--autoresize', once the content outgrows its maximum height.
+    &--scrollable {
+        --scrollbar-overflow: auto;
+    }
+}
+
+.textarea-resize {
+    display: grid;
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+    width: 100%;
 }

package/src/components/textarea/scss/variables.scss

@@ -1,48 +1,7 @@
-@use '/tokens';
+@use '../../input/scss/field';
 
 .textarea {
-    --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-default: var(--background);
-    --border-radius: var(--border-radius-400);
-    --border-style: solid;
-    --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
-    --color: var(--color-default);
-    --color-active: var(--color-default);
-    --color-default: var(--color-text-400);
-    --color-hover: var(--color-default);
-    --color-pressed: var(--color-default);
-    --font-size: var(--font-size-400);
-    --padding-horizontal: var(--size-400);
-    --padding-vertical: var(--size-400);
-    --size: var(--size-400);
-
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --color: var(--color-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --color: var(--color-pressed);
-        }
-    }
-
-    #{tokens.state(active)} {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --box-shadow: var(--box-shadow-active);
-        --color: var(--color-active);
-    }
-}
+    --resize-duration: 240ms;
+    --resize-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    @include field.variables;
+}