@spectrum-web-components/slider 1.0.0 → 1.0.1

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-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--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-track-handleoffset) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);z-index:0;min-inline-size:var(--mod-slider-min-size,var(--spectrum-slider-min-size));-webkit-user-select:none;user-select:none;display:block;position:relative}:host:dir(rtl),:host([dir=rtl]){--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host:not(.spectrum-Slider--sideLabel) #label-container+#track:has(.spectrum-Slider-ramp){margin-block-start:calc(var(--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-block-size))/2)}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container{margin-block-start:0}.spectrum-Slider--sideLabel #label-container #label{margin-inline-end:var(--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline))}.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}#controls:not(:has(.spectrum-Slider-ticks)){align-items:center;display:flex}#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))}: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))}.fill,.track{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}.fill:before,.track:before{content:\"\";block-size:100%;border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0;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:before{background:var(--highcontrast-slider-track-color-static,var(--mod-slider-track-color,var(--spectrum-slider-track-color)))}.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}: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))}: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)))}.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}.fill:before{background:var(--highcontrast-slider-filled-track-fill-color,var(--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)))}.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)))}#ramp{block-size:var(--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-block-size));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{inline-size:100%;block-size:100%;transform:var(--spectrum-logical-rotation,)}#ramp path{fill:var(--highcontrast-slider-ramp-track-color,var(--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)))}.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;background:var(--highcontrast-slider-handle-background-color,var(--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)));border-style:solid;border-color:var(--highcontrast-slider-handle-border-color,var(--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)));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.dragging,.handle:active{border-width:var(--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down));border-color:var(--highcontrast-slider-handle-border-color-down,var(--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)))}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{content:\"\";inline-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));block-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));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;border-radius:100%;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}:host:dir(rtl) .handle:before,:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.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{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);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.dragging{background:var(--highcontrast-slider-handle-background-color,var(--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)));border-color:var(--highcontrast-slider-handle-border-color-down,var(--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)))}.input{pointer-events:none;cursor:default;inline-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));block-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));appearance:none;opacity:.000001;background:0 0;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{inline-size:auto;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));color:var(--highcontrast-slider-label-text-color,var(--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)));align-items:center;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(ko),#label-container:lang(zh){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}.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{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,.tick:after{inline-size:var(--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width))}.tick:after{content:\"\";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));background-color:var(--highcontrast-slider-tick-mark-color,var(--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)));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));color:var(--highcontrast-slider-label-text-color,var(--mod-slider-tick-label-color,var(--spectrum-slider-tick-label-color)));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:not(:has(~.spectrum-Slider-fill)):before{background:var(--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color)))}:host([variant=filled]) .track:first-child:before{background:var(--highcontrast-slider-filled-track-fill-color,var(--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)))}:host([variant=ramp]) .handle{background:var(--mod-slider-ramp-handle-background-color,var(--highcontrast-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)));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)))}:host([disabled]),:host([disabled]) #controls{cursor:default}:host([disabled]) #label-container,:host([disabled]) .tickLabel{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{pointer-events:none;cursor:default;background:var(--highcontrast-slider-handle-disabled-background-color,var(--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)));border-color:var(--highcontrast-slider-handle-border-color-disabled,var(--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)))}:host([disabled]) .handle:active{background:var(--highcontrast-slider-handle-background-color-disabled,var(--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)));border-color:var(--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)))}@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{background:var(--highcontrast-slider-handle-background-color-disabled,var(--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)));border-color:var(--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)))}}: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]) .fill:before,:host([disabled][variant=filled]) .track:first-child: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-disabled:GrayText;--highcontrast-slider-track-color-static:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-track-fill-color-disabled:GrayText;--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-tick-mark-color-disabled:GrayText;--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-border-color-disabled:GrayText;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-handle-background-color-disabled:GrayText;--highcontrast-slider-handle-disabled-background-color:GrayText;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--highcontrast-slider-label-text-color:CanvasText;--highcontrast-slider-label-text-color-disabled:GrayText}.handle.handle-highlight:before,:host([variant=ramp]) .handle{forced-color-adjust:none}:host([focus-within]) .js-focus-within:not(.is-disabled,.spectrum-Slider--filled,.spectrum-Slider--range) #controls,: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,:host([focus-within]):not(.is-disabled,.spectrum-Slider--filled,.spectrum-Slider--range).js-focus-within #controls{--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{background-color:ButtonFace;fill:ButtonFace}}\n`;\nexport default styles;"],
+  "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-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--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-track-handleoffset) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);z-index:0;min-inline-size:var(--mod-slider-min-size,var(--spectrum-slider-min-size));-webkit-user-select:none;user-select:none;display:block;position:relative}:host:dir(rtl),:host([dir=rtl]){--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host:not(.spectrum-Slider--sideLabel) #label-container+#track:has(.spectrum-Slider-ramp){margin-block-start:calc(var(--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-block-size))/2)}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container{margin-block-start:0}.spectrum-Slider--sideLabel #label-container #label{margin-inline-end:var(--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline))}.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}#controls:not(:has(.ticks)){align-items:center;display:flex}#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))}: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))}.fill,.track{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}.fill:before,.track:before{content:\"\";block-size:100%;border-start-start-radius:0;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0;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:before{background:var(--highcontrast-slider-track-color-static,var(--mod-slider-track-color,var(--spectrum-slider-track-color)))}.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}: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))}: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)))}.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}.fill:before{background:var(--highcontrast-slider-filled-track-fill-color,var(--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)))}.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)))}#ramp{block-size:var(--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-block-size));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{inline-size:100%;block-size:100%;transform:var(--spectrum-logical-rotation,)}#ramp path{fill:var(--highcontrast-slider-ramp-track-color,var(--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)))}.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;background:var(--highcontrast-slider-handle-background-color,var(--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)));border-style:solid;border-color:var(--highcontrast-slider-handle-border-color,var(--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)));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.dragging,.handle:active{border-width:var(--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down));border-color:var(--highcontrast-slider-handle-border-color-down,var(--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)))}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{content:\"\";inline-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));block-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));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;border-radius:100%;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}:host:dir(rtl) .handle:before,:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.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{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);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.dragging{background:var(--highcontrast-slider-handle-background-color,var(--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)));border-color:var(--highcontrast-slider-handle-border-color-down,var(--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)))}.input{pointer-events:none;cursor:default;inline-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));block-size:var(--mod-slider-handle-size,var(--spectrum-slider-handle-size));appearance:none;opacity:.000001;background:0 0;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{inline-size:auto;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));color:var(--highcontrast-slider-label-text-color,var(--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)));align-items:center;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(ko),#label-container:lang(zh){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}.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{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,.tick:after{inline-size:var(--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width))}.tick:after{content:\"\";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));background-color:var(--highcontrast-slider-tick-mark-color,var(--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)));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));color:var(--highcontrast-slider-label-text-color,var(--mod-slider-tick-label-color,var(--spectrum-slider-tick-label-color)));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:not(:has(~.spectrum-Slider-fill)):before{background:var(--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color)))}:host([variant=filled]) .track:first-child:before{background:var(--highcontrast-slider-filled-track-fill-color,var(--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)))}:host([variant=ramp]) .handle{background:var(--mod-slider-ramp-handle-background-color,var(--highcontrast-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)));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)))}:host([disabled]),:host([disabled]) #controls{cursor:default}:host([disabled]) #label-container,:host([disabled]) .tickLabel{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{pointer-events:none;cursor:default;background:var(--highcontrast-slider-handle-disabled-background-color,var(--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)));border-color:var(--highcontrast-slider-handle-border-color-disabled,var(--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)))}:host([disabled]) .handle:active{background:var(--highcontrast-slider-handle-background-color-disabled,var(--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)));border-color:var(--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)))}@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{background:var(--highcontrast-slider-handle-background-color-disabled,var(--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)));border-color:var(--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)))}}: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]) .fill:before,:host([disabled][variant=filled]) .track:first-child: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-disabled:GrayText;--highcontrast-slider-track-color-static:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-track-fill-color-disabled:GrayText;--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-tick-mark-color-disabled:GrayText;--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-border-color-disabled:GrayText;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-handle-background-color-disabled:GrayText;--highcontrast-slider-handle-disabled-background-color:GrayText;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--highcontrast-slider-label-text-color:CanvasText;--highcontrast-slider-label-text-color-disabled:GrayText}.handle.handle-highlight:before,:host([variant=ramp]) .handle{forced-color-adjust:none}:host([focus-within]) .js-focus-within:not(.is-disabled,.spectrum-Slider--filled,.spectrum-Slider--range) #controls,: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,:host([focus-within]):not(.is-disabled,.spectrum-Slider--filled,.spectrum-Slider--range).js-focus-within #controls{--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{background-color:ButtonFace;fill:ButtonFace}}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/slider.stories.js

@@ -52,7 +52,11 @@ export default {
   args: {
     variant: void 0,
     tickStep: 0.1,
-    labelVisibility: void 0
+    labelVisibility: void 0,
+    min: void 0,
+    max: void 0,
+    value: void 0,
+    step: void 0
   }
 };
 const handleEvent = ({ onInput, onChange }) => (event) => {
@@ -415,6 +419,70 @@ export const editable = (args = {}) => {
     `;
 };
 editable.decorators = [editableDecorator];
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/tray/sp-tray.js";
+export const Multiple = (args) => {
+  const updateSliderConfig = (min, max, value, step) => {
+    const slider = document.querySelector("sp-slider");
+    if (slider) {
+      slider.value = value;
+      slider.min = min;
+      slider.max = max;
+      slider.step = step;
+    }
+  };
+  return html`
+        <overlay-trigger type="modal">
+            <sp-button slot="trigger" variant="secondary">
+                Toggle menu
+            </sp-button>
+            <sp-tray slot="click-content">
+                <div style="padding: 8px; width: 100%">
+                    <sp-slider
+                        label="Slider Label"
+                        min=${args.min}
+                        max=${args.max}
+                        value=${args.value}
+                        step=${args.step}
+                        variant="filled"
+                        hide-stepper
+                        editable
+                    ></sp-slider>
+                    <div
+                        style="display: grid; gap: 8px; padding: 8px; width: 50%; margin: auto;"
+                    >
+                        <sp-button
+                            size="s"
+                            @click=${() => updateSliderConfig(0.25, 4, 0.75, 0.01)}
+                        >
+                            Duration
+                        </sp-button>
+                        <sp-button
+                            size="s"
+                            @click=${() => updateSliderConfig(2, 100, 2, 1)}
+                        >
+                            Personality
+                        </sp-button>
+                        <sp-button
+                            size="s"
+                            @click=${() => updateSliderConfig(2, 25, 3, 1)}
+                        >
+                            Intensity
+                        </sp-button>
+                    </div>
+                </div>
+            </sp-tray>
+        </overlay-trigger>
+    `;
+};
+Multiple.args = {
+  min: 0.25,
+  max: 4,
+  value: 0.75,
+  step: 0.01
+};
 export const editableWithDefaultValue = (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 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                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 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                variant=\"filled\"\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 FillStartWithNegativeMinRange = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"150\"\n                min=\"-50\"\n                value=\"25\"\n                step=\"1\"\n                fill-start=\"0\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'number' }}\n                ...=${spreadProps(args)}\n            >\n                Fill start with \"0\" and within range -50 to 150\n            </sp-slider>\n        </div>\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"100\"\n                min=\"-50\"\n                value=\"-25\"\n                step=\"1\"\n                fill-start=\"0\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'number' }}\n                .normalization=${{\n                    toNormalized: (value: number): number => {\n                        if (value === 0) return 0.5;\n                        return value < 0\n                            ? 0.5 - (value / -50) * 0.5\n                            : 0.5 + (value / 100) * 0.5;\n                    },\n                    fromNormalized: (value: number): number => {\n                        if (value === 0.5) return 0;\n                        return value < 0.5\n                            ? (1 - value / 0.5) * -50\n                            : ((value - 0.5) / 0.5) * 100;\n                    },\n                }}\n                ...=${spreadProps(args)}\n            >\n                Fill start with \"0\" and normalization function within range -50\n                to 100\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 editableWithFractionValue = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"255\"\n                min=\"0.1\"\n                value=\"0.5\"\n                step=\"0.01\"\n                default-value=\"18\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableWithFractionValue.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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",
+  "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        min: undefined,\n        max: undefined,\n        value: undefined,\n        step: 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    min?: number;\n    max?: number;\n    value?: number;\n    step?: number;\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                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 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                variant=\"filled\"\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 FillStartWithNegativeMinRange = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"150\"\n                min=\"-50\"\n                value=\"25\"\n                step=\"1\"\n                fill-start=\"0\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'number' }}\n                ...=${spreadProps(args)}\n            >\n                Fill start with \"0\" and within range -50 to 150\n            </sp-slider>\n        </div>\n        <div style=\"width: 500px; margin-inline: 20px;\">\n            <sp-slider\n                max=\"100\"\n                min=\"-50\"\n                value=\"-25\"\n                step=\"1\"\n                fill-start=\"0\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'number' }}\n                .normalization=${{\n                    toNormalized: (value: number): number => {\n                        if (value === 0) return 0.5;\n                        return value < 0\n                            ? 0.5 - (value / -50) * 0.5\n                            : 0.5 + (value / 100) * 0.5;\n                    },\n                    fromNormalized: (value: number): number => {\n                        if (value === 0.5) return 0;\n                        return value < 0.5\n                            ? (1 - value / 0.5) * -50\n                            : ((value - 0.5) / 0.5) * 100;\n                    },\n                }}\n                ...=${spreadProps(args)}\n            >\n                Fill start with \"0\" and normalization function within range -50\n                to 100\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\nimport '@spectrum-web-components/slider/sp-slider.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/tray/sp-tray.js';\n\nexport const Multiple = (args: StoryArgs): TemplateResult => {\n    const updateSliderConfig = (\n        min: number,\n        max: number,\n        value: number,\n        step: number\n    ): void => {\n        const slider = document.querySelector('sp-slider');\n        if (slider) {\n            slider.value = value;\n            slider.min = min;\n            slider.max = max;\n            slider.step = step;\n        }\n    };\n\n    return html`\n        <overlay-trigger type=\"modal\">\n            <sp-button slot=\"trigger\" variant=\"secondary\">\n                Toggle menu\n            </sp-button>\n            <sp-tray slot=\"click-content\">\n                <div style=\"padding: 8px; width: 100%\">\n                    <sp-slider\n                        label=\"Slider Label\"\n                        min=${args.min}\n                        max=${args.max}\n                        value=${args.value}\n                        step=${args.step}\n                        variant=\"filled\"\n                        hide-stepper\n                        editable\n                    ></sp-slider>\n                    <div\n                        style=\"display: grid; gap: 8px; padding: 8px; width: 50%; margin: auto;\"\n                    >\n                        <sp-button\n                            size=\"s\"\n                            @click=${() =>\n                                updateSliderConfig(0.25, 4, 0.75, 0.01)}\n                        >\n                            Duration\n                        </sp-button>\n                        <sp-button\n                            size=\"s\"\n                            @click=${() => updateSliderConfig(2, 100, 2, 1)}\n                        >\n                            Personality\n                        </sp-button>\n                        <sp-button\n                            size=\"s\"\n                            @click=${() => updateSliderConfig(2, 25, 3, 1)}\n                        >\n                            Intensity\n                        </sp-button>\n                    </div>\n                </div>\n            </sp-tray>\n        </overlay-trigger>\n    `;\n};\n\nMultiple.args = {\n    min: 0.25,\n    max: 4,\n    value: 0.75,\n    step: 0.01,\n};\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 editableWithFractionValue = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"255\"\n                min=\"0.1\"\n                value=\"0.5\"\n                step=\"0.01\"\n                default-value=\"18\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableWithFractionValue.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"]
 }