Skip to content

feat(reactive-controllers): Migrate to Colorjs from Tinycolor #4713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 92 commits into from
Feb 24, 2025
Merged
Changes from all commits
Commits
Show all changes
92 commits
Select commit Hold shift + click to select a range
cfeaf31
feat(reactive-controllers): added color orchestration layer
blunteshwar Sep 2, 2024
b9bb98a
chore: updated yarn lock
blunteshwar Sep 2, 2024
b68e457
chore(reactive-controllers): minor fix
blunteshwar Sep 2, 2024
6b6528f
chore: brought upto main
blunteshwar Sep 4, 2024
882166c
chore: updated yarn lock
blunteshwar Sep 4, 2024
c914192
Merge branch 'main' into color-migration
blunteshwar Sep 17, 2024
39e026f
chore(reactive-controllers): added tests and color formats
blunteshwar Sep 19, 2024
b73eba7
chore(reactive-controllers): updated rgb limits
blunteshwar Sep 19, 2024
f54193c
chore: brought upto main
blunteshwar Sep 19, 2024
92a16f7
chore(color-field): updated color field
blunteshwar Sep 29, 2024
8034f31
Merge branch 'main' into color-migration
blunteshwar Sep 29, 2024
a89238d
chore(color-field): updated tests
blunteshwar Sep 30, 2024
819f259
chore(reactive-controllers): added some tests
blunteshwar Sep 30, 2024
88c555b
chore(reactive-controllers): added some more tests
blunteshwar Oct 7, 2024
538e82f
Merge branch 'main' into color-migration
blunteshwar Oct 7, 2024
b5f307e
Merge branch 'main' into color-migration
blunteshwar Oct 14, 2024
a7d5257
chore(color-area, color-slider): migrated to colorjs
blunteshwar Oct 17, 2024
c39f021
Merge branch 'color-migration' of github.com:adobe/spectrum-web-compo…
blunteshwar Oct 17, 2024
6ffc250
chore(color-slider): updated tests
blunteshwar Oct 17, 2024
e7d473f
chore(color-area): resolved tests
blunteshwar Oct 17, 2024
2c9e7b1
chore(color-wheel): migrated color wheel to colorjs
blunteshwar Oct 17, 2024
17e3ab1
chore(color-area): updated stories
blunteshwar Oct 17, 2024
a81399a
Merge branch 'main' into color-migration
blunteshwar Oct 17, 2024
3e5e030
chore: brought upto main
blunteshwar Nov 12, 2024
f0b1057
chore(reactive-controllers): removed tinycolor completely
blunteshwar Nov 12, 2024
f24a330
chore: fully removed tinycolor
blunteshwar Nov 12, 2024
d4ef73c
chore: updated golden image hash
blunteshwar Nov 12, 2024
5b00e07
Merge branch 'main' into color-migration
blunteshwar Nov 12, 2024
818b100
chore(color-area): minor fix
blunteshwar Nov 14, 2024
207e432
Merge branch 'main' into color-migration
blunteshwar Nov 18, 2024
3a8ad6e
chore(reactive-controllers): added a check for invalid color formats
blunteshwar Nov 18, 2024
6eb2db3
Merge branch 'color-migration' of github.com:adobe/spectrum-web-compo…
blunteshwar Nov 18, 2024
8b24244
chore(reactive-controllers): minor fix
blunteshwar Nov 19, 2024
f0c92a8
chore: brought upto main
blunteshwar Nov 20, 2024
f926af0
Merge branch 'main' into color-migration
blunteshwar Nov 20, 2024
03b3250
chore: added docs block for color controller
blunteshwar Nov 21, 2024
e4814bc
chore(color-area): added docs
blunteshwar Nov 21, 2024
473f9a8
chore(reactive-controllers): added a readme file
blunteshwar Nov 21, 2024
73d3cbe
Merge branch 'main' into color-migration
blunteshwar Nov 25, 2024
d017a8c
chore(reactive-controllers): minor fix in docs
blunteshwar Nov 26, 2024
ecdf380
chore: updated image hash
blunteshwar Nov 26, 2024
a08cb8d
Merge branch 'main' into color-migration
blunteshwar Nov 26, 2024
e73d438
chore: updated image hash
blunteshwar Nov 26, 2024
e6fe91a
Merge branch 'main' into color-migration
Rajdeepc Nov 26, 2024
c916446
Merge branch 'main' into color-migration
blunteshwar Dec 4, 2024
982f747
Merge branch 'main' into color-migration
blunteshwar Dec 9, 2024
17e14b4
chore: updated versions
blunteshwar Dec 9, 2024
97885ac
chore: updated yarn lock
blunteshwar Dec 9, 2024
ee02a20
chore: brought upto main
blunteshwar Dec 18, 2024
cc9371e
chore: minor-fix
blunteshwar Dec 18, 2024
0ed543f
chore: minor fixes
blunteshwar Dec 18, 2024
1cf4abd
chore: updated image hash
blunteshwar Dec 18, 2024
91db96a
Merge branch 'main' into color-migration
blunteshwar Jan 8, 2025
75573ed
chore(color-area): updated with change in slider value
blunteshwar Jan 8, 2025
c7e05d6
chore(color-area): added a test
blunteshwar Jan 8, 2025
28e48a9
Merge branch 'main' into color-migration
blunteshwar Jan 10, 2025
72a3366
Merge branch 'main' into color-migration
blunteshwar Jan 11, 2025
d63fe9a
Merge branch 'main' into color-migration
blunteshwar Jan 14, 2025
1304483
chore: brought upto main
blunteshwar Jan 22, 2025
ec3552b
chore: updated yarn lock
blunteshwar Jan 22, 2025
4e21cad
Merge branch 'main' into color-migration
blunteshwar Jan 23, 2025
36f6761
Merge branch 'main' into color-migration
Rajdeepc Jan 24, 2025
b9865b5
Merge branch 'main' into color-migration
rubencarvalho Jan 24, 2025
ce0c7a1
Merge branch 'main' into color-migration
Rajdeepc Jan 27, 2025
8e94b88
Merge branch 'main' into color-migration
blunteshwar Jan 28, 2025
e0f63bd
chore: updated golden image hash
blunteshwar Jan 28, 2025
dfc1b57
chore: brought upto main
blunteshwar Jan 28, 2025
05ede47
chore: updated golden image hash
blunteshwar Jan 28, 2025
584e0a1
chore: updated yarnlock
blunteshwar Feb 3, 2025
9477aaf
chore: brought upto main
blunteshwar Feb 3, 2025
cae4cfb
chore: updated yarn lock
blunteshwar Feb 3, 2025
8925192
chore(color-wheel): updated tests
blunteshwar Feb 3, 2025
442fa60
chore: updated image hash
blunteshwar Feb 3, 2025
e65242c
Merge branch 'main' into color-migration
blunteshwar Feb 6, 2025
1e65894
chore: brought upto main
blunteshwar Feb 17, 2025
db6c3bc
chore: updated yarn lock
blunteshwar Feb 17, 2025
91a8226
Merge branch 'main' into color-migration
blunteshwar Feb 19, 2025
fb75701
chore: updated image hash
blunteshwar Feb 19, 2025
7293bcb
chore: reverted image hash
blunteshwar Feb 19, 2025
ff0885b
chore: updated image hash
blunteshwar Feb 19, 2025
7fbba2f
Merge branch 'main' into color-migration
rubencarvalho Feb 20, 2025
d4180cc
chore: resolved merge conflicts
Feb 24, 2025
2081341
chore: brought upto main
blunteshwar Feb 24, 2025
2bbeb2b
Merge branch 'main' into color-migration
blunteshwar Feb 24, 2025
c1b9a08
chore: updated image hash
blunteshwar Feb 24, 2025
43dc2c2
Merge branch 'color-migration' of github.com:adobe/spectrum-web-compo…
blunteshwar Feb 24, 2025
a908293
Merge branch 'main' into color-migration
rubencarvalho Feb 24, 2025
9ebc7ed
chore: brought upto main
blunteshwar Feb 24, 2025
a1ca107
chore: updated stories
blunteshwar Feb 24, 2025
719c4f3
chore: updated image hash
blunteshwar Feb 24, 2025
8d443d4
Merge branch 'main' into color-migration
blunteshwar Feb 24, 2025
ef73ff4
chore: skipping cache restoration
blunteshwar Feb 24, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -14,20 +14,20 @@ parameters:
# 3. Commit this change to the PR branch where the changes exist.
current_golden_images_hash:
type: string
default: f2cca853885cac881fe0da709a2452e90a634207
default: a1ca10710680ff347ed0a873d376e4f821a6d493
wireit_cache_name:
type: string
default: wireit
commands:
downstream:
steps:
- checkout
- restore_cache:
keys:
- v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
- restore_cache:
keys:
- v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}-
# - restore_cache:
# keys:
# - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
# - restore_cache:
# keys:
# - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}-
- run:
name: Installing Dependencies
command: |
12 changes: 6 additions & 6 deletions packages/action-button/src/spectrum-config.js
Original file line number Diff line number Diff line change
@@ -223,15 +223,15 @@ const config = {
[
{
type: 'class',
name: 'spectrum-ActionButton--staticBlack'
}
name: 'spectrum-ActionButton--staticBlack',
},
],
[
{
type: 'class',
name: 'spectrum-ActionButton--staticWhite'
}
]
name: 'spectrum-ActionButton--staticWhite',
},
],
],
},
replace: {
@@ -244,7 +244,7 @@ const config = {
name: 'static-color',
operation: {
operator: 'equal',
value: 'black'
value: 'black',
},
},
],
2 changes: 1 addition & 1 deletion packages/action-group/src/action-group.css
Original file line number Diff line number Diff line change
@@ -220,4 +220,4 @@ governing permissions and limitations under the License.
/** flex-grow: 1; isn't enough to fully justify the action group */
:host([justified]) ::slotted(*) {
flex: 1 1 0%;
}
}
6 changes: 1 addition & 5 deletions packages/button/src/ClearButton.ts
Original file line number Diff line number Diff line change
@@ -62,11 +62,7 @@ export class ClearButton extends SizedMixin(StyledButton, {
noDefaultSize: true,
}) {
public static override get styles(): CSSResultArray {
return [
...super.styles,
buttonStyles,
crossMediumStyles,
];
return [...super.styles, buttonStyles, crossMediumStyles];
}

/**
6 changes: 1 addition & 5 deletions packages/button/src/CloseButton.ts
Original file line number Diff line number Diff line change
@@ -63,11 +63,7 @@ export class CloseButton extends SizedMixin(StyledButton, {
noDefaultSize: true,
}) {
public static override get styles(): CSSResultArray {
return [
...super.styles,
buttonStyles,
crossMediumStyles,
];
return [...super.styles, buttonStyles, crossMediumStyles];
}

/**
6 changes: 1 addition & 5 deletions packages/checkbox/src/Checkbox.ts
Original file line number Diff line number Diff line change
@@ -144,11 +144,7 @@ export class Checkbox extends SizedMixin(CheckboxMixin(SpectrumElement), {
}

public static override get styles(): CSSResultArray {
return [
checkboxStyles,
checkmarkSmallStyles,
dashSmallStyles,
];
return [checkboxStyles, checkmarkSmallStyles, dashSmallStyles];
}

public override click(): void {
6 changes: 1 addition & 5 deletions packages/coachmark/src/Coachmark.ts
Original file line number Diff line number Diff line change
@@ -42,11 +42,7 @@ import '@spectrum-web-components/button-group/sp-button-group.js';
*/
export class Coachmark extends Popover {
public static override get styles(): CSSResultArray {
return [
...super.styles,
coachmarkStyles,
chevronStyles,
];
return [...super.styles, coachmarkStyles, chevronStyles];
}
@property({ type: Object })
public item?: CoachmarkItem;
11 changes: 5 additions & 6 deletions packages/color-area/package.json
Original file line number Diff line number Diff line change
@@ -62,12 +62,11 @@
"lit-html"
],
"dependencies": {
"@ctrl/tinycolor": "^4.0.3",
"@spectrum-web-components/base": "1.1.2",
"@spectrum-web-components/color-handle": "1.1.2",
"@spectrum-web-components/opacity-checkerboard": "1.1.2",
"@spectrum-web-components/reactive-controllers": "1.1.2",
"@spectrum-web-components/shared": "1.1.2"
"@spectrum-web-components/base": "^1.1.2",
"@spectrum-web-components/color-handle": "^1.1.2",
"@spectrum-web-components/opacity-checkerboard": "^1.1.2",
"@spectrum-web-components/reactive-controllers": "^1.1.2",
"@spectrum-web-components/shared": "^1.1.2"
},
"devDependencies": {
"@spectrum-css/colorarea": "6.0.0-s2-foundations.15"
118 changes: 75 additions & 43 deletions packages/color-area/src/ColorArea.ts
Original file line number Diff line number Diff line change
@@ -17,10 +17,7 @@ import {
SpectrumElement,
TemplateResult,
} from '@spectrum-web-components/base';
import {
ifDefined,
styleMap,
} from '@spectrum-web-components/base/src/directives.js';
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
import {
property,
query,
@@ -29,10 +26,11 @@ import { streamingListener } from '@spectrum-web-components/base/src/streaming-l
import { SWCResizeObserverEntry, WithSWCResizeObserver } from './types';
import type { ColorHandle } from '@spectrum-web-components/color-handle';
import '@spectrum-web-components/color-handle/sp-color-handle.js';

import {
ColorController,
ColorValue,
} from '@spectrum-web-components/reactive-controllers/src/Color.js';
ColorTypes,
} from '@spectrum-web-components/reactive-controllers/src/ColorController.js';
import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
import {
isAndroid,
@@ -72,18 +70,35 @@ export class ColorArea extends SpectrumElement {

private languageResolver = new LanguageResolutionController(this);

private colorController = new ColorController(this, {
extractColorFromState: () => ({
h: this.hue,
s: this.x,
v: this.y,
}),
applyColorToState: ({ s, v }) => {
this._x = s;
this._y = v;
this.requestUpdate();
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any way we can re-use the above two functions? It makes the code more cleaner and abstracted rather than manipulating a nested object like this.colorController.color.hsv.s

Copy link
Contributor Author

@blunteshwar blunteshwar Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are using this.colorController.color.hsv.s only once and there too we are not manipulating the value of this nested object we are just returning it.
This is very specific to color-area hence creating a getter inside color-controller doesn't make much sense

});
/**
* A controller for managing color interactions within the ColorArea component.
*
* The `ColorController` is instantiated with the `manageAs` option set to `hsv`
* because the ColorArea component is designed to manipulate the saturation (`s`)
* and value (`v`) components of the HSV color model along the x and y axes,
* respectively. In the HSV color model:
*
* - The `hue` (h) represents the color type and is typically controlled by a separate input.
* - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).
* - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).
*
* In the ColorArea component:
*
* - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.
* - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.
*
* By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value
* as the user interacts with the ColorArea component.
*
* @private
* @type {ColorController}
* @memberof ColorArea
*
* @property {ColorArea} this - The instance of the ColorArea component.
* @property {Object} options - Configuration options for the ColorController.
* @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
*/
private colorController = new ColorController(this, { manageAs: 'hsv' });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you create a documentation block here. It would be easier to understand why a object with param manageAs is needed for colorjs.io

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have added docs block in color-controller and explained the use of manage as there.
Also this manageAs parameter is not required for/by colorjs.io . It already existed before migrating to colorjs when we were using ctrl/tinycolor.

manageAs defines the color space in which the color object will be managed. It is used to precisely perform the calculations whenever the sp-color component is altered. For instance in an sp-color-area the hue value is constant thus when we drag the handle only the saturation and value cords change. saturation varies along x axis of color area and value varies along y axis of color area. Thus these s and v values are mapped to the x and y axis of color area. Whenever user changes the value of color area along x axis by say 1 unit the value of color should also change accordingly and since x axis corresponds to saturation value so the s value should also change accordingly. Now lets imagine a case where we don't leverage manageAs property and the colorController is using srgb color space. When the user drags the color handle by 1 unit the color object is first converted to hsv color space(which is although very little b ut lossy) then the s value is changed by 1 unit then again converted to srgb color space(again although very little but lossy). But if we are using manageAs and passing its value as "hsv" the colorController knows that for this host the color value will be managed(internally) in hsv color space. Now if the user drags the handle on color area by 1 unit the colorController which is managing the color value in hsv color space will just alter the value of s saturation by 1 unit and viola!, no loss happens.


@property({ type: Number })
public get hue(): number {
@@ -95,16 +110,16 @@ export class ColorArea extends SpectrumElement {
}

@property({ type: String })
public get value(): ColorValue {
return this.colorController.color;
public get value(): ColorTypes {
return this.colorController.colorValue;
}

@property({ type: String })
public get color(): ColorValue {
return this.colorController.color;
public get color(): ColorTypes {
return this.colorController.colorValue;
}

public set color(color: ColorValue) {
public set color(color: ColorTypes) {
this.colorController.color = color;
}

@@ -113,48 +128,48 @@ export class ColorArea extends SpectrumElement {

@property({ type: Number })
public get x(): number {
return this._x;
return this.colorController.color.hsv.s / 100;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be simplified?

Copy link
Contributor Author

@blunteshwar blunteshwar Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, this can't be more simplified because to to access the s coordinate value we have to access the color via colorController. After fetching this s coordinate value we divide it by 100 to convert it into decimal from percentage and then this converted s value our x coordinate for color-area.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @Rajdeepc. And I'd like to add that anything that multiple components might use should be part of the controller.

@blunteshwar what if we added a getX() method to the controller itself to do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This getX method is very specific to color-area and doesn't exist in other color components, thus creating a getter inside colorController just to cater a single component doesn't make much sense.

}

public set x(x: number) {
if (x === this.x) {
return;
}
const oldValue = this.x;
this._x = x;
if (this.inputX) {
// Use the native `input[type='range']` control to validate this value after `firstUpdate`
this.inputX.value = x.toString();
this._x = this.inputX.valueAsNumber;
this.colorController.color.set(
's',
this.inputX.valueAsNumber * 100
);
} else {
this.colorController.color.set('s', x * 100);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a lot of multiplier with 100. Is this something cannot be overriden out of the box?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we are multiplying x and y coordinates by 100 to convert coordinate values into saturation and value respectively. We are doing this 4 times in the code, Twice for x coordinate and twice for y coordinates.
Thus it can't be overriden out of the box.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@blunteshwar What if we added a setX() method on the controller itself?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again this setX is very specific to color area and doesn't exist in other color components.

}
this.requestUpdate('x', oldValue);
this.colorController.applyColorFromState();
}

private _x = 1;

@property({ type: Number })
public get y(): number {
return this._y;
return this.colorController.color.hsv.v / 100;
}

public set y(y: number) {
if (y === this.y) {
return;
}
const oldValue = this.y;
this._y = y;
if (this.inputY) {
// Use the native `input[type='range']` control to validate this value after `firstUpdate`
this.inputY.value = y.toString();
this._y = this.inputY.valueAsNumber;
this.colorController.color.set(
'v',
this.inputY.valueAsNumber * 100
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A setY() method on the controller could do this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is also very specific to color-area only!

}
this.requestUpdate('y', oldValue);
this.colorController.applyColorFromState();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this you are also not refreshing the update lifecycle in this.colorController.applyColorFromState(); via this.requestUpdate() after setting the color values
Please make sure the updates are properly propagated

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do not need to do this because the component is getting updated by this.requestUpdate('y', oldValue); and the colorController is being updated by this.colorController.color.set('v',this.inputY.valueAsNumber * 100 );
Earlier we needed this.colorController.applyColorFromState(); because the controller was not getting properly updated and we manually had to create a function applyColorFromState() and manually call it again and again when the x,y values were altered.

}

private _y = 1;

@property({ type: Number })
public step = 0.01;

@@ -201,6 +216,7 @@ export class ColorArea extends SpectrumElement {
private handleKeydown(event: KeyboardEvent): void {
const { code } = event;
this.focused = true;

this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
(key) => !!key
).length;
@@ -262,7 +278,6 @@ export class ColorArea extends SpectrumElement {
this.y = Math.min(1, Math.max(this.y + deltaY, 0));

this.colorController.savePreviousColor();
this.colorController.applyColorFromState();

if (deltaX != 0 || deltaY != 0) {
this._valueChanged = true;
@@ -295,7 +310,6 @@ export class ColorArea extends SpectrumElement {
const { valueAsNumber, name } = event.target;

this[name as 'x' | 'y'] = valueAsNumber;
this.colorController.applyColorFromState();
}

private handleChange(event: Event & { target: HTMLInputElement }): void {
@@ -332,8 +346,8 @@ export class ColorArea extends SpectrumElement {
this._valueChanged = false;

this.x = x;
this.y = 1 - y;
this.colorController.applyColorFromState();
this.y = y;

this.dispatchEvent(
new Event('input', {
bubbles: true,
@@ -390,7 +404,7 @@ export class ColorArea extends SpectrumElement {
Math.min(1, (offsetY - minOffsetY) / height)
);

return [this.isLTR ? percentX : 1 - percentX, percentY];
return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];
}

private handleAreaPointerdown(event: PointerEvent): void {
@@ -438,7 +452,7 @@ export class ColorArea extends SpectrumElement {
<div
@pointerdown=${this.handleAreaPointerdown}
class="gradient"
style=${styleMap(style)}
style="background: ${style.background};"
>
<slot name="gradient"></slot>
</div>
@@ -534,13 +548,31 @@ export class ColorArea extends SpectrumElement {
this.addEventListener('keydown', this.handleKeydown);
}

/**
* Overrides the `updated` method to handle changes in property values.
*
* @param changed - A map of changed properties with their previous values.
*
* This method performs the following actions:
* - Updates the saturation (`s`) of the color if `x` has changed.
* - Updates the value (`v`) of the color if `y` has changed.
* - If the `focused` property has changed and is now true, it lazily binds
* the `input[type="range"]` elements in shadow roots to prevent multiple
* tab stops within the Color Area for certain browser settings (e.g., Webkit).
*/
protected override updated(changed: PropertyValues): void {
super.updated(changed);
if (this.x !== this.inputX.valueAsNumber) {
this._x = this.inputX.valueAsNumber;
this.colorController.color.set(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please create a documentation block here. s and v is unknown!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

's',
this.inputX.valueAsNumber * 100
);
}
if (this.y !== this.inputY.valueAsNumber) {
this._y = this.inputY.valueAsNumber;
this.colorController.color.set(
'v',
(1 - this.inputY.valueAsNumber) * 100
);
}
if (changed.has('focused') && this.focused) {
// Lazily bind the `input[type="range"]` elements in shadow roots
Loading