@material/web 1.0.0-pre.5 → 1.0.0-pre.7

package/slider/lib/_slider.scss

@@ -3,24 +3,49 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// PUBLIC PROPERTIES
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../elevation/lib/elevation';
+@use '../../elevation/elevation';
 @use '../../focus/focus-ring';
 @use '../../ripple/ripple';
 @use '../../sass/color';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../sass/var';
-@use './tokens';
+@use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+$_md-sys-shape: tokens.md-sys-shape-values();
+
+// Returns a list of rtl selectors to construct distinct rulesets. Seprating
+// rulesets ensure they are not dropped on browsers where one is not supported;
+// note, `:where` cannot be used to create compound selectors that contain
+// pseudo elements
+// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
+@function _get-rtl-selectors($selector: '', $suffix: '') {
+  @return (
+    // TODO(b/279152429) remove selectors other than `:dir` when browser
+    // support improves.
+    ':host-context([dir="rtl"]) #{$selector}#{$suffix}',
+    ':host([dir="rtl"]) #{$selector}#{$suffix}',
+    '#{$selector}:dir(rtl)#{$suffix}'
+  );
+}
+
+// Returns a background-image with sized circular ticks of the given color.
+@function _get-tick-image($color) {
+  @return radial-gradient(
+    circle at var(--_with-tick-marks-container-size) center,
+    #{$color} 0,
+    #{$color} calc(var(--_with-tick-marks-container-size) / 2),
+    transparent calc(var(--_with-tick-marks-container-size) / 2)
+  );
+}
+
 @mixin theme($tokens) {
-  $tokens: tokens.remove-unsupported-tokens($tokens);
   $tokens: theme.validate-theme(tokens.md-comp-slider-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, 'slider');
 
@@ -28,8 +53,33 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-slider-values();
-  $tokens: theme.create-theme-vars($tokens, 'slider');
+  $tokens: theme.create-theme-vars(tokens.md-comp-slider-values(), 'slider');
+
+  // The max clip is reduced by 1 full tick display which is 2x the container
+  // size to account for always showing the active track on the outside
+  // edge of the last tick.
+  $_active-track-max-clip: calc(
+    100% - var(--_with-tick-marks-container-size) * 2
+  );
+  // When the lower fraction is !0, add clipping by the tick container size
+  $_lower-fraction-not-zero: min(var(--slider-lower-fraction) * 1e9, 1);
+  $_active-track-start-offset: calc(
+    var(--_with-tick-marks-container-size) * $_lower-fraction-not-zero
+  );
+  $_active-track-start-clip: calc(
+    $_active-track-start-offset + $_active-track-max-clip *
+      var(--slider-lower-fraction)
+  );
+
+  // When the upper fraction is !1, add clipping by the tick container size
+  $_upper-fraction-not-one: min((1 - var(--slider-upper-fraction)) * 1e9, 1);
+  $_active-track-end-offset: calc(
+    var(--_with-tick-marks-container-size) * $_upper-fraction-not-one
+  );
+  $_active-track-end-clip: calc(
+    $_active-track-end-offset + $_active-track-max-clip *
+      (1 - var(--slider-upper-fraction))
+  );
 
   :host {
     display: inline-flex;
@@ -38,23 +88,24 @@
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
-
-    min-inline-size: var(--_container-min-inline-size);
+    min-inline-size: 200px;
 
     @include elevation.theme(
       (
-        // TODO: replace duration with animation tokens
-        duration: 280ms,
         level: var(--_handle-elevation),
-        shadow-color: var(--_handle-shadow-color)
+        shadow-color: var(--_handle-shadow-color),
       )
     );
   }
 
+  md-elevation {
+    transition-duration: map.get($_md-sys-motion, 'duration-medium1');
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+  }
+
   @media (prefers-reduced-motion) {
-    :host {
-      --_handle-motion-duration: 0;
-      --_label-motion-duration: 0;
+    .label {
+      transition-duration: 0;
     }
   }
 
@@ -79,6 +130,8 @@
     block-size: var(--_state-layer-size);
     // note, only the native inputs are interactive.
     pointer-events: none;
+    // ensure scrolling is prevented on mobile.
+    touch-action: none;
   }
 
   .track {
@@ -95,118 +148,73 @@
     position: absolute;
     content: '';
     // pad the track inward by half the ripple size offset by the tick container size.
-    --track-padding: calc(
+    $_track-padding: calc(
       (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size)
     );
-    inset-inline-start: var(--track-padding);
-    inset-inline-end: var(--track-padding);
-    --tickWidth: calc(
-      (100% - var(--_with-tick-marks-container-size) * 2) / var(--tickCount)
-    );
+    inset-inline-start: $_track-padding;
+    inset-inline-end: $_track-padding;
 
-    background-image: radial-gradient(
-      circle at var(--_with-tick-marks-container-size) center,
-      var(--tickColor) 0,
-      var(--tickColor) calc(var(--_with-tick-marks-container-size) / 2),
-      transparent calc(var(--_with-tick-marks-container-size) / 2)
-    );
-    background-color: var(--trackColor);
-    background-size: var(--tickWidth) 100%;
+    // ticks size: set here since it does not change.
+    background-size: calc(
+        (100% - var(--_with-tick-marks-container-size) * 2) /
+          var(--slider-tick-count)
+      )
+      100%;
   }
 
   // inactive-track
   .track::before {
     block-size: var(--_inactive-track-height);
     border-radius: var(--_inactive-track-shape);
-    --trackColor: var(--_inactive-track-color);
-    // Without the "tickmarks" class, ticks are the same color as the track.
-    --tickColor: var(--_inactive-track-color);
+    background-color: var(--_inactive-track-color);
   }
 
   .track.tickMarks::before {
-    --tickColor: var(--_with-tick-marks-inactive-container-color);
+    background-image: _get-tick-image(
+      'var(--_with-tick-marks-inactive-container-color)'
+    );
   }
 
   :host([disabled]) .track::before {
-    --trackColor: var(--_disabled-inactive-track-color);
-    --tickColor: var(--_disabled-inactive-track-color);
     // Note, the active track opacity is applied to the entire host,
     // so the inactive track is calc'd to compensate.
     opacity: calc(
       (1 / var(--_disabled-active-track-opacity)) *
         var(--_disabled-inactive-track-opacity)
     );
+    background-color: var(--_disabled-inactive-track-color);
   }
 
   // active-track
   .track::after {
-    transition-property: none;
-    transition-duration: var(--_handle-motion-duration);
-    transition-timing-function: linear;
     block-size: var(--_active-track-height);
     border-radius: var(--_active-track-shape);
-    --trackColor: var(--_active-track-color);
-    // Without the "tickmarks" class, ticks are the same color as the track.
-    --tickColor: var(--_active-track-color);
-
-    // The max clip is reduced by 1 full tick display which is 2x the container
-    // size to account for always showing the active track on the outside
-    // edge of the last tick.
-    --activeTrackMaxClip: calc(
-      100% - var(--_with-tick-marks-container-size) * 2
-    );
-    // When the lower fraction is !0, add clipping by the tick container size
-    --lowerFractionNotZero: min(var(--lowerFraction) * 1e9, 1);
-    --activeTrackStartOffset: calc(
-      var(--_with-tick-marks-container-size) * var(--lowerFractionNotZero)
-    );
-    --activeTrackStartClip: calc(
-      var(--activeTrackStartOffset) + var(--activeTrackMaxClip) *
-        var(--lowerFraction)
-    );
-
-    // When the upper fraction is !1, add clipping by the tick container size
-    --upperFractionNotOne: min((1 - var(--upperFraction)) * 1e9, 1);
-    --activeTrackEndOffset: calc(
-      var(--_with-tick-marks-container-size) * var(--upperFractionNotOne)
-    );
-    --activeTrackEndClip: calc(
-      var(--activeTrackEndOffset) + var(--activeTrackMaxClip) *
-        (1 - var(--upperFraction))
-    );
-    clip-path: inset(0 var(--activeTrackEndClip) 0 var(--activeTrackStartClip));
-  }
-
-  .interacting .track::after {
-    transition-property: clip-path;
+    clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
+    background-color: var(--_active-track-color);
   }
 
-  // Support rtl via :dir for modern browsers and fallback to
-  // :host-context for older blink and :host for Safari.
-  :host-context([dir='rtl']) .track::after {
-    clip-path: inset(0 var(--activeTrackStartClip) 0 var(--activeTrackEndClip));
-  }
-
-  :host([dir='rtl']) .track::after {
-    clip-path: inset(0 var(--activeTrackStartClip) 0 var(--activeTrackEndClip));
-  }
-
-  .track:dir(rtl)::after {
-    clip-path: inset(0 var(--activeTrackStartClip) 0 var(--activeTrackEndClip));
+  // rtl for active track clipping
+  @each $_rtl-selectors in _get-rtl-selectors('.track', '::after') {
+    #{$_rtl-selectors} {
+      clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
+    }
   }
 
   .track.tickMarks::after {
-    --tickColor: var(--_with-tick-marks-active-container-color);
+    background-image: _get-tick-image(
+      'var(--_with-tick-marks-active-container-color)'
+    );
   }
 
   :host([disabled]) .track::after {
-    --trackColor: var(--_disabled-active-track-color);
-    --tickColor: var(--_disabled-active-track-color);
+    background-color: var(--_disabled-active-track-color);
   }
 
   :host([disabled]) .track.tickMarks::before,
   :host([disabled]) .track.tickMarks::after {
-    --tickColor: var(--_with-tick-marks-disabled-container-color);
+    background-image: _get-tick-image(
+      'var(--_with-tick-marks-disabled-container-color)'
+    );
   }
 
   // container for the handle that is inset with padding to be
@@ -232,15 +240,10 @@
     position: absolute;
     inset-block-start: 0;
     inset-block-end: 0;
-    inset-inline-start: calc(100% * var(--lowerFraction));
-    inline-size: calc(100% * (var(--upperFraction) - var(--lowerFraction)));
-    transition-property: none;
-    transition-duration: var(--_handle-motion-duration);
-    transition-timing-function: linear;
-  }
-
-  .interacting .handleContainer {
-    transition-property: inset-inline-start, inline-size;
+    inset-inline-start: calc(100% * var(--slider-lower-fraction));
+    inline-size: calc(
+      100% * (var(--slider-upper-fraction) - var(--slider-lower-fraction))
+    );
   }
 
   // handle
@@ -265,30 +268,28 @@
     background: var(--_disabled-handle-color);
   }
 
-  .input.b:focus ~ .handleContainer .handle.b > slot > .handleNub,
-  .input.a:focus ~ .handleContainer .handle.a > slot > .handleNub {
+  input.b:focus ~ .handleContainerPadded .handle.b > .handleNub,
+  input.a:focus ~ .handleContainerPadded .handle.a > .handleNub {
     background: var(--_focus-handle-color);
   }
 
   // prefix classes exist to overcome specificity of focus styling.
-  .container > .handleContainer .handle.hover > slot > .handleNub {
+  .container > .handleContainerPadded .handle.hover > .handleNub {
     background: var(--_hover-handle-color);
   }
 
-  .container > .handleContainer .handle.pressed > slot > .handleNub {
+  input.b:active ~ .handleContainerPadded .handle.b > .handleNub,
+  input.a:active ~ .handleContainerPadded .handle.a > .handleNub {
     background: var(--_pressed-handle-color);
   }
 
   .onTop.isOverlapping {
-    --labelOutlineWidth: var(--_with-overlap-handle-outline-width);
-    --labelOutlineColor: var(--_with-overlap-handle-outline-color);
-  }
-
-  .handleNub,
-  .label,
-  .label::before {
-    border: var(--labelOutlineColor, transparent) solid
-      var(--labelOutlineWidth, 0);
+    .handleNub,
+    .label,
+    .label::before {
+      border: var(--_with-overlap-handle-outline-color) solid
+        var(--_with-overlap-handle-outline-width);
+    }
   }
 
   .handle.lesser {
@@ -303,10 +304,9 @@
     position: absolute;
     box-sizing: border-box;
     display: grid;
-    // TODO: make token?
     padding: 4px;
     place-items: center;
-    border-radius: var(--_label-container-shape);
+    border-radius: map.get($_md-sys-shape, 'corner-full');
 
     color: var(--_label-label-text-color);
     font: var(--_label-label-text-type);
@@ -315,9 +315,8 @@
     min-inline-size: var(--_label-container-height);
     min-block-size: var(--_label-container-height);
     background: var(--_label-container-color);
-    transition-property: transform;
-    transition-duration: var(--_label-motion-duration);
-    transition-timing-function: var(--_label-motion-easing);
+    transition: transform map.get($_md-sys-motion, 'duration-short2')
+      map.get($_md-sys-motion, 'easing-emphasized');
     transform-origin: center bottom;
     transform: scale(0);
   }
@@ -338,11 +337,10 @@
   // triangle below label
   .label::before {
     // Note, sizing carefully estimated to create an ice cream cone shape.
-    --triangleSize: calc(var(--_label-container-height) / 2);
-    --triangleOffset: calc(var(--_label-container-height) / -10);
-    inline-size: var(--triangleSize);
-    block-size: var(--triangleSize);
-    bottom: var(--triangleOffset);
+    $_triangleSize: calc(var(--_label-container-height) / 2);
+    inline-size: $_triangleSize;
+    block-size: $_triangleSize;
+    bottom: calc(var(--_label-container-height) / -10);
     transform: rotate(45deg);
   }
 
@@ -391,8 +389,11 @@
   ::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
+    // note, this is sized to align with thumb but is 0 width so that
+    // fine adjustments are possible
     block-size: var(--_state-layer-size);
     inline-size: var(--_state-layer-size);
+    transform: scaleX(0);
     opacity: 0;
     z-index: 2;
   }
@@ -401,64 +402,45 @@
     appearance: none;
     block-size: var(--_state-layer-size);
     inline-size: var(--_state-layer-size);
+    transform: scaleX(0);
     opacity: 0;
     z-index: 2;
   }
 
-  .ranged input {
-    --valueFromStart: calc(
-      var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
-        (
-          var(--lowerFraction) +
-            ((var(--upperFraction) - var(--lowerFraction)) / 2)
-        )
-    );
-    --valueFromEnd: calc(100% - var(--valueFromStart));
-    clip-path: inset(0 var(--leftClip, 0) 0 var(--rightClip, 0));
-  }
-
   // Clip the inputs to the space left/right of the center point between the
   // values so the right input gets pointer events.
-  .ranged input.lesser {
-    --leftClip: var(--valueFromEnd);
-    --rightClip: 0;
-  }
-
-  .ranged input:not(.lesser) {
-    --leftClip: 0;
-    --rightClip: var(--valueFromStart);
-  }
+  $_clip-to-start: calc(
+    var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
+      (
+        var(--slider-lower-fraction) +
+          ((var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)
+      )
+  );
 
-  // Support rtl via :dir for modern browsers and fallback to
-  // :host-context for older blink and :host for Safari.
-  .ranged input.lesser:dir(rtl) {
-    --leftClip: 0;
-    --rightClip: var(--valueFromEnd);
-  }
+  $_clip-to-end: calc(100% - $_clip-to-start);
 
-  :host-context([dir='rtl']) .ranged input.lesser {
-    --leftClip: 0;
-    --rightClip: var(--valueFromEnd);
-  }
-
-  :host([dir='rtl']) .ranged input.lesser {
-    --leftClip: 0;
-    --rightClip: var(--valueFromEnd);
+  // clip left side of "lesser" input
+  .ranged input.lesser {
+    clip-path: inset(0 $_clip-to-end 0 0);
   }
 
-  .ranged input:not(.lesser):dir(rtl) {
-    --leftClip: var(--valueFromStart);
-    --rightClip: 0;
+  // in 'rtl', clip right side of "lesser" input
+  @each $_rtl-selector in _get-rtl-selectors('.ranged input.lesser') {
+    #{$_rtl-selector} {
+      clip-path: inset(0 0 0 $_clip-to-end);
+    }
   }
 
-  :host-context([dir='rtl']) .ranged input:not(.lesser) {
-    --leftClip: var(--valueFromStart);
-    --rightClip: 0;
+  // clip right side of "greater" input
+  .ranged input:not(.lesser) {
+    clip-path: inset(0 0 0 $_clip-to-start);
   }
 
-  :host([dir='rtl']) .ranged input:not(.lesser) {
-    --leftClip: var(--valueFromStart);
-    --rightClip: 0;
+  // in 'rtl', clip left side of "greater" input
+  @each $_rtl-selector in _get-rtl-selectors('.ranged input', ':not(.lesser)') {
+    #{$_rtl-selector} {
+      clip-path: inset(0 $_clip-to-start 0 0);
+    }
   }
 
   .onTop {
@@ -470,7 +452,7 @@
     @include focus-ring.theme(
       (
         offset: -2px,
-        shape: map.get(tokens.md-sys-shape-values(), corner-full),
+        shape: map.get($_md-sys-shape, 'corner-full'),
       )
     );
   }
@@ -491,10 +473,4 @@
     height: var(--_state-layer-size);
     width: var(--_state-layer-size);
   }
-
-  // Elevation
-  md-elevation {
-    position: absolute;
-    inset: 0;
-  }
 }

package/slider/lib/forced-colors-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `@media(forced-colors: active){:host{--md-slider-active-track-color:CanvasText;--md-slider-disabled-active-track-color:GrayText;--md-slider-disabled-active-track-opacity:1;--md-slider-disabled-handle-color:GrayText;--md-slider-disabled-inactive-track-color:GrayText;--md-slider-disabled-inactive-track-opacity:1;--md-slider-focus-handle-color:CanvasText;--md-slider-handle-color:CanvasText;--md-slider-handle-shadow-color:Canvas;--md-slider-hover-handle-color:CanvasText;--md-slider-hover-state-layer-color:Canvas;--md-slider-hover-state-layer-opacity:1;--md-slider-inactive-track-color:Canvas;--md-slider-label-container-color:Canvas;--md-slider-label-label-text-color:CanvasText;--md-slider-pressed-handle-color:CanvasText;--md-slider-pressed-state-layer-color:Canvas;--md-slider-pressed-state-layer-opacity:1;--md-slider-with-overlap-handle-outline-color:CanvasText;--md-slider-with-tick-marks-active-container-color:Canvas;--md-slider-with-tick-marks-disabled-container-color:GrayText;--md-slider-with-tick-marks-inactive-container-color:CanvasText}.label,.label::before{--labelOutlineWidth: var(--_with-overlap-handle-outline-width);--labelOutlineColor: var(--_with-overlap-handle-outline-color)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}}/*# sourceMappingURL=forced-colors-styles.css.map */
+export const styles = css `@media(forced-colors: active){:host{--md-slider-active-track-color:CanvasText;--md-slider-disabled-active-track-color:GrayText;--md-slider-disabled-active-track-opacity:1;--md-slider-disabled-handle-color:GrayText;--md-slider-disabled-inactive-track-color:GrayText;--md-slider-disabled-inactive-track-opacity:1;--md-slider-focus-handle-color:CanvasText;--md-slider-handle-color:CanvasText;--md-slider-handle-shadow-color:Canvas;--md-slider-hover-handle-color:CanvasText;--md-slider-hover-state-layer-color:Canvas;--md-slider-hover-state-layer-opacity:1;--md-slider-inactive-track-color:Canvas;--md-slider-label-container-color:Canvas;--md-slider-label-label-text-color:CanvasText;--md-slider-pressed-handle-color:CanvasText;--md-slider-pressed-state-layer-color:Canvas;--md-slider-pressed-state-layer-opacity:1;--md-slider-with-overlap-handle-outline-color:CanvasText;--md-slider-with-tick-marks-active-container-color:Canvas;--md-slider-with-tick-marks-disabled-container-color:GrayText;--md-slider-with-tick-marks-inactive-container-color:CanvasText}.label,.label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}}/*# sourceMappingURL=forced-colors-styles.css.map */
 `;
 //# sourceMappingURL=forced-colors-styles.css.js.map

package/slider/lib/forced-colors-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-slider-active-track-color:CanvasText;--md-slider-disabled-active-track-color:GrayText;--md-slider-disabled-active-track-opacity:1;--md-slider-disabled-handle-color:GrayText;--md-slider-disabled-inactive-track-color:GrayText;--md-slider-disabled-inactive-track-opacity:1;--md-slider-focus-handle-color:CanvasText;--md-slider-handle-color:CanvasText;--md-slider-handle-shadow-color:Canvas;--md-slider-hover-handle-color:CanvasText;--md-slider-hover-state-layer-color:Canvas;--md-slider-hover-state-layer-opacity:1;--md-slider-inactive-track-color:Canvas;--md-slider-label-container-color:Canvas;--md-slider-label-label-text-color:CanvasText;--md-slider-pressed-handle-color:CanvasText;--md-slider-pressed-state-layer-color:Canvas;--md-slider-pressed-state-layer-opacity:1;--md-slider-with-overlap-handle-outline-color:CanvasText;--md-slider-with-tick-marks-active-container-color:Canvas;--md-slider-with-tick-marks-disabled-container-color:GrayText;--md-slider-with-tick-marks-inactive-container-color:CanvasText}.label,.label::before{--labelOutlineWidth: var(--_with-overlap-handle-outline-width);--labelOutlineColor: var(--_with-overlap-handle-outline-color)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@media(forced-colors: active){:host{--md-slider-active-track-color:CanvasText;--md-slider-disabled-active-track-color:GrayText;--md-slider-disabled-active-track-opacity:1;--md-slider-disabled-handle-color:GrayText;--md-slider-disabled-inactive-track-color:GrayText;--md-slider-disabled-inactive-track-opacity:1;--md-slider-focus-handle-color:CanvasText;--md-slider-handle-color:CanvasText;--md-slider-handle-shadow-color:Canvas;--md-slider-hover-handle-color:CanvasText;--md-slider-hover-state-layer-color:Canvas;--md-slider-hover-state-layer-opacity:1;--md-slider-inactive-track-color:Canvas;--md-slider-label-container-color:Canvas;--md-slider-label-label-text-color:CanvasText;--md-slider-pressed-handle-color:CanvasText;--md-slider-pressed-state-layer-color:Canvas;--md-slider-pressed-state-layer-opacity:1;--md-slider-with-overlap-handle-outline-color:CanvasText;--md-slider-with-tick-marks-active-container-color:Canvas;--md-slider-with-tick-marks-disabled-container-color:GrayText;--md-slider-with-tick-marks-inactive-container-color:CanvasText}.label,.label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}:host(:not([disabled])) .track::before{border:1px solid var(--_active-track-color)}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/slider/lib/forced-colors-styles.scss

@@ -42,8 +42,8 @@
 
   .label,
   .label::before {
-    --labelOutlineWidth: var(--_with-overlap-handle-outline-width);
-    --labelOutlineColor: var(--_with-overlap-handle-outline-color);
+    border: var(--_with-overlap-handle-outline-color) solid
+      var(--_with-overlap-handle-outline-width);
   }
 
   // inactive track

package/slider/lib/slider-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;vertical-align:middle;--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-variant, #e7e0ec));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_label-label-text-color: var(--md-slider-label-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-label-text-type: var(--md-slider-label-label-text-type, 500 0.75rem / 1rem Roboto);--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-min-inline-size: var(--md-slider-container-min-inline-size, 200px);--_label-container-shape: var(--md-slider-label-container-shape, 9999px);--_handle-motion-duration: var(--md-slider-handle-motion-duration, 50ms);--_label-motion-duration: var(--md-slider-label-motion-duration, 100ms);--_label-motion-easing: var(--md-slider-label-motion-easing, cubic-bezier(0.2, 0, 0, 1));min-inline-size:var(--_container-min-inline-size);--md-elevation-duration:280ms;--md-elevation-level:var(--_handle-elevation);--md-elevation-shadow-color:var(--_handle-shadow-color)}@media(prefers-reduced-motion){:host{--_handle-motion-duration: 0;--_label-motion-duration: 0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level:var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none}.track{position:absolute;inset:0;display:flex;align-items:center}.track::before,.track::after{position:absolute;content:"";--track-padding: calc( (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size) );inset-inline-start:var(--track-padding);inset-inline-end:var(--track-padding);--tickWidth: calc( (100% - var(--_with-tick-marks-container-size) * 2) / var(--tickCount) );background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--tickColor) 0, var(--tickColor) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2));background-color:var(--trackColor);background-size:var(--tickWidth) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);--trackColor: var(--_inactive-track-color);--tickColor: var(--_inactive-track-color)}.track.tickMarks::before{--tickColor: var(--_with-tick-marks-inactive-container-color)}:host([disabled]) .track::before{--trackColor: var(--_disabled-inactive-track-color);--tickColor: var(--_disabled-inactive-track-color);opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity))}.track::after{transition-property:none;transition-duration:var(--_handle-motion-duration);transition-timing-function:linear;block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);--trackColor: var(--_active-track-color);--tickColor: var(--_active-track-color);--activeTrackMaxClip: calc( 100% - var(--_with-tick-marks-container-size) * 2 );--lowerFractionNotZero: min(var(--lowerFraction) * 1e9, 1);--activeTrackStartOffset: calc( var(--_with-tick-marks-container-size) * var(--lowerFractionNotZero) );--activeTrackStartClip: calc( var(--activeTrackStartOffset) + var(--activeTrackMaxClip) * var(--lowerFraction) );--upperFractionNotOne: min((1 - var(--upperFraction)) * 1e9, 1);--activeTrackEndOffset: calc( var(--_with-tick-marks-container-size) * var(--upperFractionNotOne) );--activeTrackEndClip: calc( var(--activeTrackEndOffset) + var(--activeTrackMaxClip) * (1 - var(--upperFraction)) );clip-path:inset(0 var(--activeTrackEndClip) 0 var(--activeTrackStartClip))}.interacting .track::after{transition-property:clip-path}:host-context([dir=rtl]) .track::after{clip-path:inset(0 var(--activeTrackStartClip) 0 var(--activeTrackEndClip))}:host([dir=rtl]) .track::after{clip-path:inset(0 var(--activeTrackStartClip) 0 var(--activeTrackEndClip))}.track:dir(rtl)::after{clip-path:inset(0 var(--activeTrackStartClip) 0 var(--activeTrackEndClip))}.track.tickMarks::after{--tickColor: var(--_with-tick-marks-active-container-color)}:host([disabled]) .track::after{--trackColor: var(--_disabled-active-track-color);--tickColor: var(--_disabled-active-track-color)}:host([disabled]) .track.tickMarks::before,:host([disabled]) .track.tickMarks::after{--tickColor: var(--_with-tick-marks-disabled-container-color)}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--lowerFraction));inline-size:calc(100%*(var(--upperFraction) - var(--lowerFraction)));transition-property:none;transition-duration:var(--_handle-motion-duration);transition-timing-function:linear}.interacting .handleContainer{transition-property:inset-inline-start,inline-size}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}.input.b:focus~.handleContainer .handle.b>slot>.handleNub,.input.a:focus~.handleContainer .handle.a>slot>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainer .handle.hover>slot>.handleNub{background:var(--_hover-handle-color)}.container>.handleContainer .handle.pressed>slot>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping{--labelOutlineWidth: var(--_with-overlap-handle-outline-width);--labelOutlineColor: var(--_with-overlap-handle-outline-color)}.handleNub,.label,.label::before{border:var(--labelOutlineColor, transparent) solid var(--labelOutlineWidth, 0)}.handle.lesser{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle:not(.lesser){inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:var(--_label-container-shape);color:var(--_label-label-text-color);font:var(--_label-label-text-type);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition-property:transform;transition-duration:var(--_label-motion-duration);transition-timing-function:var(--_label-motion-easing);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{--triangleSize: calc(var(--_label-container-height) / 2);--triangleOffset: calc(var(--_label-container-height) / -10);inline-size:var(--triangleSize);block-size:var(--triangleSize);bottom:var(--triangleOffset);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);opacity:0;z-index:2}.ranged input{--valueFromStart: calc( var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * ( var(--lowerFraction) + ((var(--upperFraction) - var(--lowerFraction)) / 2) ) );--valueFromEnd: calc(100% - var(--valueFromStart));clip-path:inset(0 var(--leftClip, 0) 0 var(--rightClip, 0))}.ranged input.lesser{--leftClip: var(--valueFromEnd);--rightClip: 0}.ranged input:not(.lesser){--leftClip: 0;--rightClip: var(--valueFromStart)}.ranged input.lesser:dir(rtl){--leftClip: 0;--rightClip: var(--valueFromEnd)}:host-context([dir=rtl]) .ranged input.lesser{--leftClip: 0;--rightClip: var(--valueFromEnd)}:host([dir=rtl]) .ranged input.lesser{--leftClip: 0;--rightClip: var(--valueFromEnd)}.ranged input:not(.lesser):dir(rtl){--leftClip: var(--valueFromStart);--rightClip: 0}:host-context([dir=rtl]) .ranged input:not(.lesser){--leftClip: var(--valueFromStart);--rightClip: 0}:host([dir=rtl]) .ranged input:not(.lesser){--leftClip: var(--valueFromStart);--rightClip: 0}.onTop{z-index:1}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 9999px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 9999px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 9999px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 9999px);--md-focus-ring-offset:-2px}.handle{--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}md-elevation{position:absolute;inset:0}/*# sourceMappingURL=slider-styles.css.map */
+export const styles = css `:host{display:inline-flex;vertical-align:middle;--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_label-label-text-color: var(--md-slider-label-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-label-text-type: var(--md-slider-label-label-text-type, var(--md-sys-typescale-label-medium, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));min-inline-size:200px;--md-elevation-level:var(--_handle-elevation);--md-elevation-shadow-color:var(--_handle-shadow-color)}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level:var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track{position:absolute;inset:0;display:flex;align-items:center}.track::before,.track::after{position:absolute;content:"";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--slider-tick-count)) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);background-color:var(--_inactive-track-color)}.track.tickMarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}.track::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)));background-color:var(--_active-track-color)}:host-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))))}.track.tickMarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .track.tickMarks::before,:host([disabled]) .track.tickMarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--slider-lower-fraction));inline-size:calc(100%*(var(--slider-upper-fraction) - var(--slider-lower-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.b:focus~.handleContainerPadded .handle.b>.handleNub,input.a:focus~.handleContainerPadded .handle.a>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}input.b:active~.handleContainerPadded .handle.b>.handleNub,input.a:active~.handleContainerPadded .handle.a>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .handleNub,.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.lesser{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle:not(.lesser){inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:9999px;color:var(--_label-label-text-color);font:var(--_label-label-text-type);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:"";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.lesser{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.lesser{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))))}:host([dir=rtl]) .ranged input.lesser{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))))}.ranged input.lesser:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))))}.ranged input:not(.lesser){clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input:not(.lesser){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input:not(.lesser){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)) 0 0)}.ranged input:dir(rtl):not(.lesser){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)) 0 0)}.onTop{z-index:1}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 9999px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 9999px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 9999px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 9999px);--md-focus-ring-offset:-2px}.handle{--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */
 `;
 //# sourceMappingURL=slider-styles.css.js.map