@luzmo/analytics-components-kit 1.1.1 → 1.2.1

package/components/item-option-color-range/index.js

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-export { t as LuzmoItemOptionColorRange } from "../item-option-color-range-Dt7Bv06p.js";
+export { t as LuzmoItemOptionColorRange } from "../item-option-color-range-FQduqtz3.js";

package/components/item-option-color-range/item-option-color-range.d.ts

@@ -9,7 +9,9 @@ import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
 /**
  * @customElement luzmo-item-option-color-range
  * @description A component that allows the user to create a color range.
- * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes.
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the option value changes. With `live-interactions`, emitted immediately and carries `interaction` while a stop's color is dragged.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-start - With `live-interactions`: a color drag or held key on one stop first changed its color, right before that value update. Each stop has its own gestures; one that never changes its color emits no lifecycle.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-end - With `live-interactions`: that stop's gesture ended, after its last value update.
  */
 export declare class LuzmoItemOptionColorRange extends LuzmoItemOptionBase {
     static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
@@ -69,6 +71,10 @@ export declare class LuzmoItemOptionColorRange extends LuzmoItemOptionBase {
      * The debounce time in milliseconds
      */
     debounce: number;
+    /**
+     * Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys
+     */
+    liveInteractions: boolean;
     /**
      * The function to parse the value
      */
@@ -81,12 +87,25 @@ export declare class LuzmoItemOptionColorRange extends LuzmoItemOptionBase {
      */
     toValue?: (value: any) => any;
     private colorRangeLines;
+    private _colorPickers;
+    private readonly _interaction;
     /**
      * @internal
      */
     debounceTimeout: any;
     private _ranges;
     protected willUpdate(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    private _clearDebounce;
+    private _emitLegacy;
+    /** Ends open color gestures now, keeping their values. Call before removing the element. */
+    endInteraction(): void;
+    private _emitLive;
+    private _handleInteractionStart;
+    /** In live mode, ends open stop gestures before an edit that adds, removes or reorders stops, so no gesture follows a moved stop. */
+    private _finalizeBeforeStructureChange;
+    private _handleInteractionEnd;
+    private _handleInteractionCancel;
     private _handleChangeEvent;
     private _getIndex;
     private _extrapolateNewValue;

package/components/item-option-color-range-BqSbuSZh.cjs

@@ -0,0 +1,101 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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.
+ * */
+require("./tokens-BWMfo_w4.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./color-DKdzPrQX.cjs"),n=require("./is-same-option-value-Cf6BQcs7.cjs"),r=require("./option-interaction-controller-D0U-CTpZ.cjs"),i=require("./item-option-base-BMy6dWbc.cjs"),a=require("./superPropGet-DmmlTXgo.cjs");let o=require("@luzmo/icons");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/icon");let s=require("lit"),c=require("lit/decorators.js"),l=require("@lit/localize");require("@luzmo/lucero/number-field"),require("@luzmo/lucero/text-field"),require("@luzmo/lucero/color-picker"),require("@luzmo/lucero/color-field");var u=(e,n=.1)=>{if(e.length<2)return`#AAAAAA`;let r=e.length,i=new t.t(e[r-2]).to(`oklab`),a=new t.t(e[r-1]).to(`oklab`),o=i.coords[0],s=a.coords[0],c=Math.min(1,Math.max(0,s+(s>o?1:-1)*n));return new t.t(`oklab`,[c,a.coords[1],a.coords[2]],a.alpha).to(`srgb`).toString({format:`hex`,precision:0})},d=`:host{--luzmo-swatch-size:14px}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.color-range-line{align-items:center;display:flex}luzmo-color-field,luzmo-number-field{flex-grow:1}.color-range-lines-container,.color-range-lines{gap:var(--luzmo-item-option-color-range-ranges-gap,var(--color-ranges-gap));flex-direction:column;flex-grow:1;display:flex}.color-range-lines{width:100%}.extra-label{height:var(--item-option-component-height);align-items:center;display:flex}.color-range-percentage-value{padding-inline-start:var(--luzmo-item-option-color-range-color-swatch-to-percentage,var(--color-swatch-to-percentage));padding-inline-end:var(--luzmo-item-option-color-range-percentage-to-input-field,var(--percentage-to-input-field))}luzmo-color-picker{position:relative}luzmo-color-picker:not(:has(+.color-range-percentage-value)){padding-inline-end:var(--luzmo-item-option-color-range-color-swatch-to-input-field,var(--color-swatch-to-input-field))}luzmo-number-field:has(+luzmo-action-button){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-field:has(+luzmo-action-button){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-picker:before{box-sizing:border-box;content:"";top:var(--color-range-connector-top);left:var(--color-range-connector-left);height:var(--color-range-connector-height);width:var(--color-range-connector-width);background:var(--range-color);border:var(--luzmo-item-option-color-range-connector-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-color-range-connector-border-color,var(--luzmo-border-color));z-index:-1;border-top:0;border-bottom:0;position:absolute}:host([reverse]) luzmo-color-picker:before{top:var(--color-range-reverse-connector-top)}:host(:not([reverse])) .color-range-lines:not(.edit-range-size) .color-range-line:last-child luzmo-color-picker:before,:host([reverse]) .color-range-lines:not(.edit-range-size) .color-range-line:first-child luzmo-color-picker:before{display:none}.color-range-add-value-container{height:var(--color-range-input-field-height);justify-content:start;align-items:center;display:flex}.color-range-add-value{box-sizing:border-box;width:var(--luzmo-item-option-color-range-add-value-width,var(--luzmo-swatch-size));height:var(--luzmo-item-option-color-range-add-value-height,var(--luzmo-swatch-size));border-width:var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-item-option-color-range-add-value-border-color,var(--luzmo-primary));border-radius:var(--luzmo-item-option-color-range-add-value-border-radius,50%);background-color:var(--luzmo-item-option-color-range-add-value-background-color,var(--luzmo-background-color));cursor:pointer;color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));justify-content:center;align-items:center;display:flex;position:relative}.color-range-add-value .plus-sign{width:100%;height:100%;position:absolute;top:0;left:0}.color-range-add-value .plus-sign:before{content:" ";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));height:var(--add-color-range-plus-size);width:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value .plus-sign:after{content:" ";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));width:var(--add-color-range-plus-size);height:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value:hover{background-color:var(--luzmo-item-option-color-range-add-value-background-color-hover,var(--luzmo-background-color-hover));color:var(--luzmo-item-option-color-range-add-value-color-hover,var(--luzmo-primary-hover))}.color-range-add-value[focused]{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value:focus-visible{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value[focused]:after{content:"";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}.color-range-add-value:focus-visible:after{content:"";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}:host{--luzmo-swatch-size:var(--color-range-swatch-size);--color-range-swatch-size:16px;--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--color-range-connector-width:.25rem;--color-range-connector-height:calc(var(--color-range-input-field-height) + var(--color-ranges-gap) - var(--color-range-swatch-size) + var(--color-range-connector-width));--color-range-connector-top:calc(var(--color-range-swatch-size) - (var(--color-range-connector-width) / 2));--color-range-reverse-connector-top:calc(-1 * var(--color-range-connector-height) + (var(--color-range-connector-width) / 2));--color-range-connector-left:calc((var(--color-range-swatch-size) - var(--color-range-connector-width)) / 2);--color-range-input-field-height:var(--luzmo-component-height);--add-color-range-size:var(--color-range-swatch-size);--add-color-range-plus-size:8px;--add-color-range-plus-sign-border-width:2px;--add-value-focus-indicator-border-radius:50%;--add-value-focus-indicator-gap:3px;--add-value-focus-indicator-width:1px;--add-value-focus-indicator-color:var(--luzmo-primary);--color-swatch-to-percentage:var(--luzmo-spacing-4);--color-swatch-to-input-field:var(--luzmo-spacing-4);--percentage-to-input-field:var(--luzmo-spacing-4);--input-field-to-button:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=s]){--color-range-swatch-size:14px;--color-range-input-field-height:var(--luzmo-component-height-s);--color-ranges-gap:var(--luzmo-spacing-2);--add-color-range-plus-size:6px;--add-color-range-plus-sign-border-width:2px;--color-swatch-to-percentage:var(--luzmo-spacing-3);--color-swatch-to-input-field:var(--luzmo-spacing-3);--percentage-to-input-field:var(--luzmo-spacing-3);--input-field-to-button:var(--luzmo-spacing-2)}:host([size=l]){--color-range-swatch-size:18px;--color-range-input-field-height:var(--luzmo-component-height-l);--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-3)}:host([size=xl]){--color-range-swatch-size:20px;--color-range-input-field-height:var(--luzmo-component-height-xl);--color-ranges-gap:var(--luzmo-spacing-3);--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-4)}`,f,p=class extends i.t{constructor(...e){super(...e),this.disabled=!1,this.percentage=!1,this.noAlphaChannel=!1,this.editRangeSize=!1,this.noValues=!1,this.minimumRangeSize=2,this.negativeInfinityValue=!1,this.readOnlyColorPicker=!1,this.reverse=!1,this.debounce=100,this.liveInteractions=!1,this._interaction=new r.t(this,n.t),this._ranges=[]}willUpdate(e){super.willUpdate(e),e.has(`value`)&&(this._ranges=typeof this.parseValue==`function`?this.parseValue(this.value??this.default??[]):this.value??this.default??[]),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction()),this.negativeInfinityValue&&(this._ranges=[{color:this._ranges[0].color,value:-1/0},...this._ranges.slice(1)])}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_clearDebounce(){clearTimeout(this.debounceTimeout),this.debounceTimeout=void 0}_emitLegacy(){this.debounceTimeout=void 0,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(this._ranges):this._ranges}}))}endInteraction(){for(let e of this._colorPickers??[])e.endInteraction?.();this._interaction.endAll()}_emitLive(e){let t=typeof this.toValue==`function`?this.toValue(this._ranges):this._ranges;this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:e?{value:t,interaction:e}:{value:t}}))}_handleInteractionStart(e){this.liveInteractions&&this._interaction.start(e.currentTarget,e.detail,this._ranges[this._getIndex(e)]?.color)}_finalizeBeforeStructureChange(){this.liveInteractions&&this.endInteraction()}_handleInteractionEnd(e){this._interaction.end(e.currentTarget,e.detail)}_handleInteractionCancel(e){this._interaction.cancel(e.currentTarget,e.detail)}_handleChangeEvent(e=this,t){this.liveInteractions?this._interaction.update(e??this,this._ranges,e=>this._emitLive(e),t):(this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>this._emitLegacy(),this.debounce??200))}_getIndex(e){let t=[...this.colorRangeLines].indexOf((e?.target)?.closest(`.color-range-line`));return this.reverse&&(t=(this._ranges?.length??0)-1-t),t}_extrapolateNewValue(e){if(e.length<2)return 0;let t=e.at(-1),n=e.at(-2),r=(t??0)-(n??0);return(t??0)+r}_setColor(e){let t=this._getIndex(e),n=e.target.color??e.target.value;this._ranges=structuredClone(this._ranges),this._ranges?.[t]&&(this._ranges[t].color=String(n)),this._handleChangeEvent(e.currentTarget,String(n))}_setNumber(e){let t=this._getIndex(e),n=e.target.value,r=this._ranges.map((e,r)=>r===t?{...e,value:n}:e);r.some((e,t)=>t>0&&(e.value??0)<(r[t-1].value??0))&&this._finalizeBeforeStructureChange(),this._ranges=structuredClone(this._ranges),this._ranges?.[t]&&(this._ranges[t].value=n),this._ranges=this._ranges.sort((e,t)=>(e?.value??0)-(t?.value??0)),this._handleChangeEvent()}_removeRangeValue(e){let t=this._getIndex(e);this._finalizeBeforeStructureChange(),this._ranges=structuredClone(this._ranges),this._ranges?.splice(t,1),this._handleChangeEvent()}_addRangeValue(){this._finalizeBeforeStructureChange();let e=u(this._ranges?.map(e=>e.color)??[]),t=this._extrapolateNewValue(this._ranges?.map(e=>e.value??0)??[]);this._ranges=[...structuredClone(this._ranges??[]),{color:e,value:t}],this._handleChangeEvent()}renderRangeValues(){let e=(e,t,n,r)=>s.html`
+        <div class="color-range-line" style="--range-color: ${e}">
+          <luzmo-color-picker
+            .color=${e}
+            .debounce=${this.debounce}
+            ?disabled=${this.disabled}
+            ?no-alpha-channel=${this.noAlphaChannel}
+            ?read-only=${this.readOnlyColorPicker}
+            @change=${this._setColor}
+            @luzmo-interaction-start=${this._handleInteractionStart}
+            @luzmo-interaction-end=${this._handleInteractionEnd}
+            @luzmo-interaction-cancel=${this._handleInteractionCancel}
+          ></luzmo-color-picker>
+          ${this.percentage?s.html`
+                  <div class="color-range-percentage-value">%</div>
+                `:s.html`
+                  
+                `}
+          ${this.noValues?s.html` <luzmo-color-field
+                .value=${e}
+                .size=${this.size}
+                .debounce=${this.debounce}
+                ?no-alpha-channel=${this.noAlphaChannel}
+                ?disabled=${this.disabled}
+                @change=${this._setColor}
+              ></luzmo-color-field>`:n?s.html` <luzmo-text-field
+                  .value=${`< `+(r??0)}
+                  .size=${this.size}
+                  readonly
+                ></luzmo-text-field>`:s.html` <luzmo-number-field
+                  .value=${t??0}
+                  .size=${this.size}
+                  .debounce=${this.debounce}
+                  ?disabled=${this.disabled}
+                  @change=${this._setNumber}
+                ></luzmo-number-field>`}
+          ${this.editRangeSize&&!this.disabled&&!n&&(this._ranges?.length??0)>this.minimumRangeSize?s.html`<luzmo-action-button
+                quiet
+                .size=${this.size}
+                .label=${(0,l.msg)(`Remove color stop`,{desc:`Aria label for remove color stop button`})}
+                @click=${this._removeRangeValue}
+              >
+                <luzmo-icon
+                  slot="icon"
+                  .size=${this.size}
+                  .icon=${o.luzmoTrashOutline}
+                ></luzmo-icon>
+              </luzmo-action-button>`:s.html`
+                  
+                `}
+        </div>
+      `,t=this._ranges??this.default??[];this.reverse&&(t=[...t].reverse());let n=t.map(({color:n,value:r},i)=>e(n,r,i===0&&this.negativeInfinityValue,i===0&&this.negativeInfinityValue?t[1]?.value:void 0));return s.html`
+      <div id="luzmo-item-option-control" class="color-range-lines-container" role="group" aria-label=${this.label||(0,l.msg)(`Color range`,{desc:`Accessible label for color range control`})}>
+        ${this.editRangeSize&&!this.disabled&&this.reverse?s.html`<div class="color-range-add-value-container">
+              <button
+                class="color-range-add-value"
+                aria-label=${(0,l.msg)(`Add color stop`,{desc:`Aria label for add color stop button`})}
+                @click=${this._addRangeValue}
+              >
+                <div class="plus-sign"></div>
+              </button>
+            </div>`:s.html`
+                
+              `}
+        <div
+          class="color-range-lines ${this.editRangeSize&&!this.disabled?`edit-range-size`:``}"
+        >
+          ${n}
+        </div>
+        ${this.editRangeSize&&!this.disabled&&!this.reverse?s.html`<div class="color-range-add-value-container">
+              <button
+                class="color-range-add-value"
+                aria-label=${(0,l.msg)(`Add color stop`,{desc:`Aria label for add color stop button`})}
+                @click=${this._addRangeValue}
+              >
+                <div class="plus-sign"></div>
+              </button>
+            </div>`:s.html`
+                
+              `}
+      </div>
+    `}renderController(){return this.renderRangeValues()}};f=p,f.styles=[a.t(f,`styles`,f),(0,s.unsafeCSS)(d)],e.t([(0,c.property)({type:Array,reflect:!0})],p.prototype,`value`,void 0),e.t([(0,c.property)({type:Array,reflect:!0})],p.prototype,`default`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0})],p.prototype,`disabled`,void 0),e.t([(0,c.property)({type:Boolean})],p.prototype,`percentage`,void 0),e.t([(0,c.property)({type:Boolean,attribute:`no-alpha-channel`})],p.prototype,`noAlphaChannel`,void 0),e.t([(0,c.property)({type:Boolean,attribute:`edit-range-size`})],p.prototype,`editRangeSize`,void 0),e.t([(0,c.property)({type:Boolean,attribute:`no-values`})],p.prototype,`noValues`,void 0),e.t([(0,c.property)({type:Number,reflect:!0,attribute:`minimum-range-size`})],p.prototype,`minimumRangeSize`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0,attribute:`negative-infinity-value`})],p.prototype,`negativeInfinityValue`,void 0),e.t([(0,c.property)({type:Boolean,attribute:`read-only-color-picker`})],p.prototype,`readOnlyColorPicker`,void 0),e.t([(0,c.property)({type:Boolean})],p.prototype,`reverse`,void 0),e.t([(0,c.property)({type:Number,reflect:!0})],p.prototype,`debounce`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0,attribute:`live-interactions`})],p.prototype,`liveInteractions`,void 0),e.t([(0,c.property)()],p.prototype,`parseValue`,void 0),e.t([(0,c.property)()],p.prototype,`toValue`,void 0),e.t([(0,c.queryAll)(`.color-range-line`)],p.prototype,`colorRangeLines`,void 0),e.t([(0,c.queryAll)(`luzmo-color-picker`)],p.prototype,`_colorPickers`,void 0),e.t([(0,c.state)()],p.prototype,`_ranges`,void 0),customElements.get(`luzmo-item-option-color-range`)||customElements.define(`luzmo-item-option-color-range`,p),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});

package/components/item-option-color-range-FQduqtz3.js

@@ -0,0 +1,265 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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.
+ * */
+import "./tokens-6HmQYnEP.js";
+import { t as e } from "./decorate-B2TzfnLZ.js";
+import { t } from "./color-CQcCK-_O.js";
+import { t as n } from "./is-same-option-value-B2oyvEqT.js";
+import { t as r } from "./option-interaction-controller-B8S1N_Oo.js";
+import { t as i } from "./item-option-base-BfHciede.js";
+import { t as a } from "./superPropGet-CUPN9Fvv.js";
+import { luzmoTrashOutline as o } from "@luzmo/icons";
+import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/icon";
+import { html as s, unsafeCSS as c } from "lit";
+import { property as l, queryAll as u, state as d } from "lit/decorators.js";
+import { msg as f } from "@lit/localize";
+import "@luzmo/lucero/number-field";
+import "@luzmo/lucero/text-field";
+import "@luzmo/lucero/color-picker";
+import "@luzmo/lucero/color-field";
+// src/utils/color/extrapolate-color.ts
+var p = (e, n = .1) => {
+	if (e.length < 2) return "#AAAAAA";
+	let r = e.length, i = new t(e[r - 2]).to("oklab"), a = new t(e[r - 1]).to("oklab"), o = i.coords[0], s = a.coords[0], c = Math.min(1, Math.max(0, s + (s > o ? 1 : -1) * n));
+	return new t("oklab", [
+		c,
+		a.coords[1],
+		a.coords[2]
+	], a.alpha).to("srgb").toString({
+		format: "hex",
+		precision: 0
+	});
+}, m = ":host{--luzmo-swatch-size:14px}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.color-range-line{align-items:center;display:flex}luzmo-color-field,luzmo-number-field{flex-grow:1}.color-range-lines-container,.color-range-lines{gap:var(--luzmo-item-option-color-range-ranges-gap,var(--color-ranges-gap));flex-direction:column;flex-grow:1;display:flex}.color-range-lines{width:100%}.extra-label{height:var(--item-option-component-height);align-items:center;display:flex}.color-range-percentage-value{padding-inline-start:var(--luzmo-item-option-color-range-color-swatch-to-percentage,var(--color-swatch-to-percentage));padding-inline-end:var(--luzmo-item-option-color-range-percentage-to-input-field,var(--percentage-to-input-field))}luzmo-color-picker{position:relative}luzmo-color-picker:not(:has(+.color-range-percentage-value)){padding-inline-end:var(--luzmo-item-option-color-range-color-swatch-to-input-field,var(--color-swatch-to-input-field))}luzmo-number-field:has(+luzmo-action-button){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-field:has(+luzmo-action-button){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-picker:before{box-sizing:border-box;content:\"\";top:var(--color-range-connector-top);left:var(--color-range-connector-left);height:var(--color-range-connector-height);width:var(--color-range-connector-width);background:var(--range-color);border:var(--luzmo-item-option-color-range-connector-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-color-range-connector-border-color,var(--luzmo-border-color));z-index:-1;border-top:0;border-bottom:0;position:absolute}:host([reverse]) luzmo-color-picker:before{top:var(--color-range-reverse-connector-top)}:host(:not([reverse])) .color-range-lines:not(.edit-range-size) .color-range-line:last-child luzmo-color-picker:before,:host([reverse]) .color-range-lines:not(.edit-range-size) .color-range-line:first-child luzmo-color-picker:before{display:none}.color-range-add-value-container{height:var(--color-range-input-field-height);justify-content:start;align-items:center;display:flex}.color-range-add-value{box-sizing:border-box;width:var(--luzmo-item-option-color-range-add-value-width,var(--luzmo-swatch-size));height:var(--luzmo-item-option-color-range-add-value-height,var(--luzmo-swatch-size));border-width:var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-item-option-color-range-add-value-border-color,var(--luzmo-primary));border-radius:var(--luzmo-item-option-color-range-add-value-border-radius,50%);background-color:var(--luzmo-item-option-color-range-add-value-background-color,var(--luzmo-background-color));cursor:pointer;color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));justify-content:center;align-items:center;display:flex;position:relative}.color-range-add-value .plus-sign{width:100%;height:100%;position:absolute;top:0;left:0}.color-range-add-value .plus-sign:before{content:\" \";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));height:var(--add-color-range-plus-size);width:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value .plus-sign:after{content:\" \";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));width:var(--add-color-range-plus-size);height:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value:hover{background-color:var(--luzmo-item-option-color-range-add-value-background-color-hover,var(--luzmo-background-color-hover));color:var(--luzmo-item-option-color-range-add-value-color-hover,var(--luzmo-primary-hover))}.color-range-add-value[focused]{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value:focus-visible{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value[focused]:after{content:\"\";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}.color-range-add-value:focus-visible:after{content:\"\";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}:host{--luzmo-swatch-size:var(--color-range-swatch-size);--color-range-swatch-size:16px;--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--color-range-connector-width:.25rem;--color-range-connector-height:calc(var(--color-range-input-field-height) + var(--color-ranges-gap) - var(--color-range-swatch-size) + var(--color-range-connector-width));--color-range-connector-top:calc(var(--color-range-swatch-size) - (var(--color-range-connector-width) / 2));--color-range-reverse-connector-top:calc(-1 * var(--color-range-connector-height) + (var(--color-range-connector-width) / 2));--color-range-connector-left:calc((var(--color-range-swatch-size) - var(--color-range-connector-width)) / 2);--color-range-input-field-height:var(--luzmo-component-height);--add-color-range-size:var(--color-range-swatch-size);--add-color-range-plus-size:8px;--add-color-range-plus-sign-border-width:2px;--add-value-focus-indicator-border-radius:50%;--add-value-focus-indicator-gap:3px;--add-value-focus-indicator-width:1px;--add-value-focus-indicator-color:var(--luzmo-primary);--color-swatch-to-percentage:var(--luzmo-spacing-4);--color-swatch-to-input-field:var(--luzmo-spacing-4);--percentage-to-input-field:var(--luzmo-spacing-4);--input-field-to-button:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=s]){--color-range-swatch-size:14px;--color-range-input-field-height:var(--luzmo-component-height-s);--color-ranges-gap:var(--luzmo-spacing-2);--add-color-range-plus-size:6px;--add-color-range-plus-sign-border-width:2px;--color-swatch-to-percentage:var(--luzmo-spacing-3);--color-swatch-to-input-field:var(--luzmo-spacing-3);--percentage-to-input-field:var(--luzmo-spacing-3);--input-field-to-button:var(--luzmo-spacing-2)}:host([size=l]){--color-range-swatch-size:18px;--color-range-input-field-height:var(--luzmo-component-height-l);--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-3)}:host([size=xl]){--color-range-swatch-size:20px;--color-range-input-field-height:var(--luzmo-component-height-xl);--color-ranges-gap:var(--luzmo-spacing-3);--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-4)}", h, g = class extends i {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.percentage = !1, this.noAlphaChannel = !1, this.editRangeSize = !1, this.noValues = !1, this.minimumRangeSize = 2, this.negativeInfinityValue = !1, this.readOnlyColorPicker = !1, this.reverse = !1, this.debounce = 100, this.liveInteractions = !1, this._interaction = new r(this, n), this._ranges = [];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this._ranges = typeof this.parseValue == "function" ? this.parseValue(this.value ?? this.default ?? []) : this.value ?? this.default ?? []), e.has("liveInteractions") && (this.liveInteractions ? this._clearDebounce() : this.endInteraction()), this.negativeInfinityValue && (this._ranges = [{
+			color: this._ranges[0].color,
+			value: -Infinity
+		}, ...this._ranges.slice(1)]);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._clearDebounce();
+	}
+	_clearDebounce() {
+		clearTimeout(this.debounceTimeout), this.debounceTimeout = void 0;
+	}
+	_emitLegacy() {
+		this.debounceTimeout = void 0, this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { value: typeof this.toValue == "function" ? this.toValue(this._ranges) : this._ranges }
+		}));
+	}
+	endInteraction() {
+		for (let e of this._colorPickers ?? []) e.endInteraction?.();
+		this._interaction.endAll();
+	}
+	_emitLive(e) {
+		let t = typeof this.toValue == "function" ? this.toValue(this._ranges) : this._ranges;
+		this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: e ? {
+				value: t,
+				interaction: e
+			} : { value: t }
+		}));
+	}
+	_handleInteractionStart(e) {
+		this.liveInteractions && this._interaction.start(e.currentTarget, e.detail, this._ranges[this._getIndex(e)]?.color);
+	}
+	_finalizeBeforeStructureChange() {
+		this.liveInteractions && this.endInteraction();
+	}
+	_handleInteractionEnd(e) {
+		this._interaction.end(e.currentTarget, e.detail);
+	}
+	_handleInteractionCancel(e) {
+		this._interaction.cancel(e.currentTarget, e.detail);
+	}
+	_handleChangeEvent(e = this, t) {
+		this.liveInteractions ? this._interaction.update(e ?? this, this._ranges, (e) => this._emitLive(e), t) : (this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => this._emitLegacy(), this.debounce ?? 200));
+	}
+	_getIndex(e) {
+		let t = [...this.colorRangeLines].indexOf((e?.target)?.closest(".color-range-line"));
+		return this.reverse && (t = (this._ranges?.length ?? 0) - 1 - t), t;
+	}
+	_extrapolateNewValue(e) {
+		if (e.length < 2) return 0;
+		let t = e.at(-1), n = e.at(-2), r = (t ?? 0) - (n ?? 0);
+		return (t ?? 0) + r;
+	}
+	_setColor(e) {
+		let t = this._getIndex(e), n = e.target.color ?? e.target.value;
+		this._ranges = structuredClone(this._ranges), this._ranges?.[t] && (this._ranges[t].color = String(n)), this._handleChangeEvent(e.currentTarget, String(n));
+	}
+	_setNumber(e) {
+		let t = this._getIndex(e), n = e.target.value, r = this._ranges.map((e, r) => r === t ? {
+			...e,
+			value: n
+		} : e);
+		r.some((e, t) => t > 0 && (e.value ?? 0) < (r[t - 1].value ?? 0)) && this._finalizeBeforeStructureChange(), this._ranges = structuredClone(this._ranges), this._ranges?.[t] && (this._ranges[t].value = n), this._ranges = this._ranges.sort((e, t) => (e?.value ?? 0) - (t?.value ?? 0)), this._handleChangeEvent();
+	}
+	_removeRangeValue(e) {
+		let t = this._getIndex(e);
+		this._finalizeBeforeStructureChange(), this._ranges = structuredClone(this._ranges), this._ranges?.splice(t, 1), this._handleChangeEvent();
+	}
+	_addRangeValue() {
+		this._finalizeBeforeStructureChange();
+		let e = p(this._ranges?.map((e) => e.color) ?? []), t = this._extrapolateNewValue(this._ranges?.map((e) => e.value ?? 0) ?? []);
+		this._ranges = [...structuredClone(this._ranges ?? []), {
+			color: e,
+			value: t
+		}], this._handleChangeEvent();
+	}
+	renderRangeValues() {
+		let e = (e, t, n, r) => s`
+        <div class="color-range-line" style="--range-color: ${e}">
+          <luzmo-color-picker
+            .color=${e}
+            .debounce=${this.debounce}
+            ?disabled=${this.disabled}
+            ?no-alpha-channel=${this.noAlphaChannel}
+            ?read-only=${this.readOnlyColorPicker}
+            @change=${this._setColor}
+            @luzmo-interaction-start=${this._handleInteractionStart}
+            @luzmo-interaction-end=${this._handleInteractionEnd}
+            @luzmo-interaction-cancel=${this._handleInteractionCancel}
+          ></luzmo-color-picker>
+          ${this.percentage ? s`
+                  <div class="color-range-percentage-value">%</div>
+                ` : s`
+                  
+                `}
+          ${this.noValues ? s` <luzmo-color-field
+                .value=${e}
+                .size=${this.size}
+                .debounce=${this.debounce}
+                ?no-alpha-channel=${this.noAlphaChannel}
+                ?disabled=${this.disabled}
+                @change=${this._setColor}
+              ></luzmo-color-field>` : n ? s` <luzmo-text-field
+                  .value=${"< " + (r ?? 0)}
+                  .size=${this.size}
+                  readonly
+                ></luzmo-text-field>` : s` <luzmo-number-field
+                  .value=${t ?? 0}
+                  .size=${this.size}
+                  .debounce=${this.debounce}
+                  ?disabled=${this.disabled}
+                  @change=${this._setNumber}
+                ></luzmo-number-field>`}
+          ${this.editRangeSize && !this.disabled && !n && (this._ranges?.length ?? 0) > this.minimumRangeSize ? s`<luzmo-action-button
+                quiet
+                .size=${this.size}
+                .label=${f("Remove color stop", { desc: "Aria label for remove color stop button" })}
+                @click=${this._removeRangeValue}
+              >
+                <luzmo-icon
+                  slot="icon"
+                  .size=${this.size}
+                  .icon=${o}
+                ></luzmo-icon>
+              </luzmo-action-button>` : s`
+                  
+                `}
+        </div>
+      `, t = this._ranges ?? this.default ?? [];
+		this.reverse && (t = [...t].reverse());
+		let n = t.map(({ color: n, value: r }, i) => e(n, r, i === 0 && this.negativeInfinityValue, i === 0 && this.negativeInfinityValue ? t[1]?.value : void 0));
+		return s`
+      <div id="luzmo-item-option-control" class="color-range-lines-container" role="group" aria-label=${this.label || f("Color range", { desc: "Accessible label for color range control" })}>
+        ${this.editRangeSize && !this.disabled && this.reverse ? s`<div class="color-range-add-value-container">
+              <button
+                class="color-range-add-value"
+                aria-label=${f("Add color stop", { desc: "Aria label for add color stop button" })}
+                @click=${this._addRangeValue}
+              >
+                <div class="plus-sign"></div>
+              </button>
+            </div>` : s`
+                
+              `}
+        <div
+          class="color-range-lines ${this.editRangeSize && !this.disabled ? "edit-range-size" : ""}"
+        >
+          ${n}
+        </div>
+        ${this.editRangeSize && !this.disabled && !this.reverse ? s`<div class="color-range-add-value-container">
+              <button
+                class="color-range-add-value"
+                aria-label=${f("Add color stop", { desc: "Aria label for add color stop button" })}
+                @click=${this._addRangeValue}
+              >
+                <div class="plus-sign"></div>
+              </button>
+            </div>` : s`
+                
+              `}
+      </div>
+    `;
+	}
+	renderController() {
+		return this.renderRangeValues();
+	}
+};
+// src/components/item-option-color-range/index.ts
+h = g, h.styles = [a(h, "styles", h), c(m)], e([l({
+	type: Array,
+	reflect: !0
+})], g.prototype, "value", void 0), e([l({
+	type: Array,
+	reflect: !0
+})], g.prototype, "default", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), e([l({ type: Boolean })], g.prototype, "percentage", void 0), e([l({
+	type: Boolean,
+	attribute: "no-alpha-channel"
+})], g.prototype, "noAlphaChannel", void 0), e([l({
+	type: Boolean,
+	attribute: "edit-range-size"
+})], g.prototype, "editRangeSize", void 0), e([l({
+	type: Boolean,
+	attribute: "no-values"
+})], g.prototype, "noValues", void 0), e([l({
+	type: Number,
+	reflect: !0,
+	attribute: "minimum-range-size"
+})], g.prototype, "minimumRangeSize", void 0), e([l({
+	type: Boolean,
+	reflect: !0,
+	attribute: "negative-infinity-value"
+})], g.prototype, "negativeInfinityValue", void 0), e([l({
+	type: Boolean,
+	attribute: "read-only-color-picker"
+})], g.prototype, "readOnlyColorPicker", void 0), e([l({ type: Boolean })], g.prototype, "reverse", void 0), e([l({
+	type: Number,
+	reflect: !0
+})], g.prototype, "debounce", void 0), e([l({
+	type: Boolean,
+	reflect: !0,
+	attribute: "live-interactions"
+})], g.prototype, "liveInteractions", void 0), e([l()], g.prototype, "parseValue", void 0), e([l()], g.prototype, "toValue", void 0), e([u(".color-range-line")], g.prototype, "colorRangeLines", void 0), e([u("luzmo-color-picker")], g.prototype, "_colorPickers", void 0), e([d()], g.prototype, "_ranges", void 0), customElements.get("luzmo-item-option-color-range") || customElements.define("luzmo-item-option-color-range", g);
+export { g as t };

package/components/item-option-guidelines/index.cjs

@@ -17,4 +17,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`});const e=require("../types-pVa6ut_v.cjs"),t=require("../item-option-guidelines-Beh0DlG0.cjs");exports.CARTESIAN_GUIDELINE_LINE_TYPES=e.t,exports.DEFAULT_GUIDELINE_COLOR_DARK=e.n,exports.DEFAULT_GUIDELINE_COLOR_LIGHT=e.r,exports.DEFAULT_GUIDELINE_DEBOUNCE=e.i,exports.DEFAULT_GUIDELINE_STYLE=e.a,exports.DEFAULT_NUMERIC_GUIDELINE_VALUE=e.o,exports.GUIDELINE_LINE_TYPES=e.s,exports.GUIDELINE_STYLE_TYPES=e.c,exports.GUIDELINE_WIDTHS=e.l,Object.defineProperty(exports,"LuzmoItemOptionGuidelines",{enumerable:!0,get:function(){return t.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../types-pVa6ut_v.cjs"),t=require("../item-option-guidelines-z9BsGR-l.cjs");exports.CARTESIAN_GUIDELINE_LINE_TYPES=e.t,exports.DEFAULT_GUIDELINE_COLOR_DARK=e.n,exports.DEFAULT_GUIDELINE_COLOR_LIGHT=e.r,exports.DEFAULT_GUIDELINE_DEBOUNCE=e.i,exports.DEFAULT_GUIDELINE_STYLE=e.a,exports.DEFAULT_NUMERIC_GUIDELINE_VALUE=e.o,exports.GUIDELINE_LINE_TYPES=e.s,exports.GUIDELINE_STYLE_TYPES=e.c,exports.GUIDELINE_WIDTHS=e.l,Object.defineProperty(exports,"LuzmoItemOptionGuidelines",{enumerable:!0,get:function(){return t.t}});

package/components/item-option-guidelines/index.d.ts

@@ -7,4 +7,4 @@ declare global {
 export { LuzmoItemOptionGuidelines } from './item-option-guidelines';
 export { CARTESIAN_GUIDELINE_LINE_TYPES, DEFAULT_GUIDELINE_COLOR_DARK, DEFAULT_GUIDELINE_COLOR_LIGHT, DEFAULT_GUIDELINE_DEBOUNCE, DEFAULT_GUIDELINE_STYLE, DEFAULT_NUMERIC_GUIDELINE_VALUE, GUIDELINE_LINE_TYPES, GUIDELINE_STYLE_TYPES, GUIDELINE_WIDTHS } from './types';
 export type { GuidelineLine, GuidelineLineType, Guidelines, GuidelineStyle, GuidelineStyleType, GuidelineWidth } from './types';
-export type { ItemOptionChangedEventDetail } from '../item-option/types';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '../item-option/types';

package/components/item-option-guidelines/index.js

@@ -18,5 +18,5 @@
  * SOFTWARE.
  * */
 import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../types-DJuS9IwG.js";
-import { t as l } from "../item-option-guidelines-DNJevmVD.js";
+import { t as l } from "../item-option-guidelines-k5DwMONo.js";
 export { c as CARTESIAN_GUIDELINE_LINE_TYPES, i as DEFAULT_GUIDELINE_COLOR_DARK, o as DEFAULT_GUIDELINE_COLOR_LIGHT, n as DEFAULT_GUIDELINE_DEBOUNCE, e as DEFAULT_GUIDELINE_STYLE, a as DEFAULT_NUMERIC_GUIDELINE_VALUE, s as GUIDELINE_LINE_TYPES, t as GUIDELINE_STYLE_TYPES, r as GUIDELINE_WIDTHS, l as LuzmoItemOptionGuidelines };

package/components/item-option-guidelines/item-option-guidelines.d.ts

@@ -15,7 +15,9 @@ declare const LocalizedItemOptionBase: (new (...args: any[]) => {
 /**
  * @customElement luzmo-item-option-guidelines
  * @description Editor for chart guideline (reference line) options: add, update, and delete lines, plus shared style and width.
- * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the guidelines value changes.
+ * @fires {CustomEvent<ItemOptionChangedEventDetail>} luzmo-option-changed - Emitted when the guidelines value changes. With `live-interactions`, emitted immediately and carries `interaction` while a line's color is dragged.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-start - With `live-interactions`: a color drag or held key on one line first changed its color, right before that value update. Each line has its own gestures; one that never changes its color emits no lifecycle.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-end - With `live-interactions`: that line's gesture ended, after its last value update.
  * @cssprop --luzmo-item-option-guidelines-rows-gap - Gap between guideline rows.
  * @cssprop --luzmo-item-option-guidelines-row-gap - Gap between controls in a guideline row.
  * @cssprop --luzmo-item-option-guidelines-shared-gap - Gap between the line list and the shared style/width controls.
@@ -42,6 +44,12 @@ export declare class LuzmoItemOptionGuidelines extends LocalizedItemOptionBase {
      * Delay in milliseconds before color and number changes are emitted.
      */
     debounce: number;
+    /**
+     * Emits value updates live, without `debounce`, plus interaction lifecycle events for color drags and held keys.
+     */
+    liveInteractions: boolean;
+    private _colorPickers;
+    private readonly _interaction;
     private _guidelines?;
     private _debounceTimeout?;
     private _lineIds;
@@ -52,6 +60,13 @@ export declare class LuzmoItemOptionGuidelines extends LocalizedItemOptionBase {
     disconnectedCallback(): void;
     private _createLineId;
     private _clearDebounce;
+    /** Ends open color gestures now, keeping their values. Call before removing the element. */
+    endInteraction(): void;
+    private _handleInteractionStart;
+    /** In live mode, ends open line gestures before a line is added or removed, so no gesture follows a moved line. */
+    private _finalizeBeforeStructureChange;
+    private _handleInteractionEnd;
+    private _handleInteractionCancel;
     private _emit;
     private _commit;
     private _allowedTypes;