@material/web 1.0.0-pre.5 → 1.0.0-pre.7

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

@@ -1 +1 @@
-{"version":3,"file":"slider-styles.css.js","sourceRoot":"","sources":["slider-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;vertical-align:middle;--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #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:-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 */\n`;\n "]}
+{"version":3,"file":"slider-styles.css.js","sourceRoot":"","sources":["slider-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;vertical-align:middle;--_active-track-color: var(--md-slider-active-track-color, var(--md-sys-color-primary, #6750a4));--_active-track-height: var(--md-slider-active-track-height, 4px);--_active-track-shape: var(--md-slider-active-track-shape, 9999px);--_disabled-active-track-color: var(--md-slider-disabled-active-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-track-opacity: var(--md-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color: var(--md-slider-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-handle-elevation: var(--md-slider-disabled-handle-elevation, 0);--_disabled-inactive-track-color: var(--md-slider-disabled-inactive-track-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-inactive-track-opacity: var(--md-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color: var(--md-slider-focus-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-color: var(--md-slider-handle-color, var(--md-sys-color-primary, #6750a4));--_handle-elevation: var(--md-slider-handle-elevation, 1);--_handle-height: var(--md-slider-handle-height, 20px);--_handle-shadow-color: var(--md-slider-handle-shadow-color, var(--md-sys-color-shadow, #000));--_handle-shape: var(--md-slider-handle-shape, 9999px);--_handle-width: var(--md-slider-handle-width, 20px);--_hover-handle-color: var(--md-slider-hover-handle-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-slider-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-slider-hover-state-layer-opacity, 0.08);--_inactive-track-color: var(--md-slider-inactive-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_inactive-track-height: var(--md-slider-inactive-track-height, 4px);--_inactive-track-shape: var(--md-slider-inactive-track-shape, 9999px);--_label-container-color: var(--md-slider-label-container-color, var(--md-sys-color-primary, #6750a4));--_label-container-height: var(--md-slider-label-container-height, 28px);--_label-label-text-color: var(--md-slider-label-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-label-text-type: var(--md-slider-label-label-text-type, var(--md-sys-typescale-label-medium, 500 0.75rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_pressed-handle-color: var(--md-slider-pressed-handle-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-slider-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-slider-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color: var(--md-slider-with-overlap-handle-outline-color, var(--md-sys-color-on-primary, #fff));--_with-overlap-handle-outline-width: var(--md-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color: var(--md-slider-with-tick-marks-active-container-color, var(--md-sys-color-on-primary, #fff));--_with-tick-marks-container-size: var(--md-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-container-color: var(--md-slider-with-tick-marks-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_with-tick-marks-inactive-container-color: var(--md-slider-with-tick-marks-inactive-container-color, var(--md-sys-color-on-surface-variant, #49454f));min-inline-size:200px;--md-elevation-level:var(--_handle-elevation);--md-elevation-shadow-color:var(--_handle-shadow-color)}md-elevation{transition-duration:250ms}@media(prefers-reduced-motion){.label{transition-duration:0}}:host([disabled]){opacity:var(--_disabled-active-track-opacity);--md-elevation-level:var(--_disabled-handle-elevation)}.container{flex:1;display:flex;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.track{position:absolute;inset:0;display:flex;align-items:center}.track::before,.track::after{position:absolute;content:\"\";inset-inline-start:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size)*2)/var(--slider-tick-count)) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);background-color:var(--_inactive-track-color)}.track.tickMarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-inactive-container-color) 0, var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::before{opacity:calc(1/var(--_disabled-active-track-opacity)*var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}.track::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)));background-color:var(--_active-track-color)}:host-context([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))))}:host([dir=rtl]) .track::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))))}.track:dir(rtl)::after{clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--slider-lower-fraction) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--slider-lower-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--slider-upper-fraction)) * 1000000000, 1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--slider-upper-fraction))))}.track.tickMarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-active-container-color) 0, var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .track.tickMarks::before,:host([disabled]) .track.tickMarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center, var(--_with-tick-marks-disabled-container-color) 0, var(--_with-tick-marks-disabled-container-color) calc(var(--_with-tick-marks-container-size) / 2), transparent calc(var(--_with-tick-marks-container-size) / 2))}.handleContainerPadded{position:relative;block-size:100%;inline-size:100%;padding-inline:calc(var(--_state-layer-size)/2)}.handleContainerBlock{position:relative;block-size:100%;inline-size:100%}.handleContainer{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100%*var(--slider-lower-fraction));inline-size:calc(100%*(var(--slider-upper-fraction) - var(--slider-lower-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handleNub{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color)}:host([disabled]) .handleNub{background:var(--_disabled-handle-color)}input.b:focus~.handleContainerPadded .handle.b>.handleNub,input.a:focus~.handleContainerPadded .handle.a>.handleNub{background:var(--_focus-handle-color)}.container>.handleContainerPadded .handle.hover>.handleNub{background:var(--_hover-handle-color)}input.b:active~.handleContainerPadded .handle.b>.handleNub,input.a:active~.handleContainerPadded .handle.a>.handleNub{background:var(--_pressed-handle-color)}.onTop.isOverlapping .handleNub,.onTop.isOverlapping .label,.onTop.isOverlapping .label::before{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle.lesser{inset-inline-start:calc(0px - var(--_state-layer-size)/2)}.handle:not(.lesser){inset-inline-end:calc(0px - var(--_state-layer-size)/2)}.label{position:absolute;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:9999px;color:var(--_label-label-text-color);font:var(--_label-label-text-type);inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);transition:transform 100ms cubic-bezier(0.2, 0, 0, 1);transform-origin:center bottom;transform:scale(0)}:host(:focus-within) .label,.handleContainer.hover .label{transform:scale(1)}.label::before,.label::after{position:absolute;display:block;content:\"\";background:inherit}.label::before{inline-size:calc(var(--_label-container-height)/2);block-size:calc(var(--_label-container-height)/2);bottom:calc(var(--_label-container-height)/-10);transform:rotate(45deg)}.label::after{inset:0px;border-radius:inherit}.labelContent{z-index:1}input[type=range]{opacity:0;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;box-sizing:border-box;height:100%;width:100%;margin:0;background:rgba(0,0,0,0);cursor:pointer;pointer-events:auto;appearance:none}input[type=range]:focus{outline:none}::-webkit-slider-runnable-track{-webkit-appearance:none}::-moz-range-track{appearance:none}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.ranged input.lesser{clip-path:inset(0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))) 0 0)}:host-context([dir=rtl]) .ranged input.lesser{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))))}:host([dir=rtl]) .ranged input.lesser{clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))))}.ranged input.lesser:dir(rtl){clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2))))}.ranged input:not(.lesser){clip-path:inset(0 0 0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)))}:host-context([dir=rtl]) .ranged input:not(.lesser){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)) 0 0)}:host([dir=rtl]) .ranged input:not(.lesser){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)) 0 0)}.ranged input:dir(rtl):not(.lesser){clip-path:inset(0 calc(var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) * (var(--slider-lower-fraction) + (var(--slider-upper-fraction) - var(--slider-lower-fraction)) / 2)) 0 0)}.onTop{z-index:1}md-focus-ring{--md-focus-ring-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:-2px}.handle{--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}md-ripple{height:var(--_state-layer-size);width:var(--_state-layer-size)}/*# sourceMappingURL=slider-styles.css.map */\n`;\n "]}

package/slider/lib/slider.d.ts

@@ -18,7 +18,6 @@ export declare class Slider extends LitElement {
      * @nocollapse
      */
     static formAssociated: boolean;
-    ariaLabel: string;
     /**
      * Whether or not the slider is disabled.
      */
@@ -92,11 +91,8 @@ export declare class Slider extends LitElement {
     private rippleBShowing;
     private handleAHover;
     private handleBHover;
-    private handleAPressed;
-    private handleBPressed;
     private onTopId;
     private handlesOverlapping;
-    private isInteracting;
     constructor();
     focus(): void;
     get valueAsString(): string;
@@ -109,14 +105,13 @@ export declare class Slider extends LitElement {
     protected renderTrack(): import("lit-html").TemplateResult<1>;
     protected renderFocusRing(visible: boolean): import("lit-html").TemplateResult<1>;
     protected renderLabel(value: string): import("lit-html").TemplateResult<1>;
-    protected renderHandle({ id, lesser, showRipple, focusRequested, showFocus, hover, pressed, label }: {
+    protected renderHandle({ id, lesser, showRipple, focusRequested, showFocus, hover, label }: {
         id: string;
         lesser: boolean;
         focusRequested: boolean;
         showRipple: boolean;
         showFocus: boolean;
         hover: boolean;
-        pressed: boolean;
         label: string;
     }): import("lit-html").TemplateResult<1>;
     protected renderInput({ id, lesser, value, label, getRipple }: {
@@ -134,8 +129,8 @@ export declare class Slider extends LitElement {
     protected updateFocusVisible(e: Event): void;
     protected handleFocus(e: Event): void;
     protected handleBlur(e: Event): void;
+    private ripplePointerId;
     protected handleDown(e: PointerEvent): void;
-    protected handleUp(e: PointerEvent): void;
     /**
      * The move handler tracks handle hovering to facilitate proper ripple
      * behavior on the slider handle. This is needed because user interaction with

package/slider/lib/slider.js

@@ -3,23 +3,22 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+var _a;
+import { __decorate } from "tslib";
 import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { html, LitElement, nothing } from 'lit';
+import { html, isServer, LitElement, nothing } from 'lit';
 import { property, query, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { dispatchActivationClick, isActivationClick, redispatchEvent } from '../../controller/events.js';
 import { FormController, getFormValue } from '../../controller/form-controller.js';
 import { stringConverter } from '../../controller/string-converter.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
-// This is required for decorators.
-// tslint:disable:no-new-decorators
 // Disable warning for classMap with destructuring
 // tslint:disable:quoted-properties-on-dictionary
 function inBounds({ x, y }, element) {
@@ -130,7 +129,7 @@ export class Slider extends LitElement {
         this.valueB = 0;
         this.focusRingAShowing = false;
         this.focusRingBShowing = false;
-        // allows for lazy rendering of the focus ring by latchin to true when the
+        // allows for lazy rendering of the focus ring by latching to true when the
         // focus ring should be rendered.
         this.focusRingARequested = false;
         this.focusRingBRequested = false;
@@ -141,11 +140,8 @@ export class Slider extends LitElement {
         // interaction targets.
         this.handleAHover = false;
         this.handleBHover = false;
-        this.handleAPressed = false;
-        this.handleBPressed = false;
         this.onTopId = 'b';
         this.handlesOverlapping = false;
-        this.isInteracting = false;
         // If range should be allowed (detected via value format).
         this.allowRange = false;
         this.renderRipple = (id) => html `<md-ripple class=${id} ?disabled=${this.disabled} unbounded></md-ripple>`;
@@ -163,14 +159,18 @@ export class Slider extends LitElement {
             this.rippleBShowing = true;
             return this.rippleB;
         };
+        // used in synthetic events generated to control ripple hover state.
+        this.ripplePointerId = 1;
         this.addController(new FormController(this));
-        this.addEventListener('click', (event) => {
-            if (!isActivationClick(event)) {
-                return;
-            }
-            this.focus();
-            dispatchActivationClick(this.inputB);
-        });
+        if (!isServer) {
+            this.addEventListener('click', (event) => {
+                if (!isActivationClick(event)) {
+                    return;
+                }
+                this.focus();
+                dispatchActivationClick(this.inputB);
+            });
+        }
     }
     focus() {
         this.inputB?.focus();
@@ -226,15 +226,12 @@ export class Slider extends LitElement {
         const isFlipped = this.isFlipped();
         const containerStyles = {
             // for clipping inputs and active track.
-            '--lowerFraction': String(lowerFraction),
-            '--upperFraction': String(upperFraction),
+            '--slider-lower-fraction': String(lowerFraction),
+            '--slider-upper-fraction': String(upperFraction),
             // for generating tick marks
-            '--tickCount': String(range / step)
-        };
-        const containerClasses = {
-            interacting: this.isInteracting,
-            ranged: this.allowRange
+            '--slider-tick-count': String(range / step),
         };
+        const containerClasses = { ranged: this.allowRange };
         // optional label values to show in place of the value.
         const labelA = String(this.valueLabel?.[isFlipped ? 1 : 0] ?? this.valueA);
         const labelB = String((this.allowRange ? this.valueLabel?.[isFlipped ? 0 : 1] :
@@ -261,7 +258,6 @@ export class Slider extends LitElement {
             focusRequested: this.focusRingARequested,
             showFocus: this.focusRingAShowing,
             hover: this.handleAHover,
-            pressed: this.handleAPressed,
             label: labelA
         };
         const handleBProps = {
@@ -271,7 +267,6 @@ export class Slider extends LitElement {
             focusRequested: this.focusRingBRequested,
             showFocus: this.focusRingBShowing,
             hover: this.handleBHover,
-            pressed: this.handleBPressed,
             label: labelB
         };
         const handleContainerClasses = {
@@ -297,10 +292,7 @@ export class Slider extends LitElement {
     }
     renderTrack() {
         const trackClasses = { 'tickMarks': this.withTickMarks };
-        return html `
-    <slot name="track">
-      <div class="track ${classMap(trackClasses)}"></div>
-    </slot>`;
+        return html `<div class="track ${classMap(trackClasses)}"></div>`;
     }
     renderFocusRing(visible) {
         return html `<md-focus-ring .visible=${visible}></md-focus-ring>`;
@@ -310,22 +302,18 @@ export class Slider extends LitElement {
         <span class="labelContent" part="label">${value}</span>
       </div>`;
     }
-    renderHandle({ id, lesser, showRipple, focusRequested, showFocus, hover, pressed, label }) {
+    renderHandle({ id, lesser, showRipple, focusRequested, showFocus, hover, label }) {
         const onTop = !this.disabled && id === this.onTopId;
         const isOverlapping = !this.disabled && this.handlesOverlapping;
         return html `<div class="handle ${classMap({
             [id]: true,
             lesser,
             hover,
-            pressed,
             onTop,
             isOverlapping
         })}">
-      <slot name="handle${this.allowRange ? (lesser ? 'Lesser' : 'Greater') : ''}">
-        <div class="handleNub"><md-elevation shadow></md-elevation></div>
+        <div class="handleNub"><md-elevation></md-elevation></div>
         ${when(this.withLabel, () => this.renderLabel(label))}
-
-      </slot>
       ${when(showRipple, () => this.renderRipple(id))}
       ${when(focusRequested, () => this.renderFocusRing(showFocus))}
     </div>`;
@@ -333,6 +321,8 @@ export class Slider extends LitElement {
     renderInput({ id, lesser, value, label, getRipple }) {
         // when ranged, ensure announcement includes value info.
         const ariaLabelDescriptor = this.allowRange ? ` - ${lesser ? `start` : `end`} handle` : '';
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `<input type="range"
       class="${classMap({
             lesser,
@@ -341,7 +331,6 @@ export class Slider extends LitElement {
       @focus=${this.handleFocus}
       @blur=${this.handleBlur}
       @pointerdown=${this.handleDown}
-      @pointerup=${this.handleUp}
       @pointerenter=${this.handleEnter}
       @pointermove=${this.handleMove}
       @pointerleave=${this.handleLeave}
@@ -353,7 +342,7 @@ export class Slider extends LitElement {
       .step=${String(this.step)}
       .value=${String(value)}
       .tabIndex=${lesser ? 1 : 0}
-      aria-label=${`${this.ariaLabel}${ariaLabelDescriptor}` || nothing}
+      aria-label=${`${ariaLabel}${ariaLabelDescriptor}` || nothing}
       aria-valuetext=${label}
       ${ripple(getRipple)}>`;
     }
@@ -364,10 +353,10 @@ export class Slider extends LitElement {
         }
         // TODO(b/269799771): improve slider ripple connection
         if (hovering) {
-            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: 1 }));
+            rippleEl.handlePointerenter(new PointerEvent('pointerenter', { isPrimary: true, pointerId: this.ripplePointerId }));
         }
         else {
-            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: 1 }));
+            rippleEl.handlePointerleave(new PointerEvent('pointerleave', { isPrimary: true, pointerId: this.ripplePointerId }));
         }
     }
     isEventOnA({ target }) {
@@ -389,23 +378,19 @@ export class Slider extends LitElement {
     }
     handleDown(e) {
         pointerPress();
-        this.isInteracting = true;
+        this.ripplePointerId = e.pointerId;
         const isA = this.isEventOnA(e);
-        const isPrimaryButton = Boolean(e.buttons & 1);
         // Since handle moves to pointer on down and there may not be a move,
         // it needs to be considered hovered..
         this.handleAHover = !this.disabled && isA && Boolean(this.handleA);
-        this.handleAPressed = isPrimaryButton && this.handleAHover;
         this.handleBHover = !this.disabled && !isA && Boolean(this.handleB);
-        this.handleBPressed = isPrimaryButton && this.handleBHover;
         this.updateFocusVisible(e);
-    }
-    handleUp(e) {
-        this.handleAPressed = this.handleBPressed = false;
-        // used to remove animations after interactions...
-        this.renderRoot.addEventListener('transitionend', () => {
-            this.isInteracting = false;
-        }, { once: true });
+        // Force Safari to focus input so the label stays displayed; note,
+        // Macs don't normally focus non-text type inputs.
+        const target = e.target;
+        requestAnimationFrame(() => {
+            target.focus();
+        });
     }
     /**
      * The move handler tracks handle hovering to facilitate proper ripple
@@ -440,7 +425,7 @@ export class Slider extends LitElement {
         }
         this.valueB = this.inputB.valueAsNumber;
         this.updateOnTop(e);
-        //  update value only on interaction
+        // update value only on interaction
         const lower = Math.min(this.valueA, this.valueB);
         const upper = Math.max(this.valueA, this.valueB);
         this.value = this.allowRange ? [lower, upper] : this.valueB;
@@ -449,127 +434,88 @@ export class Slider extends LitElement {
         redispatchEvent(this, event);
     }
 }
+_a = Slider;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 Slider.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 /**
  * @nocollapse
  */
 Slider.formAssociated = true;
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], Slider.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], Slider.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], Slider.prototype, "min", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], Slider.prototype, "max", void 0);
 __decorate([
-    property({ converter: valueConverter }),
-    __metadata("design:type", Object)
+    property({ converter: valueConverter })
 ], Slider.prototype, "value", void 0);
 __decorate([
-    property({ type: String, converter: tupleConverter }),
-    __metadata("design:type", Object)
+    property({ converter: tupleConverter })
 ], Slider.prototype, "valueLabel", void 0);
 __decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
+    property({ type: Number })
 ], Slider.prototype, "step", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Slider.prototype, "withTickMarks", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Slider.prototype, "withLabel", void 0);
 __decorate([
-    property({ type: String, reflect: true, converter: stringConverter }),
-    __metadata("design:type", Object)
+    property({ reflect: true, converter: stringConverter })
 ], Slider.prototype, "name", void 0);
 __decorate([
-    query('input.a'),
-    __metadata("design:type", HTMLInputElement)
+    query('input.a')
 ], Slider.prototype, "inputA", void 0);
 __decorate([
-    query('.handle.a'),
-    __metadata("design:type", HTMLDivElement)
+    query('.handle.a')
 ], Slider.prototype, "handleA", void 0);
 __decorate([
-    queryAsync('md-ripple.a'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple.a')
 ], Slider.prototype, "rippleA", void 0);
 __decorate([
-    query('input.b'),
-    __metadata("design:type", HTMLInputElement)
+    query('input.b')
 ], Slider.prototype, "inputB", void 0);
 __decorate([
-    query('.handle.b'),
-    __metadata("design:type", HTMLDivElement)
+    query('.handle.b')
 ], Slider.prototype, "handleB", void 0);
 __decorate([
-    queryAsync('md-ripple.b'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple.b')
 ], Slider.prototype, "rippleB", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "valueA", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "valueB", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "focusRingAShowing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "focusRingBShowing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "rippleAShowing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "rippleBShowing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "handleAHover", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "handleBHover", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "handleAPressed", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "handleBPressed", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "onTopId", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Slider.prototype, "handlesOverlapping", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Slider.prototype, "isInteracting", void 0);
 //# sourceMappingURL=slider.js.map