@esportsplus/ui 0.53.0 → 0.55.0

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

@@ -1,9 +1,11 @@
+@use '/tokens';
+
 .accordion {
     display: grid;
     grid-template-rows: 1fr;
     transition: grid-template-rows .3s;
 
-    &[inert] {
+    @include tokens.state(inactive) {
         grid-template-rows: 0fr;
     }
 

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/constants.ts

@@ -0,0 +1,4 @@
+const CHECKBOX_INPUT = Symbol.for('@esportsplus/ui/checkbox.input');
+
+
+export { CHECKBOX_INPUT };

package/src/components/checkbox/index.ts

@@ -1,57 +1,42 @@
 import { html, type Attributes } from '@esportsplus/template';
-import { reactive, root } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
+import { reactive } from '@esportsplus/reactivity';
 import form from '~/components/form';
+import icon from '~/components/icon';
+import { CHECKBOX_INPUT } from './constants';
+import check from './svg/check.svg';
 import './scss/index.scss';
 
 
-const OMIT = ['checked', 'value'];
+type A = Attributes & { [CHECKBOX_INPUT]?: Attributes };
 
 
-const factory = (type: string) => {
+const factory = (type: 'checkbox' | 'radio' | 'switch') => {
     function template(
-        this: { attributes?: Attributes } | any,
-        attributes?: Attributes & { state?: { active: boolean, error: string } }
+        this: { attributes?: A } | void,
+        { state = reactive({ error: '' }), ...attributes }: A & { state?: { error: string } } = {}
     ) {
-        let ref: HTMLElement,
-            state = attributes?.state || reactive({
-                active: false,
-                error: ''
-            });
-
-        if (attributes?.checked) {
-            state.active = true;
-        }
-
         return html`
             <div
-                class='${() => state.active ? type + " --active" : type}'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${attributes && omit(attributes, OMIT)}
-                onclick=${() => ref.click()}
+                class='checkbox ${(type === 'radio' || type === 'switch') && `checkbox--${type}`}'
+                ${this?.attributes}
+                ${attributes}
             >
                 <input
-                    ${{
-                        checked: attributes?.checked || root(() => state.active),
-                        class: `${type}-tag`,
-                        onchange: (e: Event) => {
-                            state.active = (e.target as HTMLInputElement).checked;
-                        },
-                        onconnect: (input) => {
-                            ref = input;
-                        },
-                        onrender: form.input.onrender(state),
-                        type: type === 'radio' ? 'radio' : 'checkbox',
-                        value: attributes?.value || 1
-                    }}
+                    class='checkbox-tag'
+                    value='1'
+                    ${this?.attributes?.[CHECKBOX_INPUT]}
+                    ${attributes[CHECKBOX_INPUT]}
+                    onrender=${form.input.onrender(state)}
+                    type=${type === 'radio' ? 'radio' : 'checkbox'}
                 >
+                ${type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check)}
             </div>
         `;
     }
 
-    return template;
+    return Object.assign(template, { input: CHECKBOX_INPUT } as const);
 };
 
 
 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;
+        }
     }
-}
+}

package/src/components/checkbox/scss/variables.scss

@@ -1,4 +1,3 @@
-@use '/lib';
 @use '/tokens';
 
 .checkbox {
@@ -8,67 +7,109 @@
     --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);
     --border-radius: var(--border-radius-300);
     --border-style: solid;
     --border-width: 0px;
+    --border-width-offset: 0px;
+    --border-width-offset-hover: 1px;
     --box-shadow: var(--box-shadow-default);
+    --box-shadow-active: 0 3px 8px color-mix(in srgb, var(--background-active) 22%, transparent);
     --box-shadow-default: none;
+    --box-shadow-hover: var(--box-shadow-default);
+    --box-shadow-pressed: var(--box-shadow-default);
+    --check-linecap: round;
+    --check-linejoin: round;
+    --check-size: 80%;
+    --check-stroke-width: 4;
+    --check-timing-function: ease;
+    --focus-color: var(--border-color-active);
+    --focus-offset: 2px;
+    --focus-width: 2px;
     --height: var(--size);
-    --margin-horizontal: calc(var(--width-switch) - var(--width));
-    --opacity: var(--opacity-default);
-    --opacity-active: var(--opacity-default);
-    --opacity-default: 1;
-    --opacity-hover: var(--opacity-default);
-    --opacity-pressed: var(--opacity-default);
-    --rotate: 45deg;
+    --indicator-color: var(--indicator-color-default);
+    --indicator-color-active: var(--indicator-color-default);
+    --indicator-color-default: var(--color-white-400);
+    --indicator-color-hover: var(--indicator-color-default);
+    --indicator-color-pressed: var(--indicator-color-default);
     --scale: var(--scale-default);
     --scale-active: 1;
-    --scale-default: 0;
-    --scale-hover: 1.08;
-    --scale-pressed: 0.98;
-    --size: var(--size-600);
+    --scale-default: 0.92;
+    --scale-hover: 0.96;
+    --scale-pressed: var(--scale-default);
+    --size: var(--size-500);
+    --transition-duration: 280ms;
+    --transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
     --width: var(--height);
-    --width-switch: 40px;
 
-    &::before {
-        --border-width: 4px;
-        --box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
-        --height: 100%;
-        --translateX: 124%;
-        --translateY: 8%;
-        --width: 50%;
+
+    &--radio,
+    &--switch {
+        &::before {
+            --box-shadow: 0 2px 4px #0003;
+        }
+    }
+
+    &--radio {
+        --border-radius: 100%;
+        --scale-default: 0;
+        --scale-hover: 0;
+
+        &::before {
+            --height: var(--size-200);
+            --width: var(--size-200);
+        }
     }
 
-    #{tokens.state(default)} {
+    &--switch {
+        --border-width-offset-hover: 0px;
+        --box-shadow-active: var(--box-shadow-default);
+        --focus-color: var(--background-active);
+        --padding-horizontal: 2px;
+        --padding-vertical: 2px;
+        --width: var(--width-rail);
+        --width-rail: calc(var(--height) * 1.8);
+
         &::before {
-            --translateY: 100%;
+            --translateX: 0px;
+            --width: var(--height);
+        }
+
+        &:has(input:checked)::before {
+            --translateX: calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
         }
     }
 
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
+
+    &:not(:has(input:checked)) {
+        &:hover,
+        label:hover & {
             --background: var(--background-hover);
             --border-color: var(--border-color-hover);
+            --border-width-offset: var(--border-width-offset-hover);
             --box-shadow: var(--box-shadow-hover);
-            --opacity: var(--opacity-hover);
+            --indicator-color: var(--indicator-color-hover);
             --scale: var(--scale-hover);
         }
 
-        @include tokens.state(pressed) {
+        &:active,
+        label:active & {
             --background: var(--background-pressed);
             --border-color: var(--border-color-pressed);
             --box-shadow: var(--box-shadow-pressed);
-            --opacity: var(--opacity-pressed);
+            --indicator-color: var(--indicator-color-pressed);
             --scale: var(--scale-pressed);
         }
     }
 
-    #{tokens.state(active)} {
+    &:has(input:checked) {
         --background: var(--background-active);
         --border-color: var(--border-color-active);
         --box-shadow: var(--box-shadow-active);
-        --opacity: var(--opacity-active);
+        --indicator-color: var(--indicator-color-active);
         --scale: var(--scale-active);
     }
-}
+}

package/src/components/checkbox/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" pathLength="1"/></svg>