@luzmo/lucero 0.0.39 → 0.0.40

package/components/color-area/color-area.d.ts

@@ -1,7 +1,7 @@
 import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
 import './../color-handle';
 import { LuzmoElement } from '../../utils/base';
-import { ColorValue } from '../../utils/reactive-controllers/color';
+import { ColorTypes } from '../../utils/reactive-controllers/color-controller';
 /**
  * @element luzmo-color-area
  * @slot gradient - a custom gradient visually outlining the available color values
@@ -18,19 +18,45 @@ export declare class LuzmoColorArea extends LuzmoElement {
     isLTR: boolean;
     private handle;
     private languageResolver;
+    /**
+     * A controller for managing color interactions within the ColorArea component.
+     *
+     * The `ColorController` is instantiated with the `manageAs` option set to `hsv`
+     * because the ColorArea component is designed to manipulate the saturation (`s`)
+     * and value (`v`) components of the HSV color model along the x and y axes,
+     * respectively. In the HSV color model:
+     *
+     * - The `hue` (h) represents the color type and is typically controlled by a separate input.
+     * - The `saturation` (s) represents the intensity of the color, ranging from 0% (gray) to 100% (full color).
+     * - The `value` (v) represents the brightness of the color, ranging from 0% (black) to 100% (full brightness).
+     *
+     * In the ColorArea component:
+     *
+     * - The x-axis controls the saturation (`s`), allowing users to adjust the intensity of the color.
+     * - The y-axis controls the value (`v`), allowing users to adjust the brightness of the color.
+     *Add commentMore actions
+     * By managing the color as `hsv`, the ColorController can efficiently handle the changes in saturation and value
+     * as the user interacts with the ColorArea component.
+     *
+     * @private
+     * @type {ColorController}
+     * @memberof ColorArea
+     *
+     * @property {ColorArea} this - The instance of the ColorArea component.
+     * @property {Object} options - Configuration options for the ColorController.
+     * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
+     */
     private colorController;
     get hue(): number;
     set hue(value: number);
-    get value(): ColorValue;
-    get color(): ColorValue;
-    set color(color: ColorValue);
+    get value(): ColorTypes;
+    get color(): ColorTypes;
+    set color(color: ColorTypes);
     private activeAxis;
     get x(): number;
     set x(x: number);
-    private _x;
     get y(): number;
     set y(y: number);
-    private _y;
     step: number;
     inputX: HTMLInputElement;
     inputY: HTMLInputElement;
@@ -60,6 +86,18 @@ export declare class LuzmoColorArea extends LuzmoElement {
     private handleAreaPointerdown;
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * 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).
+     */
     protected updated(changed: PropertyValues): void;
     private observer?;
     connectedCallback(): void;

package/components/color-area/index.cjs

@@ -15,11 +15,11 @@
  * 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 m=require("../platform-BiXhwqk3.cjs"),g=require("../color-DphK4hwx.cjs"),y=require("../language-resolution-DJzmyzZq.cjs"),w=require("../streaming-listener-B00MvALi.cjs"),x="@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 C=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&&C(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,{extractColorFromState:()=>({h:this.hue,s:this.x,v:this.y}),applyColorToState:({s:e,v:t})=>{this._x=e,this._y=t,this.requestUpdate()}}),this.activeAxis="x",this._x=1,this._y=1,this.step=.01,this.altered=0,this.activeKeys=new Set,this._valueChanged=!1,this._pointerDown=!1}static get styles(){return[s.r(x)]}get hue(){return this.colorController.hue}set hue(e){this.colorController.hue=e}get value(){return this.colorController.color}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get x(){return this._x}set x(e){if(e===this.x)return;const t=this.x;this._x=e,this.inputX&&(this.inputX.value=e.toString(),this._x=this.inputX.valueAsNumber),this.requestUpdate("x",t),this.colorController.applyColorFromState()}get y(){return this._y}set y(e){if(e===this.y)return;const t=this.y;this._y=e,this.inputY&&(this.inputY.value=e.toString(),this._y=this.inputY.valueAsNumber),this.requestUpdate("y",t),this.colorController.applyColorFromState()}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(),this.colorController.applyColorFromState(),(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,this.colorController.applyColorFromState()}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=1-r,this.colorController.applyColorFromState(),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,u=Math.max(0,Math.min(1,(n-r)/h)),c=Math.max(0,Math.min(1,(l-o)/d));return[this.isLTR?u:1-u,c]}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=m.isAndroid()||m.isIOS(),n="Color Picker",l=b.o(r?void 0:"2d slider"),h=this.labelX,d=this.labelY,u=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.x),c=new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.y),v=`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 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-_ZwyhvaU.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`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
-        style="background: ${v}"
+        style="background: ${m.background}"
       >
         <slot name="gradient"></slot>
       </div>
@@ -47,7 +47,7 @@
             aria-label=${r?h:`${h} ${n}`}
             aria-roledescription=${l}
             aria-orientation="horizontal"
-            aria-valuetext=${r?u:`${u}, ${h}${this._valueChanged?"":`, ${c}, ${d}`}`}
+            aria-valuetext=${r?c:`${c}, ${h}${this._valueChanged?"":`, ${u}, ${d}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -65,7 +65,7 @@
             aria-label=${r?d:`${d} ${n}`}
             aria-roledescription=${l}
             aria-orientation="vertical"
-            aria-valuetext=${r?c:`${c}, ${d}${this._valueChanged?"":`, ${u}, ${h}`}`}
+            aria-valuetext=${r?u:`${u}, ${d}${this._valueChanged?"":`, ${c}, ${h}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -77,4 +77,4 @@
           />
         </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._x=this.inputX.valueAsNumber),this.y!==this.inputY.valueAsNumber&&(this._y=this.inputY.valueAsNumber),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(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;

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
 };