@material/web 1.0.0-pre.8 → 1.0.0

package/slider/internal/_slider.scss

@@ -0,0 +1,508 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../ripple/ripple';
+@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) {
+  $supported-tokens: tokens.$md-comp-slider-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-slider-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-slider-values();
+
+  // 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 start fraction is !0, add clipping by the tick container size
+  $_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
+  $_active-track-start-offset: calc(
+    var(--_with-tick-marks-container-size) * $_start-fraction-not-zero
+  );
+  $_active-track-start-clip: calc(
+    $_active-track-start-offset + $_active-track-max-clip *
+      var(--_start-fraction)
+  );
+
+  // When the end fraction is !1, add clipping by the tick container size
+  $_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
+  $_active-track-end-offset: calc(
+    var(--_with-tick-marks-container-size) * $_end-fraction-not-one
+  );
+  $_active-track-end-clip: calc(
+    $_active-track-end-offset + $_active-track-max-clip *
+      (1 - var(--_end-fraction))
+  );
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-slider-#{$token}, #{$value});
+    }
+
+    // Set these to avoid token test failures
+    --_start-fraction: 0;
+    --_end-fraction: 0;
+    --_tick-count: 0;
+
+    display: inline-flex;
+    vertical-align: middle;
+    min-inline-size: 200px;
+
+    @include elevation.theme(
+      (
+        level: var(--_handle-elevation),
+        shadow-color: var(--_handle-shadow-color),
+      )
+    );
+  }
+
+  md-focus-ring {
+    height: 48px;
+    inset: unset;
+    width: 48px;
+  }
+
+  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,
+  .tickmarks {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  // inactive-track
+  .track::before,
+  .tickmarks::before,
+  // active-track
+  .track::after,
+  .tickmarks::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(--_tick-count)
+      )
+      100%;
+  }
+
+  // inactive-track
+  .track::before,
+  .tickmarks::before {
+    block-size: var(--_inactive-track-height);
+    border-radius: var(--_inactive-track-shape);
+  }
+
+  .track::before {
+    background-color: var(--_inactive-track-color);
+  }
+
+  .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,
+  .tickmarks::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);
+  }
+
+  .track::after {
+    background-color: var(--_active-track-color);
+  }
+
+  .tickmarks::after {
+    background-image: _get-tick-image(
+      var(--_with-tick-marks-active-container-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);
+    }
+  }
+
+  @each $_rtl-selectors in _get-rtl-selectors('.tickmarks', '::after') {
+    #{$_rtl-selectors} {
+      clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
+    }
+  }
+
+  :host([disabled]) .track::after {
+    background-color: var(--_disabled-active-track-color);
+  }
+
+  :host([disabled]) .tickmarks::before {
+    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(--_start-fraction));
+    inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)));
+  }
+
+  // handle
+  .handle {
+    position: absolute;
+    block-size: var(--_state-layer-size);
+    inline-size: var(--_state-layer-size);
+    border-radius: var(--_handle-shape);
+    display: flex;
+    place-content: center;
+    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.end:focus ~ .handleContainerPadded .handle.end > .handleNub,
+  input.start:focus ~ .handleContainerPadded .handle.start > .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.end:active ~ .handleContainerPadded .handle.end > .handleNub,
+    input.start:active ~ .handleContainerPadded .handle.start > .handleNub {
+      background: var(--_pressed-handle-color);
+    }
+  }
+
+  .onTop.isOverlapping {
+    .label,
+    .label::before {
+      outline: var(--_with-overlap-handle-outline-color) solid
+        var(--_with-overlap-handle-outline-width);
+    }
+
+    .handleNub {
+      border: var(--_with-overlap-handle-outline-color) solid
+        var(--_with-overlap-handle-outline-width);
+    }
+  }
+
+  .handle.start {
+    inset-inline-start: calc(0px - var(--_state-layer-size) / 2);
+  }
+  .handle.end {
+    inset-inline-end: calc(0px - var(--_state-layer-size) / 2);
+  }
+
+  // label
+  .label {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    padding: 4px;
+    place-content: center;
+    place-items: center;
+    border-radius: map.get($_md-sys-shape, 'corner-full');
+
+    color: var(--_label-text-color);
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+
+    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);
+  }
+
+  // note, `:has` needed only for Safari; it's wrapped in a "forgiving"
+  // `:where` since the syntax isn't supported yet in Firefox.
+  :host(:focus-within) .label,
+  .handleContainer.hover .label,
+  :where(:has(input:active)) .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(--_start-fraction) +
+          ((var(--_end-fraction) - var(--_start-fraction)) / 2)
+      )
+  );
+
+  $_clip-to-end: calc(100% - $_clip-to-start);
+
+  // clip left side of "start" input
+  .ranged input.start {
+    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.start') {
+    #{$_rtl-selector} {
+      clip-path: inset(0 0 0 $_clip-to-end);
+    }
+  }
+
+  // clip right side of "end" input
+  .ranged input.end {
+    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.end') {
+    #{$_rtl-selector} {
+      clip-path: inset(0 $_clip-to-start 0 0);
+    }
+  }
+
+  .onTop {
+    z-index: 1;
+  }
+
+  // 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 {
+    border-radius: 50%;
+    height: var(--_state-layer-size);
+    width: var(--_state-layer-size);
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+  * @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-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}.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)}.tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E")}.tickmarks::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E")}:host([disabled]) .tickmarks::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E")}}/*# sourceMappingURL=forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

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

@@ -0,0 +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-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}.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)}.tickmarks::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E\")}.tickmarks::after{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E\")}:host([disabled]) .tickmarks::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E\")}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

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

@@ -0,0 +1,88 @@
+//
+// 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-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,
+      )
+    );
+  }
+
+  .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);
+  }
+
+  // inactive-track
+  .tickmarks::before {
+    // A url must be used when forced-colors is active as it's the only value
+    // that is respected. The radial-gradient is not displayed. This is a
+    // stop-gap solution so ticks are displayed at all when forced-colors is
+    // active.
+    // Note:
+    // * The SVG has no viewBox which lets the svg take its dimensions from
+    //   background-size.
+    // * The fill is set directly. Using currentColor does not seem to work,
+    //   hence the duplication of background-image.
+    // * This approach does not respect tick sizes. Instead they will always be
+    //   1px wide. This is a limitation of using the url, as I'm not sure how
+    //   to pass in a custom property to change the `r` attribute.
+    // TODO(b/298051946): Tick marks cannot be resized in HCM
+    // stylelint-disable function-url-quotes -- SVG data URI
+    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='CanvasText'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E");
+    // stylelint-enable function-url-quotes
+  }
+
+  // active-track
+  .tickmarks::after {
+    // See inactive-track documentation for background-image.
+    // stylelint-disable function-url-quotes -- SVG data URI
+    // TODO(b/298051946): Tick marks cannot be resized in HCM
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
+    // stylelint-enable function-url-quotes
+  }
+
+  :host([disabled]) .tickmarks::before {
+    // TODO(b/298051946): Tick marks cannot be resized in HCM
+    // stylelint-disable function-url-quotes -- SVG data URI
+    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E");
+    // stylelint-enable function-url-quotes
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_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);--_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));--_label-text-color: var(--md-slider-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-slider-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-slider-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-slider-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-weight: var(--md-slider-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_start-fraction: 0;--_end-fraction: 0;--_tick-count: 0;display:inline-flex;vertical-align:middle;min-inline-size:200px;--md-elevation-level: var(--_handle-elevation);--md-elevation-shadow-color: var(--_handle-shadow-color)}md-focus-ring{height:48px;inset:unset;width:48px}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,.tickmarks{position:absolute;inset:0;display:flex;align-items:center}.track::before,.tickmarks::before,.track::after,.tickmarks::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(--_tick-count)) 100%}.track::before,.tickmarks::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape)}.track::before{background-color:var(--_inactive-track-color)}.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,.tickmarks::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(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)))}.track::after{background-color:var(--_active-track-color)}.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-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host-context([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .tickmarks::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.tickmarks:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .tickmarks::before{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(--_start-fraction));inline-size:calc(100%*(var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:flex;place-content:center;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.end:focus~.handleContainerPadded .handle.end>.handleNub,input.start:focus~.handleContainerPadded .handle.start>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handleContainerPadded .handle.end>.handleNub,:host(:not([disabled])) input.start:active~.handleContainerPadded .handle.start>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{outline:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.onTop.isOverlapping .handleNub{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:flex;padding:4px;place-content:center;place-items:center;border-radius:9999px;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);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,:where(:has(input:active)) .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.start{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}:host([dir=rtl]) .ranged input.start{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2))))}.ranged input.end{clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input.end{clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.ranged input.end:dir(rtl){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction)) / 2)) 0 0)}.onTop{z-index:1}.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{border-radius:50%;height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */
+`;
+//# sourceMappingURL=slider-styles.css.js.map