@luzmo/lucero 0.0.39 → 1.0.1-alpha.0

package/components/color-area/index.js

@@ -20,7 +20,7 @@ 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-Bg3tYsAQ.js";
+import { C } from "../color-controller-DTp1juRz.js";
 import { L as $ } from "../language-resolution-8yZa5r_P.js";
 import { s as k } from "../streaming-listener-CP-JE6Fa.js";
 const g = () => {
@@ -31,23 +31,14 @@ const g = () => {
 };
 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 _ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (u, e, o, t) => {
-  for (var r = t > 1 ? void 0 : t ? A(e, o) : e, a = u.length - 1, n; a >= 0; a--)
+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 && _(e, o, r), r;
+  return t && r && A(e, o, r), r;
 };
-class i extends z {
+class l extends z {
   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, {
-      extractColorFromState: () => ({
-        h: this.hue,
-        s: this.x,
-        v: this.y
-      }),
-      applyColorToState: ({ s: e, v: o }) => {
-        this._x = e, this._y = o, this.requestUpdate();
-      }
-    }), this.activeAxis = "x", this._x = 1, this._y = 1, this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
+    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;
   }
   static get styles() {
     return [v(R)];
@@ -59,31 +50,31 @@ class i extends z {
     this.colorController.hue = e;
   }
   get value() {
-    return this.colorController.color;
+    return this.colorController.colorValue;
   }
   get color() {
-    return this.colorController.color;
+    return this.colorController.colorValue;
   }
   set color(e) {
     this.colorController.color = e;
   }
   get x() {
-    return this._x;
+    return this.colorController.color.hsv.s / 100;
   }
   set x(e) {
     if (e === this.x)
       return;
     const o = this.x;
-    this._x = e, this.inputX && (this.inputX.value = e.toString(), this._x = this.inputX.valueAsNumber), this.requestUpdate("x", o), this.colorController.applyColorFromState();
+    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);
   }
   get y() {
-    return this._y;
+    return this.colorController.color.hsv.v / 100;
   }
   set y(e) {
     if (e === this.y)
       return;
     const o = this.y;
-    this._y = e, this.inputY && (this.inputY.value = e.toString(), this._y = this.inputY.valueAsNumber), this.requestUpdate("y", o), this.colorController.applyColorFromState();
+    this.inputY && (this.inputY.value = e.toString(), this.colorController.color.set("v", this.inputY.valueAsNumber * 100)), this.requestUpdate("y", o);
   }
   focus(e = {}) {
     super.focus(e), this.forwardFocus();
@@ -141,7 +132,7 @@ class i extends z {
           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(), this.colorController.applyColorFromState(), (e !== 0 || o !== 0) && (this._valueChanged = !0, this.dispatchEvent(
+    }), 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
@@ -161,7 +152,7 @@ class i extends z {
   }
   handleInput(e) {
     const { valueAsNumber: o, name: t } = e.target;
-    this[t] = o, this.colorController.applyColorFromState();
+    this[t] = o;
   }
   handleChange(e) {
     this.handleInput(e), this.dispatchEvent(
@@ -181,7 +172,7 @@ class i extends z {
   }
   handlePointermove(e) {
     const [o, t] = this.calculateHandlePosition(e);
-    this._valueChanged = !1, this.x = o, this.y = 1 - t, this.colorController.applyColorFromState(), this.dispatchEvent(
+    this._valueChanged = !1, this.x = o, this.y = t, this.dispatchEvent(
       new Event("input", {
         bubbles: !0,
         composed: !0,
@@ -209,7 +200,7 @@ class i extends z {
     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, p];
+    return [this.isLTR ? h : 1 - h, 1 - p];
   }
   handleAreaPointerdown(e) {
     e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", e)), this.handlePointermove(e));
@@ -221,12 +212,14 @@ class i extends z {
     }).format(this.x), p = new Intl.NumberFormat(this.languageResolver.language, {
       style: "percent",
       unitDisplay: "narrow"
-    }).format(this.y), f = `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%);`;
+    }).format(this.y), f = {
+      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`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
-        style="background: ${f}"
+        style="background: ${f.background}"
       >
         <slot name="gradient"></slot>
       </div>
@@ -296,8 +289,23 @@ class i extends z {
   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);
   }
+  /**
+   * Overrides the `updated` method to handle changes in property values.
+   *
+   * @param changed - A map of changed properties with their previous values.
+   *
+   * This method performs the following actions:
+   * - Updates the saturation (`s`) of the color if `x` has changed.
+   * - Updates the value (`v`) of the color if `y` has changed.
+   * - If the `focused` property has changed and is now true, it lazily binds
+   * 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._x = this.inputX.valueAsNumber), this.y !== this.inputY.valueAsNumber && (this._y = this.inputY.valueAsNumber), e.has("focused") && this.focused) {
+    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" });
@@ -319,55 +327,55 @@ class i extends z {
     (e = this.observer) == null || e.unobserve(this), super.disconnectedCallback();
   }
 }
-l([
+i([
   s({ type: String, reflect: !0 })
-], i.prototype, "dir", 2);
-l([
+], l.prototype, "dir", 2);
+i([
   s({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-l([
+], l.prototype, "disabled", 2);
+i([
   s({ type: Boolean, reflect: !0 })
-], i.prototype, "focused", 2);
-l([
+], l.prototype, "focused", 2);
+i([
   s({ type: String, attribute: "label-x" })
-], i.prototype, "labelX", 2);
-l([
+], l.prototype, "labelX", 2);
+i([
   s({ type: String, attribute: "label-y" })
-], i.prototype, "labelY", 2);
-l([
+], l.prototype, "labelY", 2);
+i([
   s({ type: Boolean, attribute: "is-ltr" })
-], i.prototype, "isLTR", 2);
-l([
+], l.prototype, "isLTR", 2);
+i([
   b(".handle")
-], i.prototype, "handle", 2);
-l([
+], l.prototype, "handle", 2);
+i([
   s({ type: Number })
-], i.prototype, "hue", 1);
-l([
+], l.prototype, "hue", 1);
+i([
   s({ type: String })
-], i.prototype, "value", 1);
-l([
+], l.prototype, "value", 1);
+i([
   s({ type: String })
-], i.prototype, "color", 1);
-l([
+], l.prototype, "color", 1);
+i([
   s({ attribute: !1 })
-], i.prototype, "activeAxis", 2);
-l([
+], l.prototype, "activeAxis", 2);
+i([
   s({ type: Number })
-], i.prototype, "x", 1);
-l([
+], l.prototype, "x", 1);
+i([
   s({ type: Number })
-], i.prototype, "y", 1);
-l([
+], l.prototype, "y", 1);
+i([
   s({ type: Number })
-], i.prototype, "step", 2);
-l([
+], l.prototype, "step", 2);
+i([
   b('[name="x"]')
-], i.prototype, "inputX", 2);
-l([
+], l.prototype, "inputX", 2);
+i([
   b('[name="y"]')
-], i.prototype, "inputY", 2);
-customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", i);
+], l.prototype, "inputY", 2);
+customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", l);
 export {
-  i as LuzmoColorArea
+  l as LuzmoColorArea
 };