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

package/slider/harness.js

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for slider.
+ */
+export class SliderHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        // Test access to protected property
+        // tslint:disable-next-line:no-dict-access-on-struct-type
+        return this.element['inputB'];
+    }
+    getInputs() {
+        //  Test access to protected property
+        // tslint:disable-next-line:no-dict-access-on-struct-type
+        return [this.element['inputB'], this.element['inputA']];
+    }
+    getHandles() {
+        //  Test access to protected property
+        // tslint:disable-next-line:no-dict-access-on-struct-type
+        return [this.element['handleB'], this.element['handleA']];
+    }
+    getLabels() {
+        return Array.from(this.element.renderRoot.querySelectorAll('.label'));
+    }
+    isLabelShowing() {
+        const labels = this.getLabels();
+        return labels.some(l => {
+            // remove transition to avoid the need to wait for it.
+            l.style.setProperty('transition', 'none');
+            const { width } = l.getBoundingClientRect();
+            l.style.removeProperty('transition');
+            return width > 0;
+        });
+    }
+    async simulateValueInteraction(value, el) {
+        if (!el) {
+            el = (this.getInputs())[0];
+        }
+        el.focus();
+        el.value = String(value);
+        el.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+        await this.element.updateComplete;
+    }
+    positionEventAtHandle(init, startHandle = false) {
+        const handle = this.getHandles()[startHandle ? 1 : 0];
+        const { x, y } = handle.getBoundingClientRect();
+        return { ...init, clientX: x, clientY: y, screenX: x, screenY: y };
+    }
+    simulateStartHover(element, init = {}) {
+        const i = this.getInputs().indexOf(element);
+        if ((i >= 0) || (element === this.element)) {
+            init = this.positionEventAtHandle(init, i === 1);
+        }
+        super.simulateStartHover(element, init);
+    }
+}
+//# sourceMappingURL=harness.js.map

package/slider/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Slider} from './lib/slider.js';\n\n/**\n * Test harness for slider.\n */\nexport class SliderHarness extends Harness<Slider> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return this.element['inputB'];\n  }\n\n  getInputs() {\n    //  Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return [this.element['inputB'], this.element['inputA']];\n  }\n  getHandles() {\n    //  Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return [this.element['handleB'], this.element['handleA']];\n  }\n\n  getLabels() {\n    return Array.from(this.element.renderRoot.querySelectorAll('.label'));\n  }\n\n  isLabelShowing() {\n    const labels = this.getLabels();\n    return labels.some(l => {\n      // remove transition to avoid the need to wait for it.\n      (l as HTMLElement).style.setProperty('transition', 'none');\n      const {width} = l.getBoundingClientRect();\n      (l as HTMLElement).style.removeProperty('transition');\n      return width > 0;\n    });\n  }\n\n  async simulateValueInteraction(value: number, el?: HTMLInputElement) {\n    if (!el) {\n      el = (this.getInputs())[0];\n    }\n    el.focus();\n    el.value = String(value);\n    el.dispatchEvent(new Event('input', {bubbles: true, composed: true}));\n    el.dispatchEvent(new Event('change', {bubbles: true}));\n    await this.element.updateComplete;\n  }\n\n  private positionEventAtHandle(init: PointerEventInit, startHandle = false) {\n    const handle = this.getHandles()[startHandle ? 1 : 0];\n    const {x, y} = handle.getBoundingClientRect();\n    return {...init, clientX: x, clientY: y, screenX: x, screenY: y};\n  }\n\n  protected override simulateStartHover(\n      element: HTMLElement, init: PointerEventInit = {}) {\n    const i = this.getInputs().indexOf(element as HTMLInputElement);\n    if ((i >= 0) || (element === this.element)) {\n      init = this.positionEventAtHandle(init, i === 1);\n    }\n    super.simulateStartHover(element, init);\n  }\n}\n"]}

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 "]}