fixes #1141

docs/resources/changelog.md

@@ -25,7 +25,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-select>` where the input color and input hover color wasn't using the correct design tokens [#1143](https://github.com/shoelace-style/shoelace/issues/1143)
 - Fixed a bug in `<sl-color-picker>` that logged a console error when parsing swatches with whitespace
 - Fixed a bug in `<sl-color-picker>` that caused selected colors to be wrong due to incorrect HSV calculations
-- Fixed a bug in `<sl-color-picker>` that prevented the initial value from being set as a property [#1141](https://github.com/shoelace-style/shoelace/issues/1141)
+- Fixed a bug in `<sl-color-picker>` that prevented the initial value from being set correct when assigned as a property [#1141](https://github.com/shoelace-style/shoelace/issues/1141)
 - Fixed a bug in `<sl-radio-button>` that caused the checked button's right border to be incorrect [#1110](https://github.com/shoelace-style/shoelace/issues/1110)
 - Fixed a bug in `<sl-spinner>` that caused the animation to stop working correctly in Safari [#1121](https://github.com/shoelace-style/shoelace/issues/1121)
 - Fixed a bug that prevented the entire `<sl-tab-panel>` to be hidden when inactive

src/components/color-picker/color-picker.ts

@@ -92,7 +92,6 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
 
   private readonly formControlController = new FormControlController(this);
   private isSafeValue = false;
-  private lastValueEmitted: string;
   private readonly localize = new LocalizeController(this);
 
   @query('[part~="input"]') input: SlInput;
@@ -170,16 +169,16 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
    */
   @property({ reflect: true }) form = '';
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     if (this.value) {
       this.setColor(this.value);
       this.inputValue = this.value;
-      this.lastValueEmitted = this.value;
       this.syncValues();
     } else {
       this.isEmpty = true;
       this.inputValue = '';
-      this.lastValueEmitted = '';
     }
   }
 
@@ -626,7 +625,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
       this.brightness = 100;
       this.alpha = 100;
     }
-    if (!this.isSafeValue && oldValue !== undefined) {
+    if (!this.isSafeValue) {
       const newColor = this.parseColor(newValue);
 
       if (newColor !== null) {
@@ -636,13 +635,9 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
         this.brightness = newColor.hsva.v;
         this.alpha = newColor.hsva.a * 100;
       } else {
-        this.inputValue = oldValue;
+        this.inputValue = oldValue ?? '';
       }
     }
-
-    if (this.value !== this.lastValueEmitted) {
-      this.lastValueEmitted = this.value;
-    }
   }
 
   /** Returns the current value as a string in the specified format. */