@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/scrub-input/scss/index.scss

@@ -0,0 +1,105 @@
+@use 'variables';
+
+.scrub-input {
+    align-items: center;
+    background: var(--background);
+    border-radius: var(--border-radius);
+    color: var(--color);
+    display: flex;
+    height: var(--height);
+    overflow: hidden;
+    position: relative;
+
+    &:has(.scrub-input-field:focus-visible) {
+        outline: var(--outline-width) solid var(--outline-color);
+    }
+
+
+    // Qualified by the root so it wins over the reused input styles regardless of stylesheet order.
+    & > #{&}-field {
+        --color-default: currentColor;
+        --font-size: inherit;
+        --padding-horizontal: 0px;
+        --padding-vertical: 0px;
+        font-variant-numeric: tabular-nums;
+        height: 100%;
+        min-height: 0;
+        outline: none;
+        padding-inline-end: var(--field-padding);
+    }
+
+    &-label {
+        align-items: center;
+        color: var(--label-color);
+        cursor: ew-resize;
+        display: flex;
+        flex-shrink: 0;
+        font-size: var(--font-size);
+        height: 100%;
+        justify-content: center;
+        touch-action: none;
+        transition: color var(--transition-duration) var(--transition-timing-function);
+        user-select: none;
+        width: var(--label-width);
+
+        svg {
+            height: 16px;
+            width: 16px;
+        }
+
+        &:hover,
+        .scrub-input.--active & {
+            color: var(--label-color-active);
+        }
+    }
+
+    &-needle {
+        background: var(--needle-color);
+        bottom: 0;
+        height: var(--tape-height);
+        left: 50%;
+        position: absolute;
+        translate: -50% 0;
+        width: 1px;
+    }
+
+    // Runs under a fixed needle while scrubbing: one step is one pixel of tape, so the ticks travel exactly as far as the pointer.
+    &-tape {
+        bottom: 0;
+        color: var(--tape-color);
+        height: var(--tape-height);
+        inset-inline: 0;
+        mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition:
+            opacity var(--tape-leave-duration) var(--tape-timing-function),
+            translate var(--tape-leave-duration) var(--tape-timing-function);
+        translate: 0 4px;
+
+        .scrub-input.--active > & {
+            opacity: 1;
+            transition-duration: var(--tape-enter-duration);
+            translate: 0 0;
+        }
+    }
+
+    &-ticks {
+        background-image:
+            linear-gradient(to right, currentColor 1px, transparent 1px),
+            linear-gradient(to right, currentColor 1px, transparent 1px);
+        background-position-x: calc(50% - var(--offset, 0px));
+        background-position-y: bottom;
+        background-repeat: repeat-x;
+        background-size: var(--tick) var(--tape-minor-height), calc(var(--tick) * 5) var(--tape-major-height);
+        inset: 0;
+        position: absolute;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .scrub-input-tape {
+        translate: 0 0;
+    }
+}

package/src/components/scrub-input/scss/variables.scss

@@ -0,0 +1,23 @@
+.scrub-input {
+    --background: var(--color-white-300);
+    --border-radius: var(--border-radius-400);
+    --color: var(--color-text-500);
+    --field-padding: 10px;
+    --font-size: var(--font-size-300);
+    --height: 40px;
+    --label-color: var(--color-text-300);
+    --label-color-active: var(--color-text-500);
+    --label-width: 36px;
+    --needle-color: var(--color-text-500);
+    --outline-color: var(--color-text-500);
+    --outline-width: var(--border-width-500);
+    --tape-color: var(--color-text-300);
+    --tape-enter-duration: 150ms;
+    --tape-height: 8px;
+    --tape-leave-duration: 200ms;
+    --tape-major-height: 6px;
+    --tape-minor-height: 3px;
+    --tape-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    // Keep in sync with the component's TICK constant; the tape offset is computed against it.
+    --tick: 6px;
+}

package/src/components/select/index.ts

@@ -1,10 +1,16 @@
 import { component, html, type Renderable, type Attributes } from '@esportsplus/template';
 import { reactive } from '@esportsplus/reactivity';
 import form from '~/components/form';
-import { SELECT_ARROW, SELECT_OPTION, SELECT_TOOLTIP_CONTENT } from './constants';
 import './scss/index.scss';
 
 
+const SELECT_ARROW = Symbol.for('@esportsplus/ui/select.arrow');
+
+const SELECT_OPTION = Symbol.for('@esportsplus/ui/select.option');
+
+const SELECT_TOOLTIP_CONTENT = Symbol.for('@esportsplus/ui/select.tooltip-content');
+
+
 type A = {
     [SELECT_ARROW]?: Attributes;
     [SELECT_OPTION]?: Attributes;
@@ -29,7 +35,7 @@ type A = {
 type D = Attributes & Pick<A, typeof SELECT_ARROW | typeof SELECT_OPTION | typeof SELECT_TOOLTIP_CONTENT>;
 
 
-export default Object.assign(component<A, (state: { active: boolean, selected?: string | number }) => Renderable<unknown>>(
+export default component(
     function(
         this: { attributes?: D },
         {
@@ -43,7 +49,7 @@ export default Object.assign(component<A, (state: { active: boolean, selected?:
             }),
             ...attributes
         }: A,
-        content
+        content: (state: { active: boolean, selected?: string | number }) => Renderable<unknown>
     ) {
         let { direction: defaultDirection, ...defaultTooltipContent } = this?.attributes?.[SELECT_TOOLTIP_CONTENT] ?? {},
             { direction = defaultDirection || 's', ...tooltipContent } = attributes[SELECT_TOOLTIP_CONTENT] ?? {};
@@ -170,5 +176,6 @@ export default Object.assign(component<A, (state: { active: boolean, selected?:
                 }}
             </div>
         `;
-    }
-), { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT } as const);
+    },
+    { arrow: SELECT_ARROW, option: SELECT_OPTION, tooltipContent: SELECT_TOOLTIP_CONTENT }
+);

package/src/components/select/scss/index.scss

@@ -10,34 +10,39 @@
     display: flex;
     flex-wrap: wrap;
     font-size: var(--font-size);
-    padding:
-        max(0px, calc(var(--padding-vertical) - var(--border-width)))
-        max(0px, calc((var(--padding-horizontal) * 2) + var(--arrow-size) - var(--border-width)))
-        max(0px, calc(var(--padding-vertical) - var(--border-width)))
-        max(0px, calc(var(--padding-horizontal) - var(--border-width)));
+    padding-block: max(0px, calc(var(--padding-vertical) - var(--border-width)));
+    padding-inline:
+        max(0px, calc(var(--padding-horizontal) - var(--border-width)))
+        max(0px, calc((var(--padding-horizontal) * 2) + var(--arrow-size) - 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),
         opacity var(--transition-duration) var(--transition-timing-function),
-        transform var(--transition-duration) var(--transition-timing-function);
+        rotate var(--transition-duration) var(--transition-timing-function),
+        transform var(--transition-duration) var(--transition-timing-function),
+        translate var(--transition-duration) var(--transition-timing-function);
     width: 100%;
 
     @include tokens.state(active) {
         .select-arrow {
-            transform: translateY(calc(50% + var(--arrow-size) / 3)) scaleY(-1) rotate(45deg);
+            rotate: 225deg;
+            translate: 0 calc(50% + var(--arrow-size) / 3);
         }
     }
 
     &-arrow {
-        @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
         border-color: var(--color);
         border-style: solid;
         border-width: 0 var(--border-width) var(--border-width) 0;
+        bottom: calc(50% + var(--arrow-spacer));
         content: '';
         height: var(--arrow-size);
-        transform: translateY(50%) rotate(45deg);
+        inset-inline-end: calc(var(--padding-horizontal) + var(--arrow-spacer));
+        position: absolute;
+        rotate: 45deg;
+        translate: 0 50%;
         width: var(--arrow-size);
     }
 
@@ -50,4 +55,4 @@
         width: 0px;
         z-index: 0;
     }
-}
+}