@luzmo/lucero 1.0.1-alpha.17 → 1.0.1-alpha.19

package/components/color-area/index.cjs

@@ -15,351 +15,39 @@
  * 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 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`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../base-Cy0MQrPT.cjs"),f=require("../query-BL-TJj7K.cjs"),b=require("../if-defined-DaXWqfzc.cjs");require("../color-handle/index.cjs");const v=require("../platform-BiXhwqk3.cjs"),g=require("../color-controller-CoUL5f9K.cjs"),y=require("../language-resolution-EUER43cg.cjs"),w=require("../streaming-listener-DeGQYM-9.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`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
-        style="background: ${style.background}"
+        style="background: ${m.background}"
       >
         <slot name="gradient"></slot>
       </div>
 
       <luzmo-color-handle
-        tabindex=${ifDefined_js.ifDefined(this.focused ? void 0 : "0")}
+        tabindex=${b.o(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) * width}px, ${height - this.y * height}px);`}
-        ${streamingListener.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)*e}px, ${t-this.y*t}px);`}
+        ${w.streamingListener({start:["pointerdown",this.handlePointerdown],streamInside:["pointermove",this.handlePointermove],end:[["pointerup","pointercancel","pointerleave"],this.handlePointerup]})}
       ></luzmo-color-handle>
 
       <fieldset
         class="fieldset"
-        aria-label=${ifDefined_js.ifDefined(isMobile ? ariaLabel : void 0)}
+        aria-label=${b.o(r?n:void 0)}
       >
         <div role="presentation">
           <input
             type="range"
             class="slider"
             name="x"
-            aria-label=${isMobile ? ariaLabelX : `${ariaLabelX} ${ariaLabel}`}
-            aria-roledescription=${ariaRoleDescription}
+            aria-label=${r?h:`${h} ${n}`}
+            aria-roledescription=${l}
             aria-orientation="horizontal"
-            aria-valuetext=${isMobile ? ariaValueX : `${ariaValueX}, ${ariaLabelX}${this._valueChanged ? "" : `, ${ariaValueY}, ${ariaLabelY}`}`}
+            aria-valuetext=${r?c:`${c}, ${h}${this._valueChanged?"":`, ${u}, ${d}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -374,10 +62,10 @@ class LuzmoColorArea extends base.LuzmoElement {
             type="range"
             class="slider"
             name="y"
-            aria-label=${isMobile ? ariaLabelY : `${ariaLabelY} ${ariaLabel}`}
-            aria-roledescription=${ariaRoleDescription}
+            aria-label=${r?d:`${d} ${n}`}
+            aria-roledescription=${l}
             aria-orientation="vertical"
-            aria-valuetext=${isMobile ? ariaValueY : `${ariaValueY}, ${ariaLabelY}${this._valueChanged ? "" : `, ${ariaValueX}, ${ariaLabelX}`}`}
+            aria-valuetext=${r?u:`${u}, ${d}${this._valueChanged?"":`, ${c}, ${h}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -389,119 +77,4 @@ class LuzmoColorArea extends base.LuzmoElement {
           />
         </div>
       </fieldset>
-    `;
-  }
-  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;
+    `}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;