shoelace-rails-ui 0.1.0 → 0.1.1

data/remote-src/2.0.0.beta64/shoelace-next/src/components/color-picker/color-picker.ts

@@ -1,853 +0,0 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { emit } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import { clamp } from '../../internal/math';
-import { FormSubmitController } from '../../internal/form-control';
-import { LocalizeController } from '../../utilities/localize';
-import type SlDropdown from '../dropdown/dropdown';
-import type SlInput from '../input/input';
-import color from 'color';
-import styles from './color-picker.styles';
-
-import '../button/button';
-import '../button-group/button-group';
-import '../dropdown/dropdown';
-import '../icon/icon';
-import '../input/input';
-
-const hasEyeDropper = 'EyeDropper' in window;
-
-/**
- * @since 2.0
- * @status stable
- *
- * @dependency sl-button
- * @dependency sl-button-group
- * @dependency sl-dropdown
- * @dependency sl-input
- *
- * @event sl-change Emitted when the color picker's value changes.
- *
- * @csspart base - The component's base wrapper
- * @csspart trigger - The color picker's dropdown trigger.
- * @csspart swatches - The container that holds swatches.
- * @csspart swatch - Each individual swatch.
- * @csspart grid - The color grid.
- * @csspart grid-handle - The color grid's handle.
- * @csspart hue-slider - The hue slider.
- * @csspart opacity-slider - The opacity slider.
- * @csspart slider - Hue and opacity sliders.
- * @csspart slider-handle - Hue and opacity slider handles.
- * @csspart preview - The preview color.
- * @csspart input - The text input.
- * @csspart eye-dropper-button - The toggle format button's base.
- * @csspart format-button - The toggle format button's base.
- *
- * @cssproperty --grid-width - The width of the color grid.
- * @cssproperty --grid-height - The height of the color grid.
- * @cssproperty --grid-handle-size - The size of the color grid's handle.
- * @cssproperty --slider-height - The height of the hue and alpha sliders.
- * @cssproperty --slider-handle-size - The diameter of the slider's handle.
- * @cssproperty --swatch-size - The size of each predefined color swatch.
- */
-@customElement('sl-color-picker')
-export default class SlColorPicker extends LitElement {
-  static styles = styles;
-
-  @query('[part="input"]') input: SlInput;
-  @query('[part="preview"]') previewButton: HTMLButtonElement;
-  @query('.color-dropdown') dropdown: SlDropdown;
-
-  // @ts-ignore
-  private formSubmitController = new FormSubmitController(this);
-  private isSafeValue = false;
-  private lastValueEmitted: string;
-  private localize = new LocalizeController(this);
-
-  @state() private inputValue = '';
-  @state() private hue = 0;
-  @state() private saturation = 100;
-  @state() private lightness = 100;
-  @state() private alpha = 100;
-
-  /** The current color. */
-  @property() value = '#ffffff';
-
-  /**
-   * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA
-   * respectively. The color picker will always accept user input in any format (including CSS color names) and convert
-   * it to the desired format.
-   */
-  @property() format: 'hex' | 'rgb' | 'hsl' = 'hex';
-
-  /** Renders the color picker inline rather than inside a dropdown. */
-  @property({ type: Boolean, reflect: true }) inline = false;
-
-  /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
-  @property() size: 'small' | 'medium' | 'large' = 'medium';
-
-  /** Removes the format toggle. */
-  @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle = false;
-
-  /** The input's name attribute. */
-  @property() name = '';
-
-  /** Disables the color picker. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by the `setCustomValidity()`
-   * method using the browser's constraint validation API.
-   */
-  @property({ type: Boolean, reflect: true }) invalid = false;
-
-  /**
-   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-   * `overflow: auto|scroll`.
-   */
-  @property({ type: Boolean }) hoist = false;
-
-  /** Whether to show the opacity slider. */
-  @property({ type: Boolean }) opacity = false;
-
-  /** By default, the value will be set in lowercase. Set this to true to set it in uppercase instead. */
-  @property({ type: Boolean }) uppercase = false;
-
-  /**
-   * An array of predefined color swatches to display. Can include any format the color picker can parse, including
-   * HEX(A), RGB(A), HSL(A), and CSS color names.
-   */
-  @property({ attribute: false }) swatches: string[] = [
-    '#d0021b',
-    '#f5a623',
-    '#f8e71c',
-    '#8b572a',
-    '#7ed321',
-    '#417505',
-    '#bd10e0',
-    '#9013fe',
-    '#4a90e2',
-    '#50e3c2',
-    '#b8e986',
-    '#000',
-    '#444',
-    '#888',
-    '#ccc',
-    '#fff'
-  ];
-
-  /** The locale to render the component in. */
-  @property() lang: string;
-
-  firstUpdated() {
-    if (!this.setColor(this.value)) {
-      this.setColor(`#ffff`);
-    }
-
-    this.inputValue = this.value;
-    this.lastValueEmitted = this.value;
-    this.syncValues();
-  }
-
-  /** Returns the current value as a string in the specified format. */
-  getFormattedValue(format: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' = 'hex') {
-    const currentColor = this.parseColor(
-      `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
-    );
-
-    if (!currentColor) {
-      return '';
-    }
-
-    switch (format) {
-      case 'hex':
-        return currentColor.hex;
-      case 'hexa':
-        return currentColor.hexa;
-      case 'rgb':
-        return currentColor.rgb.string;
-      case 'rgba':
-        return currentColor.rgba.string;
-      case 'hsl':
-        return currentColor.hsl.string;
-      case 'hsla':
-        return currentColor.hsla.string;
-      default:
-        return '';
-    }
-  }
-
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    // If the input is invalid, show the dropdown so the browser can focus on it
-    if (!this.inline && this.input.invalid) {
-      return new Promise<void>(resolve => {
-        this.dropdown.addEventListener(
-          'sl-after-show',
-          () => {
-            this.input.reportValidity();
-            resolve();
-          },
-          { once: true }
-        );
-        this.dropdown.show();
-      });
-    } else {
-      return this.input.reportValidity();
-    }
-  }
-
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string) {
-    this.input.setCustomValidity(message);
-    this.invalid = this.input.invalid;
-  }
-
-  handleCopy() {
-    this.input.select();
-    document.execCommand('copy');
-    this.previewButton.focus();
-
-    // Show copied animation
-    this.previewButton.classList.add('color-picker__preview-color--copied');
-    this.previewButton.addEventListener('animationend', () =>
-      this.previewButton.classList.remove('color-picker__preview-color--copied')
-    );
-  }
-
-  handleFormatToggle() {
-    const formats = ['hex', 'rgb', 'hsl'];
-    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
-    this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl';
-  }
-
-  handleAlphaDrag(event: any) {
-    const container = this.shadowRoot!.querySelector('.color-picker__slider.color-picker__alpha') as HTMLElement;
-    const handle = container.querySelector('.color-picker__slider-handle') as HTMLElement;
-    const { width } = container.getBoundingClientRect();
-
-    handle.focus();
-    event.preventDefault();
-
-    this.handleDrag(event, container, x => {
-      this.alpha = clamp((x / width) * 100, 0, 100);
-      this.syncValues();
-    });
-  }
-
-  handleHueDrag(event: any) {
-    const container = this.shadowRoot!.querySelector('.color-picker__slider.color-picker__hue') as HTMLElement;
-    const handle = container.querySelector('.color-picker__slider-handle') as HTMLElement;
-    const { width } = container.getBoundingClientRect();
-
-    handle.focus();
-    event.preventDefault();
-
-    this.handleDrag(event, container, x => {
-      this.hue = clamp((x / width) * 360, 0, 360);
-      this.syncValues();
-    });
-  }
-
-  handleGridDrag(event: any) {
-    const grid = this.shadowRoot!.querySelector('.color-picker__grid') as HTMLElement;
-    const handle = grid.querySelector('.color-picker__grid-handle') as HTMLElement;
-    const { width, height } = grid.getBoundingClientRect();
-
-    handle.focus();
-    event.preventDefault();
-
-    this.handleDrag(event, grid, (x, y) => {
-      this.saturation = clamp((x / width) * 100, 0, 100);
-      this.lightness = clamp(100 - (y / height) * 100, 0, 100);
-      this.syncValues();
-    });
-  }
-
-  handleDrag(event: any, container: HTMLElement, onMove: (x: number, y: number) => void) {
-    if (this.disabled) {
-      return;
-    }
-
-    const move = (event: any) => {
-      const dims = container.getBoundingClientRect();
-      const defaultView = container.ownerDocument.defaultView!;
-      const offsetX = dims.left + defaultView.pageXOffset;
-      const offsetY = dims.top + defaultView.pageYOffset;
-      const x = (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - offsetX;
-      const y = (event.changedTouches ? event.changedTouches[0].pageY : event.pageY) - offsetY;
-
-      onMove(x, y);
-    };
-
-    // Move on init
-    move(event);
-
-    const stop = () => {
-      document.removeEventListener('mousemove', move);
-      document.removeEventListener('touchmove', move);
-      document.removeEventListener('mouseup', stop);
-      document.removeEventListener('touchend', stop);
-    };
-
-    document.addEventListener('mousemove', move);
-    document.addEventListener('touchmove', move);
-    document.addEventListener('mouseup', stop);
-    document.addEventListener('touchend', stop);
-  }
-
-  handleAlphaKeyDown(event: KeyboardEvent) {
-    const increment = event.shiftKey ? 10 : 1;
-
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.alpha = clamp(this.alpha - increment, 0, 100);
-      this.syncValues();
-    }
-
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.alpha = clamp(this.alpha + increment, 0, 100);
-      this.syncValues();
-    }
-
-    if (event.key === 'Home') {
-      event.preventDefault();
-      this.alpha = 0;
-      this.syncValues();
-    }
-
-    if (event.key === 'End') {
-      event.preventDefault();
-      this.alpha = 100;
-      this.syncValues();
-    }
-  }
-
-  handleHueKeyDown(event: KeyboardEvent) {
-    const increment = event.shiftKey ? 10 : 1;
-
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.hue = clamp(this.hue - increment, 0, 360);
-      this.syncValues();
-    }
-
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.hue = clamp(this.hue + increment, 0, 360);
-      this.syncValues();
-    }
-
-    if (event.key === 'Home') {
-      event.preventDefault();
-      this.hue = 0;
-      this.syncValues();
-    }
-
-    if (event.key === 'End') {
-      event.preventDefault();
-      this.hue = 360;
-      this.syncValues();
-    }
-  }
-
-  handleGridKeyDown(event: KeyboardEvent) {
-    const increment = event.shiftKey ? 10 : 1;
-
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.saturation = clamp(this.saturation - increment, 0, 100);
-      this.syncValues();
-    }
-
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.saturation = clamp(this.saturation + increment, 0, 100);
-      this.syncValues();
-    }
-
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      this.lightness = clamp(this.lightness + increment, 0, 100);
-      this.syncValues();
-    }
-
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      this.lightness = clamp(this.lightness - increment, 0, 100);
-      this.syncValues();
-    }
-  }
-
-  handleInputChange(event: CustomEvent) {
-    const target = event.target as HTMLInputElement;
-
-    this.setColor(target.value);
-    target.value = this.value;
-    event.stopPropagation();
-  }
-
-  handleInputKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      this.setColor(this.input.value);
-      this.input.value = this.value;
-      setTimeout(() => this.input.select());
-    }
-  }
-
-  normalizeColorString(colorString: string) {
-    //
-    // The color module we're using doesn't parse % values for the alpha channel in RGBA and HSLA. It also doesn't parse
-    // hex colors when the # is missing. This pre-parser tries to normalize these edge cases to provide a better
-    // experience for users who type in color values.
-    //
-    if (/rgba?/i.test(colorString)) {
-      const rgba = colorString
-        .replace(/[^\d.%]/g, ' ')
-        .split(' ')
-        .map(val => val.trim())
-        .filter(val => val.length);
-
-      if (rgba.length < 4) {
-        rgba[3] = '1';
-      }
-
-      if (rgba[3].indexOf('%') > -1) {
-        rgba[3] = (Number(rgba[3].replace(/%/g, '')) / 100).toString();
-      }
-
-      return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
-    }
-
-    if (/hsla?/i.test(colorString)) {
-      const hsla = colorString
-        .replace(/[^\d.%]/g, ' ')
-        .split(' ')
-        .map(val => val.trim())
-        .filter(val => val.length);
-
-      if (hsla.length < 4) {
-        hsla[3] = '1';
-      }
-
-      if (hsla[3].indexOf('%') > -1) {
-        hsla[3] = (Number(hsla[3].replace(/%/g, '')) / 100).toString();
-      }
-
-      return `hsla(${hsla[0]}, ${hsla[1]}, ${hsla[2]}, ${hsla[3]})`;
-    }
-
-    if (/^[0-9a-f]+$/i.test(colorString)) {
-      return `#${colorString}`;
-    }
-
-    return colorString;
-  }
-
-  parseColor(colorString: string) {
-    function toHex(value: number) {
-      const hex = Math.round(value).toString(16);
-      return hex.length === 1 ? `0${hex}` : hex;
-    }
-
-    let parsed: any;
-
-    // The color module has a weak parser, so we normalize certain things to make the user experience better
-    colorString = this.normalizeColorString(colorString);
-
-    try {
-      parsed = color(colorString);
-    } catch {
-      return false;
-    }
-
-    const hsl = {
-      h: parsed.hsl().color[0],
-      s: parsed.hsl().color[1],
-      l: parsed.hsl().color[2],
-      a: parsed.hsl().valpha
-    };
-
-    const rgb = {
-      r: parsed.rgb().color[0],
-      g: parsed.rgb().color[1],
-      b: parsed.rgb().color[2],
-      a: parsed.rgb().valpha
-    };
-
-    const hex = {
-      r: toHex(parsed.rgb().color[0]),
-      g: toHex(parsed.rgb().color[1]),
-      b: toHex(parsed.rgb().color[2]),
-      a: toHex(parsed.rgb().valpha * 255)
-    };
-
-    return {
-      hsl: {
-        h: hsl.h,
-        s: hsl.s,
-        l: hsl.l,
-        string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`)
-      },
-      hsla: {
-        h: hsl.h,
-        s: hsl.s,
-        l: hsl.l,
-        a: hsl.a,
-        string: this.setLetterCase(
-          `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${Number(
-            hsl.a.toFixed(2).toString()
-          )})`
-        )
-      },
-      rgb: {
-        r: rgb.r,
-        g: rgb.g,
-        b: rgb.b,
-        string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`)
-      },
-      rgba: {
-        r: rgb.r,
-        g: rgb.g,
-        b: rgb.b,
-        a: rgb.a,
-        string: this.setLetterCase(
-          `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${Number(
-            rgb.a.toFixed(2).toString()
-          )})`
-        )
-      },
-      hex: this.setLetterCase(`#${hex.r}${hex.g}${hex.b}`),
-      hexa: this.setLetterCase(`#${hex.r}${hex.g}${hex.b}${hex.a}`)
-    };
-  }
-
-  setColor(colorString: string) {
-    const newColor = this.parseColor(colorString);
-
-    if (!newColor) {
-      return false;
-    }
-
-    this.hue = newColor.hsla.h;
-    this.saturation = newColor.hsla.s;
-    this.lightness = newColor.hsla.l;
-    this.alpha = this.opacity ? newColor.hsla.a * 100 : 100;
-
-    this.syncValues();
-
-    return true;
-  }
-
-  setLetterCase(string: string) {
-    if (typeof string !== 'string') return '';
-    return this.uppercase ? string.toUpperCase() : string.toLowerCase();
-  }
-
-  async syncValues() {
-    const currentColor = this.parseColor(
-      `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
-    );
-
-    if (!currentColor) {
-      return;
-    }
-
-    // Update the value
-    if (this.format === 'hsl') {
-      this.inputValue = this.opacity ? currentColor.hsla.string : currentColor.hsl.string;
-    } else if (this.format === 'rgb') {
-      this.inputValue = this.opacity ? currentColor.rgba.string : currentColor.rgb.string;
-    } else {
-      this.inputValue = this.opacity ? currentColor.hexa : currentColor.hex;
-    }
-
-    // Setting this.value will trigger the watcher which parses the new value. We want to bypass that behavior because
-    // we've already parsed the color here and conversion/rounding can lead to values changing slightly. WHen this
-    // happens, dragging the grid handle becomes jumpy. After the next update, the usual behavior is restored.
-    this.isSafeValue = true;
-    this.value = this.inputValue;
-    await this.updateComplete;
-    this.isSafeValue = false;
-  }
-
-  handleAfterHide() {
-    this.previewButton.classList.remove('color-picker__preview-color--copied');
-  }
-
-  handleEyeDropper() {
-    if (!hasEyeDropper) {
-      return;
-    }
-
-    // @ts-ignore
-    const eyeDropper = new EyeDropper();
-
-    eyeDropper
-      .open()
-      .then((colorSelectionResult: any) => this.setColor(colorSelectionResult.sRGBHex))
-      .catch(() => {
-        // The user canceled, do nothing
-      });
-  }
-
-  @watch('format')
-  handleFormatChange() {
-    this.syncValues();
-  }
-
-  @watch('opacity')
-  handleOpacityChange() {
-    this.alpha = 100;
-  }
-
-  @watch('value')
-  handleValueChange(oldValue: string, newValue: string) {
-    if (!this.isSafeValue) {
-      const newColor = this.parseColor(newValue);
-
-      if (newColor) {
-        this.inputValue = this.value;
-        this.hue = newColor.hsla.h;
-        this.saturation = newColor.hsla.s;
-        this.lightness = newColor.hsla.l;
-        this.alpha = newColor.hsla.a * 100;
-      } else {
-        this.inputValue = oldValue;
-      }
-    }
-
-    if (this.value !== this.lastValueEmitted) {
-      emit(this, 'sl-change');
-      this.lastValueEmitted = this.value;
-    }
-  }
-
-  render() {
-    const x = this.saturation;
-    const y = 100 - this.lightness;
-
-    const colorPicker = html`
-      <div
-        part="base"
-        class=${classMap({
-          'color-picker': true,
-          'color-picker--inline': this.inline,
-          'color-picker--disabled': this.disabled
-        })}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-      >
-        <div
-          part="grid"
-          class="color-picker__grid"
-          style=${styleMap({ backgroundColor: `hsl(${this.hue}deg, 100%, 50%)` })}
-          @mousedown=${this.handleGridDrag}
-          @touchstart=${this.handleGridDrag}
-        >
-          <span
-            part="grid-handle"
-            class="color-picker__grid-handle"
-            style=${styleMap({
-              top: `${y}%`,
-              left: `${x}%`,
-              backgroundColor: `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%)`
-            })}
-            role="slider"
-            aria-label="HSL"
-            aria-valuetext=${`hsl(${Math.round(this.hue)}, ${Math.round(this.saturation)}%, ${Math.round(
-              this.lightness
-            )}%)`}
-            tabindex=${ifDefined(this.disabled ? undefined : '0')}
-            @keydown=${this.handleGridKeyDown}
-          ></span>
-        </div>
-
-        <div class="color-picker__controls">
-          <div class="color-picker__sliders">
-            <div
-              part="slider hue-slider"
-              class="color-picker__hue color-picker__slider"
-              @mousedown=${this.handleHueDrag}
-              @touchstart=${this.handleHueDrag}
-            >
-              <span
-                part="slider-handle"
-                class="color-picker__slider-handle"
-                style=${styleMap({
-                  left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`
-                })}
-                role="slider"
-                aria-label="hue"
-                aria-orientation="horizontal"
-                aria-valuemin="0"
-                aria-valuemax="360"
-                aria-valuenow=${Math.round(this.hue)}
-                tabindex=${ifDefined(this.disabled ? undefined : '0')}
-                @keydown=${this.handleHueKeyDown}
-              ></span>
-            </div>
-
-            ${this.opacity
-              ? html`
-                  <div
-                    part="slider opacity-slider"
-                    class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
-                    @mousedown="${this.handleAlphaDrag}"
-                    @touchstart="${this.handleAlphaDrag}"
-                  >
-                    <div
-                      class="color-picker__alpha-gradient"
-                      style=${styleMap({
-                        backgroundImage: `linear-gradient(
-                          to right,
-                          hsl(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, 0%) 0%,
-                          hsl(${this.hue}deg, ${this.saturation}%, ${this.lightness}%) 100%
-                        )`
-                      })}
-                    ></div>
-                    <span
-                      part="slider-handle"
-                      class="color-picker__slider-handle"
-                      style=${styleMap({
-                        left: `${this.alpha}%`
-                      })}
-                      role="slider"
-                      aria-label="alpha"
-                      aria-orientation="horizontal"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                      aria-valuenow=${Math.round(this.alpha)}
-                      tabindex=${ifDefined(this.disabled ? undefined : '0')}
-                      @keydown=${this.handleAlphaKeyDown}
-                    ></span>
-                  </div>
-                `
-              : ''}
-          </div>
-
-          <button
-            type="button"
-            part="preview"
-            class="color-picker__preview color-picker__transparent-bg"
-            aria-label=${this.localize.term('copy')}
-            style=${styleMap({
-              '--preview-color': `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
-            })}
-            @click=${this.handleCopy}
-          ></button>
-        </div>
-
-        <div class="color-picker__user-input">
-          <sl-input
-            part="input"
-            type="text"
-            name=${this.name}
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            .value=${live(this.inputValue)}
-            ?disabled=${this.disabled}
-            @keydown=${this.handleInputKeyDown}
-            @sl-change=${this.handleInputChange}
-          ></sl-input>
-
-          <sl-button-group>
-            ${!this.noFormatToggle
-              ? html`
-                  <sl-button
-                    aria-label=${this.localize.term('toggle_color_format')}
-                    exportparts="base:format-button"
-                    @click=${this.handleFormatToggle}
-                  >
-                    ${this.setLetterCase(this.format)}
-                  </sl-button>
-                `
-              : ''}
-            ${hasEyeDropper
-              ? html`
-                  <sl-button exportparts="base:eye-dropper-button" @click=${this.handleEyeDropper}>
-                    <sl-icon
-                      library="system"
-                      name="eyedropper"
-                      label=${this.localize.term('select_a_color_from_the_screen')}
-                    ></sl-icon>
-                  </sl-button>
-                `
-              : ''}
-          </sl-button-group>
-        </div>
-
-        ${this.swatches
-          ? html`
-              <div part="swatches" class="color-picker__swatches">
-                ${this.swatches.map(swatch => {
-                  return html`
-                    <div
-                      part="swatch"
-                      class="color-picker__swatch color-picker__transparent-bg"
-                      tabindex=${ifDefined(this.disabled ? undefined : '0')}
-                      role="button"
-                      aria-label=${swatch}
-                      @click=${() => !this.disabled && this.setColor(swatch)}
-                      @keydown=${(event: KeyboardEvent) =>
-                        !this.disabled && event.key === 'Enter' && this.setColor(swatch)}
-                    >
-                      <div class="color-picker__swatch-color" style=${styleMap({ backgroundColor: swatch })}></div>
-                    </div>
-                  `;
-                })}
-              </div>
-            `
-          : ''}
-      </div>
-    `;
-
-    // Render inline
-    if (this.inline) {
-      return colorPicker;
-    }
-
-    // Render as a dropdown
-    return html`
-      <sl-dropdown
-        class="color-dropdown"
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        .containing-element=${this}
-        ?disabled=${this.disabled}
-        ?hoist=${this.hoist}
-        @sl-after-hide=${this.handleAfterHide}
-      >
-        <button
-          part="trigger"
-          slot="trigger"
-          class=${classMap({
-            'color-dropdown__trigger': true,
-            'color-dropdown__trigger--disabled': this.disabled,
-            'color-dropdown__trigger--small': this.size === 'small',
-            'color-dropdown__trigger--medium': this.size === 'medium',
-            'color-dropdown__trigger--large': this.size === 'large',
-            'color-picker__transparent-bg': true
-          })}
-          style=${styleMap({
-            color: `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
-          })}
-          type="button"
-        ></button>
-        ${colorPicker}
-      </sl-dropdown>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-color-picker': SlColorPicker;
-  }
-}