<label><strong>Full</strong>
  <input type="text" data-colorpicker="rgb" value="rgba(144,228,253,0.65)" />
</label>
<label><strong>Mini</strong>
  <input type="text" data-colorpicker="mini" value="#99ebc6" />
</label>
<label><strong>Mini (update input)</strong>
  <input type="text" data-colorpicker="mini update" value="#ffb700" />
</label>
<label><strong>Micro</strong>
  <input type="text" data-colorpicker="micro hsl" value="#445566" />
</label>
<label><strong>Micro (update input)</strong>
  <input type="text" data-colorpicker="micro hsl update" value="hsl(209,76%,52%,1)" />
</label>

<details>
  <summary>How to use:</summary>
  <p>
    On an <code>input</code>-tag with <code>type</code> set to <code>text</code> or <code>color</code>, add <code>data-colorpicker</code> with optional options.<br />
    Output-formats are: cmyk, hex (default), hsl and rgb. Size-formats are: full (default), mini and micro (same as mini, but without alpha-channel).
    The option 'update' enables live update of the input-value.

  </p>
  <p>
    <strong>Examples:</strong><br />
    <code>data-colorpicker="update"</code> (full, hex, live update)<br />
    <code>data-colorpicker="rgb mini"</code><br />
    <code>data-colorpicker="cmyk micro"</code>
  </p>
  <p>
    <strong>Keyboard Shortcuts, input/trigger:</strong><br />
    <code>ArrowDown</code>: Open ColorPicker<br />
    <code>Escape</code>: Close ColorPicker<br />
  </p>
  <p>
    <strong>Keyboard Shortcuts, ColorPicker:</strong><br />
    <code>Arrow Keys</code>: Change value on selected element<br />
    <code>Enter</code>: Close ColorPicker, set color<br />
    <code>Escape</code>: Close ColorPicker, do NOT set color<br />
    <code>Tab</code>: Go to next input<br />
    When tabbing away from last input, the ColorPicker wll close and re-focus on the input/trigger.
  </p>
  <p>
    <strong>NOTE ON: <code>&lt;input type="color" /&gt;</code></strong><br />
    The <strong>value</strong> for this type can <strong>only</strong> be a 7-char hex-string, so chose the 'micro'-option, as this do not use the alpha-channel.
  </p>
</details>

body { display: flex; font-family: ui-sans-serif, system-ui, sans-serif;  flex-wrap: wrap;  padding: 1rem; }
[data-colorpicker] { border: 1px solid #BBB; border-radius: .25rem; margin-right: 1rem; padding: .5rem; width: 15.5rem; -webkit-appearance: none; }
label strong { display: block; font-size: small; margin: .5rem 0; }
code { background: lightgrey; padding: 0 0.15rem; }
details { color: #555; flex: 0 0 100%; line-height: 1.6; margin: 1rem 0; }

const elements = document.querySelectorAll('[data-colorpicker]');
if (elements.length) {
  import('https://assets.stoumann.dk/js/colorpicker.mjs')
  .then(module => {
    const jsClass = module.default;
    elements.forEach((element, index) => {
      const cp = new jsClass(element, element.dataset);
      /* FOR DEMO ONLY: SHOW FIRST COLORPICKER */
      if (index === 1) {
        cp.toggle(true);
      }
    });
  })
}