@material/slider - npm Package Compare versions

Comparing version 15.0.0-canary.86efd56f6.0 to 15.0.0-canary.872b65832.0

CHANGELOG.md

@@ -6,4 +6,19 @@ # Change Log
 
-# [15.0.0-canary.86efd56f6.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.86efd56f6.0) (2022-08-02)
+# [15.0.0-canary.872b65832.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.872b65832.0) (2023-08-30)
 
-**Note:** Version bump only for package @material/slider
+
+### Bug Fixes
+
+* **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) {
@@ -202,6 +204,4 @@ // Emitting event is not yet implemented. See issue:
         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 =
@@ -290,3 +290,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) {
@@ -293,0 +293,0 @@ var rippleSurface = rippleSurfaces[i];

package.json

 {
   "name": "@material/slider",
-  "version": "15.0.0-canary.86efd56f6.0",
+  "version": "15.0.0-canary.872b65832.0",
   "description": "The Material Components for the web slider component",
@@ -23,14 +23,15 @@ "main": "dist/mdc.slider.js",
   "dependencies": {
-    "@material/animation": "15.0.0-canary.86efd56f6.0",
-    "@material/base": "15.0.0-canary.86efd56f6.0",
-    "@material/dom": "15.0.0-canary.86efd56f6.0",
-    "@material/elevation": "15.0.0-canary.86efd56f6.0",
-    "@material/feature-targeting": "15.0.0-canary.86efd56f6.0",
-    "@material/ripple": "15.0.0-canary.86efd56f6.0",
-    "@material/rtl": "15.0.0-canary.86efd56f6.0",
-    "@material/theme": "15.0.0-canary.86efd56f6.0",
-    "@material/typography": "15.0.0-canary.86efd56f6.0",
+    "@material/animation": "15.0.0-canary.872b65832.0",
+    "@material/base": "15.0.0-canary.872b65832.0",
+    "@material/dom": "15.0.0-canary.872b65832.0",
+    "@material/elevation": "15.0.0-canary.872b65832.0",
+    "@material/feature-targeting": "15.0.0-canary.872b65832.0",
+    "@material/ripple": "15.0.0-canary.872b65832.0",
+    "@material/rtl": "15.0.0-canary.872b65832.0",
+    "@material/theme": "15.0.0-canary.872b65832.0",
+    "@material/tokens": "15.0.0-canary.872b65832.0",
+    "@material/typography": "15.0.0-canary.872b65832.0",
     "tslib": "^2.1.0"
   },
-  "gitHead": "a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f"
+  "gitHead": "be0901c091f812355b2d192c49bd051d8daf7a98"
 }

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

1224763

increased by35.78%

Lines of code

9611

increased by57.51%

Number of lines in readme file

390

increased by0.78%

Worsened metrics

Dependency count

11

increased by10%

Dependency changes

• + Added@material/tokens@15.0.0-canary.872b65832.0

• + Added@material/animation@15.0.0-canary.872b65832.0(transitive)

• + Added@material/base@15.0.0-canary.872b65832.0(transitive)

• + Added@material/dom@15.0.0-canary.872b65832.0(transitive)

• + Added@material/elevation@15.0.0-canary.872b65832.0(transitive)

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

• + Added@material/ripple@15.0.0-canary.872b65832.0(transitive)

• + Added@material/rtl@15.0.0-canary.872b65832.0(transitive)

• + Added@material/theme@15.0.0-canary.872b65832.0(transitive)

• + Added@material/tokens@15.0.0-canary.872b65832.0(transitive)

• + Added@material/typography@15.0.0-canary.872b65832.0(transitive)

• - Removed@material/animation@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/base@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/dom@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/elevation@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/feature-targeting@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/ripple@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/rtl@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/theme@15.0.0-canary.86efd56f6.0(transitive)

• - Removed@material/typography@15.0.0-canary.86efd56f6.0(transitive)

• Updated@material/animation@15.0.0-canary.872b65832.0

• Updated@material/base@15.0.0-canary.872b65832.0

• Updated@material/dom@15.0.0-canary.872b65832.0

• Updated@material/elevation@15.0.0-canary.872b65832.0

• Updated@material/feature-targeting@15.0.0-canary.872b65832.0

• Updated@material/ripple@15.0.0-canary.872b65832.0

• Updated@material/rtl@15.0.0-canary.872b65832.0

• Updated@material/theme@15.0.0-canary.872b65832.0

• Updated@material/typography@15.0.0-canary.872b65832.0