fixes #1141

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

@@ -365,7 +365,7 @@ describe('<sl-color-picker>', () => {
     it('should reset the element to its initial value', async () => {
       const form = await fixture<HTMLFormElement>(html`
         <form>
-          <sl-color-picker name="a" value="#FFFFFF"></sl-color-picker>
+          <sl-color-picker name="a" value="#ffffff"></sl-color-picker>
           <sl-button type="reset">Reset</sl-button>
         </form>
       `);
@@ -379,7 +379,7 @@ describe('<sl-color-picker>', () => {
       await oneEvent(form, 'reset');
       await colorPicker.updateComplete;
 
-      expect(colorPicker.value).to.equal('#FFFFFF');
+      expect(colorPicker.value).to.equal('#ffffff');
 
       colorPicker.defaultValue = '';
 

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

@@ -169,19 +169,6 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
    */
   @property({ reflect: true }) form = '';
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (this.value) {
-      this.setColor(this.value);
-      this.inputValue = this.value;
-      this.syncValues();
-    } else {
-      this.isEmpty = true;
-      this.inputValue = '';
-    }
-  }
-
   private handleCopy() {
     this.input.select();
     document.execCommand('copy');
@@ -635,6 +622,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
         this.saturation = newColor.hsva.s;
         this.brightness = newColor.hsva.v;
         this.alpha = newColor.hsva.a * 100;
+        this.syncValues();
       } else {
         this.inputValue = oldValue ?? '';
       }