@material/web 1.0.0-pre.2 → 1.0.0-pre.3

package/slider/lib/_slider.scss

@@ -0,0 +1,503 @@
+//
+// Copyright 2023 Google LLC
+// 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 '../../focus/focus-ring';
+@use '../../ripple/ripple';
+@use '../../sass/color';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../sass/var';
+@use './tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: tokens.remove-unsupported-tokens($tokens);
+  $tokens: typography.resolve-tokens($tokens, 'label-label-text');
+  $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: tokens.md-comp-slider-values();
+  $tokens: theme.create-theme-vars($tokens, 'slider');
+
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    min-inline-size: var(--_container-min-inline-size);
+
+    @include elevation.theme(
+      (
+        // TODO: replace duration with animation tokens
+        duration: 280ms,
+        level: var(--_handle-elevation),
+        shadow-color: var(--_handle-shadow-color)
+      )
+    );
+  }
+
+  @media (prefers-reduced-motion) {
+    :host {
+      --_handle-motion-duration: 0;
+      --_label-motion-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;
+  }
+
+  .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: 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%;
+  }
+
+  // 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);
+  }
+
+  .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);
+    // 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)
+    );
+  }
+
+  // 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;
+  }
+
+  // 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));
+  }
+
+  .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);
+  }
+
+  // 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(--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
+  .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);
+  }
+
+  // prefix classes exist to overcome specificity of focus styling.
+  .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
+  .label {
+    position: absolute;
+    box-sizing: border-box;
+    display: grid;
+    // TODO: make token?
+    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;
+  }
+
+  // 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);
+    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;
+    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));
+  }
+
+  // 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);
+  }
+
+  // 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);
+  }
+
+  :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;
+  }
+
+  // Focus ring
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        offset-vertical: -2px,
+        offset-horizontal: -2px,
+        shape: map.get(tokens.md-sys-shape-values(), corner-full),
+      )
+    );
+  }
+
+  // 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);
+  }
+
+  // Elevation
+  md-elevation {
+    position: absolute;
+    inset: 0;
+  }
+}

package/slider/lib/_tokens.scss

@@ -0,0 +1,66 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+@use 'sass:string';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../sass/color';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../sass/var';
+@use '../../tokens';
+// go/keep-sorted end
+
+$baseTokens: tokens.md-comp-slider-values();
+
+$_tokens: (
+  'container-min-inline-size': 200px,
+  'label-container-shape': map.get(tokens.md-sys-shape-values(), 'corner-full'),
+  'handle-motion-duration':
+    map.get(tokens.md-sys-motion-values(), 'duration-short1'),
+  'label-motion-duration':
+    map.get(tokens.md-sys-motion-values(), 'duration-short2'),
+  'label-motion-easing':
+    map.get(tokens.md-sys-motion-values(), 'easing-emphasized'),
+);
+
+@function resolve-typography($tokens) {
+  @return typography.resolve-tokens($tokens, 'label-label-text');
+}
+
+@function remove-unsupported-tokens($tokens) {
+  $unsupported-tokens: (
+    'disabled-handle-opacity',
+    'label-container-elevation',
+    'track-elevation',
+    // for efficiency, tick marks are rendered as radial-gradients and
+    // have more limited customization
+    'with-tick-marks-active-container-opacity',
+    'with-tick-marks-container-shape',
+    'with-tick-marks-disabled-container-opacity',
+    'with-tick-marks-inactive-container-opacity',
+    // focus tokens no longer used.
+    'focus-state-layer-color',
+    'focus-state-layer-opacity'
+  );
+  @return map.remove($tokens, $unsupported-tokens...);
+}
+
+/**
+ * 
+ * Extended token set for slider. 
+ */
+@function md-comp-slider-values() {
+  $tokens: remove-unsupported-tokens($baseTokens);
+  $tokens: typography.resolve-tokens($tokens, 'label-label-text');
+  @return map.merge($tokens, $_tokens);
+}
+
+@function md-sys-shape-values() {
+  @return tokens.md-sys-shape-values();
+}

package/slider/lib/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-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 */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

package/slider/lib/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-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 "]}

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

@@ -0,0 +1,53 @@
+//
+// 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 {
+    --labelOutlineWidth: var(--_with-overlap-handle-outline-width);
+    --labelOutlineColor: var(--_with-overlap-handle-outline-color);
+  }
+
+  // inactive track
+  :host(:not([disabled])) .track::before {
+    border: 1px solid var(--_active-track-color);
+  }
+}

package/slider/lib/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{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-vertical:-2px;--md-focus-ring-offset-horizontal:-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 */
+`;
+//# sourceMappingURL=slider-styles.css.js.map