@luzmo/lucero 1.0.1-alpha.14 → 1.0.1-alpha.16

package/components/color-area/index.js

@@ -15,39 +15,60 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as z, r as v, x as y, n as s } from "../base-WsynuqaS.js";
-import { e as b } from "../query-D_KR_GUc.js";
-import { o as m } from "../if-defined-DOaE2coe.js";
-import "../color-handle/index.js";
-import { j as x, c as w } from "../platform-BM-uMWpX.js";
-import { C } from "../color-controller-B0uX6Zso.js";
-import { L as $ } from "../language-resolution-8yZa5r_P.js";
-import { s as k } from "../streaming-listener-CP-JE6Fa.js";
-const g = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const u = document.createElement("style");
-    u.setAttribute("data-luzmo-vars", ""), u.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(u);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
+    document.head.appendChild(styleElement);
   }
 };
-g();
-const R = "@media (forced-colors: active){:host{--highcontrast-color-area-border-color-disabled: GrayText;--highcontrast-color-area-border-color: Canvas;--highcontrast-color-area-fill-color-disabled: Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width, 64px);min-block-size:var(--luzmo-color-area-min-height, 64px);inline-size:var(--luzmo-color-area-width, 192px);block-size:var(--luzmo-color-area-height, 192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color, var(--luzmo-color-area-border-color, var(--luzmo-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled, var(--luzmo-color-area-disabled-background-color, var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width, 192px) - var(--luzmo-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s))}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width))}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}";
-var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (u, e, o, t) => {
-  for (var r = t > 1 ? void 0 : t ? P(e, o) : e, a = u.length - 1, n; a >= 0; a--)
-    (n = u[a]) && (r = (t ? n(e, o, r) : n(r)) || r);
-  return t && r && A(e, o, r), r;
+initializeGlobalLuzmoCSSVariables();
+import { unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../color-handle/index.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+import { j as isAndroid, c as isIOS } from "../platform-Cxn0WbyT.js";
+import { C as ColorController } from "../color-controller-BjDZaxhX.js";
+import { L as LanguageResolutionController } from "../language-resolution-BSGJAWiQ.js";
+import { s as streamingListener } from "../streaming-listener-cAz5zJyk.js";
+const styles = "@media (forced-colors: active){:host{--highcontrast-color-area-border-color-disabled: GrayText;--highcontrast-color-area-border-color: Canvas;--highcontrast-color-area-fill-color-disabled: Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width, 64px);min-block-size:var(--luzmo-color-area-min-height, 64px);inline-size:var(--luzmo-color-area-width, 192px);block-size:var(--luzmo-color-area-height, 192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color, var(--luzmo-color-area-border-color, var(--luzmo-border-color)));display:inline-block;position:relative}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled, var(--luzmo-color-area-disabled-background-color, var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width, var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width, 192px) - var(--luzmo-border-width)));inset-block-start:0}.handle:dir(rtl),:host([dir=rtl]) .handle{inset-inline-end:0}.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-area-border-radius, var(--luzmo-border-radius-s))}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width))}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}";
+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;
 };
-class l extends z {
+class LuzmoColorArea extends LuzmoElement {
   constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new $(this), this.colorController = new C(this, { manageAs: "hsv" }), this.activeAxis = "x", this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.labelX = "saturation";
+    this.labelY = "luminosity";
+    this.isLTR = true;
+    this.languageResolver = new LanguageResolutionController(this);
+    this.colorController = new ColorController(this, { manageAs: "hsv" });
+    this.activeAxis = "x";
+    this.step = 0.01;
+    this.altered = 0;
+    this.activeKeys = /* @__PURE__ */ new Set();
+    this._valueChanged = false;
+    this._pointerDown = false;
   }
   static get styles() {
-    return [v(R)];
+    return [unsafeCSS(styles)];
   }
   get hue() {
     return this.colorController.hue;
   }
-  set hue(e) {
-    this.colorController.hue = e;
+  set hue(value) {
+    this.colorController.hue = value;
   }
   get value() {
     return this.colorController.colorValue;
@@ -55,184 +76,275 @@ class l extends z {
   get color() {
     return this.colorController.colorValue;
   }
-  set color(e) {
-    this.colorController.color = e;
+  set color(color) {
+    this.colorController.color = color;
   }
   get x() {
     return this.colorController.color.hsv.s / 100;
   }
-  set x(e) {
-    if (e === this.x)
+  set x(x) {
+    if (x === this.x) {
       return;
-    const o = this.x;
-    this.inputX ? (this.inputX.value = e.toString(), this.colorController.color.set("s", this.inputX.valueAsNumber * 100)) : this.colorController.color.set("s", e * 100), this.requestUpdate("x", o);
+    }
+    const oldValue = this.x;
+    if (this.inputX) {
+      this.inputX.value = x.toString();
+      this.colorController.color.set("s", this.inputX.valueAsNumber * 100);
+    } else {
+      this.colorController.color.set("s", x * 100);
+    }
+    this.requestUpdate("x", oldValue);
   }
   get y() {
     return this.colorController.color.hsv.v / 100;
   }
-  set y(e) {
-    if (e === this.y)
+  set y(y) {
+    if (y === this.y) {
       return;
-    const o = this.y;
-    this.inputY && (this.inputY.value = e.toString(), this.colorController.color.set("v", this.inputY.valueAsNumber * 100)), this.requestUpdate("y", o);
+    }
+    const oldValue = this.y;
+    if (this.inputY) {
+      this.inputY.value = y.toString();
+      this.colorController.color.set("v", this.inputY.valueAsNumber * 100);
+    }
+    this.requestUpdate("y", oldValue);
   }
-  focus(e = {}) {
-    super.focus(e), this.forwardFocus();
+  focus(focusOptions = {}) {
+    super.focus(focusOptions);
+    this.forwardFocus();
   }
   forwardFocus() {
-    this.activeAxis === "x" ? this.inputX.focus() : this.inputY.focus();
+    if (this.activeAxis === "x") {
+      this.inputX.focus();
+    } else {
+      this.inputY.focus();
+    }
   }
   handleFocus() {
-    this.focused = !0, this._valueChanged = !1;
+    this.focused = true;
+    this._valueChanged = false;
   }
   handleBlur() {
-    this._pointerDown || (this.altered = 0, this.focused = !1, this._valueChanged = !1);
+    if (this._pointerDown) {
+      return;
+    }
+    this.altered = 0;
+    this.focused = false;
+    this._valueChanged = false;
   }
-  handleKeydown(e) {
-    const { code: o } = e;
-    this.focused = !0, this.altered = [e.shiftKey, e.ctrlKey, e.altKey].filter(
-      (r) => !!r
-    ).length, (o.search("Arrow") === 0 || o.search("Page") === 0 || o.search("Home") === 0 || o.search("End") === 0) && (e.preventDefault(), this.activeKeys.add(o), this.handleKeypress());
+  handleKeydown(event) {
+    const { code } = event;
+    this.focused = true;
+    this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
+      (key) => !!key
+    ).length;
+    const isArrowKey = code.search("Arrow") === 0 || code.search("Page") === 0 || code.search("Home") === 0 || code.search("End") === 0;
+    if (isArrowKey) {
+      event.preventDefault();
+      this.activeKeys.add(code);
+      this.handleKeypress();
+    }
   }
   handleKeypress() {
-    let e = 0, o = 0;
-    const t = Math.max(this.step, this.altered * 5 * this.step);
-    this.activeKeys.forEach((r) => {
-      switch (r) {
+    let deltaX = 0;
+    let deltaY = 0;
+    const step = Math.max(this.step, this.altered * 5 * this.step);
+    this.activeKeys.forEach((code) => {
+      switch (code) {
         case "ArrowUp": {
-          o = t;
+          deltaY = step;
           break;
         }
         case "ArrowDown": {
-          o = t * -1;
+          deltaY = step * -1;
           break;
         }
         case "ArrowLeft": {
-          e = this.step * (this.isLTR ? -1 : 1);
+          deltaX = this.step * (this.isLTR ? -1 : 1);
           break;
         }
         case "ArrowRight": {
-          e = this.step * (this.isLTR ? 1 : -1);
+          deltaX = this.step * (this.isLTR ? 1 : -1);
           break;
         }
         case "PageUp": {
-          o = t * 10;
+          deltaY = step * 10;
           break;
         }
         case "PageDown": {
-          o = t * -10;
+          deltaY = step * -10;
           break;
         }
         case "Home": {
-          e = t * (this.isLTR ? -10 : 10);
+          deltaX = step * (this.isLTR ? -10 : 10);
           break;
         }
         case "End": {
-          e = t * (this.isLTR ? 10 : -10);
+          deltaX = step * (this.isLTR ? 10 : -10);
           break;
         }
       }
-    }), e !== 0 ? (this.activeAxis = "x", this.inputX.focus()) : o !== 0 && (this.activeAxis = "y", this.inputY.focus()), this.x = Math.min(1, Math.max(this.x + e, 0)), this.y = Math.min(1, Math.max(this.y + o, 0)), this.colorController.savePreviousColor(), (e !== 0 || o !== 0) && (this._valueChanged = !0, this.dispatchEvent(
-      new Event("input", {
-        bubbles: !0,
-        composed: !0
-      })
-    ), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      })
-    ) || this.colorController.restorePreviousColor());
+    });
+    if (deltaX !== 0) {
+      this.activeAxis = "x";
+      this.inputX.focus();
+    } else if (deltaY !== 0) {
+      this.activeAxis = "y";
+      this.inputY.focus();
+    }
+    this.x = Math.min(1, Math.max(this.x + deltaX, 0));
+    this.y = Math.min(1, Math.max(this.y + deltaY, 0));
+    this.colorController.savePreviousColor();
+    if (deltaX !== 0 || deltaY !== 0) {
+      this._valueChanged = true;
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          composed: true
+        })
+      );
+      const applyDefault = this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true,
+          cancelable: true
+        })
+      );
+      if (!applyDefault) {
+        this.colorController.restorePreviousColor();
+      }
+    }
   }
-  handleKeyup(e) {
-    e.preventDefault();
-    const { code: o } = e;
-    this.activeKeys.delete(o);
+  handleKeyup(event) {
+    event.preventDefault();
+    const { code } = event;
+    this.activeKeys.delete(code);
   }
-  handleInput(e) {
-    const { valueAsNumber: o, name: t } = e.target;
-    this[t] = o;
+  handleInput(event) {
+    const { valueAsNumber, name } = event.target;
+    this[name] = valueAsNumber;
   }
-  handleChange(e) {
-    this.handleInput(e), this.dispatchEvent(
+  handleChange(event) {
+    this.handleInput(event);
+    this.dispatchEvent(
       new Event("change", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
+        bubbles: true,
+        composed: true,
+        cancelable: true
       })
     );
   }
-  handlePointerdown(e) {
-    if (e.button !== 0) {
-      e.preventDefault();
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
       return;
     }
-    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), e.target.setPointerCapture(e.pointerId), e.pointerType === "mouse" && (this.focused = !0);
+    this._pointerDown = true;
+    this.colorController.savePreviousColor();
+    this.boundingClientRect = this.getBoundingClientRect();
+    event.target.setPointerCapture(event.pointerId);
+    if (event.pointerType === "mouse") {
+      this.focused = true;
+    }
   }
-  handlePointermove(e) {
-    const [o, t] = this.calculateHandlePosition(e);
-    this._valueChanged = !1, this.x = o, this.y = t, this.dispatchEvent(
+  handlePointermove(event) {
+    const [x, y] = this.calculateHandlePosition(event);
+    this._valueChanged = false;
+    this.x = x;
+    this.y = y;
+    this.dispatchEvent(
       new Event("input", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
+        bubbles: true,
+        composed: true,
+        cancelable: true
       })
     );
   }
-  handlePointerup(e) {
-    e.preventDefault(), this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId);
-    const o = this.dispatchEvent(
+  handlePointerup(event) {
+    event.preventDefault();
+    this._pointerDown = false;
+    event.target.releasePointerCapture(event.pointerId);
+    const applyDefault = this.dispatchEvent(
       new Event("change", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
+        bubbles: true,
+        composed: true,
+        cancelable: true
       })
     );
-    this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1), o || this.colorController.restorePreviousColor();
+    this.inputX.focus();
+    if (event.pointerType === "mouse") {
+      this.focused = false;
+    }
+    if (!applyDefault) {
+      this.colorController.restorePreviousColor();
+    }
   }
   /**
    * Returns the value under the cursor
    * @param: PointerEvent on slider
    * @return: Slider value that correlates to the position under the pointer
    */
-  calculateHandlePosition(e) {
-    if (!this.boundingClientRect)
+  calculateHandlePosition(event) {
+    if (!this.boundingClientRect) {
       return [this.x, this.y];
-    const o = this.boundingClientRect, t = o.left, r = o.top, a = e.clientX, n = e.clientY, c = o.width, d = o.height, h = Math.max(0, Math.min(1, (a - t) / c)), p = Math.max(0, Math.min(1, (n - r) / d));
-    return [this.isLTR ? h : 1 - h, 1 - p];
+    }
+    const rect = this.boundingClientRect;
+    const minOffsetX = rect.left;
+    const minOffsetY = rect.top;
+    const offsetX = event.clientX;
+    const offsetY = event.clientY;
+    const width = rect.width;
+    const height = rect.height;
+    const percentX = Math.max(0, Math.min(1, (offsetX - minOffsetX) / width));
+    const percentY = Math.max(0, Math.min(1, (offsetY - minOffsetY) / height));
+    return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];
   }
-  handleAreaPointerdown(e) {
-    e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", e)), this.handlePointermove(e));
+  handleAreaPointerdown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
+    this.handlePointermove(event);
   }
   render() {
-    const { width: e = 0, height: o = 0 } = this.boundingClientRect || {}, t = x() || w(), a = "Color Picker", n = m(t ? void 0 : "2d slider"), c = this.labelX, d = this.labelY, h = new Intl.NumberFormat(this.languageResolver.language, {
+    const { width = 0, height = 0 } = this.boundingClientRect || {};
+    const isMobile = isAndroid() || isIOS();
+    const defaultAriaLabel = "Color Picker";
+    const ariaLabel = defaultAriaLabel;
+    const ariaRoleDescription = ifDefined(isMobile ? void 0 : "2d slider");
+    const ariaLabelX = this.labelX;
+    const ariaLabelY = this.labelY;
+    const ariaValueX = new Intl.NumberFormat(this.languageResolver.language, {
       style: "percent",
       unitDisplay: "narrow"
-    }).format(this.x), p = new Intl.NumberFormat(this.languageResolver.language, {
+    }).format(this.x);
+    const ariaValueY = new Intl.NumberFormat(this.languageResolver.language, {
       style: "percent",
       unitDisplay: "narrow"
-    }).format(this.y), f = {
+    }).format(this.y);
+    const style = {
       background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`
     };
-    return y`
+    return html`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
-        style="background: ${f.background}"
+        style="background: ${style.background}"
       >
         <slot name="gradient"></slot>
       </div>
 
       <luzmo-color-handle
-        tabindex=${m(this.focused ? void 0 : "0")}
+        tabindex=${ifDefined(this.focused ? void 0 : "0")}
         @focus=${this.forwardFocus}
         ?focused=${this.focused}
         class="handle"
         color=${this.colorController.getHslString()}
         ?disabled=${this.disabled}
-        style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * e}px, ${o - this.y * o}px);`}
-        ${k({
+        style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * width}px, ${height - this.y * height}px);`}
+        ${streamingListener({
       start: ["pointerdown", this.handlePointerdown],
       streamInside: ["pointermove", this.handlePointermove],
       end: [
@@ -244,17 +356,17 @@ class l extends z {
 
       <fieldset
         class="fieldset"
-        aria-label=${m(t ? a : void 0)}
+        aria-label=${ifDefined(isMobile ? ariaLabel : void 0)}
       >
         <div role="presentation">
           <input
             type="range"
             class="slider"
             name="x"
-            aria-label=${t ? c : `${c} ${a}`}
-            aria-roledescription=${n}
+            aria-label=${isMobile ? ariaLabelX : `${ariaLabelX} ${ariaLabel}`}
+            aria-roledescription=${ariaRoleDescription}
             aria-orientation="horizontal"
-            aria-valuetext=${t ? h : `${h}, ${c}${this._valueChanged ? "" : `, ${p}, ${d}`}`}
+            aria-valuetext=${isMobile ? ariaValueX : `${ariaValueX}, ${ariaLabelX}${this._valueChanged ? "" : `, ${ariaValueY}, ${ariaLabelY}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -269,10 +381,10 @@ class l extends z {
             type="range"
             class="slider"
             name="y"
-            aria-label=${t ? d : `${d} ${a}`}
-            aria-roledescription=${n}
+            aria-label=${isMobile ? ariaLabelY : `${ariaLabelY} ${ariaLabel}`}
+            aria-roledescription=${ariaRoleDescription}
             aria-orientation="vertical"
-            aria-valuetext=${t ? p : `${p}, ${d}${this._valueChanged ? "" : `, ${h}, ${c}`}`}
+            aria-valuetext=${isMobile ? ariaValueY : `${ariaValueY}, ${ariaLabelY}${this._valueChanged ? "" : `, ${ariaValueX}, ${ariaLabelX}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -286,8 +398,13 @@ class l extends z {
       </fieldset>
     `;
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur), this.addEventListener("keyup", this.handleKeyup), this.addEventListener("keydown", this.handleKeydown);
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.boundingClientRect = this.getBoundingClientRect();
+    this.addEventListener("focus", this.handleFocus);
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("keyup", this.handleKeyup);
+    this.addEventListener("keydown", this.handleKeydown);
   }
   /**
    * Overrides the `updated` method to handle changes in property values.
@@ -301,81 +418,99 @@ class l extends z {
    * the `input[type="range"]` elements in shadow roots to prevent multiple
    * tab stops within the Color Area for certain browser settings (e.g., Webkit).
    */
-  updated(e) {
-    if (super.updated(e), this.x !== this.inputX.valueAsNumber && this.colorController.color.set("s", this.inputX.valueAsNumber * 100), this.y !== this.inputY.valueAsNumber && this.colorController.color.set(
-      "v",
-      (1 - this.inputY.valueAsNumber) * 100
-    ), e.has("focused") && this.focused) {
-      const o = this.inputX.parentElement, t = this.inputY.parentElement;
-      if (!o.shadowRoot && !t.shadowRoot) {
-        o.attachShadow({ mode: "open" }), t.attachShadow({ mode: "open" });
-        const r = '<div tabindex="-1"><slot></slot></div>';
-        o.shadowRoot.innerHTML = r, t.shadowRoot.innerHTML = r;
+  updated(changed) {
+    super.updated(changed);
+    if (this.x !== this.inputX.valueAsNumber) {
+      this.colorController.color.set("s", this.inputX.valueAsNumber * 100);
+    }
+    if (this.y !== this.inputY.valueAsNumber) {
+      this.colorController.color.set(
+        "v",
+        (1 - this.inputY.valueAsNumber) * 100
+      );
+    }
+    if (changed.has("focused") && this.focused) {
+      const parentX = this.inputX.parentElement;
+      const parentY = this.inputY.parentElement;
+      if (!parentX.shadowRoot && !parentY.shadowRoot) {
+        parentX.attachShadow({ mode: "open" });
+        parentY.attachShadow({ mode: "open" });
+        const slot = '<div tabindex="-1"><slot></slot></div>';
+        parentX.shadowRoot.innerHTML = slot;
+        parentY.shadowRoot.innerHTML = slot;
       }
     }
   }
   connectedCallback() {
-    var e;
-    super.connectedCallback(), !this.observer && window.ResizeObserver && (this.observer = new window.ResizeObserver((o) => {
-      for (const t of o)
-        this.boundingClientRect = t.contentRect;
-      this.requestUpdate();
-    })), (e = this.observer) == null || e.observe(this);
+    var _a;
+    super.connectedCallback();
+    if (!this.observer && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver((entries) => {
+        for (const entry of entries) {
+          this.boundingClientRect = entry.contentRect;
+        }
+        this.requestUpdate();
+      });
+    }
+    (_a = this.observer) == null ? void 0 : _a.observe(this);
   }
   disconnectedCallback() {
-    var e;
-    (e = this.observer) == null || e.unobserve(this), super.disconnectedCallback();
+    var _a;
+    (_a = this.observer) == null ? void 0 : _a.unobserve(this);
+    super.disconnectedCallback();
   }
 }
-i([
-  s({ type: String, reflect: !0 })
-], l.prototype, "dir", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-i([
-  s({ type: Boolean, reflect: !0 })
-], l.prototype, "focused", 2);
-i([
-  s({ type: String, attribute: "label-x" })
-], l.prototype, "labelX", 2);
-i([
-  s({ type: String, attribute: "label-y" })
-], l.prototype, "labelY", 2);
-i([
-  s({ type: Boolean, attribute: "is-ltr" })
-], l.prototype, "isLTR", 2);
-i([
-  b(".handle")
-], l.prototype, "handle", 2);
-i([
-  s({ type: Number })
-], l.prototype, "hue", 1);
-i([
-  s({ type: String })
-], l.prototype, "value", 1);
-i([
-  s({ type: String })
-], l.prototype, "color", 1);
-i([
-  s({ attribute: !1 })
-], l.prototype, "activeAxis", 2);
-i([
-  s({ type: Number })
-], l.prototype, "x", 1);
-i([
-  s({ type: Number })
-], l.prototype, "y", 1);
-i([
-  s({ type: Number })
-], l.prototype, "step", 2);
-i([
-  b('[name="x"]')
-], l.prototype, "inputX", 2);
-i([
-  b('[name="y"]')
-], l.prototype, "inputY", 2);
-customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", l);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuzmoColorArea.prototype, "dir", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoColorArea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoColorArea.prototype, "focused", 2);
+__decorateClass([
+  property({ type: String, attribute: "label-x" })
+], LuzmoColorArea.prototype, "labelX", 2);
+__decorateClass([
+  property({ type: String, attribute: "label-y" })
+], LuzmoColorArea.prototype, "labelY", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "is-ltr" })
+], LuzmoColorArea.prototype, "isLTR", 2);
+__decorateClass([
+  query(".handle")
+], LuzmoColorArea.prototype, "handle", 2);
+__decorateClass([
+  property({ type: Number })
+], LuzmoColorArea.prototype, "hue", 1);
+__decorateClass([
+  property({ type: String })
+], LuzmoColorArea.prototype, "value", 1);
+__decorateClass([
+  property({ type: String })
+], LuzmoColorArea.prototype, "color", 1);
+__decorateClass([
+  property({ attribute: false })
+], LuzmoColorArea.prototype, "activeAxis", 2);
+__decorateClass([
+  property({ type: Number })
+], LuzmoColorArea.prototype, "x", 1);
+__decorateClass([
+  property({ type: Number })
+], LuzmoColorArea.prototype, "y", 1);
+__decorateClass([
+  property({ type: Number })
+], LuzmoColorArea.prototype, "step", 2);
+__decorateClass([
+  query('[name="x"]')
+], LuzmoColorArea.prototype, "inputX", 2);
+__decorateClass([
+  query('[name="y"]')
+], LuzmoColorArea.prototype, "inputY", 2);
+if (!customElements.get("luzmo-color-area")) {
+  customElements.define("luzmo-color-area", LuzmoColorArea);
+}
 export {
-  l as LuzmoColorArea
+  LuzmoColorArea
 };