@spectrum-web-components/slider 0.41.1 → 0.41.2

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

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

package/stories/slider.stories.js

@@ -120,6 +120,25 @@ export const Filled = (args = {}) => {
         </div>
     `;
 };
+export const HasADefaultValue = (args = {}) => {
+  return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                max="1"
+                min="0"
+                value=".5"
+                step="0.01"
+                default-value="0.2"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
+            >
+                double click or press escape key to reset
+            </sp-slider>
+        </div>
+    `;
+};
 export const FillStart = (args = {}) => {
   return html`
         <div style="width: 500px; margin-inline: 20px;">
@@ -349,6 +368,33 @@ export const editable = (args = {}) => {
     `;
 };
 editable.decorators = [editableDecorator];
+export const editableWithDefaultValue = (args = {}) => {
+  return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                max="360"
+                min="0"
+                value="90"
+                step="1"
+                default-value="180"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{
+    style: "unit",
+    unit: "degree",
+    unitDisplay: "narrow"
+  }}
+                ...=${spreadProps(args)}
+            >
+                Angle
+            </sp-slider>
+        </div>
+    `;
+};
+editableWithDefaultValue.swc_vrt = {
+  skip: true
+};
 export const editableDisabled = (args = {}) => {
   return html`
         <div style="width: 500px; margin: 12px 20px;">

package/stories/slider.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["slider.stories.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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport {\n    Slider,\n    SliderHandle,\n    variants,\n} from '@spectrum-web-components/slider';\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-inline: 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 Filled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                variant=\"filled\"\n                min=\"0\"\n                value=\".7\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Slider Label\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const FillStart = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                fill-start\n                min=\"0\"\n                value=\".7\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Slider label\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const FillStartWithValue = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".7\"\n                step=\"0.1\"\n                fill-start=\"0.3\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Value Greater than Fill Start\n            </sp-slider>\n        </div>\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"20\"\n                min=\"0\"\n                value=\"5\"\n                step=\"1\"\n                fill-start=\"15\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'number' }}\n                ...=${spreadProps(args)}\n            >\n                Value Less than Fill Start\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const autofocus = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                autofocus\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 minimalDOM = (): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider>Opacity</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=\"0\"\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 max20 = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 200px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"20\"\n                min=\"0\"\n                value=\"5\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Max 20\n            </sp-slider>\n        </div>\n    `;\n};\nmax20.swc_vrt = {\n    skip: true,\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; --mod-stepper-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 editableWithoutVisibleLabels = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\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\neditableWithoutVisibleLabels.args = {\n    labelVisibility: 'none',\n};\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        <style>\n            sp-slider {\n                --mod-slider-track-color: linear-gradient(\n                    to right,\n                    red,\n                    green 100%\n                );\n            }\n            sp-slider[dir='rtl'] {\n                --mod-slider-track-color: linear-gradient(\n                    to left,\n                    red,\n                    green 100%\n                );\n            }\n        </style>\n        <div\n            style=\"\n                width: 500px;\n                margin: 12px 20px;\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        <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        <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 Quiet = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                hide-stepper\n                quiet\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 inPopover = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-popover open style=\"min-width: 0\">\n            <sp-dialog no-divider>\n                <sp-slider\n                    editable\n                    hide-stepper\n                    quiet\n                    value=\"5\"\n                    step=\"0.5\"\n                    min=\"0\"\n                    max=\"20\"\n                    label=\"Intensity\"\n                    ...=${spreadProps(args)}\n                ></sp-slider>\n            </sp-dialog>\n        </sp-popover>\n    `;\n};\n\nexport const Indeterminate = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                indeterminate\n                value=\"5\"\n                step=\"0.5\"\n                min=\"0\"\n                max=\"20\"\n                label=\"Intensity\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\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                    label=\"Minimum\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    label=\"Maximum\"\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                    label=\"Minimum\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    label=\"Maximum\"\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=${{ style: 'unit', unit: 'pc' }}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    value=\"5\"\n                    label=\"Low\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    value=\"133\"\n                    label=\"Mid\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    value=\"250\"\n                    label=\"High\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesPc.args = {\n    variant: 'range',\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                    label=\"Low\"\n                    value=\"5\"\n                    max=\"next\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"mid\"\n                    label=\"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                    label=\"High\"\n                    value=\"250\"\n                    min=\"previous\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesOrdered.args = {\n    variant: 'range',\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                    label=\"Black\"\n                    value=${values.black}\n                    .normalization=${blackNormalization}\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"gray\"\n                    label=\"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                    label=\"White\"\n                    value=${values.white}\n                    .normalization=${whiteNormalization}\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesComplex.args = {\n    variant: 'range',\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"],
-  "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 '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/slider/sp-slider-handle.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/dialog/sp-dialog.js';\nimport {\n    Slider,\n    SliderHandle,\n    variants,\n} from '@spectrum-web-components/slider';\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-inline: 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 Filled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                variant=\"filled\"\n                min=\"0\"\n                value=\".7\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Slider Label\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const HasADefaultValue = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                default-value=\"0.2\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                double click or press escape key to reset\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const FillStart = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                fill-start\n                min=\"0\"\n                value=\".7\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Slider label\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const FillStartWithValue = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".7\"\n                step=\"0.1\"\n                fill-start=\"0.3\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Value Greater than Fill Start\n            </sp-slider>\n        </div>\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"20\"\n                min=\"0\"\n                value=\"5\"\n                step=\"1\"\n                fill-start=\"15\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'number' }}\n                ...=${spreadProps(args)}\n            >\n                Value Less than Fill Start\n            </sp-slider>\n        </div>\n    `;\n};\n\nexport const autofocus = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                autofocus\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 minimalDOM = (): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider>Opacity</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=\"0\"\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 max20 = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 200px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"20\"\n                min=\"0\"\n                value=\"5\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Max 20\n            </sp-slider>\n        </div>\n    `;\n};\nmax20.swc_vrt = {\n    skip: true,\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 editableWithDefaultValue = (\n    args: StoryArgs = {}\n): 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                default-value=\"180\"\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\neditableWithDefaultValue.swc_vrt = {\n    skip: true,\n};\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; --mod-stepper-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 editableWithoutVisibleLabels = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\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\neditableWithoutVisibleLabels.args = {\n    labelVisibility: 'none',\n};\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        <style>\n            sp-slider {\n                --mod-slider-track-color: linear-gradient(\n                    to right,\n                    red,\n                    green 100%\n                );\n            }\n            sp-slider[dir='rtl'] {\n                --mod-slider-track-color: linear-gradient(\n                    to left,\n                    red,\n                    green 100%\n                );\n            }\n        </style>\n        <div\n            style=\"\n                width: 500px;\n                margin: 12px 20px;\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        <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        <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 Quiet = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                hide-stepper\n                quiet\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 inPopover = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <sp-popover open style=\"min-width: 0\">\n            <sp-dialog no-divider>\n                <sp-slider\n                    editable\n                    hide-stepper\n                    quiet\n                    value=\"5\"\n                    step=\"0.5\"\n                    min=\"0\"\n                    max=\"20\"\n                    label=\"Intensity\"\n                    ...=${spreadProps(args)}\n                ></sp-slider>\n            </sp-dialog>\n        </sp-popover>\n    `;\n};\n\nexport const Indeterminate = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                indeterminate\n                value=\"5\"\n                step=\"0.5\"\n                min=\"0\"\n                max=\"20\"\n                label=\"Intensity\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\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                    label=\"Minimum\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    label=\"Maximum\"\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                    label=\"Minimum\"\n                    value=\"5\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"max\"\n                    label=\"Maximum\"\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=${{ style: 'unit', unit: 'pc' }}\n                ...=${spreadProps(args)}\n            >\n                Output Levels\n                <sp-slider-handle\n                    slot=\"handle\"\n                    value=\"5\"\n                    label=\"Low\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    value=\"133\"\n                    label=\"Mid\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    value=\"250\"\n                    label=\"High\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesPc.args = {\n    variant: 'range',\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                    label=\"Low\"\n                    value=\"5\"\n                    max=\"next\"\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"mid\"\n                    label=\"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                    label=\"High\"\n                    value=\"250\"\n                    min=\"previous\"\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesOrdered.args = {\n    variant: 'range',\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                    label=\"Black\"\n                    value=${values.black}\n                    .normalization=${blackNormalization}\n                ></sp-slider-handle>\n                <sp-slider-handle\n                    slot=\"handle\"\n                    name=\"gray\"\n                    label=\"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                    label=\"White\"\n                    value=${values.white}\n                    .normalization=${whiteNormalization}\n                ></sp-slider-handle>\n            </sp-slider>\n        </div>\n    `;\n};\nThreeHandlesComplex.args = {\n    variant: 'range',\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"],
+  "mappings": "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",
   "names": ["handleEvent"]
 }

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, 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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",
+  "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\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\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": []
 }