@vaadin/slider 25.1.0-alpha7 → 25.1.0-alpha9

package/custom-elements.json

@@ -249,6 +249,20 @@
                 "module": "src/vaadin-slider-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the `invalid` property changes.",
+              "name": "invalid-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired whenever the field is validated.",
+              "name": "validated"
+            },
             {
               "type": {
                 "text": "CustomEvent"
@@ -1450,6 +1464,20 @@
                 "module": "src/vaadin-slider-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the `invalid` property changes.",
+              "name": "invalid-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired whenever the field is validated.",
+              "name": "validated"
+            },
             {
               "type": {
                 "text": "CustomEvent"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/slider",
-  "version": "25.1.0-alpha7",
+  "version": "25.1.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -35,23 +35,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-alpha7",
-    "@vaadin/component-base": "25.1.0-alpha7",
-    "@vaadin/field-base": "25.1.0-alpha7",
-    "@vaadin/overlay": "25.1.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha7",
+    "@vaadin/a11y-base": "25.1.0-alpha9",
+    "@vaadin/component-base": "25.1.0-alpha9",
+    "@vaadin/field-base": "25.1.0-alpha9",
+    "@vaadin/overlay": "25.1.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.1.0-alpha7",
-    "@vaadin/test-runner-commands": "25.1.0-alpha7",
+    "@vaadin/aura": "25.1.0-alpha9",
+    "@vaadin/chai-plugins": "25.1.0-alpha9",
+    "@vaadin/test-runner-commands": "25.1.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha7"
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha9"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "98c586125f769c8fefd307536965293668fda81d"
+  "gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
 }

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

@@ -95,7 +95,6 @@ export const sliderStyles = css`
     border: var(--vaadin-slider-thumb-border-width, 1px) solid
       var(--vaadin-slider-thumb-border-color, var(--vaadin-text-color));
     border-radius: var(--vaadin-slider-thumb-border-radius, var(--vaadin-radius-l));
-    touch-action: none;
   }
 
   :host([readonly]) [part='track-fill'] {
@@ -114,6 +113,7 @@ export const sliderStyles = css`
     outline: 0;
     -webkit-tap-highlight-color: transparent;
     cursor: inherit;
+    touch-action: none;
     z-index: 999;
   }
 

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

@@ -150,7 +150,9 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {Event} input - Fired when the slider value changes during user interaction.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**

package/src/vaadin-range-slider.js

@@ -119,7 +119,9 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {Event} input - Fired when the slider value changes during user interaction.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @customElement vaadin-range-slider
  * @extends HTMLElement

package/src/vaadin-slider-mixin.js

@@ -158,17 +158,26 @@ export const SliderMixin = (superClass) =>
 
       const safeValue = Math.min(Math.max(value, minValue), maxValue);
 
+      // Round to step precision to avoid floating-point artifacts.
+      const precision = this.__getStepPrecision(step);
+
       const offset = safeValue - minValue;
       const nearestOffset = Math.round(offset / step) * step;
-      const nearestValue = minValue + nearestOffset;
+      const nearestValue = parseFloat((minValue + nearestOffset).toFixed(precision));
 
       // Ensure the last value matching step is used below the max limit.
       // Example: max = 100, step = 1.5 - force maximum allowed value to 99.
-      const newValue = nearestValue <= maxValue ? nearestValue : nearestValue - step;
+      const newValue = nearestValue <= maxValue ? nearestValue : parseFloat((nearestValue - step).toFixed(precision));
 
       this.__value = fullValue.with(index, newValue);
     }
 
+    /** @private */
+    __getStepPrecision(step) {
+      const afterDecimal = String(step).split('.')[1];
+      return afterDecimal ? afterDecimal.length : 0;
+    }
+
     /**
      * @return {{ min: number, max: number, step: number}}
      * @private
@@ -188,6 +197,9 @@ export const SliderMixin = (superClass) =>
      */
     __getPercentFromValue(value) {
       const { min, max } = this.__getConstraints();
+      if (max <= min) {
+        return 0;
+      }
       const safeValue = Math.min(Math.max(value, min), max);
       return (safeValue - min) / (max - min);
     }

package/src/vaadin-slider.d.ts

@@ -145,7 +145,9 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {Event} input - Fired when the slider value changes during user interaction.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class Slider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**

package/src/vaadin-slider.js

@@ -114,7 +114,9 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {Event} input - Fired when the slider value changes during user interaction.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @customElement vaadin-slider
  * @extends HTMLElement