@esportsplus/ui 0.51.7 → 0.54.0

package/src/components/accordion/index.ts

@@ -1,50 +1,27 @@
-import { html, Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
+import { html, Attributes, component } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
 import './scss/index.scss';
 
 
-type A = Attributes & { state?: { active: boolean | number } };
-
-type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
+type A = Attributes & { state: { active: boolean | number } };
 
 
 const OMIT = ['state'];
 
 
-let key = Symbol();
-
-
-export default template.factory(
+export default component<A>(
     function(attributes: A, content) {
-        let ref: Accordion,
-            state = attributes.state || reactive({
-                active: 0
-            });
+        let state = attributes.state;
 
         return html`
             <div
+                class='accordion'
                 ${omit(attributes, OMIT)}
                 ${{
-                    class: () => {
-                        return state.active && '--active';
-                    },
-                    onrender: (element) => {
-                        ( ref = element as Accordion )[key] = state;
-                    },
-                    style: () => {
-                        let parent = ref.closest<Accordion>('accordion');
-
-                        if (parent && key in parent) {
-                            parent[key].active = (+parent[key].active) + 1;
-                        }
-
-                        return state.active && `--max-height: ${ref.scrollHeight}`;
-                    }
+                    inert: () => !state.active
                 }}
             >
-                ${content}
+                <div class='accordion-content'>${content}</div>
             </div>
         `;
     }

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

@@ -1,17 +1,14 @@
-@use '/tokens';
-@use 'variables';
-
 .accordion {
-    max-height: var(--max-height);
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        max-height var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows .3s;
 
+    &[inert] {
+        grid-template-rows: 0fr;
+    }
 
-    @include tokens.state(active) {
-        opacity: 1;
-        pointer-events: auto;
+    &-content {
+        min-height: 0;
+        overflow: hidden;
     }
 }

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

@@ -6,8 +6,8 @@
     max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
     position: absolute;
     transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     z-index: 9;
 
 

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

@@ -1,24 +1,23 @@
 @use '/lib';
 @use '/tokens';
 @use 'variables';
+@use '../../text/scss/index';
 
 .button {
+    @extend .text;
     align-content: center;
     align-items: center;
     background: var(--background);
     border-radius: var(--border-radius);
-    color: var(--color);
     cursor: pointer;
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
+    flex-wrap: nowrap;
     justify-content: center;
-    line-height: var(--line-height);
-    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
-    position: relative;
-    transition: all var(--transition-duration) ease-in-out;
-    width: var(--width);
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+    transition: all var(--transition-duration) var(--transition-timing-function);
+    white-space: nowrap;
+    translate: 0;
 
 
     // Pseudo Element Box Shadow
@@ -29,8 +28,8 @@
         content: '';
         pointer-events: none;
         transition:
-            box-shadow var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
+            box-shadow var(--transition-duration) var(--transition-timing-function),
+            opacity var(--transition-duration) var(--transition-timing-function);
         z-index: -1;
     }
 
@@ -41,52 +40,13 @@
         }
     }
 
-    &--holding {
-        overflow: hidden;
-        user-select: none;
-
-        &::after {
-            animation: buttonHolding var(--animation-duration) ease-in-out forwards;
-            border-radius: 0;
-            box-shadow: unset;
-            display: block;
-            width: 110%;
-            height: 100%;
-            background: var(--background-hold);
-            transform: translateX(-100%);
-            z-index: 1;
-        }
-
-        @keyframes buttonHolding {
-            100% {
-                transform: translateX(0%);
-            }
-        }
-
-        > * {
-            animation: buttonHoldingContentPulse calc(var(--animation-duration) / 3) infinite ease-in-out;
-            z-index: 2;
-        }
-
-        @keyframes buttonHoldingContentPulse {
-            0%,
-            100% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: 0.4;
-            }
-        }
-    }
-
     &--processing {
         color: transparent;
         pointer-events: none;
 
         &::before {
             @include lib.position(absolute, center);
-            animation: buttonProcessing var(--animation-duration) infinite linear;
+            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);
             border-radius: 100%;
@@ -101,7 +61,7 @@
             opacity: 0;
         }
 
-        @keyframes buttonProcessing {
+        @keyframes button--processing {
             0% {
                 transform: translate(50%, 50%) rotate(0deg);
             }
@@ -112,7 +72,7 @@
     }
 
     &--skeleton {
-        animation: var(--animation-duration) ease-in-out infinite buttonSkeleton;
+        animation: var(--animation-duration) var(--transition-timing-function) infinite button--skeleton;
         background-image: linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));
         background-size: 400% 100%;
         color: transparent;
@@ -122,7 +82,7 @@
             opacity: 0;
         }
 
-        @keyframes buttonSkeleton {
+        @keyframes button--skeleton {
             0% {
                 background-position: 200% 0;
             }
@@ -132,16 +92,22 @@
         }
     }
 
+    &--tactile {
+        @include tokens.state('pressed') {
+            translate: 0 1px;
+        }
+    }
+
     &--top {
         &-left,
         &-right {
             position: absolute;
-            top: calc((#{var(--padding-vertical)} + #{var(--line-height) / 2}) * -1);
+            top: calc((#{var(--padding-vertical)} + 0.5lh) * -1);
         }
 
         @each $direction in 'left' 'right' {
             &-#{$direction} {
-                #{$direction}: calc((#{var(--padding-horizontal)} + #{var(--line-height) / 2}) * -1);
+                #{$direction}: calc((#{var(--padding-horizontal)} + 0.5lh) * -1);
             }
         }
     }

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

@@ -12,21 +12,8 @@
     --border-color-default: var(--background);
     --border-color-hover: var(--border-color-default);
     --border-color-pressed: var(--border-color-default);
-    --border-radius: var(--border-radius-400);
-    --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);
-    --font-weight: var(--font-weight-400);
-    --line-height: var(--line-height-400);
-    --padding-horizontal: var(--size-400);
-    --padding-vertical: var(--size-400);
-    --width: auto;
 
     @include tokens.state(active) {
         --background: var(--background-active);
@@ -47,11 +34,6 @@
     }
 
 
-    &--holding {
-        --animation-duration: 2.4s;
-        --background-hold: var(--background-active);
-    }
-
     &--processing {
         --animation-duration: 0.64s;
         --border-width: var(--border-width-400);
@@ -62,4 +44,4 @@
     &--skeleton {
         --animation-duration: 6.4s;
     }
-}
+}

package/src/components/card/scss/index.scss

@@ -5,15 +5,17 @@
 .card {
     background: var(--background);
     border-radius: var(--border-radius);
-    padding: var(--padding-vertical) var(--padding-horizontal);
+    padding:
+        max(0px, calc(var(--padding-vertical) - var(--border-width)))
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
     position: relative;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        max-height var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        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),
+        max-height var(--transition-duration) var(--transition-timing-function),
+        opacity var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function);
     width: var(--width);
 
 
@@ -25,45 +27,8 @@
         content: '';
         pointer-events: none;
         transition:
-            box-shadow var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
+            box-shadow var(--transition-duration) var(--transition-timing-function),
+            opacity var(--transition-duration) var(--transition-timing-function);
         z-index: -1;
     }
-
-
-    &--flat {
-        &::after {
-            display: none;
-        }
-    }
-
-    &--option {
-        border-radius: 0;
-
-        @include tokens.state(active) {
-            z-index: 2;
-        }
-
-        @include tokens.state(hover) {
-            z-index: 1;
-        }
-
-        &:only-child {
-            border-radius: var(--border-radius);
-        }
-
-        &:not(:only-child) {
-            &:not(:first-child) {
-                margin-top: calc(var(--border-width) * -1);
-            }
-
-            &:first-child {
-                border-radius: var(--border-radius) var(--border-radius) 0 0;
-            }
-
-            &:not(:has(~ .card--option)) {
-                border-radius: 0 0 var(--border-radius) var(--border-radius);
-            }
-        }
-    }
 }

package/src/components/card/scss/variables.scss

@@ -11,7 +11,6 @@
     --border-color-default: var(--background);
     --border-color-hover: var(--border-color-default);
     --border-color-pressed: var(--border-color-default);
-    --border-radius: var(--border-radius-400);
     --box-shadow: var(--box-shadow-default);
     --box-shadow-default: none;
     --padding-horizontal: 0px;
@@ -33,4 +32,4 @@
         --background: var(--background-pressed);
         --border-color: var(--border-color-pressed);
     }
-}
+}

package/src/components/checkbox/index.ts

@@ -1,45 +1,46 @@
 import { html, type Attributes } from '@esportsplus/template';
-import { reactive, root } from '@esportsplus/reactivity';
+import { reactive } from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import form from '~/components/form';
+import icon from '~/components/icon';
+import check from './svg/check.svg';
 import './scss/index.scss';
 
 
-const OMIT = ['checked', 'value'];
+type A = Attributes & {
+    'aria-label'?: string;
+    checked?: boolean;
+    id?: string;
+    name?: string;
+    state?: { error: string };
+    value?: number | string;
+};
+
 
+const OMIT = ['aria-label', 'checked', 'id', 'name', 'state', 'value'];
 
-const factory = (type: string) => {
-    function template(
-        this: { attributes?: Attributes } | any,
-        attributes?: Attributes & { state?: { active: boolean, error: string } }
-    ) {
-        let state = attributes?.state || reactive({
-                active: false,
-                error: ''
-            });
 
-        if (attributes?.checked) {
-            state.active = true;
-        }
+const factory = (type: 'checkbox' | 'radio' | 'switch') => {
+    function template(this: { attributes?: Exclude<A, 'state'> } | void, attributes?: A) {
+        let state = attributes?.state || reactive({ error: '' });
 
         return html`
             <div
-                class='${type} ${() => state.active && '--active'}'
+                class='checkbox ${(type === 'radio' || type === 'switch') && `checkbox--${type}`}'
                 ${this?.attributes && omit(this.attributes, OMIT)}
                 ${attributes && omit(attributes, OMIT)}
             >
                 <input
-                    ${{
-                        checked: attributes?.checked || root(() => state.active),
-                        class: `${type}-tag`,
-                        onchange: (e: Event) => {
-                            state.active = (e.target as HTMLInputElement).checked;
-                        },
-                        onrender: form.input.onrender(state),
-                        type: type === 'radio' ? 'radio' : 'checkbox',
-                        value: attributes?.value || 1
-                    }}
+                    aria-label=${attributes?.['aria-label'] ?? this?.attributes?.['aria-label']}
+                    checked=${attributes?.checked}
+                    class='checkbox-tag'
+                    id=${attributes?.id ?? this?.attributes?.id}
+                    name=${attributes?.name ?? this?.attributes?.name}
+                    onrender=${form.input.onrender(state)}
+                    type=${type === 'radio' ? 'radio' : 'checkbox'}
+                    value=${attributes?.value ?? 1}
                 >
+                ${type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check)}
             </div>
         `;
     }
@@ -49,4 +50,4 @@ const factory = (type: string) => {
 
 
 export default factory('checkbox');
-export { factory };
+export { factory };

package/src/components/checkbox/scss/index.scss

@@ -1,4 +1,5 @@
 @use '/lib';
+@use '/tokens';
 @use 'variables';
 
 .checkbox {
@@ -6,45 +7,102 @@
     border-color: var(--border-color);
     border-radius: var(--border-radius);
     border-style: var(--border-style);
-    border-width: var(--border-width);
+    border-width: calc(var(--border-width) + var(--border-width-offset));
+    box-shadow: var(--box-shadow);
+    cursor: pointer;
     flex: 0 0 var(--width);
     height: var(--height);
+    pointer-events: none;
     position: relative;
     transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
+        background var(--transition-duration) var(--transition-timing-function),
+        border-color var(--transition-duration) var(--transition-timing-function),
+        border-width var(--transition-duration) var(--transition-timing-function),
+        box-shadow var(--transition-duration) var(--transition-timing-function);
     width: var(--width);
 
-    &:invalid,
-    &:required {
-        box-shadow: none;
+
+    &--radio,
+    &--switch {
+        &::before {
+            background: var(--indicator-color);
+            box-shadow: var(--box-shadow);
+            content: '';
+            pointer-events: none;
+            transform-origin: center;
+            transition: transform var(--transition-duration) var(--transition-timing-function);
+            width: var(--width);
+        }
+    }
+
+    &--radio {
+        &::before {
+            border-radius: calc(var(--border-radius) - (var(--height) / 2));
+            height: var(--height);
+            inset: 0;
+            margin: auto;
+            position: absolute;
+            transform: scale(var(--scale));
+        }
+    }
+
+    &--switch {
+        &::before {
+            @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
+            border-radius: calc(var(--border-radius) - var(--padding-vertical) / 1.5);
+            height: calc(var(--height) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
+            transform: translateX(var(--translateX)) scale(var(--scale));
+        }
+    }
+
+
+    &:has(input:checked) .checkbox-check svg {
+        stroke-dashoffset: 0;
     }
 
-    &::before {
-        border-bottom: var(--border-width) solid var(--accent);
-        border-right: var(--border-width) solid var(--accent);
-        bottom: 50%;
-        box-shadow: var(--box-shadow);
-        content: '';
-        height: var(--height);
-        opacity: var(--opacity);
+    &:has(> .checkbox-tag:focus-visible, > .radio-tag:focus-visible, > .switch-tag:focus-visible) {
+        outline: var(--focus-width) solid var(--focus-color);
+        outline-offset: var(--focus-offset);
+    }
+
+    .checkbox-check {
+        height: var(--check-size);
+        inset: 0 0 0 1px;
+        margin: auto;
+        pointer-events: none;
         position: absolute;
-        right: 92%;
-        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
-        transform-origin: bottom center;
-        width: var(--width);
+        width: var(--check-size);
+
+        svg {
+            fill: none;
+            stroke: var(--indicator-color);
+            stroke-width: var(--check-stroke-width);
+            stroke-linecap: var(--check-linecap);
+            stroke-linejoin: var(--check-linejoin);
+            stroke-dasharray: 1;
+            stroke-dashoffset: 1;
+            transition: stroke-dashoffset var(--transition-duration) var(--check-timing-function);
+        }
     }
 
-    // Hide HTML Field Element
+    // Keep the native input interactive while the SVG supplies its appearance.
+    // TODO: Pointer events none on parent and default here?
     &-tag {
-        @include lib.position(absolute, 0 null null 0);
-        height: 0px;
+        @include lib.position(absolute, full);
+        cursor: inherit;
+        height: 100%;
+        margin: 0;
         opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: 0;
+        pointer-events: all;
+        width: 100%;
+        z-index: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &::before,
+        .checkbox-check svg {
+            transition: none;
+        }
     }
-}
+}