@spectrum-web-components/slider - npm Package Compare versions

Comparing version 0.9.7-alpha.0 to 0.9.7

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.9.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.9.6...@spectrum-web-components/slider@0.9.7) (2021-06-07)
+
+### Bug Fixes
+
+-   use ObserveSlotText mixin to prevent white space from overriding label attribute ([610fb4b](https://github.com/adobe/spectrum-web-components/commit/610fb4b5b392b7e3673c7d46bf8f9f5f79f27ca9))
+
 ## [0.9.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.9.5...@spectrum-web-components/slider@0.9.6) (2021-05-24)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -150,2 +150,7 @@ {
         {
+          "name": "slotHasContent",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
           "name": "disabled",
@@ -152,0 +157,0 @@ "attribute": "disabled",

package.json

 {
     "name": "@spectrum-web-components/slider",
-    "version": "0.9.7-alpha.0+24b598bc7",
+    "version": "0.9.7",
     "publishConfig": {
@@ -46,4 +46,4 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.4.4-alpha.101+24b598bc7",
-        "@spectrum-web-components/shared": "^0.12.5-alpha.0+24b598bc7",
+        "@spectrum-web-components/base": "^0.4.3",
+        "@spectrum-web-components/shared": "^0.12.4",
         "tslib": "^2.0.0"
@@ -60,3 +60,3 @@ },
     ],
-    "gitHead": "24b598bc7c57c7f279c8957abbc0b0827ecd7089"
+    "gitHead": "b425768aaf694ab19ddad4fcab9939c29a2a503b"
 }

src/slider.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/slider.css.js

@@ -14,8 +14,8 @@ /*
 const styles = css `
-:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp,:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
+:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
 var(--spectrum-global-dimension-static-size-200))/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{width:100%;height:100%}:host([dir=ltr]) #handle{left:0}:host([dir=rtl]) #handle{right:0}:host([dir=ltr]) #handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) #handle{margin-right:calc(var(--spectrum-slider-handle-width)/-2);margin-left:0}#handle{position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);margin-top:var(--spectrum-slider-handle-margin-top);margin-bottom:0;border-width:var(--spectrum-slider-handle-border-size);border-style:solid;border-radius:var(--spectrum-slider-handle-border-radius);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;outline:none}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down)}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#handle:before{content:" ";display:block;position:absolute;left:50%;top:50%;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);transform:translate(-50%,-50%);border-radius:100%}:host([handle-highlight]) #handle:before{width:calc(var(--spectrum-slider-handle-width) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-slider-handle-height) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=ltr]) .tick:last-of-type .tickLabel,:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle,:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host(:focus){outline:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) #track-right:before,:host([dir=rtl]) #track-left:before{background-position:100%}:host([dir=ltr]) .track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}:host([dir=rtl]) .track:before{background:var(--spectrum-slider-track-color-rtl,var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)))}
+var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#fill:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host(:focus){outline:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) #track-right:before{background-position:100%}:host([dir=rtl]) #track-left:before{background-position:100%}:host([dir=ltr]) .track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}:host([dir=rtl]) .track:before{background:var(--spectrum-slider-track-color-rtl,var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)))}
 `;
 export default styles;
 //# sourceMappingURL=slider.css.js.map

src/slider.css.ts

@@ -14,7 +14,7 @@ /*
 const styles = css`
-:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp,:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
+:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
 var(--spectrum-global-dimension-static-size-200))/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{width:100%;height:100%}:host([dir=ltr]) #handle{left:0}:host([dir=rtl]) #handle{right:0}:host([dir=ltr]) #handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) #handle{margin-right:calc(var(--spectrum-slider-handle-width)/-2);margin-left:0}#handle{position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);margin-top:var(--spectrum-slider-handle-margin-top);margin-bottom:0;border-width:var(--spectrum-slider-handle-border-size);border-style:solid;border-radius:var(--spectrum-slider-handle-border-radius);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;outline:none}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down)}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#handle:before{content:" ";display:block;position:absolute;left:50%;top:50%;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);transform:translate(-50%,-50%);border-radius:100%}:host([handle-highlight]) #handle:before{width:calc(var(--spectrum-slider-handle-width) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-slider-handle-height) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=ltr]) .tick:last-of-type .tickLabel,:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle,:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host(:focus){outline:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) #track-right:before,:host([dir=rtl]) #track-left:before{background-position:100%}:host([dir=ltr]) .track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}:host([dir=rtl]) .track:before{background:var(--spectrum-slider-track-color-rtl,var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)))}
+var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#fill:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host(:focus){outline:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) #track-right:before{background-position:100%}:host([dir=rtl]) #track-left:before{background-position:100%}:host([dir=ltr]) .track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}:host([dir=rtl]) .track:before{background:var(--spectrum-slider-track-color-rtl,var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)))}
 `;
 export default styles;

src/Slider.d.ts

 import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 export declare const variants: string[];
-export declare class Slider extends Focusable {
+declare const Slider_base: typeof Focusable & {
+    new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
+    prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
+};
+export declare class Slider extends Slider_base {
     static get styles(): CSSResultArray;
@@ -67,1 +71,2 @@ type: string;
 }
+export {};

src/Slider.js

@@ -16,5 +16,6 @@ /*
 import sliderStyles from './slider.css.js';
+import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 export const variants = ['filled', 'ramp', 'range', 'tick'];
-export class Slider extends Focusable {
+export class Slider extends ObserveSlotText(Focusable, '') {
     constructor() {
@@ -85,3 +86,6 @@ super(...arguments);
             <div id="labelContainer">
-                <label id="label" for="input"><slot>${this.label}</slot></label>
+                <label id="label" for="input">
+                    ${this.slotHasContent ? html `` : this.label}
+                    <slot>${this.label}</slot>
+                </label>
                 <output id="value" aria-live="off" for="input">
@@ -173,6 +177,5 @@ ${this.ariaValueText}
                 style=${this.handleStyle}
-                ${streamingListener({
-            start: ['pointerdown', this.handlePointerdown],
-            streamInside: ['pointermove', this.handlePointermove],
-            end: [['pointerup', 'pointercancel'], this.handlePointerup],
+                @manage=${streamingListener({ type: 'pointerdown', fn: this.handlePointerdown }, { type: 'pointermove', fn: this.handlePointermove }, {
+            type: ['pointerup', 'pointercancel'],
+            fn: this.handlePointerup,
         })}
@@ -179,0 +182,0 @@ role="presentation"

src/Slider.ts

@@ -21,3 +21,2 @@ /*
     styleMap,
-    StyleInfo,
     ifDefined,
@@ -28,7 +27,9 @@ } from '@spectrum-web-components/base';
 import sliderStyles from './slider.css.js';
+import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import { StyleInfo } from 'lit-html/directives/style-map';
 
 export const variants = ['filled', 'ramp', 'range', 'tick'];
 
-export class Slider extends Focusable {
+export class Slider extends ObserveSlotText(Focusable, '') {
     public static get styles(): CSSResultArray {
@@ -142,3 +143,6 @@ return [sliderStyles];
             <div id="labelContainer">
-                <label id="label" for="input"><slot>${this.label}</slot></label>
+                <label id="label" for="input">
+                    ${this.slotHasContent ? html`` : this.label}
+                    <slot>${this.label}</slot>
+                </label>
                 <output id="value" aria-live="off" for="input">
@@ -239,7 +243,10 @@ ${this.ariaValueText}
                 style=${this.handleStyle}
-                ${streamingListener({
-                    start: ['pointerdown', this.handlePointerdown],
-                    streamInside: ['pointermove', this.handlePointermove],
-                    end: [['pointerup', 'pointercancel'], this.handlePointerup],
-                })}
+                @manage=${streamingListener(
+                    { type: 'pointerdown', fn: this.handlePointerdown },
+                    { type: 'pointermove', fn: this.handlePointermove },
+                    {
+                        type: ['pointerup', 'pointercancel'],
+                        fn: this.handlePointerup,
+                    }
+                )}
                 role="presentation"
@@ -246,0 +253,0 @@ >

src/spectrum-slider.css.d.ts

@@ -1,2 +0,2 @@
-declare const styles: import("@spectrum-web-components/base").CSSResultGroup;
+declare const styles: import("@spectrum-web-components/base").CSSResult;
 export default styles;

src/spectrum-slider.css.js

@@ -14,8 +14,8 @@ /*
 const styles = css `
-:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp,:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
+:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
 var(--spectrum-global-dimension-static-size-200))/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{width:100%;height:100%}:host([dir=ltr]) #handle{left:0}:host([dir=rtl]) #handle{right:0}:host([dir=ltr]) #handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) #handle{margin-right:calc(var(--spectrum-slider-handle-width)/-2);margin-left:0}#handle{position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);margin-top:var(--spectrum-slider-handle-margin-top);margin-bottom:0;border-width:var(--spectrum-slider-handle-border-size);border-style:solid;border-radius:var(--spectrum-slider-handle-border-radius);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;outline:none}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down)}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#handle:before{content:" ";display:block;position:absolute;left:50%;top:50%;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);transform:translate(-50%,-50%);border-radius:100%}:host([handle-highlight]) #handle:before{width:calc(var(--spectrum-slider-handle-width) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-slider-handle-height) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=ltr]) .tick:last-of-type .tickLabel,:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle,:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}
+var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#fill:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-slider.css.js.map

src/spectrum-slider.css.ts

@@ -14,7 +14,7 @@ /*
 const styles = css`
-:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp,:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
+:host{--spectrum-slider-handle-border-size:var(--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-border-size-down:var(--spectrum-slider-m-handle-border-size-down,var(--spectrum-global-dimension-size-75));--spectrum-slider-track-border-radius:var(--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10));--spectrum-slider-track-height:var(--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick));--spectrum-slider-handle-gap:var(--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker));--spectrum-slider-animation-duration:var(--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100));--spectrum-slider-height:var(--spectrum-slider-m-height,var(--spectrum-alias-item-height-m));--spectrum-slider-min-width:var(--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250));--spectrum-slider-handle-width:var(--spectrum-slider-m-handle-width,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-height:var(--spectrum-slider-m-handle-height,var(--spectrum-alias-item-control-2-size-l));--spectrum-slider-handle-border-radius:var(--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100));--spectrum-slider-label-gap-x:var(--spectrum-slider-m-label-gap-x,var(--spectrum-alias-item-control-gap-m));--spectrum-slider-tick-mark-width:var(--spectrum-slider-tick-m-mark-width,var(--spectrum-alias-border-size-thick));--spectrum-slider-tick-mark-border-radius:var(--spectrum-slider-tick-m-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));--spectrum-slider-tick-mark-height:var(--spectrum-slider-tick-m-mark-height,var(--spectrum-global-dimension-size-125));--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(--spectrum-global-dimension-font-size-75);--spectrum-slide-label-text-line-height:var(--spectrum-global-font-line-height-small,1.3);position:relative;z-index:1;display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);-webkit-user-select:none;user-select:none}:host([dir=ltr]) #controls{margin-left:var(--spectrum-slider-controls-margin)}:host([dir=rtl]) #controls{margin-right:var(--spectrum-slider-controls-margin)}#controls{display:inline-block;box-sizing:border-box;position:relative;z-index:auto;width:calc(100% - var(--spectrum-slider-controls-margin)*2);min-height:var(--spectrum-slider-height);vertical-align:top}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{height:var(--spectrum-slider-track-height);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height)/2);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(--spectrum-slider-track-margin-offset)}#fill,.track{padding-top:0;padding-bottom:0}#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius)}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-left:0}#fill{padding-top:0;padding-bottom:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-right:0;padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}.spectrum-Slider-fill--right{padding-top:0;padding-bottom:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl]) .track~.track{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr]) .track~.track{margin-left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl]) .track~.track{margin-right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr]) .track~.track{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) .track~.track{margin-left:var(--spectrum-slider-track-margin-offset)}.track~.track{padding-top:0;padding-bottom:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-right:0;padding-left:var(--spectrum-slider-track-handleoffset)}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:first-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-top:0;padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);margin:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-right:var(--spectrum-slider-track-handleoffset);padding-left:0}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(--spectrum-slider-range-track-reset)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(--spectrum-slider-range-track-reset)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(--spectrum-slider-track-margin-offset)}:host([variant=range]) .track:last-of-type{padding-top:0;padding-bottom:0}:host([dir=ltr]) #ramp{left:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=ltr]) #ramp{right:var(--spectrum-slider-track-margin-offset)}:host([dir=rtl]) #ramp{left:var(--spectrum-slider-track-margin-offset)}#ramp{margin-top:var(--spectrum-slider-ramp-margin-top);height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;top:calc(var(--spectrum-slider-ramp-track-height,
 var(--spectrum-global-dimension-static-size-200))/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{width:100%;height:100%}:host([dir=ltr]) #handle{left:0}:host([dir=rtl]) #handle{right:0}:host([dir=ltr]) #handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) #handle{margin-right:calc(var(--spectrum-slider-handle-width)/-2);margin-left:0}#handle{position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);margin-top:var(--spectrum-slider-handle-margin-top);margin-bottom:0;border-width:var(--spectrum-slider-handle-border-size);border-style:solid;border-radius:var(--spectrum-slider-handle-border-radius);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;outline:none}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down)}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#handle:before{content:" ";display:block;position:absolute;left:50%;top:50%;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);transform:translate(-50%,-50%);border-radius:100%}:host([handle-highlight]) #handle:before{width:calc(var(--spectrum-slider-handle-width) + var(--spectrum-alias-focus-ring-gap,
 var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-slider-handle-height) + var(--spectrum-alias-focus-ring-gap,
-var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=ltr]) .tick:last-of-type .tickLabel,:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle,:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before,:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}
+var(--spectrum-global-dimension-static-size-25))*2)}:host([dir=ltr]) #input{left:var(--spectrum-slider-input-left)}:host([dir=rtl]) #input{right:var(--spectrum-slider-input-left)}#input{margin:0;width:var(--spectrum-slider-handle-width);height:var(--spectrum-slider-handle-height);padding:0;position:absolute;top:var(--spectrum-slider-input-top);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{flex-grow:0;cursor:default;font-feature-settings:"tnum"}:host([dir=ltr]) #value{margin-left:var(--spectrum-slider-label-gap-x)}:host([dir=rtl]) #value{margin-right:var(--spectrum-slider-label-gap-x)}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2)}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{display:block;position:absolute;top:0;content:"";width:var(--spectrum-slider-tick-mark-width);height:var(--spectrum-slider-tick-mark-height);border-radius:var(--spectrum-slider-tick-mark-border-radius)}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height));margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin-left:0;margin-right:0}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) #handle{cursor:default;pointer-events:none}:host{--spectrum-slider-m-focus-ring-size-key-focus:var(--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25));--spectrum-slider-m-handle-border-color-key-focus:var(--spectrum-global-color-gray-800);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));--spectrum-slider-m-label-text-color:var(--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700));--spectrum-slider-m-label-text-color-disabled:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.track:before{background:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#labelContainer{color:var(--spectrum-slider-m-label-text-color)}:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#fill:before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}#ramp path{fill:var(--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400))}#handle{border-color:var(--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}#handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle:before{box-shadow:0 0 0 var(--spectrum-slider-m-focus-ring-size-key-focus,var(--spectrum-alias-focus-ring-size)) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#input{background:transparent}.tick:after{background-color:var(--spectrum-slider-tick-m-mark-color,var(--spectrum-alias-track-color-default))}:host([dragging]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-m-handle-background-color-down,var(--spectrum-alias-background-color-transparent))}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700))}:host([disabled]) #labelContainer{color:var(--spectrum-slider-m-label-text-color-disabled)}:host([disabled]) #handle{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([disabled]) #handle:active,:host([disabled]) #handle:hover{border-color:var(--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled][variant=filled]) .track:first-child:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #fill:before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300))}
 `;
 export default styles;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

293395

increased by1.44%

Lines of code

3044

increased by1.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@spectrum-web-components/base@^0.4.3

• Updated@spectrum-web-components/shared@^0.12.4