[Bug]: Setting a `color` value outside the spectrum of `sp-color-slider` makes it unusable

[xerxovksi]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-color-slider

Expected behavior

When I drag the sp-color-slider thumb, it should trigger an event on @change. And the color hex code should be available on event.target.color.

Actual behavior

• When I set a color within the spectrum of sp-color-slider, the above behavior holds true.
• However, when I set the color property outside its range, sp-color-slider behaves weirdly.
• The thumb gets positioned at the extreme end of the slider (which is still fine), but even on dragging it inside sp-color-slider's range, the @change event has its target.color set to the older value which is the color outside the range.
• This issue is fixed only after I set its color property back to a value within its spectrum programmatically.

https://github.com/adobe/spectrum-web-components/assets/16774996/60bfcd3b-0cd5-46d9-9e45-ad0b43a3409a

Screenshots

• Chrome
• Safari
• Firefox

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Use the below code to create a custom element using LitElement.
2. Run the app in a browser.
3. Set a value outside the slider's range, like black #000000.
4. Notice the slider's thumb gets positioned at the extreme left end.
5. Drag the slider's thumb inside the valid range.
6. You should still see the old value in the text box.

Sample code that illustrates the problem

@state()
private _activeColor = "#ff00fa";

private _handleColorTextChange(event: any): Promise<void> {
    this._activeColor = String(event.target.value);
}

private _handleColorSliderChange(event: any) {
    this._activeColor = String(event.target.color);
}

render() {
    return html`
        <div>
            <sp-textfield value=${this._activeColor} @input=${this._handleColorTextChange}></sp-textfield>
            <sp-color-slider color=${this._activeColor} @change=${this._handleColorSliderChange}></sp-color-slider>
        </div>`;
}

Logs taken while reproducing problem

No response

[Westbrook]

This is an interesting complexity in that <sp-color-slider> manages what amounts to the hue of an HSL or HSV color. When black the hue can be any value because the values for saturation and value/level are what creates that color. I'm not sure if that will be something that we can specifically manage in the element, but we can add it as a test case for https://github.com/adobe/spectrum-web-components/pull/2782 where we are testing some alternate color value management tools.