material-web-evo 10002.10001.10000

package/slider/internal/_slider.scss

@@ -0,0 +1,519 @@
+//
+// 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();
+
+@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}: #{$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: 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: 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: var(--_active-track-color);
+  }
+
+  .tickmarks::after {
+    background-image: _get-tick-image(
+      var(--_with-tick-marks-active-container-color)
+    );
+  }
+
+  // rtl for active track clipping
+  .track:dir(rtl)::after {
+    clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
+  }
+
+  .tickmarks:dir(rtl)::after {
+    clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
+  }
+
+  :host([disabled]) .track::after {
+    background: 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
+    block-size: var(--_handle-height);
+    inline-size: var(--_handle-width);
+    opacity: 0;
+    z-index: 2;
+  }
+
+  @include _get-safari-knob-translate('end');
+  @include _get-safari-knob-translate('start');
+
+  ::-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
+  .ranged input.start:dir(rtl) {
+    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
+  .ranged input.end:dir(rtl) {
+    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);
+  }
+}
+
+// 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)
+  );
+}
+
+// Webkit on iOS requires _some_ size on the thumb. We want to make this the
+// same as --_handle-size but also be centered on the handle.
+//
+// the layout is similar to this:
+// [()---[()===========]----]
+//
+// where - is the native input and the == is the material track.
+// at 0 we want to shift the native knob right (padding + knob-size / 2):
+// [----[(())===========]----]
+//
+// at the end we want to shift the native knob left by the same amount:
+// [----[===========(())]----]
+//
+// Therefore we can do `layout-shift - 2 * `percent-fraction` * `layout-shift`
+// and in RTL we want to do the the same * -1
+@mixin _get-safari-knob-translate($start-or-end) {
+  input.#{$start-or-end}::-webkit-slider-thumb {
+    // AKA `layout-shift` in the equations above
+    --_track-and-knob-padding: calc(
+      (var(--_state-layer-size) - var(--_handle-width)) / 2
+    );
+    --_x-translate: calc(
+      var(--_track-and-knob-padding) - 2 * var(--_#{$start-or-end}-fraction) *
+        var(--_track-and-knob-padding)
+    );
+    transform: translateX(var(--_x-translate));
+  }
+
+  input.#{$start-or-end}:dir(rtl)::-webkit-slider-thumb {
+    transform: translateX(calc(-1 * var(--_x-translate)));
+  }
+}

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

@@ -0,0 +1 @@
+@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 */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["forced-colors-styles.scss","_slider.scss"],"names":[],"mappings":"AASA,8BACE,MCiBI,60BDYJ,sBAEE,iGAKF,uCACE,4CAIF,mBAgBE,sJAKF,kBAIE,iJAIF,qCAIE","file":"forced-colors-styles.css"}

package/slider/internal/forced-colors-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./slider/internal/forced-colors-styles.css.
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.js","sourceRoot":"","sources":["forced-colors-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,uEAAuE;AACvE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./slider/internal/forced-colors-styles.css.\nimport {css} from 'lit';\nexport 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\")}}\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

@@ -0,0 +1 @@
+: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, var(--md-sys-shape-corner-full, 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, var(--md-sys-shape-corner-full, 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, var(--md-sys-shape-corner-full, 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: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: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: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))}.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))))}.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: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:var(--md-sys-shape-corner-full, 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(--_handle-height);inline-size:var(--_handle-width);opacity:0;z-index:2}input.end::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_end-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.end:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}input.start::-webkit-slider-thumb{--_track-and-knob-padding: calc( (var(--_state-layer-size) - var(--_handle-width)) / 2 );--_x-translate: calc( var(--_track-and-knob-padding) - 2 * var(--_start-fraction) * var(--_track-and-knob-padding) );transform:translateX(var(--_x-translate))}input.start:dir(rtl)::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--_x-translate)))}::-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)}.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)))}.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 */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_slider.scss","../../elevation/internal/_elevation.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA6DE,MAEI,owHAIF,qBACA,mBACA,iBAEA,oBACA,sBACA,sBCnDE,wGD6DJ,cACE,YACA,YACA,WAGF,aACE,0BAIF,+BACE,OACE,uBAOJ,kBACE,8CClFE,wDD2FJ,WACE,OACA,aACA,mBACA,kBACA,oCAEA,oBAEA,kBAGF,kBAEE,kBACA,QACA,aACA,mBAIF,kEAKE,kBACA,WAKA,mBAHiB,0EAIjB,iBAJiB,0EAOjB,gGAOF,kCAEE,yCACA,2CAGF,eACE,wCAGF,mBACE,+SAKF,iCAGE,8FAIA,iDAIF,gCAEE,uCACA,yCACA,iXAGF,cACE,sCAGF,kBACE,2SAMF,uBACE,iXAGF,2BACE,iXAGF,gCACE,+CAGF,qCACE,+SAWF,uBACE,kBACA,gBACA,iBACA,gDAGF,sBACE,kBACA,gBACA,iBAGF,iBACE,kBACA,oBACA,kBACA,qDACA,uEAIF,QACE,kBACA,oCACA,qCACA,mCACA,aACA,qBACA,mBAGF,WACE,kBACA,6BACA,2BACA,mCACA,gCAGF,6BACE,yCAGF,gIAEE,sCAIF,2DACE,sCAIA,kLAEE,wCAKF,gEAEE,kGAIF,gCACE,iGAKJ,cACE,0DAEF,YACE,wDAIF,OACE,kBACA,sBACA,aACA,YACA,qBACA,mBACA,sDAEA,+BACA,oCACA,kCACA,2CACA,sCAEA,qBACA,+CACA,8CACA,yCACA,sDAEA,+BACA,mBAKF,4FAGE,mBAGF,6BAEE,kBACA,cACA,WACA,mBAIF,eAGE,YADgB,uCAEhB,WAFgB,uCAGhB,gDACA,wBAIF,cACE,UACA,sBAIF,cACE,UAOF,kBACE,UACA,0CACA,kBACA,sBAEA,YACA,WACA,SACA,yBACA,eACA,oBACA,gBAGF,wBACE,aAGF,gCACE,wBAGF,mBACE,gBAGF,uBACE,wBACA,gBAEA,iCACA,iCACA,UACA,UAgGF,gCAEE,yFAGA,mHAIA,0CAGF,yCACE,qDAbF,kCAEE,yFAGA,qHAIA,0CAGF,2CACE,qDAvGF,mBACE,gBACA,oCACA,qCACA,oBACA,UACA,UAgBF,oBACE,wLAIF,6BACE,wLAIF,kBACE,+KAIF,2BACE,+KAGF,OACE,UAIF,QEtbI,oPFicJ,UACE,kBACA,gCACA","file":"slider-styles.css"}

package/slider/internal/slider-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;