@luzmo/lucero 2.5.2 → 2.6.0

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

@@ -7,6 +7,11 @@ import { ColorTypes } from '../../utils/reactive-controllers/color-controller';
  * @slot gradient - a custom gradient visually outlining the available color values
  * @fires input - The value of the Color Area has changed.
  * @fires change - An alteration to the value of the Color Area has been committed by the user.
+ * @fires {CustomEvent<InteractionEventDetail>} luzmo-interaction-start - A
+ * pointer drag or held-key interaction starts, before its first value change.
+ * @fires {CustomEvent<InteractionEventDetail>} luzmo-interaction-end - The
+ * interaction ends after its last `input`/`change`, even when nothing changed.
+ * A cancelled pointer commits and ends the same way.
  */
 export declare class LuzmoColorArea extends LuzmoElement {
     static get styles(): CSSResultArray;
@@ -47,6 +52,7 @@ export declare class LuzmoColorArea extends LuzmoElement {
      * @property {string} options.manageAs - Specifies the color model to manage, in this case 'hsv'.
      */
     private colorController;
+    private readonly _interaction;
     get hue(): number;
     set hue(value: number);
     get value(): ColorTypes;
@@ -74,9 +80,18 @@ export declare class LuzmoColorArea extends LuzmoElement {
     private handleChange;
     private boundingClientRect;
     _pointerDown: boolean;
+    private _capturedPointer?;
     private handlePointerdown;
     private handlePointermove;
     private handlePointerup;
+    /** Commits the pointer interaction in progress, then ends it. */
+    private _finishPointer;
+    /**
+     * Finishes the pointer drag or held-key interaction in progress as if the
+     * user released it, so a host can settle the value before it removes or
+     * hides the area. Does nothing when no interaction is in progress.
+     */
+    endInteraction(): void;
     /**
      * Returns the value under the cursor
      * @param: PointerEvent on slider

package/components/color-area/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-area-D1fRozE0.cjs");exports.LuzmoColorArea=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-area-CFBE-rG3.cjs");exports.LuzmoColorArea=e.t;

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

@@ -5,3 +5,4 @@ declare global {
     }
 }
 export { LuzmoColorArea } from './color-area';
+export type { InteractionEventDetail, InteractionSource } from '../../utils/reactive-controllers/interaction';

package/components/color-area/index.js

@@ -16,4 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-export { t as LuzmoColorArea } from "../color-area-qlEAp8ZN.js";
+export { t as LuzmoColorArea } from "../color-area-GGa8KJyd.js";

package/components/color-area-CFBE-rG3.cjs

@@ -0,0 +1,80 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+const e=require("./color-controller-BpdydwTO.cjs");require("./tokens.cjs");const t=require("./decorate-SO02l0A6.cjs"),n=require("./language-resolution-B7D3hQ6_.cjs"),r=require("./platform-BAjeJp2W.cjs");require("./color-handle-hJ7Kblh4.cjs");const i=require("./interaction-BjXWVy_C.cjs"),a=require("./streaming-listener-BzGZUHkj.cjs");let o=require("lit"),s=require("lit/decorators.js"),c=require("lit/directives/if-defined.js");var l=`@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));display:inline-block;position:relative;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)))!important}: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)!important}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width,192px) - var(--luzmo-border-width)));inset-block-start:0}:host([dir=rtl]) .handle{inset-inline-end:0}.handle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){inset-inline-end:0}.gradient{border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;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), 0)}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}`,u=class extends t.n{constructor(...t){super(...t),this.disabled=!1,this.focused=!1,this.labelX=`saturation`,this.labelY=`luminosity`,this.isLTR=!0,this.languageResolver=new n.t(this),this.colorController=new e.t(this,{manageAs:`hsv`}),this._interaction=new i.t(this,{value:()=>[this.x,this.y],isEqual:(e,t)=>e[0]===t[0]&&e[1]===t[1]}),this.activeAxis=`x`,this.step=.01,this.altered=0,this.activeKeys=new Set,this._valueChanged=!1,this._pointerDown=!1,this.resizeRafId=0,this.handleResize=e=>{let t=e.at(-1);t&&(this.resizeRafId&&cancelAnimationFrame(this.resizeRafId),this.resizeRafId=requestAnimationFrame(()=>{this.resizeRafId=0,this.boundingClientRect=t.contentRect,this.requestUpdate()}))}}static get styles(){return[(0,o.unsafeCSS)(l)]}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;let 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;let 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.activeKeys.clear(),this._interaction.endKeyboard(),!this._pointerDown&&(this.altered=0,this.focused=!1,this._valueChanged=!1)}handleKeydown(e){let{code:t}=e;if(this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(e=>!!e).length,t.search(`Arrow`)===0||t.search(`Page`)===0||t.search(`Home`)===0||t.search(`End`)===0){if(e.preventDefault(),this.disabled||!this._interaction.keyDown(t))return;if(this.disabled){this._interaction.end();return}this.activeKeys.add(t),this.handleKeypress()}}handleKeypress(){let e=0,t=0,n=Math.max(this.step,this.altered*5*this.step);this.activeKeys.forEach(r=>{switch(r){case`ArrowUp`:t=n;break;case`ArrowDown`:t=n*-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=n*10;break;case`PageDown`:t=n*-10;break;case`Home`:e=n*(this.isLTR?-10:10);break;case`End`:e=n*(this.isLTR?10:-10)}}),e===0?t!==0&&(this.activeAxis=`y`,this.inputY.focus()):(this.activeAxis=`x`,this.inputX.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._interaction.commit(()=>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();let{code:t}=e;this.activeKeys.delete(t),this._interaction.keyUp(t)}handleInput(e){let{valueAsNumber:t,name:n}=e.target;this[n]=t}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerdown(e){if(e.button!==0||!this._interaction.start(i.n(e))){e.preventDefault();return}if(this.disabled){this._interaction.end(),e.preventDefault();return}this._pointerDown=!0,this.colorController.savePreviousColor(),this.boundingClientRect=this.getBoundingClientRect();let t=e.target;try{t.setPointerCapture(e.pointerId),this._capturedPointer={target:t,pointerId:e.pointerId}}catch{}e.pointerType===`mouse`&&(this.focused=!0)}handlePointermove(e){if(!this._pointerDown)return;let[t,n]=this.calculateHandlePosition(e);this._valueChanged=!1,this.x=t,this.y=n,this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0,cancelable:!0}))}handlePointerup(e){e.preventDefault(),this._pointerDown&&this._finishPointer(()=>{this.inputX.focus(),e.pointerType===`mouse`&&(this.focused=!1)})}_finishPointer(e){this._pointerDown=!1;let t=this._capturedPointer;this._capturedPointer=void 0,t?.target.hasPointerCapture(t.pointerId)&&t.target.releasePointerCapture(t.pointerId);let n=this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}));e?.(),n||this.colorController.restorePreviousColor(),this._interaction.end()}endInteraction(){this._pointerDown?this._finishPointer():(this.activeKeys.clear(),this._interaction.end())}calculateHandlePosition(e){if(!this.boundingClientRect)return[this.x,this.y];let t=this.boundingClientRect,n=t.left,r=t.top,i=e.clientX,a=e.clientY,o=t.width,s=t.height,c=Math.max(0,Math.min(1,(i-n)/o)),l=Math.max(0,Math.min(1,(a-r)/s));return[this.isLTR?c:1-c,1-l]}handleAreaPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent(`pointerdown`,e)),this.handlePointermove(e))}render(){let{width:e=0,height:t=0}=this.boundingClientRect||{},n=r.t()||r.a(),i=`Color Picker`,s=(0,c.ifDefined)(n?void 0:`2d slider`),l=this.labelX,u=this.labelY,d=new Intl.NumberFormat(this.languageResolver.language,{style:`percent`,unitDisplay:`narrow`}).format(this.x),f=new Intl.NumberFormat(this.languageResolver.language,{style:`percent`,unitDisplay:`narrow`}).format(this.y),p={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 o.html`
+      <div
+        @pointerdown=${this.handleAreaPointerdown}
+        class="gradient"
+        style="background: ${p.background}"
+      >
+        <slot name="gradient"></slot>
+      </div>
+
+      <luzmo-color-handle
+        tabindex=${(0,c.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);`}
+        ${a.t({start:[`pointerdown`,this.handlePointerdown],streamInside:[`pointermove`,this.handlePointermove],end:[[`pointerup`,`pointercancel`,`pointerleave`,`lostpointercapture`],this.handlePointerup]})}
+      ></luzmo-color-handle>
+
+      <fieldset
+        class="fieldset"
+        aria-label=${(0,c.ifDefined)(n?i:void 0)}
+      >
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="x"
+            aria-label=${n?l:`${l} ${i}`}
+            aria-roledescription=${s}
+            aria-orientation="horizontal"
+            aria-valuetext=${n?d:`${d}, ${l}${this._valueChanged?``:`, ${f}, ${u}`}`}
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.x)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="y"
+            aria-label=${n?u:`${u} ${i}`}
+            aria-roledescription=${s}
+            aria-orientation="vertical"
+            aria-valuetext=${n?f:`${f}, ${u}${this._valueChanged?``:`, ${d}, ${l}`}`}
+            orient="vertical"
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.y)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </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){let e=this.inputX.parentElement,t=this.inputY.parentElement;if(!e.shadowRoot&&!t.shadowRoot){e.attachShadow({mode:`open`}),t.attachShadow({mode:`open`});let n=`<div tabindex="-1"><slot></slot></div>`;e.shadowRoot.innerHTML=n,t.shadowRoot.innerHTML=n}}}connectedCallback(){super.connectedCallback(),!this.observer&&window.ResizeObserver&&(this.observer=new window.ResizeObserver(this.handleResize)),this.observer?.observe(this)}disconnectedCallback(){this._pointerDown=!1,this._capturedPointer=void 0,this.activeKeys.clear(),this.resizeRafId&&=(cancelAnimationFrame(this.resizeRafId),0),this.observer?.disconnect(),this.observer=void 0,super.disconnectedCallback()}};t.t([(0,s.property)({type:String,reflect:!0})],u.prototype,`dir`,void 0),t.t([(0,s.property)({type:Boolean,reflect:!0})],u.prototype,`disabled`,void 0),t.t([(0,s.property)({type:Boolean,reflect:!0})],u.prototype,`focused`,void 0),t.t([(0,s.property)({type:String,attribute:`label-x`})],u.prototype,`labelX`,void 0),t.t([(0,s.property)({type:String,attribute:`label-y`})],u.prototype,`labelY`,void 0),t.t([(0,s.property)({type:Boolean,attribute:`is-ltr`})],u.prototype,`isLTR`,void 0),t.t([(0,s.query)(`.handle`)],u.prototype,`handle`,void 0),t.t([(0,s.property)({type:Number})],u.prototype,`hue`,null),t.t([(0,s.property)({type:String})],u.prototype,`value`,null),t.t([(0,s.property)({type:String})],u.prototype,`color`,null),t.t([(0,s.property)({attribute:!1})],u.prototype,`activeAxis`,void 0),t.t([(0,s.property)({type:Number})],u.prototype,`x`,null),t.t([(0,s.property)({type:Number})],u.prototype,`y`,null),t.t([(0,s.property)({type:Number})],u.prototype,`step`,void 0),t.t([(0,s.query)(`[name="x"]`)],u.prototype,`inputX`,void 0),t.t([(0,s.query)(`[name="y"]`)],u.prototype,`inputY`,void 0),customElements.get(`luzmo-color-area`)||customElements.define(`luzmo-color-area`,u),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});

package/components/{color-area-qlEAp8ZN.js → color-area-GGa8KJyd.js}

@@ -19,16 +19,20 @@ import "./tokens.js";
 import { n as e, t } from "./decorate-CpKsOs9z.js";
 import { t as n } from "./language-resolution-7rc0khIK.js";
 import { a as r, t as i } from "./platform-CDW-WdXN.js";
-import "./color-handle-Dc0uLgkf.js";
-import { t as a } from "./color-controller-CauSxC_r.js";
-import { t as o } from "./streaming-listener-B6mDl4pZ.js";
-import { html as s, unsafeCSS as c } from "lit";
-import { property as l, query as u } from "lit/decorators.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
+import "./color-handle-Ya92rdpA.js";
+import { n as a, t as o } from "./interaction-BpCLJ1OV.js";
+import { t as s } from "./color-controller-CauSxC_r.js";
+import { t as c } from "./streaming-listener-DyS3scAi.js";
+import { html as l, unsafeCSS as u } from "lit";
+import { property as d, query as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
 // src/components/color-area/color-area.module.scss?inline
-var f = "@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));display:inline-block;position:relative;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)))!important}: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)!important}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width,192px) - var(--luzmo-border-width)));inset-block-start:0}:host([dir=rtl]) .handle{inset-inline-end:0}.handle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){inset-inline-end:0}.gradient{border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;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), 0)}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}", p = class extends e {
+var m = "@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));display:inline-block;position:relative;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)))!important}: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)!important}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width,192px) - var(--luzmo-border-width)));inset-block-start:0}:host([dir=rtl]) .handle{inset-inline-end:0}.handle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){inset-inline-end:0}.gradient{border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;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), 0)}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}", h = class extends e {
 	constructor(...e) {
-		super(...e), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new n(this), this.colorController = new a(this, { manageAs: "hsv" }), this.activeAxis = "x", this.step = .01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1, this.resizeRafId = 0, this.handleResize = (e) => {
+		super(...e), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new n(this), this.colorController = new s(this, { manageAs: "hsv" }), this._interaction = new o(this, {
+			value: () => [this.x, this.y],
+			isEqual: (e, t) => e[0] === t[0] && e[1] === t[1]
+		}), this.activeAxis = "x", this.step = .01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1, this.resizeRafId = 0, this.handleResize = (e) => {
 			let t = e.at(-1);
 			t && (this.resizeRafId && cancelAnimationFrame(this.resizeRafId), this.resizeRafId = requestAnimationFrame(() => {
 				this.resizeRafId = 0, this.boundingClientRect = t.contentRect, this.requestUpdate();
@@ -36,7 +40,7 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		};
 	}
 	static get styles() {
-		return [c(f)];
+		return [u(m)];
 	}
 	get hue() {
 		return this.colorController.hue;
@@ -79,15 +83,22 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		this.focused = !0, this._valueChanged = !1;
 	}
 	handleBlur() {
-		this._pointerDown || (this.altered = 0, this.focused = !1, this._valueChanged = !1);
+		this.activeKeys.clear(), this._interaction.endKeyboard(), !this._pointerDown && (this.altered = 0, this.focused = !1, this._valueChanged = !1);
 	}
 	handleKeydown(e) {
 		let { code: t } = e;
-		this.focused = !0, this.altered = [
+		if (this.focused = !0, this.altered = [
 			e.shiftKey,
 			e.ctrlKey,
 			e.altKey
-		].filter((e) => !!e).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());
+		].filter((e) => !!e).length, t.search("Arrow") === 0 || t.search("Page") === 0 || t.search("Home") === 0 || t.search("End") === 0) {
+			if (e.preventDefault(), this.disabled || !this._interaction.keyDown(t)) return;
+			if (this.disabled) {
+				this._interaction.end();
+				return;
+			}
+			this.activeKeys.add(t), this.handleKeypress();
+		}
 	}
 	handleKeypress() {
 		let e = 0, t = 0, n = Math.max(this.step, this.altered * 5 * this.step);
@@ -116,19 +127,21 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 					break;
 				case "End": e = n * (this.isLTR ? 10 : -10);
 			}
-		}), e === 0 ? t !== 0 && (this.activeAxis = "y", this.inputY.focus()) : (this.activeAxis = "x", this.inputX.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", {
+		}), e === 0 ? t !== 0 && (this.activeAxis = "y", this.inputY.focus()) : (this.activeAxis = "x", this.inputX.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._interaction.commit(() => this.dispatchEvent(new Event("input", {
 			bubbles: !0,
 			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0,
-			cancelable: !0
-		})) || this.colorController.restorePreviousColor());
+		})), () => {
+			this.dispatchEvent(new Event("change", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			})) || this.colorController.restorePreviousColor();
+		}));
 	}
 	handleKeyup(e) {
 		e.preventDefault();
 		let { code: t } = e;
-		this.activeKeys.delete(t);
+		this.activeKeys.delete(t), this._interaction.keyUp(t);
 	}
 	handleInput(e) {
 		let { valueAsNumber: t, name: n } = e.target;
@@ -142,9 +155,26 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		}));
 	}
 	handlePointerdown(e) {
-		e.button === 0 ? (this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), e.target.setPointerCapture(e.pointerId), e.pointerType === "mouse" && (this.focused = !0)) : e.preventDefault();
+		if (e.button !== 0 || !this._interaction.start(a(e))) {
+			e.preventDefault();
+			return;
+		}
+		if (this.disabled) {
+			this._interaction.end(), e.preventDefault();
+			return;
+		}
+		this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect();
+		let t = e.target;
+		try {
+			t.setPointerCapture(e.pointerId), this._capturedPointer = {
+				target: t,
+				pointerId: e.pointerId
+			};
+		} catch {}
+		e.pointerType === "mouse" && (this.focused = !0);
 	}
 	handlePointermove(e) {
+		if (!this._pointerDown) return;
 		let [t, n] = this.calculateHandlePosition(e);
 		this._valueChanged = !1, this.x = t, this.y = n, this.dispatchEvent(new Event("input", {
 			bubbles: !0,
@@ -153,13 +183,23 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		}));
 	}
 	handlePointerup(e) {
-		e.preventDefault(), this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId);
-		let t = this.dispatchEvent(new Event("change", {
+		e.preventDefault(), this._pointerDown && this._finishPointer(() => {
+			this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1);
+		});
+	}
+	_finishPointer(e) {
+		this._pointerDown = !1;
+		let t = this._capturedPointer;
+		this._capturedPointer = void 0, t?.target.hasPointerCapture(t.pointerId) && t.target.releasePointerCapture(t.pointerId);
+		let n = this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0,
 			cancelable: !0
 		}));
-		this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1), t || this.colorController.restorePreviousColor();
+		e?.(), n || this.colorController.restorePreviousColor(), this._interaction.end();
+	}
+	endInteraction() {
+		this._pointerDown ? this._finishPointer() : (this.activeKeys.clear(), this._interaction.end());
 	}
 	calculateHandlePosition(e) {
 		/* c8 ignore next 3 */
@@ -171,14 +211,14 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", e)), this.handlePointermove(e));
 	}
 	render() {
-		let { width: e = 0, height: t = 0 } = this.boundingClientRect || {}, n = i() || r(), a = "Color Picker", c = d(n ? void 0 : "2d slider"), l = this.labelX, u = this.labelY, f = new Intl.NumberFormat(this.languageResolver.language, {
+		let { width: e = 0, height: t = 0 } = this.boundingClientRect || {}, n = i() || r(), a = "Color Picker", o = p(n ? void 0 : "2d slider"), s = this.labelX, u = this.labelY, d = new Intl.NumberFormat(this.languageResolver.language, {
 			style: "percent",
 			unitDisplay: "narrow"
-		}).format(this.x), p = new Intl.NumberFormat(this.languageResolver.language, {
+		}).format(this.x), f = 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`
+		return l`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
@@ -188,37 +228,38 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
       </div>
 
       <luzmo-color-handle
-        tabindex=${d(this.focused ? void 0 : "0")}
+        tabindex=${p(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);`}
-        ${o({
+        ${c({
 			start: ["pointerdown", this.handlePointerdown],
 			streamInside: ["pointermove", this.handlePointermove],
 			end: [[
 				"pointerup",
 				"pointercancel",
-				"pointerleave"
+				"pointerleave",
+				"lostpointercapture"
 			], this.handlePointerup]
 		})}
       ></luzmo-color-handle>
 
       <fieldset
         class="fieldset"
-        aria-label=${d(n ? a : void 0)}
+        aria-label=${p(n ? a : void 0)}
       >
         <div role="presentation">
           <input
             type="range"
             class="slider"
             name="x"
-            aria-label=${n ? l : `${l} ${a}`}
-            aria-roledescription=${c}
+            aria-label=${n ? s : `${s} ${a}`}
+            aria-roledescription=${o}
             aria-orientation="horizontal"
-            aria-valuetext=${n ? f : `${f}, ${l}${this._valueChanged ? "" : `, ${p}, ${u}`}`}
+            aria-valuetext=${n ? d : `${d}, ${s}${this._valueChanged ? "" : `, ${f}, ${u}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -234,9 +275,9 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
             class="slider"
             name="y"
             aria-label=${n ? u : `${u} ${a}`}
-            aria-roledescription=${c}
+            aria-roledescription=${o}
             aria-orientation="vertical"
-            aria-valuetext=${n ? p : `${p}, ${u}${this._valueChanged ? "" : `, ${f}, ${l}`}`}
+            aria-valuetext=${n ? f : `${f}, ${u}${this._valueChanged ? "" : `, ${d}, ${s}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -267,27 +308,27 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		super.connectedCallback(), !this.observer && window.ResizeObserver && (this.observer = new window.ResizeObserver(this.handleResize)), this.observer?.observe(this);
 	}
 	disconnectedCallback() {
-		this.resizeRafId &&= (cancelAnimationFrame(this.resizeRafId), 0), this.observer?.disconnect(), this.observer = void 0, super.disconnectedCallback();
+		this._pointerDown = !1, this._capturedPointer = void 0, this.activeKeys.clear(), this.resizeRafId &&= (cancelAnimationFrame(this.resizeRafId), 0), this.observer?.disconnect(), this.observer = void 0, super.disconnectedCallback();
 	}
 };
 // src/components/color-area/index.ts
-t([l({
+t([d({
 	type: String,
 	reflect: !0
-})], p.prototype, "dir", void 0), t([l({
+})], h.prototype, "dir", void 0), t([d({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "disabled", void 0), t([l({
+})], h.prototype, "disabled", void 0), t([d({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "focused", void 0), t([l({
+})], h.prototype, "focused", void 0), t([d({
 	type: String,
 	attribute: "label-x"
-})], p.prototype, "labelX", void 0), t([l({
+})], h.prototype, "labelX", void 0), t([d({
 	type: String,
 	attribute: "label-y"
-})], p.prototype, "labelY", void 0), t([l({
+})], h.prototype, "labelY", void 0), t([d({
 	type: Boolean,
 	attribute: "is-ltr"
-})], p.prototype, "isLTR", void 0), t([u(".handle")], p.prototype, "handle", void 0), t([l({ type: Number })], p.prototype, "hue", null), t([l({ type: String })], p.prototype, "value", null), t([l({ type: String })], p.prototype, "color", null), t([l({ attribute: !1 })], p.prototype, "activeAxis", void 0), t([l({ type: Number })], p.prototype, "x", null), t([l({ type: Number })], p.prototype, "y", null), t([l({ type: Number })], p.prototype, "step", void 0), t([u("[name=\"x\"]")], p.prototype, "inputX", void 0), t([u("[name=\"y\"]")], p.prototype, "inputY", void 0), customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", p);
-export { p as t };
+})], h.prototype, "isLTR", void 0), t([f(".handle")], h.prototype, "handle", void 0), t([d({ type: Number })], h.prototype, "hue", null), t([d({ type: String })], h.prototype, "value", null), t([d({ type: String })], h.prototype, "color", null), t([d({ attribute: !1 })], h.prototype, "activeAxis", void 0), t([d({ type: Number })], h.prototype, "x", null), t([d({ type: Number })], h.prototype, "y", null), t([d({ type: Number })], h.prototype, "step", void 0), t([f("[name=\"x\"]")], h.prototype, "inputX", void 0), t([f("[name=\"y\"]")], h.prototype, "inputY", void 0), customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", h);
+export { h as t };

package/components/color-handle/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-handle-BE0Z1gTU.cjs");exports.LuzmoColorHandle=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-handle-hJ7Kblh4.cjs");exports.LuzmoColorHandle=e.t;

package/components/color-handle/index.js

@@ -16,4 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-export { t as LuzmoColorHandle } from "../color-handle-Dc0uLgkf.js";
+export { t as LuzmoColorHandle } from "../color-handle-Ya92rdpA.js";

package/components/{color-handle-Dc0uLgkf.js → color-handle-Ya92rdpA.js}

@@ -29,10 +29,13 @@ var a = ":host{touch-action:none;transition:inline-size var(--luzmo-color-handle
 		this.styles = r(a);
 	}
 	handlePointerdown(e) {
-		e.pointerType === "touch" && (this.open = !0), this.setPointerCapture(e.pointerId);
+		e.pointerType === "touch" && (this.open = !0);
+		try {
+			this.setPointerCapture(e.pointerId);
+		} catch {}
 	}
 	handlePointerup(e) {
-		this.open = !1, this.releasePointerCapture(e.pointerId);
+		this.open = !1, this.hasPointerCapture(e.pointerId) && this.releasePointerCapture(e.pointerId);
 	}
 	render() {
 		return n`

package/components/{color-handle-BE0Z1gTU.cjs → color-handle-hJ7Kblh4.cjs}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs");require("./color-loupe-2X1bCYU9.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`:host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), block-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), border-width var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-inline var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-block var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-color-loupe-checkerboard-position,left top)/calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size,16px);block-size:var(--luzmo-color-handle-size,16px);margin-inline:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size,24px);block-size:var(--luzmo-color-handle-hitarea-size,24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius,100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size,32px);block-size:var(--luzmo-color-handle-focused-size,32px);margin-inline:calc(var(--luzmo-color-handle-size,16px) * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) * -1);outline:none}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width,var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color,#0000006b);background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled:GrayText;--highcontrast-color-handle-fill-color-disabled:Canvas}}`,i=class extends e.n{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=(0,t.unsafeCSS)(r)}handlePointerdown(e){e.pointerType===`touch`&&(this.open=!0),this.setPointerCapture(e.pointerId)}handlePointerup(e){this.open=!1,this.releasePointerCapture(e.pointerId)}render(){return t.html`
+require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs");require("./color-loupe-2X1bCYU9.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`:host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), block-size var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), border-width var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-inline var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out), margin-block var(--luzmo-color-handle-animation-duration,.13s) var(--luzmo-color-handle-animation-easing,ease-in-out);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-color-loupe-checkerboard-position,left top)/calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size,16px);block-size:var(--luzmo-color-handle-size,16px);margin-inline:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) / 2 * -1);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size,24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size,24px);block-size:var(--luzmo-color-handle-hitarea-size,24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius,100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size,32px);block-size:var(--luzmo-color-handle-focused-size,32px);margin-inline:calc(var(--luzmo-color-handle-size,16px) * -1);margin-block:calc(var(--luzmo-color-handle-size,16px) * -1);outline:none}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width,var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color,#0000006b);background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors:active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled:GrayText;--highcontrast-color-handle-fill-color-disabled:Canvas}}`,i=class extends e.n{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=(0,t.unsafeCSS)(r)}handlePointerdown(e){e.pointerType===`touch`&&(this.open=!0);try{this.setPointerCapture(e.pointerId)}catch{}}handlePointerup(e){this.open=!1,this.hasPointerCapture(e.pointerId)&&this.releasePointerCapture(e.pointerId)}render(){return t.html`
       <div class="inner" style="background-color: ${this.color}"></div>
       <luzmo-color-loupe
         color=${this.color}

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

@@ -16,6 +16,12 @@ declare const LuzmoColorMenu_base: typeof Focusable & {
 /**
  * @element luzmo-color-menu
  * @fires change - An alteration to the value of the Color Menu has been committed by the user.
+ * @fires {CustomEvent<InteractionEventDetail>} luzmo-interaction-start - Bubbles
+ * up from the color area or a color slider when a pointer drag or held-key
+ * interaction starts. The menu forwards it unchanged and adds none of its own.
+ * @fires {CustomEvent<InteractionEventDetail>} luzmo-interaction-end - Bubbles
+ * up from the same control when that interaction ends. Swatch picks and typed
+ * values are single `change` events without an interaction.
  */
 export declare class LuzmoColorMenu extends LuzmoColorMenu_base {
     static styles: import("lit").CSSResult;
@@ -43,6 +49,11 @@ export declare class LuzmoColorMenu extends LuzmoColorMenu_base {
     private _format;
     setColor(event: CustomEvent): void;
     private handleAreaChange;
+    /**
+     * Finishes a drag or held-key interaction in progress on the color area or a
+     * color slider as if the user released it. Does nothing otherwise.
+     */
+    endInteraction(): void;
     get focusElement(): HTMLElement;
     private handleHueSliderChange;
     private handleOpacitySliderChange;

package/components/color-menu/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-menu-Cus3S-Re.cjs");exports.LuzmoColorMenu=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-menu-COhe5VUB.cjs");exports.LuzmoColorMenu=e.t;

package/components/color-menu/index.d.ts

@@ -5,3 +5,4 @@ declare global {
     }
 }
 export { LuzmoColorMenu } from './color-menu';
+export type { InteractionEventDetail, InteractionSource } from '../../utils/reactive-controllers/interaction';

package/components/color-menu/index.js

@@ -16,4 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-export { t as LuzmoColorMenu } from "../color-menu-BxFQnH79.js";
+export { t as LuzmoColorMenu } from "../color-menu-Ct3f01bI.js";

package/components/{color-menu-Cus3S-Re.cjs → color-menu-COhe5VUB.cjs}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs"),t=require("./sized-mixin-CSajkMro.cjs"),n=require("./focusable-BIHTrJd6.cjs");require("./popover-CFzz83f8.cjs"),require("./color-handle-BE0Z1gTU.cjs"),require("./color-area-D1fRozE0.cjs"),require("./color-field-CN8shDl_.cjs"),require("./color-slider-9Ck28Qdk.cjs"),require("./divider-fWGUxO6A.cjs"),require("./swatch-DiNMN-SZ.cjs");let r=require("lit"),i=require("lit/decorators.js"),a=require("@luzmo/icons"),o=require("@ctrl/tinycolor");var s=`:host{width:var(--luzmo-color-menu-width,var(--color-menu-width))}.hue-opacity-text-swatches-container{gap:var(--luzmo-color-menu-color-controls-vertical-gap,var(--color-menu-color-controls-vertical-gap));padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding,var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding,var(--color-menu-hue-opacity-text-swatches-horizontal-padding));flex-direction:column;display:flex}.swatch-sliders-container{gap:var(--luzmo-color-menu-swatch-to-sliders-space,var(--color-menu-swatch-to-sliders-space));display:flex}.swatch-example-container{align-items:center;display:flex}.field-container{align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space,var(--color-menu-format-field-to-format-space));display:flex}.format-container{text-transform:uppercase;height:var(--luzmo-color-menu-format-height,var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size,var(--color-menu-format-font-size));color:var(--luzmo-color-menu-format-font-color,var(--color-menu-format-font-color));align-items:center;gap:var(--luzmo-color-menu-format-name-to-icon,var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding,var(--color-menu-format-horizontal-padding));background:0 0;border:none;outline:none;display:flex;position:relative}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover,var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";box-sizing:border-box;border:var(--luzmo-color-menu-format-indicator-width,var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color,var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius,var(--luzmo-border-radius-s));width:100%;height:100%;position:absolute;top:0;left:0}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down,var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{height:calc(var(--color-menu-format-font-size) / 1.5);align-items:center;display:flex}.slider-container{justify-content:center;gap:var(--luzmo-color-menu-slider-gap,var(--color-menu-slider-gap));flex-direction:column;display:flex}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height,var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{gap:var(--luzmo-color-menu-swatches-gap,var(--color-menu-swatches-gap));grid-template-columns:repeat(6,1fr);display:grid}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{justify-content:center;align-items:center;display:flex}:host{--luzmo-text-field-icon-size-valid:0px;--luzmo-text-field-icon-spacing-inline-end-valid:1px;--luzmo-text-field-text-align:center;--color-menu-width:290px;--luzmo-text-field-width:220px;--luzmo-color-slider-control-track-width:8px;--color-menu-height:140px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height);--color-menu-format-font-size:var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-3);--color-menu-format-font-color:var(--luzmo-font-color);--color-menu-format-font-color-hover:var(--luzmo-font-color-hover);--color-menu-format-font-color-down:var(--luzmo-font-color-down);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size:22px}:host([size=s]){--color-menu-width:260px;--luzmo-text-field-width:200px;--luzmo-color-slider-control-track-width:8px;--color-menu-hue-opacity-text-swatches-horizontal-padding:var(--luzmo-spacing-5);--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-4);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-4);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-s);--color-menu-format-font-size:var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-2);--color-menu-swatches-gap:var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size:20px}:host([size=l]){--color-menu-width:350px;--luzmo-text-field-width:240px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-format-height:var(--luzmo-component-height-l);--color-menu-format-font-size:var(--luzmo-font-size);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size:24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size:56px}:host([size=xl]){--color-menu-width:380px;--luzmo-text-field-width:280px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-color-controls-vertical-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-swatch-to-sliders-space:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-xl);--color-menu-format-font-size:var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-3);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size:26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size:64px}`,c=class extends t.n(n.t){constructor(...e){super(...e),this.color=`rgb(255, 0, 0)`,this.noAlphaChannel=!1,this._alpha=1,this._rgbColor=`rgb(255, 0, 0)`,this._rgbaColor=`rgb(255, 0, 0, 1)`,this._previousColor=`rgb(255, 0, 0)`}static{this.styles=(0,r.unsafeCSS)(s)}setColor(e){let t=new o.TinyColor(e?.target?.color);this._format=t.format===`name`?`rgb`:t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleAreaChange(e){e.stopPropagation(),e.preventDefault(),this._rgbColor=this.areaElement.color;let t=new o.TinyColor(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(e){e.stopPropagation(),e.preventDefault();let t=new o.TinyColor(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;let n=new o.TinyColor(t);this._rgbColor=n.toRgbString(),this._rgbaColor=n.setAlpha(this._alpha).toRgbString(),this.areaElement.color=`hsla(${t.h}, ${t.s*100}%, ${t.l*100}%, ${t.a})`,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(n),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleOpacitySliderChange(e){e.stopPropagation(),e.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;let t=new o.TinyColor(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleFieldChange(e){if(e.stopPropagation(),e.preventDefault(),this.colorFieldElement.checkValidity()){let e=new o.TinyColor(this.colorFieldElement.value);this._format=e.format,this._rgbaColor=e.toRgbString(),this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}}formatTextField(e){return this._format===`hsl`?e.toHslString():this._format===`hex`?this.noAlphaChannel?e.toHexString():e.toHex8String():(this._format===`name`&&(this._format=`rgb`),e.toRgbString())}cycleFormat(){let e=[`rgb`,`hsl`,`hex`];this._format=e[(e.indexOf(this._format)+1)%e.length];let t=new o.TinyColor(this.color),n=this.formatTextField(t);this.colorFieldElement.value=n}updated(e){if(e.has(`color`)&&this.color!==this._previousColor){this._previousColor=this.color;let e=new o.TinyColor(this.color);this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format=`rgb`}e.has(`noAlphaChannel`)&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return r.html`
+require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs"),t=require("./sized-mixin-CSajkMro.cjs"),n=require("./focusable-BIHTrJd6.cjs");require("./popover-CFzz83f8.cjs"),require("./color-handle-hJ7Kblh4.cjs"),require("./color-area-CFBE-rG3.cjs"),require("./color-field-CN8shDl_.cjs"),require("./color-slider-IYBn2DL7.cjs"),require("./divider-fWGUxO6A.cjs"),require("./swatch-DiNMN-SZ.cjs");let r=require("lit"),i=require("lit/decorators.js"),a=require("@luzmo/icons"),o=require("@ctrl/tinycolor");var s=`:host{width:var(--luzmo-color-menu-width,var(--color-menu-width))}.hue-opacity-text-swatches-container{gap:var(--luzmo-color-menu-color-controls-vertical-gap,var(--color-menu-color-controls-vertical-gap));padding:var(--luzmo-color-menu-hue-opacity-text-swatches-vertical-padding,var(--color-menu-hue-opacity-text-swatches-vertical-padding)) var(--luzmo-color-menu-hue-opacity-text-swatches-horizontal-padding,var(--color-menu-hue-opacity-text-swatches-horizontal-padding));flex-direction:column;display:flex}.swatch-sliders-container{gap:var(--luzmo-color-menu-swatch-to-sliders-space,var(--color-menu-swatch-to-sliders-space));display:flex}.swatch-example-container{align-items:center;display:flex}.field-container{align-items:center;gap:var(--luzmo-color-menu-format-field-to-format-space,var(--color-menu-format-field-to-format-space));display:flex}.format-container{text-transform:uppercase;height:var(--luzmo-color-menu-format-height,var(--color-menu-format-height));cursor:pointer;font-size:var(--luzmo-color-menu-format-font-size,var(--color-menu-format-font-size));color:var(--luzmo-color-menu-format-font-color,var(--color-menu-format-font-color));align-items:center;gap:var(--luzmo-color-menu-format-name-to-icon,var(--color-menu-format-name-to-icon-space));padding:0 var(--luzmo-color-menu-format-horizontal-padding,var(--color-menu-format-horizontal-padding));background:0 0;border:none;outline:none;display:flex;position:relative}.format-container:hover{color:var(--luzmo-color-menu-format-font-color-hover,var(--color-menu-format-font-color-hover))}.format-container:focus-visible{outline:none}.format-container:focus-visible:after{content:"";box-sizing:border-box;border:var(--luzmo-color-menu-format-indicator-width,var(--luzmo-indicator-width)) solid var(--luzmo-color-menu-format-indicator-color,var(--luzmo-indicator-color));border-radius:var(--luzmo-color-menu-format-label-indicator-border-radius,var(--luzmo-border-radius-s));width:100%;height:100%;position:absolute;top:0;left:0}.format-container:focus-visible,.format-container:active{color:var(--luzmo-color-menu-format-font-color-down,var(--color-menu-format-font-color-down))}.format-container .format-label{-webkit-user-select:none;user-select:none}.format-container .angle-icon{height:calc(var(--color-menu-format-font-size) / 1.5);align-items:center;display:flex}.slider-container{justify-content:center;gap:var(--luzmo-color-menu-slider-gap,var(--color-menu-slider-gap));flex-direction:column;display:flex}luzmo-color-area{width:100%;height:var(--luzmo-color-menu-height,var(--color-menu-height))}luzmo-color-slider{width:100%}luzmo-divider{margin:var(--luzmo-spacing-5) à}.swatches-container{gap:var(--luzmo-color-menu-swatches-gap,var(--color-menu-swatches-gap));grid-template-columns:repeat(6,1fr);display:grid}.swatches-container luzmo-swatch{cursor:pointer}.swatches-container .swatch-choice{justify-content:center;align-items:center;display:flex}:host{--luzmo-text-field-icon-size-valid:0px;--luzmo-text-field-icon-spacing-inline-end-valid:1px;--luzmo-text-field-text-align:center;--color-menu-width:290px;--luzmo-text-field-width:220px;--luzmo-color-slider-control-track-width:8px;--color-menu-height:140px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height);--color-menu-format-font-size:var(--luzmo-font-size-s);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-3);--color-menu-format-font-color:var(--luzmo-font-color);--color-menu-format-font-color-hover:var(--luzmo-font-color-hover);--color-menu-format-font-color-down:var(--luzmo-font-color-down);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host .swatches-container{--luzmo-swatch-size:22px}:host([size=s]){--color-menu-width:260px;--luzmo-text-field-width:200px;--luzmo-color-slider-control-track-width:8px;--color-menu-hue-opacity-text-swatches-horizontal-padding:var(--luzmo-spacing-5);--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-4);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-4);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-4);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-s);--color-menu-format-font-size:var(--luzmo-font-size-xs);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-2);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-2);--color-menu-swatches-gap:var(--luzmo-spacing-3)}:host([size=s]) .swatches-container{--luzmo-swatch-size:20px}:host([size=l]){--color-menu-width:350px;--luzmo-text-field-width:240px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:var(--luzmo-spacing-5);--color-menu-color-controls-vertical-gap:var(--luzmo-spacing-5);--color-menu-swatch-to-sliders-space:var(--luzmo-spacing-5);--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-format-height:var(--luzmo-component-height-l);--color-menu-format-font-size:var(--luzmo-font-size);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-2);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=l]) .swatches-container{--luzmo-swatch-size:24px}:host([size=l]) .swatch-example-container{--luzmo-swatch-size:56px}:host([size=xl]){--color-menu-width:380px;--luzmo-text-field-width:280px;--luzmo-color-slider-control-track-width:16px;--color-menu-hue-opacity-text-swatches-horizontal-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--color-menu-hue-opacity-text-swatches-vertical-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-color-controls-vertical-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-swatch-to-sliders-space:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-slider-gap:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--color-menu-format-height:var(--luzmo-component-height-xl);--color-menu-format-font-size:var(--luzmo-font-size-l);--color-menu-format-name-to-icon-space:var(--luzmo-spacing-3);--color-menu-format-field-to-format-space:var(--luzmo-spacing-3);--color-menu-format-horizontal-padding:var(--luzmo-spacing-4);--color-menu-swatches-gap:var(--luzmo-spacing-4)}:host([size=xl]) .swatches-container{--luzmo-swatch-size:26px}:host([size=xl]) .swatch-example-container{--luzmo-swatch-size:64px}`,c=class extends t.n(n.t){constructor(...e){super(...e),this.color=`rgb(255, 0, 0)`,this.noAlphaChannel=!1,this._alpha=1,this._rgbColor=`rgb(255, 0, 0)`,this._rgbaColor=`rgb(255, 0, 0, 1)`,this._previousColor=`rgb(255, 0, 0)`}static{this.styles=(0,r.unsafeCSS)(s)}setColor(e){let t=new o.TinyColor(e?.target?.color);this._format=t.format===`name`?`rgb`:t.format,this._rgbaColor=t.toRgbString(),this._alpha=this.noAlphaChannel?1:t.getAlpha(),this._rgbColor=t.setAlpha(1).toRgbString(),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this.colorFieldElement.value=this.formatTextField(t),this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleAreaChange(e){e.stopPropagation(),e.preventDefault(),this._rgbColor=this.areaElement.color;let t=new o.TinyColor(this._rgbColor);this._rgbaColor=t.setAlpha(this._alpha).toRgbString(),this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}endInteraction(){this.areaElement?.endInteraction(),this.hueSliderElement?.endInteraction(),this.opacitySliderElement?.endInteraction()}get focusElement(){return this.areaElement||this.colorFieldElement||this}handleHueSliderChange(e){e.stopPropagation(),e.preventDefault();let t=new o.TinyColor(this._rgbColor).toHsl();t.h=this.hueSliderElement.value;let n=new o.TinyColor(t);this._rgbColor=n.toRgbString(),this._rgbaColor=n.setAlpha(this._alpha).toRgbString(),this.areaElement.color=`hsla(${t.h}, ${t.s*100}%, ${t.l*100}%, ${t.a})`,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.colorFieldElement.value=this.formatTextField(n),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleOpacitySliderChange(e){e.stopPropagation(),e.preventDefault(),this._alpha=this.opacitySliderElement.sliderHandlePosition/100;let t=new o.TinyColor(this._rgbColor).setAlpha(this._alpha);this._rgbaColor=t.toRgbString(),this.colorFieldElement.value=this.formatTextField(t),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}handleFieldChange(e){if(e.stopPropagation(),e.preventDefault(),this.colorFieldElement.checkValidity()){let e=new o.TinyColor(this.colorFieldElement.value);this._format=e.format,this._rgbaColor=e.toRgbString(),this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this.noAlphaChannel&&(this._rgbaColor=this._rgbColor,this._alpha=1),this.hueSliderElement.color=this._rgbColor,this.areaElement.color=this._rgbColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._previousColor=this._rgbaColor,this.color=this._rgbaColor,this.dispatchEvent(new CustomEvent(`change`,{detail:this.color}))}}formatTextField(e){return this._format===`hsl`?e.toHslString():this._format===`hex`?this.noAlphaChannel?e.toHexString():e.toHex8String():(this._format===`name`&&(this._format=`rgb`),e.toRgbString())}cycleFormat(){let e=[`rgb`,`hsl`,`hex`];this._format=e[(e.indexOf(this._format)+1)%e.length];let t=new o.TinyColor(this.color),n=this.formatTextField(t);this.colorFieldElement.value=n}updated(e){if(e.has(`color`)&&this.color!==this._previousColor){this._previousColor=this.color;let e=new o.TinyColor(this.color);this._alpha=e.getAlpha(),this._rgbColor=e.setAlpha(1).toRgbString(),this._rgbaColor=e.setAlpha(this._alpha).toRgbString(),this.areaElement.color=this._rgbColor,this.hueSliderElement.color=this._rgbColor,this.colorFieldElement.value=this._rgbaColor,this.noAlphaChannel||(this.opacitySliderElement.color=this._rgbaColor),this.swatchElement.color=this._rgbaColor,this._format=`rgb`}e.has(`noAlphaChannel`)&&!this.noAlphaChannel&&(this.opacitySliderElement.color=this._rgbaColor)}renderOpacitySlider(){return r.html`
       <luzmo-color-slider
         id="luzmo-opacity-slider"
         label="Opacity"

package/components/{color-menu-BxFQnH79.js → color-menu-Ct3f01bI.js}

@@ -20,10 +20,10 @@ import { t as e } from "./decorate-CpKsOs9z.js";
 import { n as t } from "./sized-mixin-BmxIAuoH.js";
 import { t as n } from "./focusable-xjv79E40.js";
 import "./popover-CWrRLzOL.js";
-import "./color-handle-Dc0uLgkf.js";
-import "./color-area-qlEAp8ZN.js";
+import "./color-handle-Ya92rdpA.js";
+import "./color-area-GGa8KJyd.js";
 import "./color-field-CVyDNZ4b.js";
-import "./color-slider-X1EArAnx.js";
+import "./color-slider-DNd_ZrD6.js";
 import "./divider-Bt0NIqfu.js";
 import "./swatch-BBVsuSAV.js";
 import { html as r, unsafeCSS as i } from "lit";
@@ -47,6 +47,9 @@ var f = ":host{width:var(--luzmo-color-menu-width,var(--color-menu-width))}.hue-
 		let t = new d(this._rgbColor);
 		this._rgbaColor = t.setAlpha(this._alpha).toRgbString(), this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(t), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
 	}
+	endInteraction() {
+		this.areaElement?.endInteraction(), this.hueSliderElement?.endInteraction(), this.opacitySliderElement?.endInteraction();
+	}
 	get focusElement() {
 		return this.areaElement || this.colorFieldElement || this;
 	}