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

package/components/color-area/index.cjs

@@ -15,39 +15,351 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../base-CBCg3yyw.cjs"),f=require("../query-BL-TJj7K.cjs"),b=require("../if-defined-C9YGdo33.cjs");require("../color-handle/index.cjs");const v=require("../platform-BiXhwqk3.cjs"),g=require("../color-controller-CoUL5f9K.cjs"),y=require("../language-resolution-DJzmyzZq.cjs"),w=require("../streaming-listener-B00MvALi.cjs"),C="@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 x=Object.defineProperty,$=Object.getOwnPropertyDescriptor,a=(p,e,t,r)=>{for(var o=r>1?void 0:r?$(e,t):e,n=p.length-1,l;n>=0;n--)(l=p[n])&&(o=(r?l(e,t,o):l(o))||o);return r&&o&&x(e,t,o),o};class i extends s.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.labelX="saturation",this.labelY="luminosity",this.isLTR=!0,this.languageResolver=new y.LanguageResolutionController(this),this.colorController=new g.ColorController(this,{manageAs:"hsv"}),this.activeAxis="x",this.step=.01,this.altered=0,this.activeKeys=new Set,this._valueChanged=!1,this._pointerDown=!1}static get styles(){return[s.r(C)]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.colorValue}get color(){return this.colorController.colorValue}set color(e){this.colorController.color=e}get x(){return this.colorController.color.hsv.s/100}set x(e){if(e===this.x)return;const t=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",t)}get y(){return this.colorController.color.hsv.v/100}set y(e){if(e===this.y)return;const t=this.y;this.inputY&&(this.inputY.value=e.toString(),this.colorController.color.set("v",this.inputY.valueAsNumber*100)),this.requestUpdate("y",t)}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.activeAxis==="x"?this.inputX.focus():this.inputY.focus()}handleFocus(){this.focused=!0,this._valueChanged=!1}handleBlur(){this._pointerDown||(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){const{code:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(o=>!!o).length,(t.search("Arrow")===0||t.search("Page")===0||t.search("Home")===0||t.search("End")===0)&&(e.preventDefault(),this.activeKeys.add(t),this.handleKeypress())}handleKeypress(){let e=0,t=0;const r=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(o=>{switch(o){case"ArrowUp":{t=r;break}case"ArrowDown":{t=r*-1;break}case"ArrowLeft":{e=this.step*(this.isLTR?-1:1);break}case"ArrowRight":{e=this.step*(this.isLTR?1:-1);break}case"PageUp":{t=r*10;break}case"PageDown":{t=r*-10;break}case"Home":{e=r*(this.isLTR?-10:10);break}case"End":{e=r*(this.isLTR?10:-10);break}}}),e!==0?(this.activeAxis="x",this.inputX.focus()):t!==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+t,0)),this.colorController.savePreviousColor(),(e!==0||t!==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())}handleKeyup(e){e.preventDefault();const{code:t}=e;this.activeKeys.delete(t)}handleInput(e){const{valueAsNumber:t,name:r}=e.target;this[r]=t}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect(),e.target.setPointerCapture(e.pointerId),e.pointerType==="mouse"&&(this.focused=!0)}handlePointermove(e){const[t,r]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=r,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown=!1,e.target.releasePointerCapture(e.pointerId);const t=this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}));this.inputX.focus(),e.pointerType==="mouse"&&(this.focused=!1),t||this.colorController.restorePreviousColor()}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];const t=this.boundingClientRect,r=t.left,o=t.top,n=e.clientX,l=e.clientY,h=t.width,d=t.height,c=Math.max(0,Math.min(1,(n-r)/h)),u=Math.max(0,Math.min(1,(l-o)/d));return[this.isLTR?c:1-c,1-u]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent("pointerdown",e)),this.handlePointermove(e))}render(){const{width:e=0,height:t=0}=this.boundingClientRect||{},r=v.isAndroid()||v.isIOS(),n="Color Picker",l=b.o(r?void 0:"2d slider"),h=this.labelX,d=this.labelY,c=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),u=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),m={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 s.x`
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+require("../color-handle/index.cjs");
+const base = require("../base-COw9n7UR.cjs");
+const platform = require("../platform-CxDar3Dn.cjs");
+const colorController = require("../color-controller-C3c_vb2P.cjs");
+const languageResolution = require("../language-resolution-iN9EImbb.cjs");
+const streamingListener = require("../streaming-listener-D4sHaMub.cjs");
+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 LuzmoColorArea extends base.LuzmoElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.labelX = "saturation";
+    this.labelY = "luminosity";
+    this.isLTR = true;
+    this.languageResolver = new languageResolution.LanguageResolutionController(this);
+    this.colorController = new colorController.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 [lit.unsafeCSS(styles)];
+  }
+  get hue() {
+    return this.colorController.hue;
+  }
+  set hue(value) {
+    this.colorController.hue = value;
+  }
+  get value() {
+    return this.colorController.colorValue;
+  }
+  get color() {
+    return this.colorController.colorValue;
+  }
+  set color(color) {
+    this.colorController.color = color;
+  }
+  get x() {
+    return this.colorController.color.hsv.s / 100;
+  }
+  set x(x) {
+    if (x === this.x) {
+      return;
+    }
+    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(y) {
+    if (y === this.y) {
+      return;
+    }
+    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(focusOptions = {}) {
+    super.focus(focusOptions);
+    this.forwardFocus();
+  }
+  forwardFocus() {
+    if (this.activeAxis === "x") {
+      this.inputX.focus();
+    } else {
+      this.inputY.focus();
+    }
+  }
+  handleFocus() {
+    this.focused = true;
+    this._valueChanged = false;
+  }
+  handleBlur() {
+    if (this._pointerDown) {
+      return;
+    }
+    this.altered = 0;
+    this.focused = false;
+    this._valueChanged = false;
+  }
+  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 deltaX = 0;
+    let deltaY = 0;
+    const step = Math.max(this.step, this.altered * 5 * this.step);
+    this.activeKeys.forEach((code) => {
+      switch (code) {
+        case "ArrowUp": {
+          deltaY = step;
+          break;
+        }
+        case "ArrowDown": {
+          deltaY = step * -1;
+          break;
+        }
+        case "ArrowLeft": {
+          deltaX = this.step * (this.isLTR ? -1 : 1);
+          break;
+        }
+        case "ArrowRight": {
+          deltaX = this.step * (this.isLTR ? 1 : -1);
+          break;
+        }
+        case "PageUp": {
+          deltaY = step * 10;
+          break;
+        }
+        case "PageDown": {
+          deltaY = step * -10;
+          break;
+        }
+        case "Home": {
+          deltaX = step * (this.isLTR ? -10 : 10);
+          break;
+        }
+        case "End": {
+          deltaX = step * (this.isLTR ? 10 : -10);
+          break;
+        }
+      }
+    });
+    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(event) {
+    event.preventDefault();
+    const { code } = event;
+    this.activeKeys.delete(code);
+  }
+  handleInput(event) {
+    const { valueAsNumber, name } = event.target;
+    this[name] = valueAsNumber;
+  }
+  handleChange(event) {
+    this.handleInput(event);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
+      return;
+    }
+    this._pointerDown = true;
+    this.colorController.savePreviousColor();
+    this.boundingClientRect = this.getBoundingClientRect();
+    event.target.setPointerCapture(event.pointerId);
+    if (event.pointerType === "mouse") {
+      this.focused = true;
+    }
+  }
+  handlePointermove(event) {
+    const [x, y] = this.calculateHandlePosition(event);
+    this._valueChanged = false;
+    this.x = x;
+    this.y = y;
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  handlePointerup(event) {
+    event.preventDefault();
+    this._pointerDown = false;
+    event.target.releasePointerCapture(event.pointerId);
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    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(event) {
+    if (!this.boundingClientRect) {
+      return [this.x, this.y];
+    }
+    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(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
+    this.handlePointermove(event);
+  }
+  render() {
+    const { width = 0, height = 0 } = this.boundingClientRect || {};
+    const isMobile = platform.isAndroid() || platform.isIOS();
+    const defaultAriaLabel = "Color Picker";
+    const ariaLabel = defaultAriaLabel;
+    const ariaRoleDescription = ifDefined_js.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);
+    const ariaValueY = new Intl.NumberFormat(this.languageResolver.language, {
+      style: "percent",
+      unitDisplay: "narrow"
+    }).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 lit.html`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
-        style="background: ${m.background}"
+        style="background: ${style.background}"
       >
         <slot name="gradient"></slot>
       </div>
 
       <luzmo-color-handle
-        tabindex=${b.o(this.focused?void 0:"0")}
+        tabindex=${ifDefined_js.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, ${t-this.y*t}px);`}
-        ${w.streamingListener({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
+        style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * width}px, ${height - this.y * height}px);`}
+        ${streamingListener.streamingListener({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
       ></luzmo-color-handle>
 
       <fieldset
         class="fieldset"
-        aria-label=${b.o(r?n:void 0)}
+        aria-label=${ifDefined_js.ifDefined(isMobile ? ariaLabel : void 0)}
       >
         <div role="presentation">
           <input
             type="range"
             class="slider"
             name="x"
-            aria-label=${r?h:`${h} ${n}`}
-            aria-roledescription=${l}
+            aria-label=${isMobile ? ariaLabelX : `${ariaLabelX} ${ariaLabel}`}
+            aria-roledescription=${ariaRoleDescription}
             aria-orientation="horizontal"
-            aria-valuetext=${r?c:`${c}, ${h}${this._valueChanged?"":`, ${u}, ${d}`}`}
+            aria-valuetext=${isMobile ? ariaValueX : `${ariaValueX}, ${ariaLabelX}${this._valueChanged ? "" : `, ${ariaValueY}, ${ariaLabelY}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -62,10 +374,10 @@
             type="range"
             class="slider"
             name="y"
-            aria-label=${r?d:`${d} ${n}`}
-            aria-roledescription=${l}
+            aria-label=${isMobile ? ariaLabelY : `${ariaLabelY} ${ariaLabel}`}
+            aria-roledescription=${ariaRoleDescription}
             aria-orientation="vertical"
-            aria-valuetext=${r?u:`${u}, ${d}${this._valueChanged?"":`, ${c}, ${h}`}`}
+            aria-valuetext=${isMobile ? ariaValueY : `${ariaValueY}, ${ariaLabelY}${this._valueChanged ? "" : `, ${ariaValueX}, ${ariaLabelX}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -77,4 +389,119 @@
           />
         </div>
       </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)}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 t=this.inputX.parentElement,r=this.inputY.parentElement;if(!t.shadowRoot&&!r.shadowRoot){t.attachShadow({mode:"open"}),r.attachShadow({mode:"open"});const o='<div tabindex="-1"><slot></slot></div>';t.shadowRoot.innerHTML=o,r.shadowRoot.innerHTML=o}}}connectedCallback(){var e;super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(t=>{for(const r of t)this.boundingClientRect=r.contentRect;this.requestUpdate()})),(e=this.observer)==null||e.observe(this)}disconnectedCallback(){var e;(e=this.observer)==null||e.unobserve(this),super.disconnectedCallback()}}a([s.n({type:String,reflect:!0})],i.prototype,"dir",2);a([s.n({type:Boolean,reflect:!0})],i.prototype,"disabled",2);a([s.n({type:Boolean,reflect:!0})],i.prototype,"focused",2);a([s.n({type:String,attribute:"label-x"})],i.prototype,"labelX",2);a([s.n({type:String,attribute:"label-y"})],i.prototype,"labelY",2);a([s.n({type:Boolean,attribute:"is-ltr"})],i.prototype,"isLTR",2);a([f.e(".handle")],i.prototype,"handle",2);a([s.n({type:Number})],i.prototype,"hue",1);a([s.n({type:String})],i.prototype,"value",1);a([s.n({type:String})],i.prototype,"color",1);a([s.n({attribute:!1})],i.prototype,"activeAxis",2);a([s.n({type:Number})],i.prototype,"x",1);a([s.n({type:Number})],i.prototype,"y",1);a([s.n({type:Number})],i.prototype,"step",2);a([f.e('[name="x"]')],i.prototype,"inputX",2);a([f.e('[name="y"]')],i.prototype,"inputY",2);customElements.get("luzmo-color-area")||customElements.define("luzmo-color-area",i);exports.LuzmoColorArea=i;
+    `;
+  }
+  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.
+   *
+   * @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(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 _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 _a;
+    (_a = this.observer) == null ? void 0 : _a.unobserve(this);
+    super.disconnectedCallback();
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoColorArea.prototype, "dir", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorArea.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorArea.prototype, "focused", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-x" })
+], LuzmoColorArea.prototype, "labelX", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-y" })
+], LuzmoColorArea.prototype, "labelY", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "is-ltr" })
+], LuzmoColorArea.prototype, "isLTR", 2);
+__decorateClass([
+  decorators_js.query(".handle")
+], LuzmoColorArea.prototype, "handle", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoColorArea.prototype, "hue", 1);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoColorArea.prototype, "value", 1);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoColorArea.prototype, "color", 1);
+__decorateClass([
+  decorators_js.property({ attribute: false })
+], LuzmoColorArea.prototype, "activeAxis", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoColorArea.prototype, "x", 1);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoColorArea.prototype, "y", 1);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoColorArea.prototype, "step", 2);
+__decorateClass([
+  decorators_js.query('[name="x"]')
+], LuzmoColorArea.prototype, "inputX", 2);
+__decorateClass([
+  decorators_js.query('[name="y"]')
+], LuzmoColorArea.prototype, "inputY", 2);
+if (!customElements.get("luzmo-color-area")) {
+  customElements.define("luzmo-color-area", LuzmoColorArea);
+}
+exports.LuzmoColorArea = LuzmoColorArea;