Color input with lit

color-input.ts

import { html, css, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";

/** Color Input */
@customElement("color-input")
export class ColorInput extends LitElement {
  static override styles = css`
    main {
      --input-size: 48px;
      --padding: 4px;
      display: flex;
      flex-direction: row;
      margin-top: calc(var(--padding) / 2);
      margin-bottom: calc(var(--padding) / 2);
    }
    input[type="color"] {
      width: var(--input-size);
      height: var(--input-size);
      outline: none;
      border: none;
      border-radius: 50%;
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: var(--input-size);
      border: var(--md-sys-color-outline) solid 1px;
    }
    .details {
      display: flex;
      flex-direction: column;
      margin-left: calc(var(--padding) / 2);
      justify-content: center;
      user-select: none;
    }
    .title {
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 24px;
      color: var(--md-sys-color-on-background);
    }
    .subtitle {
      font-style: normal;
      font-weight: normal;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.1px;
      color: var(--md-sys-color-on-surface);
      opacity: 0.68;
    }
  `;

  @property() value = "#000000";
  @property() label = "Color";
  @property() description = "";

  override render() {
    return html`<main>
      <input
        id="color-input"
        type="color"
        .value=${this.value}
        @change=${(e: Event) => {
          const input = e.target as HTMLInputElement;
          this.onColorChange(input.value);
        }}
        @contextmenu=${(e: Event) => {
          e.preventDefault();
          let value = prompt("Enter a color", this.value);
          if (value) {
            if (value.startsWith("#")) value = value.slice(1);
            this.onColorChange(`#${value}`);
          } else {
            this.onColorChange(this.value);
          }
          return false;
        }}
      />
      <div class="details">
        <span class="title">${this.label}</span>
        ${this.description
          ? html`<span class="subtitle">${this.description}</span>`
          : html``}
      </div>
    </main>`;
  }

  onColorChange(color: string) {
    this.dispatchEvent(
      new CustomEvent("color", {
        detail: color,
        bubbles: true,
        composed: true,
      })
    );
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "color-input": ColorInput;
  }
}