@vaadin/slider 25.1.0-alpha2 → 25.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/slider",
-  "version": "25.1.0-alpha2",
+  "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-alpha2",
-    "@vaadin/component-base": "25.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha2",
+    "@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-alpha2",
-    "@vaadin/test-runner-commands": "25.1.0-alpha2",
-    "@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": "dfeb6e14643ec923e5505ca645f7354c6dc170ec"
+  "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}"
         />
       `,
@@ -166,7 +234,7 @@ class RangeSlider extends SliderMixin(
   updated(props) {
     super.updated(props);
 
-    if (props.has('value') || props.has('min') || props.has('max')) {
+    if (props.has('value') || props.has('min') || props.has('max') || props.has('step')) {
       const value = [...this.value];
       value.forEach((v, idx) => {
         this.__updateValue(v, idx, value);
@@ -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 {
   /**