@spectrum-web-components/slider 0.39.2 → 0.39.4

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-slider.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-medium);--spectrum-slider-control-height:var(--spectrum-component-height-100);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-medium\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-medium\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-small\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-small\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-100)}:host([size=l]){--spectrum-slider-font-size:var(--spectrum-font-size-100);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-large);--spectrum-slider-control-height:var(--spectrum-component-height-200);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=xl]){--spectrum-slider-font-size:var(--spectrum-font-size-200);--spectrum-slider-handle-size:var(\n--spectrum-slider-handle-size-extra-large\n);--spectrum-slider-control-height:var(--spectrum-component-height-300);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-extra-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-extra-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:22px}:host{--spectrum-slider-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-slider-min-size:var(--spectrum-spacing-900);--spectrum-slider-track-corner-radius:var(--spectrum-corner-radius-75);--spectrum-slider-label-margin-start:var(--spectrum-spacing-300);--spectrum-slider-handle-border-width:var(--spectrum-border-width-200);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-size)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);--spectrum-slider-track-fill-thickness:var(\n--spectrum-slider-track-thickness\n);--spectrum-slider-tick-mark-width:var(--spectrum-border-width-200);--spectrum-slider-tick-mark-border-radius:2px;--spectrum-slider-tick-handle-background-color:var(--spectrum-gray-100);--spectrum-slider-track-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-track-fill-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-handle-border-color-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-slider-label-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-slider-label-text-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-slider-tick-mark-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-ramp-handle-border-color-active:var(--spectrum-gray-100);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-range-track-reset:0}:host{display:block;min-inline-size:var(\n--mod-slider-min-size,var(--spectrum-slider-min-size)\n);position:relative;-webkit-user-select:none;user-select:none;z-index:1}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container,.spectrum-Slider--sideLabel #label-container+#track{margin-block-start:0}.spectrum-Slider--sideLabel #controls{margin-inline-end:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n)}.spectrum-Slider--sideLabel #value{inline-size:var(\n--mod-slider-value-inline-size,var(--spectrum-slider-value-inline-size)\n);margin-inline-start:var(\n--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline)\n);text-align:start}#controls{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);box-sizing:border-box;cursor:pointer;display:inline-block;inline-size:calc(100% - var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n)*2);margin-inline-start:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n);position:relative;vertical-align:top;z-index:auto}#label-container+#track{margin-block-start:calc(var(--spectrum-slider-control-to-field-label)*-1)}:host([tick-labels]){margin-block-end:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n)}#fill,.track{block-size:var(\n--mod-slider-track-fill-thickness,var(--spectrum-slider-track-fill-thickness)\n);box-sizing:border-box;inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-track-fill-thickness,\nvar(--spectrum-slider-track-fill-thickness)\n)/2);inset-inline:0 auto;margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-block:0;padding-inline-end:var(\n--mod-slider-handle-gap,var(--spectrum-slider-handle-gap)\n);padding-inline-start:0;pointer-events:none;position:absolute;z-index:1}#fill:before,.track:before{block-size:100%;border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;content:\"\";display:block}.track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track~.track{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-block:0;padding-inline-end:0;padding-inline-start:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n)}:host([variant=range]) .track~.track{inset-inline:auto;margin-inline:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-inline:var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n) var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n)}#fill{margin-inline-start:0;padding-block:0;padding-inline-end:0;padding-inline-start:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)))}.spectrum-Slider-fill--right{padding-block:0;padding-inline-end:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));padding-inline-start:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{inset-inline-end:auto;inset-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n);padding-inline-start:0}:host([variant=range]) .track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}:host([variant=range]) .track:last-of-type{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:0;padding-inline-start:var(--spectrum-slider-track-handleoffset)}:host([variant=range]) .track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}#ramp{block-size:var(\n--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-height)\n);inset-inline-end:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);inset-inline-start:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-block-start:calc(var(\n--mod-slider-ramp-track-height,\nvar(--spectrum-slider-ramp-track-height)\n)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:var(\n--mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)\n);border-style:solid;border-width:var(\n--mod-slider-handle-border-width,var(--spectrum-slider-handle-border-width)\n);box-sizing:border-box;display:inline-block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/2);inset-inline-start:0;margin-block:0;margin-inline:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/-2) 0;outline:none;position:absolute;transition:border-width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down)\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:100%;content:\" \";display:block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,inline-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,block-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}.handle.handle-highlight:before{block-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2);inline-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2)}.input{-webkit-appearance:none;block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border:0;cursor:default;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:var(\n--mod-slider-input-top-size,var(--spectrum-slider-input-top-size)\n);inset-inline-start:var(\n--mod-slider-input-left,var(--spectrum-slider-input-left)\n);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute}.input:focus{outline:none}#label-container{align-items:center;display:flex;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));inline-size:auto;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-start:var(\n--mod-slider-label-top-to-text,var(--spectrum-slider-label-top-to-text)\n);position:relative}#label-container:lang(ja),#label-container:lang(ko),#label-container:lang(zh){line-height:var(\n--mod-slider-cjk-line-height,var(--spectrum-slider-cjk-line-height)\n)}#label{flex-grow:1;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));padding-inline-start:0}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0;margin-inline-start:var(\n--mod-slider-label-margin-start,var(--spectrum-slider-label-margin-start)\n);padding-inline-end:0;text-align:end}:host([variant=tick]) .handle{background-color:var(\n--highcontrast-slider-tick-handle-background-color,var(\n--mod-slider-tick-handle-background-color,var(--spectrum-slider-tick-handle-background-color)\n)\n)}:host([variant=tick]) #controls{margin-block-start:calc(var(--spectrum-text-to-visual-75) - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2 - var(\n--mod-slider-track-thickness,\nvar(--spectrum-slider-track-thickness)\n)/2)}:host([variant=tick]) .tickLabel{margin-block-start:calc(var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n) + var(--spectrum-text-to-visual-75))}.ticks{display:flex;justify-content:space-between;margin-inline:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);z-index:0}.ticks~.spectrum-Slider-handleContainer .handle{background:var(\n--mod-slider-ticks-handle-background-color,var(--spectrum-slider-ticks-handle-background-color)\n)}.tick{inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2);position:relative}.tick:after{block-size:var(\n--mod-slider-tick-mark-height,var(--spectrum-slider-tick-mark-height)\n);border-radius:var(\n--mod-slider-tick-mark-border-radius,var(--spectrum-slider-tick-mark-border-radius)\n);content:\"\";display:block;inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/2);position:absolute}.tick .tickLabel{align-items:center;display:flex;font-size:var(--mod-font-size-75,var(--spectrum-font-size-75));justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-inline:0;position:absolute}.tick:first-of-type{inset-inline-start:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:first-of-type .tickLabel{inset-inline-start:0}.tick:last-of-type{inset-inline-end:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:last-of-type .tickLabel{inset-inline-end:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}:host([disabled]) .tickLabel{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{inline-size:calc(100% + var(--spectrum-slider-handle-size));inset-block-start:0;margin-inline-start:calc(var(--spectrum-slider-handle-size)/2*-1);position:absolute}.spectrum-Slider-trackContainer{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);overflow:hidden}.track:before{background:var(\n--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color))\n)}#label-container{color:var(\n--highcontrast-slider-label-text-color,var(\n--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)\n)\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#fill:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#ramp path{fill:var(\n--highcontrast-slider-ramp-track-color,var(\n--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)\n)\n)}.handle{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color,var(\n--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)\n)\n)}.handle:hover{border-color:var(\n--highcontrast-slider-handle-border-color-hover,var(\n--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)\n)\n)}.handle.handle-highlight{border-color:var(\n--highcontrast-slider-handle-border-color-key-focus,var(\n--mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)\n)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(--spectrum-focus-indicator-thickness) var(\n--highcontrast-slider-handle-focus-ring-color-key-focus,var(\n--mod-slider-handle-focus-ring-color-key-focus,var(--spectrum-slider-handle-focus-ring-color-key-focus)\n)\n)}.handle.dragging,.handle:active{border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=ramp]) .handle{background:var(\n--mod-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)\n);box-shadow:0 0 0 var(--spectrum-slider-handle-gap) var(\n--highcontrast-slider-ramp-handle-border-color-active,var(\n--mod-sectrum-slider-ramp-handle-border-color-active,var(--spectrum-slider-ramp-handle-border-color-active)\n)\n)}@media (forced-colors:active){:host([variant=ramp]) .handle{background-color:ButtonFace;border-color:ButtonText;box-shadow:0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;forced-color-adjust:none}}.input{background:none}.tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color,var(\n--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)\n)\n)}.handle.dragging{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}:host([disabled]) #label-container{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}:host([disabled]) .handle{background:var(\n--highcontrast-slider-handle-disabled-background-color,var(\n--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-disabled,var(\n--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)\n)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--highcontrast-slider-handle-background-color-disabled,var(\n--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))\n)}:host([disabled]) .track:before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #fill:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}@media (forced-colors:active){:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host([disabled]) #ramp path{fill:var(\n--highcontrast-slider-ramp-track-color-disabled,var(\n--mod-slider-ramp-track-color-disabled,var(--spectrum-slider-ramp-track-color-disabled)\n)\n)}:host([disabled]) .tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color-disabled,var(\n--mod-slider-tick-mark-color-disabled,var(--spectrum-slider-tick-mark-color-disabled)\n)\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(\n--system-spectrum-slider-track-fill-color\n);--spectrum-slider-ramp-track-color:var(\n--system-spectrum-slider-ramp-track-color\n);--spectrum-slider-ramp-track-color-disabled:var(\n--system-spectrum-slider-ramp-track-color-disabled\n);--spectrum-slider-handle-background-color:var(\n--system-spectrum-slider-handle-background-color\n);--spectrum-slider-handle-background-color-disabled:var(\n--system-spectrum-slider-handle-background-color-disabled\n);--spectrum-slider-ramp-handle-background-color:var(\n--system-spectrum-slider-ramp-handle-background-color\n);--spectrum-slider-ticks-handle-background-color:var(\n--system-spectrum-slider-ticks-handle-background-color\n);--spectrum-slider-handle-border-color:var(\n--system-spectrum-slider-handle-border-color\n);--spectrum-slider-handle-disabled-background-color:var(\n--system-spectrum-slider-handle-disabled-background-color\n);--spectrum-slider-tick-mark-color:var(\n--system-spectrum-slider-tick-mark-color\n);--spectrum-slider-handle-border-color-hover:var(\n--system-spectrum-slider-handle-border-color-hover\n);--spectrum-slider-handle-border-color-down:var(\n--system-spectrum-slider-handle-border-color-down\n);--spectrum-slider-handle-border-color-key-focus:var(\n--system-spectrum-slider-handle-border-color-key-focus\n);--spectrum-slider-handle-focus-ring-color-key-focus:var(\n--system-spectrum-slider-handle-focus-ring-color-key-focus\n)}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 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-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-medium);--spectrum-slider-control-height:var(--spectrum-component-height-100);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-medium\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-medium\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-small\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-small\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-100)}:host([size=l]){--spectrum-slider-font-size:var(--spectrum-font-size-100);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-large);--spectrum-slider-control-height:var(--spectrum-component-height-200);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=xl]){--spectrum-slider-font-size:var(--spectrum-font-size-200);--spectrum-slider-handle-size:var(\n--spectrum-slider-handle-size-extra-large\n);--spectrum-slider-control-height:var(--spectrum-component-height-300);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-extra-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-extra-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:22px}:host{--spectrum-slider-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-slider-min-size:var(--spectrum-spacing-900);--spectrum-slider-track-corner-radius:var(--spectrum-corner-radius-75);--spectrum-slider-label-margin-start:var(--spectrum-spacing-300);--spectrum-slider-handle-border-width:var(--spectrum-border-width-200);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-size)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);--spectrum-slider-track-fill-thickness:var(\n--spectrum-slider-track-thickness\n);--spectrum-slider-tick-mark-width:var(--spectrum-border-width-200);--spectrum-slider-tick-mark-border-radius:2px;--spectrum-slider-tick-handle-background-color:var(--spectrum-gray-100);--spectrum-slider-track-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-track-fill-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-handle-border-color-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-slider-label-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-slider-label-text-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-slider-tick-mark-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-ramp-handle-border-color-active:var(--spectrum-gray-100);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-range-track-reset:0}:host{display:block;min-inline-size:var(\n--mod-slider-min-size,var(--spectrum-slider-min-size)\n);position:relative;-webkit-user-select:none;user-select:none;z-index:1}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container,.spectrum-Slider--sideLabel #label-container+#track{margin-block-start:0}.spectrum-Slider--sideLabel #controls{margin-inline-end:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n)}.spectrum-Slider--sideLabel #value{inline-size:var(\n--mod-slider-value-inline-size,var(--spectrum-slider-value-inline-size)\n);margin-inline-start:var(\n--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline)\n);text-align:start}#controls{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);box-sizing:border-box;cursor:pointer;display:inline-block;inline-size:calc(100% - var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n)*2);margin-inline-start:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n);position:relative;vertical-align:top;z-index:auto}#label-container+#track{margin-block-start:calc(var(--spectrum-slider-control-to-field-label)*-1)}:host([tick-labels]){margin-block-end:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n)}#fill,.track{block-size:var(\n--mod-slider-track-fill-thickness,var(--spectrum-slider-track-fill-thickness)\n);box-sizing:border-box;inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-track-fill-thickness,\nvar(--spectrum-slider-track-fill-thickness)\n)/2);inset-inline:0 auto;margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-block:0;padding-inline-end:var(\n--mod-slider-handle-gap,var(--spectrum-slider-handle-gap)\n);padding-inline-start:0;pointer-events:none;position:absolute;z-index:1}#fill:before,.track:before{block-size:100%;border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;content:\"\";display:block}.track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track~.track{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-block:0;padding-inline-end:0;padding-inline-start:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n)}:host([variant=range]) .track~.track{inset-inline:auto;margin-inline:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-inline:var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n) var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n)}#fill{margin-inline-start:0;padding-block:0;padding-inline-end:0;padding-inline-start:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)))}.spectrum-Slider-fill--right{padding-block:0;padding-inline-end:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));padding-inline-start:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{inset-inline-end:auto;inset-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n);padding-inline-start:0}:host([variant=range]) .track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}:host([variant=range]) .track:last-of-type{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:0;padding-inline-start:var(--spectrum-slider-track-handleoffset)}:host([variant=range]) .track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}#ramp{block-size:var(\n--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-height)\n);inset-inline-end:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);inset-inline-start:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-block-start:calc(var(\n--mod-slider-ramp-track-height,\nvar(--spectrum-slider-ramp-track-height)\n)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:var(\n--mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)\n);border-style:solid;border-width:var(\n--mod-slider-handle-border-width,var(--spectrum-slider-handle-border-width)\n);box-sizing:border-box;display:inline-block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/2);inset-inline-start:0;margin-block:0;margin-inline:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/-2) 0;outline:none;position:absolute;transition:border-width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down)\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:100%;content:\" \";display:block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%);transition:box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,inline-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,block-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}.handle.handle-highlight:before{block-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2);inline-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2)}.input{-webkit-appearance:none;block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border:0;cursor:default;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:var(\n--mod-slider-input-top-size,var(--spectrum-slider-input-top-size)\n);inset-inline-start:var(\n--mod-slider-input-left,var(--spectrum-slider-input-left)\n);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute}.input:focus{outline:none}#label-container{align-items:center;display:flex;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));inline-size:auto;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-start:var(\n--mod-slider-label-top-to-text,var(--spectrum-slider-label-top-to-text)\n);position:relative}#label-container:lang(ja),#label-container:lang(ko),#label-container:lang(zh){line-height:var(\n--mod-slider-cjk-line-height,var(--spectrum-slider-cjk-line-height)\n)}#label{flex-grow:1;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));padding-inline-start:0}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0;margin-inline-start:var(\n--mod-slider-label-margin-start,var(--spectrum-slider-label-margin-start)\n);padding-inline-end:0;text-align:end}:host([variant=tick]) .handle{background-color:var(\n--highcontrast-slider-tick-handle-background-color,var(\n--mod-slider-tick-handle-background-color,var(--spectrum-slider-tick-handle-background-color)\n)\n)}:host([variant=tick]) #controls{margin-block-start:calc(var(--spectrum-text-to-visual-75) - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2 - var(\n--mod-slider-track-thickness,\nvar(--spectrum-slider-track-thickness)\n)/2)}:host([variant=tick]) .tickLabel{margin-block-start:calc(var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n) + var(--spectrum-text-to-visual-75))}.ticks{display:flex;justify-content:space-between;margin-inline:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);z-index:0}.ticks~.spectrum-Slider-handleContainer .handle{background:var(\n--mod-slider-ticks-handle-background-color,var(--spectrum-slider-ticks-handle-background-color)\n)}.tick{inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2);position:relative}.tick:after{block-size:var(\n--mod-slider-tick-mark-height,var(--spectrum-slider-tick-mark-height)\n);border-radius:var(\n--mod-slider-tick-mark-border-radius,var(--spectrum-slider-tick-mark-border-radius)\n);content:\"\";display:block;inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/2);position:absolute}.tick .tickLabel{align-items:center;display:flex;font-size:var(--mod-font-size-75,var(--spectrum-font-size-75));justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-inline:0;position:absolute}.tick:first-of-type{inset-inline-start:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:first-of-type .tickLabel{inset-inline-start:0}.tick:last-of-type{inset-inline-end:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:last-of-type .tickLabel{inset-inline-end:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}:host([disabled]) .tickLabel{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{inline-size:calc(100% + var(--spectrum-slider-handle-size));inset-block-start:0;margin-inline-start:calc(var(--spectrum-slider-handle-size)/2*-1);position:absolute}.spectrum-Slider-trackContainer{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);overflow:hidden}.track:before{background:var(\n--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color))\n)}#label-container{color:var(\n--highcontrast-slider-label-text-color,var(\n--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)\n)\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#fill:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#ramp path{fill:var(\n--highcontrast-slider-ramp-track-color,var(\n--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)\n)\n)}.handle{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color,var(\n--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)\n)\n)}.handle:hover{border-color:var(\n--highcontrast-slider-handle-border-color-hover,var(\n--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)\n)\n)}.handle.handle-highlight{border-color:var(\n--highcontrast-slider-handle-border-color-key-focus,var(\n--mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)\n)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(--spectrum-focus-indicator-thickness) var(\n--highcontrast-slider-handle-focus-ring-color-key-focus,var(\n--mod-slider-handle-focus-ring-color-key-focus,var(--spectrum-slider-handle-focus-ring-color-key-focus)\n)\n)}.handle.dragging,.handle:active{border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=ramp]) .handle{background:var(\n--mod-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)\n);box-shadow:0 0 0 var(--spectrum-slider-handle-gap) var(\n--highcontrast-slider-ramp-handle-border-color-active,var(\n--mod-sectrum-slider-ramp-handle-border-color-active,var(--spectrum-slider-ramp-handle-border-color-active)\n)\n)}@media (forced-colors:active){:host([variant=ramp]) .handle{background-color:ButtonFace;border-color:ButtonText;box-shadow:0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;forced-color-adjust:none}}.input{background:none}.tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color,var(\n--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)\n)\n)}.handle.dragging{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}:host([disabled]) #label-container{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}:host([disabled]) .handle{background:var(\n--highcontrast-slider-handle-disabled-background-color,var(\n--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-disabled,var(\n--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)\n)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--highcontrast-slider-handle-background-color-disabled,var(\n--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))\n)}:host([disabled]) .track:before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #fill:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #ramp path{fill:var(\n--highcontrast-slider-ramp-track-color-disabled,var(\n--mod-slider-ramp-track-color-disabled,var(--spectrum-slider-ramp-track-color-disabled)\n)\n)}:host([disabled]) .tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color-disabled,var(\n--mod-slider-tick-mark-color-disabled,var(--spectrum-slider-tick-mark-color-disabled)\n)\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(\n--system-spectrum-slider-track-fill-color\n);--spectrum-slider-ramp-track-color:var(\n--system-spectrum-slider-ramp-track-color\n);--spectrum-slider-ramp-track-color-disabled:var(\n--system-spectrum-slider-ramp-track-color-disabled\n);--spectrum-slider-handle-background-color:var(\n--system-spectrum-slider-handle-background-color\n);--spectrum-slider-handle-background-color-disabled:var(\n--system-spectrum-slider-handle-background-color-disabled\n);--spectrum-slider-ramp-handle-background-color:var(\n--system-spectrum-slider-ramp-handle-background-color\n);--spectrum-slider-ticks-handle-background-color:var(\n--system-spectrum-slider-ticks-handle-background-color\n);--spectrum-slider-handle-border-color:var(\n--system-spectrum-slider-handle-border-color\n);--spectrum-slider-handle-disabled-background-color:var(\n--system-spectrum-slider-handle-disabled-background-color\n);--spectrum-slider-tick-mark-color:var(\n--system-spectrum-slider-tick-mark-color\n);--spectrum-slider-handle-border-color-hover:var(\n--system-spectrum-slider-handle-border-color-hover\n);--spectrum-slider-handle-border-color-down:var(\n--system-spectrum-slider-handle-border-color-down\n);--spectrum-slider-handle-border-color-key-focus:var(\n--system-spectrum-slider-handle-border-color-key-focus\n);--spectrum-slider-handle-focus-ring-color-key-focus:var(\n--system-spectrum-slider-handle-focus-ring-color-key-focus\n)}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiVf,eAAeC",
   "names": ["css", "styles"]
 }

package/test/index.js

@@ -4,10 +4,15 @@ import {
   hideStepper,
   Indeterminate
 } from "../stories/slider.stories.js";
-import { elementUpdated, expect, fixture } from "@open-wc/testing";
+import { elementUpdated, expect, nextFrame } from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
 import { sendKeys } from "@web/test-runner-commands";
 import { spy } from "sinon";
-import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import {
+  fixture,
+  testForLitDevWarnings
+} from "../../../test/testing-helpers.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
 async function sliderFromFixture(sliderFixture) {
   const el = await fixture(sliderFixture({}));
   const slider = el.querySelector("sp-slider");
@@ -62,6 +67,82 @@ export const testEditableSlider = (type) => {
       await elementUpdated(el);
       expect(el.shadowRoot.activeElement).to.equal(el.numberField);
     });
+    it("dispatches `input` of the animation frame", async () => {
+      const inputSpy = spy();
+      const changeSpy = spy();
+      const el = await fixture(
+        html`
+                    <sp-slider
+                        editable
+                        hide-stepper
+                        min="1"
+                        max="100"
+                        step="1"
+                        label="Slider label"
+                        @input=${(event) => {
+          inputSpy(event.target.value);
+        }}
+                        @change=${(event) => {
+          changeSpy(event.target.value);
+        }}
+                    ></sp-slider>
+                `
+      );
+      await elementUpdated(el);
+      expect(el.value).to.equal(50.5);
+      expect(inputSpy.callCount, "start clean").to.equal(0);
+      expect(changeSpy.callCount, "start clean").to.equal(0);
+      const handle = el.shadowRoot.querySelector(
+        ".handle"
+      );
+      const rect = handle.getBoundingClientRect();
+      let frames = 0;
+      let shouldCountFrames = true;
+      const countFrames = () => {
+        if (!shouldCountFrames)
+          return;
+        frames += 1;
+        requestAnimationFrame(countFrames);
+      };
+      countFrames();
+      const toRight = [...Array(51).keys()].map((i) => ({
+        type: "move",
+        position: [
+          rect.left + rect.width / 2 + i,
+          rect.top + rect.height / 2
+        ]
+      }));
+      const toLeft = toRight.slice(0, -1).reverse();
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              rect.left + rect.width / 2,
+              rect.top + rect.height / 2
+            ]
+          },
+          {
+            type: "down"
+          },
+          ...toRight,
+          ...toLeft,
+          {
+            type: "up"
+          }
+        ]
+      });
+      shouldCountFrames = false;
+      await elementUpdated(el);
+      await nextFrame();
+      await nextFrame();
+      expect(el.value).to.gt(50.5);
+      expect(
+        inputSpy.callCount,
+        'should not have more "input"s than frames'
+      ).to.lte(frames);
+      expect(changeSpy.callCount, "only one change").to.equal(1);
+    });
     it("edits via the `<sp-number-field>`", async () => {
       var _a, _b, _c, _d;
       const inputSpy = spy();

package/test/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["index.ts"],
-  "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*/\n\nimport { Slider } from '@spectrum-web-components/slider';\nimport {\n    editable,\n    hideStepper,\n    Indeterminate,\n    StoryArgs,\n} from '../stories/slider.stories.js';\nimport { elementUpdated, expect, fixture } from '@open-wc/testing';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nasync function sliderFromFixture(\n    sliderFixture: (args: StoryArgs) => TemplateResult\n): Promise<Slider> {\n    const el = await fixture<Slider>(sliderFixture({}));\n    const slider = el.querySelector('sp-slider') as Slider;\n    return slider;\n}\n\nexport const testEditableSlider = (type: string): void => {\n    describe(`Slider - editable, ${type}`, () => {\n        testForLitDevWarnings(async () => await sliderFromFixture(editable));\n        it('loads', async () => {\n            const el = await sliderFromFixture(editable);\n\n            await elementUpdated(el);\n\n            await expect(el).to.be.accessible();\n        });\n\n        it('loads - [hide-stepper]', async () => {\n            const el = await sliderFromFixture(hideStepper);\n\n            await elementUpdated(el);\n\n            await expect(el).to.be.accessible();\n        });\n\n        it('loads - [disabled]', async () => {\n            const el = document.createElement('sp-slider');\n            el.editable = true;\n            el.disabled = true;\n            el.label = 'Disabled, editable, slider';\n\n            try {\n                document.body.append(el);\n            } catch (error) {\n                expect(true).to.be.false;\n            }\n\n            await elementUpdated(el);\n\n            await expect(el).to.be.accessible();\n            el.remove();\n        });\n\n        it('toggles indeterminate when edited via the `<sp-number-field>`', async () => {\n            const el = await sliderFromFixture(Indeterminate);\n\n            await elementUpdated(el);\n\n            expect(el.value).to.equal(5);\n            expect(el.indeterminate).to.be.true;\n\n            el.focus();\n\n            await elementUpdated(el);\n\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ type: '15' });\n            await sendKeys({ press: 'Enter' });\n\n            await elementUpdated(el);\n\n            expect(el.value).to.equal(15);\n            expect(el.indeterminate).to.be.false;\n        });\n\n        it('focuses `<sp-number-field>` directly', async () => {\n            const el = await sliderFromFixture(editable);\n\n            await elementUpdated(el);\n\n            el.focus();\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n        });\n\n        it('edits via the `<sp-number-field>`', async () => {\n            const inputSpy = spy();\n            const changeSpy = spy();\n            const el = await sliderFromFixture(editable);\n            el.addEventListener('input', () => inputSpy());\n            el.addEventListener('change', () => changeSpy());\n\n            await elementUpdated(el);\n\n            el.focus();\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(90);\n\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ type: '45' });\n            await sendKeys({ press: 'Enter' });\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'one input').to.equal(1);\n            expect(changeSpy.callCount, 'one change').to.equal(1);\n\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Enter' });\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'still one input').to.equal(1);\n            expect(changeSpy.callCount, 'still one change').to.equal(1);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaY: 1 })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(46);\n            expect(inputSpy.callCount, 'still one input').to.equal(2);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaY: -1 })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'still one input').to.equal(3);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaX: 1, shiftKey: true })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(55);\n            expect(inputSpy.callCount, 'still one input').to.equal(4);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaX: -1, shiftKey: true })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'still one input').to.equal(5);\n        });\n\n        it('focuses `<input>` after pointer interactions', async () => {\n            let pointerId = -1;\n            const el = await sliderFromFixture(editable);\n\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(el.highlight).to.be.false;\n            expect(pointerId).to.equal(-1);\n\n            const handle = el.shadowRoot.querySelector(\n                '.handle'\n            ) as HTMLDivElement;\n            el.track.setPointerCapture = (id: number) => (pointerId = id);\n            el.track.releasePointerCapture = (id: number) => (pointerId = id);\n            handle.dispatchEvent(\n                new PointerEvent('pointerdown', {\n                    button: 1,\n                    pointerId: 1,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(pointerId, '1').to.equal(-1);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointerdown', {\n                    button: 0,\n                    pointerId: 1,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging, 'it is dragging 1').to.be.true;\n            expect(pointerId, '2').to.equal(1);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointerup', {\n                    pointerId: 2,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(el.highlight).to.be.false;\n            expect(pointerId, '3').to.equal(2);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointerdown', {\n                    button: 0,\n                    pointerId: 1,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging, 'it is dragging 2').to.be.true;\n            expect(pointerId, '4').to.equal(1);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointercancel', {\n                    pointerId: 3,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(pointerId, '5').to.equal(3);\n            expect(el.shadowRoot.activeElement).to.equal(\n                el.handleController.inputForHandle(el)\n            );\n        });\n    });\n};\n"],
-  "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*/\n\nimport { Slider } from '@spectrum-web-components/slider';\nimport {\n    editable,\n    hideStepper,\n    Indeterminate,\n    StoryArgs,\n} from '../stories/slider.stories.js';\nimport { elementUpdated, expect, nextFrame } from '@open-wc/testing';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\nimport {\n    fixture,\n    testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nasync function sliderFromFixture(\n    sliderFixture: (args: StoryArgs) => TemplateResult\n): Promise<Slider> {\n    const el = await fixture<Slider>(sliderFixture({}));\n    const slider = el.querySelector('sp-slider') as Slider;\n    return slider;\n}\n\nexport const testEditableSlider = (type: string): void => {\n    describe(`Slider - editable, ${type}`, () => {\n        testForLitDevWarnings(async () => await sliderFromFixture(editable));\n        it('loads', async () => {\n            const el = await sliderFromFixture(editable);\n\n            await elementUpdated(el);\n\n            await expect(el).to.be.accessible();\n        });\n\n        it('loads - [hide-stepper]', async () => {\n            const el = await sliderFromFixture(hideStepper);\n\n            await elementUpdated(el);\n\n            await expect(el).to.be.accessible();\n        });\n\n        it('loads - [disabled]', async () => {\n            const el = document.createElement('sp-slider');\n            el.editable = true;\n            el.disabled = true;\n            el.label = 'Disabled, editable, slider';\n\n            try {\n                document.body.append(el);\n            } catch (error) {\n                expect(true).to.be.false;\n            }\n\n            await elementUpdated(el);\n\n            await expect(el).to.be.accessible();\n            el.remove();\n        });\n\n        it('toggles indeterminate when edited via the `<sp-number-field>`', async () => {\n            const el = await sliderFromFixture(Indeterminate);\n\n            await elementUpdated(el);\n\n            expect(el.value).to.equal(5);\n            expect(el.indeterminate).to.be.true;\n\n            el.focus();\n\n            await elementUpdated(el);\n\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ type: '15' });\n            await sendKeys({ press: 'Enter' });\n\n            await elementUpdated(el);\n\n            expect(el.value).to.equal(15);\n            expect(el.indeterminate).to.be.false;\n        });\n\n        it('focuses `<sp-number-field>` directly', async () => {\n            const el = await sliderFromFixture(editable);\n\n            await elementUpdated(el);\n\n            el.focus();\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n        });\n\n        it('dispatches `input` of the animation frame', async () => {\n            const inputSpy = spy();\n            const changeSpy = spy();\n            const el = await fixture<Slider>(\n                html`\n                    <sp-slider\n                        editable\n                        hide-stepper\n                        min=\"1\"\n                        max=\"100\"\n                        step=\"1\"\n                        label=\"Slider label\"\n                        @input=${(event: Event & { target: Slider }) => {\n                            inputSpy(event.target.value);\n                        }}\n                        @change=${(event: Event & { target: Slider }) => {\n                            changeSpy(event.target.value);\n                        }}\n                    ></sp-slider>\n                `\n            );\n            await elementUpdated(el);\n            expect(el.value).to.equal(50.5);\n\n            expect(inputSpy.callCount, 'start clean').to.equal(0);\n            expect(changeSpy.callCount, 'start clean').to.equal(0);\n\n            const handle = el.shadowRoot.querySelector(\n                '.handle'\n            ) as HTMLDivElement;\n            const rect = handle.getBoundingClientRect();\n            let frames = 0;\n            let shouldCountFrames = true;\n            const countFrames = (): void => {\n                if (!shouldCountFrames) return;\n                frames += 1;\n                requestAnimationFrame(countFrames);\n            };\n            countFrames();\n            type Steps = {\n                type: 'move';\n                position: [number, number];\n            }[];\n            const toRight: Steps = [...Array(51).keys()].map((i) => ({\n                type: 'move',\n                position: [\n                    rect.left + rect.width / 2 + i,\n                    rect.top + rect.height / 2,\n                ],\n            }));\n            const toLeft: Steps = toRight.slice(0, -1).reverse();\n            await sendMouse({\n                steps: [\n                    {\n                        type: 'move',\n                        position: [\n                            rect.left + rect.width / 2,\n                            rect.top + rect.height / 2,\n                        ],\n                    },\n                    {\n                        type: 'down',\n                    },\n                    ...toRight,\n                    ...toLeft,\n                    {\n                        type: 'up',\n                    },\n                ],\n            });\n            shouldCountFrames = false;\n            await elementUpdated(el);\n            await nextFrame();\n            await nextFrame();\n\n            expect(el.value).to.gt(50.5);\n            expect(\n                inputSpy.callCount,\n                'should not have more \"input\"s than frames'\n            ).to.lte(frames);\n            expect(changeSpy.callCount, 'only one change').to.equal(1);\n        });\n\n        it('edits via the `<sp-number-field>`', async () => {\n            const inputSpy = spy();\n            const changeSpy = spy();\n            const el = await sliderFromFixture(editable);\n            el.addEventListener('input', () => inputSpy());\n            el.addEventListener('change', () => changeSpy());\n\n            await elementUpdated(el);\n\n            el.focus();\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(90);\n\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ type: '45' });\n            await sendKeys({ press: 'Enter' });\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'one input').to.equal(1);\n            expect(changeSpy.callCount, 'one change').to.equal(1);\n\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Backspace' });\n            await sendKeys({ press: 'Enter' });\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'still one input').to.equal(1);\n            expect(changeSpy.callCount, 'still one change').to.equal(1);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaY: 1 })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(46);\n            expect(inputSpy.callCount, 'still one input').to.equal(2);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaY: -1 })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'still one input').to.equal(3);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaX: 1, shiftKey: true })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(55);\n            expect(inputSpy.callCount, 'still one input').to.equal(4);\n\n            el.shadowRoot.activeElement?.dispatchEvent(\n                new WheelEvent('wheel', { deltaX: -1, shiftKey: true })\n            );\n\n            await elementUpdated(el);\n\n            expect(el.shadowRoot.activeElement).to.equal(el.numberField);\n            expect(el.value).to.equal(45);\n            expect(inputSpy.callCount, 'still one input').to.equal(5);\n        });\n\n        it('focuses `<input>` after pointer interactions', async () => {\n            let pointerId = -1;\n            const el = await sliderFromFixture(editable);\n\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(el.highlight).to.be.false;\n            expect(pointerId).to.equal(-1);\n\n            const handle = el.shadowRoot.querySelector(\n                '.handle'\n            ) as HTMLDivElement;\n            el.track.setPointerCapture = (id: number) => (pointerId = id);\n            el.track.releasePointerCapture = (id: number) => (pointerId = id);\n            handle.dispatchEvent(\n                new PointerEvent('pointerdown', {\n                    button: 1,\n                    pointerId: 1,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(pointerId, '1').to.equal(-1);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointerdown', {\n                    button: 0,\n                    pointerId: 1,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging, 'it is dragging 1').to.be.true;\n            expect(pointerId, '2').to.equal(1);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointerup', {\n                    pointerId: 2,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(el.highlight).to.be.false;\n            expect(pointerId, '3').to.equal(2);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointerdown', {\n                    button: 0,\n                    pointerId: 1,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging, 'it is dragging 2').to.be.true;\n            expect(pointerId, '4').to.equal(1);\n\n            handle.dispatchEvent(\n                new PointerEvent('pointercancel', {\n                    pointerId: 3,\n                    cancelable: true,\n                    bubbles: true,\n                    composed: true,\n                    pointerType: 'mouse',\n                })\n            );\n            await elementUpdated(el);\n\n            expect(el.dragging).to.be.false;\n            expect(pointerId, '5').to.equal(3);\n            expect(el.shadowRoot.activeElement).to.equal(\n                el.handleController.inputForHandle(el)\n            );\n        });\n    });\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/test/slider.test.js

@@ -317,16 +317,24 @@ describe("Slider", () => {
   });
   it("dispatches `input` of the animation frame", async () => {
     const inputSpy = spy();
+    const changeSpy = spy();
     const el = await fixture(
       html`
                 <sp-slider
                     value="50"
                     style="width: 100px"
-                    @input=${({ target }) => inputSpy(target.value)}
+                    @input=${(event) => {
+        inputSpy(event.target.value);
+      }}
+                    @change=${(event) => {
+        changeSpy(event.target.value);
+      }}
                 ></sp-slider>
             `
     );
     await elementUpdated(el);
+    expect(inputSpy.callCount, "start clean").to.equal(0);
+    expect(changeSpy.callCount, "start clean").to.equal(0);
     let frames = 0;
     let shouldCountFrames = true;
     const countFrames = () => {
@@ -362,6 +370,7 @@ describe("Slider", () => {
       inputSpy.callCount,
       'should not have more "input"s than frames'
     ).to.lte(frames);
+    expect(changeSpy.callCount, "only one change").to.equal(1);
   });
   it("manages RTL when min != 0", async () => {
     const el = await fixture(
@@ -812,13 +821,18 @@ describe("Slider", () => {
   it("supports units not included in Intl.NumberFormatOptions", async () => {
     let el = await fixture(
       html`
-                <sp-slider value="50" min="0" max="100" format-options="{"style": "unit", "unit": "px"}"></sp-slider>
+                <sp-slider
+                    value="50"
+                    min="0"
+                    max="100"
+                    format-options='{"style": "unit", "unit": "px"}'
+                ></sp-slider>
             `
     );
     await elementUpdated(el);
     const input = el.focusElement;
     await elementUpdated(el);
-    expect(input.getAttribute("aria-valuetext")).to.equal("50");
+    expect(input.getAttribute("aria-valuetext")).to.equal("50px");
     el = await fixture(
       html`
                 <sp-slider