fixes #704

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`.

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

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)');
+  });
 });

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`);
     }