feat(color): add copy button to basic example

src/components/pg/color/__examples__/basic/basic.html

@@ -1,4 +1,9 @@
 <div class="example">
   <pg-color part="color1" value="#000"></pg-color>
-  <code>Selected: <span part="colorSelected"></span></code>
+
+  <code>
+    Selected:
+    <span part="colorSelected">No color selected</span>
+    <button part="copyButton" disabled>Copy</button>
+  </code>
 </div>

src/components/pg/color/__examples__/basic/basic.ts

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part } from '@pictogrammers/element';
 import PgColor from '../../color';
 
 import template from './basic.html';
@@ -10,11 +10,38 @@ import template from './basic.html';
 export default class XPgColorBasic extends HTMLElement {
   @Part() $color1: PgColor;
   @Part() $colorSelected: HTMLSpanElement;
+  @Part() $copyButton: HTMLButtonElement;
+
+  private selectedHex = '';
 
   connectedCallback() {
     this.$color1.addEventListener('select', (e: CustomEvent) => {
       const { rgb, hex } = e.detail;
+
+      this.selectedHex = hex;
       this.$colorSelected.innerText = `${hex} or rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+      this.$copyButton.disabled = false;
+    });
+
+    this.$copyButton.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(this.selectedHex);
+
+        const original = this.$copyButton.innerText;
+        this.$copyButton.innerText = 'Copied!';
+
+        setTimeout(() => {
+          this.$copyButton.innerText = original;
+        }, 1000);
+      } catch (error) {
+        console.error('Failed to copy color:', error);
+
+        this.$copyButton.innerText = 'Failed';
+
+        setTimeout(() => {
+          this.$copyButton.innerText = 'Copy';
+        }, 1000);
+      }
     });
   }
 }