@material/slider - npm Package Compare versions

Comparing version 15.0.0-canary.202823f54.0 to 15.0.0-canary.205b20b36.0

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-# [15.0.0-canary.202823f54.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.202823f54.0) (2023-01-11)
+# [15.0.0-canary.205b20b36.0](https://github.com/material-components/material-components-web/compare/v14.0.0...v15.0.0-canary.205b20b36.0) (2023-09-13)
 
@@ -14,2 +14,3 @@
 * **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))
@@ -20,1 +21,6 @@ * **slider:** resolve a couple of errors with new theming API ([8d7ae91](https://github.com/material-components/material-components-web/commit/8d7ae912ab32815d2f01e8540bc49751b8fad38d))
 * **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))

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.202823f54.0",
+  "version": "15.0.0-canary.205b20b36.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.202823f54.0",
-    "@material/base": "15.0.0-canary.202823f54.0",
-    "@material/dom": "15.0.0-canary.202823f54.0",
-    "@material/elevation": "15.0.0-canary.202823f54.0",
-    "@material/feature-targeting": "15.0.0-canary.202823f54.0",
-    "@material/ripple": "15.0.0-canary.202823f54.0",
-    "@material/rtl": "15.0.0-canary.202823f54.0",
-    "@material/theme": "15.0.0-canary.202823f54.0",
-    "@material/tokens": "15.0.0-canary.202823f54.0",
-    "@material/typography": "15.0.0-canary.202823f54.0",
+    "@material/animation": "15.0.0-canary.205b20b36.0",
+    "@material/base": "15.0.0-canary.205b20b36.0",
+    "@material/dom": "15.0.0-canary.205b20b36.0",
+    "@material/elevation": "15.0.0-canary.205b20b36.0",
+    "@material/feature-targeting": "15.0.0-canary.205b20b36.0",
+    "@material/ripple": "15.0.0-canary.205b20b36.0",
+    "@material/rtl": "15.0.0-canary.205b20b36.0",
+    "@material/theme": "15.0.0-canary.205b20b36.0",
+    "@material/tokens": "15.0.0-canary.205b20b36.0",
+    "@material/typography": "15.0.0-canary.205b20b36.0",
     "tslib": "^2.1.0"
   },
-  "gitHead": "6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0"
+  "gitHead": "00fdcf619c34c502844acb0f2485e99595aa138d"
 }

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

1224446

increased by0.03%

Lines of code

9609

increased by0.19%

Number of lines in readme file

390

increased by0.78%

Dependency changes

• + Added@material/animation@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/base@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/dom@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/elevation@15.0.0-canary.205b20b36.0(transitive)

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

• + Added@material/ripple@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/rtl@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/theme@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/tokens@15.0.0-canary.205b20b36.0(transitive)

• + Added@material/typography@15.0.0-canary.205b20b36.0(transitive)

• - Removed@material/animation@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/base@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/dom@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/elevation@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/feature-targeting@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/ripple@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/rtl@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/theme@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/tokens@15.0.0-canary.202823f54.0(transitive)

• - Removed@material/typography@15.0.0-canary.202823f54.0(transitive)

• Updated@material/animation@15.0.0-canary.205b20b36.0

• Updated@material/base@15.0.0-canary.205b20b36.0

• Updated@material/dom@15.0.0-canary.205b20b36.0

• Updated@material/elevation@15.0.0-canary.205b20b36.0

• Updated@material/feature-targeting@15.0.0-canary.205b20b36.0

• Updated@material/ripple@15.0.0-canary.205b20b36.0

• Updated@material/rtl@15.0.0-canary.205b20b36.0

• Updated@material/theme@15.0.0-canary.205b20b36.0

• Updated@material/tokens@15.0.0-canary.205b20b36.0

• Updated@material/typography@15.0.0-canary.205b20b36.0