@material/web 1.0.0-pre.8 → 1.0.0

package/slider/lib/_slider.scss

@@ -1,476 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../elevation/elevation';
-@use '../../focus/focus-ring';
-@use '../../ripple/ripple';
-@use '../../sass/color';
-@use '../../sass/theme';
-@use '../../sass/var';
-@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: theme.validate-theme(tokens.md-comp-slider-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'slider');
-
-  @include theme.emit-theme-vars($tokens);
-}
-
-@mixin styles() {
-  $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;
-    vertical-align: middle;
-
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-    min-inline-size: 200px;
-
-    @include elevation.theme(
-      (
-        level: var(--_handle-elevation),
-        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) {
-    .label {
-      transition-duration: 0;
-    }
-  }
-
-  // Note, opacity for active track and handle controlled via host.
-  // This avoids bleed through from the handle to the track since they overlap.
-  // It also means the inactive track opacity is calc'd to compensate.
-  :host([disabled]) {
-    opacity: var(--_disabled-active-track-opacity);
-
-    @include elevation.theme(
-      (
-        level: var(--_disabled-handle-elevation),
-      )
-    );
-  }
-
-  .container {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    position: relative;
-    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 {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  // inactive-track
-  .track::before,
-  // active-track
-  .track::after {
-    position: absolute;
-    content: '';
-    // pad the track inward by half the ripple size offset by the tick container size.
-    $_track-padding: calc(
-      (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size)
-    );
-    inset-inline-start: $_track-padding;
-    inset-inline-end: $_track-padding;
-
-    // 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);
-    background-color: var(--_inactive-track-color);
-  }
-
-  .track.tickMarks::before {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-inactive-container-color)'
-    );
-  }
-
-  :host([disabled]) .track::before {
-    // 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 {
-    block-size: var(--_active-track-height);
-    border-radius: var(--_active-track-shape);
-    clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
-    background-color: var(--_active-track-color);
-  }
-
-  // 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 {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-active-container-color)'
-    );
-  }
-
-  :host([disabled]) .track::after {
-    background-color: var(--_disabled-active-track-color);
-  }
-
-  :host([disabled]) .track.tickMarks::before,
-  :host([disabled]) .track.tickMarks::after {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-disabled-container-color)'
-    );
-  }
-
-  // container for the handle that is inset with padding to be
-  // track-sized so that the handle container can be positioned with % only
-  // and avoid a Safari issue with not being able to transition values that
-  // are calced from different units.
-  // TODO remove when https://bugs.webkit.org/show_bug.cgi?id=23775 is
-  // addressed.
-  .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
-  .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);
-  }
-
-  // prefix classes exist to overcome specificity of focus styling.
-  .container > .handleContainerPadded .handle.hover > .handleNub {
-    background: var(--_hover-handle-color);
-  }
-
-  :host(:not([disabled])) {
-    input.b:active ~ .handleContainerPadded .handle.b > .handleNub,
-    input.a:active ~ .handleContainerPadded .handle.a > .handleNub {
-      background: var(--_pressed-handle-color);
-    }
-  }
-
-  .onTop.isOverlapping {
-    .handleNub,
-    .label,
-    .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
-  .label {
-    position: absolute;
-    box-sizing: border-box;
-    display: grid;
-    padding: 4px;
-    place-items: center;
-    border-radius: map.get($_md-sys-shape, 'corner-full');
-
-    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 map.get($_md-sys-motion, 'duration-short2')
-      map.get($_md-sys-motion, 'easing-emphasized');
-    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;
-  }
-
-  // triangle below label
-  .label::before {
-    // Note, sizing carefully estimated to create an ice cream cone shape.
-    $_triangleSize: calc(var(--_label-container-height) / 2);
-    inline-size: $_triangleSize;
-    block-size: $_triangleSize;
-    bottom: calc(var(--_label-container-height) / -10);
-    transform: rotate(45deg);
-  }
-
-  // fits inside label and occludes top half of triangle.
-  .label::after {
-    inset: 0px;
-    border-radius: inherit;
-  }
-
-  // must stack above the label's pseudo-elements.
-  .labelContent {
-    z-index: 1;
-  }
-
-  // native input styling
-  // note, the input is what the user interacts with so it must render and
-  // be clickable, but it is visually hidden via opacity: 0 and non-clickable
-  // styled ui is shown instead and positioned accordingly.
-  input[type='range'] {
-    opacity: 0;
-    -webkit-tap-highlight-color: transparent;
-    position: absolute;
-    box-sizing: border-box;
-    // needed for firefox
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    background: transparent;
-    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;
-    // 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;
-  }
-
-  ::-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;
-  }
-
-  // Clip the inputs to the space left/right of the center point between the
-  // values so the right input gets pointer events.
-  $_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)
-      )
-  );
-
-  $_clip-to-end: calc(100% - $_clip-to-start);
-
-  // clip left side of "lesser" input
-  .ranged input.lesser {
-    clip-path: inset(0 $_clip-to-end 0 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);
-    }
-  }
-
-  // clip right side of "greater" input
-  .ranged input:not(.lesser) {
-    clip-path: inset(0 0 0 $_clip-to-start);
-  }
-
-  // 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 {
-    z-index: 1;
-  }
-
-  // Focus ring
-  md-focus-ring {
-    @include focus-ring.theme(
-      (
-        'offset': -2px,
-      )
-    );
-  }
-
-  // Ripple
-  .handle {
-    @include ripple.theme(
-      (
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  md-ripple {
-    height: var(--_state-layer-size);
-    width: var(--_state-layer-size);
-  }
-}

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

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * 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{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 +0,0 @@
-{"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

@@ -1,53 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use './slider';
-// go/keep-sorted end
-
-@media (forced-colors: active) {
-  :host {
-    $container-color: CanvasText; // white
-    $color: Canvas; // black
-    $disabled-color: GrayText;
-    @include slider.theme(
-      (
-        active-track-color: $container-color,
-        disabled-active-track-color: $disabled-color,
-        disabled-active-track-opacity: 1,
-        disabled-handle-color: $disabled-color,
-        disabled-inactive-track-color: $disabled-color,
-        disabled-inactive-track-opacity: 1,
-        focus-handle-color: $container-color,
-        handle-color: $container-color,
-        handle-shadow-color: $color,
-        hover-handle-color: $container-color,
-        hover-state-layer-color: $color,
-        hover-state-layer-opacity: 1,
-        inactive-track-color: $color,
-        label-container-color: $color,
-        label-label-text-color: $container-color,
-        pressed-handle-color: $container-color,
-        pressed-state-layer-color: $color,
-        pressed-state-layer-opacity: 1,
-        with-overlap-handle-outline-color: $container-color,
-        with-tick-marks-active-container-color: $color,
-        with-tick-marks-disabled-container-color: $disabled-color,
-        with-tick-marks-inactive-container-color: $container-color,
-      )
-    );
-  }
-
-  .label,
-  .label::before {
-    border: var(--_with-overlap-handle-outline-color) solid
-      var(--_with-overlap-handle-outline-width);
-  }
-
-  // inactive track
-  :host(:not([disabled])) .track::before {
-    border: 1px solid var(--_active-track-color);
-  }
-}

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

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * 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, #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)}:host(:not([disabled])) input.b:active~.handleContainerPadded .handle.b>.handleNub,:host(:not([disabled])) 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-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

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

@@ -1 +0,0 @@
-{"version":3,"file":"slider-styles.css.js","sourceRoot":"","sources":["slider-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`: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)}:host(:not([disabled])) input.b:active~.handleContainerPadded .handle.b>.handleNub,:host(:not([disabled])) 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-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 */\n`;\n "]}