@spectrum-web-components/slider 0.12.8 → 0.12.10

package/src/spectrum-slider.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"spectrum-slider.css.js","sourceRoot":"","sources":["spectrum-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-tick-mark-width:var(\n--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-tick-mark-height:var(\n--spectrum-slider-m-tick-mark-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-tick-mark-border-radius:var(\n--spectrum-slider-m-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall)\n);--spectrum-slider-track-border-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-slider-track-height:var(\n--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-width:var(\n--spectrum-slider-m-handle-width,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-height:var(\n--spectrum-slider-m-handle-height,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-gap:var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n);--spectrum-slider-handle-border-size:var(\n--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-border-radius:var(\n--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100)\n);--spectrum-slider-height:var(\n--spectrum-slider-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-slider-min-width:var(\n--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-slider-animation-duration:var(\n--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-slider-ramp-track-color-disabled:var(\n--spectrum-slider-m-ramp-track-color-disabled,var(--spectrum-global-color-gray-300)\n);--spectrum-slider-ramp-track-height:var(\n--spectrum-slider-m-ramp-track-height,var(--spectrum-global-dimension-size-200)\n);--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(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\n)}:host{display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);position:relative;-webkit-user-select:none;user-select:none;z-index:1}:host([dir=ltr]) #controls{margin-left:var(\n--spectrum-slider-controls-margin\n)}:host([dir=rtl]) #controls{margin-right:var(\n--spectrum-slider-controls-margin\n)}#controls{box-sizing:border-box;display:inline-block;min-height:var(--spectrum-slider-height);position:relative;vertical-align:top;width:calc(100% - var(--spectrum-slider-controls-margin)*2);z-index:auto}: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{box-sizing:border-box;height:var(\n--spectrum-slider-track-height\n);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:1}: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-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}#fill,.track{padding-bottom:0;padding-top:0}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}: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-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}#fill{padding-bottom:0;padding-top: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-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}.spectrum-Slider-fill--right{padding-bottom:0;padding-top:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl]) .track~.track{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr]) .track~.track{margin-left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{margin-right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) .track~.track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}.track~.track{padding-bottom:0;padding-top: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-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}: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(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([variant=range]) .track:first-of-type{padding-bottom:0;padding-top: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{margin:var(--spectrum-slider-range-track-reset);padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}: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(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([variant=range]) .track:last-of-type{padding-bottom:0;padding-top:0}:host([dir=ltr]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}#ramp{height:var(--spectrum-slider-ramp-track-height);margin-top:var(\n--spectrum-slider-ramp-margin-top\n);position:absolute;top:calc(var(--spectrum-slider-ramp-track-height)/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{height:100%;width: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-left:0;margin-right:calc(var(--spectrum-slider-handle-width)/-2)}.handle{border-radius:var(--spectrum-slider-handle-border-radius);border-style:solid;border-width:var(--spectrum-slider-handle-border-size);box-sizing:border-box;display:inline-block;height:var(--spectrum-slider-handle-height);margin-bottom:0;margin-top:var(--spectrum-slider-handle-margin-top);outline:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;width:var(--spectrum-slider-handle-width);z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--spectrum-slider-handle-border-size\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{border-radius:100%;content:\" \";display:block;height:var(--spectrum-slider-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-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)}.handle.handle-highlight:before{height:calc(var(--spectrum-slider-handle-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2);width:calc(var(--spectrum-slider-handle-width) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2)}:host([dir=ltr]) .input{left:var(\n--spectrum-slider-input-left\n)}:host([dir=rtl]) .input{right:var(\n--spectrum-slider-input-left\n)}.input{-webkit-appearance:none;border:0;cursor:default;height:var(--spectrum-slider-handle-height);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:var(--spectrum-slider-input-top);width:var(--spectrum-slider-handle-width)}.input:focus{outline:none}#label-container{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(\n--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)\n);position:relative;width:auto}: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{font-feature-settings:\"tnum\";cursor:default;flex-grow:0}:host([dir=ltr]) #value{margin-left:var(\n--spectrum-slider-label-gap-x\n)}:host([dir=rtl]) #value{margin-right:var(\n--spectrum-slider-label-gap-x\n)}.ticks{display:flex;justify-content:space-between;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2);z-index:0}.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{border-radius:var(--spectrum-slider-tick-mark-border-radius);content:\"\";display:block;height:var(--spectrum-slider-tick-mark-height);position:absolute;top:0;width:var(--spectrum-slider-tick-mark-width)}.tick .tickLabel{align-items:center;display:flex;font-size:var(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-left:0;margin-right:0;position:absolute}:host([dir=ltr]) .tick:first-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:first-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}: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{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:last-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}: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}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{margin-left:calc(var(--spectrum-slider-handle-width)/2*-1);position:absolute;top:calc(var(--spectrum-slider-track-height)/2 - 1px);width:calc(100% + var(--spectrum-slider-handle-width))}.spectrum-Slider-trackContainer{height:var(--spectrum-slider-height);overflow:hidden}:host{--spectrum-slider-m-focus-ring-size:var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-slider-m-handle-border-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);--spectrum-slider-m-label-text-color:var(\n--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700)\n);--spectrum-slider-m-label-text-color-disabled:var(\n--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}.track:before{background:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}#label-container{color:var(\n--spectrum-slider-m-label-text-color\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#fill:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#ramp path{fill:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}.handle{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}.handle:hover{border-color:var(\n--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight{border-color:var(\n--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(\n--spectrum-slider-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}.handle.dragging,.handle:active{border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=ramp]) .handle{box-shadow:0 0 0 4px var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n)}.input{background:transparent}.tick:after{background-color:var(\n--spectrum-slider-m-tick-mark-color,var(--spectrum-global-color-gray-400)\n)}.handle.dragging{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}:host([disabled]) #label-container{color:var(\n--spectrum-slider-m-label-text-color-disabled\n)}:host([disabled]) .handle{background:var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .track:before{background:var(\n--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #fill:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #ramp path{fill:var(\n--spectrum-slider-ramp-track-color-disabled\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}\n`;\nexport default styles;"]}
+{"version":3,"file":"spectrum-slider.css.js","sourceRoot":"","sources":["spectrum-slider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoNjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-tick-mark-width:var(\n--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-tick-mark-height:var(\n--spectrum-slider-m-tick-mark-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-tick-mark-border-radius:var(\n--spectrum-slider-m-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall)\n);--spectrum-slider-track-border-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-slider-track-height:var(\n--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-width:var(\n--spectrum-slider-m-handle-width,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-height:var(\n--spectrum-slider-m-handle-height,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-gap:var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n);--spectrum-slider-handle-border-size:var(\n--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-border-radius:var(\n--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100)\n);--spectrum-slider-height:var(\n--spectrum-slider-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-slider-min-width:var(\n--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-slider-animation-duration:var(\n--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-slider-ramp-track-color-disabled:var(\n--spectrum-slider-m-ramp-track-color-disabled,var(--spectrum-global-color-gray-300)\n);--spectrum-slider-ramp-track-height:var(\n--spectrum-slider-m-ramp-track-height,var(--spectrum-global-dimension-size-200)\n);--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-slider-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n)}:host{display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);position:relative;-webkit-user-select:none;user-select:none;z-index:1}:host([dir=ltr]) #controls{margin-left:var(\n--spectrum-slider-controls-margin\n)}:host([dir=rtl]) #controls{margin-right:var(\n--spectrum-slider-controls-margin\n)}#controls{box-sizing:border-box;display:inline-block;min-height:var(--spectrum-slider-height);position:relative;vertical-align:top;width:calc(100% - var(--spectrum-slider-controls-margin)*2);z-index:auto}: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{box-sizing:border-box;height:var(\n--spectrum-slider-track-height\n);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:1}: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-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}#fill,.track{padding-bottom:0;padding-top:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-top-left-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-top-right-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-bottom-left-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-bottom-right-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-top-right-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-top-left-radius:0}:host([dir=ltr]) #fill:before,:host([dir=ltr]) .track:before{border-bottom-right-radius:0}:host([dir=rtl]) #fill:before,:host([dir=rtl]) .track:before{border-bottom-left-radius:0}#fill:before,.track:before{content:\"\";display:block;height:100%}:host([dir=ltr]) .track:first-of-type:before{border-top-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:first-of-type:before{border-top-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:first-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:first-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:first-of-type:before{border-top-right-radius:0}:host([dir=rtl]) .track:first-of-type:before{border-top-left-radius:0}:host([dir=ltr]) .track:first-of-type:before{border-bottom-right-radius:0}:host([dir=rtl]) .track:first-of-type:before{border-bottom-left-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-top-left-radius:0}:host([dir=rtl]) .track:last-of-type:before{border-top-right-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-bottom-left-radius:0}:host([dir=rtl]) .track:last-of-type:before{border-bottom-right-radius:0}:host([dir=ltr]) .track:last-of-type:before{border-top-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:last-of-type:before{border-top-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track:last-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=rtl]) .track:last-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-track-border-radius\n)}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl]) .track~.track{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr]) .track~.track{margin-left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{margin-right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) .track~.track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}.track~.track{padding-bottom:0;padding-top:0}: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-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}#fill{padding-bottom:0;padding-top: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-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}.spectrum-Slider-fill--right{padding-bottom:0;padding-top:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:before{border-top-left-radius:0}:host([dir=rtl][variant=range]) .track:before{border-top-right-radius:0}:host([dir=ltr][variant=range]) .track:before{border-bottom-left-radius:0}:host([dir=rtl][variant=range]) .track:before{border-bottom-right-radius:0}:host([dir=ltr][variant=range]) .track:before{border-top-right-radius:0}:host([dir=rtl][variant=range]) .track:before{border-top-left-radius:0}:host([dir=ltr][variant=range]) .track:before{border-bottom-right-radius:0}:host([dir=rtl][variant=range]) .track:before{border-bottom-left-radius:0}: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-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}: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(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-top-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-top-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-top-right-radius:0}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-top-left-radius:0}:host([dir=ltr][variant=range]) .track:first-of-type:before{border-bottom-right-radius:0}:host([dir=rtl][variant=range]) .track:first-of-type:before{border-bottom-left-radius: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{margin-left:var(--spectrum-slider-range-track-reset);margin-right:var(--spectrum-slider-range-track-reset);padding-left:var(\n--spectrum-slider-track-middle-handleoffset\n);padding-right:var(--spectrum-slider-track-middle-handleoffset)}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}: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(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-top-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-top-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-bottom-right-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-bottom-left-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n)}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-top-left-radius:0}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-top-right-radius:0}:host([dir=ltr][variant=range]) .track:last-of-type:before{border-bottom-left-radius:0}:host([dir=rtl][variant=range]) .track:last-of-type:before{border-bottom-right-radius:0}:host([dir=ltr]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}#ramp{height:var(--spectrum-slider-ramp-track-height);margin-top:var(\n--spectrum-slider-ramp-margin-top\n);position:absolute;top:calc(var(--spectrum-slider-ramp-track-height)/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{height:100%;width: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-left:0;margin-right:calc(var(--spectrum-slider-handle-width)/-2)}.handle{border-radius:var(--spectrum-slider-handle-border-radius);border-style:solid;border-width:var(--spectrum-slider-handle-border-size);box-sizing:border-box;display:inline-block;height:var(--spectrum-slider-handle-height);margin-bottom:0;margin-top:var(--spectrum-slider-handle-margin-top);outline:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;width:var(--spectrum-slider-handle-width);z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--spectrum-slider-handle-border-size\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{border-radius:100%;content:\" \";display:block;height:var(--spectrum-slider-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-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)}.handle.handle-highlight:before{height:calc(var(--spectrum-slider-handle-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2);width:calc(var(--spectrum-slider-handle-width) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2)}:host([dir=ltr]) .input{left:var(\n--spectrum-slider-input-left\n)}:host([dir=rtl]) .input{right:var(\n--spectrum-slider-input-left\n)}.input{-webkit-appearance:none;border:0;cursor:default;height:var(--spectrum-slider-handle-height);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:var(--spectrum-slider-input-top);width:var(--spectrum-slider-handle-width)}.input:focus{outline:none}#label-container{display:flex;font-size:var(\n--spectrum-slider-label-text-size,var(--spectrum-global-dimension-font-size-75)\n);line-height:var(--spectrum-slider-label-text-line-height);margin-bottom:var(--spectrum-slider-label-margin-bottom);padding-top:var(\n--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)\n);position:relative;width:auto}: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{font-feature-settings:\"tnum\";cursor:default;flex-grow:0}:host([dir=ltr]) #value{margin-left:var(\n--spectrum-slider-label-gap-x\n)}:host([dir=rtl]) #value{margin-right:var(\n--spectrum-slider-label-gap-x\n)}.ticks{display:flex;justify-content:space-between;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + 1px);z-index:0}.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{border-radius:var(--spectrum-slider-tick-mark-border-radius);content:\"\";display:block;height:var(--spectrum-slider-tick-mark-height);position:absolute;top:0;width:var(--spectrum-slider-tick-mark-width)}.tick .tickLabel{align-items:center;display:flex;font-size:var(\n--spectrum-slider-label-text-size,var(--spectrum-global-dimension-font-size-75)\n);justify-content:center;line-height:var(--spectrum-slider-label-text-line-height);margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-left:0;margin-right:0;position:absolute}:host([dir=ltr]) .tick:first-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:first-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}: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{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:last-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}: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}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{margin-left:calc(var(--spectrum-slider-handle-width)/2*-1);position:absolute;top:calc(var(--spectrum-slider-track-height)/2 - 1px);width:calc(100% + var(--spectrum-slider-handle-width))}.spectrum-Slider-trackContainer{height:var(--spectrum-slider-height);overflow:hidden}:host{--spectrum-slider-m-focus-ring-size:var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-slider-m-handle-border-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);--spectrum-slider-m-label-text-color:var(\n--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700)\n);--spectrum-slider-m-label-text-color-disabled:var(\n--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}.track:before{background:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}#label-container{color:var(\n--spectrum-slider-m-label-text-color\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#fill:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#ramp path{fill:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}.handle{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}.handle:hover{border-color:var(\n--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight{border-color:var(\n--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(\n--spectrum-slider-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}.handle.dragging,.handle:active{border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=ramp]) .handle{box-shadow:0 0 0 var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n) var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n)}.input{background:transparent}.tick:after{background-color:var(\n--spectrum-slider-m-tick-mark-color,var(--spectrum-global-color-gray-400)\n)}.handle.dragging{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}:host([disabled]) #label-container{color:var(\n--spectrum-slider-m-label-text-color-disabled\n)}:host([disabled]) .handle{background:var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .track:before{background:var(\n--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #fill:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #ramp path{fill:var(\n--spectrum-slider-ramp-track-color-disabled\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}\n`;\nexport default styles;"]}

package/stories/slider.stories.js

@@ -349,6 +349,22 @@ tick.args = {
     variant: 'tick',
     tickStep: 5,
 };
+export const tickLabels = (args = {}) => {
+    return html `
+        <sp-slider
+            label="Slider Label"
+            tick-labels
+            variant="tick"
+            min="50"
+            max="75"
+            ...=${spreadProps(args)}
+        ></sp-slider>
+    `;
+};
+tickLabels.args = {
+    variant: 'tick',
+    tickStep: 5,
+};
 export const Disabled = (args = {}) => {
     return html `
         <div style="width: 500px; margin: 12px 20px;">

package/stories/slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["slider.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-slider.js';\nimport '../sp-slider-handle.js';\nimport { Slider, SliderHandle, variants } from '../';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n    component: 'sp-slider',\n    title: 'Slider',\n    argTypes: {\n        onInput: { action: 'input' },\n        onChange: { action: 'change' },\n        variant: {\n            name: 'Variant',\n            description: 'Determines the style of slider.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'inline-radio',\n                options: [undefined, ...variants],\n            },\n        },\n        tickStep: {\n            name: 'Tick Step',\n            description: 'Tick spacing on slider.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 0.1 },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        labelVisibility: {\n            name: 'Label Visibility',\n            description: 'The labels visibily available in the UI',\n            table: {\n                type: { summary: '\"text\" | \"value\" | \"none\" | undefined' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n    },\n    args: {\n        variant: undefined,\n        tickStep: 0.1,\n        labelVisibility: undefined,\n    },\n};\n\nexport interface StoryArgs {\n    variant?: string;\n    tickStep?: number;\n    labelVisibility?: string;\n    onInput?: (val: string) => void;\n    onChange?: (val: string) => void;\n    [prop: string]: unknown;\n}\n\nconst handleEvent =\n    ({ onInput, onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const { value } = event.target as Slider;\n        if (onInput && event.type === 'input') {\n            onInput(value.toString());\n        } else if (onChange && event.type === 'change') {\n            onChange(value.toString());\n        }\n    };\n\nconst handleHandleEvent =\n    ({ onInput, onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const target = event.target as SliderHandle;\n        if (target.value != null) {\n            if (typeof target.value === 'object') {\n                const value = JSON.stringify(target.value, null, 2);\n                if (onInput && event.type === 'input') {\n                    onInput(value);\n                } else if (onChange && event.type === 'change') {\n                    onChange(value);\n                }\n            } else {\n                const value = `${target.name}: ${target.value}`;\n                if (onInput && event.type === 'input') {\n                    onInput(value);\n                } else if (onChange && event.type === 'change') {\n                    onChange(value);\n                }\n            }\n        }\n    };\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleTextLabel.args = {\n    labelVisibility: 'value',\n};\n\nexport const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleValueLabel.args = {\n    labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleLabels.args = {\n    labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'px',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n    constructor() {\n        super();\n        this.numberFieldLoaderPromise = new Promise((res) => {\n            customElements.whenDefined('sp-number-field').then(() => {\n                res(true);\n            });\n        });\n    }\n\n    private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.numberFieldLoaderPromise;\n    }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <number-field-defined></number-field-defined>\n    `;\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                disabled\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"width: 500px; margin: 12px 20px; --spectrum-slider-editable-number-field-width: 150px;\"\n        >\n            <sp-slider\n                editable\n                max=\"24\"\n                min=\"0\"\n                value=\"12.75\"\n                step=\"0.25\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'unit', unit: 'hour' }}\n                ...=${spreadProps(args)}\n            >\n                Hours\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                hide-stepper\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"\n                width: 500px;\n                margin: 12px 20px;\n                --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);\n                --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);\n            \"\n        >\n            <sp-slider\n                label=\"Opacity\"\n                max=\"100\"\n                min=\"0\"\n                value=\"50\"\n                id=\"opacity-slider\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n    `;\n};\nGradient.args = {\n    variant: undefined,\n};\n\nexport const tick = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-slider\n            label=\"Slider Label\"\n            variant=\"tick\"\n            min=\"0\"\n            max=\"92\"\n            ...=${spreadProps(args)}\n        ></sp-slider>\n    `;\n};\ntick.args = {\n    variant: 'tick',\n    tickStep: 5,\n};\n\nexport const Disabled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                disabled\n                value=\"5\"\n                step=\"0.5\"\n                min=\"0\"\n                max=\"20\"\n                label=\"Intensity\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n    `;\n};\n\nexport const ExplicitHandle = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                step=\"0.5\"\n                min=\"0\"\n                max=\"20\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Intensity\n                <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const TwoHandles = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                value=\"5\"\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"min\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    value=\"250\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nTwoHandles.args = {\n    variant: 'range',\n    tickStep: 10,\n};\n\nexport const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                value=\"5\"\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'pt',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"min\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    value=\"250\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nTwoHandlesPt.args = {\n    variant: 'range',\n    tickStep: 10,\n};\n\nexport const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                value=\"5\"\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'pc',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n                <sp-slider-handle slot=\"handle\" value=\"133\"></sp-slider-handle>\n                <sp-slider-handle slot=\"handle\" value=\"250\"></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"low\"\n                    value=\"5\"\n                    max=\"next\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"mid\"\n                    value=\"100\"\n                    min=\"previous\"\n                    max=\"next\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"high\"\n                    value=\"250\"\n                    min=\"previous\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesOrdered.args = {\n    tickStep: 10,\n};\n\n// This is a very complex example from an actual application.\n//\n// The first and last handles go from 0 to 255 in a linear fashion.\n// The last and first handles are ordered so that the last handle\n// must be greater than or equal to the first handle.\n//\n// The middle handle's range goes from 9.99 to 0.01, counting down.\n// the middle handle's limits are set by the outer handles such that\n// the position of the left handle is the staring value (9.99) for the\n// middle handle. And the position of the right handle is the end\n// value (0.01). That means that the middle handle will move\n// proportionally as you move the outer handles.\n//\n// The two other interesting features of the middle handle are that\n// it counts down, and that it does so exponentially for the first\n// half of its range.\n//\n// Because the specification for the <input> tag in HTML says that the\n// min should be less than the max, we do a double normalization to make\n// this work. The middle handle is considered to go between 0 and 1,\n// where 0 is the left handle's position and 1 is the right handle's\n// position. We then do the appropriate calculation to convert that\n// value into one between 9.99 and 0.01 for display to the user.\n//\n// One iteresting thing to note is that the normalization function\n// can also be used to enforce clamping.\n//\nexport const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {\n    const values: { [key: string]: number } = {\n        black: 50,\n        gray: 4.98,\n        white: 225,\n    };\n    const handleEvent =\n        ({ onInput, onChange }: StoryArgs) =>\n        (event: Event): void => {\n            const target = event.target as SliderHandle;\n            if (target.value != null) {\n                if (typeof target.value === 'object') {\n                    const value = JSON.stringify(target.value, null, 2);\n                    if (onInput && event.type === 'input') {\n                        onInput(value);\n                    } else if (onChange && event.type === 'change') {\n                        onChange(value);\n                    }\n                } else {\n                    const value = `${target.name}: ${target.value}`;\n                    if (onInput && event.type === 'input') {\n                        onInput(value);\n                    } else if (onChange && event.type === 'change') {\n                        onChange(value);\n                    }\n                }\n                values[target.name] = target.value;\n            }\n        };\n    const grayNormalization = {\n        toNormalized(value: number) {\n            const normalizedBlack = values.black / 255;\n            const normalizedWhite = values.white / 255;\n            const clamped = Math.max(Math.min(value, 1), 0);\n            return (\n                clamped * (normalizedWhite - normalizedBlack) + normalizedBlack\n            );\n        },\n        fromNormalized(value: number) {\n            const normalizedBlack = values.black / 255;\n            const normalizedWhite = values.white / 255;\n            const clamped = Math.max(\n                Math.min(value, normalizedWhite),\n                normalizedBlack\n            );\n\n            return (\n                (clamped - normalizedBlack) /\n                (normalizedWhite - normalizedBlack)\n            );\n        },\n    };\n    const blackNormalization = {\n        toNormalized(value: number) {\n            const clamped = Math.min(value, values.white);\n            return clamped / 255;\n        },\n        fromNormalized(value: number) {\n            const denormalized = value * 255;\n            return Math.min(denormalized, values.white);\n        },\n    };\n    const whiteNormalization = {\n        toNormalized(value: number) {\n            const clamped = Math.max(value, values.black);\n            return clamped / 255;\n        },\n        fromNormalized(value: number) {\n            const denormalized = value * 255;\n            return Math.max(denormalized, values.black);\n        },\n    };\n    const computeGray = (value: number): string => {\n        let result = 1.0;\n        if (value > 0.5) {\n            result = Math.max(2 * (1 - value), 0.01);\n        } else if (value < 0.5) {\n            result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;\n        }\n        const formatOptions = {\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n        };\n        return new Intl.NumberFormat(navigator.language, formatOptions).format(\n            result\n        );\n    };\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleEvent}\n                @change=${handleEvent}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"black\"\n                    value=${values.black}\n                    .normalization=${blackNormalization}\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"gray\"\n                    value=\"0.215\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.005\"\n                    .normalization=${grayNormalization}\n                    .getAriaHandleText=${computeGray}\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"white\"\n                    value=${values.white}\n                    .normalization=${whiteNormalization}\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesOrdered.args = {\n    tickStep: 10,\n};\n\nexport const focusTabDemo = (args: StoryArgs = {}): TemplateResult => {\n    const value = 50;\n    const min = 0;\n    const max = 100;\n    const step = 1;\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px 20px;\">\n            <sp-slider\n                value=\"${value}\"\n                step=\"${step}\"\n                min=\"${min}\"\n                max=\"${max}\"\n                label=\"Opacity\"\n                id=\"opacity-slider-opacity\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n        <div style=\"width: 500px; margin: 20px;\">\n            <sp-slider\n                value=\"${value}\"\n                step=\"${step}\"\n                min=\"${min}\"\n                max=\"${max}\"\n                label=\"Lightness\"\n                id=\"opacity-slider-lightness\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n        <div style=\"width: 500px; margin: 20px 20px 12px;\">\n            <sp-slider\n                value=\"${value}\"\n                step=\"${step}\"\n                min=\"${min}\"\n                max=\"${max}\"\n                label=\"Saturation\"\n                id=\"opacity-slider-saturation\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n    `;\n};\n"]}
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["slider.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-slider.js';\nimport '../sp-slider-handle.js';\nimport { Slider, SliderHandle, variants } from '../';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n    component: 'sp-slider',\n    title: 'Slider',\n    argTypes: {\n        onInput: { action: 'input' },\n        onChange: { action: 'change' },\n        variant: {\n            name: 'Variant',\n            description: 'Determines the style of slider.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'inline-radio',\n                options: [undefined, ...variants],\n            },\n        },\n        tickStep: {\n            name: 'Tick Step',\n            description: 'Tick spacing on slider.',\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 0.1 },\n            },\n            control: {\n                type: 'number',\n            },\n        },\n        labelVisibility: {\n            name: 'Label Visibility',\n            description: 'The labels visibily available in the UI',\n            table: {\n                type: { summary: '\"text\" | \"value\" | \"none\" | undefined' },\n                defaultValue: { summary: undefined },\n            },\n            control: {\n                type: 'text',\n            },\n        },\n    },\n    args: {\n        variant: undefined,\n        tickStep: 0.1,\n        labelVisibility: undefined,\n    },\n};\n\nexport interface StoryArgs {\n    variant?: string;\n    tickStep?: number;\n    labelVisibility?: string;\n    onInput?: (val: string) => void;\n    onChange?: (val: string) => void;\n    [prop: string]: unknown;\n}\n\nconst handleEvent =\n    ({ onInput, onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const { value } = event.target as Slider;\n        if (onInput && event.type === 'input') {\n            onInput(value.toString());\n        } else if (onChange && event.type === 'change') {\n            onChange(value.toString());\n        }\n    };\n\nconst handleHandleEvent =\n    ({ onInput, onChange }: StoryArgs) =>\n    (event: Event): void => {\n        const target = event.target as SliderHandle;\n        if (target.value != null) {\n            if (typeof target.value === 'object') {\n                const value = JSON.stringify(target.value, null, 2);\n                if (onInput && event.type === 'input') {\n                    onInput(value);\n                } else if (onChange && event.type === 'change') {\n                    onChange(value);\n                }\n            } else {\n                const value = `${target.name}: ${target.value}`;\n                if (onInput && event.type === 'input') {\n                    onInput(value);\n                } else if (onChange && event.type === 'change') {\n                    onChange(value);\n                }\n            }\n        }\n    };\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleTextLabel.args = {\n    labelVisibility: 'value',\n};\n\nexport const noVisibleValueLabel = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleValueLabel.args = {\n    labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleLabels.args = {\n    labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'px',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n    constructor() {\n        super();\n        this.numberFieldLoaderPromise = new Promise((res) => {\n            customElements.whenDefined('sp-number-field').then(() => {\n                res(true);\n            });\n        });\n    }\n\n    private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.numberFieldLoaderPromise;\n    }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <number-field-defined></number-field-defined>\n    `;\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                disabled\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"width: 500px; margin: 12px 20px; --spectrum-slider-editable-number-field-width: 150px;\"\n        >\n            <sp-slider\n                editable\n                max=\"24\"\n                min=\"0\"\n                value=\"12.75\"\n                step=\"0.25\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'unit', unit: 'hour' }}\n                ...=${spreadProps(args)}\n            >\n                Hours\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                hide-stepper\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"\n                width: 500px;\n                margin: 12px 20px;\n                --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);\n                --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);\n            \"\n        >\n            <sp-slider\n                label=\"Opacity\"\n                max=\"100\"\n                min=\"0\"\n                value=\"50\"\n                id=\"opacity-slider\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n    `;\n};\nGradient.args = {\n    variant: undefined,\n};\n\nexport const tick = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-slider\n            label=\"Slider Label\"\n            variant=\"tick\"\n            min=\"0\"\n            max=\"92\"\n            ...=${spreadProps(args)}\n        ></sp-slider>\n    `;\n};\ntick.args = {\n    variant: 'tick',\n    tickStep: 5,\n};\n\nexport const tickLabels = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-slider\n            label=\"Slider Label\"\n            tick-labels\n            variant=\"tick\"\n            min=\"50\"\n            max=\"75\"\n            ...=${spreadProps(args)}\n        ></sp-slider>\n    `;\n};\ntickLabels.args = {\n    variant: 'tick',\n    tickStep: 5,\n};\n\nexport const Disabled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                disabled\n                value=\"5\"\n                step=\"0.5\"\n                min=\"0\"\n                max=\"20\"\n                label=\"Intensity\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n    `;\n};\n\nexport const ExplicitHandle = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                step=\"0.5\"\n                min=\"0\"\n                max=\"20\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Intensity\n                <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const TwoHandles = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                value=\"5\"\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"min\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    value=\"250\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nTwoHandles.args = {\n    variant: 'range',\n    tickStep: 10,\n};\n\nexport const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                value=\"5\"\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'pt',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"min\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    value=\"250\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nTwoHandlesPt.args = {\n    variant: 'range',\n    tickStep: 10,\n};\n\nexport const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                value=\"5\"\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'pc',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle slot=\"handle\" value=\"5\"></sp-slider-handle>\n                <sp-slider-handle slot=\"handle\" value=\"133\"></sp-slider-handle>\n                <sp-slider-handle slot=\"handle\" value=\"250\"></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleHandleEvent(args)}\n                @change=${handleHandleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"low\"\n                    value=\"5\"\n                    max=\"next\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"mid\"\n                    value=\"100\"\n                    min=\"previous\"\n                    max=\"next\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"high\"\n                    value=\"250\"\n                    min=\"previous\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesOrdered.args = {\n    tickStep: 10,\n};\n\n// This is a very complex example from an actual application.\n//\n// The first and last handles go from 0 to 255 in a linear fashion.\n// The last and first handles are ordered so that the last handle\n// must be greater than or equal to the first handle.\n//\n// The middle handle's range goes from 9.99 to 0.01, counting down.\n// the middle handle's limits are set by the outer handles such that\n// the position of the left handle is the staring value (9.99) for the\n// middle handle. And the position of the right handle is the end\n// value (0.01). That means that the middle handle will move\n// proportionally as you move the outer handles.\n//\n// The two other interesting features of the middle handle are that\n// it counts down, and that it does so exponentially for the first\n// half of its range.\n//\n// Because the specification for the <input> tag in HTML says that the\n// min should be less than the max, we do a double normalization to make\n// this work. The middle handle is considered to go between 0 and 1,\n// where 0 is the left handle's position and 1 is the right handle's\n// position. We then do the appropriate calculation to convert that\n// value into one between 9.99 and 0.01 for display to the user.\n//\n// One iteresting thing to note is that the normalization function\n// can also be used to enforce clamping.\n//\nexport const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {\n    const values: { [key: string]: number } = {\n        black: 50,\n        gray: 4.98,\n        white: 225,\n    };\n    const handleEvent =\n        ({ onInput, onChange }: StoryArgs) =>\n        (event: Event): void => {\n            const target = event.target as SliderHandle;\n            if (target.value != null) {\n                if (typeof target.value === 'object') {\n                    const value = JSON.stringify(target.value, null, 2);\n                    if (onInput && event.type === 'input') {\n                        onInput(value);\n                    } else if (onChange && event.type === 'change') {\n                        onChange(value);\n                    }\n                } else {\n                    const value = `${target.name}: ${target.value}`;\n                    if (onInput && event.type === 'input') {\n                        onInput(value);\n                    } else if (onChange && event.type === 'change') {\n                        onChange(value);\n                    }\n                }\n                values[target.name] = target.value;\n            }\n        };\n    const grayNormalization = {\n        toNormalized(value: number) {\n            const normalizedBlack = values.black / 255;\n            const normalizedWhite = values.white / 255;\n            const clamped = Math.max(Math.min(value, 1), 0);\n            return (\n                clamped * (normalizedWhite - normalizedBlack) + normalizedBlack\n            );\n        },\n        fromNormalized(value: number) {\n            const normalizedBlack = values.black / 255;\n            const normalizedWhite = values.white / 255;\n            const clamped = Math.max(\n                Math.min(value, normalizedWhite),\n                normalizedBlack\n            );\n\n            return (\n                (clamped - normalizedBlack) /\n                (normalizedWhite - normalizedBlack)\n            );\n        },\n    };\n    const blackNormalization = {\n        toNormalized(value: number) {\n            const clamped = Math.min(value, values.white);\n            return clamped / 255;\n        },\n        fromNormalized(value: number) {\n            const denormalized = value * 255;\n            return Math.min(denormalized, values.white);\n        },\n    };\n    const whiteNormalization = {\n        toNormalized(value: number) {\n            const clamped = Math.max(value, values.black);\n            return clamped / 255;\n        },\n        fromNormalized(value: number) {\n            const denormalized = value * 255;\n            return Math.max(denormalized, values.black);\n        },\n    };\n    const computeGray = (value: number): string => {\n        let result = 1.0;\n        if (value > 0.5) {\n            result = Math.max(2 * (1 - value), 0.01);\n        } else if (value < 0.5) {\n            result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;\n        }\n        const formatOptions = {\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n        };\n        return new Intl.NumberFormat(navigator.language, formatOptions).format(\n            result\n        );\n    };\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                step=\"1\"\n                min=\"0\"\n                max=\"255\"\n                @input=${handleEvent}\n                @change=${handleEvent}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"black\"\n                    value=${values.black}\n                    .normalization=${blackNormalization}\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"gray\"\n                    value=\"0.215\"\n                    min=\"0\"\n                    max=\"1\"\n                    step=\"0.005\"\n                    .normalization=${grayNormalization}\n                    .getAriaHandleText=${computeGray}\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"white\"\n                    value=${values.white}\n                    .normalization=${whiteNormalization}\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesOrdered.args = {\n    tickStep: 10,\n};\n\nexport const focusTabDemo = (args: StoryArgs = {}): TemplateResult => {\n    const value = 50;\n    const min = 0;\n    const max = 100;\n    const step = 1;\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px 20px;\">\n            <sp-slider\n                value=\"${value}\"\n                step=\"${step}\"\n                min=\"${min}\"\n                max=\"${max}\"\n                label=\"Opacity\"\n                id=\"opacity-slider-opacity\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n        <div style=\"width: 500px; margin: 20px;\">\n            <sp-slider\n                value=\"${value}\"\n                step=\"${step}\"\n                min=\"${min}\"\n                max=\"${max}\"\n                label=\"Lightness\"\n                id=\"opacity-slider-lightness\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n        <div style=\"width: 500px; margin: 20px 20px 12px;\">\n            <sp-slider\n                value=\"${value}\"\n                step=\"${step}\"\n                min=\"${min}\"\n                max=\"${max}\"\n                label=\"Saturation\"\n                id=\"opacity-slider-saturation\"\n                ...=${spreadProps(args)}\n            ></sp-slider>\n        </div>\n    `;\n};\n"]}

package/test/slider.test.js

@@ -261,6 +261,65 @@ describe('Slider', () => {
         await elementUpdated(el);
         expect(el.value).to.equal(0);
     });
+    it('goes [disabled] while dragging', async () => {
+        const el = await fixture(html `
+                <sp-slider></sp-slider>
+            `);
+        await elementUpdated(el);
+        expect(el.value).to.equal(10);
+        const handle = el.shadowRoot.querySelector('.handle');
+        const handleBoundingRect = handle.getBoundingClientRect();
+        await sendMouse({
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        handleBoundingRect.x + handleBoundingRect.width / 2,
+                        handleBoundingRect.y + handleBoundingRect.height / 2,
+                    ],
+                },
+                {
+                    type: 'down',
+                },
+            ],
+        });
+        await elementUpdated(el);
+        expect(el.dragging, 'is dragging').to.be.true;
+        expect(el.highlight, 'not highlighted').to.be.false;
+        expect(el.value).to.equal(10);
+        const inputEvent = oneEvent(el, 'input');
+        await sendMouse({
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        handleBoundingRect.x +
+                            handleBoundingRect.width / 2 +
+                            100,
+                        handleBoundingRect.y + handleBoundingRect.height / 2,
+                    ],
+                },
+            ],
+        });
+        await inputEvent;
+        expect(el.value).to.equal(13);
+        el.disabled = true;
+        await elementUpdated(el);
+        expect(el.dragging, 'is dragging').to.be.false;
+        expect(el.highlight, 'not highlighted').to.be.false;
+        await sendMouse({
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        0,
+                        handleBoundingRect.top + handleBoundingRect.height / 2,
+                    ],
+                },
+            ],
+        });
+        expect(el.value).to.equal(13);
+    });
     it('accepts pointermove events in separate interactions', async () => {
         let pointerId = -1;
         const el = await fixture(html `