From b84a8bc76a76974a4eac159ed839b1333f51402a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 14 Mar 2022 10:11:55 -0400
Subject: [PATCH] fixes #704

---
 docs/components/color-picker.md                  | 8 ++++++++
 docs/resources/changelog.md                      | 1 +
 src/components/color-picker/color-picker.test.ts | 7 +++++++
 src/components/color-picker/color-picker.ts      | 4 +++-
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md
index ea63ec01..160b0629 100644
--- a/docs/components/color-picker.md
+++ b/docs/components/color-picker.md
@@ -18,6 +18,14 @@ const App = () => <SlColorPicker />;
 
 ## Examples
 
+### Initial Value
+
+Use the `value` attribute to set an initial value for the color picker.
+
+```html preview
+<sl-color-picker value="#4a90e2"></sl-color-picker>
+```
+
 ### Opacity
 
 Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on `format`.
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index b3654082..1bb36c3a 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Fixed a bug that prevented form submission from working as expected in some cases
 - Fixed a bug that prevented `<sl-split-panel>` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703)
+- Fixed a bug that prevented `<sl-color-picker>` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704)
 - Upgraded the status of `<sl-visually-hidden>` from experimental to stable
 
 ## 2.0.0-beta.71
diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts
index e5776909..680c7443 100644
--- a/src/components/color-picker/color-picker.test.ts
+++ b/src/components/color-picker/color-picker.test.ts
@@ -38,4 +38,11 @@ describe('<sl-color-picker>', () => {
 
     expect(opacitySlider).to.exist;
   });
+
+  it('should display a color when an initial value is provided', async () => {
+    const el = await fixture<SlColorPicker>(html` <sl-color-picker value="#000"></sl-color-picker> `);
+    const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
+
+    expect(trigger?.style.color).to.equal('rgb(0, 0, 0)');
+  });
 });
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index ad36f14d..c2ee70ba 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -164,7 +164,9 @@ export default class SlColorPicker extends LitElement {
   /** The locale to render the component in. */
   @property() lang: string;
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     if (!this.setColor(this.value)) {
       this.setColor(`#ffff`);
     }