@spectrum-web-components/slider 0.39.4 → 0.40.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/slider",
-    "version": "0.39.4",
+    "version": "0.40.1",
     "publishConfig": {
         "access": "public"
     },
@@ -75,12 +75,12 @@
     "dependencies": {
         "@internationalized/number": "^3.1.0",
         "@lit-labs/observers": "^2.0.0",
-        "@spectrum-web-components/base": "^0.39.4",
-        "@spectrum-web-components/field-label": "^0.39.4",
-        "@spectrum-web-components/number-field": "^0.39.4",
-        "@spectrum-web-components/reactive-controllers": "^0.39.4",
-        "@spectrum-web-components/shared": "^0.39.4",
-        "@spectrum-web-components/theme": "^0.39.4"
+        "@spectrum-web-components/base": "^0.40.1",
+        "@spectrum-web-components/field-label": "^0.40.1",
+        "@spectrum-web-components/number-field": "^0.40.1",
+        "@spectrum-web-components/reactive-controllers": "^0.40.1",
+        "@spectrum-web-components/shared": "^0.40.1",
+        "@spectrum-web-components/theme": "^0.40.1"
     },
     "devDependencies": {
         "@spectrum-css/slider": "^4.1.14"
@@ -92,5 +92,5 @@
         "./**/*.dev.js",
         "./sync/sp-*.js"
     ],
-    "gitHead": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
+    "gitHead": "a75c4f83094c505d64658dbc7de20b5f18a8fde1"
 }

package/src/HandleController.dev.js

@@ -92,7 +92,7 @@ export class HandleController {
   }
   inputForHandle(handle) {
     if (this.handles.has(handle.handleName)) {
-      const { input } = this.getHandleElements(handle);
+      const { input } = this.getHandleElements(handle) || {};
       return input;
     }
     throw new Error(`No input for handle "${handle.name}"`);
@@ -145,7 +145,7 @@ export class HandleController {
   }
   get focusElement() {
     const { input } = this.getActiveHandleElements();
-    if (this.host.editable && !input.model.handle.dragging) {
+    if (!input || this.host.editable && !input.model.handle.dragging) {
       return this.host.numberField;
     }
     return input;

package/src/HandleController.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["HandleController.ts"],
-  "sourcesContent": ["/*\nCopyright 2021 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';\nimport {\n    classMap,\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\nimport { Slider } from './Slider.dev.js'\nimport { SliderHandle, SliderNormalization } from './SliderHandle.dev.js'\n\ninterface HandleReference {\n    handle: HTMLElement;\n    input: HTMLInputElement;\n}\n\ninterface HandleComponents extends HandleReference {\n    model: SliderHandle;\n}\n\ninterface RangeAndClamp {\n    range: { min: number; max: number };\n    clamp: { min: number; max: number };\n}\ninterface ModelValue extends RangeAndClamp {\n    name: string;\n    value: number;\n    normalizedValue: number;\n    step: number;\n    highlight: boolean;\n    ariaLabel?: string;\n    normalization: SliderNormalization;\n    handle: SliderHandle;\n}\n\ninterface InputWithModel extends HTMLInputElement {\n    model: ModelValue;\n}\n\ninterface DataFromPointerEvent {\n    resolvedInput: boolean;\n    input: InputWithModel;\n    model?: ModelValue;\n}\n\nexport interface HandleValueDictionary {\n    [key: string]: number;\n}\n\nexport class HandleController {\n    private host!: Slider;\n    private handles: Map<string, SliderHandle> = new Map();\n    private model: ModelValue[] = [];\n    private handleOrder: string[] = [];\n    private draggingHandle?: SliderHandle;\n    private handleRefMap?: WeakMap<SliderHandle, HandleReference>;\n\n    constructor(host: Slider) {\n        this.host = host;\n\n        new MutationController(this.host, {\n            config: {\n                subtree: true,\n                childList: true,\n            },\n            callback: () => {\n                this.extractModelFromLightDom();\n            },\n        });\n\n        this.extractModelFromLightDom();\n    }\n\n    public get values(): HandleValueDictionary {\n        const result: HandleValueDictionary = {};\n        for (const model of this.handles.values()) {\n            result[model.handleName] = model.value;\n        }\n        return result;\n    }\n\n    public get size(): number {\n        return this.handles.size;\n    }\n\n    public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {\n        if (this.handles.has(handle.handleName)) {\n            const { input } = this.getHandleElements(handle);\n            return input;\n        }\n        /* c8 ignore next 2 */\n        throw new Error(`No input for handle \"${handle.name}\"`);\n    }\n\n    public requestUpdate(): void {\n        if (this.host.hasUpdated) {\n            this.host.requestUpdate();\n        }\n    }\n\n    /**\n     * It is possible for value attributes to be set programmatically. The <input>\n     * for a particular slider needs to have an opportunity to validate any such\n     * values\n     *\n     * @param handle Handle who's value needs validation\n     */\n    public setValueFromHandle(handle: SliderHandle): void {\n        const elements = this.getHandleElements(handle);\n        /* c8 ignore next */\n        if (!elements) return;\n\n        const { input } = elements;\n        if (input.valueAsNumber === handle.value) {\n            if (handle.dragging) {\n                handle.dispatchInputEvent();\n            }\n        } else {\n            input.valueAsNumber = handle.value;\n            this.requestUpdate();\n        }\n        handle.value = input.valueAsNumber;\n    }\n\n    public handleHasChanged(handle: SliderHandle): void {\n        if (handle !== this.host) {\n            this.requestUpdate();\n        }\n    }\n\n    public formattedValueForHandle(model: ModelValue): string {\n        const { handle } = model;\n        const numberFormat = handle.numberFormat ?? this.host.numberFormat;\n        const _forcedUnit =\n            handle._forcedUnit === ''\n                ? this.host._forcedUnit\n                : handle._forcedUnit;\n        return (\n            handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit\n        );\n    }\n\n    public get formattedValues(): Map<string, string> {\n        const result = new Map<string, string>();\n        for (const model of this.model) {\n            result.set(model.name, this.formattedValueForHandle(model));\n        }\n        return result;\n    }\n\n    public get focusElement(): HTMLElement {\n        const { input } = this.getActiveHandleElements();\n        if (\n            this.host.editable &&\n            !(input as InputWithModel).model.handle.dragging\n        ) {\n            return this.host.numberField;\n        }\n        return input;\n    }\n\n    protected handleOrientation = (): void => {\n        this.updateBoundingRect();\n    };\n\n    public hostConnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.addEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.addEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostDisconnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.removeEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.removeEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostUpdate(): void {\n        this.updateModel();\n    }\n\n    // Since extractModelFromLightDom bails on the first un-upgraded handle,\n    // a maximum of one listener will be set up per extraction attempt.\n    private waitForUpgrade(handle: HTMLElement): boolean {\n        if (handle instanceof SliderHandle) {\n            return false;\n        }\n        handle.addEventListener(\n            'sp-slider-handle-ready',\n            () => this.extractModelFromLightDom(),\n            { once: true, passive: true }\n        );\n        return true;\n    }\n\n    private extractModelFromLightDom = (): void => {\n        let handles = [\n            ...this.host.querySelectorAll('[slot=\"handle\"]'),\n        ] as SliderHandle[];\n        if (handles.length === 0) {\n            handles = [this.host as SliderHandle];\n        }\n        // extractModelFromLightDom depends on slotted handles already having been upgraded\n        if (handles.some((h) => this.waitForUpgrade(h))) {\n            return;\n        }\n        this.handles = new Map();\n        this.handleOrder = [];\n        handles.forEach((handle, index) => {\n            /* c8 ignore next */\n            if (!handle.handleName?.length) {\n                handle.name = `handle${index + 1}`;\n            }\n            this.handles.set(handle.handleName, handle);\n            this.handleOrder.push(handle.handleName);\n            handle.handleController = this;\n        });\n        this.requestUpdate();\n    };\n\n    public get activeHandle(): string {\n        return this.handleOrder[this.handleOrder.length - 1];\n    }\n\n    public get activeHandleInputId(): string {\n        const active = this.activeHandle;\n        const index = this.model.findIndex((model) => model.name === active);\n        return `input-${index}`;\n    }\n\n    public activateHandle(name: string): void {\n        const index = this.handleOrder.findIndex((item) => item === name);\n        if (index >= 0) {\n            this.handleOrder.splice(index, 1);\n        }\n        this.handleOrder.push(name);\n    }\n\n    private getActiveHandleElements(): HandleComponents {\n        const name = this.activeHandle;\n        const handleSlider = this.handles.get(name) as SliderHandle;\n        const elements = this.getHandleElements(\n            handleSlider\n        ) as HandleReference;\n        return { model: handleSlider, ...elements };\n    }\n\n    private getHandleElements(sliderHandle: SliderHandle): HandleReference {\n        if (!this.handleRefMap) {\n            this.handleRefMap = new WeakMap();\n\n            const inputNodes =\n                this.host.shadowRoot.querySelectorAll('.handle > input');\n            for (const inputNode of inputNodes) {\n                const input = inputNode as HTMLInputElement;\n                const handle = input.parentElement as HTMLElement;\n                const model = this.handles.get(\n                    handle.getAttribute('name') as string\n                );\n                if (model) {\n                    this.handleRefMap.set(model, { input, handle });\n                }\n            }\n        }\n\n        const components = this.handleRefMap.get(\n            sliderHandle\n        ) as HandleReference;\n        return components;\n    }\n\n    private clearHandleComponentCache(): void {\n        delete this.handleRefMap;\n    }\n\n    private _boundingClientRect?: DOMRect;\n\n    private get boundingClientRect(): DOMRect {\n        if (!this._boundingClientRect) {\n            this._boundingClientRect = this.host.track.getBoundingClientRect();\n        }\n        return this._boundingClientRect;\n    }\n\n    private updateBoundingRect(): void {\n        delete this._boundingClientRect;\n    }\n\n    /**\n     * Return the `input` and `model` associated with the event and\n     * whether the `input` is a `resolvedInput` meaning it was acquired\n     * from the `model` rather than the event.\n     */\n    protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent {\n        if (!this._activePointerEventData) {\n            let input = (event.target as Element).querySelector(\n                ':scope > .input'\n            ) as InputWithModel;\n            const resolvedInput = !input;\n            const model = input\n                ? input.model\n                : this.model.find((item) => item.name === this.activeHandle);\n            if (!input && !!model) {\n                input = model.handle.focusElement as InputWithModel;\n            }\n            this._activePointerEventData = {\n                input,\n                model,\n                resolvedInput,\n            };\n        }\n        return this._activePointerEventData;\n    }\n\n    private _activePointerEventData!: DataFromPointerEvent | undefined;\n\n    public handlePointerdown(event: PointerEvent): void {\n        const { resolvedInput, model } = this.extractDataFromEvent(event);\n        if (!model || this.host.disabled || event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this.host.track.setPointerCapture(event.pointerId);\n        this.updateBoundingRect();\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.draggingHandle = model.handle;\n        model.handle.dragging = true;\n        this.activateHandle(model.name);\n        if (resolvedInput) {\n            // When the input is resolved forward the pointer event to\n            // `handlePointermove` in order to update the value/UI becuase\n            // the pointer event was on the track not a handle\n            this.handlePointermove(event);\n        }\n        this.requestUpdate();\n    }\n\n    public handlePointerup(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        delete this._activePointerEventData;\n        if (!model) return;\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.cancelDrag(model);\n        this.requestUpdate();\n        this.host.track.releasePointerCapture(event.pointerId);\n        this.dispatchChangeEvent(input, model.handle);\n    }\n\n    public handlePointermove(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        if (!model) return;\n        /* c8 ignore next 3 */\n        if (!this.draggingHandle) {\n            return;\n        }\n        event.stopPropagation();\n        input.value = this.calculateHandlePosition(event, model).toString();\n        model.handle.value = parseFloat(input.value);\n        this.host.indeterminate = false;\n        this.requestUpdate();\n    }\n\n    public cancelDrag(model?: ModelValue): void {\n        model =\n            model || this.model.find((item) => item.name === this.activeHandle);\n        if (!model) return;\n        model.handle.highlight = false;\n        delete this.draggingHandle;\n        model.handle.dragging = false;\n    }\n\n    /**\n     * Keep the slider value property in sync with the input element's value\n     */\n    private onInputChange = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.value = input.valueAsNumber;\n\n        this.requestUpdate();\n        this.dispatchChangeEvent(input, input.model.handle);\n    };\n\n    private onInputFocus = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        let isFocusVisible;\n        try {\n            isFocusVisible =\n                input.matches(':focus-visible') ||\n                this.host.matches('.focus-visible');\n            /* c8 ignore next 3 */\n        } catch (error) {\n            isFocusVisible = this.host.matches('.focus-visible');\n        }\n        input.model.handle.highlight = isFocusVisible;\n        this.requestUpdate();\n    };\n\n    private onInputBlur = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = false;\n        this.requestUpdate();\n    };\n\n    private onInputKeydown = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = true;\n        this.requestUpdate();\n    };\n\n    private dispatchChangeEvent(\n        input: HTMLInputElement,\n        handle: SliderHandle\n    ): void {\n        input.valueAsNumber = handle.value;\n\n        const changeEvent = new Event('change', {\n            bubbles: true,\n            composed: true,\n        });\n\n        handle.dispatchEvent(changeEvent);\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(\n        event: PointerEvent | MouseEvent,\n        model: ModelValue\n    ): number {\n        const rect = this.boundingClientRect;\n        const minOffset = rect.left;\n        const offset = event.clientX;\n        const size = rect.width;\n\n        const directionalOffset = this.host.isLTR\n            ? offset - minOffset\n            : size - (offset - minOffset);\n        const normalized = directionalOffset / size;\n\n        return model.normalization.fromNormalized(\n            normalized,\n            model.range.min,\n            model.range.max\n        );\n    }\n\n    public renderHandle(\n        model: ModelValue,\n        index: number,\n        zIndex: number,\n        isMultiHandle: boolean\n    ): TemplateResult {\n        const classes = {\n            handle: true,\n            dragging: this.draggingHandle?.handleName === model.name,\n            'handle-highlight': model.highlight,\n        };\n        const style = {\n            [this.host.isLTR ? 'left' : 'right']: `${\n                model.normalizedValue * 100\n            }%`,\n            'z-index': zIndex.toString(),\n            // Allow setting background per-handle\n            'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,\n            'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,\n        };\n        const ariaLabelledBy = isMultiHandle ? `label input-${index}` : 'label';\n        return html`\n            <div\n                class=${classMap(classes)}\n                name=${model.name}\n                style=${styleMap(style)}\n                role=\"presentation\"\n            >\n                <input\n                    type=\"range\"\n                    class=\"input\"\n                    id=\"input-${index}\"\n                    min=${model.clamp.min}\n                    max=${model.clamp.max}\n                    step=${model.step}\n                    value=${model.value}\n                    aria-disabled=${ifDefined(\n                        this.host.disabled ? 'true' : undefined\n                    )}\n                    tabindex=${ifDefined(this.host.editable ? -1 : undefined)}\n                    aria-label=${ifDefined(model.ariaLabel)}\n                    aria-labelledby=${ariaLabelledBy}\n                    aria-valuetext=${this.formattedValueForHandle(model)}\n                    @change=${this.onInputChange}\n                    @focus=${this.onInputFocus}\n                    @blur=${this.onInputBlur}\n                    @keydown=${this.onInputKeydown}\n                    .model=${model}\n                />\n            </div>\n        `;\n    }\n\n    public render(): TemplateResult[] {\n        this.clearHandleComponentCache();\n        return this.model.map((model, index) => {\n            const zIndex = this.handleOrder.indexOf(model.name) + 2;\n            return this.renderHandle(\n                model,\n                index,\n                zIndex,\n                this.model.length > 1\n            );\n        });\n    }\n\n    /**\n     * Returns a list of track segment [start, end] tuples where the values are\n     * normalized to be between 0 and 1.\n     * @returns A list of track segment tuples [start, end]\n     */\n    public trackSegments(): [number, number][] {\n        const values = this.model.map((model) => model.normalizedValue);\n        values.sort((a, b) => a - b);\n\n        // The first segment always starts at 0\n        values.unshift(0);\n        return values.map((value, index, array) => [\n            value,\n            array[index + 1] ?? 1,\n        ]);\n    }\n\n    private updateModel(): void {\n        const handles = [...this.handles.values()];\n\n        const getRangeAndClamp = (index: number): RangeAndClamp => {\n            const handle = handles[index];\n            const previous = handles[index - 1];\n            const next = handles[index + 1];\n\n            const min =\n                typeof handle.min === 'number'\n                    ? handle.min\n                    : (this.host.min as number);\n            const max =\n                typeof handle.max === 'number'\n                    ? handle.max\n                    : (this.host.max as number);\n\n            const result: RangeAndClamp = {\n                range: { min: min, max: max },\n                clamp: { min: min, max: max },\n            };\n\n            if (handle.min === 'previous') {\n                if (previous) {\n                    for (let j = index - 1; j >= 0; j--) {\n                        const item = handles[j];\n                        if (typeof item.min === 'number') {\n                            result.range.min = item.min;\n                            break;\n                        }\n                    }\n                    result.clamp.min = Math.max(\n                        previous.value,\n                        result.range.min\n                    );\n                }\n                if (window.__swc.DEBUG) {\n                    if (!previous) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the first child of an <sp-slider> element cannot have attribute \"min=\\'previous\\'\"`',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            if (handle.max === 'next') {\n                if (next) {\n                    for (let j = index + 1; j < handles.length; j++) {\n                        const item = handles[j];\n                        if (typeof item.max === 'number') {\n                            result.range.max = item.max;\n                            break;\n                        }\n                    }\n                    result.clamp.max = Math.min(next.value, result.range.max);\n                }\n                if (window.__swc.DEBUG) {\n                    if (!next) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the last child of an <sp-slider> element cannot have attribute \"max=\\'next\\'\"',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            return result;\n        };\n\n        const modelValues = handles.map((handle, index) => {\n            const rangeAndClamp = getRangeAndClamp(index);\n            const { toNormalized } = handle.normalization;\n            const clampedValue = Math.max(\n                Math.min(handle.value, rangeAndClamp.clamp.max),\n                rangeAndClamp.clamp.min\n            );\n            const normalizedValue = toNormalized(\n                clampedValue,\n                rangeAndClamp.range.min,\n                rangeAndClamp.range.max\n            );\n            const model = {\n                name: handle.handleName,\n                value: clampedValue,\n                normalizedValue,\n                highlight: handle.highlight,\n                step: handle.step ?? this.host.step,\n                normalization: handle.normalization,\n                handle,\n                ariaLabel:\n                    handle !== this.host && handle?.label.length > 0\n                        ? handle.label\n                        : undefined,\n                ...rangeAndClamp,\n            };\n            return model;\n        });\n\n        this.model = modelValues;\n    }\n\n    public async handleUpdatesComplete(): Promise<void> {\n        const updates = [...this.handles.values()]\n            .filter((handle) => handle !== this.host)\n            .map((handle) => handle.updateComplete);\n        await Promise.all(updates);\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2021 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';\nimport {\n    classMap,\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\nimport { Slider } from './Slider.dev.js'\nimport { SliderHandle, SliderNormalization } from './SliderHandle.dev.js'\n\ninterface HandleReference {\n    handle: HTMLElement;\n    input: HTMLInputElement;\n}\n\ninterface HandleComponents extends HandleReference {\n    model: SliderHandle;\n}\n\ninterface RangeAndClamp {\n    range: { min: number; max: number };\n    clamp: { min: number; max: number };\n}\ninterface ModelValue extends RangeAndClamp {\n    name: string;\n    value: number;\n    normalizedValue: number;\n    step: number;\n    highlight: boolean;\n    ariaLabel?: string;\n    normalization: SliderNormalization;\n    handle: SliderHandle;\n}\n\ninterface InputWithModel extends HTMLInputElement {\n    model: ModelValue;\n}\n\ninterface DataFromPointerEvent {\n    resolvedInput: boolean;\n    input: InputWithModel;\n    model?: ModelValue;\n}\n\nexport interface HandleValueDictionary {\n    [key: string]: number;\n}\n\nexport class HandleController {\n    private host!: Slider;\n    private handles: Map<string, SliderHandle> = new Map();\n    private model: ModelValue[] = [];\n    private handleOrder: string[] = [];\n    private draggingHandle?: SliderHandle;\n    private handleRefMap?: WeakMap<SliderHandle, HandleReference>;\n\n    constructor(host: Slider) {\n        this.host = host;\n\n        new MutationController(this.host, {\n            config: {\n                subtree: true,\n                childList: true,\n            },\n            callback: () => {\n                this.extractModelFromLightDom();\n            },\n        });\n\n        this.extractModelFromLightDom();\n    }\n\n    public get values(): HandleValueDictionary {\n        const result: HandleValueDictionary = {};\n        for (const model of this.handles.values()) {\n            result[model.handleName] = model.value;\n        }\n        return result;\n    }\n\n    public get size(): number {\n        return this.handles.size;\n    }\n\n    public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {\n        if (this.handles.has(handle.handleName)) {\n            const { input } = this.getHandleElements(handle) || {};\n            return input;\n        }\n        /* c8 ignore next 2 */\n        throw new Error(`No input for handle \"${handle.name}\"`);\n    }\n\n    public requestUpdate(): void {\n        if (this.host.hasUpdated) {\n            this.host.requestUpdate();\n        }\n    }\n\n    /**\n     * It is possible for value attributes to be set programmatically. The <input>\n     * for a particular slider needs to have an opportunity to validate any such\n     * values\n     *\n     * @param handle Handle who's value needs validation\n     */\n    public setValueFromHandle(handle: SliderHandle): void {\n        const elements = this.getHandleElements(handle);\n        /* c8 ignore next */\n        if (!elements) return;\n\n        const { input } = elements;\n        if (input.valueAsNumber === handle.value) {\n            if (handle.dragging) {\n                handle.dispatchInputEvent();\n            }\n        } else {\n            input.valueAsNumber = handle.value;\n            this.requestUpdate();\n        }\n        handle.value = input.valueAsNumber;\n    }\n\n    public handleHasChanged(handle: SliderHandle): void {\n        if (handle !== this.host) {\n            this.requestUpdate();\n        }\n    }\n\n    public formattedValueForHandle(model: ModelValue): string {\n        const { handle } = model;\n        const numberFormat = handle.numberFormat ?? this.host.numberFormat;\n        const _forcedUnit =\n            handle._forcedUnit === ''\n                ? this.host._forcedUnit\n                : handle._forcedUnit;\n        return (\n            handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit\n        );\n    }\n\n    public get formattedValues(): Map<string, string> {\n        const result = new Map<string, string>();\n        for (const model of this.model) {\n            result.set(model.name, this.formattedValueForHandle(model));\n        }\n        return result;\n    }\n\n    public get focusElement(): HTMLElement {\n        const { input } = this.getActiveHandleElements();\n        if (\n            !input ||\n            (this.host.editable &&\n                !(input as InputWithModel).model.handle.dragging)\n        ) {\n            return this.host.numberField;\n        }\n        return input;\n    }\n\n    protected handleOrientation = (): void => {\n        this.updateBoundingRect();\n    };\n\n    public hostConnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.addEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.addEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostDisconnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.removeEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.removeEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostUpdate(): void {\n        this.updateModel();\n    }\n\n    // Since extractModelFromLightDom bails on the first un-upgraded handle,\n    // a maximum of one listener will be set up per extraction attempt.\n    private waitForUpgrade(handle: HTMLElement): boolean {\n        if (handle instanceof SliderHandle) {\n            return false;\n        }\n        handle.addEventListener(\n            'sp-slider-handle-ready',\n            () => this.extractModelFromLightDom(),\n            { once: true, passive: true }\n        );\n        return true;\n    }\n\n    private extractModelFromLightDom = (): void => {\n        let handles = [\n            ...this.host.querySelectorAll('[slot=\"handle\"]'),\n        ] as SliderHandle[];\n        if (handles.length === 0) {\n            handles = [this.host as SliderHandle];\n        }\n        // extractModelFromLightDom depends on slotted handles already having been upgraded\n        if (handles.some((h) => this.waitForUpgrade(h))) {\n            return;\n        }\n        this.handles = new Map();\n        this.handleOrder = [];\n        handles.forEach((handle, index) => {\n            /* c8 ignore next */\n            if (!handle.handleName?.length) {\n                handle.name = `handle${index + 1}`;\n            }\n            this.handles.set(handle.handleName, handle);\n            this.handleOrder.push(handle.handleName);\n            handle.handleController = this;\n        });\n        this.requestUpdate();\n    };\n\n    public get activeHandle(): string {\n        return this.handleOrder[this.handleOrder.length - 1];\n    }\n\n    public get activeHandleInputId(): string {\n        const active = this.activeHandle;\n        const index = this.model.findIndex((model) => model.name === active);\n        return `input-${index}`;\n    }\n\n    public activateHandle(name: string): void {\n        const index = this.handleOrder.findIndex((item) => item === name);\n        if (index >= 0) {\n            this.handleOrder.splice(index, 1);\n        }\n        this.handleOrder.push(name);\n    }\n\n    private getActiveHandleElements(): HandleComponents {\n        const name = this.activeHandle;\n        const handleSlider = this.handles.get(name) as SliderHandle;\n        const elements = this.getHandleElements(\n            handleSlider\n        ) as HandleReference;\n        return { model: handleSlider, ...elements };\n    }\n\n    private getHandleElements(sliderHandle: SliderHandle): HandleReference {\n        if (!this.handleRefMap) {\n            this.handleRefMap = new WeakMap();\n\n            const inputNodes =\n                this.host.shadowRoot.querySelectorAll('.handle > input');\n            for (const inputNode of inputNodes) {\n                const input = inputNode as HTMLInputElement;\n                const handle = input.parentElement as HTMLElement;\n                const model = this.handles.get(\n                    handle.getAttribute('name') as string\n                );\n                if (model) {\n                    this.handleRefMap.set(model, { input, handle });\n                }\n            }\n        }\n\n        const components = this.handleRefMap.get(\n            sliderHandle\n        ) as HandleReference;\n        return components;\n    }\n\n    private clearHandleComponentCache(): void {\n        delete this.handleRefMap;\n    }\n\n    private _boundingClientRect?: DOMRect;\n\n    private get boundingClientRect(): DOMRect {\n        if (!this._boundingClientRect) {\n            this._boundingClientRect = this.host.track.getBoundingClientRect();\n        }\n        return this._boundingClientRect;\n    }\n\n    private updateBoundingRect(): void {\n        delete this._boundingClientRect;\n    }\n\n    /**\n     * Return the `input` and `model` associated with the event and\n     * whether the `input` is a `resolvedInput` meaning it was acquired\n     * from the `model` rather than the event.\n     */\n    protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent {\n        if (!this._activePointerEventData) {\n            let input = (event.target as Element).querySelector(\n                ':scope > .input'\n            ) as InputWithModel;\n            const resolvedInput = !input;\n            const model = input\n                ? input.model\n                : this.model.find((item) => item.name === this.activeHandle);\n            if (!input && !!model) {\n                input = model.handle.focusElement as InputWithModel;\n            }\n            this._activePointerEventData = {\n                input,\n                model,\n                resolvedInput,\n            };\n        }\n        return this._activePointerEventData;\n    }\n\n    private _activePointerEventData!: DataFromPointerEvent | undefined;\n\n    public handlePointerdown(event: PointerEvent): void {\n        const { resolvedInput, model } = this.extractDataFromEvent(event);\n        if (!model || this.host.disabled || event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this.host.track.setPointerCapture(event.pointerId);\n        this.updateBoundingRect();\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.draggingHandle = model.handle;\n        model.handle.dragging = true;\n        this.activateHandle(model.name);\n        if (resolvedInput) {\n            // When the input is resolved forward the pointer event to\n            // `handlePointermove` in order to update the value/UI becuase\n            // the pointer event was on the track not a handle\n            this.handlePointermove(event);\n        }\n        this.requestUpdate();\n    }\n\n    public handlePointerup(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        delete this._activePointerEventData;\n        if (!model) return;\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.cancelDrag(model);\n        this.requestUpdate();\n        this.host.track.releasePointerCapture(event.pointerId);\n        this.dispatchChangeEvent(input, model.handle);\n    }\n\n    public handlePointermove(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        if (!model) return;\n        /* c8 ignore next 3 */\n        if (!this.draggingHandle) {\n            return;\n        }\n        event.stopPropagation();\n        input.value = this.calculateHandlePosition(event, model).toString();\n        model.handle.value = parseFloat(input.value);\n        this.host.indeterminate = false;\n        this.requestUpdate();\n    }\n\n    public cancelDrag(model?: ModelValue): void {\n        model =\n            model || this.model.find((item) => item.name === this.activeHandle);\n        if (!model) return;\n        model.handle.highlight = false;\n        delete this.draggingHandle;\n        model.handle.dragging = false;\n    }\n\n    /**\n     * Keep the slider value property in sync with the input element's value\n     */\n    private onInputChange = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.value = input.valueAsNumber;\n\n        this.requestUpdate();\n        this.dispatchChangeEvent(input, input.model.handle);\n    };\n\n    private onInputFocus = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        let isFocusVisible;\n        try {\n            isFocusVisible =\n                input.matches(':focus-visible') ||\n                this.host.matches('.focus-visible');\n            /* c8 ignore next 3 */\n        } catch (error) {\n            isFocusVisible = this.host.matches('.focus-visible');\n        }\n        input.model.handle.highlight = isFocusVisible;\n        this.requestUpdate();\n    };\n\n    private onInputBlur = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = false;\n        this.requestUpdate();\n    };\n\n    private onInputKeydown = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = true;\n        this.requestUpdate();\n    };\n\n    private dispatchChangeEvent(\n        input: HTMLInputElement,\n        handle: SliderHandle\n    ): void {\n        input.valueAsNumber = handle.value;\n\n        const changeEvent = new Event('change', {\n            bubbles: true,\n            composed: true,\n        });\n\n        handle.dispatchEvent(changeEvent);\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(\n        event: PointerEvent | MouseEvent,\n        model: ModelValue\n    ): number {\n        const rect = this.boundingClientRect;\n        const minOffset = rect.left;\n        const offset = event.clientX;\n        const size = rect.width;\n\n        const directionalOffset = this.host.isLTR\n            ? offset - minOffset\n            : size - (offset - minOffset);\n        const normalized = directionalOffset / size;\n\n        return model.normalization.fromNormalized(\n            normalized,\n            model.range.min,\n            model.range.max\n        );\n    }\n\n    public renderHandle(\n        model: ModelValue,\n        index: number,\n        zIndex: number,\n        isMultiHandle: boolean\n    ): TemplateResult {\n        const classes = {\n            handle: true,\n            dragging: this.draggingHandle?.handleName === model.name,\n            'handle-highlight': model.highlight,\n        };\n        const style = {\n            [this.host.isLTR ? 'left' : 'right']: `${\n                model.normalizedValue * 100\n            }%`,\n            'z-index': zIndex.toString(),\n            // Allow setting background per-handle\n            'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,\n            'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,\n        };\n        const ariaLabelledBy = isMultiHandle ? `label input-${index}` : 'label';\n        return html`\n            <div\n                class=${classMap(classes)}\n                name=${model.name}\n                style=${styleMap(style)}\n                role=\"presentation\"\n            >\n                <input\n                    type=\"range\"\n                    class=\"input\"\n                    id=\"input-${index}\"\n                    min=${model.clamp.min}\n                    max=${model.clamp.max}\n                    step=${model.step}\n                    value=${model.value}\n                    aria-disabled=${ifDefined(\n                        this.host.disabled ? 'true' : undefined\n                    )}\n                    tabindex=${ifDefined(this.host.editable ? -1 : undefined)}\n                    aria-label=${ifDefined(model.ariaLabel)}\n                    aria-labelledby=${ariaLabelledBy}\n                    aria-valuetext=${this.formattedValueForHandle(model)}\n                    @change=${this.onInputChange}\n                    @focus=${this.onInputFocus}\n                    @blur=${this.onInputBlur}\n                    @keydown=${this.onInputKeydown}\n                    .model=${model}\n                />\n            </div>\n        `;\n    }\n\n    public render(): TemplateResult[] {\n        this.clearHandleComponentCache();\n        return this.model.map((model, index) => {\n            const zIndex = this.handleOrder.indexOf(model.name) + 2;\n            return this.renderHandle(\n                model,\n                index,\n                zIndex,\n                this.model.length > 1\n            );\n        });\n    }\n\n    /**\n     * Returns a list of track segment [start, end] tuples where the values are\n     * normalized to be between 0 and 1.\n     * @returns A list of track segment tuples [start, end]\n     */\n    public trackSegments(): [number, number][] {\n        const values = this.model.map((model) => model.normalizedValue);\n        values.sort((a, b) => a - b);\n\n        // The first segment always starts at 0\n        values.unshift(0);\n        return values.map((value, index, array) => [\n            value,\n            array[index + 1] ?? 1,\n        ]);\n    }\n\n    private updateModel(): void {\n        const handles = [...this.handles.values()];\n\n        const getRangeAndClamp = (index: number): RangeAndClamp => {\n            const handle = handles[index];\n            const previous = handles[index - 1];\n            const next = handles[index + 1];\n\n            const min =\n                typeof handle.min === 'number'\n                    ? handle.min\n                    : (this.host.min as number);\n            const max =\n                typeof handle.max === 'number'\n                    ? handle.max\n                    : (this.host.max as number);\n\n            const result: RangeAndClamp = {\n                range: { min: min, max: max },\n                clamp: { min: min, max: max },\n            };\n\n            if (handle.min === 'previous') {\n                if (previous) {\n                    for (let j = index - 1; j >= 0; j--) {\n                        const item = handles[j];\n                        if (typeof item.min === 'number') {\n                            result.range.min = item.min;\n                            break;\n                        }\n                    }\n                    result.clamp.min = Math.max(\n                        previous.value,\n                        result.range.min\n                    );\n                }\n                if (window.__swc.DEBUG) {\n                    if (!previous) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the first child of an <sp-slider> element cannot have attribute \"min=\\'previous\\'\"`',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            if (handle.max === 'next') {\n                if (next) {\n                    for (let j = index + 1; j < handles.length; j++) {\n                        const item = handles[j];\n                        if (typeof item.max === 'number') {\n                            result.range.max = item.max;\n                            break;\n                        }\n                    }\n                    result.clamp.max = Math.min(next.value, result.range.max);\n                }\n                if (window.__swc.DEBUG) {\n                    if (!next) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the last child of an <sp-slider> element cannot have attribute \"max=\\'next\\'\"',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            return result;\n        };\n\n        const modelValues = handles.map((handle, index) => {\n            const rangeAndClamp = getRangeAndClamp(index);\n            const { toNormalized } = handle.normalization;\n            const clampedValue = Math.max(\n                Math.min(handle.value, rangeAndClamp.clamp.max),\n                rangeAndClamp.clamp.min\n            );\n            const normalizedValue = toNormalized(\n                clampedValue,\n                rangeAndClamp.range.min,\n                rangeAndClamp.range.max\n            );\n            const model = {\n                name: handle.handleName,\n                value: clampedValue,\n                normalizedValue,\n                highlight: handle.highlight,\n                step: handle.step ?? this.host.step,\n                normalization: handle.normalization,\n                handle,\n                ariaLabel:\n                    handle !== this.host && handle?.label.length > 0\n                        ? handle.label\n                        : undefined,\n                ...rangeAndClamp,\n            };\n            return model;\n        });\n\n        this.model = modelValues;\n    }\n\n    public async handleUpdatesComplete(): Promise<void> {\n        const updates = [...this.handles.values()]\n            .filter((handle) => handle !== this.host)\n            .map((handle) => handle.updateComplete);\n        await Promise.all(updates);\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,YAA4B;AACrC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,0BAA0B;AAEnC,SAAS,oBAAyC;AAwC3C,aAAM,iBAAiB;AAAA,EAQ1B,YAAY,MAAc;AAN1B,SAAQ,UAAqC,oBAAI,IAAI;AACrD,SAAQ,QAAsB,CAAC;AAC/B,SAAQ,cAAwB,CAAC;AA6GjC,SAAU,oBAAoB,MAAY;AACtC,WAAK,mBAAmB;AAAA,IAC5B;AAgDA,SAAQ,2BAA2B,MAAY;AAC3C,UAAI,UAAU;AAAA,QACV,GAAG,KAAK,KAAK,iBAAiB,iBAAiB;AAAA,MACnD;AACA,UAAI,QAAQ,WAAW,GAAG;AACtB,kBAAU,CAAC,KAAK,IAAoB;AAAA,MACxC;AAEA,UAAI,QAAQ,KAAK,CAAC,MAAM,KAAK,eAAe,CAAC,CAAC,GAAG;AAC7C;AAAA,MACJ;AACA,WAAK,UAAU,oBAAI,IAAI;AACvB,WAAK,cAAc,CAAC;AACpB,cAAQ,QAAQ,CAAC,QAAQ,UAAU;AA3O3C;AA6OY,YAAI,GAAC,YAAO,eAAP,mBAAmB,SAAQ;AAC5B,iBAAO,OAAO,SAAS,QAAQ,CAAC;AAAA,QACpC;AACA,aAAK,QAAQ,IAAI,OAAO,YAAY,MAAM;AAC1C,aAAK,YAAY,KAAK,OAAO,UAAU;AACvC,eAAO,mBAAmB;AAAA,MAC9B,CAAC;AACD,WAAK,cAAc;AAAA,IACvB;AAgKA;AAAA;AAAA;AAAA,SAAQ,gBAAgB,CAAC,UAAuB;AAC5C,YAAM,QAAQ,MAAM;AACpB,YAAM,MAAM,OAAO,QAAQ,MAAM;AAEjC,WAAK,cAAc;AACnB,WAAK,oBAAoB,OAAO,MAAM,MAAM,MAAM;AAAA,IACtD;AAEA,SAAQ,eAAe,CAAC,UAAuB;AAC3C,YAAM,QAAQ,MAAM;AACpB,UAAI;AACJ,UAAI;AACA,yBACI,MAAM,QAAQ,gBAAgB,KAC9B,KAAK,KAAK,QAAQ,gBAAgB;AAAA,MAE1C,SAAS,OAAO;AACZ,yBAAiB,KAAK,KAAK,QAAQ,gBAAgB;AAAA,MACvD;AACA,YAAM,MAAM,OAAO,YAAY;AAC/B,WAAK,cAAc;AAAA,IACvB;AAEA,SAAQ,cAAc,CAAC,UAAuB;AAC1C,YAAM,QAAQ,MAAM;AACpB,YAAM,MAAM,OAAO,YAAY;AAC/B,WAAK,cAAc;AAAA,IACvB;AAEA,SAAQ,iBAAiB,CAAC,UAAuB;AAC7C,YAAM,QAAQ,MAAM;AACpB,YAAM,MAAM,OAAO,YAAY;AAC/B,WAAK,cAAc;AAAA,IACvB;AAlXI,SAAK,OAAO;AAEZ,QAAI,mBAAmB,KAAK,MAAM;AAAA,MAC9B,QAAQ;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,MACf;AAAA,MACA,UAAU,MAAM;AACZ,aAAK,yBAAyB;AAAA,MAClC;AAAA,IACJ,CAAC;AAED,SAAK,yBAAyB;AAAA,EAClC;AAAA,EAEA,IAAW,SAAgC;AACvC,UAAM,SAAgC,CAAC;AACvC,eAAW,SAAS,KAAK,QAAQ,OAAO,GAAG;AACvC,aAAO,MAAM,UAAU,IAAI,MAAM;AAAA,IACrC;AACA,WAAO;AAAA,EACX;AAAA,EAEA,IAAW,OAAe;AACtB,WAAO,KAAK,QAAQ;AAAA,EACxB;AAAA,EAEO,eAAe,QAAoD;AACtE,QAAI,KAAK,QAAQ,IAAI,OAAO,UAAU,GAAG;AACrC,YAAM,EAAE,MAAM,IAAI,KAAK,kBAAkB,MAAM,KAAK,CAAC;AACrD,aAAO;AAAA,IACX;AAEA,UAAM,IAAI,MAAM,wBAAwB,OAAO,IAAI,GAAG;AAAA,EAC1D;AAAA,EAEO,gBAAsB;AACzB,QAAI,KAAK,KAAK,YAAY;AACtB,WAAK,KAAK,cAAc;AAAA,IAC5B;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASO,mBAAmB,QAA4B;AAClD,UAAM,WAAW,KAAK,kBAAkB,MAAM;AAE9C,QAAI,CAAC;AAAU;AAEf,UAAM,EAAE,MAAM,IAAI;AAClB,QAAI,MAAM,kBAAkB,OAAO,OAAO;AACtC,UAAI,OAAO,UAAU;AACjB,eAAO,mBAAmB;AAAA,MAC9B;AAAA,IACJ,OAAO;AACH,YAAM,gBAAgB,OAAO;AAC7B,WAAK,cAAc;AAAA,IACvB;AACA,WAAO,QAAQ,MAAM;AAAA,EACzB;AAAA,EAEO,iBAAiB,QAA4B;AAChD,QAAI,WAAW,KAAK,MAAM;AACtB,WAAK,cAAc;AAAA,IACvB;AAAA,EACJ;AAAA,EAEO,wBAAwB,OAA2B;AA5I9D;AA6IQ,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,gBAAe,YAAO,iBAAP,YAAuB,KAAK,KAAK;AACtD,UAAM,cACF,OAAO,gBAAgB,KACjB,KAAK,KAAK,cACV,OAAO;AACjB,WACI,OAAO,kBAAkB,MAAM,OAAO,YAAY,IAAI;AAAA,EAE9D;AAAA,EAEA,IAAW,kBAAuC;AAC9C,UAAM,SAAS,oBAAI,IAAoB;AACvC,eAAW,SAAS,KAAK,OAAO;AAC5B,aAAO,IAAI,MAAM,MAAM,KAAK,wBAAwB,KAAK,CAAC;AAAA,IAC9D;AACA,WAAO;AAAA,EACX;AAAA,EAEA,IAAW,eAA4B;AACnC,UAAM,EAAE,MAAM,IAAI,KAAK,wBAAwB;AAC/C,QACI,CAAC,SACA,KAAK,KAAK,YACP,CAAE,MAAyB,MAAM,OAAO,UAC9C;AACE,aAAO,KAAK,KAAK;AAAA,IACrB;AACA,WAAO;AAAA,EACX;AAAA,EAMO,gBAAsB;AACzB,QAAI,iBAAiB,QAAQ;AACzB,aAAO,YAAY;AAAA,QACf;AAAA,QACA,KAAK;AAAA,MACT;AAAA,IACJ,OAAO;AACH,aAAO;AAAA,QACH;AAAA,QACA,KAAK;AAAA,MACT;AAAA,IACJ;AAAA,EACJ;AAAA,EAEO,mBAAyB;AAC5B,QAAI,iBAAiB,QAAQ;AACzB,aAAO,YAAY;AAAA,QACf;AAAA,QACA,KAAK;AAAA,MACT;AAAA,IACJ,OAAO;AACH,aAAO;AAAA,QACH;AAAA,QACA,KAAK;AAAA,MACT;AAAA,IACJ;AAAA,EACJ;AAAA,EAEO,aAAmB;AACtB,SAAK,YAAY;AAAA,EACrB;AAAA;AAAA;AAAA,EAIQ,eAAe,QAA8B;AACjD,QAAI,kBAAkB,cAAc;AAChC,aAAO;AAAA,IACX;AACA,WAAO;AAAA,MACH;AAAA,MACA,MAAM,KAAK,yBAAyB;AAAA,MACpC,EAAE,MAAM,MAAM,SAAS,KAAK;AAAA,IAChC;AACA,WAAO;AAAA,EACX;AAAA,EA2BA,IAAW,eAAuB;AAC9B,WAAO,KAAK,YAAY,KAAK,YAAY,SAAS,CAAC;AAAA,EACvD;AAAA,EAEA,IAAW,sBAA8B;AACrC,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,KAAK,MAAM,UAAU,CAAC,UAAU,MAAM,SAAS,MAAM;AACnE,WAAO,SAAS,KAAK;AAAA,EACzB;AAAA,EAEO,eAAe,MAAoB;AACtC,UAAM,QAAQ,KAAK,YAAY,UAAU,CAAC,SAAS,SAAS,IAAI;AAChE,QAAI,SAAS,GAAG;AACZ,WAAK,YAAY,OAAO,OAAO,CAAC;AAAA,IACpC;AACA,SAAK,YAAY,KAAK,IAAI;AAAA,EAC9B;AAAA,EAEQ,0BAA4C;AAChD,UAAM,OAAO,KAAK;AAClB,UAAM,eAAe,KAAK,QAAQ,IAAI,IAAI;AAC1C,UAAM,WAAW,KAAK;AAAA,MAClB;AAAA,IACJ;AACA,WAAO,EAAE,OAAO,cAAc,GAAG,SAAS;AAAA,EAC9C;AAAA,EAEQ,kBAAkB,cAA6C;AACnE,QAAI,CAAC,KAAK,cAAc;AACpB,WAAK,eAAe,oBAAI,QAAQ;AAEhC,YAAM,aACF,KAAK,KAAK,WAAW,iBAAiB,iBAAiB;AAC3D,iBAAW,aAAa,YAAY;AAChC,cAAM,QAAQ;AACd,cAAM,SAAS,MAAM;AACrB,cAAM,QAAQ,KAAK,QAAQ;AAAA,UACvB,OAAO,aAAa,MAAM;AAAA,QAC9B;AACA,YAAI,OAAO;AACP,eAAK,aAAa,IAAI,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,QAClD;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,aAAa,KAAK,aAAa;AAAA,MACjC;AAAA,IACJ;AACA,WAAO;AAAA,EACX;AAAA,EAEQ,4BAAkC;AACtC,WAAO,KAAK;AAAA,EAChB;AAAA,EAIA,IAAY,qBAA8B;AACtC,QAAI,CAAC,KAAK,qBAAqB;AAC3B,WAAK,sBAAsB,KAAK,KAAK,MAAM,sBAAsB;AAAA,IACrE;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,EAEQ,qBAA2B;AAC/B,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOU,qBAAqB,OAA2C;AACtE,QAAI,CAAC,KAAK,yBAAyB;AAC/B,UAAI,QAAS,MAAM,OAAmB;AAAA,QAClC;AAAA,MACJ;AACA,YAAM,gBAAgB,CAAC;AACvB,YAAM,QAAQ,QACR,MAAM,QACN,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,KAAK,YAAY;AAC/D,UAAI,CAAC,SAAS,CAAC,CAAC,OAAO;AACnB,gBAAQ,MAAM,OAAO;AAAA,MACzB;AACA,WAAK,0BAA0B;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AACA,WAAO,KAAK;AAAA,EAChB;AAAA,EAIO,kBAAkB,OAA2B;AAChD,UAAM,EAAE,eAAe,MAAM,IAAI,KAAK,qBAAqB,KAAK;AAChE,QAAI,CAAC,SAAS,KAAK,KAAK,YAAY,MAAM,WAAW,GAAG;AACpD,YAAM,eAAe;AACrB;AAAA,IACJ;AACA,SAAK,KAAK,MAAM,kBAAkB,MAAM,SAAS;AACjD,SAAK,mBAAmB;AACxB,QAAI,MAAM,gBAAgB,SAAS;AAC/B,WAAK,KAAK,QAAQ,MAAM;AAAA,IAC5B;AACA,SAAK,iBAAiB,MAAM;AAC5B,UAAM,OAAO,WAAW;AACxB,SAAK,eAAe,MAAM,IAAI;AAC9B,QAAI,eAAe;AAIf,WAAK,kBAAkB,KAAK;AAAA,IAChC;AACA,SAAK,cAAc;AAAA,EACvB;AAAA,EAEO,gBAAgB,OAA2B;AAC9C,UAAM,EAAE,OAAO,MAAM,IAAI,KAAK,qBAAqB,KAAK;AACxD,WAAO,KAAK;AACZ,QAAI,CAAC;AAAO;AACZ,QAAI,MAAM,gBAAgB,SAAS;AAC/B,WAAK,KAAK,QAAQ,MAAM;AAAA,IAC5B;AACA,SAAK,WAAW,KAAK;AACrB,SAAK,cAAc;AACnB,SAAK,KAAK,MAAM,sBAAsB,MAAM,SAAS;AACrD,SAAK,oBAAoB,OAAO,MAAM,MAAM;AAAA,EAChD;AAAA,EAEO,kBAAkB,OAA2B;AAChD,UAAM,EAAE,OAAO,MAAM,IAAI,KAAK,qBAAqB,KAAK;AACxD,QAAI,CAAC;AAAO;AAEZ,QAAI,CAAC,KAAK,gBAAgB;AACtB;AAAA,IACJ;AACA,UAAM,gBAAgB;AACtB,UAAM,QAAQ,KAAK,wBAAwB,OAAO,KAAK,EAAE,SAAS;AAClE,UAAM,OAAO,QAAQ,WAAW,MAAM,KAAK;AAC3C,SAAK,KAAK,gBAAgB;AAC1B,SAAK,cAAc;AAAA,EACvB;AAAA,EAEO,WAAW,OAA0B;AACxC,YACI,SAAS,KAAK,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,KAAK,YAAY;AACtE,QAAI,CAAC;AAAO;AACZ,UAAM,OAAO,YAAY;AACzB,WAAO,KAAK;AACZ,UAAM,OAAO,WAAW;AAAA,EAC5B;AAAA,EAwCQ,oBACJ,OACA,QACI;AACJ,UAAM,gBAAgB,OAAO;AAE7B,UAAM,cAAc,IAAI,MAAM,UAAU;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,IACd,CAAC;AAED,WAAO,cAAc,WAAW;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,wBACJ,OACA,OACM;AACN,UAAM,OAAO,KAAK;AAClB,UAAM,YAAY,KAAK;AACvB,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,KAAK;AAElB,UAAM,oBAAoB,KAAK,KAAK,QAC9B,SAAS,YACT,QAAQ,SAAS;AACvB,UAAM,aAAa,oBAAoB;AAEvC,WAAO,MAAM,cAAc;AAAA,MACvB;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,IAChB;AAAA,EACJ;AAAA,EAEO,aACH,OACA,OACA,QACA,eACc;AAretB;AAseQ,UAAM,UAAU;AAAA,MACZ,QAAQ;AAAA,MACR,YAAU,UAAK,mBAAL,mBAAqB,gBAAe,MAAM;AAAA,MACpD,oBAAoB,MAAM;AAAA,IAC9B;AACA,UAAM,QAAQ;AAAA,MACV,CAAC,KAAK,KAAK,QAAQ,SAAS,OAAO,GAAG,GAClC,MAAM,kBAAkB,GAC5B;AAAA,MACA,WAAW,OAAO,SAAS;AAAA;AAAA,MAE3B,oBAAoB,iDAAiD,KAAK;AAAA,MAC1E,gBAAgB,6CAA6C,KAAK;AAAA,IACtE;AACA,UAAM,iBAAiB,gBAAgB,eAAe,KAAK,KAAK;AAChE,WAAO;AAAA;AAAA,wBAES,SAAS,OAAO,CAAC;AAAA,uBAClB,MAAM,IAAI;AAAA,wBACT,SAAS,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMP,KAAK;AAAA,0BACX,MAAM,MAAM,GAAG;AAAA,0BACf,MAAM,MAAM,GAAG;AAAA,2BACd,MAAM,IAAI;AAAA,4BACT,MAAM,KAAK;AAAA,oCACH;AAAA,MACZ,KAAK,KAAK,WAAW,SAAS;AAAA,IAClC,CAAC;AAAA,+BACU,UAAU,KAAK,KAAK,WAAW,KAAK,MAAS,CAAC;AAAA,iCAC5C,UAAU,MAAM,SAAS,CAAC;AAAA,sCACrB,cAAc;AAAA,qCACf,KAAK,wBAAwB,KAAK,CAAC;AAAA,8BAC1C,KAAK,aAAa;AAAA,6BACnB,KAAK,YAAY;AAAA,4BAClB,KAAK,WAAW;AAAA,+BACb,KAAK,cAAc;AAAA,6BACrB,KAAK;AAAA;AAAA;AAAA;AAAA,EAI9B;AAAA,EAEO,SAA2B;AAC9B,SAAK,0BAA0B;AAC/B,WAAO,KAAK,MAAM,IAAI,CAAC,OAAO,UAAU;AACpC,YAAM,SAAS,KAAK,YAAY,QAAQ,MAAM,IAAI,IAAI;AACtD,aAAO,KAAK;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK,MAAM,SAAS;AAAA,MACxB;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOO,gBAAoC;AACvC,UAAM,SAAS,KAAK,MAAM,IAAI,CAAC,UAAU,MAAM,eAAe;AAC9D,WAAO,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAG3B,WAAO,QAAQ,CAAC;AAChB,WAAO,OAAO,IAAI,CAAC,OAAO,OAAO,UAAO;AA7iBhD;AA6iBmD;AAAA,QACvC;AAAA,SACA,WAAM,QAAQ,CAAC,MAAf,YAAoB;AAAA,MACxB;AAAA,KAAC;AAAA,EACL;AAAA,EAEQ,cAAoB;AACxB,UAAM,UAAU,CAAC,GAAG,KAAK,QAAQ,OAAO,CAAC;AAEzC,UAAM,mBAAmB,CAAC,UAAiC;AACvD,YAAM,SAAS,QAAQ,KAAK;AAC5B,YAAM,WAAW,QAAQ,QAAQ,CAAC;AAClC,YAAM,OAAO,QAAQ,QAAQ,CAAC;AAE9B,YAAM,MACF,OAAO,OAAO,QAAQ,WAChB,OAAO,MACN,KAAK,KAAK;AACrB,YAAM,MACF,OAAO,OAAO,QAAQ,WAChB,OAAO,MACN,KAAK,KAAK;AAErB,YAAM,SAAwB;AAAA,QAC1B,OAAO,EAAE,KAAU,IAAS;AAAA,QAC5B,OAAO,EAAE,KAAU,IAAS;AAAA,MAChC;AAEA,UAAI,OAAO,QAAQ,YAAY;AAC3B,YAAI,UAAU;AACV,mBAAS,IAAI,QAAQ,GAAG,KAAK,GAAG,KAAK;AACjC,kBAAM,OAAO,QAAQ,CAAC;AACtB,gBAAI,OAAO,KAAK,QAAQ,UAAU;AAC9B,qBAAO,MAAM,MAAM,KAAK;AACxB;AAAA,YACJ;AAAA,UACJ;AACA,iBAAO,MAAM,MAAM,KAAK;AAAA,YACpB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,UACjB;AAAA,QACJ;AACA,YAAI,MAAoB;AACpB,cAAI,CAAC,UAAU;AACX,mBAAO,MAAM;AAAA,cACT,KAAK;AAAA,cACL;AAAA,cACA;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AACA,UAAI,OAAO,QAAQ,QAAQ;AACvB,YAAI,MAAM;AACN,mBAAS,IAAI,QAAQ,GAAG,IAAI,QAAQ,QAAQ,KAAK;AAC7C,kBAAM,OAAO,QAAQ,CAAC;AACtB,gBAAI,OAAO,KAAK,QAAQ,UAAU;AAC9B,qBAAO,MAAM,MAAM,KAAK;AACxB;AAAA,YACJ;AAAA,UACJ;AACA,iBAAO,MAAM,MAAM,KAAK,IAAI,KAAK,OAAO,OAAO,MAAM,GAAG;AAAA,QAC5D;AACA,YAAI,MAAoB;AACpB,cAAI,CAAC,MAAM;AACP,mBAAO,MAAM;AAAA,cACT,KAAK;AAAA,cACL;AAAA,cACA;AAAA,YACJ;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AACA,aAAO;AAAA,IACX;AAEA,UAAM,cAAc,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAznB3D;AA0nBY,YAAM,gBAAgB,iBAAiB,KAAK;AAC5C,YAAM,EAAE,aAAa,IAAI,OAAO;AAChC,YAAM,eAAe,KAAK;AAAA,QACtB,KAAK,IAAI,OAAO,OAAO,cAAc,MAAM,GAAG;AAAA,QAC9C,cAAc,MAAM;AAAA,MACxB;AACA,YAAM,kBAAkB;AAAA,QACpB;AAAA,QACA,cAAc,MAAM;AAAA,QACpB,cAAc,MAAM;AAAA,MACxB;AACA,YAAM,QAAQ;AAAA,QACV,MAAM,OAAO;AAAA,QACb,OAAO;AAAA,QACP;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,OAAM,YAAO,SAAP,YAAe,KAAK,KAAK;AAAA,QAC/B,eAAe,OAAO;AAAA,QACtB;AAAA,QACA,WACI,WAAW,KAAK,SAAQ,iCAAQ,MAAM,UAAS,IACzC,OAAO,QACP;AAAA,QACV,GAAG;AAAA,MACP;AACA,aAAO;AAAA,IACX,CAAC;AAED,SAAK,QAAQ;AAAA,EACjB;AAAA,EAEA,MAAa,wBAAuC;AAChD,UAAM,UAAU,CAAC,GAAG,KAAK,QAAQ,OAAO,CAAC,EACpC,OAAO,CAAC,WAAW,WAAW,KAAK,IAAI,EACvC,IAAI,CAAC,WAAW,OAAO,cAAc;AAC1C,UAAM,QAAQ,IAAI,OAAO;AAAA,EAC7B;AACJ;",
   "names": []
 }

package/src/HandleController.js

@@ -1,4 +1,4 @@
-"use strict";import{html as m}from"@spectrum-web-components/base";import{classMap as p,ifDefined as c,styleMap as g}from"@spectrum-web-components/base/src/directives.js";import{MutationController as v}from"@lit-labs/observers/mutation-controller.js";import{SliderHandle as f}from"./SliderHandle.js";export class HandleController{constructor(e){this.handles=new Map;this.model=[];this.handleOrder=[];this.handleOrientation=()=>{this.updateBoundingRect()};this.extractModelFromLightDom=()=>{let e=[...this.host.querySelectorAll('[slot="handle"]')];e.length===0&&(e=[this.host]),!e.some(t=>this.waitForUpgrade(t))&&(this.handles=new Map,this.handleOrder=[],e.forEach((t,n)=>{var i;(i=t.handleName)!=null&&i.length||(t.name=`handle${n+1}`),this.handles.set(t.handleName,t),this.handleOrder.push(t.handleName),t.handleController=this}),this.requestUpdate())};this.onInputChange=e=>{const t=e.target;t.model.handle.value=t.valueAsNumber,this.requestUpdate(),this.dispatchChangeEvent(t,t.model.handle)};this.onInputFocus=e=>{const t=e.target;let n;try{n=t.matches(":focus-visible")||this.host.matches(".focus-visible")}catch(i){n=this.host.matches(".focus-visible")}t.model.handle.highlight=n,this.requestUpdate()};this.onInputBlur=e=>{const t=e.target;t.model.handle.highlight=!1,this.requestUpdate()};this.onInputKeydown=e=>{const t=e.target;t.model.handle.highlight=!0,this.requestUpdate()};this.host=e,new v(this.host,{config:{subtree:!0,childList:!0},callback:()=>{this.extractModelFromLightDom()}}),this.extractModelFromLightDom()}get values(){const e={};for(const t of this.handles.values())e[t.handleName]=t.value;return e}get size(){return this.handles.size}inputForHandle(e){if(this.handles.has(e.handleName)){const{input:t}=this.getHandleElements(e);return t}throw new Error(`No input for handle "${e.name}"`)}requestUpdate(){this.host.hasUpdated&&this.host.requestUpdate()}setValueFromHandle(e){const t=this.getHandleElements(e);if(!t)return;const{input:n}=t;n.valueAsNumber===e.value?e.dragging&&e.dispatchInputEvent():(n.valueAsNumber=e.value,this.requestUpdate()),e.value=n.valueAsNumber}handleHasChanged(e){e!==this.host&&this.requestUpdate()}formattedValueForHandle(e){var a;const{handle:t}=e,n=(a=t.numberFormat)!=null?a:this.host.numberFormat,i=t._forcedUnit===""?this.host._forcedUnit:t._forcedUnit;return t.getAriaHandleText(e.value,n)+i}get formattedValues(){const e=new Map;for(const t of this.model)e.set(t.name,this.formattedValueForHandle(t));return e}get focusElement(){const{input:e}=this.getActiveHandleElements();return this.host.editable&&!e.model.handle.dragging?this.host.numberField:e}hostConnected(){"orientation"in screen?screen.orientation.addEventListener("change",this.handleOrientation):window.addEventListener("orientationchange",this.handleOrientation)}hostDisconnected(){"orientation"in screen?screen.orientation.removeEventListener("change",this.handleOrientation):window.removeEventListener("orientationchange",this.handleOrientation)}hostUpdate(){this.updateModel()}waitForUpgrade(e){return e instanceof f?!1:(e.addEventListener("sp-slider-handle-ready",()=>this.extractModelFromLightDom(),{once:!0,passive:!0}),!0)}get activeHandle(){return this.handleOrder[this.handleOrder.length-1]}get activeHandleInputId(){const e=this.activeHandle;return`input-${this.model.findIndex(n=>n.name===e)}`}activateHandle(e){const t=this.handleOrder.findIndex(n=>n===e);t>=0&&this.handleOrder.splice(t,1),this.handleOrder.push(e)}getActiveHandleElements(){const e=this.activeHandle,t=this.handles.get(e),n=this.getHandleElements(t);return{model:t,...n}}getHandleElements(e){if(!this.handleRefMap){this.handleRefMap=new WeakMap;const n=this.host.shadowRoot.querySelectorAll(".handle > input");for(const i of n){const a=i,r=a.parentElement,s=this.handles.get(r.getAttribute("name"));s&&this.handleRefMap.set(s,{input:a,handle:r})}}return this.handleRefMap.get(e)}clearHandleComponentCache(){delete this.handleRefMap}get boundingClientRect(){return this._boundingClientRect||(this._boundingClientRect=this.host.track.getBoundingClientRect()),this._boundingClientRect}updateBoundingRect(){delete this._boundingClientRect}extractDataFromEvent(e){if(!this._activePointerEventData){let t=e.target.querySelector(":scope > .input");const n=!t,i=t?t.model:this.model.find(a=>a.name===this.activeHandle);!t&&i&&(t=i.handle.focusElement),this._activePointerEventData={input:t,model:i,resolvedInput:n}}return this._activePointerEventData}handlePointerdown(e){const{resolvedInput:t,model:n}=this.extractDataFromEvent(e);if(!n||this.host.disabled||e.button!==0){e.preventDefault();return}this.host.track.setPointerCapture(e.pointerId),this.updateBoundingRect(),e.pointerType==="mouse"&&this.host.labelEl.click(),this.draggingHandle=n.handle,n.handle.dragging=!0,this.activateHandle(n.name),t&&this.handlePointermove(e),this.requestUpdate()}handlePointerup(e){const{input:t,model:n}=this.extractDataFromEvent(e);delete this._activePointerEventData,n&&(e.pointerType==="mouse"&&this.host.labelEl.click(),this.cancelDrag(n),this.requestUpdate(),this.host.track.releasePointerCapture(e.pointerId),this.dispatchChangeEvent(t,n.handle))}handlePointermove(e){const{input:t,model:n}=this.extractDataFromEvent(e);n&&this.draggingHandle&&(e.stopPropagation(),t.value=this.calculateHandlePosition(e,n).toString(),n.handle.value=parseFloat(t.value),this.host.indeterminate=!1,this.requestUpdate())}cancelDrag(e){e=e||this.model.find(t=>t.name===this.activeHandle),e&&(e.handle.highlight=!1,delete this.draggingHandle,e.handle.dragging=!1)}dispatchChangeEvent(e,t){e.valueAsNumber=t.value;const n=new Event("change",{bubbles:!0,composed:!0});t.dispatchEvent(n)}calculateHandlePosition(e,t){const n=this.boundingClientRect,i=n.left,a=e.clientX,r=n.width,l=(this.host.isLTR?a-i:r-(a-i))/r;return t.normalization.fromNormalized(l,t.range.min,t.range.max)}renderHandle(e,t,n,i){var l;const a={handle:!0,dragging:((l=this.draggingHandle)==null?void 0:l.handleName)===e.name,"handle-highlight":e.highlight},r={[this.host.isLTR?"left":"right"]:`${e.normalizedValue*100}%`,"z-index":n.toString(),"background-color":`var(--spectrum-slider-handle-background-color-${t}, var(--spectrum-slider-handle-background-color))`,"border-color":`var(--spectrum-slider-handle-border-color-${t}, var(--spectrum-slider-handle-border-color))`},s=i?`label input-${t}`:"label";return m`
+"use strict";import{html as m}from"@spectrum-web-components/base";import{classMap as p,ifDefined as c,styleMap as g}from"@spectrum-web-components/base/src/directives.js";import{MutationController as v}from"@lit-labs/observers/mutation-controller.js";import{SliderHandle as f}from"./SliderHandle.js";export class HandleController{constructor(e){this.handles=new Map;this.model=[];this.handleOrder=[];this.handleOrientation=()=>{this.updateBoundingRect()};this.extractModelFromLightDom=()=>{let e=[...this.host.querySelectorAll('[slot="handle"]')];e.length===0&&(e=[this.host]),!e.some(t=>this.waitForUpgrade(t))&&(this.handles=new Map,this.handleOrder=[],e.forEach((t,n)=>{var i;(i=t.handleName)!=null&&i.length||(t.name=`handle${n+1}`),this.handles.set(t.handleName,t),this.handleOrder.push(t.handleName),t.handleController=this}),this.requestUpdate())};this.onInputChange=e=>{const t=e.target;t.model.handle.value=t.valueAsNumber,this.requestUpdate(),this.dispatchChangeEvent(t,t.model.handle)};this.onInputFocus=e=>{const t=e.target;let n;try{n=t.matches(":focus-visible")||this.host.matches(".focus-visible")}catch(i){n=this.host.matches(".focus-visible")}t.model.handle.highlight=n,this.requestUpdate()};this.onInputBlur=e=>{const t=e.target;t.model.handle.highlight=!1,this.requestUpdate()};this.onInputKeydown=e=>{const t=e.target;t.model.handle.highlight=!0,this.requestUpdate()};this.host=e,new v(this.host,{config:{subtree:!0,childList:!0},callback:()=>{this.extractModelFromLightDom()}}),this.extractModelFromLightDom()}get values(){const e={};for(const t of this.handles.values())e[t.handleName]=t.value;return e}get size(){return this.handles.size}inputForHandle(e){if(this.handles.has(e.handleName)){const{input:t}=this.getHandleElements(e)||{};return t}throw new Error(`No input for handle "${e.name}"`)}requestUpdate(){this.host.hasUpdated&&this.host.requestUpdate()}setValueFromHandle(e){const t=this.getHandleElements(e);if(!t)return;const{input:n}=t;n.valueAsNumber===e.value?e.dragging&&e.dispatchInputEvent():(n.valueAsNumber=e.value,this.requestUpdate()),e.value=n.valueAsNumber}handleHasChanged(e){e!==this.host&&this.requestUpdate()}formattedValueForHandle(e){var a;const{handle:t}=e,n=(a=t.numberFormat)!=null?a:this.host.numberFormat,i=t._forcedUnit===""?this.host._forcedUnit:t._forcedUnit;return t.getAriaHandleText(e.value,n)+i}get formattedValues(){const e=new Map;for(const t of this.model)e.set(t.name,this.formattedValueForHandle(t));return e}get focusElement(){const{input:e}=this.getActiveHandleElements();return!e||this.host.editable&&!e.model.handle.dragging?this.host.numberField:e}hostConnected(){"orientation"in screen?screen.orientation.addEventListener("change",this.handleOrientation):window.addEventListener("orientationchange",this.handleOrientation)}hostDisconnected(){"orientation"in screen?screen.orientation.removeEventListener("change",this.handleOrientation):window.removeEventListener("orientationchange",this.handleOrientation)}hostUpdate(){this.updateModel()}waitForUpgrade(e){return e instanceof f?!1:(e.addEventListener("sp-slider-handle-ready",()=>this.extractModelFromLightDom(),{once:!0,passive:!0}),!0)}get activeHandle(){return this.handleOrder[this.handleOrder.length-1]}get activeHandleInputId(){const e=this.activeHandle;return`input-${this.model.findIndex(n=>n.name===e)}`}activateHandle(e){const t=this.handleOrder.findIndex(n=>n===e);t>=0&&this.handleOrder.splice(t,1),this.handleOrder.push(e)}getActiveHandleElements(){const e=this.activeHandle,t=this.handles.get(e),n=this.getHandleElements(t);return{model:t,...n}}getHandleElements(e){if(!this.handleRefMap){this.handleRefMap=new WeakMap;const n=this.host.shadowRoot.querySelectorAll(".handle > input");for(const i of n){const a=i,r=a.parentElement,s=this.handles.get(r.getAttribute("name"));s&&this.handleRefMap.set(s,{input:a,handle:r})}}return this.handleRefMap.get(e)}clearHandleComponentCache(){delete this.handleRefMap}get boundingClientRect(){return this._boundingClientRect||(this._boundingClientRect=this.host.track.getBoundingClientRect()),this._boundingClientRect}updateBoundingRect(){delete this._boundingClientRect}extractDataFromEvent(e){if(!this._activePointerEventData){let t=e.target.querySelector(":scope > .input");const n=!t,i=t?t.model:this.model.find(a=>a.name===this.activeHandle);!t&&i&&(t=i.handle.focusElement),this._activePointerEventData={input:t,model:i,resolvedInput:n}}return this._activePointerEventData}handlePointerdown(e){const{resolvedInput:t,model:n}=this.extractDataFromEvent(e);if(!n||this.host.disabled||e.button!==0){e.preventDefault();return}this.host.track.setPointerCapture(e.pointerId),this.updateBoundingRect(),e.pointerType==="mouse"&&this.host.labelEl.click(),this.draggingHandle=n.handle,n.handle.dragging=!0,this.activateHandle(n.name),t&&this.handlePointermove(e),this.requestUpdate()}handlePointerup(e){const{input:t,model:n}=this.extractDataFromEvent(e);delete this._activePointerEventData,n&&(e.pointerType==="mouse"&&this.host.labelEl.click(),this.cancelDrag(n),this.requestUpdate(),this.host.track.releasePointerCapture(e.pointerId),this.dispatchChangeEvent(t,n.handle))}handlePointermove(e){const{input:t,model:n}=this.extractDataFromEvent(e);n&&this.draggingHandle&&(e.stopPropagation(),t.value=this.calculateHandlePosition(e,n).toString(),n.handle.value=parseFloat(t.value),this.host.indeterminate=!1,this.requestUpdate())}cancelDrag(e){e=e||this.model.find(t=>t.name===this.activeHandle),e&&(e.handle.highlight=!1,delete this.draggingHandle,e.handle.dragging=!1)}dispatchChangeEvent(e,t){e.valueAsNumber=t.value;const n=new Event("change",{bubbles:!0,composed:!0});t.dispatchEvent(n)}calculateHandlePosition(e,t){const n=this.boundingClientRect,i=n.left,a=e.clientX,r=n.width,l=(this.host.isLTR?a-i:r-(a-i))/r;return t.normalization.fromNormalized(l,t.range.min,t.range.max)}renderHandle(e,t,n,i){var l;const a={handle:!0,dragging:((l=this.draggingHandle)==null?void 0:l.handleName)===e.name,"handle-highlight":e.highlight},r={[this.host.isLTR?"left":"right"]:`${e.normalizedValue*100}%`,"z-index":n.toString(),"background-color":`var(--spectrum-slider-handle-background-color-${t}, var(--spectrum-slider-handle-background-color))`,"border-color":`var(--spectrum-slider-handle-border-color-${t}, var(--spectrum-slider-handle-border-color))`},s=i?`label input-${t}`:"label";return m`
             <div
                 class=${p(a)}
                 name=${e.name}

package/src/HandleController.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["HandleController.ts"],
-  "sourcesContent": ["/*\nCopyright 2021 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';\nimport {\n    classMap,\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\nimport { Slider } from './Slider.js';\nimport { SliderHandle, SliderNormalization } from './SliderHandle.js';\n\ninterface HandleReference {\n    handle: HTMLElement;\n    input: HTMLInputElement;\n}\n\ninterface HandleComponents extends HandleReference {\n    model: SliderHandle;\n}\n\ninterface RangeAndClamp {\n    range: { min: number; max: number };\n    clamp: { min: number; max: number };\n}\ninterface ModelValue extends RangeAndClamp {\n    name: string;\n    value: number;\n    normalizedValue: number;\n    step: number;\n    highlight: boolean;\n    ariaLabel?: string;\n    normalization: SliderNormalization;\n    handle: SliderHandle;\n}\n\ninterface InputWithModel extends HTMLInputElement {\n    model: ModelValue;\n}\n\ninterface DataFromPointerEvent {\n    resolvedInput: boolean;\n    input: InputWithModel;\n    model?: ModelValue;\n}\n\nexport interface HandleValueDictionary {\n    [key: string]: number;\n}\n\nexport class HandleController {\n    private host!: Slider;\n    private handles: Map<string, SliderHandle> = new Map();\n    private model: ModelValue[] = [];\n    private handleOrder: string[] = [];\n    private draggingHandle?: SliderHandle;\n    private handleRefMap?: WeakMap<SliderHandle, HandleReference>;\n\n    constructor(host: Slider) {\n        this.host = host;\n\n        new MutationController(this.host, {\n            config: {\n                subtree: true,\n                childList: true,\n            },\n            callback: () => {\n                this.extractModelFromLightDom();\n            },\n        });\n\n        this.extractModelFromLightDom();\n    }\n\n    public get values(): HandleValueDictionary {\n        const result: HandleValueDictionary = {};\n        for (const model of this.handles.values()) {\n            result[model.handleName] = model.value;\n        }\n        return result;\n    }\n\n    public get size(): number {\n        return this.handles.size;\n    }\n\n    public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {\n        if (this.handles.has(handle.handleName)) {\n            const { input } = this.getHandleElements(handle);\n            return input;\n        }\n        /* c8 ignore next 2 */\n        throw new Error(`No input for handle \"${handle.name}\"`);\n    }\n\n    public requestUpdate(): void {\n        if (this.host.hasUpdated) {\n            this.host.requestUpdate();\n        }\n    }\n\n    /**\n     * It is possible for value attributes to be set programmatically. The <input>\n     * for a particular slider needs to have an opportunity to validate any such\n     * values\n     *\n     * @param handle Handle who's value needs validation\n     */\n    public setValueFromHandle(handle: SliderHandle): void {\n        const elements = this.getHandleElements(handle);\n        /* c8 ignore next */\n        if (!elements) return;\n\n        const { input } = elements;\n        if (input.valueAsNumber === handle.value) {\n            if (handle.dragging) {\n                handle.dispatchInputEvent();\n            }\n        } else {\n            input.valueAsNumber = handle.value;\n            this.requestUpdate();\n        }\n        handle.value = input.valueAsNumber;\n    }\n\n    public handleHasChanged(handle: SliderHandle): void {\n        if (handle !== this.host) {\n            this.requestUpdate();\n        }\n    }\n\n    public formattedValueForHandle(model: ModelValue): string {\n        const { handle } = model;\n        const numberFormat = handle.numberFormat ?? this.host.numberFormat;\n        const _forcedUnit =\n            handle._forcedUnit === ''\n                ? this.host._forcedUnit\n                : handle._forcedUnit;\n        return (\n            handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit\n        );\n    }\n\n    public get formattedValues(): Map<string, string> {\n        const result = new Map<string, string>();\n        for (const model of this.model) {\n            result.set(model.name, this.formattedValueForHandle(model));\n        }\n        return result;\n    }\n\n    public get focusElement(): HTMLElement {\n        const { input } = this.getActiveHandleElements();\n        if (\n            this.host.editable &&\n            !(input as InputWithModel).model.handle.dragging\n        ) {\n            return this.host.numberField;\n        }\n        return input;\n    }\n\n    protected handleOrientation = (): void => {\n        this.updateBoundingRect();\n    };\n\n    public hostConnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.addEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.addEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostDisconnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.removeEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.removeEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostUpdate(): void {\n        this.updateModel();\n    }\n\n    // Since extractModelFromLightDom bails on the first un-upgraded handle,\n    // a maximum of one listener will be set up per extraction attempt.\n    private waitForUpgrade(handle: HTMLElement): boolean {\n        if (handle instanceof SliderHandle) {\n            return false;\n        }\n        handle.addEventListener(\n            'sp-slider-handle-ready',\n            () => this.extractModelFromLightDom(),\n            { once: true, passive: true }\n        );\n        return true;\n    }\n\n    private extractModelFromLightDom = (): void => {\n        let handles = [\n            ...this.host.querySelectorAll('[slot=\"handle\"]'),\n        ] as SliderHandle[];\n        if (handles.length === 0) {\n            handles = [this.host as SliderHandle];\n        }\n        // extractModelFromLightDom depends on slotted handles already having been upgraded\n        if (handles.some((h) => this.waitForUpgrade(h))) {\n            return;\n        }\n        this.handles = new Map();\n        this.handleOrder = [];\n        handles.forEach((handle, index) => {\n            /* c8 ignore next */\n            if (!handle.handleName?.length) {\n                handle.name = `handle${index + 1}`;\n            }\n            this.handles.set(handle.handleName, handle);\n            this.handleOrder.push(handle.handleName);\n            handle.handleController = this;\n        });\n        this.requestUpdate();\n    };\n\n    public get activeHandle(): string {\n        return this.handleOrder[this.handleOrder.length - 1];\n    }\n\n    public get activeHandleInputId(): string {\n        const active = this.activeHandle;\n        const index = this.model.findIndex((model) => model.name === active);\n        return `input-${index}`;\n    }\n\n    public activateHandle(name: string): void {\n        const index = this.handleOrder.findIndex((item) => item === name);\n        if (index >= 0) {\n            this.handleOrder.splice(index, 1);\n        }\n        this.handleOrder.push(name);\n    }\n\n    private getActiveHandleElements(): HandleComponents {\n        const name = this.activeHandle;\n        const handleSlider = this.handles.get(name) as SliderHandle;\n        const elements = this.getHandleElements(\n            handleSlider\n        ) as HandleReference;\n        return { model: handleSlider, ...elements };\n    }\n\n    private getHandleElements(sliderHandle: SliderHandle): HandleReference {\n        if (!this.handleRefMap) {\n            this.handleRefMap = new WeakMap();\n\n            const inputNodes =\n                this.host.shadowRoot.querySelectorAll('.handle > input');\n            for (const inputNode of inputNodes) {\n                const input = inputNode as HTMLInputElement;\n                const handle = input.parentElement as HTMLElement;\n                const model = this.handles.get(\n                    handle.getAttribute('name') as string\n                );\n                if (model) {\n                    this.handleRefMap.set(model, { input, handle });\n                }\n            }\n        }\n\n        const components = this.handleRefMap.get(\n            sliderHandle\n        ) as HandleReference;\n        return components;\n    }\n\n    private clearHandleComponentCache(): void {\n        delete this.handleRefMap;\n    }\n\n    private _boundingClientRect?: DOMRect;\n\n    private get boundingClientRect(): DOMRect {\n        if (!this._boundingClientRect) {\n            this._boundingClientRect = this.host.track.getBoundingClientRect();\n        }\n        return this._boundingClientRect;\n    }\n\n    private updateBoundingRect(): void {\n        delete this._boundingClientRect;\n    }\n\n    /**\n     * Return the `input` and `model` associated with the event and\n     * whether the `input` is a `resolvedInput` meaning it was acquired\n     * from the `model` rather than the event.\n     */\n    protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent {\n        if (!this._activePointerEventData) {\n            let input = (event.target as Element).querySelector(\n                ':scope > .input'\n            ) as InputWithModel;\n            const resolvedInput = !input;\n            const model = input\n                ? input.model\n                : this.model.find((item) => item.name === this.activeHandle);\n            if (!input && !!model) {\n                input = model.handle.focusElement as InputWithModel;\n            }\n            this._activePointerEventData = {\n                input,\n                model,\n                resolvedInput,\n            };\n        }\n        return this._activePointerEventData;\n    }\n\n    private _activePointerEventData!: DataFromPointerEvent | undefined;\n\n    public handlePointerdown(event: PointerEvent): void {\n        const { resolvedInput, model } = this.extractDataFromEvent(event);\n        if (!model || this.host.disabled || event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this.host.track.setPointerCapture(event.pointerId);\n        this.updateBoundingRect();\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.draggingHandle = model.handle;\n        model.handle.dragging = true;\n        this.activateHandle(model.name);\n        if (resolvedInput) {\n            // When the input is resolved forward the pointer event to\n            // `handlePointermove` in order to update the value/UI becuase\n            // the pointer event was on the track not a handle\n            this.handlePointermove(event);\n        }\n        this.requestUpdate();\n    }\n\n    public handlePointerup(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        delete this._activePointerEventData;\n        if (!model) return;\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.cancelDrag(model);\n        this.requestUpdate();\n        this.host.track.releasePointerCapture(event.pointerId);\n        this.dispatchChangeEvent(input, model.handle);\n    }\n\n    public handlePointermove(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        if (!model) return;\n        /* c8 ignore next 3 */\n        if (!this.draggingHandle) {\n            return;\n        }\n        event.stopPropagation();\n        input.value = this.calculateHandlePosition(event, model).toString();\n        model.handle.value = parseFloat(input.value);\n        this.host.indeterminate = false;\n        this.requestUpdate();\n    }\n\n    public cancelDrag(model?: ModelValue): void {\n        model =\n            model || this.model.find((item) => item.name === this.activeHandle);\n        if (!model) return;\n        model.handle.highlight = false;\n        delete this.draggingHandle;\n        model.handle.dragging = false;\n    }\n\n    /**\n     * Keep the slider value property in sync with the input element's value\n     */\n    private onInputChange = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.value = input.valueAsNumber;\n\n        this.requestUpdate();\n        this.dispatchChangeEvent(input, input.model.handle);\n    };\n\n    private onInputFocus = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        let isFocusVisible;\n        try {\n            isFocusVisible =\n                input.matches(':focus-visible') ||\n                this.host.matches('.focus-visible');\n            /* c8 ignore next 3 */\n        } catch (error) {\n            isFocusVisible = this.host.matches('.focus-visible');\n        }\n        input.model.handle.highlight = isFocusVisible;\n        this.requestUpdate();\n    };\n\n    private onInputBlur = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = false;\n        this.requestUpdate();\n    };\n\n    private onInputKeydown = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = true;\n        this.requestUpdate();\n    };\n\n    private dispatchChangeEvent(\n        input: HTMLInputElement,\n        handle: SliderHandle\n    ): void {\n        input.valueAsNumber = handle.value;\n\n        const changeEvent = new Event('change', {\n            bubbles: true,\n            composed: true,\n        });\n\n        handle.dispatchEvent(changeEvent);\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(\n        event: PointerEvent | MouseEvent,\n        model: ModelValue\n    ): number {\n        const rect = this.boundingClientRect;\n        const minOffset = rect.left;\n        const offset = event.clientX;\n        const size = rect.width;\n\n        const directionalOffset = this.host.isLTR\n            ? offset - minOffset\n            : size - (offset - minOffset);\n        const normalized = directionalOffset / size;\n\n        return model.normalization.fromNormalized(\n            normalized,\n            model.range.min,\n            model.range.max\n        );\n    }\n\n    public renderHandle(\n        model: ModelValue,\n        index: number,\n        zIndex: number,\n        isMultiHandle: boolean\n    ): TemplateResult {\n        const classes = {\n            handle: true,\n            dragging: this.draggingHandle?.handleName === model.name,\n            'handle-highlight': model.highlight,\n        };\n        const style = {\n            [this.host.isLTR ? 'left' : 'right']: `${\n                model.normalizedValue * 100\n            }%`,\n            'z-index': zIndex.toString(),\n            // Allow setting background per-handle\n            'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,\n            'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,\n        };\n        const ariaLabelledBy = isMultiHandle ? `label input-${index}` : 'label';\n        return html`\n            <div\n                class=${classMap(classes)}\n                name=${model.name}\n                style=${styleMap(style)}\n                role=\"presentation\"\n            >\n                <input\n                    type=\"range\"\n                    class=\"input\"\n                    id=\"input-${index}\"\n                    min=${model.clamp.min}\n                    max=${model.clamp.max}\n                    step=${model.step}\n                    value=${model.value}\n                    aria-disabled=${ifDefined(\n                        this.host.disabled ? 'true' : undefined\n                    )}\n                    tabindex=${ifDefined(this.host.editable ? -1 : undefined)}\n                    aria-label=${ifDefined(model.ariaLabel)}\n                    aria-labelledby=${ariaLabelledBy}\n                    aria-valuetext=${this.formattedValueForHandle(model)}\n                    @change=${this.onInputChange}\n                    @focus=${this.onInputFocus}\n                    @blur=${this.onInputBlur}\n                    @keydown=${this.onInputKeydown}\n                    .model=${model}\n                />\n            </div>\n        `;\n    }\n\n    public render(): TemplateResult[] {\n        this.clearHandleComponentCache();\n        return this.model.map((model, index) => {\n            const zIndex = this.handleOrder.indexOf(model.name) + 2;\n            return this.renderHandle(\n                model,\n                index,\n                zIndex,\n                this.model.length > 1\n            );\n        });\n    }\n\n    /**\n     * Returns a list of track segment [start, end] tuples where the values are\n     * normalized to be between 0 and 1.\n     * @returns A list of track segment tuples [start, end]\n     */\n    public trackSegments(): [number, number][] {\n        const values = this.model.map((model) => model.normalizedValue);\n        values.sort((a, b) => a - b);\n\n        // The first segment always starts at 0\n        values.unshift(0);\n        return values.map((value, index, array) => [\n            value,\n            array[index + 1] ?? 1,\n        ]);\n    }\n\n    private updateModel(): void {\n        const handles = [...this.handles.values()];\n\n        const getRangeAndClamp = (index: number): RangeAndClamp => {\n            const handle = handles[index];\n            const previous = handles[index - 1];\n            const next = handles[index + 1];\n\n            const min =\n                typeof handle.min === 'number'\n                    ? handle.min\n                    : (this.host.min as number);\n            const max =\n                typeof handle.max === 'number'\n                    ? handle.max\n                    : (this.host.max as number);\n\n            const result: RangeAndClamp = {\n                range: { min: min, max: max },\n                clamp: { min: min, max: max },\n            };\n\n            if (handle.min === 'previous') {\n                if (previous) {\n                    for (let j = index - 1; j >= 0; j--) {\n                        const item = handles[j];\n                        if (typeof item.min === 'number') {\n                            result.range.min = item.min;\n                            break;\n                        }\n                    }\n                    result.clamp.min = Math.max(\n                        previous.value,\n                        result.range.min\n                    );\n                }\n                if (window.__swc.DEBUG) {\n                    if (!previous) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the first child of an <sp-slider> element cannot have attribute \"min=\\'previous\\'\"`',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            if (handle.max === 'next') {\n                if (next) {\n                    for (let j = index + 1; j < handles.length; j++) {\n                        const item = handles[j];\n                        if (typeof item.max === 'number') {\n                            result.range.max = item.max;\n                            break;\n                        }\n                    }\n                    result.clamp.max = Math.min(next.value, result.range.max);\n                }\n                if (window.__swc.DEBUG) {\n                    if (!next) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the last child of an <sp-slider> element cannot have attribute \"max=\\'next\\'\"',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            return result;\n        };\n\n        const modelValues = handles.map((handle, index) => {\n            const rangeAndClamp = getRangeAndClamp(index);\n            const { toNormalized } = handle.normalization;\n            const clampedValue = Math.max(\n                Math.min(handle.value, rangeAndClamp.clamp.max),\n                rangeAndClamp.clamp.min\n            );\n            const normalizedValue = toNormalized(\n                clampedValue,\n                rangeAndClamp.range.min,\n                rangeAndClamp.range.max\n            );\n            const model = {\n                name: handle.handleName,\n                value: clampedValue,\n                normalizedValue,\n                highlight: handle.highlight,\n                step: handle.step ?? this.host.step,\n                normalization: handle.normalization,\n                handle,\n                ariaLabel:\n                    handle !== this.host && handle?.label.length > 0\n                        ? handle.label\n                        : undefined,\n                ...rangeAndClamp,\n            };\n            return model;\n        });\n\n        this.model = modelValues;\n    }\n\n    public async handleUpdatesComplete(): Promise<void> {\n        const updates = [...this.handles.values()]\n            .filter((handle) => handle !== this.host)\n            .map((handle) => handle.updateComplete);\n        await Promise.all(updates);\n    }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/*\nCopyright 2021 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';\nimport {\n    classMap,\n    ifDefined,\n    styleMap,\n} from '@spectrum-web-components/base/src/directives.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\nimport { Slider } from './Slider.js';\nimport { SliderHandle, SliderNormalization } from './SliderHandle.js';\n\ninterface HandleReference {\n    handle: HTMLElement;\n    input: HTMLInputElement;\n}\n\ninterface HandleComponents extends HandleReference {\n    model: SliderHandle;\n}\n\ninterface RangeAndClamp {\n    range: { min: number; max: number };\n    clamp: { min: number; max: number };\n}\ninterface ModelValue extends RangeAndClamp {\n    name: string;\n    value: number;\n    normalizedValue: number;\n    step: number;\n    highlight: boolean;\n    ariaLabel?: string;\n    normalization: SliderNormalization;\n    handle: SliderHandle;\n}\n\ninterface InputWithModel extends HTMLInputElement {\n    model: ModelValue;\n}\n\ninterface DataFromPointerEvent {\n    resolvedInput: boolean;\n    input: InputWithModel;\n    model?: ModelValue;\n}\n\nexport interface HandleValueDictionary {\n    [key: string]: number;\n}\n\nexport class HandleController {\n    private host!: Slider;\n    private handles: Map<string, SliderHandle> = new Map();\n    private model: ModelValue[] = [];\n    private handleOrder: string[] = [];\n    private draggingHandle?: SliderHandle;\n    private handleRefMap?: WeakMap<SliderHandle, HandleReference>;\n\n    constructor(host: Slider) {\n        this.host = host;\n\n        new MutationController(this.host, {\n            config: {\n                subtree: true,\n                childList: true,\n            },\n            callback: () => {\n                this.extractModelFromLightDom();\n            },\n        });\n\n        this.extractModelFromLightDom();\n    }\n\n    public get values(): HandleValueDictionary {\n        const result: HandleValueDictionary = {};\n        for (const model of this.handles.values()) {\n            result[model.handleName] = model.value;\n        }\n        return result;\n    }\n\n    public get size(): number {\n        return this.handles.size;\n    }\n\n    public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {\n        if (this.handles.has(handle.handleName)) {\n            const { input } = this.getHandleElements(handle) || {};\n            return input;\n        }\n        /* c8 ignore next 2 */\n        throw new Error(`No input for handle \"${handle.name}\"`);\n    }\n\n    public requestUpdate(): void {\n        if (this.host.hasUpdated) {\n            this.host.requestUpdate();\n        }\n    }\n\n    /**\n     * It is possible for value attributes to be set programmatically. The <input>\n     * for a particular slider needs to have an opportunity to validate any such\n     * values\n     *\n     * @param handle Handle who's value needs validation\n     */\n    public setValueFromHandle(handle: SliderHandle): void {\n        const elements = this.getHandleElements(handle);\n        /* c8 ignore next */\n        if (!elements) return;\n\n        const { input } = elements;\n        if (input.valueAsNumber === handle.value) {\n            if (handle.dragging) {\n                handle.dispatchInputEvent();\n            }\n        } else {\n            input.valueAsNumber = handle.value;\n            this.requestUpdate();\n        }\n        handle.value = input.valueAsNumber;\n    }\n\n    public handleHasChanged(handle: SliderHandle): void {\n        if (handle !== this.host) {\n            this.requestUpdate();\n        }\n    }\n\n    public formattedValueForHandle(model: ModelValue): string {\n        const { handle } = model;\n        const numberFormat = handle.numberFormat ?? this.host.numberFormat;\n        const _forcedUnit =\n            handle._forcedUnit === ''\n                ? this.host._forcedUnit\n                : handle._forcedUnit;\n        return (\n            handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit\n        );\n    }\n\n    public get formattedValues(): Map<string, string> {\n        const result = new Map<string, string>();\n        for (const model of this.model) {\n            result.set(model.name, this.formattedValueForHandle(model));\n        }\n        return result;\n    }\n\n    public get focusElement(): HTMLElement {\n        const { input } = this.getActiveHandleElements();\n        if (\n            !input ||\n            (this.host.editable &&\n                !(input as InputWithModel).model.handle.dragging)\n        ) {\n            return this.host.numberField;\n        }\n        return input;\n    }\n\n    protected handleOrientation = (): void => {\n        this.updateBoundingRect();\n    };\n\n    public hostConnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.addEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.addEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostDisconnected(): void {\n        if ('orientation' in screen) {\n            screen.orientation.removeEventListener(\n                'change',\n                this.handleOrientation\n            );\n        } else {\n            window.removeEventListener(\n                'orientationchange',\n                this.handleOrientation\n            );\n        }\n    }\n\n    public hostUpdate(): void {\n        this.updateModel();\n    }\n\n    // Since extractModelFromLightDom bails on the first un-upgraded handle,\n    // a maximum of one listener will be set up per extraction attempt.\n    private waitForUpgrade(handle: HTMLElement): boolean {\n        if (handle instanceof SliderHandle) {\n            return false;\n        }\n        handle.addEventListener(\n            'sp-slider-handle-ready',\n            () => this.extractModelFromLightDom(),\n            { once: true, passive: true }\n        );\n        return true;\n    }\n\n    private extractModelFromLightDom = (): void => {\n        let handles = [\n            ...this.host.querySelectorAll('[slot=\"handle\"]'),\n        ] as SliderHandle[];\n        if (handles.length === 0) {\n            handles = [this.host as SliderHandle];\n        }\n        // extractModelFromLightDom depends on slotted handles already having been upgraded\n        if (handles.some((h) => this.waitForUpgrade(h))) {\n            return;\n        }\n        this.handles = new Map();\n        this.handleOrder = [];\n        handles.forEach((handle, index) => {\n            /* c8 ignore next */\n            if (!handle.handleName?.length) {\n                handle.name = `handle${index + 1}`;\n            }\n            this.handles.set(handle.handleName, handle);\n            this.handleOrder.push(handle.handleName);\n            handle.handleController = this;\n        });\n        this.requestUpdate();\n    };\n\n    public get activeHandle(): string {\n        return this.handleOrder[this.handleOrder.length - 1];\n    }\n\n    public get activeHandleInputId(): string {\n        const active = this.activeHandle;\n        const index = this.model.findIndex((model) => model.name === active);\n        return `input-${index}`;\n    }\n\n    public activateHandle(name: string): void {\n        const index = this.handleOrder.findIndex((item) => item === name);\n        if (index >= 0) {\n            this.handleOrder.splice(index, 1);\n        }\n        this.handleOrder.push(name);\n    }\n\n    private getActiveHandleElements(): HandleComponents {\n        const name = this.activeHandle;\n        const handleSlider = this.handles.get(name) as SliderHandle;\n        const elements = this.getHandleElements(\n            handleSlider\n        ) as HandleReference;\n        return { model: handleSlider, ...elements };\n    }\n\n    private getHandleElements(sliderHandle: SliderHandle): HandleReference {\n        if (!this.handleRefMap) {\n            this.handleRefMap = new WeakMap();\n\n            const inputNodes =\n                this.host.shadowRoot.querySelectorAll('.handle > input');\n            for (const inputNode of inputNodes) {\n                const input = inputNode as HTMLInputElement;\n                const handle = input.parentElement as HTMLElement;\n                const model = this.handles.get(\n                    handle.getAttribute('name') as string\n                );\n                if (model) {\n                    this.handleRefMap.set(model, { input, handle });\n                }\n            }\n        }\n\n        const components = this.handleRefMap.get(\n            sliderHandle\n        ) as HandleReference;\n        return components;\n    }\n\n    private clearHandleComponentCache(): void {\n        delete this.handleRefMap;\n    }\n\n    private _boundingClientRect?: DOMRect;\n\n    private get boundingClientRect(): DOMRect {\n        if (!this._boundingClientRect) {\n            this._boundingClientRect = this.host.track.getBoundingClientRect();\n        }\n        return this._boundingClientRect;\n    }\n\n    private updateBoundingRect(): void {\n        delete this._boundingClientRect;\n    }\n\n    /**\n     * Return the `input` and `model` associated with the event and\n     * whether the `input` is a `resolvedInput` meaning it was acquired\n     * from the `model` rather than the event.\n     */\n    protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent {\n        if (!this._activePointerEventData) {\n            let input = (event.target as Element).querySelector(\n                ':scope > .input'\n            ) as InputWithModel;\n            const resolvedInput = !input;\n            const model = input\n                ? input.model\n                : this.model.find((item) => item.name === this.activeHandle);\n            if (!input && !!model) {\n                input = model.handle.focusElement as InputWithModel;\n            }\n            this._activePointerEventData = {\n                input,\n                model,\n                resolvedInput,\n            };\n        }\n        return this._activePointerEventData;\n    }\n\n    private _activePointerEventData!: DataFromPointerEvent | undefined;\n\n    public handlePointerdown(event: PointerEvent): void {\n        const { resolvedInput, model } = this.extractDataFromEvent(event);\n        if (!model || this.host.disabled || event.button !== 0) {\n            event.preventDefault();\n            return;\n        }\n        this.host.track.setPointerCapture(event.pointerId);\n        this.updateBoundingRect();\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.draggingHandle = model.handle;\n        model.handle.dragging = true;\n        this.activateHandle(model.name);\n        if (resolvedInput) {\n            // When the input is resolved forward the pointer event to\n            // `handlePointermove` in order to update the value/UI becuase\n            // the pointer event was on the track not a handle\n            this.handlePointermove(event);\n        }\n        this.requestUpdate();\n    }\n\n    public handlePointerup(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        delete this._activePointerEventData;\n        if (!model) return;\n        if (event.pointerType === 'mouse') {\n            this.host.labelEl.click();\n        }\n        this.cancelDrag(model);\n        this.requestUpdate();\n        this.host.track.releasePointerCapture(event.pointerId);\n        this.dispatchChangeEvent(input, model.handle);\n    }\n\n    public handlePointermove(event: PointerEvent): void {\n        const { input, model } = this.extractDataFromEvent(event);\n        if (!model) return;\n        /* c8 ignore next 3 */\n        if (!this.draggingHandle) {\n            return;\n        }\n        event.stopPropagation();\n        input.value = this.calculateHandlePosition(event, model).toString();\n        model.handle.value = parseFloat(input.value);\n        this.host.indeterminate = false;\n        this.requestUpdate();\n    }\n\n    public cancelDrag(model?: ModelValue): void {\n        model =\n            model || this.model.find((item) => item.name === this.activeHandle);\n        if (!model) return;\n        model.handle.highlight = false;\n        delete this.draggingHandle;\n        model.handle.dragging = false;\n    }\n\n    /**\n     * Keep the slider value property in sync with the input element's value\n     */\n    private onInputChange = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.value = input.valueAsNumber;\n\n        this.requestUpdate();\n        this.dispatchChangeEvent(input, input.model.handle);\n    };\n\n    private onInputFocus = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        let isFocusVisible;\n        try {\n            isFocusVisible =\n                input.matches(':focus-visible') ||\n                this.host.matches('.focus-visible');\n            /* c8 ignore next 3 */\n        } catch (error) {\n            isFocusVisible = this.host.matches('.focus-visible');\n        }\n        input.model.handle.highlight = isFocusVisible;\n        this.requestUpdate();\n    };\n\n    private onInputBlur = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = false;\n        this.requestUpdate();\n    };\n\n    private onInputKeydown = (event: Event): void => {\n        const input = event.target as InputWithModel;\n        input.model.handle.highlight = true;\n        this.requestUpdate();\n    };\n\n    private dispatchChangeEvent(\n        input: HTMLInputElement,\n        handle: SliderHandle\n    ): void {\n        input.valueAsNumber = handle.value;\n\n        const changeEvent = new Event('change', {\n            bubbles: true,\n            composed: true,\n        });\n\n        handle.dispatchEvent(changeEvent);\n    }\n\n    /**\n     * Returns the value under the cursor\n     * @param: PointerEvent on slider\n     * @return: Slider value that correlates to the position under the pointer\n     */\n    private calculateHandlePosition(\n        event: PointerEvent | MouseEvent,\n        model: ModelValue\n    ): number {\n        const rect = this.boundingClientRect;\n        const minOffset = rect.left;\n        const offset = event.clientX;\n        const size = rect.width;\n\n        const directionalOffset = this.host.isLTR\n            ? offset - minOffset\n            : size - (offset - minOffset);\n        const normalized = directionalOffset / size;\n\n        return model.normalization.fromNormalized(\n            normalized,\n            model.range.min,\n            model.range.max\n        );\n    }\n\n    public renderHandle(\n        model: ModelValue,\n        index: number,\n        zIndex: number,\n        isMultiHandle: boolean\n    ): TemplateResult {\n        const classes = {\n            handle: true,\n            dragging: this.draggingHandle?.handleName === model.name,\n            'handle-highlight': model.highlight,\n        };\n        const style = {\n            [this.host.isLTR ? 'left' : 'right']: `${\n                model.normalizedValue * 100\n            }%`,\n            'z-index': zIndex.toString(),\n            // Allow setting background per-handle\n            'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,\n            'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,\n        };\n        const ariaLabelledBy = isMultiHandle ? `label input-${index}` : 'label';\n        return html`\n            <div\n                class=${classMap(classes)}\n                name=${model.name}\n                style=${styleMap(style)}\n                role=\"presentation\"\n            >\n                <input\n                    type=\"range\"\n                    class=\"input\"\n                    id=\"input-${index}\"\n                    min=${model.clamp.min}\n                    max=${model.clamp.max}\n                    step=${model.step}\n                    value=${model.value}\n                    aria-disabled=${ifDefined(\n                        this.host.disabled ? 'true' : undefined\n                    )}\n                    tabindex=${ifDefined(this.host.editable ? -1 : undefined)}\n                    aria-label=${ifDefined(model.ariaLabel)}\n                    aria-labelledby=${ariaLabelledBy}\n                    aria-valuetext=${this.formattedValueForHandle(model)}\n                    @change=${this.onInputChange}\n                    @focus=${this.onInputFocus}\n                    @blur=${this.onInputBlur}\n                    @keydown=${this.onInputKeydown}\n                    .model=${model}\n                />\n            </div>\n        `;\n    }\n\n    public render(): TemplateResult[] {\n        this.clearHandleComponentCache();\n        return this.model.map((model, index) => {\n            const zIndex = this.handleOrder.indexOf(model.name) + 2;\n            return this.renderHandle(\n                model,\n                index,\n                zIndex,\n                this.model.length > 1\n            );\n        });\n    }\n\n    /**\n     * Returns a list of track segment [start, end] tuples where the values are\n     * normalized to be between 0 and 1.\n     * @returns A list of track segment tuples [start, end]\n     */\n    public trackSegments(): [number, number][] {\n        const values = this.model.map((model) => model.normalizedValue);\n        values.sort((a, b) => a - b);\n\n        // The first segment always starts at 0\n        values.unshift(0);\n        return values.map((value, index, array) => [\n            value,\n            array[index + 1] ?? 1,\n        ]);\n    }\n\n    private updateModel(): void {\n        const handles = [...this.handles.values()];\n\n        const getRangeAndClamp = (index: number): RangeAndClamp => {\n            const handle = handles[index];\n            const previous = handles[index - 1];\n            const next = handles[index + 1];\n\n            const min =\n                typeof handle.min === 'number'\n                    ? handle.min\n                    : (this.host.min as number);\n            const max =\n                typeof handle.max === 'number'\n                    ? handle.max\n                    : (this.host.max as number);\n\n            const result: RangeAndClamp = {\n                range: { min: min, max: max },\n                clamp: { min: min, max: max },\n            };\n\n            if (handle.min === 'previous') {\n                if (previous) {\n                    for (let j = index - 1; j >= 0; j--) {\n                        const item = handles[j];\n                        if (typeof item.min === 'number') {\n                            result.range.min = item.min;\n                            break;\n                        }\n                    }\n                    result.clamp.min = Math.max(\n                        previous.value,\n                        result.range.min\n                    );\n                }\n                if (window.__swc.DEBUG) {\n                    if (!previous) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the first child of an <sp-slider> element cannot have attribute \"min=\\'previous\\'\"`',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            if (handle.max === 'next') {\n                if (next) {\n                    for (let j = index + 1; j < handles.length; j++) {\n                        const item = handles[j];\n                        if (typeof item.max === 'number') {\n                            result.range.max = item.max;\n                            break;\n                        }\n                    }\n                    result.clamp.max = Math.min(next.value, result.range.max);\n                }\n                if (window.__swc.DEBUG) {\n                    if (!next) {\n                        window.__swc.warn(\n                            this.host,\n                            '<sp-slider-handle> elements that are the last child of an <sp-slider> element cannot have attribute \"max=\\'next\\'\"',\n                            'https://opensource.adobe.com/spectrum-web-components/components/slider-handle/#multi-handle-slider-with-ordered-handles'\n                        );\n                    }\n                }\n            }\n            return result;\n        };\n\n        const modelValues = handles.map((handle, index) => {\n            const rangeAndClamp = getRangeAndClamp(index);\n            const { toNormalized } = handle.normalization;\n            const clampedValue = Math.max(\n                Math.min(handle.value, rangeAndClamp.clamp.max),\n                rangeAndClamp.clamp.min\n            );\n            const normalizedValue = toNormalized(\n                clampedValue,\n                rangeAndClamp.range.min,\n                rangeAndClamp.range.max\n            );\n            const model = {\n                name: handle.handleName,\n                value: clampedValue,\n                normalizedValue,\n                highlight: handle.highlight,\n                step: handle.step ?? this.host.step,\n                normalization: handle.normalization,\n                handle,\n                ariaLabel:\n                    handle !== this.host && handle?.label.length > 0\n                        ? handle.label\n                        : undefined,\n                ...rangeAndClamp,\n            };\n            return model;\n        });\n\n        this.model = modelValues;\n    }\n\n    public async handleUpdatesComplete(): Promise<void> {\n        const updates = [...this.handles.values()]\n            .filter((handle) => handle !== this.host)\n            .map((handle) => handle.updateComplete);\n        await Promise.all(updates);\n    }\n}\n"],
+  "mappings": "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",
   "names": ["html", "classMap", "ifDefined", "styleMap", "MutationController", "SliderHandle", "host", "handles", "h", "handle", "index", "_a", "event", "input", "isFocusVisible", "error", "result", "model", "elements", "numberFormat", "_forcedUnit", "active", "name", "item", "handleSlider", "sliderHandle", "inputNodes", "inputNode", "resolvedInput", "changeEvent", "rect", "minOffset", "offset", "size", "normalized", "zIndex", "isMultiHandle", "classes", "style", "ariaLabelledBy", "values", "a", "b", "value", "array", "getRangeAndClamp", "previous", "next", "min", "max", "j", "modelValues", "rangeAndClamp", "toNormalized", "clampedValue", "normalizedValue", "updates"]
 }

package/src/slider.css.dev.js

@@ -335,7 +335,7 @@ var(--spectrum-slider-tick-mark-width)
 --system-spectrum-slider-handle-border-color-key-focus
 );--spectrum-slider-handle-focus-ring-color-key-focus:var(
 --system-spectrum-slider-handle-focus-ring-color-key-focus
-)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}
+)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end}
 `;
 export default styles;
 //# sourceMappingURL=slider.css.dev.js.map

package/src/slider.css.dev.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["slider.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-medium);--spectrum-slider-control-height:var(--spectrum-component-height-100);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-medium\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-medium\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-small\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-small\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-100)}:host([size=l]){--spectrum-slider-font-size:var(--spectrum-font-size-100);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-large);--spectrum-slider-control-height:var(--spectrum-component-height-200);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=xl]){--spectrum-slider-font-size:var(--spectrum-font-size-200);--spectrum-slider-handle-size:var(\n--spectrum-slider-handle-size-extra-large\n);--spectrum-slider-control-height:var(--spectrum-component-height-300);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-extra-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-extra-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:22px}:host{--spectrum-slider-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-slider-min-size:var(--spectrum-spacing-900);--spectrum-slider-track-corner-radius:var(--spectrum-corner-radius-75);--spectrum-slider-label-margin-start:var(--spectrum-spacing-300);--spectrum-slider-handle-border-width:var(--spectrum-border-width-200);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-size)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);--spectrum-slider-track-fill-thickness:var(\n--spectrum-slider-track-thickness\n);--spectrum-slider-tick-mark-width:var(--spectrum-border-width-200);--spectrum-slider-tick-mark-border-radius:2px;--spectrum-slider-tick-handle-background-color:var(--spectrum-gray-100);--spectrum-slider-track-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-track-fill-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-handle-border-color-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-slider-label-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-slider-label-text-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-slider-tick-mark-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-ramp-handle-border-color-active:var(--spectrum-gray-100);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-range-track-reset:0}:host{display:block;min-inline-size:var(\n--mod-slider-min-size,var(--spectrum-slider-min-size)\n);position:relative;-webkit-user-select:none;user-select:none;z-index:1}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container,.spectrum-Slider--sideLabel #label-container+#track{margin-block-start:0}.spectrum-Slider--sideLabel #controls{margin-inline-end:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n)}.spectrum-Slider--sideLabel #value{inline-size:var(\n--mod-slider-value-inline-size,var(--spectrum-slider-value-inline-size)\n);margin-inline-start:var(\n--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline)\n);text-align:start}#controls{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);box-sizing:border-box;cursor:pointer;display:inline-block;inline-size:calc(100% - var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n)*2);margin-inline-start:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n);position:relative;vertical-align:top;z-index:auto}#label-container+#track{margin-block-start:calc(var(--spectrum-slider-control-to-field-label)*-1)}:host([tick-labels]){margin-block-end:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n)}#fill,.track{block-size:var(\n--mod-slider-track-fill-thickness,var(--spectrum-slider-track-fill-thickness)\n);box-sizing:border-box;inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-track-fill-thickness,\nvar(--spectrum-slider-track-fill-thickness)\n)/2);inset-inline:0 auto;margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-block:0;padding-inline-end:var(\n--mod-slider-handle-gap,var(--spectrum-slider-handle-gap)\n);padding-inline-start:0;pointer-events:none;position:absolute;z-index:1}#fill:before,.track:before{block-size:100%;border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;content:\"\";display:block}.track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track~.track{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-block:0;padding-inline-end:0;padding-inline-start:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n)}:host([variant=range]) .track~.track{inset-inline:auto;margin-inline:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-inline:var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n) var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n)}#fill{margin-inline-start:0;padding-block:0;padding-inline-end:0;padding-inline-start:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)))}.spectrum-Slider-fill--right{padding-block:0;padding-inline-end:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));padding-inline-start:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{inset-inline-end:auto;inset-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n);padding-inline-start:0}:host([variant=range]) .track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}:host([variant=range]) .track:last-of-type{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:0;padding-inline-start:var(--spectrum-slider-track-handleoffset)}:host([variant=range]) .track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}#ramp{block-size:var(\n--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-height)\n);inset-inline-end:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);inset-inline-start:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-block-start:calc(var(\n--mod-slider-ramp-track-height,\nvar(--spectrum-slider-ramp-track-height)\n)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:var(\n--mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)\n);border-style:solid;border-width:var(\n--mod-slider-handle-border-width,var(--spectrum-slider-handle-border-width)\n);box-sizing:border-box;display:inline-block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/2);inset-inline-start:0;margin-block:0;margin-inline:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/-2) 0;outline:none;position:absolute;transition:border-width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down)\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:100%;content:\" \";display:block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%);transition:box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,inline-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,block-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}.handle.handle-highlight:before{block-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2);inline-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2)}.input{-webkit-appearance:none;block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border:0;cursor:default;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:var(\n--mod-slider-input-top-size,var(--spectrum-slider-input-top-size)\n);inset-inline-start:var(\n--mod-slider-input-left,var(--spectrum-slider-input-left)\n);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute}.input:focus{outline:none}#label-container{align-items:center;display:flex;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));inline-size:auto;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-start:var(\n--mod-slider-label-top-to-text,var(--spectrum-slider-label-top-to-text)\n);position:relative}#label-container:lang(ja),#label-container:lang(ko),#label-container:lang(zh){line-height:var(\n--mod-slider-cjk-line-height,var(--spectrum-slider-cjk-line-height)\n)}#label{flex-grow:1;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));padding-inline-start:0}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0;margin-inline-start:var(\n--mod-slider-label-margin-start,var(--spectrum-slider-label-margin-start)\n);padding-inline-end:0;text-align:end}:host([variant=tick]) .handle{background-color:var(\n--highcontrast-slider-tick-handle-background-color,var(\n--mod-slider-tick-handle-background-color,var(--spectrum-slider-tick-handle-background-color)\n)\n)}:host([variant=tick]) #controls{margin-block-start:calc(var(--spectrum-text-to-visual-75) - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2 - var(\n--mod-slider-track-thickness,\nvar(--spectrum-slider-track-thickness)\n)/2)}:host([variant=tick]) .tickLabel{margin-block-start:calc(var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n) + var(--spectrum-text-to-visual-75))}.ticks{display:flex;justify-content:space-between;margin-inline:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);z-index:0}.ticks~.spectrum-Slider-handleContainer .handle{background:var(\n--mod-slider-ticks-handle-background-color,var(--spectrum-slider-ticks-handle-background-color)\n)}.tick{inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2);position:relative}.tick:after{block-size:var(\n--mod-slider-tick-mark-height,var(--spectrum-slider-tick-mark-height)\n);border-radius:var(\n--mod-slider-tick-mark-border-radius,var(--spectrum-slider-tick-mark-border-radius)\n);content:\"\";display:block;inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/2);position:absolute}.tick .tickLabel{align-items:center;display:flex;font-size:var(--mod-font-size-75,var(--spectrum-font-size-75));justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-inline:0;position:absolute}.tick:first-of-type{inset-inline-start:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:first-of-type .tickLabel{inset-inline-start:0}.tick:last-of-type{inset-inline-end:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:last-of-type .tickLabel{inset-inline-end:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}:host([disabled]) .tickLabel{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{inline-size:calc(100% + var(--spectrum-slider-handle-size));inset-block-start:0;margin-inline-start:calc(var(--spectrum-slider-handle-size)/2*-1);position:absolute}.spectrum-Slider-trackContainer{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);overflow:hidden}.track:before{background:var(\n--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color))\n)}#label-container{color:var(\n--highcontrast-slider-label-text-color,var(\n--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)\n)\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#fill:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#ramp path{fill:var(\n--highcontrast-slider-ramp-track-color,var(\n--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)\n)\n)}.handle{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color,var(\n--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)\n)\n)}.handle:hover{border-color:var(\n--highcontrast-slider-handle-border-color-hover,var(\n--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)\n)\n)}.handle.handle-highlight{border-color:var(\n--highcontrast-slider-handle-border-color-key-focus,var(\n--mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)\n)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(--spectrum-focus-indicator-thickness) var(\n--highcontrast-slider-handle-focus-ring-color-key-focus,var(\n--mod-slider-handle-focus-ring-color-key-focus,var(--spectrum-slider-handle-focus-ring-color-key-focus)\n)\n)}.handle.dragging,.handle:active{border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=ramp]) .handle{background:var(\n--mod-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)\n);box-shadow:0 0 0 var(--spectrum-slider-handle-gap) var(\n--highcontrast-slider-ramp-handle-border-color-active,var(\n--mod-sectrum-slider-ramp-handle-border-color-active,var(--spectrum-slider-ramp-handle-border-color-active)\n)\n)}@media (forced-colors:active){:host([variant=ramp]) .handle{background-color:ButtonFace;border-color:ButtonText;box-shadow:0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;forced-color-adjust:none}}.input{background:none}.tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color,var(\n--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)\n)\n)}.handle.dragging{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}:host([disabled]) #label-container{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}:host([disabled]) .handle{background:var(\n--highcontrast-slider-handle-disabled-background-color,var(\n--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-disabled,var(\n--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)\n)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--highcontrast-slider-handle-background-color-disabled,var(\n--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))\n)}:host([disabled]) .track:before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #fill:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #ramp path{fill:var(\n--highcontrast-slider-ramp-track-color-disabled,var(\n--mod-slider-ramp-track-color-disabled,var(--spectrum-slider-ramp-track-color-disabled)\n)\n)}:host([disabled]) .tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color-disabled,var(\n--mod-slider-tick-mark-color-disabled,var(--spectrum-slider-tick-mark-color-disabled)\n)\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(\n--system-spectrum-slider-track-fill-color\n);--spectrum-slider-ramp-track-color:var(\n--system-spectrum-slider-ramp-track-color\n);--spectrum-slider-ramp-track-color-disabled:var(\n--system-spectrum-slider-ramp-track-color-disabled\n);--spectrum-slider-handle-background-color:var(\n--system-spectrum-slider-handle-background-color\n);--spectrum-slider-handle-background-color-disabled:var(\n--system-spectrum-slider-handle-background-color-disabled\n);--spectrum-slider-ramp-handle-background-color:var(\n--system-spectrum-slider-ramp-handle-background-color\n);--spectrum-slider-ticks-handle-background-color:var(\n--system-spectrum-slider-ticks-handle-background-color\n);--spectrum-slider-handle-border-color:var(\n--system-spectrum-slider-handle-border-color\n);--spectrum-slider-handle-disabled-background-color:var(\n--system-spectrum-slider-handle-disabled-background-color\n);--spectrum-slider-tick-mark-color:var(\n--system-spectrum-slider-tick-mark-color\n);--spectrum-slider-handle-border-color-hover:var(\n--system-spectrum-slider-handle-border-color-hover\n);--spectrum-slider-handle-border-color-down:var(\n--system-spectrum-slider-handle-border-color-down\n);--spectrum-slider-handle-border-color-key-focus:var(\n--system-spectrum-slider-handle-border-color-key-focus\n);--spectrum-slider-handle-focus-ring-color-key-focus:var(\n--system-spectrum-slider-handle-focus-ring-color-key-focus\n)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label number\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-medium);--spectrum-slider-control-height:var(--spectrum-component-height-100);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-medium\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-medium\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-small\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-small\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-100)}:host([size=l]){--spectrum-slider-font-size:var(--spectrum-font-size-100);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-large);--spectrum-slider-control-height:var(--spectrum-component-height-200);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=xl]){--spectrum-slider-font-size:var(--spectrum-font-size-200);--spectrum-slider-handle-size:var(\n--spectrum-slider-handle-size-extra-large\n);--spectrum-slider-control-height:var(--spectrum-component-height-300);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-extra-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-extra-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:22px}:host{--spectrum-slider-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-slider-min-size:var(--spectrum-spacing-900);--spectrum-slider-track-corner-radius:var(--spectrum-corner-radius-75);--spectrum-slider-label-margin-start:var(--spectrum-spacing-300);--spectrum-slider-handle-border-width:var(--spectrum-border-width-200);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-size)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);--spectrum-slider-track-fill-thickness:var(\n--spectrum-slider-track-thickness\n);--spectrum-slider-tick-mark-width:var(--spectrum-border-width-200);--spectrum-slider-tick-mark-border-radius:2px;--spectrum-slider-tick-handle-background-color:var(--spectrum-gray-100);--spectrum-slider-track-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-track-fill-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-handle-border-color-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-slider-label-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-slider-label-text-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-slider-tick-mark-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-ramp-handle-border-color-active:var(--spectrum-gray-100);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-range-track-reset:0}:host{display:block;min-inline-size:var(\n--mod-slider-min-size,var(--spectrum-slider-min-size)\n);position:relative;-webkit-user-select:none;user-select:none;z-index:1}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container,.spectrum-Slider--sideLabel #label-container+#track{margin-block-start:0}.spectrum-Slider--sideLabel #controls{margin-inline-end:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n)}.spectrum-Slider--sideLabel #value{inline-size:var(\n--mod-slider-value-inline-size,var(--spectrum-slider-value-inline-size)\n);margin-inline-start:var(\n--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline)\n);text-align:start}#controls{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);box-sizing:border-box;cursor:pointer;display:inline-block;inline-size:calc(100% - var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n)*2);margin-inline-start:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n);position:relative;vertical-align:top;z-index:auto}#label-container+#track{margin-block-start:calc(var(--spectrum-slider-control-to-field-label)*-1)}:host([tick-labels]){margin-block-end:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n)}#fill,.track{block-size:var(\n--mod-slider-track-fill-thickness,var(--spectrum-slider-track-fill-thickness)\n);box-sizing:border-box;inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-track-fill-thickness,\nvar(--spectrum-slider-track-fill-thickness)\n)/2);inset-inline:0 auto;margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-block:0;padding-inline-end:var(\n--mod-slider-handle-gap,var(--spectrum-slider-handle-gap)\n);padding-inline-start:0;pointer-events:none;position:absolute;z-index:1}#fill:before,.track:before{block-size:100%;border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;content:\"\";display:block}.track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track~.track{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-block:0;padding-inline-end:0;padding-inline-start:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n)}:host([variant=range]) .track~.track{inset-inline:auto;margin-inline:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-inline:var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n) var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n)}#fill{margin-inline-start:0;padding-block:0;padding-inline-end:0;padding-inline-start:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)))}.spectrum-Slider-fill--right{padding-block:0;padding-inline-end:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));padding-inline-start:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{inset-inline-end:auto;inset-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n);padding-inline-start:0}:host([variant=range]) .track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}:host([variant=range]) .track:last-of-type{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:0;padding-inline-start:var(--spectrum-slider-track-handleoffset)}:host([variant=range]) .track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}#ramp{block-size:var(\n--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-height)\n);inset-inline-end:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);inset-inline-start:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-block-start:calc(var(\n--mod-slider-ramp-track-height,\nvar(--spectrum-slider-ramp-track-height)\n)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:var(\n--mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)\n);border-style:solid;border-width:var(\n--mod-slider-handle-border-width,var(--spectrum-slider-handle-border-width)\n);box-sizing:border-box;display:inline-block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/2);inset-inline-start:0;margin-block:0;margin-inline:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/-2) 0;outline:none;position:absolute;transition:border-width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down)\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:100%;content:\" \";display:block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%);transition:box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,inline-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,block-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}.handle.handle-highlight:before{block-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2);inline-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2)}.input{-webkit-appearance:none;block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border:0;cursor:default;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:var(\n--mod-slider-input-top-size,var(--spectrum-slider-input-top-size)\n);inset-inline-start:var(\n--mod-slider-input-left,var(--spectrum-slider-input-left)\n);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute}.input:focus{outline:none}#label-container{align-items:center;display:flex;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));inline-size:auto;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-start:var(\n--mod-slider-label-top-to-text,var(--spectrum-slider-label-top-to-text)\n);position:relative}#label-container:lang(ja),#label-container:lang(ko),#label-container:lang(zh){line-height:var(\n--mod-slider-cjk-line-height,var(--spectrum-slider-cjk-line-height)\n)}#label{flex-grow:1;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));padding-inline-start:0}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0;margin-inline-start:var(\n--mod-slider-label-margin-start,var(--spectrum-slider-label-margin-start)\n);padding-inline-end:0;text-align:end}:host([variant=tick]) .handle{background-color:var(\n--highcontrast-slider-tick-handle-background-color,var(\n--mod-slider-tick-handle-background-color,var(--spectrum-slider-tick-handle-background-color)\n)\n)}:host([variant=tick]) #controls{margin-block-start:calc(var(--spectrum-text-to-visual-75) - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2 - var(\n--mod-slider-track-thickness,\nvar(--spectrum-slider-track-thickness)\n)/2)}:host([variant=tick]) .tickLabel{margin-block-start:calc(var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n) + var(--spectrum-text-to-visual-75))}.ticks{display:flex;justify-content:space-between;margin-inline:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);z-index:0}.ticks~.spectrum-Slider-handleContainer .handle{background:var(\n--mod-slider-ticks-handle-background-color,var(--spectrum-slider-ticks-handle-background-color)\n)}.tick{inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2);position:relative}.tick:after{block-size:var(\n--mod-slider-tick-mark-height,var(--spectrum-slider-tick-mark-height)\n);border-radius:var(\n--mod-slider-tick-mark-border-radius,var(--spectrum-slider-tick-mark-border-radius)\n);content:\"\";display:block;inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/2);position:absolute}.tick .tickLabel{align-items:center;display:flex;font-size:var(--mod-font-size-75,var(--spectrum-font-size-75));justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-inline:0;position:absolute}.tick:first-of-type{inset-inline-start:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:first-of-type .tickLabel{inset-inline-start:0}.tick:last-of-type{inset-inline-end:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:last-of-type .tickLabel{inset-inline-end:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}:host([disabled]) .tickLabel{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{inline-size:calc(100% + var(--spectrum-slider-handle-size));inset-block-start:0;margin-inline-start:calc(var(--spectrum-slider-handle-size)/2*-1);position:absolute}.spectrum-Slider-trackContainer{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);overflow:hidden}.track:before{background:var(\n--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color))\n)}#label-container{color:var(\n--highcontrast-slider-label-text-color,var(\n--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)\n)\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#fill:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#ramp path{fill:var(\n--highcontrast-slider-ramp-track-color,var(\n--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)\n)\n)}.handle{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color,var(\n--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)\n)\n)}.handle:hover{border-color:var(\n--highcontrast-slider-handle-border-color-hover,var(\n--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)\n)\n)}.handle.handle-highlight{border-color:var(\n--highcontrast-slider-handle-border-color-key-focus,var(\n--mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)\n)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(--spectrum-focus-indicator-thickness) var(\n--highcontrast-slider-handle-focus-ring-color-key-focus,var(\n--mod-slider-handle-focus-ring-color-key-focus,var(--spectrum-slider-handle-focus-ring-color-key-focus)\n)\n)}.handle.dragging,.handle:active{border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=ramp]) .handle{background:var(\n--mod-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)\n);box-shadow:0 0 0 var(--spectrum-slider-handle-gap) var(\n--highcontrast-slider-ramp-handle-border-color-active,var(\n--mod-sectrum-slider-ramp-handle-border-color-active,var(--spectrum-slider-ramp-handle-border-color-active)\n)\n)}@media (forced-colors:active){:host([variant=ramp]) .handle{background-color:ButtonFace;border-color:ButtonText;box-shadow:0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;forced-color-adjust:none}}.input{background:none}.tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color,var(\n--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)\n)\n)}.handle.dragging{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}:host([disabled]) #label-container{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}:host([disabled]) .handle{background:var(\n--highcontrast-slider-handle-disabled-background-color,var(\n--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-disabled,var(\n--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)\n)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--highcontrast-slider-handle-background-color-disabled,var(\n--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))\n)}:host([disabled]) .track:before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #fill:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #ramp path{fill:var(\n--highcontrast-slider-ramp-track-color-disabled,var(\n--mod-slider-ramp-track-color-disabled,var(--spectrum-slider-ramp-track-color-disabled)\n)\n)}:host([disabled]) .tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color-disabled,var(\n--mod-slider-tick-mark-color-disabled,var(--spectrum-slider-tick-mark-color-disabled)\n)\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(\n--system-spectrum-slider-track-fill-color\n);--spectrum-slider-ramp-track-color:var(\n--system-spectrum-slider-ramp-track-color\n);--spectrum-slider-ramp-track-color-disabled:var(\n--system-spectrum-slider-ramp-track-color-disabled\n);--spectrum-slider-handle-background-color:var(\n--system-spectrum-slider-handle-background-color\n);--spectrum-slider-handle-background-color-disabled:var(\n--system-spectrum-slider-handle-background-color-disabled\n);--spectrum-slider-ramp-handle-background-color:var(\n--system-spectrum-slider-ramp-handle-background-color\n);--spectrum-slider-ticks-handle-background-color:var(\n--system-spectrum-slider-ticks-handle-background-color\n);--spectrum-slider-handle-border-color:var(\n--system-spectrum-slider-handle-border-color\n);--spectrum-slider-handle-disabled-background-color:var(\n--system-spectrum-slider-handle-disabled-background-color\n);--spectrum-slider-tick-mark-color:var(\n--system-spectrum-slider-tick-mark-color\n);--spectrum-slider-handle-border-color-hover:var(\n--system-spectrum-slider-handle-border-color-hover\n);--spectrum-slider-handle-border-color-down:var(\n--system-spectrum-slider-handle-border-color-down\n);--spectrum-slider-handle-border-color-key-focus:var(\n--system-spectrum-slider-handle-border-color-key-focus\n);--spectrum-slider-handle-focus-ring-color-key-focus:var(\n--system-spectrum-slider-handle-focus-ring-color-key-focus\n)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label number\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end}\n`;\nexport default styles;"],
   "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiVf,eAAe;",
   "names": []
 }

package/src/slider.css.js

@@ -333,6 +333,6 @@ var(--spectrum-slider-tick-mark-width)
 --system-spectrum-slider-handle-border-color-key-focus
 );--spectrum-slider-handle-focus-ring-color-key-focus:var(
 --system-spectrum-slider-handle-focus-ring-color-key-focus
-)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}
+)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end}
 `;export default e;
 //# sourceMappingURL=slider.css.js.map

package/src/slider.css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["slider.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-medium);--spectrum-slider-control-height:var(--spectrum-component-height-100);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-medium\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-medium\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-small\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-small\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-100)}:host([size=l]){--spectrum-slider-font-size:var(--spectrum-font-size-100);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-large);--spectrum-slider-control-height:var(--spectrum-component-height-200);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=xl]){--spectrum-slider-font-size:var(--spectrum-font-size-200);--spectrum-slider-handle-size:var(\n--spectrum-slider-handle-size-extra-large\n);--spectrum-slider-control-height:var(--spectrum-component-height-300);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-extra-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-extra-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:22px}:host{--spectrum-slider-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-slider-min-size:var(--spectrum-spacing-900);--spectrum-slider-track-corner-radius:var(--spectrum-corner-radius-75);--spectrum-slider-label-margin-start:var(--spectrum-spacing-300);--spectrum-slider-handle-border-width:var(--spectrum-border-width-200);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-size)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);--spectrum-slider-track-fill-thickness:var(\n--spectrum-slider-track-thickness\n);--spectrum-slider-tick-mark-width:var(--spectrum-border-width-200);--spectrum-slider-tick-mark-border-radius:2px;--spectrum-slider-tick-handle-background-color:var(--spectrum-gray-100);--spectrum-slider-track-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-track-fill-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-handle-border-color-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-slider-label-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-slider-label-text-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-slider-tick-mark-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-ramp-handle-border-color-active:var(--spectrum-gray-100);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-range-track-reset:0}:host{display:block;min-inline-size:var(\n--mod-slider-min-size,var(--spectrum-slider-min-size)\n);position:relative;-webkit-user-select:none;user-select:none;z-index:1}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container,.spectrum-Slider--sideLabel #label-container+#track{margin-block-start:0}.spectrum-Slider--sideLabel #controls{margin-inline-end:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n)}.spectrum-Slider--sideLabel #value{inline-size:var(\n--mod-slider-value-inline-size,var(--spectrum-slider-value-inline-size)\n);margin-inline-start:var(\n--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline)\n);text-align:start}#controls{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);box-sizing:border-box;cursor:pointer;display:inline-block;inline-size:calc(100% - var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n)*2);margin-inline-start:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n);position:relative;vertical-align:top;z-index:auto}#label-container+#track{margin-block-start:calc(var(--spectrum-slider-control-to-field-label)*-1)}:host([tick-labels]){margin-block-end:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n)}#fill,.track{block-size:var(\n--mod-slider-track-fill-thickness,var(--spectrum-slider-track-fill-thickness)\n);box-sizing:border-box;inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-track-fill-thickness,\nvar(--spectrum-slider-track-fill-thickness)\n)/2);inset-inline:0 auto;margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-block:0;padding-inline-end:var(\n--mod-slider-handle-gap,var(--spectrum-slider-handle-gap)\n);padding-inline-start:0;pointer-events:none;position:absolute;z-index:1}#fill:before,.track:before{block-size:100%;border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;content:\"\";display:block}.track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track~.track{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-block:0;padding-inline-end:0;padding-inline-start:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n)}:host([variant=range]) .track~.track{inset-inline:auto;margin-inline:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-inline:var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n) var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n)}#fill{margin-inline-start:0;padding-block:0;padding-inline-end:0;padding-inline-start:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)))}.spectrum-Slider-fill--right{padding-block:0;padding-inline-end:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));padding-inline-start:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{inset-inline-end:auto;inset-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n);padding-inline-start:0}:host([variant=range]) .track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}:host([variant=range]) .track:last-of-type{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:0;padding-inline-start:var(--spectrum-slider-track-handleoffset)}:host([variant=range]) .track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}#ramp{block-size:var(\n--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-height)\n);inset-inline-end:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);inset-inline-start:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-block-start:calc(var(\n--mod-slider-ramp-track-height,\nvar(--spectrum-slider-ramp-track-height)\n)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:var(\n--mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)\n);border-style:solid;border-width:var(\n--mod-slider-handle-border-width,var(--spectrum-slider-handle-border-width)\n);box-sizing:border-box;display:inline-block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/2);inset-inline-start:0;margin-block:0;margin-inline:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/-2) 0;outline:none;position:absolute;transition:border-width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down)\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:100%;content:\" \";display:block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%);transition:box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,inline-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,block-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}.handle.handle-highlight:before{block-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2);inline-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2)}.input{-webkit-appearance:none;block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border:0;cursor:default;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:var(\n--mod-slider-input-top-size,var(--spectrum-slider-input-top-size)\n);inset-inline-start:var(\n--mod-slider-input-left,var(--spectrum-slider-input-left)\n);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute}.input:focus{outline:none}#label-container{align-items:center;display:flex;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));inline-size:auto;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-start:var(\n--mod-slider-label-top-to-text,var(--spectrum-slider-label-top-to-text)\n);position:relative}#label-container:lang(ja),#label-container:lang(ko),#label-container:lang(zh){line-height:var(\n--mod-slider-cjk-line-height,var(--spectrum-slider-cjk-line-height)\n)}#label{flex-grow:1;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));padding-inline-start:0}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0;margin-inline-start:var(\n--mod-slider-label-margin-start,var(--spectrum-slider-label-margin-start)\n);padding-inline-end:0;text-align:end}:host([variant=tick]) .handle{background-color:var(\n--highcontrast-slider-tick-handle-background-color,var(\n--mod-slider-tick-handle-background-color,var(--spectrum-slider-tick-handle-background-color)\n)\n)}:host([variant=tick]) #controls{margin-block-start:calc(var(--spectrum-text-to-visual-75) - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2 - var(\n--mod-slider-track-thickness,\nvar(--spectrum-slider-track-thickness)\n)/2)}:host([variant=tick]) .tickLabel{margin-block-start:calc(var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n) + var(--spectrum-text-to-visual-75))}.ticks{display:flex;justify-content:space-between;margin-inline:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);z-index:0}.ticks~.spectrum-Slider-handleContainer .handle{background:var(\n--mod-slider-ticks-handle-background-color,var(--spectrum-slider-ticks-handle-background-color)\n)}.tick{inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2);position:relative}.tick:after{block-size:var(\n--mod-slider-tick-mark-height,var(--spectrum-slider-tick-mark-height)\n);border-radius:var(\n--mod-slider-tick-mark-border-radius,var(--spectrum-slider-tick-mark-border-radius)\n);content:\"\";display:block;inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/2);position:absolute}.tick .tickLabel{align-items:center;display:flex;font-size:var(--mod-font-size-75,var(--spectrum-font-size-75));justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-inline:0;position:absolute}.tick:first-of-type{inset-inline-start:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:first-of-type .tickLabel{inset-inline-start:0}.tick:last-of-type{inset-inline-end:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:last-of-type .tickLabel{inset-inline-end:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}:host([disabled]) .tickLabel{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{inline-size:calc(100% + var(--spectrum-slider-handle-size));inset-block-start:0;margin-inline-start:calc(var(--spectrum-slider-handle-size)/2*-1);position:absolute}.spectrum-Slider-trackContainer{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);overflow:hidden}.track:before{background:var(\n--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color))\n)}#label-container{color:var(\n--highcontrast-slider-label-text-color,var(\n--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)\n)\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#fill:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#ramp path{fill:var(\n--highcontrast-slider-ramp-track-color,var(\n--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)\n)\n)}.handle{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color,var(\n--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)\n)\n)}.handle:hover{border-color:var(\n--highcontrast-slider-handle-border-color-hover,var(\n--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)\n)\n)}.handle.handle-highlight{border-color:var(\n--highcontrast-slider-handle-border-color-key-focus,var(\n--mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)\n)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(--spectrum-focus-indicator-thickness) var(\n--highcontrast-slider-handle-focus-ring-color-key-focus,var(\n--mod-slider-handle-focus-ring-color-key-focus,var(--spectrum-slider-handle-focus-ring-color-key-focus)\n)\n)}.handle.dragging,.handle:active{border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=ramp]) .handle{background:var(\n--mod-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)\n);box-shadow:0 0 0 var(--spectrum-slider-handle-gap) var(\n--highcontrast-slider-ramp-handle-border-color-active,var(\n--mod-sectrum-slider-ramp-handle-border-color-active,var(--spectrum-slider-ramp-handle-border-color-active)\n)\n)}@media (forced-colors:active){:host([variant=ramp]) .handle{background-color:ButtonFace;border-color:ButtonText;box-shadow:0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;forced-color-adjust:none}}.input{background:none}.tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color,var(\n--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)\n)\n)}.handle.dragging{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}:host([disabled]) #label-container{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}:host([disabled]) .handle{background:var(\n--highcontrast-slider-handle-disabled-background-color,var(\n--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-disabled,var(\n--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)\n)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--highcontrast-slider-handle-background-color-disabled,var(\n--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))\n)}:host([disabled]) .track:before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #fill:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #ramp path{fill:var(\n--highcontrast-slider-ramp-track-color-disabled,var(\n--mod-slider-ramp-track-color-disabled,var(--spectrum-slider-ramp-track-color-disabled)\n)\n)}:host([disabled]) .tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color-disabled,var(\n--mod-slider-tick-mark-color-disabled,var(--spectrum-slider-tick-mark-color-disabled)\n)\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(\n--system-spectrum-slider-track-fill-color\n);--spectrum-slider-ramp-track-color:var(\n--system-spectrum-slider-ramp-track-color\n);--spectrum-slider-ramp-track-color-disabled:var(\n--system-spectrum-slider-ramp-track-color-disabled\n);--spectrum-slider-handle-background-color:var(\n--system-spectrum-slider-handle-background-color\n);--spectrum-slider-handle-background-color-disabled:var(\n--system-spectrum-slider-handle-background-color-disabled\n);--spectrum-slider-ramp-handle-background-color:var(\n--system-spectrum-slider-ramp-handle-background-color\n);--spectrum-slider-ticks-handle-background-color:var(\n--system-spectrum-slider-ticks-handle-background-color\n);--spectrum-slider-handle-border-color:var(\n--system-spectrum-slider-handle-border-color\n);--spectrum-slider-handle-disabled-background-color:var(\n--system-spectrum-slider-handle-disabled-background-color\n);--spectrum-slider-tick-mark-color:var(\n--system-spectrum-slider-tick-mark-color\n);--spectrum-slider-handle-border-color-hover:var(\n--system-spectrum-slider-handle-border-color-hover\n);--spectrum-slider-handle-border-color-down:var(\n--system-spectrum-slider-handle-border-color-down\n);--spectrum-slider-handle-border-color-key-focus:var(\n--system-spectrum-slider-handle-border-color-key-focus\n);--spectrum-slider-handle-focus-ring-color-key-focus:var(\n--system-spectrum-slider-handle-focus-ring-color-key-focus\n)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label number\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}\n`;\nexport default styles;"],
+  "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-medium);--spectrum-slider-control-height:var(--spectrum-component-height-100);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-medium\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-medium\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-small\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-75\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-small\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-100)}:host([size=l]){--spectrum-slider-font-size:var(--spectrum-font-size-100);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-large);--spectrum-slider-control-height:var(--spectrum-component-height-200);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=xl]){--spectrum-slider-font-size:var(--spectrum-font-size-200);--spectrum-slider-handle-size:var(\n--spectrum-slider-handle-size-extra-large\n);--spectrum-slider-control-height:var(--spectrum-component-height-300);--spectrum-slider-handle-border-radius:calc(var(--spectrum-corner-radius-200)*4);--spectrum-slider-handle-border-width-down:var(\n--spectrum-slider-handle-border-width-down-extra-large\n);--spectrum-slider-label-top-to-text:var(\n--spectrum-component-top-to-text-200\n);--spectrum-slider-control-to-field-label:var(\n--spectrum-slider-control-to-field-label-extra-large\n);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:22px}:host{--spectrum-slider-cjk-line-height:var(--spectrum-cjk-line-height-100);--spectrum-slider-min-size:var(--spectrum-spacing-900);--spectrum-slider-track-corner-radius:var(--spectrum-corner-radius-75);--spectrum-slider-label-margin-start:var(--spectrum-spacing-300);--spectrum-slider-handle-border-width:var(--spectrum-border-width-200);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-size)/-2);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-size)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size)/2);--spectrum-slider-input-top-size:calc(var(--spectrum-slider-handle-size)/-2/4);--spectrum-slider-track-fill-thickness:var(\n--spectrum-slider-track-thickness\n);--spectrum-slider-tick-mark-width:var(--spectrum-border-width-200);--spectrum-slider-tick-mark-border-radius:2px;--spectrum-slider-tick-handle-background-color:var(--spectrum-gray-100);--spectrum-slider-track-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-track-fill-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-handle-border-color-disabled:var(\n--spectrum-disabled-border-color\n);--spectrum-slider-label-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-slider-label-text-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-slider-tick-mark-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-slider-ramp-handle-border-color-active:var(--spectrum-gray-100);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-range-track-reset:0}:host{display:block;min-inline-size:var(\n--mod-slider-min-size,var(--spectrum-slider-min-size)\n);position:relative;-webkit-user-select:none;user-select:none;z-index:1}.spectrum-Slider--sideLabel{align-items:center;display:flex}.spectrum-Slider--sideLabel #label-container,.spectrum-Slider--sideLabel #label-container+#track{margin-block-start:0}.spectrum-Slider--sideLabel #controls{margin-inline-end:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n)}.spectrum-Slider--sideLabel #value{inline-size:var(\n--mod-slider-value-inline-size,var(--spectrum-slider-value-inline-size)\n);margin-inline-start:var(\n--mod-slider-value-side-padding-inline,var(--spectrum-slider-value-side-padding-inline)\n);text-align:start}#controls{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);box-sizing:border-box;cursor:pointer;display:inline-block;inline-size:calc(100% - var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n)*2);margin-inline-start:var(\n--mod-slider-controls-margin,var(--spectrum-slider-controls-margin)\n);position:relative;vertical-align:top;z-index:auto}#label-container+#track{margin-block-start:calc(var(--spectrum-slider-control-to-field-label)*-1)}:host([tick-labels]){margin-block-end:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n)}#fill,.track{block-size:var(\n--mod-slider-track-fill-thickness,var(--spectrum-slider-track-fill-thickness)\n);box-sizing:border-box;inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-track-fill-thickness,\nvar(--spectrum-slider-track-fill-thickness)\n)/2);inset-inline:0 auto;margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-block:0;padding-inline-end:var(\n--mod-slider-handle-gap,var(--spectrum-slider-handle-gap)\n);padding-inline-start:0;pointer-events:none;position:absolute;z-index:1}#fill:before,.track:before{block-size:100%;border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;content:\"\";display:block}.track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}.track~.track{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-block:0;padding-inline-end:0;padding-inline-start:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n)}:host([variant=range]) .track~.track{inset-inline:auto;margin-inline:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);padding-inline:var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n) var(\n--mod-slider-track-middle-handleoffset,var(--spectrum-slider-track-middle-handleoffset)\n)}#fill{margin-inline-start:0;padding-block:0;padding-inline-end:0;padding-inline-start:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)))}.spectrum-Slider-fill--right{padding-block:0;padding-inline-end:calc(var(\n--mod-slider-controls-margin,\nvar(--spectrum-slider-controls-margin)\n) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));padding-inline-start:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([variant=range]) .track:first-of-type{inset-inline-end:auto;inset-inline-start:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);margin-inline-start:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:var(\n--mod-slider-track-handleoffset,var(--spectrum-slider-track-handleoffset)\n);padding-inline-start:0}:host([variant=range]) .track:first-of-type:before{border-end-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-start-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}:host([variant=range]) .track:last-of-type{inset-inline-end:var(\n--mod-slider-range-track-reset,var(--spectrum-slider-range-track-reset)\n);inset-inline-start:auto;margin-inline-end:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);padding-inline-end:0;padding-inline-start:var(--spectrum-slider-track-handleoffset)}:host([variant=range]) .track:last-of-type:before{border-end-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n);border-start-end-radius:var(\n--mod-slider-track-corner-radius,var(--spectrum-slider-track-corner-radius)\n)}#ramp{block-size:var(\n--mod-slider-ramp-track-height,var(--spectrum-slider-ramp-track-height)\n);inset-inline-end:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);inset-inline-start:var(\n--spectrum-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);margin-block-start:calc(var(\n--mod-slider-ramp-track-height,\nvar(--spectrum-slider-ramp-track-height)\n)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:var(\n--mod-slider-handle-border-radius,var(--spectrum-slider-handle-border-radius)\n);border-style:solid;border-width:var(\n--mod-slider-handle-border-width,var(--spectrum-slider-handle-border-width)\n);box-sizing:border-box;display:inline-block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height))/2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/2);inset-inline-start:0;margin-block:0;margin-inline:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size))/-2) 0;outline:none;position:absolute;transition:border-width var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-in-out;z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--mod-slider-handle-border-width-down,var(--spectrum-slider-handle-border-width-down)\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border-radius:100%;content:\" \";display:block;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%);transition:box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,inline-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,block-size var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out}.handle.handle-highlight:before{block-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2);inline-size:calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))*2)}.input{-webkit-appearance:none;block-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);border:0;cursor:default;inline-size:var(\n--mod-slider-handle-size,var(--spectrum-slider-handle-size)\n);inset-block-start:var(\n--mod-slider-input-top-size,var(--spectrum-slider-input-top-size)\n);inset-inline-start:var(\n--mod-slider-input-left,var(--spectrum-slider-input-left)\n);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute}.input:focus{outline:none}#label-container{align-items:center;display:flex;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));inline-size:auto;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));margin-block-start:var(\n--mod-slider-label-top-to-text,var(--spectrum-slider-label-top-to-text)\n);position:relative}#label-container:lang(ja),#label-container:lang(ko),#label-container:lang(zh){line-height:var(\n--mod-slider-cjk-line-height,var(--spectrum-slider-cjk-line-height)\n)}#label{flex-grow:1;font-size:var(--mod-slider-font-size,var(--spectrum-slider-font-size));padding-inline-start:0}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0;margin-inline-start:var(\n--mod-slider-label-margin-start,var(--spectrum-slider-label-margin-start)\n);padding-inline-end:0;text-align:end}:host([variant=tick]) .handle{background-color:var(\n--highcontrast-slider-tick-handle-background-color,var(\n--mod-slider-tick-handle-background-color,var(--spectrum-slider-tick-handle-background-color)\n)\n)}:host([variant=tick]) #controls{margin-block-start:calc(var(--spectrum-text-to-visual-75) - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2 - var(\n--mod-slider-track-thickness,\nvar(--spectrum-slider-track-thickness)\n)/2)}:host([variant=tick]) .tickLabel{margin-block-start:calc(var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n) + var(--spectrum-text-to-visual-75))}.ticks{display:flex;justify-content:space-between;margin-inline:var(\n--mod-slider-track-margin-offset,var(--spectrum-slider-track-margin-offset)\n);z-index:0}.ticks~.spectrum-Slider-handleContainer .handle{background:var(\n--mod-slider-ticks-handle-background-color,var(--spectrum-slider-ticks-handle-background-color)\n)}.tick{inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height))/2 - var(\n--mod-slider-tick-mark-height,\nvar(--spectrum-slider-tick-mark-height)\n)/2);position:relative}.tick:after{block-size:var(\n--mod-slider-tick-mark-height,var(--spectrum-slider-tick-mark-height)\n);border-radius:var(\n--mod-slider-tick-mark-border-radius,var(--spectrum-slider-tick-mark-border-radius)\n);content:\"\";display:block;inline-size:var(\n--mod-slider-tick-mark-width,var(--spectrum-slider-tick-mark-width)\n);inset-block-start:0;inset-inline-start:calc(50% - var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/2);position:absolute}.tick .tickLabel{align-items:center;display:flex;font-size:var(--mod-font-size-75,var(--spectrum-font-size-75));justify-content:center;line-height:var(--mod-line-height-100,var(--spectrum-line-height-100))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-inline:0;position:absolute}.tick:first-of-type{inset-inline-start:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:first-of-type .tickLabel{inset-inline-start:0}.tick:last-of-type{inset-inline-end:calc(var(\n--mod-slider-tick-mark-width,\nvar(--spectrum-slider-tick-mark-width)\n)/-2)}.tick:last-of-type .tickLabel{inset-inline-end:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}:host([disabled]) .tickLabel{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{inline-size:calc(100% + var(--spectrum-slider-handle-size));inset-block-start:0;margin-inline-start:calc(var(--spectrum-slider-handle-size)/2*-1);position:absolute}.spectrum-Slider-trackContainer{block-size:var(\n--mod-slider-control-height,var(--spectrum-slider-control-height)\n);overflow:hidden}.track:before{background:var(\n--highcontrast-slider-track-color,var(--mod-slider-track-color,var(--spectrum-slider-track-color))\n)}#label-container{color:var(\n--highcontrast-slider-label-text-color,var(\n--mod-slider-label-text-color,var(--spectrum-slider-label-text-color)\n)\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#fill:before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}#ramp path{fill:var(\n--highcontrast-slider-ramp-track-color,var(\n--mod-slider-ramp-track-color,var(--spectrum-slider-ramp-track-color)\n)\n)}.handle{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color,var(\n--mod-slider-handle-border-color,var(--spectrum-slider-handle-border-color)\n)\n)}.handle:hover{border-color:var(\n--highcontrast-slider-handle-border-color-hover,var(\n--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover)\n)\n)}.handle.handle-highlight{border-color:var(\n--highcontrast-slider-handle-border-color-key-focus,var(\n--mod-slider-handle-border-color-key-focus,var(--spectrum-slider-handle-border-color-key-focus)\n)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(--spectrum-focus-indicator-thickness) var(\n--highcontrast-slider-handle-focus-ring-color-key-focus,var(\n--mod-slider-handle-focus-ring-color-key-focus,var(--spectrum-slider-handle-focus-ring-color-key-focus)\n)\n)}.handle.dragging,.handle:active{border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=ramp]) .handle{background:var(\n--mod-slider-ramp-handle-background-color,var(--spectrum-slider-ramp-handle-background-color)\n);box-shadow:0 0 0 var(--spectrum-slider-handle-gap) var(\n--highcontrast-slider-ramp-handle-border-color-active,var(\n--mod-sectrum-slider-ramp-handle-border-color-active,var(--spectrum-slider-ramp-handle-border-color-active)\n)\n)}@media (forced-colors:active){:host([variant=ramp]) .handle{background-color:ButtonFace;border-color:ButtonText;box-shadow:0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;forced-color-adjust:none}}.input{background:none}.tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color,var(\n--mod-slider-tick-mark-color,var(--spectrum-slider-tick-mark-color)\n)\n)}.handle.dragging{background:var(\n--highcontrast-slider-handle-background-color,var(\n--mod-slider-handle-background-color,var(--spectrum-slider-handle-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-down,var(\n--mod-slider-handle-border-color-down,var(--spectrum-slider-handle-border-color-down)\n)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-fill-color,var(\n--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color)\n)\n)}:host([disabled]) #label-container{color:var(\n--highcontrast-slider-label-text-color-disabled,var(\n--mod-slider-label-text-color-disabled,var(--spectrum-slider-label-text-color-disabled)\n)\n)}:host([disabled]) .handle{background:var(\n--highcontrast-slider-handle-disabled-background-color,var(\n--mod-slider-handle-disabled-background-color,var(--spectrum-slider-handle-disabled-background-color)\n)\n);border-color:var(\n--highcontrast-slider-handle-border-color-disabled,var(\n--mod-slider-handle-border-color-disabled,var(--spectrum-slider-handle-border-color-disabled)\n)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--highcontrast-slider-handle-background-color-disabled,var(\n--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color))\n)}:host([disabled]) .track:before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #fill:before{background:var(\n--highcontrast-slider-track-fill-color-disabled,var(\n--mod-slider-track-fill-color-disabled,var(--spectrum-slider-track-fill-color-disabled)\n)\n)}:host([disabled]) #ramp path{fill:var(\n--highcontrast-slider-ramp-track-color-disabled,var(\n--mod-slider-ramp-track-color-disabled,var(--spectrum-slider-ramp-track-color-disabled)\n)\n)}:host([disabled]) .tick:after{background-color:var(\n--highcontrast-slider-tick-mark-color-disabled,var(\n--mod-slider-tick-mark-color-disabled,var(--spectrum-slider-tick-mark-color-disabled)\n)\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--highcontrast-slider-track-color-disabled,var(\n--mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled)\n)\n)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var(\n--system-spectrum-slider-track-fill-color\n);--spectrum-slider-ramp-track-color:var(\n--system-spectrum-slider-ramp-track-color\n);--spectrum-slider-ramp-track-color-disabled:var(\n--system-spectrum-slider-ramp-track-color-disabled\n);--spectrum-slider-handle-background-color:var(\n--system-spectrum-slider-handle-background-color\n);--spectrum-slider-handle-background-color-disabled:var(\n--system-spectrum-slider-handle-background-color-disabled\n);--spectrum-slider-ramp-handle-background-color:var(\n--system-spectrum-slider-ramp-handle-background-color\n);--spectrum-slider-ticks-handle-background-color:var(\n--system-spectrum-slider-ticks-handle-background-color\n);--spectrum-slider-handle-border-color:var(\n--system-spectrum-slider-handle-border-color\n);--spectrum-slider-handle-disabled-background-color:var(\n--system-spectrum-slider-handle-disabled-background-color\n);--spectrum-slider-tick-mark-color:var(\n--system-spectrum-slider-tick-mark-color\n);--spectrum-slider-handle-border-color-hover:var(\n--system-spectrum-slider-handle-border-color-hover\n);--spectrum-slider-handle-border-color-down:var(\n--system-spectrum-slider-handle-border-color-down\n);--spectrum-slider-handle-border-color-key-focus:var(\n--system-spectrum-slider-handle-border-color-key-focus\n);--spectrum-slider-handle-focus-ring-color-key-focus:var(\n--system-spectrum-slider-handle-focus-ring-color-key-focus\n)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label number\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end}\n`;\nexport default styles;"],
   "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiVf,eAAeC",
   "names": ["css", "styles"]
 }

package/stories/slider.stories.js

@@ -324,6 +324,28 @@ export const editableCustom = (args = {}) => {
     `;
 };
 editableCustom.decorators = [editableDecorator];
+export const editableWithoutVisibleLabels = (args = {}) => {
+  return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                max="1"
+                min="0"
+                value=".5"
+                step="0.01"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: "percent" }}
+                ...=${spreadProps(args)}
+            >
+                Opacity
+            </sp-slider>
+        </div>
+    `;
+};
+editableWithoutVisibleLabels.args = {
+  labelVisibility: "none"
+};
 export const hideStepper = (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 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=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleValueLabel.args = {\n    labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleLabels.args = {\n    labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'px',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n    constructor() {\n        super();\n        this.numberFieldLoaderPromise = new Promise((res) => {\n            customElements.whenDefined('sp-number-field').then(() => {\n                res(true);\n            });\n        });\n    }\n\n    private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.numberFieldLoaderPromise;\n    }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <number-field-defined></number-field-defined>\n    `;\n};\n\nexport const max20 = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 200px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"20\"\n                min=\"0\"\n                value=\"5\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Max 20\n            </sp-slider>\n        </div>\n    `;\n};\nmax20.swc_vrt = {\n    skip: true,\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                disabled\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"width: 500px; margin: 12px 20px; --mod-stepper-width: 150px;\"\n        >\n            <sp-slider\n                editable\n                max=\"24\"\n                min=\"0\"\n                value=\"12.75\"\n                step=\"0.25\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'unit', unit: 'hour' }}\n                ...=${spreadProps(args)}\n            >\n                Hours\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                hide-stepper\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"\n                width: 500px;\n                margin: 12px 20px;\n            \"\n        >\n            <sp-slider\n                style=\"\n                    --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);\n                    --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);\n                \"\n                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": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP;AAAA,EAGI;AAAA,OACG;AACP,SAAS,mBAAmB;AAE5B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,SAAS,EAAE,QAAQ,QAAQ;AAAA,IAC3B,UAAU,EAAE,QAAQ,SAAS;AAAA,IAC7B,SAAS;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,OAAU;AAAA,MACvC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,QACN,SAAS,CAAC,QAAW,GAAG,QAAQ;AAAA,MACpC;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,IAAI;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,MACb,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,wCAAwC;AAAA,QACzD,cAAc,EAAE,SAAS,OAAU;AAAA,MACvC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,iBAAiB;AAAA,EACrB;AACJ;AAWA,MAAM,cACF,CAAC,EAAE,SAAS,SAAS,MACrB,CAAC,UAAuB;AACpB,QAAM,EAAE,MAAM,IAAI,MAAM;AACxB,MAAI,WAAW,MAAM,SAAS,SAAS;AACnC,YAAQ,MAAM,SAAS,CAAC;AAAA,EAC5B,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,aAAS,MAAM,SAAS,CAAC;AAAA,EAC7B;AACJ;AAEJ,MAAM,oBACF,CAAC,EAAE,SAAS,SAAS,MACrB,CAAC,UAAuB;AACpB,QAAM,SAAS,MAAM;AACrB,MAAI,OAAO,SAAS,MAAM;AACtB,QAAI,OAAO,OAAO,UAAU,UAAU;AAClC,YAAM,QAAQ,KAAK,UAAU,OAAO,OAAO,MAAM,CAAC;AAClD,UAAI,WAAW,MAAM,SAAS,SAAS;AACnC,gBAAQ,KAAK;AAAA,MACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,iBAAS,KAAK;AAAA,MAClB;AAAA,IACJ,OAAO;AACH,YAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,OAAO,KAAK;AAC7C,UAAI,WAAW,MAAM,SAAS,SAAS;AACnC,gBAAQ,KAAK;AAAA,MACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,iBAAS,KAAK;AAAA,MAClB;AAAA,IACJ;AAAA,EACJ;AACJ;AAEG,aAAM,UAAU,CAAC,OAAkB,CAAC,MAAsB;AAC7D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,UAAU,CAAC;AAAA,sBAC/B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEO,aAAM,YAAY,CAAC,OAAkB,CAAC,MAAsB;AAC/D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,UAAU,CAAC;AAAA,sBAC/B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,qBAAqB,CAAC,OAAkB,CAAC,MAAsB;AACxE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,UAAU,CAAC;AAAA,sBAC/B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AACA,mBAAmB,OAAO;AAAA,EACtB,iBAAiB;AACrB;AAEO,aAAM,sBAAsB,CAAC,OAAkB,CAAC,MAAsB;AACzE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,UAAU,CAAC;AAAA,sBAC/B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AACA,oBAAoB,OAAO;AAAA,EACvB,iBAAiB;AACrB;AAEO,aAAM,kBAAkB,CAAC,OAAkB,CAAC,MAAsB;AACrE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,UAAU,CAAC;AAAA,sBAC/B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AACA,gBAAgB,OAAO;AAAA,EACnB,iBAAiB;AACrB;AAEO,aAAM,KAAK,CAAC,OAAkB,CAAC,MAAsB;AACxD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EACV,CAAC;AAAA,sBACK,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEA,MAAM,2BAA2B,YAAY;AAAA,EACzC,cAAc;AACV,UAAM;AAQV,SAAQ,2BAA6C,QAAQ,QAAQ,KAAK;AAPtE,SAAK,2BAA2B,IAAI,QAAQ,CAAC,QAAQ;AACjD,qBAAe,YAAY,iBAAiB,EAAE,KAAK,MAAM;AACrD,YAAI,IAAI;AAAA,MACZ,CAAC;AAAA,IACL,CAAC;AAAA,EACL;AAAA,EAIA,IAAI,iBAAmC;AACnC,WAAO,KAAK;AAAA,EAChB;AACJ;AAEA,eAAe,OAAO,wBAAwB,kBAAkB;AAEhE,MAAM,oBAAoB,CAAC,UAAgD;AACvE,SAAO;AAAA,UACD,MAAM,CAAC;AAAA;AAAA;AAGjB;AAEO,aAAM,QAAQ,CAAC,OAAkB,CAAC,MAAsB;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,sBACrB,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AACA,MAAM,UAAU;AAAA,EACZ,MAAM;AACV;AAEO,aAAM,WAAW,CAAC,OAAkB,CAAC,MAAsB;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,EACjB,CAAC;AAAA,sBACK,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEA,SAAS,aAAa,CAAC,iBAAiB;AAEjC,aAAM,mBAAmB,CAAC,OAAkB,CAAC,MAAsB;AACtE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,EACjB,CAAC;AAAA,sBACK,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEA,SAAS,aAAa,CAAC,iBAAiB;AAEjC,aAAM,iBAAiB,CAAC,OAAkB,CAAC,MAAsB;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAUc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,QAAQ,MAAM,OAAO,CAAC;AAAA,sBAC1C,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEA,eAAe,aAAa,CAAC,iBAAiB;AAEvC,aAAM,cAAc,CAAC,OAAkB,CAAC,MAAsB;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,iCACV,EAAE,OAAO,UAAU,CAAC;AAAA,sBAC/B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvC;AAEA,YAAY,aAAa,CAAC,iBAAiB;AAEpC,aAAM,WAAW,CAAC,OAAkB,CAAC,MAAsB;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAiBc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,sBACrB,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAIvC;AACA,SAAS,OAAO;AAAA,EACZ,SAAS;AACb;AAEO,aAAM,OAAO,CAAC,OAAkB,CAAC,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMO,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOjB,YAAY,IAAI,CAAC;AAAA;AAAA;AAGnC;AACA,KAAK,OAAO;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,aAAa,CAAC,OAAkB,CAAC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOO,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAQjB,YAAY,IAAI,CAAC;AAAA;AAAA;AAGnC;AACA,WAAW,OAAO;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,WAAW,CAAC,OAAkB,CAAC,MAAsB;AAC9D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASW,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAIvC;AAEO,aAAM,QAAQ,CAAC,OAAkB,CAAC,MAAsB;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWW,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAIvC;AAEO,aAAM,YAAY,CAAC,OAAkB,CAAC,MAAsB;AAC/D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYe,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAK3C;AAEO,aAAM,gBAAgB,CAAC,OAAkB,CAAC,MAAsB;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAUc,YAAY,IAAI,CAAC;AAAA,0BAChB,YAAY,IAAI,CAAC;AAAA,sBACrB,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAIvC;AAEO,aAAM,iBAAiB,CAAC,OAAkB,CAAC,MAAsB;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc,kBAAkB,IAAI,CAAC;AAAA,0BACtB,kBAAkB,IAAI,CAAC;AAAA,sBAC3B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC;AAEO,aAAM,aAAa,CAAC,OAAkB,CAAC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,kBAAkB,IAAI,CAAC;AAAA,0BACtB,kBAAkB,IAAI,CAAC;AAAA,sBAC3B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBvC;AACA,WAAW,OAAO;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,eAAe,CAAC,OAAkB,CAAC,MAAsB;AAClE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,kBAAkB,IAAI,CAAC;AAAA,0BACtB,kBAAkB,IAAI,CAAC;AAAA,iCAChB;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EACV,CAAC;AAAA,sBACK,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBvC;AACA,aAAa,OAAO;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,iBAAiB,CAAC,OAAkB,CAAC,MAAsB;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,kBAAkB,IAAI,CAAC;AAAA,0BACtB,kBAAkB,IAAI,CAAC;AAAA,iCAChB,EAAE,OAAO,QAAQ,MAAM,KAAK,CAAC;AAAA,sBACxC,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvC;AACA,eAAe,OAAO;AAAA,EAClB,SAAS;AACb;AAEO,aAAM,sBAAsB,CAAC,OAAkB,CAAC,MAAsB;AACzE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMc,kBAAkB,IAAI,CAAC;AAAA,0BACtB,kBAAkB,IAAI,CAAC;AAAA,sBAC3B,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BvC;AACA,oBAAoB,OAAO;AAAA,EACvB,SAAS;AAAA,EACT,UAAU;AACd;AA6BO,aAAM,sBAAsB,CAAC,OAAkB,CAAC,MAAsB;AACzE,QAAM,SAAoC;AAAA,IACtC,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACX;AACA,QAAMA,eACF,CAAC,EAAE,SAAS,SAAS,MACrB,CAAC,UAAuB;AACpB,UAAM,SAAS,MAAM;AACrB,QAAI,OAAO,SAAS,MAAM;AACtB,UAAI,OAAO,OAAO,UAAU,UAAU;AAClC,cAAM,QAAQ,KAAK,UAAU,OAAO,OAAO,MAAM,CAAC;AAClD,YAAI,WAAW,MAAM,SAAS,SAAS;AACnC,kBAAQ,KAAK;AAAA,QACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,mBAAS,KAAK;AAAA,QAClB;AAAA,MACJ,OAAO;AACH,cAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,OAAO,KAAK;AAC7C,YAAI,WAAW,MAAM,SAAS,SAAS;AACnC,kBAAQ,KAAK;AAAA,QACjB,WAAW,YAAY,MAAM,SAAS,UAAU;AAC5C,mBAAS,KAAK;AAAA,QAClB;AAAA,MACJ;AACA,aAAO,OAAO,IAAI,IAAI,OAAO;AAAA,IACjC;AAAA,EACJ;AACJ,QAAM,oBAAoB;AAAA,IACtB,aAAa,OAAe;AACxB,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC;AAC9C,aACI,WAAW,kBAAkB,mBAAmB;AAAA,IAExD;AAAA,IACA,eAAe,OAAe;AAC1B,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,kBAAkB,OAAO,QAAQ;AACvC,YAAM,UAAU,KAAK;AAAA,QACjB,KAAK,IAAI,OAAO,eAAe;AAAA,QAC/B;AAAA,MACJ;AAEA,cACK,UAAU,oBACV,kBAAkB;AAAA,IAE3B;AAAA,EACJ;AACA,QAAM,qBAAqB;AAAA,IACvB,aAAa,OAAe;AACxB,YAAM,UAAU,KAAK,IAAI,OAAO,OAAO,KAAK;AAC5C,aAAO,UAAU;AAAA,IACrB;AAAA,IACA,eAAe,OAAe;AAC1B,YAAM,eAAe,QAAQ;AAC7B,aAAO,KAAK,IAAI,cAAc,OAAO,KAAK;AAAA,IAC9C;AAAA,EACJ;AACA,QAAM,qBAAqB;AAAA,IACvB,aAAa,OAAe;AACxB,YAAM,UAAU,KAAK,IAAI,OAAO,OAAO,KAAK;AAC5C,aAAO,UAAU;AAAA,IACrB;AAAA,IACA,eAAe,OAAe;AAC1B,YAAM,eAAe,QAAQ;AAC7B,aAAO,KAAK,IAAI,cAAc,OAAO,KAAK;AAAA,IAC9C;AAAA,EACJ;AACA,QAAM,cAAc,CAAC,UAA0B;AAC3C,QAAI,SAAS;AACb,QAAI,QAAQ,KAAK;AACb,eAAS,KAAK,IAAI,KAAK,IAAI,QAAQ,IAAI;AAAA,IAC3C,WAAW,QAAQ,KAAK;AACpB,iBAAW,IAAI,IAAI,UAAU,KAAK,KAAK,IAAI,IAAI,KAAK,MAAM;AAAA,IAC9D;AACA,UAAM,gBAAgB;AAAA,MAClB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,IAC3B;AACA,WAAO,IAAI,KAAK,aAAa,UAAU,UAAU,aAAa,EAAE;AAAA,MAC5D;AAAA,IACJ;AAAA,EACJ;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMcA,YAAW;AAAA,0BACVA,YAAW;AAAA,sBACf,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOX,OAAO,KAAK;AAAA,qCACH,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAUlB,iBAAiB;AAAA,yCACb,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMxB,OAAO,KAAK;AAAA,qCACH,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAKvD;AACA,oBAAoB,OAAO;AAAA,EACvB,SAAS;AAAA,EACT,UAAU;AACd;AAEO,aAAM,eAAe,CAAC,OAAkB,CAAC,MAAsB;AAClE,QAAM,QAAQ;AACd,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,QAAM,OAAO;AACb,SAAO;AAAA;AAAA;AAAA,yBAGc,KAAK;AAAA,wBACN,IAAI;AAAA,uBACL,GAAG;AAAA,uBACH,GAAG;AAAA;AAAA;AAAA,sBAGJ,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKd,KAAK;AAAA,wBACN,IAAI;AAAA,uBACL,GAAG;AAAA,uBACH,GAAG;AAAA;AAAA;AAAA,sBAGJ,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,yBAKd,KAAK;AAAA,wBACN,IAAI;AAAA,uBACL,GAAG;AAAA,uBACH,GAAG;AAAA;AAAA;AAAA,sBAGJ,YAAY,IAAI,CAAC;AAAA;AAAA;AAAA;AAIvC;",
+  "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 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=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleValueLabel.args = {\n    labelVisibility: 'text',\n};\n\nexport const noVisibleLabels = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\nnoVisibleLabels.args = {\n    labelVisibility: 'none',\n};\n\nexport const px = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'px',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\nclass NumberFieldDefined extends HTMLElement {\n    constructor() {\n        super();\n        this.numberFieldLoaderPromise = new Promise((res) => {\n            customElements.whenDefined('sp-number-field').then(() => {\n                res(true);\n            });\n        });\n    }\n\n    private numberFieldLoaderPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.numberFieldLoaderPromise;\n    }\n}\n\ncustomElements.define('number-field-defined', NumberFieldDefined);\n\nconst editableDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <number-field-defined></number-field-defined>\n    `;\n};\n\nexport const max20 = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 200px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"20\"\n                min=\"0\"\n                value=\"5\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                ...=${spreadProps(args)}\n            >\n                Max 20\n            </sp-slider>\n        </div>\n    `;\n};\nmax20.swc_vrt = {\n    skip: true,\n};\n\nexport const editable = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableDisabled = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                disabled\n                max=\"360\"\n                min=\"0\"\n                value=\"90\"\n                step=\"1\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{\n                    style: 'unit',\n                    unit: 'degree',\n                    unitDisplay: 'narrow',\n                }}\n                ...=${spreadProps(args)}\n            >\n                Angle\n            </sp-slider>\n        </div>\n    `;\n};\n\neditable.decorators = [editableDecorator];\n\nexport const editableCustom = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"width: 500px; margin: 12px 20px; --mod-stepper-width: 150px;\"\n        >\n            <sp-slider\n                editable\n                max=\"24\"\n                min=\"0\"\n                value=\"12.75\"\n                step=\"0.25\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'unit', unit: 'hour' }}\n                ...=${spreadProps(args)}\n            >\n                Hours\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableCustom.decorators = [editableDecorator];\n\nexport const editableWithoutVisibleLabels = (\n    args: StoryArgs = {}\n): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\neditableWithoutVisibleLabels.args = {\n    labelVisibility: 'none',\n};\n\nexport const hideStepper = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div style=\"width: 500px; margin: 12px 20px;\">\n            <sp-slider\n                editable\n                hide-stepper\n                max=\"1\"\n                min=\"0\"\n                value=\".5\"\n                step=\"0.01\"\n                @input=${handleEvent(args)}\n                @change=${handleEvent(args)}\n                .formatOptions=${{ style: 'percent' }}\n                ...=${spreadProps(args)}\n            >\n                Opacity\n            </sp-slider>\n        </div>\n    `;\n};\n\nhideStepper.decorators = [editableDecorator];\n\nexport const Gradient = (args: StoryArgs = {}): TemplateResult => {\n    return html`\n        <div\n            style=\"\n                width: 500px;\n                margin: 12px 20px;\n            \"\n        >\n            <sp-slider\n                style=\"\n                    --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);\n                    --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);\n                \"\n                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"]
 }