@vaadin/slider 25.1.0-alpha3 → 25.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/slider",
-  "version": "25.1.0-alpha3",
+  "version": "25.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,19 +34,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-alpha3",
-    "@vaadin/component-base": "25.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha3",
+    "@vaadin/a11y-base": "25.1.0-alpha4",
+    "@vaadin/component-base": "25.1.0-alpha4",
+    "@vaadin/field-base": "25.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.1.0-alpha3",
-    "@vaadin/test-runner-commands": "25.1.0-alpha3",
-    "@vaadin/testing-helpers": "^2.0.0"
+    "@vaadin/chai-plugins": "25.1.0-alpha4",
+    "@vaadin/test-runner-commands": "25.1.0-alpha4",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha4"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b3bb340cfd5e837cda8498aee1608950362e5177"
+  "gitHead": "4fb917150617231c1acf27faabf386560dcd3bc5"
 }

package/src/styles/vaadin-slider-base-styles.js

@@ -8,17 +8,11 @@ import { css } from 'lit';
 
 export const sliderStyles = css`
   :host {
-    display: inline-flex;
-    align-items: center;
     box-sizing: border-box;
-    position: relative;
-    width: 100%;
-    height: var(--_thumb-size);
     user-select: none;
     -webkit-user-select: none;
-    border-radius: var(--vaadin-slider-track-border-radius, var(--vaadin-radius-m));
-    --_thumb-size: var(--vaadin-slider-thumb-size, 1lh);
-    --_track-size: var(--vaadin-slider-track-size, 0.25lh);
+    --_thumb-width: var(--vaadin-slider-thumb-width, 1lh);
+    --_thumb-height: var(--vaadin-slider-thumb-height, 1lh);
   }
 
   :host([hidden]) {
@@ -36,32 +30,51 @@ export const sliderStyles = css`
 
   :host([readonly]) {
     --vaadin-slider-fill-background: var(--vaadin-background-color);
+    --_outline-style: dashed;
+  }
+
+  #controls {
+    grid-area: input;
+    display: inline-grid;
+    align-items: center;
+    width: var(--vaadin-field-default-width, 12em);
+    max-width: 100%;
+    min-width: 100%;
+    min-height: var(--_thumb-height);
+    --_track-width: calc(100% - var(--_thumb-width));
+  }
+
+  :host([has-label]) #controls {
+    border-block: var(--vaadin-input-field-border-width, 1px) solid transparent;
+    padding-block: var(--vaadin-padding-block-container);
   }
 
   [part='track'] {
     box-sizing: border-box;
-    position: absolute;
-    height: var(--_track-size);
+    grid-row: 1;
+    grid-column: track-start / track-end;
+    display: grid;
+    grid-template-columns: subgrid;
+    align-items: center;
     width: 100%;
+    height: var(--vaadin-slider-track-height, 0.25lh);
     background: var(--vaadin-slider-track-background, var(--vaadin-background-container));
-    border-radius: inherit;
+    border-radius: var(--vaadin-slider-track-border-radius, var(--vaadin-radius-m));
   }
 
   [part='track-fill'] {
     box-sizing: border-box;
-    position: absolute;
-    height: var(--_track-size);
+    grid-column: fill-start / fill-end;
+    height: 100%;
     background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
-    border-start-start-radius: inherit;
-    border-end-start-radius: inherit;
   }
 
   [part~='thumb'] {
-    position: absolute;
     box-sizing: border-box;
-    width: var(--_thumb-size);
-    height: var(--_thumb-size);
-    transform: translateX(-50%);
+    grid-row: 1;
+    grid-column: thumb1;
+    width: var(--_thumb-width);
+    height: var(--_thumb-height);
     background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
     border-radius: 50%;
     touch-action: none;
@@ -72,13 +85,20 @@ export const sliderStyles = css`
     border: dashed 1px var(--vaadin-border-color);
   }
 
-  /* visually hidden */
+  :host([readonly]) [part='track-fill'] {
+    border-inline-end: none;
+  }
+
   ::slotted(input) {
-    flex: 1;
+    grid-row: 1;
+    grid-column: track-start / track-end;
+    appearance: none;
+    width: 100%;
+    height: 100%;
     font: inherit;
-    height: var(--_thumb-size);
-    opacity: 0 !important;
-    margin: 0 !important;
-    pointer-events: none;
+    margin: 0;
+    background: transparent;
+    outline: 0;
+    -webkit-tap-highlight-color: transparent;
   }
 `;

package/src/vaadin-range-slider.d.ts

@@ -5,6 +5,7 @@
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { SliderMixin } from './vaadin-slider-mixin.js';
 
@@ -39,7 +40,7 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class RangeSlider extends SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**
    * The value of the slider.
    */

package/src/vaadin-range-slider.js

@@ -11,6 +11,8 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
+import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { sliderStyles } from './styles/vaadin-slider-base-styles.js';
@@ -30,12 +32,13 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes FieldMixin
  * @mixes FocusMixin
  * @mixes SliderMixin
  * @mixes ThemableMixin
  */
-class RangeSlider extends SliderMixin(
-  FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
+class RangeSlider extends FieldMixin(
+  SliderMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
 ) {
   static get is() {
     return 'vaadin-range-slider';
@@ -43,6 +46,7 @@ class RangeSlider extends SliderMixin(
 
   static get styles() {
     return [
+      field,
       sliderStyles,
       css`
         :host([focus-ring][start-focused]) [part~='thumb-start'],
@@ -51,8 +55,56 @@ class RangeSlider extends SliderMixin(
           outline-offset: 1px;
         }
 
-        :host([readonly]) {
-          --_outline-style: dashed;
+        #controls {
+          grid-template-columns:
+            [track-start]
+            calc(var(--start-value) * var(--_track-width))
+            [thumb1]
+            0
+            [fill-start]
+            calc((var(--end-value) - var(--start-value)) * var(--_track-width))
+            [fill-end thumb2]
+            0
+            calc((1 - var(--end-value)) * var(--_track-width))
+            var(--_thumb-width)
+            [track-end];
+        }
+
+        [part='track-fill'] {
+          margin-inline-start: var(--_thumb-width);
+        }
+
+        [part~='thumb-end'] {
+          grid-column: thumb2;
+        }
+
+        :host([readonly]) [part='track-fill'] {
+          border-inline-start: none;
+        }
+
+        ::slotted(input:last-of-type) {
+          clip-path: inset(
+            0 0 0
+              clamp(
+                0%,
+                var(--_thumb-width) / 2 + var(--start-value) * var(--_track-width) +
+                  (var(--end-value) - var(--start-value)) * var(--_track-width) / 2,
+                100%
+              )
+          );
+        }
+
+        :host([dir='rtl']) ::slotted(input:last-of-type) {
+          clip-path: inset(
+            0
+              clamp(
+                0%,
+                var(--_thumb-width) / 2 + var(--start-value) * var(--_track-width) +
+                  (var(--end-value) - var(--start-value)) * var(--_track-width) / 2,
+                100%
+              )
+              0 0
+          );
         }
       `,
     ];
@@ -62,6 +114,10 @@ class RangeSlider extends SliderMixin(
     return 'sliderComponent';
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   static get properties() {
     return {
       /**
@@ -84,18 +140,29 @@ class RangeSlider extends SliderMixin(
     const endPercent = this.__getPercentFromValue(endValue);
 
     return html`
-      <div part="track">
-        <div
-          part="track-fill"
-          style="${styleMap({
-            insetInlineStart: `${startPercent}%`,
-            insetInlineEnd: `${100 - endPercent}%`,
-          })}"
-        ></div>
+      <div class="vaadin-slider-container">
+        <div part="label" @click="${this.focus}">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true"></span>
+        </div>
+
+        <div id="controls" style="${styleMap({ '--start-value': startPercent, '--end-value': endPercent })}">
+          <div part="track">
+            <div part="track-fill"></div>
+          </div>
+          <div part="thumb thumb-start"></div>
+          <div part="thumb thumb-end"></div>
+          <slot name="input"></slot>
+        </div>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
-      <div part="thumb thumb-start" style="${styleMap({ insetInlineStart: `${startPercent}%` })}"></div>
-      <div part="thumb thumb-end" style="${styleMap({ insetInlineStart: `${endPercent}%` })}"></div>
-      <slot name="input"></slot>
     `;
   }
 
@@ -113,6 +180,7 @@ class RangeSlider extends SliderMixin(
 
     const inputs = this.querySelectorAll('[slot="input"]');
     this._inputElements = [...inputs];
+    this.ariaTarget = this;
   }
 
   /**
@@ -139,7 +207,7 @@ class RangeSlider extends SliderMixin(
           .disabled="${this.disabled}"
           tabindex="${this.disabled ? -1 : 0}"
           @keydown="${this.__onKeyDown}"
-          @input="${this.__onInput}"
+          @input="${this.__onStartInput}"
           @change="${this.__onChange}"
         />
         <input
@@ -153,7 +221,7 @@ class RangeSlider extends SliderMixin(
           .disabled="${this.disabled}"
           tabindex="${this.disabled ? -1 : 0}"
           @keydown="${this.__onKeyDown}"
-          @input="${this.__onInput}"
+          @input="${this.__onEndInput}"
           @change="${this.__onChange}"
         />
       `,
@@ -191,6 +259,19 @@ class RangeSlider extends SliderMixin(
     super.focus(options);
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  blur() {
+    if (this._inputElements) {
+      const focusedInput = this._inputElements.find((input) => isElementFocused(input));
+      if (focusedInput) {
+        focusedInput.blur();
+      }
+    }
+  }
+
   /**
    * Override method inherited from `FocusMixin` to set
    * state attributes indicating which thumb has focus.
@@ -206,78 +287,33 @@ class RangeSlider extends SliderMixin(
     this.toggleAttribute('end-focused', isElementFocused(this._inputElements[1]));
   }
 
-  /**
-   * @param {PointerEvent} event
-   * @private
-   */
-  __focusInput(event) {
-    const index = this.__getThumbIndex(event);
-    this._inputElements[index].focus();
-  }
-
   /** @private */
   __commitValue() {
     this.value = [...this.__value];
   }
 
-  /**
-   * @param {Event} event
-   * @return {number}
-   */
-  __getThumbIndex(event) {
-    if (event.type === 'input') {
-      return this._inputElements.indexOf(event.target);
+  /** @private */
+  __onStartInput(event) {
+    // Use second input value as first input max limit
+    if (parseFloat(event.target.value) > this.__value[1]) {
+      event.target.value = this.__value[1];
     }
 
-    return this.__getClosestThumb(event);
+    const value = event.target.value;
+    this.__updateValue(value, 0);
+    this.__commitValue();
   }
 
-  /**
-   * @param {PointerEvent} event
-   * @return {number}
-   * @private
-   */
-  __getClosestThumb(event) {
-    let closestThumb;
-
-    // If both thumbs are at the start, use the second thumb,
-    // and if both are at tne end, use the first one instead.
-    if (this.__value[0] === this.__value[1]) {
-      const { min, max } = this.__getConstraints();
-      if (this.__value[0] === min) {
-        return 1;
-      }
-
-      if (this.__value[0] === max) {
-        return 0;
-      }
-    }
-
-    const percent = this.__getEventPercent(event);
-    const value = this.__getValueFromPercent(percent);
-
-    // First thumb position from the "end"
-    const index = this.__value.findIndex((v) => value - v < 0);
-
-    // Pick the first one
-    if (index === 0) {
-      closestThumb = index;
-    } else if (index === -1) {
-      // Pick the last one (position is past all the thumbs)
-      closestThumb = this.__value.length - 1;
-    } else {
-      const lastStart = this.__value[index - 1];
-      const firstEnd = this.__value[index];
-      // Pick the first one from the "start" unless thumbs are stacked on top of each other
-      if (Math.abs(lastStart - value) < Math.abs(firstEnd - value)) {
-        closestThumb = index - 1;
-      } else {
-        // Pick the last one from the "end"
-        closestThumb = index;
-      }
+  /** @private */
+  __onEndInput(event) {
+    // Use first input value as second input min limit
+    if (parseFloat(event.target.value) < this.__value[0]) {
+      event.target.value = this.__value[0];
     }
 
-    return closestThumb;
+    const value = event.target.value;
+    this.__updateValue(value, 1);
+    this.__commitValue();
   }
 
   /** @private */

package/src/vaadin-slider-mixin.d.ts

@@ -5,10 +5,11 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 
 export declare function SliderMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<DisabledMixinClass> & Constructor<SliderMixinClass> & T;
+): Constructor<DisabledMixinClass> & Constructor<SliderMixinClass> & Constructor<SlotStylesMixinClass> & T;
 
 export declare class SliderMixinClass {
   /**

package/src/vaadin-slider-mixin.js

@@ -4,13 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 
 /**
  * @polymerMixin
  * @mixes DisabledMixin
+ * @mixes SlotStylesMixin
  */
 export const SliderMixin = (superClass) =>
-  class SliderMixinClass extends DisabledMixin(superClass) {
+  class SliderMixinClass extends SlotStylesMixin(DisabledMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -56,17 +58,39 @@ export const SliderMixin = (superClass) =>
       };
     }
 
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+
+      return [
+        `
+          ${tag} > input::-webkit-slider-runnable-track {
+            height: 100%;
+          }
+
+          ${tag} > input::-webkit-slider-thumb {
+            appearance: none;
+            width: var(--_thumb-width);
+            height: 100%;
+            /* iOS needs these */
+            background: transparent;
+            box-shadow: none;
+          }
+
+          ${tag} > input::-moz-range-thumb {
+            border: 0;
+            background: transparent;
+            width: var(--_thumb-width);
+            height: 100%;
+          }
+        `,
+      ];
+    }
+
     constructor() {
       super();
 
-      this.__onPointerMove = this.__onPointerMove.bind(this);
-      this.__onPointerUp = this.__onPointerUp.bind(this);
-
-      // Use separate mousedown listener for focusing the input, as
-      // pointerdown fires too early and the global `keyboardActive`
-      // flag isn't updated yet, which incorrectly shows focus-ring
       this.addEventListener('mousedown', (e) => this.__onMouseDown(e));
-      this.addEventListener('pointerdown', (e) => this.__onPointerDown(e));
     }
 
     /** @protected */
@@ -76,14 +100,6 @@ export const SliderMixin = (superClass) =>
       this.__lastCommittedValue = this.value;
     }
 
-    /**
-     * @param {Event} event
-     * @return {number}
-     */
-    __getThumbIndex(_event) {
-      return 0;
-    }
-
     /**
      * @param {number} value
      * @param {number} index
@@ -128,39 +144,8 @@ export const SliderMixin = (superClass) =>
      */
     __getPercentFromValue(value) {
       const { min, max } = this.__getConstraints();
-      return (100 * (value - min)) / (max - min);
-    }
-
-    /**
-     * @param {number} percent
-     * @return {number}
-     * @private
-     */
-    __getValueFromPercent(percent) {
-      const { min, max } = this.__getConstraints();
-      return min + percent * (max - min);
-    }
-
-    /**
-     * @param {PointerEvent} event
-     * @return {number}
-     * @private
-     */
-    __getEventPercent(event) {
-      const offset = event.offsetX;
-      const size = this.offsetWidth;
-      const safeOffset = Math.min(Math.max(offset, 0), size);
-      return safeOffset / size;
-    }
-
-    /**
-     * @param {PointerEvent} event
-     * @return {number}
-     * @private
-     */
-    __getEventValue(event) {
-      const percent = this.__getEventPercent(event);
-      return this.__getValueFromPercent(percent);
+      const safeValue = Math.min(Math.max(value, min), max);
+      return (safeValue - min) / (max - min);
     }
 
     /**
@@ -168,80 +153,16 @@ export const SliderMixin = (superClass) =>
      * @private
      */
     __onMouseDown(event) {
-      const part = event.composedPath()[0].getAttribute('part');
-      if (!part || (!part.startsWith('track') && !part.startsWith('thumb'))) {
+      if (!event.composedPath().includes(this.$.controls)) {
         return;
       }
 
-      // Prevent losing focus
-      event.preventDefault();
-
-      this.__focusInput(event);
-    }
-
-    /**
-     * @param {PointerEvent} event
-     * @private
-     */
-    __onPointerDown(event) {
-      if (this.disabled || this.readonly || event.button !== 0) {
-        return;
-      }
-
-      // Only handle pointerdown on the thumb, track or track-fill
-      const part = event.composedPath()[0].getAttribute('part');
-      if (!part || (!part.startsWith('track') && !part.startsWith('thumb'))) {
-        return;
-      }
-
-      this.setPointerCapture(event.pointerId);
-      this.addEventListener('pointermove', this.__onPointerMove);
-      this.addEventListener('pointerup', this.__onPointerUp);
-      this.addEventListener('pointercancel', this.__onPointerUp);
-
-      this.__thumbIndex = this.__getThumbIndex(event);
-
-      // Update value on track click
-      if (part.startsWith('track')) {
-        const newValue = this.__getEventValue(event);
-        this.__updateValue(newValue, this.__thumbIndex);
-        this.__commitValue();
+      // Prevent modifying value when readonly
+      if (this.readonly) {
+        event.preventDefault();
       }
     }
 
-    /**
-     * @param {PointerEvent} event
-     * @private
-     */
-    __onPointerMove(event) {
-      const newValue = this.__getEventValue(event);
-      this.__updateValue(newValue, this.__thumbIndex);
-      this.__commitValue();
-    }
-
-    /**
-     * @param {PointerEvent} event
-     * @private
-     */
-    __onPointerUp(event) {
-      this.__thumbIndex = null;
-
-      this.releasePointerCapture(event.pointerId);
-      this.removeEventListener('pointermove', this.__onPointerMove);
-      this.removeEventListener('pointerup', this.__onPointerUp);
-      this.removeEventListener('pointercancel', this.__onPointerUp);
-
-      this.__detectAndDispatchChange();
-    }
-
-    /**
-     * @param {Event} event
-     * @private
-     */
-    __focusInput(_event) {
-      this.focus({ focusVisible: false });
-    }
-
     /** @private */
     __detectAndDispatchChange() {
       if (JSON.stringify(this.__lastCommittedValue) !== JSON.stringify(this.value)) {
@@ -250,16 +171,6 @@ export const SliderMixin = (superClass) =>
       }
     }
 
-    /**
-     * @param {Event} event
-     * @private
-     */
-    __onInput(event) {
-      const index = this.__getThumbIndex(event);
-      this.__updateValue(event.target.value, index);
-      this.__commitValue();
-    }
-
     /**
      * @param {Event} event
      * @private