@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1,161 +1,136 @@
-import { state, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { clamp } from "../../internal/utils/math.js";
+import { brightnessFromLightness, hslaToHex, hslaToRgbString, lightnessFromBrightness, parseColor } from "../../internal/utils/color.js";
+import { drag } from "../../internal/utils/drag.js";
+import { UUIColorAreaEvent } from "./UUIColorAreaEvent.js";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.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`
+import { classMap } from "lit/directives/class-map.js";
+//#region src/components/color-area/color-area.element.ts
+/**
+* @element uui-color-area
+* @cssprop --uui-color-area-grid-handle-size - The size of the handle in the grid
+* @cssprop --uui-color-area-border-radius - The border radius of the color area
+*/
+var UUIColorAreaElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		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";
+	}
+	/** The current value. */
+	get value() {
+		return this._value;
+	}
+	set value(newVal) {
+		const oldVal = this._value;
+		this._value = newVal;
+		this.requestUpdate("value", oldVal);
+		if (this.isDraggingGridHandle) return;
+		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)
-    })}
+        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
-    })}
+			"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
-      )
-    })}
+			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`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-block;
         width: 280px;
@@ -215,37 +190,25 @@ _UUIColorAreaElement.styles = [
       .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
+__decorate([state()], UUIColorAreaElement.prototype, "isDraggingGridHandle", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorAreaElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorAreaElement.prototype, "readonly", void 0);
+__decorate([property({ type: Number })], UUIColorAreaElement.prototype, "hue", void 0);
+__decorate([property({ type: Number })], UUIColorAreaElement.prototype, "saturation", void 0);
+__decorate([property({ type: Number })], UUIColorAreaElement.prototype, "lightness", void 0);
+__decorate([property({ type: Number })], UUIColorAreaElement.prototype, "brightness", void 0);
+__decorate([property({ type: Number })], UUIColorAreaElement.prototype, "alpha", void 0);
+__decorate([property({ type: String })], UUIColorAreaElement.prototype, "value", null);
+//#endregion
+export { UUIColorAreaElement };
+
+//# sourceMappingURL=color-area.element.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"color-area.element.js","names":[],"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    // Avoid re-parsing parent-provided formatted values during active drag.\n    // This prevents tiny precision shifts that can make the handle appear to jump.\n    if (this.isDraggingGridHandle) return;\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"],"mappings":"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"}

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

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

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

@@ -1 +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;"}
+{"version":3,"file":"color-area.js","names":[],"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';\n"],"mappings":";;;;AAGA,cAAc,kBAAkB,mBAAmB"}

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

@@ -1,15 +1,17 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIColorPickerChangeEvent = class _UUIColorPickerChangeEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/color-picker/UUIColorPickerEvent.ts
+var UUIColorPickerChangeEvent = class extends UUIEvent {
+	static {
+		this.CHANGE = "change";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUIColorPickerChangeEvent.CHANGE = "change";
-let UUIColorPickerChangeEvent = _UUIColorPickerChangeEvent;
-export {
-  UUIColorPickerChangeEvent
-};
-//# sourceMappingURL=UUIColorPickerEvent.js.map
+//#endregion
+export { UUIColorPickerChangeEvent };
+
+//# sourceMappingURL=UUIColorPickerEvent.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"UUIColorPickerEvent.js","names":[],"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"],"mappings":";;AAIA,IAAa,4BAAb,cAA+C,SAG7C;;gBACgC;;CAEhC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

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

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './color-picker.element.js';
 export * from './UUIColorPickerEvent.js';
-export { UUIColorPickerElement as default } from './color-picker.element.js';