kempo-ui 0.3.5 → 0.3.7

package/docs-src/components/color-picker.page.html

@@ -0,0 +1,559 @@
+<page pageName="ColorPicker Component" title="ColorPicker Component - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>ColorPicker Component</h1>
+    <p>The ColorPicker component provides a comprehensive color selection interface that supports all modern CSS color
+      formats including hex, RGB, HSL, named colors, HWB, Lab, LCH, OKLab, and OKLCH. It features bidirectional color
+      format conversion and intelligent alpha transparency handling.</p>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m pl">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#colorFormats">Supported Color Formats</a><br />
+          <a href="#alphaHandling">Alpha Transparency</a><br />
+          <a href="#formatSelection">Format Selection</a><br />
+          <a href="#formUsage">Form Integration</a><br />
+          <a href="#javascriptUsage">JavaScript Usage</a><br />
+          <a href="#eventHandling">Event Handling</a><br />
+
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+          <a href="#events">Events</a><br />
+          <a href="#staticMembers">Static Members</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h2 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h2>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="colorFormats"><a href="#colorFormats" class="no-link">Supported Color Formats</a></h2>
+    <p>The ColorPicker supports all modern CSS color formats with automatic detection and conversion:</p>
+
+    <h3>Hex Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ff0000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ff000080"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="#ff0000"></k-color-picker>
+          <k-color-picker value="#ff000080"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>RGB/RGBA Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"rgb(255, 0, 0)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"rgba(255, 0, 0, 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="rgb(255, 0, 0)"></k-color-picker>
+          <k-color-picker value="rgba(255, 0, 0, 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>HSL/HSLA Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hsl(0, 100%, 50%)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hsla(0, 100%, 50%, 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="hsl(0, 100%, 50%)"></k-color-picker>
+          <k-color-picker value="hsla(0, 100%, 50%, 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Named Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"red"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"dodgerblue"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="red"></k-color-picker>
+          <k-color-picker value="dodgerblue"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>HWB Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hwb(0 0% 0%)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"hwb(240 0% 0% / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="hwb(0 0% 0%)"></k-color-picker>
+          <k-color-picker value="hwb(240 0% 0% / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Lab Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lab(50% 50 50)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lab(50% 50 50 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="lab(50% 50 50)"></k-color-picker>
+          <k-color-picker value="lab(50% 50 50 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>LCH Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lch(50% 50 0)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"lch(50% 50 0 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="lch(50% 50 0)"></k-color-picker>
+          <k-color-picker value="lch(50% 50 0 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>OKLab Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklab(50% 0.1 0.1)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklab(50% 0.1 0.1 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="oklab(50% 0.1 0.1)"></k-color-picker>
+          <k-color-picker value="oklab(50% 0.1 0.1 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>OKLCH Colors</h3>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklch(50% 0.1 0)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"oklch(50% 0.1 0 / 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker value="oklch(50% 0.1 0)"></k-color-picker>
+          <k-color-picker value="oklch(50% 0.1 0 / 0.5)"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="alphaHandling"><a href="#alphaHandling" class="no-link">Alpha Transparency</a></h2>
+    <p>The ColorPicker intelligently handles alpha transparency. When you set a color without alpha, it preserves the
+      existing alpha value. Only when you explicitly provide an alpha value does it update the transparency.</p>
+
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"alphaPicker"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"rgba(255, 0, 0, 0.5)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setOpaque"</span>&gt;</span>Set to Blue (preserves alpha)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setTransparent"</span>&gt;</span>Set to Green with Alpha<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'alphaPicker'</span>);
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setOpaque'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    picker.value = <span class="hljs-string">'#0000ff'</span>; <span class="hljs-comment">// Alpha preserved at 0.5</span>
+  });
+  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setTransparent'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{
+    picker.value = <span class="hljs-string">'rgba(0, 255, 0, 0.3)'</span>; <span class="hljs-comment">// Alpha updated to 0.3</span>
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="alphaPicker" value="rgba(255, 0, 0, 0.5)" class="mb"></k-color-picker>
+          <div class="btn-grp mb">
+            <button id="setOpaque">Set to Blue (preserves alpha)</button>
+            <button id="setTransparent">Set to Green with Alpha</button>
+          </div>
+          <script>
+            const alphaPicker = document.getElementById('alphaPicker');
+            document.getElementById('setOpaque').addEventListener('click', () => {
+              alphaPicker.value = '#0000ff'; // Alpha preserved at 0.5
+            });
+            document.getElementById('setTransparent').addEventListener('click', () => {
+              alphaPicker.value = 'rgba(0, 255, 0, 0.3)'; // Alpha updated to 0.3
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="formatSelection"><a href="#formatSelection" class="no-link">Format Selection</a></h2>
+    <p>You can specify the output format using the <code>format</code> attribute. The component will convert colors to
+      the specified format when displaying the value.</p>
+
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"hsl"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ff0000"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"lab"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#00ff00"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker format="hsl" value="#ff0000"></k-color-picker>
+          <k-color-picker format="lab" value="#00ff00"></k-color-picker>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="formUsage"><a href="#formUsage" class="no-link">Form Integration</a></h2>
+    <p>The ColorPicker component is form-associated and works seamlessly with native HTML forms using the
+      <code>name</code> attribute. The component uses the ElementInternals API to participate in form submission,
+      validation, and reset operations.
+    </p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorForm"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"bgColor"</span>&gt;</span>Background Color:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"bgColor"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#3498db"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textColor"</span>&gt;</span>Text Color:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"textColor"</span> <span class="hljs-attr">format</span>=<span class="hljs-string">"rgb"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#ffffff"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"formOutput"</span>&gt;</span>Submit the form to see values<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorForm'</span>).addEventListener(<span class="hljs-string">'submit'</span>, (e) =&gt; {<br />    e.preventDefault();<br />    <span class="hljs-keyword">const</span> formData = <span class="hljs-keyword">new</span> FormData(e.target);<br />    <span class="hljs-keyword">const</span> output = <span class="hljs-built_in">Array</span>.from(formData.entries())<br />      .map(<span class="hljs-function">(<span class="hljs-params">[key, value]</span>) =&gt;</span> <span class="hljs-string">`<span class="hljs-subst">${key}</span>: <span class="hljs-subst">${value}</span>`</span>)<br />      .join(<span class="hljs-string">', '</span>);<br />    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'formOutput'</span>).textContent = output;<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <form id="colorForm" class="mb">
+            <label for="bgColor">Background Color:</label>
+            <k-color-picker name="bgColor" value="#3498db" class="mb"></k-color-picker>
+
+            <label for="textColor">Text Color:</label>
+            <k-color-picker name="textColor" format="rgb" value="#ffffff" class="mb"></k-color-picker>
+
+            <button type="submit">Submit</button>
+          </form>
+          <p id="formOutput">Submit the form to see values</p>
+          <script>
+            document.getElementById('colorForm').addEventListener('submit', (e) => {
+              e.preventDefault();
+              const formData = new FormData(e.target);
+              const output = Array.from(formData.entries())
+                .map(([key, value]) => `${key}: ${value}`)
+                .join(', ');
+              document.getElementById('formOutput').textContent = output;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h2>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jsPicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"setColor"</span>&gt;</span>Set Color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"getColor"</span>&gt;</span>Get Color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeFormat"</span>&gt;</span>Change Format<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorValue"</span>&gt;</span>Color value will appear here<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jsPicker'</span>);<br />  <span class="hljs-keyword">const</span> valueDisplay = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorValue'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'setColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    picker.value = <span class="hljs-string">'oklch(70% 0.2 180)'</span>;<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'getColor'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    valueDisplay.textContent = <span class="hljs-string">`Current color: <span class="hljs-subst">${picker.value}</span>`</span>;<br />  });<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeFormat'</span>).addEventListener(<span class="hljs-string">'click'</span>, ()=&gt;{<br />    picker.format = <span class="hljs-string">'hex'</span>;<br />    valueDisplay.textContent = <span class="hljs-string">`Switched to hex format: <span class="hljs-subst">${picker.value}</span>`</span>;<br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="jsPicker" class="mb"></k-color-picker>
+          <div class="btn-grp mb">
+            <button id="setColor">Set Color</button>
+            <button id="getColor">Get Color</button>
+            <button id="changeFormat">Change Format</button>
+          </div>
+          <p id="colorValue">Color value will appear here</p>
+          <script>
+            const jsPicker = document.getElementById('jsPicker');
+            const valueDisplay = document.getElementById('colorValue');
+
+            document.getElementById('setColor').addEventListener('click', () => {
+              jsPicker.value = 'oklch(70% 0.2 180)';
+            });
+
+            document.getElementById('getColor').addEventListener('click', () => {
+              valueDisplay.textContent = `Current color: ${jsPicker.value}`;
+            });
+
+            document.getElementById('changeFormat').addEventListener('click', () => {
+              jsPicker.format = 'hex';
+              valueDisplay.textContent = `Switched to hex format: ${jsPicker.value}`;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="eventHandling"><a href="#eventHandling" class="no-link">Event Handling</a></h2>
+    <p>The ColorPicker component forwards DOM events from its internal form elements (select, text input, and color
+      input), allowing you to listen for user interactions. The following events are forwarded: <code>change</code>,
+      <code>input</code>, <code>focus</code>, and <code>blur</code>.</p>
+
+    <h3>Change Event</h3>
+    <p>Fired when the user commits a color change through any of the internal inputs.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeEventPicker"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#3498db"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"changeOutput"</span>&gt;</span>Change the color to see the event<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeEventPicker'</span>);
+  picker.addEventListener(<span class="hljs-string">'change'</span>, (e) =&gt; {
+    <span class="hljs-keyword">const</span> output = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'changeOutput'</span>);
+    output.textContent = <span class="hljs-string">`Changed to: <span class="hljs-subst">${picker.value}</span>`</span>;
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="changeEventPicker" value="#3498db" class="mb"></k-color-picker>
+          <p id="changeOutput">Change the color to see the event</p>
+          <script>
+            const changeEventPicker = document.getElementById('changeEventPicker');
+            changeEventPicker.addEventListener('change', (e) => {
+              const output = document.getElementById('changeOutput');
+              output.textContent = `Changed to: ${changeEventPicker.value}`;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Input Event</h3>
+    <p>Fired as the user types or modifies the color value, providing real-time updates.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inputEventPicker"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#e74c3c"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"colorPreview"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:100%; height:50px; background:#e74c3c; border-radius:4px;"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'inputEventPicker'</span>);
+  <span class="hljs-keyword">const</span> preview = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'colorPreview'</span>);
+  picker.addEventListener(<span class="hljs-string">'input'</span>, (e) =&gt; {
+    preview.style.backgroundColor = picker.value;
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="inputEventPicker" value="#e74c3c" class="mb"></k-color-picker>
+          <div id="colorPreview" style="width:100%; height:50px; background:#e74c3c; border-radius:4px;"></div>
+          <script>
+            const inputEventPicker = document.getElementById('inputEventPicker');
+            const colorPreview = document.getElementById('colorPreview');
+            inputEventPicker.addEventListener('input', (e) => {
+              colorPreview.style.backgroundColor = inputEventPicker.value;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Focus and Blur Events</h3>
+    <p>Track when the user focuses on or leaves any of the color picker's input elements.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"focusEventPicker"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#2ecc71"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"focusOutput"</span>&gt;</span>Click on the color picker to see focus/blur events<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'focusEventPicker'</span>);
+  <span class="hljs-keyword">const</span> output = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'focusOutput'</span>);
+  picker.addEventListener(<span class="hljs-string">'focus'</span>, (e) =&gt; {
+    output.textContent = <span class="hljs-string">'Color picker focused'</span>;
+    output.style.color = <span class="hljs-string">'#2ecc71'</span>;
+  });
+  picker.addEventListener(<span class="hljs-string">'blur'</span>, (e) =&gt; {
+    output.textContent = <span class="hljs-string">'Color picker blurred'</span>;
+    output.style.color = <span class="hljs-string">'#95a5a6'</span>;
+  });
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="focusEventPicker" value="#2ecc71" class="mb"></k-color-picker>
+          <p id="focusOutput">Click on the color picker to see focus/blur events</p>
+          <script>
+            const focusEventPicker = document.getElementById('focusEventPicker');
+            const focusOutput = document.getElementById('focusOutput');
+            focusEventPicker.addEventListener('focus', (e) => {
+              focusOutput.textContent = 'Color picker focused';
+              focusOutput.style.color = '#2ecc71';
+            });
+            focusEventPicker.addEventListener('blur', (e) => {
+              focusOutput.textContent = 'Color picker blurred';
+              focusOutput.style.color = '#95a5a6';
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3>Multiple Events Example</h3>
+    <p>Combining multiple event listeners to create an interactive color picking experience with event logging.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-color-picker</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"multiEventPicker"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"#9b59b6"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-color-picker</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"eventLog"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
+  <span class="hljs-keyword">const</span> picker = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'multiEventPicker'</span>);
+  <span class="hljs-keyword">const</span> log = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'eventLog'</span>);
+  <span class="hljs-keyword">const</span> logEvent = <span class="hljs-function">(<span class="hljs-params">type, value</span>) =&gt;</span> {
+    <span class="hljs-keyword">const</span> time = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toLocaleTimeString();
+    <span class="hljs-keyword">const</span> entry = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>);
+    entry.textContent = <span class="hljs-string">`<span class="hljs-subst">${time}</span> - <span class="hljs-subst">${type}</span>: <span class="hljs-subst">${value}</span>`</span>;
+    log.insertBefore(entry, log.firstChild);
+    <span class="hljs-keyword">if</span> (log.children.length &gt; <span class="hljs-number">10</span>) log.lastChild.remove();
+  };
+  picker.addEventListener(<span class="hljs-string">'change'</span>, () =&gt; logEvent(<span class="hljs-string">'change'</span>, picker.value));
+  picker.addEventListener(<span class="hljs-string">'input'</span>, () =&gt; logEvent(<span class="hljs-string">'input'</span>, picker.value));
+  picker.addEventListener(<span class="hljs-string">'focus'</span>, () =&gt; logEvent(<span class="hljs-string">'focus'</span>, <span class="hljs-string">'focused'</span>));
+  picker.addEventListener(<span class="hljs-string">'blur'</span>, () =&gt; logEvent(<span class="hljs-string">'blur'</span>, <span class="hljs-string">'blurred'</span>));
+</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-color-picker id="multiEventPicker" value="#9b59b6" class="mb"></k-color-picker>
+          <pre id="eventLog"></pre>
+          <script>
+            const multiEventPicker = document.getElementById('multiEventPicker');
+            const eventLog = document.getElementById('eventLog');
+            const logEvent = (type, value) => {
+              const time = new Date().toLocaleTimeString();
+              const entry = document.createElement('div');
+              entry.textContent = `${time} - ${type}: ${value}`;
+              eventLog.insertBefore(entry, eventLog.firstChild);
+              if (eventLog.children.length > 10) eventLog.lastChild.remove();
+            };
+            multiEventPicker.addEventListener('change', () => logEvent('change', multiEventPicker.value));
+            multiEventPicker.addEventListener('input', () => logEvent('input', multiEventPicker.value));
+            multiEventPicker.addEventListener('focus', () => logEvent('focus', 'focused'));
+            multiEventPicker.addEventListener('blur', () => logEvent('blur', 'blurred'));
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">ShadowComponent</a></h6>
+    <h5>
+      <code>new ColorPicker()</code>
+    </h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>name<i>: string</i></code></h5>
+    <p>The name of the form control, used for form submission. When set, the component will participate in form data
+      collection. Syncs to <code>name</code> attribute.</p>
+
+    <h5><code>format<i>: string</i></code></h5>
+    <p>The output color format. Supported values: <code>'hex'</code>, <code>'rgba'</code>, <code>'hsla'</code>,
+      <code>'named'</code>, <code>'hwb'</code>, <code>'lab'</code>, <code>'lch'</code>, <code>'oklab'</code>,
+      <code>'oklch'</code>. Default is <code>'hex'</code>. Syncs to <code>format</code> attribute.
+    </p>
+
+    <h5><code>value<i>: string</i></code></h5>
+    <p>The current color value as a string in the current format. Accepts any supported color format and converts it
+      internally to RGB. When setting a color without alpha, the existing alpha value is preserved. Only colors with
+      explicit alpha values will update the transparency. Syncs to <code>value</code> attribute.</p>
+
+    <h5><code>red<i>: number</i></code></h5>
+    <p>The red component of the color (0-255).</p>
+
+    <h5><code>green<i>: number</i></code></h5>
+    <p>The green component of the color (0-255).</p>
+
+    <h5><code>blue<i>: number</i></code></h5>
+    <p>The blue component of the color (0-255).</p>
+
+    <h5><code>alpha<i>: number</i></code></h5>
+    <p>The alpha transparency component (0-1).</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>toHexColor(red, green, blue)<i>: string</i></code></h5>
+    <p>Converts RGB values to a hex color string for the native color input.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>change</code></h5>
+    <p>Fired when the user commits a color change through any of the internal inputs (select, text input, or color
+      input). This event is forwarded from the native DOM elements.</p>
+
+    <h5><code>input</code></h5>
+    <p>Fired when the user types or modifies values in the text input or interacts with the format selector. This event
+      is forwarded from the native DOM elements and provides real-time updates.</p>
+
+    <h5><code>focus</code></h5>
+    <p>Fired when any of the internal form elements (select, text input, or color input) receives focus. This event is
+      forwarded from the native DOM elements.</p>
+
+    <h5><code>blur</code></h5>
+    <p>Fired when any of the internal form elements (select, text input, or color input) loses focus. This event is
+      forwarded from the native DOM elements.</p>
+
+    <h3 id="staticMembers"><a href="#staticMembers" class="no-link">Static Members</a></h3>
+    <h5><code>namedColors<i>: object</i></code></h5>
+    <p>An object containing 147 named CSS colors mapped to their hex values.</p>
+
+    <h5><code>formats<i>: object</i></code></h5>
+    <p>An object containing format definitions for all supported color formats. Each format has <code>detect()</code>,
+      <code>parse()</code>, and <code>toString()</code> methods.
+    </p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/ColorPicker.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>