@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

package/dist/components/color-area/color-area.element.js

@@ -0,0 +1,251 @@
+import { state, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { LitElement, html, css } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { UUIColorAreaEvent } from "./UUIColorAreaEvent.js";
+import { parseColor, brightnessFromLightness, lightnessFromBrightness, hslaToRgbString, hslaToHex } from "../../internal/utils/color.js";
+import { drag } from "../../internal/utils/drag.js";
+import { clamp } from "../../internal/utils/math.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const _UUIColorAreaElement = class _UUIColorAreaElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isDraggingGridHandle = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.hue = 0;
+    this.saturation = 0;
+    this.lightness = 0;
+    this.brightness = 0;
+    this.alpha = 100;
+    this._value = "#000";
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newVal) {
+    const oldVal = this._value;
+    this._value = newVal;
+    this.requestUpdate("value", oldVal);
+    try {
+      const parsed = parseColor(newVal);
+      if (parsed) {
+        const { h, s, l, a } = parsed;
+        if (h !== 0) {
+          this.hue = h;
+        }
+        this.lightness = l;
+        this.saturation = s;
+        this.brightness = brightnessFromLightness(s, l);
+        this.alpha = a * 100;
+      }
+    } catch (e) {
+      console.error("Something went wrong parsing the color string.", e);
+    }
+  }
+  handleGridDrag(event) {
+    if (this.disabled || this.readonly) return;
+    const grid = this.shadowRoot.querySelector(".color-area");
+    const handle = grid.querySelector(".color-area__handle");
+    const { width, height } = grid.getBoundingClientRect();
+    handle.focus();
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDraggingGridHandle = true;
+    drag(grid, {
+      onMove: (x, y) => {
+        if (Number.isNaN(x) || Number.isNaN(y)) return;
+        this.saturation = clamp(x / width * 100, 0, 100);
+        this.brightness = clamp(100 - y / height * 100, 0, 100);
+        this.lightness = lightnessFromBrightness(
+          this.saturation,
+          this.brightness
+        );
+        this.syncValues();
+      },
+      onStop: () => this.isDraggingGridHandle = false,
+      initialEvent: event
+    });
+  }
+  handleGridKeyDown(event) {
+    if (this.disabled) return;
+    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.brightness = clamp(this.brightness + increment, 0, 100);
+      this.lightness = lightnessFromBrightness(
+        this.saturation,
+        this.brightness
+      );
+      this.syncValues();
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.brightness = clamp(this.brightness - increment, 0, 100);
+      this.lightness = lightnessFromBrightness(
+        this.saturation,
+        this.brightness
+      );
+      this.syncValues();
+    }
+  }
+  syncValues() {
+    this._value = hslaToRgbString(
+      this.hue,
+      this.saturation,
+      this.lightness,
+      this.alpha / 100
+    );
+    this.dispatchEvent(new UUIColorAreaEvent(UUIColorAreaEvent.CHANGE));
+  }
+  render() {
+    const gridHandleX = this.saturation;
+    const gridHandleY = 100 - this.brightness;
+    return html`
+      <div
+        part="grid"
+        class="color-area"
+        style=${styleMap({
+      backgroundColor: hslaToHex(this.hue, 100, 50)
+    })}
+        @mousedown=${this.handleGridDrag}
+        @touchstart=${this.handleGridDrag}>
+        <span
+          part="grid-handle"
+          class=${classMap({
+      "color-area__handle": true,
+      "color-area__handle--dragging": this.isDraggingGridHandle
+    })}
+          style=${styleMap({
+      top: `${gridHandleY}%`,
+      left: `${gridHandleX}%`,
+      backgroundColor: hslaToHex(
+        this.hue,
+        this.saturation,
+        this.lightness,
+        this.alpha
+      )
+    })}
+          role="application"
+          tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+          aria-label="HSB"
+          @keydown=${this.handleGridKeyDown}></span>
+      </div>
+    `;
+  }
+};
+_UUIColorAreaElement.styles = [
+  css`
+      :host {
+        display: inline-block;
+        width: 280px;
+        height: 200px;
+      }
+
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) .color-area {
+        user-select: none;
+        pointer-events: none;
+        opacity: 0.55;
+      }
+
+      :host([readonly]) {
+        pointer-events: none;
+        cursor: default;
+      }
+
+      .color-area {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        background-image:
+          linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 100%
+          ),
+          linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+        box-sizing: border-box;
+        cursor: crosshair;
+        forced-color-adjust: none;
+        border-radius: var(
+          --uui-color-area-border-radius,
+          var(--uui-border-radius-2)
+        );
+      }
+      .color-area__handle {
+        position: absolute;
+        width: var(--uui-color-area-grid-handle-size, 16px);
+        height: var(--uui-color-area-grid-handle-size, 16px);
+        border-radius: 50%;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+        border: solid 2px white;
+        margin-top: calc(var(--uui-color-area-grid-handle-size, 16px) / -2);
+        margin-left: calc(var(--uui-color-area-grid-handle-size, 16px) / -2);
+        transition: 150ms transform;
+        box-sizing: inherit;
+      }
+      .color-area__handle--dragging {
+        cursor: none;
+        transform: scale(1.5);
+      }
+      .color-area__handle--empty {
+        display: none;
+      }
+    `
+];
+let UUIColorAreaElement = _UUIColorAreaElement;
+__decorateClass([
+  state()
+], UUIColorAreaElement.prototype, "isDraggingGridHandle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorAreaElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorAreaElement.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIColorAreaElement.prototype, "hue", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIColorAreaElement.prototype, "saturation", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIColorAreaElement.prototype, "lightness", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIColorAreaElement.prototype, "brightness", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIColorAreaElement.prototype, "alpha", 2);
+__decorateClass([
+  property({ type: String })
+], UUIColorAreaElement.prototype, "value", 1);
+export {
+  UUIColorAreaElement
+};
+//# sourceMappingURL=color-area.element.js.map

package/dist/components/color-area/color-area.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-area.element.js","sources":["../../../src/components/color-area/color-area.element.ts"],"sourcesContent":["import { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { css, html, LitElement } from 'lit';\n\nimport {\n  drag,\n  clamp,\n  hslaToHex,\n  brightnessFromLightness,\n  lightnessFromBrightness,\n  parseColor,\n  hslaToRgbString,\n} from '../../internal/utils/index.js';\n\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { UUIColorAreaEvent } from './UUIColorAreaEvent.js';\n\n/**\n * @element uui-color-area\n * @cssprop --uui-color-area-grid-handle-size - The size of the handle in the grid\n * @cssprop --uui-color-area-border-radius - The border radius of the color area\n */\nexport class UUIColorAreaElement extends LitElement {\n  @state() private isDraggingGridHandle = false;\n\n  /**\n   * Sets the color area to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the color area to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * The current hue.\n   * @attr\n   * @type number\n   * @default 0\n   * @min 0\n   * @max 360\n   * @step 1\n   * @unit °\n   */\n  @property({ type: Number }) hue = 0;\n\n  /**\n   * The current saturation.\n   * @attr\n   * @type number\n   * @default 0\n   * @min 0\n   * @max 100\n   * @step 1\n   * @unit %\n   **/\n  @property({ type: Number }) saturation = 0;\n\n  /**\n   * The current lightness.\n   * @attr\n   * @type number\n   * @default 0\n   * @min 0\n   * @max 100\n   * @step 1\n   * @unit %\n   **/\n  @property({ type: Number }) lightness = 0;\n\n  /**\n   * The current brightness.\n   * @attr\n   * @type number\n   * @default 0\n   * @min 0\n   * @max 100\n   * @step 1\n   * @unit %\n   **/\n  @property({ type: Number }) brightness = 0;\n\n  /**\n   * The current alpha.\n   * @attr\n   * @type number\n   * @default 100\n   * @min 0\n   * @max 100\n   * @step 1\n   * @unit %\n   */\n  @property({ type: Number }) alpha = 100;\n\n  private _value: string = '#000';\n\n  /** The current value. */\n  @property({ type: String })\n  public get value(): string {\n    return this._value;\n  }\n\n  public set value(newVal: string) {\n    const oldVal = this._value;\n    this._value = newVal;\n    this.requestUpdate('value', oldVal);\n\n    try {\n      const parsed = parseColor(newVal);\n\n      if (parsed) {\n        const { h, s, l, a } = parsed;\n\n        // Update hue from parsed color, but when color is black, value from hue slider may be different from zero.\n        if (h !== 0) {\n          this.hue = h;\n        }\n\n        this.lightness = l;\n        this.saturation = s;\n        this.brightness = brightnessFromLightness(s, l);\n        this.alpha = a * 100;\n      }\n    } catch (e) {\n      console.error('Something went wrong parsing the color string.', e);\n    }\n  }\n\n  handleGridDrag(event: PointerEvent) {\n    if (this.disabled || this.readonly) return;\n\n    const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-area')!;\n    const handle = grid.querySelector<HTMLElement>('.color-area__handle')!;\n    const { width, height } = grid.getBoundingClientRect();\n\n    handle.focus();\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.isDraggingGridHandle = true;\n\n    drag(grid, {\n      onMove: (x, y) => {\n        // check if coordinates are not NaN (can happen when dragging outside of the grid)\n        if (Number.isNaN(x) || Number.isNaN(y)) return;\n\n        this.saturation = clamp((x / width) * 100, 0, 100);\n        this.brightness = clamp(100 - (y / height) * 100, 0, 100);\n        this.lightness = lightnessFromBrightness(\n          this.saturation,\n          this.brightness,\n        );\n        this.syncValues();\n      },\n      onStop: () => (this.isDraggingGridHandle = false),\n      initialEvent: event,\n    });\n  }\n\n  handleGridKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    const increment = event.shiftKey ? 10 : 1;\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.saturation = clamp(this.saturation - increment, 0, 100);\n      this.syncValues();\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.saturation = clamp(this.saturation + increment, 0, 100);\n      this.syncValues();\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.brightness = clamp(this.brightness + increment, 0, 100);\n      this.lightness = lightnessFromBrightness(\n        this.saturation,\n        this.brightness,\n      );\n      this.syncValues();\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.brightness = clamp(this.brightness - increment, 0, 100);\n      this.lightness = lightnessFromBrightness(\n        this.saturation,\n        this.brightness,\n      );\n      this.syncValues();\n    }\n  }\n\n  syncValues() {\n    this._value = hslaToRgbString(\n      this.hue,\n      this.saturation,\n      this.lightness,\n      this.alpha / 100,\n    );\n    this.dispatchEvent(new UUIColorAreaEvent(UUIColorAreaEvent.CHANGE));\n  }\n\n  render() {\n    const gridHandleX = this.saturation;\n    const gridHandleY = 100 - this.brightness;\n\n    return html`\n      <div\n        part=\"grid\"\n        class=\"color-area\"\n        style=${styleMap({\n          backgroundColor: hslaToHex(this.hue, 100, 50),\n        })}\n        @mousedown=${this.handleGridDrag}\n        @touchstart=${this.handleGridDrag}>\n        <span\n          part=\"grid-handle\"\n          class=${classMap({\n            'color-area__handle': true,\n            'color-area__handle--dragging': this.isDraggingGridHandle,\n          })}\n          style=${styleMap({\n            top: `${gridHandleY}%`,\n            left: `${gridHandleX}%`,\n            backgroundColor: hslaToHex(\n              this.hue,\n              this.saturation,\n              this.lightness,\n              this.alpha,\n            ),\n          })}\n          role=\"application\"\n          tabindex=${ifDefined(this.disabled ? undefined : '0')}\n          aria-label=\"HSB\"\n          @keydown=${this.handleGridKeyDown}></span>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        width: 280px;\n        height: 200px;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) .color-area {\n        user-select: none;\n        pointer-events: none;\n        opacity: 0.55;\n      }\n\n      :host([readonly]) {\n        pointer-events: none;\n        cursor: default;\n      }\n\n      .color-area {\n        position: relative;\n        height: 100%;\n        width: 100%;\n        background-image:\n          linear-gradient(\n            to bottom,\n            rgba(0, 0, 0, 0) 0%,\n            rgba(0, 0, 0, 1) 100%\n          ),\n          linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);\n        box-sizing: border-box;\n        cursor: crosshair;\n        forced-color-adjust: none;\n        border-radius: var(\n          --uui-color-area-border-radius,\n          var(--uui-border-radius-2)\n        );\n      }\n      .color-area__handle {\n        position: absolute;\n        width: var(--uui-color-area-grid-handle-size, 16px);\n        height: var(--uui-color-area-grid-handle-size, 16px);\n        border-radius: 50%;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n        border: solid 2px white;\n        margin-top: calc(var(--uui-color-area-grid-handle-size, 16px) / -2);\n        margin-left: calc(var(--uui-color-area-grid-handle-size, 16px) / -2);\n        transition: 150ms transform;\n        box-sizing: inherit;\n      }\n      .color-area__handle--dragging {\n        cursor: none;\n        transform: scale(1.5);\n      }\n      .color-area__handle--empty {\n        display: none;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/color-area/color-area.js

@@ -0,0 +1,10 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIColorAreaElement } from "./color-area.element.js";
+import { UUIColorAreaEvent } from "./UUIColorAreaEvent.js";
+defineElement("uui-color-area", UUIColorAreaElement);
+export {
+  UUIColorAreaElement,
+  UUIColorAreaEvent,
+  UUIColorAreaElement as default
+};
+//# sourceMappingURL=color-area.js.map

package/dist/components/color-area/color-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-area.js","sources":["../../../src/components/color-area/color-area.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIColorAreaElement } from './color-area.element.js';\n\ndefineElement('uui-color-area', UUIColorAreaElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-color-area': UUIColorAreaElement;\n  }\n}\n\nexport * from './color-area.element.js';\nexport * from './UUIColorAreaEvent.js';\nexport { UUIColorAreaElement as default } from './color-area.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,kBAAkB,mBAAmB;"}

package/dist/components/color-picker/UUIColorPickerEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIColorPickerElement } from './color-picker.element.js';
+export declare class UUIColorPickerChangeEvent extends UUIEvent<{}, UUIColorPickerElement> {
+    static readonly CHANGE = "change";
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/color-picker/UUIColorPickerEvent.js

@@ -0,0 +1,15 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIColorPickerChangeEvent = class _UUIColorPickerChangeEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIColorPickerChangeEvent.CHANGE = "change";
+let UUIColorPickerChangeEvent = _UUIColorPickerChangeEvent;
+export {
+  UUIColorPickerChangeEvent
+};
+//# sourceMappingURL=UUIColorPickerEvent.js.map

package/dist/components/color-picker/UUIColorPickerEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIColorPickerEvent.js","sources":["../../../src/components/color-picker/UUIColorPickerEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\n\nimport type { UUIColorPickerElement } from './color-picker.element.js';\n\nexport class UUIColorPickerChangeEvent extends UUIEvent<\n  {},\n  UUIColorPickerElement\n> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAIO,MAAM,6BAAN,MAAM,mCAAkC,SAG7C;AAAA,EAGA,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,2BAAuB,SAAS;AAJ3B,IAAM,4BAAN;"}

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,9 @@
+import { UUIColorPickerElement } from './color-picker.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-color-picker': UUIColorPickerElement;
+    }
+}
+export * from './color-picker.element.js';
+export * from './UUIColorPickerEvent.js';
+export { UUIColorPickerElement as default } from './color-picker.element.js';

package/dist/components/color-picker/color-picker.element.d.ts

@@ -0,0 +1,135 @@
+import { LitElement } from 'lit';
+import { type HslaColor } from '../../internal/utils/index.js';
+import type { UUIColorAreaEvent } from '../color-area/color-area.js';
+import type { UUIColorSliderEvent } from '../color-slider/color-slider.js';
+import type { UUIColorSwatchesEvent } from '../color-swatches/color-swatches.js';
+import '../color-area/color-area.js';
+import '../color-slider/color-slider.js';
+import '../input/input.js';
+import '../button-group/button-group.js';
+import '../button/button.js';
+import '../icon-registry-essential/icon-registry-essential.js';
+import '../icon/icon.js';
+import '../color-swatches/color-swatches.js';
+import '../color-swatch/color-swatch.js';
+import '../popover-container/popover-container.js';
+export type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+export type UUIColorPickerFormatWithAlpha = UUIColorPickerFormat | 'hexa' | 'rgba' | 'hsla' | 'hsva';
+type UUIColorPickerSize = 'small' | 'medium' | 'large';
+declare const UUIColorPickerElement_base: (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ * @element uui-color-picker
+ * @cssprop --uui-color-picker-width - The width of the color picker
+ * @description
+ * @fires {UUIColorPickerChangeEvent} change - Fired when the color changes
+ */
+export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
+    private readonly _input;
+    private readonly _previewButton;
+    private readonly _swatches;
+    private _value;
+    private inputValue;
+    private hue;
+    private saturation;
+    private lightness;
+    private alpha;
+    private _color;
+    /**
+     * The current color.
+     * @attr
+     * @type {string}
+     * @default ''
+     **/
+    set value(value: string);
+    get value(): string;
+    /**
+     * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA
+     * respectively. The color picker will always accept user input in any format (including CSS color names) and convert
+     * it to the desired format.
+     * @attr
+     * @type {UUIColorPickerFormat}
+     * @default 'hex'
+     */
+    format: UUIColorPickerFormat;
+    /**
+     * The input's name attribute.
+     * @attr
+     * @type {string}
+     * @default ''
+     **/
+    name: string;
+    /**
+     * Determines the size of the color picker's trigger. This has no effect on inline color pickers.
+     * @attr
+     * @type {UUIColorPickerSize}
+     * @default 'medium'
+     **/
+    size: UUIColorPickerSize;
+    /**
+     * Removes the format toggle.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    noFormatToggle: boolean;
+    /**
+     * Renders the color picker inline rather than inside a dropdown.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    inline: boolean;
+    /**
+     * Sets the color picker to disabled.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    disabled: boolean;
+    /**
+     * Whether to show the opacity slider.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    opacity: boolean;
+    /**
+     * Sets the color picker to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    uppercase: boolean;
+    /**
+     * An array of predefined color swatches to display. Can include any format the color picker can parse, including
+     * HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.
+     */
+    swatches: string[];
+    /** Returns the current value as a string in the specified format. */
+    getFormattedValue(format: UUIColorPickerFormat): string;
+    handleFormatToggle(): void;
+    handleAlphaChange(event: UUIColorSliderEvent): void;
+    handleHueChange(event: UUIColorSliderEvent): void;
+    handleGridChange(event: UUIColorAreaEvent): void;
+    handleInputChange(event: CustomEvent): void;
+    handleInputKeyDown(event: KeyboardEvent): void;
+    handleColorSwatchChange(event: UUIColorSwatchesEvent): void;
+    handleCopy(): void;
+    handleEyeDropper(): void;
+    setColor(colorString: string | HslaColor): boolean | undefined;
+    setLetterCase(string: string): string;
+    private _syncValues;
+    private _renderColorPicker;
+    private _renderSwatches;
+    private _renderPreviewButton;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};