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

Comparing version 0.2.2 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.2.2...@spectrum-web-components/slider@0.3.0) (2019-11-19)
+
+### Features
+
+-   use :focus-visable (via polyfill) instead of :focus ([11c6fc7](https://github.com/adobe/spectrum-web-components/commit/11c6fc7))
+-   use @adobe/spectrum-css@2.15.1 ([3918888](https://github.com/adobe/spectrum-web-components/commit/3918888))
+
 ## [0.2.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/slider@0.2.1...@spectrum-web-components/slider@0.2.2) (2019-11-01)
@@ -8,0 +15,0 @@

lib/slider.js

@@ -37,3 +37,3 @@ /*
             // Retain focus on input element after mouse up to enable keyboard interactions
-            this.input.focus();
+            this.focus();
             this.currentMouseEvent = ev;
@@ -245,3 +245,3 @@ document.removeEventListener('mousemove', this.onMouseMove);
         }
-        this.input.focus();
+        this.focus();
         this.dragging = true;
@@ -259,3 +259,3 @@ this.handle.setPointerCapture(ev.pointerId);
         document.addEventListener('mouseup', this.onMouseUp);
-        this.input.focus();
+        this.focus();
         this.dragging = true;
@@ -274,3 +274,3 @@ this.currentMouseEvent = ev;
         // Retain focus on input element after mouse up to enable keyboard interactions
-        this.input.focus();
+        this.focus();
         this.handleHighlight = false;
@@ -277,0 +277,0 @@ this.dragging = false;

lib/spectrum-slider.css.js

@@ -14,25 +14,34 @@ /*
 const styles = css `
-:host{z-index:1;display:block;min-width:var(--spectrum-slider-min-width,var(--spectrum-global-dimension-size-1600));-webkit-user-select:none;-moz-user-select:none;user-select:none}#controls,:host{position:relative;min-height:var(--spectrum-slider-height,var(--spectrum-global-dimension-size-400))}#controls{display:inline-block;box-sizing:border-box;z-index:auto;width:calc(100% - var(--spectrum-slider-handle-width,
+:host{z-index:1;display:block;min-width:var(--spectrum-slider-min-width,var(--spectrum-global-dimension-size-1250));-webkit-user-select:none;-moz-user-select:none;user-select:none}#controls,:host{position:relative;min-height:var(--spectrum-slider-height,var(--spectrum-alias-single-line-height))}#controls{display:inline-block;box-sizing:border-box;z-index:auto;width:calc(100% - var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/2*2);margin-left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2);vertical-align:top}#buffer,#fill,#ramp,.track{height:var(--spectrum-slider-track-height,2px);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height, var(--spectrum-global-dimension-size-400))/2);left:0;right:auto;margin-top:calc(var(--spectrum-slider-fill-track-height, 2px)/-2);pointer-events:none}#buffer,#fill,.track{padding:0 var(--spectrum-slider-handle-gap,4px) 0 0;margin-left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}#buffer:before,#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius,1px)}#fill{margin-left:0;padding:0 0 0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap, 4px))}.spectrum-Slider-fill--right{padding:0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap, 4px)) 0 0}#buffer{padding:0 var(--spectrum-slider-handle-gap,4px) 0 0;z-index:2}#buffer~#buffer,.track~.track{left:auto;right:0;padding:0 0 0 var(--spectrum-slider-handle-gap,4px);margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}#buffer~#buffer{margin-right:0;padding:0 0 0 calc(var(--spectrum-slider-handle-gap, 4px) + var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2)}#buffer~#buffer:after{display:none}:host([variant=range]) #value{-webkit-user-select:text;-moz-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{padding:0 var(--spectrum-slider-handle-gap,4px) 0 0;left:0;right:auto;margin-left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}:host([variant=range]) .track{padding:0 calc(var(--spectrum-slider-handle-gap, 4px) + var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2) 0 calc(var(--spectrum-slider-handle-gap, 4px) + var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2);left:auto;right:auto;margin:0}:host([variant=range]) .track:last-of-type{padding:0 0 0 var(--spectrum-slider-handle-gap,4px);left:auto;right:0;margin-right:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}#ramp{margin-top:0;height:var(--spectrum-slider-ramp-track-height,16px);position:absolute;left:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2);vertical-align:top}#buffer,#fill,#ramp,.track{height:var(--spectrum-slider-track-height,var(--spectrum-alias-border-size-thick));box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height))/2);left:0;right:auto;margin-top:calc(var(--spectrum-slider-fill-track-height,
+var(--spectrum-alias-border-size-thick))/-2);pointer-events:none}#buffer,#fill,.track{padding:0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker)) 0 0;margin-left:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}#buffer:before,#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius,var(--spectrum-global-dimension-static-size-10))}#fill{margin-left:0;padding:0 0 0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)))}.spectrum-Slider-fill--right{padding:0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker))) 0 0}#buffer{padding:0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker)) 0 0;z-index:2}#buffer~#buffer,.track~.track{left:auto;right:0;padding:0 0 0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker));margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}#buffer~#buffer{margin-right:0;padding:0 0 0 calc(var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)) + var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2)}#buffer~#buffer:after{display:none}:host([variant=range]) #value{-webkit-user-select:text;-moz-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{padding:0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker)) 0 0;left:0;right:auto;margin-left:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}:host([variant=range]) .track{padding:0 calc(var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)) + var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2) 0 calc(var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)) + var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2);left:auto;right:auto;margin:0}:host([variant=range]) .track:last-of-type{padding:0 0 0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker));left:auto;right:0;margin-right:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}#ramp{margin-top:0;height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;left:calc(var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/2*-1);right:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1);top:calc(var(--spectrum-slider-ramp-track-height, 16px)/2)}#ramp svg{width:100%;height:100%}#handle{position:absolute;left:0;top:calc(var(--spectrum-slider-height, var(--spectrum-global-dimension-size-400))/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));margin:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1);top:calc(var(--spectrum-slider-ramp-track-height,
+var(--spectrum-global-dimension-static-size-200))/2)}#ramp svg{width:100%;height:100%}#handle{position:absolute;left:0;top:calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height))/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));margin:calc(var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/-2) 0 0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/-2);border-radius:var(--spectrum-slider-handle-border-radius,var(--spectrum-global-dimension-size-100));transition:border-width var(--spectrum-slider-animation-duration,.13s) ease-in-out;outline:none;cursor:pointer;cursor:-webkit-grab;cursor:grab;border:var(--spectrum-slider-handle-border-size,2px) solid var(--spectrum-slider-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down,var(--spectrum-global-dimension-size-75));cursor:ns-resize;cursor:-webkit-grabbing;cursor:grabbing}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#input{margin:0;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));padding:0;position:absolute;top:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/-2);border-radius:var(--spectrum-slider-handle-border-radius,var(--spectrum-alias-border-radius-medium));transition:border-width var(--spectrum-slider-animation-duration,var(--spectrum-global-animation-duration-100)) ease-in-out;outline:none;cursor:pointer;cursor:-webkit-grab;cursor:grab;border:var(--spectrum-slider-handle-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-slider-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down,var(--spectrum-global-dimension-size-75));cursor:ns-resize;cursor:-webkit-grabbing;cursor:grabbing}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#input{margin:0;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));padding:0;position:absolute;top:calc(var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/-2/4);left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3);color:var(--spectrum-label-text-color,var(--spectrum-global-color-gray-700))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height, 2px)/2)}.tick{position:relative}.tick,.tick:after{width:var(--spectrum-slider-tick-mark-width,2px)}.tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width, 2px)/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,1px);background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-global-color-gray-300))}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
+var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-font-size-75));line-height:var(--spectrum-label-text-line-height,var(--spectrum-global-font-line-height-small));color:var(--spectrum-label-text-color,var(--spectrum-alias-label-text-color))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height,
+var(--spectrum-alias-border-size-thick))/2)}.tick{position:relative}.tick,.tick:after{width:var(--spectrum-slider-tick-mark-width,var(--spectrum-alias-border-size-thick))}.tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width,
+var(--spectrum-alias-border-size-thick))/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-alias-track-color-default))}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
 var(--spectrum-global-dimension-size-200))*-1) 0 calc(var(--spectrum-slider-label-gap-x,
-var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}.tick:first-of-type .tickLabel{left:0}.tick:last-of-type .tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,24px);margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,1px)}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-global-color-blue-400));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-global-color-blue-400))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle,:host([variant=ramp]) .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-handle-background-color-down,transparent)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,rgba(0,0,0,.05))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,rgba(0,0,0,.05)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,rgba(0,0,0,.05));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,transparent)}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,rgba(0,0,0,.05))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-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,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,transparent)}:host([disabled]) .track:before{background:var(--spectrum-slider-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-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-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=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,transparent);box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
+var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-font-size-75));line-height:var(--spectrum-label-text-line-height,var(--spectrum-global-font-line-height-small))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}.tick:first-of-type .tickLabel{left:0}.tick:last-of-type .tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,var(--spectrum-global-dimension-static-size-300));margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,var(--spectrum-alias-border-size-thin))}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle,:host([variant=ramp]) .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-alias-border-color-focus));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-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-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,var(--spectrum-alias-border-color-translucent-dark))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,var(--spectrum-alias-border-color-translucent-dark)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,var(--spectrum-alias-border-color-translucent-dark));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,var(--spectrum-alias-border-color-transparent))}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,var(--spectrum-alias-border-color-translucent-dark))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-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,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-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-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-color-disabled,var(--spectrum-alias-track-color-default))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,var(--spectrum-alias-border-color-transparent));box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-slider.css.js.map

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.2",
+    "version": "0.3.0",
     "description": "",
@@ -39,7 +39,10 @@ "main": "lib/index.js",
     },
+    "devDependencies": {
+        "@spectrum-css/slider": "^2.0.2"
+    },
     "dependencies": {
-        "@spectrum-web-components/shared": "^0.2.0",
+        "@spectrum-web-components/shared": "^0.3.0",
         "tslib": "^1.10.0"
     },
-    "gitHead": "2157014e1c3f8cf184663261e4095eef59011b37"
+    "gitHead": "bfedd73cfc7ba9b30346ac5dd53013f7630648b0"
 }

src/slider.ts

@@ -290,3 +290,3 @@ /*
         }
-        this.input.focus();
+        this.focus();
         this.dragging = true;
@@ -305,3 +305,3 @@ this.handle.setPointerCapture(ev.pointerId);
         document.addEventListener('mouseup', this.onMouseUp);
-        this.input.focus();
+        this.focus();
         this.dragging = true;
@@ -322,3 +322,3 @@ this.currentMouseEvent = ev;
         // Retain focus on input element after mouse up to enable keyboard interactions
-        this.input.focus();
+        this.focus();
         this.handleHighlight = false;
@@ -332,3 +332,3 @@ this.dragging = false;
         // Retain focus on input element after mouse up to enable keyboard interactions
-        this.input.focus();
+        this.focus();
         this.currentMouseEvent = ev;
@@ -335,0 +335,0 @@ document.removeEventListener('mousemove', this.onMouseMove);

src/spectrum-slider.css.ts

@@ -14,24 +14,33 @@ /*
 const styles = css`
-:host{z-index:1;display:block;min-width:var(--spectrum-slider-min-width,var(--spectrum-global-dimension-size-1600));-webkit-user-select:none;-moz-user-select:none;user-select:none}#controls,:host{position:relative;min-height:var(--spectrum-slider-height,var(--spectrum-global-dimension-size-400))}#controls{display:inline-block;box-sizing:border-box;z-index:auto;width:calc(100% - var(--spectrum-slider-handle-width,
+:host{z-index:1;display:block;min-width:var(--spectrum-slider-min-width,var(--spectrum-global-dimension-size-1250));-webkit-user-select:none;-moz-user-select:none;user-select:none}#controls,:host{position:relative;min-height:var(--spectrum-slider-height,var(--spectrum-alias-single-line-height))}#controls{display:inline-block;box-sizing:border-box;z-index:auto;width:calc(100% - var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/2*2);margin-left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2);vertical-align:top}#buffer,#fill,#ramp,.track{height:var(--spectrum-slider-track-height,2px);box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height, var(--spectrum-global-dimension-size-400))/2);left:0;right:auto;margin-top:calc(var(--spectrum-slider-fill-track-height, 2px)/-2);pointer-events:none}#buffer,#fill,.track{padding:0 var(--spectrum-slider-handle-gap,4px) 0 0;margin-left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}#buffer:before,#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius,1px)}#fill{margin-left:0;padding:0 0 0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap, 4px))}.spectrum-Slider-fill--right{padding:0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap, 4px)) 0 0}#buffer{padding:0 var(--spectrum-slider-handle-gap,4px) 0 0;z-index:2}#buffer~#buffer,.track~.track{left:auto;right:0;padding:0 0 0 var(--spectrum-slider-handle-gap,4px);margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}#buffer~#buffer{margin-right:0;padding:0 0 0 calc(var(--spectrum-slider-handle-gap, 4px) + var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2)}#buffer~#buffer:after{display:none}:host([variant=range]) #value{-webkit-user-select:text;-moz-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{padding:0 var(--spectrum-slider-handle-gap,4px) 0 0;left:0;right:auto;margin-left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}:host([variant=range]) .track{padding:0 calc(var(--spectrum-slider-handle-gap, 4px) + var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2) 0 calc(var(--spectrum-slider-handle-gap, 4px) + var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2);left:auto;right:auto;margin:0}:host([variant=range]) .track:last-of-type{padding:0 0 0 var(--spectrum-slider-handle-gap,4px);left:auto;right:0;margin-right:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1)}#ramp{margin-top:0;height:var(--spectrum-slider-ramp-track-height,16px);position:absolute;left:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2);vertical-align:top}#buffer,#fill,#ramp,.track{height:var(--spectrum-slider-track-height,var(--spectrum-alias-border-size-thick));box-sizing:border-box;position:absolute;z-index:1;top:calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height))/2);left:0;right:auto;margin-top:calc(var(--spectrum-slider-fill-track-height,
+var(--spectrum-alias-border-size-thick))/-2);pointer-events:none}#buffer,#fill,.track{padding:0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker)) 0 0;margin-left:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}#buffer:before,#fill:before,.track:before{content:"";display:block;height:100%;border-radius:var(--spectrum-slider-track-border-radius,var(--spectrum-global-dimension-static-size-10))}#fill{margin-left:0;padding:0 0 0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)))}.spectrum-Slider-fill--right{padding:0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2 + var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker))) 0 0}#buffer{padding:0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker)) 0 0;z-index:2}#buffer~#buffer,.track~.track{left:auto;right:0;padding:0 0 0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker));margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}#buffer~#buffer{margin-right:0;padding:0 0 0 calc(var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)) + var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2)}#buffer~#buffer:after{display:none}:host([variant=range]) #value{-webkit-user-select:text;-moz-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{padding:0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker)) 0 0;left:0;right:auto;margin-left:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}:host([variant=range]) .track{padding:0 calc(var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)) + var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2) 0 calc(var(--spectrum-slider-handle-gap,
+var(--spectrum-alias-border-size-thicker)) + var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2);left:auto;right:auto;margin:0}:host([variant=range]) .track:last-of-type{padding:0 0 0 var(--spectrum-slider-handle-gap,var(--spectrum-alias-border-size-thicker));left:auto;right:0;margin-right:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1)}#ramp{margin-top:0;height:var(--spectrum-slider-ramp-track-height,var(--spectrum-global-dimension-static-size-200));position:absolute;left:calc(var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/2*-1);right:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1);top:calc(var(--spectrum-slider-ramp-track-height, 16px)/2)}#ramp svg{width:100%;height:100%}#handle{position:absolute;left:0;top:calc(var(--spectrum-slider-height, var(--spectrum-global-dimension-size-400))/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));margin:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1);top:calc(var(--spectrum-slider-ramp-track-height,
+var(--spectrum-global-dimension-static-size-200))/2)}#ramp svg{width:100%;height:100%}#handle{position:absolute;left:0;top:calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height))/2);z-index:2;display:inline-block;box-sizing:border-box;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));margin:calc(var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/-2) 0 0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/-2);border-radius:var(--spectrum-slider-handle-border-radius,var(--spectrum-global-dimension-size-100));transition:border-width var(--spectrum-slider-animation-duration,.13s) ease-in-out;outline:none;cursor:pointer;cursor:-webkit-grab;cursor:grab;border:var(--spectrum-slider-handle-border-size,2px) solid var(--spectrum-slider-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down,var(--spectrum-global-dimension-size-75));cursor:ns-resize;cursor:-webkit-grabbing;cursor:grabbing}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#input{margin:0;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));padding:0;position:absolute;top:calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/-2);border-radius:var(--spectrum-slider-handle-border-radius,var(--spectrum-alias-border-radius-medium));transition:border-width var(--spectrum-slider-animation-duration,var(--spectrum-global-animation-duration-100)) ease-in-out;outline:none;cursor:pointer;cursor:-webkit-grab;cursor:grab;border:var(--spectrum-slider-handle-border-size,var(--spectrum-alias-border-size-thick)) solid var(--spectrum-slider-handle-border-color,var(--spectrum-global-color-gray-700));background:var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{border-width:var(--spectrum-slider-handle-border-size-down,var(--spectrum-global-dimension-size-75));cursor:ns-resize;cursor:-webkit-grabbing;cursor:grabbing}#handle.is-tophandle,#handle:active,:host([dragging]) #handle,:host([handle-highlight]) #handle{z-index:3}#input{margin:0;width:var(--spectrum-slider-handle-width,var(--spectrum-global-dimension-size-200));height:var(--spectrum-slider-handle-height,var(--spectrum-global-dimension-size-200));padding:0;position:absolute;top:calc(var(--spectrum-slider-handle-width,
 var(--spectrum-global-dimension-size-200))/-2/4);left:calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3);color:var(--spectrum-label-text-color,var(--spectrum-global-color-gray-700))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
-var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height, 2px)/2)}.tick{position:relative}.tick,.tick:after{width:var(--spectrum-slider-tick-mark-width,2px)}.tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width, 2px)/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,1px);background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-global-color-gray-300))}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
+var(--spectrum-global-dimension-size-200))/-2/4);overflow:hidden;opacity:.000001;cursor:default;-webkit-appearance:none;border:0;pointer-events:none;background:transparent}#input:focus{outline:none}#labelContainer{display:flex;position:relative;width:auto;padding-top:var(--spectrum-fieldlabel-padding-top,var(--spectrum-global-dimension-size-50));font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-font-size-75));line-height:var(--spectrum-label-text-line-height,var(--spectrum-global-font-line-height-small));color:var(--spectrum-label-text-color,var(--spectrum-alias-label-text-color))}#label{padding-left:0;flex-grow:1}#value{flex-grow:0;padding-right:0;cursor:default;margin-left:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200))}.ticks{display:flex;justify-content:space-between;z-index:0;margin:0 calc(var(--spectrum-slider-handle-width,
+var(--spectrum-global-dimension-size-200))/2*-1);margin-top:calc(var(--spectrum-slider-tick-mark-height, 10px) + var(--spectrum-slider-track-height,
+var(--spectrum-alias-border-size-thick))/2)}.tick{position:relative}.tick,.tick:after{width:var(--spectrum-slider-tick-mark-width,var(--spectrum-alias-border-size-thick))}.tick:after{display:block;position:absolute;top:0;left:calc(50% - var(--spectrum-slider-tick-mark-width,
+var(--spectrum-alias-border-size-thick))/2);content:"";height:var(--spectrum-slider-tick-mark-height,10px);border-radius:var(--spectrum-slider-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall));background-color:var(--spectrum-slider-tick-mark-color,var(--spectrum-alias-track-color-default))}.tick .tickLabel{display:flex;align-items:center;justify-content:center;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) calc(var(--spectrum-slider-label-gap-x,
 var(--spectrum-global-dimension-size-200))*-1) 0 calc(var(--spectrum-slider-label-gap-x,
-var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-size-150));line-height:var(--spectrum-label-text-line-height,1.3)}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}.tick:first-of-type .tickLabel{left:0}.tick:last-of-type .tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,24px);margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,1px)}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-global-color-blue-400));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-global-color-blue-400))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle,:host([variant=ramp]) .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-handle-background-color-down,transparent)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,rgba(0,0,0,.05))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,rgba(0,0,0,.05)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,rgba(0,0,0,.05));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,transparent)}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,rgba(0,0,0,.05))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-global-color-gray-500))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-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,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,transparent)}:host([disabled]) .track:before{background:var(--spectrum-slider-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-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-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=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,transparent);box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}
+var(--spectrum-global-dimension-size-200))*-1);font-size:var(--spectrum-label-text-size,var(--spectrum-global-dimension-font-size-75));line-height:var(--spectrum-label-text-line-height,var(--spectrum-global-font-line-height-small))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;position:absolute;margin:var(--spectrum-slider-label-gap-x,var(--spectrum-global-dimension-size-200)) 0 0 0}.tick:first-of-type .tickLabel{left:0}.tick:last-of-type .tickLabel{right:0}:host([variant=color]) #labelContainer,:host([variant=color]) .spectrum-Dial-labelContainer{padding-bottom:var(--spectrum-fieldlabel-padding-bottom,var(--spectrum-global-dimension-size-65))}:host([variant=color]) #controls,:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{min-height:auto;height:var(--spectrum-slider-color-track-height,var(--spectrum-global-dimension-static-size-300));margin-left:0;width:100%}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{display:block;content:""}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before,:host([variant=color]) .track{top:0;padding:0;margin-top:0;margin-right:0;border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{top:50%}:host([disabled]){cursor:default}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{cursor:default;pointer-events:none}:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{border-width:var(--spectrum-slider-color-handle-outset-border-size,var(--spectrum-alias-border-size-thin))}.track:before{background:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#fill:before,:host([variant=filled]) .track:first-child:before{background:var(--spectrum-slider-fill-track-color,var(--spectrum-global-color-gray-700))}#buffer:after,#buffer:before{background:var(--spectrum-slider-player-track-buffer-color,var(--spectrum-global-color-gray-500))}#ramp path{fill:var(--spectrum-slider-track-color,var(--spectrum-global-color-gray-300))}#handle:hover{border-color:var(--spectrum-slider-handle-border-color-hover,var(--spectrum-global-color-gray-800))}#handle:active,:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800))}:host([variant=ramp]) #handle,:host([variant=ramp]) .spectrum-Dial-handle{box-shadow:0 0 0 4px var(--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100))}:host([handle-highlight]) #handle{border-color:var(--spectrum-slider-handle-border-color-key-focus,var(--spectrum-alias-border-color-focus));background:var(--spectrum-slider-handle-background-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([dragging]) #handle{border-color:var(--spectrum-slider-handle-border-color-down,var(--spectrum-global-color-gray-800));background:var(--spectrum-slider-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-fill-track-color,var(--spectrum-global-color-gray-700))}:host([variant=color]) #controls:before,:host([variant=color]) .spectrum-Dial-controls:before{background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc) 0),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc) 25.5%,transparent 0);background-size:var(--spectrum-global-dimension-static-size-200,16px) var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px) calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)),calc(-1*var(--spectrum-global-dimension-static-size-100, 8px)) 0;z-index:0}:host([variant=color]) .track{background-color:initial;background-image:linear-gradient(90deg,var(--spectrum-slider-color-track-background-color-gradient-start,var(--spectrum-global-color-blue-400)),var(--spectrum-slider-color-track-background-color-gradient-end,var(--spectrum-global-color-blue-700)));box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-track-border-color,var(--spectrum-alias-border-color-translucent-dark))}:host([variant=color]) .track:before{display:none}:host([variant=color]) #handle,:host([variant=color]) .spectrum-Dial-handle{box-shadow:inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color,var(--spectrum-alias-border-color-translucent-dark)),0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color,var(--spectrum-alias-border-color-translucent-dark));border-color:var(--spectrum-slider-color-handle-border-color,var(--spectrum-global-color-gray-50));background:var(--spectrum-slider-color-handle-color,var(--spectrum-alias-border-color-transparent))}:host([variant=color][handle-highlight]) #handle{box-shadow:0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus,var(--spectrum-alias-border-color-translucent-dark))}:host([disabled]) #labelContainer,:host([disabled]) .spectrum-Dial-labelContainer{color:var(--spectrum-label-text-color-disabled,var(--spectrum-alias-text-color-disabled))}:host([disabled]) #handle,:host([disabled]) .spectrum-Dial-handle{border-color:var(--spectrum-slider-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,:host([disabled]) .spectrum-Dial-handle:active,:host([disabled]) .spectrum-Dial-handle:hover{border-color:var(--spectrum-slider-handle-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-slider-handle-background-color,var(--spectrum-alias-background-color-transparent))}:host([disabled]) .track:before{background:var(--spectrum-slider-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-fill-track-color-disabled,var(--spectrum-global-color-gray-300))}:host([disabled]) #buffer:before{background:var(--spectrum-slider-player-track-buffer-color-disabled,var(--spectrum-alias-track-color-default))}:host([disabled]) #ramp path{fill:var(--spectrum-slider-ramp-track-color-disabled,var(--spectrum-global-color-gray-200))}:host([disabled][variant=color]) .track{background:var(--spectrum-slider-color-track-color-disabled,var(--spectrum-global-color-gray-200))!important;box-shadow:none}:host([disabled][variant=color]) #handle,:host([disabled][variant=color]) #handle:active,:host([disabled][variant=color]) #handle:hover,:host([disabled][variant=color]) .spectrum-Dial-handle,:host([disabled][variant=color]) .spectrum-Dial-handle:active,:host([disabled][variant=color]) .spectrum-Dial-handle:hover{background:var(--spectrum-slider-color-handle-color-disabled,var(--spectrum-alias-border-color-transparent));box-shadow:none;border-color:var(--spectrum-slider-color-handle-border-color-disabled,var(--spectrum-global-color-gray-400))}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(--spectrum-slider-fill-track-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

Improved metrics

Total package byte prevSize

159527

increased by3.55%

Lines of code

2255

increased by3.63%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/shared@0.3.3(transitive)

• + Addedfocus-visible@5.2.1(transitive)

• - Removed@spectrum-web-components/shared@0.2.0(transitive)

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