@material/slider - npm Package Compare versions

Comparing version 15.0.0-canary.2d26722d2.0 to 15.0.0-canary.2f5b899bc.0

adapter.d.ts

@@ -203,39 +203,39 @@ /**
      */
-    registerEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+    registerEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Deregisters an event listener on the root element.
      */
-    deregisterEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+    deregisterEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Registers an event listener on the given thumb element.
      */
-    registerThumbEventHandler<K extends EventType>(thumb: Thumb, evtType: K, handler: SpecificEventListener<K>): void;
+    registerThumbEventHandler<K extends EventType>(thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Deregisters an event listener on the given thumb element.
      */
-    deregisterThumbEventHandler<K extends EventType>(thumb: Thumb, evtType: K, handler: SpecificEventListener<K>): void;
+    deregisterThumbEventHandler<K extends EventType>(thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Registers an event listener on the given input element.
      */
-    registerInputEventHandler<K extends EventType>(thumb: Thumb, evtType: K, handler: SpecificEventListener<K>): void;
+    registerInputEventHandler<K extends EventType>(thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Deregisters an event listener on the given input element.
      */
-    deregisterInputEventHandler<K extends EventType>(thumb: Thumb, evtType: K, handler: SpecificEventListener<K>): void;
+    deregisterInputEventHandler<K extends EventType>(thumb: Thumb, eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Registers an event listener on the body element.
      */
-    registerBodyEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+    registerBodyEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Deregisters an event listener on the body element.
      */
-    deregisterBodyEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+    deregisterBodyEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Registers an event listener on the window.
      */
-    registerWindowEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+    registerWindowEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
     /**
      * Deregisters an event listener on the window.
      */
-    deregisterWindowEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+    deregisterWindowEventHandler<K extends EventType>(eventType: K, handler: SpecificEventListener<K>): void;
 }

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-# [15.0.0-canary.2d26722d2.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.2d26722d2.0) (2022-12-02)
+# [15.0.0-canary.2f5b899bc.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.2f5b899bc.0) (2024-05-20)
 
@@ -12,5 +12,14 @@
 
+* **slider:** Move comment to correct location ([d7a2277](https://github.com/material-components/material-components-web/commit/d7a2277dee780757318ff962277c109a7c615e12))
 * **slider:** Move opacity target declaration ([e741b5c](https://github.com/material-components/material-components-web/commit/e741b5c82c7752c36745616d9bc407af590be7d4))
+* **slider:** Remove support for deprecated `label-label-text-font-size` token ([8a74f7c](https://github.com/material-components/material-components-web/commit/8a74f7c6d4dffc9e066d548e74ebd7ab1c58ac65))
+* **slider:** Replace `label-label-text-font-size` token with `label-label-text-size` ([73537ab](https://github.com/material-components/material-components-web/commit/73537ab0fe98dbf2dc4b824c128c4c05da6ff986))
 * **slider:** resolve a couple of errors with new theming API ([8d7ae91](https://github.com/material-components/material-components-web/commit/8d7ae912ab32815d2f01e8540bc49751b8fad38d))
 * **slider:** resolve more compilation errors ([db414b8](https://github.com/material-components/material-components-web/commit/db414b864f4c248439d916d4ee36cd43316927ea))
 * **slider:** resolve Sass deprecation warning ([7971d6a](https://github.com/material-components/material-components-web/commit/7971d6ad5c3a7e771c4a74757b2185edd97443fd))
+* **slider:** Use CSS Variables instead of hardcoded values for track height ([067af7e](https://github.com/material-components/material-components-web/commit/067af7eff1cc5f3de077068184dfbd31c76f5a41))
+
+
+### Features
+
+* **slider:** Moves native inputs into thumbs to improve a11y. ([47c7deb](https://github.com/material-components/material-components-web/commit/47c7deb19df667d31f65d7742509fb883e4501f5))

component.d.ts

@@ -25,8 +25,7 @@ /**
 import { MDCSliderFoundation } from './foundation';
-/** Vanilla JS implementation of slider component. */
+/** Vanilla implementation of slider component. */
 export declare class MDCSlider extends MDCComponent<MDCSliderFoundation> {
-    static attachTo(root: Element, options?: {
+    static attachTo(root: HTMLElement, options?: {
         skipInitialUIUpdate?: boolean;
     }): MDCSlider;
-    root: HTMLElement;
     private inputs;
@@ -33,0 +32,0 @@ private thumbs;

component.js

@@ -32,3 +32,3 @@ /**
 import { Thumb, TickMark } from './types';
-/** Vanilla JS implementation of slider component. */
+/** Vanilla implementation of slider component. */
 var MDCSlider = /** @class */ (function (_super) {
@@ -148,2 +148,3 @@ __extends(MDCSlider, _super);
             },
+            // tslint:disable-next-line:enforce-name-casing
             emitDragStartEvent: function (_, thumb) {
@@ -154,2 +155,3 @@ // Emitting event is not yet implemented. See issue:
             },
+            // tslint:disable-next-line:enforce-name-casing
             emitDragEndEvent: function (_, thumb) {
@@ -160,31 +162,31 @@ // Emitting event is not yet implemented. See issue:
             },
-            registerEventHandler: function (evtType, handler) {
-                _this.listen(evtType, handler);
+            registerEventHandler: function (eventType, handler) {
+                _this.listen(eventType, handler);
             },
-            deregisterEventHandler: function (evtType, handler) {
-                _this.unlisten(evtType, handler);
+            deregisterEventHandler: function (eventType, handler) {
+                _this.unlisten(eventType, handler);
             },
-            registerThumbEventHandler: function (thumb, evtType, handler) {
-                _this.getThumbEl(thumb).addEventListener(evtType, handler);
+            registerThumbEventHandler: function (thumb, eventType, handler) {
+                _this.getThumbEl(thumb).addEventListener(eventType, handler);
             },
-            deregisterThumbEventHandler: function (thumb, evtType, handler) {
-                _this.getThumbEl(thumb).removeEventListener(evtType, handler);
+            deregisterThumbEventHandler: function (thumb, eventType, handler) {
+                _this.getThumbEl(thumb).removeEventListener(eventType, handler);
             },
-            registerInputEventHandler: function (thumb, evtType, handler) {
-                _this.getInput(thumb).addEventListener(evtType, handler);
+            registerInputEventHandler: function (thumb, eventType, handler) {
+                _this.getInput(thumb).addEventListener(eventType, handler);
             },
-            deregisterInputEventHandler: function (thumb, evtType, handler) {
-                _this.getInput(thumb).removeEventListener(evtType, handler);
+            deregisterInputEventHandler: function (thumb, eventType, handler) {
+                _this.getInput(thumb).removeEventListener(eventType, handler);
             },
-            registerBodyEventHandler: function (evtType, handler) {
-                document.body.addEventListener(evtType, handler);
+            registerBodyEventHandler: function (eventType, handler) {
+                document.body.addEventListener(eventType, handler);
             },
-            deregisterBodyEventHandler: function (evtType, handler) {
-                document.body.removeEventListener(evtType, handler);
+            deregisterBodyEventHandler: function (eventType, handler) {
+                document.body.removeEventListener(eventType, handler);
             },
-            registerWindowEventHandler: function (evtType, handler) {
-                window.addEventListener(evtType, handler);
+            registerWindowEventHandler: function (eventType, handler) {
+                window.addEventListener(eventType, handler);
             },
-            deregisterWindowEventHandler: function (evtType, handler) {
-                window.removeEventListener(evtType, handler);
+            deregisterWindowEventHandler: function (eventType, handler) {
+                window.removeEventListener(eventType, handler);
             },
@@ -203,6 +205,4 @@ // tslint:enable:object-literal-sort-keys
         var _b = _a === void 0 ? {} : _a, skipInitialUIUpdate = _b.skipInitialUIUpdate;
-        this.inputs =
-            [].slice.call(this.root.querySelectorAll("." + cssClasses.INPUT));
-        this.thumbs =
-            [].slice.call(this.root.querySelectorAll("." + cssClasses.THUMB));
+        this.inputs = Array.from(this.root.querySelectorAll("." + cssClasses.INPUT));
+        this.thumbs = Array.from(this.root.querySelectorAll("." + cssClasses.THUMB));
         this.trackActive =
@@ -291,3 +291,3 @@ this.root.querySelector("." + cssClasses.TRACK_ACTIVE);
         var ripples = [];
-        var rippleSurfaces = [].slice.call(this.root.querySelectorAll("." + cssClasses.THUMB));
+        var rippleSurfaces = Array.from(this.root.querySelectorAll("." + cssClasses.THUMB));
         var _loop_1 = function (i) {
@@ -300,6 +300,6 @@ var rippleSurface = rippleSurfaces[i];
                     rippleSurface.classList.add(className);
-                }, computeBoundingRect: function () { return rippleSurface.getBoundingClientRect(); }, deregisterInteractionHandler: function (evtType, handler) {
-                    input.removeEventListener(evtType, handler);
-                }, isSurfaceActive: function () { return matches(input, ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (evtType, handler) {
-                    input.addEventListener(evtType, handler, applyPassive());
+                }, computeBoundingRect: function () { return rippleSurface.getBoundingClientRect(); }, deregisterInteractionHandler: function (eventType, handler) {
+                    input.removeEventListener(eventType, handler);
+                }, isSurfaceActive: function () { return matches(input, ':active'); }, isUnbounded: function () { return true; }, registerInteractionHandler: function (eventType, handler) {
+                    input.addEventListener(eventType, handler, applyPassive());
                 }, removeClass: function (className) {
@@ -306,0 +306,0 @@ rippleSurface.classList.remove(className);

foundation.d.ts

@@ -39,3 +39,2 @@ /**
     private value;
-    private rect;
     private isDisabled;
@@ -113,3 +112,2 @@ private isDiscrete;
     /**
-     * - Syncs slider boundingClientRect with the current DOM.
      * - Updates UI based on internal state.
@@ -116,0 +114,0 @@ */

foundation.js

@@ -313,3 +313,2 @@ /**
     /**
-     * - Syncs slider boundingClientRect with the current DOM.
      * - Updates UI based on internal state.
@@ -319,3 +318,2 @@ */
         var _b = _a === void 0 ? {} : _a, skipUpdateUI = _b.skipUpdateUI;
-        this.rect = this.adapter.getBoundingClientRect();
         if (this.isRange) {
@@ -643,4 +641,5 @@ this.startThumbKnobWidth = this.adapter.getThumbKnobWidth(Thumb.START);
     MDCSliderFoundation.prototype.mapClientXOnSliderScale = function (clientX) {
-        var xPos = clientX - this.rect.left;
-        var pctComplete = xPos / this.rect.width;
+        var rect = this.adapter.getBoundingClientRect();
+        var xPos = clientX - rect.left;
+        var pctComplete = xPos / rect.width;
         if (this.adapter.isRTL()) {
@@ -713,4 +712,5 @@ pctComplete = 1 - pctComplete;
         var _a = this, max = _a.max, min = _a.min;
+        var rect = this.adapter.getBoundingClientRect();
         var pctComplete = (this.value - this.valueStart) / (max - min);
-        var rangePx = pctComplete * this.rect.width;
+        var rangePx = pctComplete * rect.width;
         var isRtl = this.adapter.isRTL();
@@ -720,4 +720,4 @@ var transformProp = HAS_WINDOW ? getCorrectPropertyName(window, 'transform') : 'transform';
             var thumbLeftPos_1 = this.adapter.isRTL() ?
-                (max - this.value) / (max - min) * this.rect.width :
-                (this.valueStart - min) / (max - min) * this.rect.width;
+                (max - this.value) / (max - min) * rect.width :
+                (this.valueStart - min) / (max - min) * rect.width;
             var thumbRightPos_1 = thumbLeftPos_1 + rangePx;
@@ -732,3 +732,3 @@ this.animFrame.request(AnimationKeys.SLIDER_UPDATE, function () {
                     _this.adapter.setTrackActiveStyleProperty('left', 'auto');
-                    _this.adapter.setTrackActiveStyleProperty('right', _this.rect.width - thumbRightPos_1 + "px");
+                    _this.adapter.setTrackActiveStyleProperty('right', rect.width - thumbRightPos_1 + "px");
                 }
@@ -758,3 +758,3 @@ else {
             this.animFrame.request(AnimationKeys.SLIDER_UPDATE, function () {
-                var thumbStartPos = isRtl ? _this.rect.width - rangePx : rangePx;
+                var thumbStartPos = isRtl ? rect.width - rangePx : rangePx;
                 _this.adapter.setThumbStyleProperty(transformProp, "translateX(" + thumbStartPos + "px)", Thumb.END);
@@ -761,0 +761,0 @@ _this.alignValueIndicator(Thumb.END, thumbStartPos);

package.json

 {
   "name": "@material/slider",
-  "version": "15.0.0-canary.2d26722d2.0",
+  "version": "15.0.0-canary.2f5b899bc.0",
   "description": "The Material Components for the web slider component",
@@ -23,15 +23,15 @@ "main": "dist/mdc.slider.js",
   "dependencies": {
-    "@material/animation": "15.0.0-canary.2d26722d2.0",
-    "@material/base": "15.0.0-canary.2d26722d2.0",
-    "@material/dom": "15.0.0-canary.2d26722d2.0",
-    "@material/elevation": "15.0.0-canary.2d26722d2.0",
-    "@material/feature-targeting": "15.0.0-canary.2d26722d2.0",
-    "@material/ripple": "15.0.0-canary.2d26722d2.0",
-    "@material/rtl": "15.0.0-canary.2d26722d2.0",
-    "@material/theme": "15.0.0-canary.2d26722d2.0",
-    "@material/tokens": "15.0.0-canary.2d26722d2.0",
-    "@material/typography": "15.0.0-canary.2d26722d2.0",
+    "@material/animation": "15.0.0-canary.2f5b899bc.0",
+    "@material/base": "15.0.0-canary.2f5b899bc.0",
+    "@material/dom": "15.0.0-canary.2f5b899bc.0",
+    "@material/elevation": "15.0.0-canary.2f5b899bc.0",
+    "@material/feature-targeting": "15.0.0-canary.2f5b899bc.0",
+    "@material/ripple": "15.0.0-canary.2f5b899bc.0",
+    "@material/rtl": "15.0.0-canary.2f5b899bc.0",
+    "@material/theme": "15.0.0-canary.2f5b899bc.0",
+    "@material/tokens": "15.0.0-canary.2f5b899bc.0",
+    "@material/typography": "15.0.0-canary.2f5b899bc.0",
     "tslib": "^2.1.0"
   },
-  "gitHead": "76df2659d7f71f74a86512b38245422ca356fe12"
+  "gitHead": "751553ca74ad43074c963487257a8862de87844b"
 }

README.md

@@ -95,3 +95,2 @@ <!--docs:
 <div class="mdc-slider">
-  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
   <div class="mdc-slider__track">
@@ -105,2 +104,3 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
   </div>
@@ -120,4 +120,2 @@ </div>
 <div class="mdc-slider mdc-slider--range" data-min-range="10">
-  <input class="mdc-slider__input" type="range" min="0" max="60" value="30" name="rangeStart" aria-label="Continuous range slider demo">
-  <input class="mdc-slider__input" type="range" min="40" max="100" value="70" name="rangeEnd" aria-label="Continuous range slider demo">
   <div class="mdc-slider__track">
@@ -131,5 +129,7 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="60" value="30" name="rangeStart" aria-label="Continuous range slider demo">
   </div>
   <div class="mdc-slider__thumb">
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="40" max="100" value="70" name="rangeEnd" aria-label="Continuous range slider demo">
   </div>
@@ -154,3 +154,2 @@ </div>
 <div class="mdc-slider mdc-slider--discrete">
-  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10" aria-label="Discrete slider demo">
   <div class="mdc-slider__track">
@@ -171,2 +170,3 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10" aria-label="Discrete slider demo">
   </div>
@@ -193,3 +193,2 @@ </div>
 <div class="mdc-slider mdc-slider--discrete mdc-slider--tick-marks">
-  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10" aria-label="Discrete slider with tick marks demo">
   <div class="mdc-slider__track">
@@ -223,2 +222,3 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" step="10" aria-label="Discrete slider with tick marks demo">
   </div>
@@ -232,4 +232,2 @@ </div>
 <div class="mdc-slider mdc-slider--range mdc-slider--discrete">
-  <input class="mdc-slider__input" type="range" min="0" max="50" value="20" step="10" name="rangeStart" aria-label="Discrete range slider demo">
-  <input class="mdc-slider__input" type="range" min="20" max="100" value="50" step="10" name="rangeEnd" aria-label="Discrete range slider demo">
   <div class="mdc-slider__track">
@@ -250,2 +248,3 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="50" value="20" step="10" name="rangeStart" aria-label="Discrete range slider demo">
   </div>
@@ -261,2 +260,3 @@ <div class="mdc-slider__thumb">
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="20" max="100" value="50" step="10" name="rangeEnd" aria-label="Discrete range slider demo">
   </div>
@@ -277,3 +277,2 @@ </div>
 <div class="mdc-slider mdc-slider--disabled">
-  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" step="10" disabled name="volume" aria-label="Disabled slider demo">
   <div class="mdc-slider__track">
@@ -287,2 +286,3 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="100" value="50" step="10" disabled name="volume" aria-label="Disabled slider demo">
   </div>
@@ -305,4 +305,7 @@ </div>
 <div class="mdc-slider">
-  <input class="mdc-slider__input" aria-label="Slider demo" min="0" max="100" value="75">
   <!-- ... -->
+  <div class="mdc-slider__thumb">
+    <!-- ... -->
+    <input class="mdc-slider__input" aria-label="Slider demo" min="0" max="100" value="75">
+  </div>
 </div>
@@ -344,4 +347,2 @@ ```
 <div class="mdc-slider mdc-slider--range" data-min-range="10">
-  <input class="mdc-slider__input" type="range" min="0" max="60" value="30" name="rangeStart" aria-label="Range slider demo">
-  <input class="mdc-slider__input" type="range" min="40" max="100" value="70" name="rangeEnd" aria-label="Range slider demo">
   <div class="mdc-slider__track">
@@ -356,5 +357,7 @@ <div class="mdc-slider__track--inactive"></div>
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="0" max="60" value="30" name="rangeStart" aria-label="Range slider demo">
   </div>
   <div class="mdc-slider__thumb" style="left:calc(70%-24px)">
     <div class="mdc-slider__thumb-knob"></div>
+    <input class="mdc-slider__input" type="range" min="40" max="100" value="70" name="rangeEnd" aria-label="Range slider demo">
   </div>
@@ -361,0 +364,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1228926

increased by39.64%

Lines of code

9633

increased by55.22%

Number of lines in readme file

390

increased by0.78%

Dependency changes

• + Added@material/animation@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/base@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/dom@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/elevation@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/feature-targeting@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/ripple@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/rtl@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/theme@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/tokens@15.0.0-canary.2f5b899bc.0(transitive)

• + Added@material/typography@15.0.0-canary.2f5b899bc.0(transitive)

• - Removed@material/animation@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/base@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/dom@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/elevation@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/feature-targeting@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/ripple@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/rtl@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/theme@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/tokens@15.0.0-canary.2d26722d2.0(transitive)

• - Removed@material/typography@15.0.0-canary.2d26722d2.0(transitive)

• Updated@material/animation@15.0.0-canary.2f5b899bc.0

• Updated@material/base@15.0.0-canary.2f5b899bc.0

• Updated@material/dom@15.0.0-canary.2f5b899bc.0

• Updated@material/elevation@15.0.0-canary.2f5b899bc.0

• Updated@material/feature-targeting@15.0.0-canary.2f5b899bc.0

• Updated@material/ripple@15.0.0-canary.2f5b899bc.0

• Updated@material/rtl@15.0.0-canary.2f5b899bc.0

• Updated@material/theme@15.0.0-canary.2f5b899bc.0

• Updated@material/tokens@15.0.0-canary.2f5b899bc.0

• Updated@material/typography@15.0.0-canary.2f5b899bc.0