@luzmo/analytics-components-kit 1.1.1 → 1.3.0

package/components/item-option-guidelines-z9BsGR-l.cjs

@@ -0,0 +1,138 @@
+/*! * 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"),require("./base-CGDNY_7v.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./localized-mixin-EoNvtTBG.cjs"),n=require("./is-same-option-value-Cf6BQcs7.cjs"),r=require("./option-interaction-controller-D0U-CTpZ.cjs"),i=require("./types-pVa6ut_v.cjs"),a=require("./item-option-base-BMy6dWbc.cjs");let o=require("@luzmo/icons");require("@luzmo/lucero/action-button"),require("@luzmo/lucero/button"),require("@luzmo/lucero/icon");let s=require("lit"),c=require("lit/decorators.js"),l=require("@lit/localize"),u=require("lit/directives/repeat.js");require("@luzmo/lucero/action-group"),require("@luzmo/lucero/number-field"),require("@luzmo/lucero/picker"),require("@luzmo/lucero/menu"),require("@luzmo/lucero/color-picker");var d=new Set(i.s),f=new Set(i.c),p=new Set(i.l),m={solid:`0`,dotted:`1,2`,dashed:`3,3`},h=e=>typeof e==`object`&&!!e&&!Array.isArray(e),g=e=>{if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e==`string`&&e.trim()!==``){let t=Number(e);return Number.isFinite(t)?t:void 0}},_=e=>typeof e==`string`&&d.has(e),v=e=>{let t=(e??[]).filter(_);return t.length>0?t:[...i.t]},y=e=>e===`dark-edit`?i.n:i.r,b=e=>structuredClone(e),x=e=>{if(!h(e))return{...i.a};let t=typeof e.type==`string`?e.type.trim().toLowerCase():``,n=f.has(t)?t:m[t]??i.a.type,r=(typeof e.width==`number`?String(e.width):typeof e.width==`string`?e.width.trim():``).replace(/px$/i,``);return{type:n,width:p.has(r)?r:i.a.width}},S=e=>{if(!h(e))return;let t=typeof e.type==`string`?e.type.trim().toLowerCase():``;if(!_(t))return;let n=typeof e.color==`string`&&e.color.trim()!==``?e.color.trim():i.r;return t===`value`?{type:t,color:n,value:g(e.value)??0}:{type:t,color:n}},C=e=>{let t=Array.isArray(e)?{lines:e}:e;if(!h(t)||!(Array.isArray(t.lines)||h(t.lines)))return;let n=Array.isArray(t.lines)?t.lines:[t.lines],r=n.map(S).filter(e=>e!==void 0);if(!(n.length>0&&r.length===0))return{lines:r,style:x(t.style)}},w=(e,t)=>e===`value`?{type:e,color:t,value:0}:{type:e,color:t},T=(e,t,n)=>{let r=v(t)[0],a=w(r,n);if(!e)return{lines:[a],style:{...i.a}};let o=b(e);return o.lines.push(a),o},E=(e,t)=>{let n=b(e);return n.lines.splice(t,1),n},D=(e,t,n)=>{let r=b(e),i=r.lines[t];return i&&(r.lines[t]=w(n,i.color)),r},O=(e,t,n)=>{let r=b(e);return r.lines[t]&&(r.lines[t].color=n),r},k=(e,t,n)=>{let r=b(e);return r.lines[t]&&(r.lines[t].value=n),r},A=(e,t)=>{let n=b(e);return n.style.type=t,n},j=(e,t)=>{let n=b(e);return n.style.width=t,n},M=`:host{display:block;container-type:inline-size}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.guidelines{gap:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));flex-direction:column;inline-size:100%;display:flex}.guideline-rows{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));flex-direction:column;display:flex}.guideline-row{align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));grid-template-columns:auto minmax(0,max-content) minmax(6rem,1fr) auto;display:grid}.guideline-value{inline-size:100%}@container (width<=20rem){.guideline-row{grid-template-columns:auto minmax(0,1fr) auto}.guideline-value{grid-column:2}.guideline-value-spacer{display:none}}.guideline-value-spacer{min-inline-size:0;min-block-size:var(--luzmo-component-height)}.guidelines-add{justify-content:flex-end;display:flex}.guideline-shared{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));border-block-start:var(--luzmo-border-width) solid var(--luzmo-border-color);flex-direction:column;padding-block-start:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));display:flex}.guideline-shared-row{justify-content:space-between;align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));flex-wrap:wrap;display:flex}.guideline-shared-label{flex-shrink:0}.guideline-width{min-inline-size:8rem}:host{--item-option-guidelines-rows-gap:var(--luzmo-spacing-2);--item-option-guidelines-row-gap:var(--luzmo-spacing-2);--item-option-guidelines-shared-gap:var(--luzmo-spacing-3)}:host([size=s]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-1);--item-option-guidelines-row-gap:var(--luzmo-spacing-1);--item-option-guidelines-shared-gap:var(--luzmo-spacing-2)}:host([size=l]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-3);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}:host([size=xl]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-4);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}`,N=0,P=6,F=10**-6,I={maximumFractionDigits:P},L=t.t(a.t),R=class extends L{constructor(...e){super(...e),this.lineTypes=[],this.lineTypeLabels={},this.defaultColor=y(),this.debounce=200,this.liveInteractions=!1,this._interaction=new r.t(this,n.t),this._lineIds=[],this._lineIdCounter=0,this._styleLabelId=`luzmo-item-option-guidelines-style-${++N}`,this._widthLabelId=`luzmo-item-option-guidelines-width-${N}`}static get styles(){return[...super.styles,(0,s.unsafeCSS)(M)]}willUpdate(e){super.willUpdate(e),e.has(`value`)&&(this._clearDebounce(),this._guidelines=C(this.value),this._lineIds=(this._guidelines?.lines??[]).map((e,t)=>this._lineIds[t]??this._createLineId())),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction())}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_createLineId(){return`${this._styleLabelId}-line-${++this._lineIdCounter}`}_clearDebounce(){clearTimeout(this._debounceTimeout),this._debounceTimeout=void 0}endInteraction(){for(let e of this._colorPickers??[])e.endInteraction?.();this._interaction.endAll()}_handleInteractionStart(e,t){this.liveInteractions&&this._interaction.start(t.currentTarget,t.detail,this._guidelines?.lines[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)}_emit(e,t=!1,n=this,r){let i=t=>{this._debounceTimeout=void 0,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:t?{value:e,interaction:t}:{value:e}}))};this._clearDebounce(),this.liveInteractions?this._interaction.update(n,e,i,r):t||this.debounce<=0?i():this._debounceTimeout=setTimeout(i,this.debounce)}_commit(e,t=!1,n,r){this._guidelines=e,this._emit(e,t,n,r)}_allowedTypes(){return v(this.lineTypes)}_typeLabel(e){if(this.lineTypeLabels[e])return this.lineTypeLabels[e];switch(e){case`value`:return(0,l.msg)(`Value`,{id:`item-option-guidelines-type-value`,desc:`Guideline type: manual numeric value`});case`average`:return(0,l.msg)(`Average`,{id:`item-option-guidelines-type-average`,desc:`Guideline type: average of the plotted data`});case`median`:return(0,l.msg)(`Median`,{id:`item-option-guidelines-type-median`,desc:`Guideline type: median of the plotted data`});case`average open`:return(0,l.msg)(`Average open`,{id:`item-option-guidelines-type-average-open`,desc:`Guideline type: average of open values`});case`average close`:return(0,l.msg)(`Average close`,{id:`item-option-guidelines-type-average-close`,desc:`Guideline type: average of close values`})}}_typeValues(){return Object.fromEntries(this._allowedTypes().map(e=>[e,this._typeLabel(e)]))}_widthValues(){return{1:(0,l.msg)(`Thin`,{id:`item-option-guidelines-width-thin`,desc:`Guideline width: thin`}),2:(0,l.msg)(`Medium`,{id:`item-option-guidelines-width-medium`,desc:`Guideline width: medium`}),3:(0,l.msg)(`Thick`,{id:`item-option-guidelines-width-thick`,desc:`Guideline width: thick`})}}_styleOptions(){return[{key:`0`,icon:o.luzmoBorderSolid,label:(0,l.msg)(`Solid`,{id:`item-option-guidelines-style-solid`,desc:`Guideline line style: solid`})},{key:`1,2`,icon:o.luzmoBorderDotted,label:(0,l.msg)(`Dotted`,{id:`item-option-guidelines-style-dotted`,desc:`Guideline line style: dotted`})},{key:`3,3`,icon:o.luzmoBorderDashed,label:(0,l.msg)(`Dashed`,{id:`item-option-guidelines-style-dashed`,desc:`Guideline line style: dashed`})}]}_handleAdd(){this.disabled||(this._finalizeBeforeStructureChange(),this._lineIds=[...this._lineIds,this._createLineId()],this._commit(T(this._guidelines,this.lineTypes,this.defaultColor),!0))}_handleRemove(e){!this.disabled&&this._guidelines&&(this._finalizeBeforeStructureChange(),this._lineIds=this._lineIds.filter((t,n)=>n!==e),this._commit(E(this._guidelines,e),!0))}_handleTypeChange(e,t){!this.disabled&&this._guidelines&&_(t.detail)&&this._commit(D(this._guidelines,e,t.detail),!0)}_handleColorChange(e,t){if(this.disabled||!this._guidelines)return;let n=t.target.color;typeof n==`string`&&this._commit(O(this._guidelines,e,n),!1,t.currentTarget??void 0,n)}_handleValueChange(e,t){if(this.disabled||!this._guidelines)return;let n=t.target.value;typeof n==`number`&&Number.isFinite(n)&&this._commit(k(this._guidelines,e,n))}_handleStyleChange(e){if(this.disabled||!this._guidelines)return;let t=e.target.selected?.[0];(t===`0`||t===`1,2`||t===`3,3`)&&this._commit(A(this._guidelines,t),!0)}_handleWidthChange(e){if(this.disabled||!this._guidelines)return;let t=e.detail,n=e.target.value,r=t===`1`||t===`2`||t===`3`?t:n;(r===`1`||r===`2`||r===`3`)&&this._commit(j(this._guidelines,r),!0)}_lineKey(e){return this._lineIds[e]}_renderLine(e,t){let n=t+1,r=(0,l.msg)(l.str`Guideline ${n} color`,{id:`item-option-guidelines-color`,desc:`Accessible name for one guideline color picker`}),i=(0,l.msg)(l.str`Guideline ${n} type`,{id:`item-option-guidelines-type`,desc:`Accessible name for one guideline type picker`}),a=(0,l.msg)(l.str`Guideline ${n} value`,{id:`item-option-guidelines-value`,desc:`Accessible name for one manual guideline value`}),c=(0,l.msg)(l.str`Remove guideline ${n}`,{id:`item-option-guidelines-remove`,desc:`Aria label for removing one guideline row`});return s.html`
+      <div class="guideline-row">
+        <luzmo-color-picker
+          class="guideline-color"
+          .color=${e.color}
+          .size=${this.size}
+          rounding="full"
+          shape="circle"
+          .label=${r}
+          ?disabled=${this.disabled}
+          @change=${e=>this._handleColorChange(t,e)}
+          @luzmo-interaction-start=${e=>this._handleInteractionStart(t,e)}
+          @luzmo-interaction-end=${this._handleInteractionEnd}
+          @luzmo-interaction-cancel=${this._handleInteractionCancel}
+        ></luzmo-color-picker>
+        <luzmo-picker
+          class="guideline-type"
+          .label=${i}
+          .value=${e.type}
+          .size=${this.size}
+          variant="highlight"
+          ?disabled=${this.disabled}
+          @change=${e=>this._handleTypeChange(t,e)}
+        >
+          ${Object.entries(this._typeValues()).map(([e,t])=>s.html`
+              <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+            `)}
+        </luzmo-picker>
+        ${e.type===`value`?s.html`
+                <luzmo-number-field
+                  class="guideline-value"
+                  .value=${e.value??0}
+                  .size=${this.size}
+                  .step=${F}
+                  .formatOptions=${I}
+                  .label=${a}
+                  ?disabled=${this.disabled}
+                  @change=${e=>this._handleValueChange(t,e)}
+                ></luzmo-number-field>
+              `:s.html`
+                <div class="guideline-value-spacer"></div>
+              `}
+        <luzmo-action-button
+          class="guideline-remove"
+          quiet
+          .size=${this.size}
+          .label=${c}
+          ?disabled=${this.disabled}
+          @click=${()=>this._handleRemove(t)}
+        >
+          <luzmo-icon slot="icon" .size=${this.size} .icon=${o.luzmoTrashOutline}></luzmo-icon>
+        </luzmo-action-button>
+      </div>
+    `}_renderSharedStyle(e){return s.html`
+      <div class="guideline-shared">
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._styleLabelId}>
+            ${(0,l.msg)(`Style`,{id:`item-option-guidelines-style-label`,desc:`Label for shared guideline dash style`})}
+          </span>
+          <luzmo-action-group
+            class="guideline-style"
+            compact
+            quiet
+            emphasized
+            selects="single"
+            .size=${this.size}
+            .selected=${[e.style.type]}
+            aria-labelledby=${this._styleLabelId}
+            ?disabled=${this.disabled}
+            @change=${this._handleStyleChange}
+          >
+            ${this._styleOptions().map(e=>s.html`
+                <luzmo-action-button value=${e.key} ?disabled=${this.disabled} .label=${e.label}>
+                  <luzmo-icon slot="icon" .size=${this.size} .icon=${e.icon}></luzmo-icon>
+                </luzmo-action-button>
+              `)}
+          </luzmo-action-group>
+        </div>
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._widthLabelId}>
+            ${(0,l.msg)(`Width`,{id:`item-option-guidelines-width-label`,desc:`Label for shared guideline width`})}
+          </span>
+          <luzmo-picker
+            class="guideline-width"
+            aria-labelledby=${this._widthLabelId}
+            .value=${e.style.width}
+            .size=${this.size}
+            variant="highlight"
+            ?disabled=${this.disabled}
+            @change=${this._handleWidthChange}
+          >
+            ${Object.entries(this._widthValues()).map(([e,t])=>s.html`
+                <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+              `)}
+          </luzmo-picker>
+        </div>
+      </div>
+    `}renderController(){let e=this._guidelines?.lines??[],t=this.label||(0,l.msg)(`Guidelines`,{id:`item-option-guidelines-group`,desc:`Accessible name for the guidelines editor`});return s.html`
+      <div id="luzmo-item-option-control" class="guidelines" role="group" aria-label=${t}>
+        ${e.length>0?s.html`
+                <div class="guideline-rows">
+                  ${(0,u.repeat)(e,(e,t)=>this._lineKey(t),(e,t)=>this._renderLine(e,t))}
+                </div>
+              `:s.nothing}
+        <div class="guidelines-add">
+          <luzmo-button
+            class="add-guideline"
+            treatment="outline"
+            .size=${this.size}
+            ?disabled=${this.disabled}
+            @click=${this._handleAdd}
+          >
+            <luzmo-icon slot="icon" .icon=${o.luzmoPlus} .size=${this.size}></luzmo-icon>
+            ${(0,l.msg)(`Add guideline`,{id:`item-option-guidelines-add`,desc:`Button that adds a chart guideline`})}
+          </luzmo-button>
+        </div>
+        ${this._guidelines&&e.length>0?this._renderSharedStyle(this._guidelines):s.nothing}
+      </div>
+    `}};e.t([(0,c.property)({attribute:!1})],R.prototype,`value`,void 0),e.t([(0,c.property)({attribute:!1})],R.prototype,`lineTypes`,void 0),e.t([(0,c.property)({attribute:!1})],R.prototype,`lineTypeLabels`,void 0),e.t([(0,c.property)({type:String,reflect:!0,attribute:`default-color`})],R.prototype,`defaultColor`,void 0),e.t([(0,c.property)({type:Number,reflect:!0})],R.prototype,`debounce`,void 0),e.t([(0,c.property)({type:Boolean,reflect:!0,attribute:`live-interactions`})],R.prototype,`liveInteractions`,void 0),e.t([(0,c.queryAll)(`luzmo-color-picker`)],R.prototype,`_colorPickers`,void 0),e.t([(0,c.state)()],R.prototype,`_guidelines`,void 0),R=e.t([(0,l.localized)()],R),typeof customElements<`u`&&!customElements.get(`luzmo-item-option-guidelines`)&&customElements.define(`luzmo-item-option-guidelines`,R),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return R}});

package/components/item-option-panel/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("../item-option-panel-Dl3aYBNe.cjs");exports.LuzmoItemOptionPanel=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-panel-CU51qvgV.cjs");exports.LuzmoItemOptionPanel=e.t;

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

@@ -5,4 +5,4 @@ declare global {
     }
 }
 export { LuzmoItemOptionPanel } from './item-option-panel';
-export type { ItemOptionsChangedEventDetail } from '../item-option/types';
+export type { ItemOptionInteraction, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '../item-option/types';

package/components/item-option-panel/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 LuzmoItemOptionPanel } from "../item-option-panel-DHdnisRb.js";
+export { t as LuzmoItemOptionPanel } from "../item-option-panel-BLXWIbjX.js";

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

@@ -6,7 +6,10 @@ import { ElementSize, LuzmoElement } from '../../utils/base';
 import './../item-option';
 /**
  * @customElement luzmo-item-option-panel
- * @fires {CustomEvent<ItemOptionsChangedEventDetail>} luzmo-options-changed - Announces that the `options` of the element have changed
+ * @fires {CustomEvent<ItemOptionsChangedEventDetail>} luzmo-options-changed - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-start - With `live-interactions`: bubbles from the option whose drag or held key first changed its value, right before that options update; `detail.optionKey` names it.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-end - With `live-interactions`: bubbles from the option whose gesture ended, after its last options update.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-cancel - With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted.
  */
 export declare class LuzmoItemOptionPanel extends LuzmoElement {
     static styles: import("lit").CSSResult;
@@ -57,6 +60,11 @@ export declare class LuzmoItemOptionPanel extends LuzmoElement {
      * The auth token of the databroker
      */
     authToken?: string;
+    /**
+     * Emits options updates live, without the controls' debounce, plus `luzmo-option-interaction-*` events
+     * around drags and held keys. Off by default.
+     */
+    liveInteractions: boolean;
     private _itemTypeLoaded?;
     private _languageLoaded?;
     private _optionsConfiguration;
@@ -67,6 +75,9 @@ export declare class LuzmoItemOptionPanel extends LuzmoElement {
     private _isCustomOptionsConfiguration;
     private renderAllGroups;
     private renderGroup;
+    /** Ends the open gestures of every option now, keeping their values. Call before removing or rebinding the panel. */
+    endInteraction(): void;
+    private _getLatestOptions;
     private changedOptions;
     private renderOptionControl;
     private renderDivider;

package/components/{item-option-panel-DHdnisRb.js → item-option-panel-BLXWIbjX.js}

@@ -20,7 +20,7 @@
 import "./tokens-6HmQYnEP.js";
 import { i as e } from "./base-rAte-QzM.js";
 import { t } from "./decorate-B2TzfnLZ.js";
-import { i as n, n as r, r as i } from "./item-option-Cgx3c08E.js";
+import { i as n, n as r, r as i } from "./item-option-DKLRnicU.js";
 import { html as a, unsafeCSS as o } from "lit";
 import { property as s } from "lit/decorators.js";
 import "@luzmo/lucero/divider";
@@ -50,7 +50,7 @@ var l = ":host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-fon
 				this.customOptionsConfiguration,
 				this.customTranslations
 			]
-		}), this.language = "en", this.options = {}, this.slots = [], this.size = "m", this._optionsConfiguration = [], this._translations = {}, this._hasCustomTranslationsFile = !1, this.renderAllGroups = (e) => {
+		}), this.language = "en", this.options = {}, this.slots = [], this.size = "m", this.liveInteractions = !1, this._optionsConfiguration = [], this._translations = {}, this._hasCustomTranslationsFile = !1, this.renderAllGroups = (e) => {
 			if (!Array.isArray(e)) return a`
         
       `;
@@ -99,13 +99,16 @@ var l = ":host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-fon
 			return a`<luzmo-accordion-item label=${n} ?open=${e.open}>
       ${t(e.children)}
     </luzmo-accordion-item>`;
-		}, this.changedOptions = (e) => {
-			let t = e?.detail?.options;
+		}, this._getLatestOptions = () => this.options ?? {}, this.changedOptions = (e) => {
+			let t = e?.detail?.options, n = e?.detail?.interaction;
 			this.options = e?.detail?.options, e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("luzmo-options-changed", {
 				bubbles: !0,
 				composed: !0,
 				cancelable: !0,
-				detail: { options: t }
+				detail: n ? {
+					options: t,
+					interaction: n
+				} : { options: t }
 			}));
 		}, this.renderOptionControl = (e) => {
 			let t = this._isCustomOptionsConfiguration, n = t ? r(e, this.customOptionsConfiguration ?? [], !0) : void 0, i = t ? this._getOptionTranslation(e) : this._translationOverrides;
@@ -114,6 +117,7 @@ var l = ":host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-fon
       .itemType=${t ? void 0 : this.itemType}
       .optionKey=${e}
       .options=${this.options}
+      .latestOptions=${this._getLatestOptions}
       .customOptionConfiguration=${n}
       .customTranslations=${i}
       .slots=${this.slots}
@@ -123,12 +127,16 @@ var l = ":host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-fon
       .apiUrl=${this.apiUrl}
       .authKey=${this.authKey}
       .authToken=${this.authToken}
+      ?live-interactions=${this.liveInteractions}
       @luzmo-options-changed=${this.changedOptions}
     ></luzmo-item-option>`;
 		}, this.renderDivider = () => a`
       <luzmo-divider></luzmo-divider>
     `;
 	}
+	endInteraction() {
+		for (let e of this.renderRoot?.querySelectorAll("luzmo-item-option") ?? []) e.endInteraction?.();
+	}
 	render() {
 		return this._loadItemConfig.render({
 			pending: () => a`
@@ -179,5 +187,9 @@ u = d, u.styles = o(l), t([s({
 	type: String,
 	attribute: "auth-token",
 	reflect: !0
-})], d.prototype, "authToken", void 0), customElements.get("luzmo-item-option-panel") || customElements.define("luzmo-item-option-panel", d);
+})], d.prototype, "authToken", void 0), t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "live-interactions"
+})], d.prototype, "liveInteractions", void 0), customElements.get("luzmo-item-option-panel") || customElements.define("luzmo-item-option-panel", d);
 export { d as t };

package/components/{item-option-panel-Dl3aYBNe.cjs → item-option-panel-CU51qvgV.cjs}

@@ -17,7 +17,7 @@
  * 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("./base-CGDNY_7v.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./item-option-CqGDFdPj.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/divider");let a=require("@lit/task");require("@luzmo/lucero/accordion");var o=`:host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-font-size))}:host luzmo-divider{margin:var(--luzmo-item-option-panel-divider-vertical-margin,calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))) 0;display:block}:host luzmo-item-option{margin:var(--luzmo-item-option-divider-vertical-margin,var(--luzmo-spacing-4)) 0;display:block}:host([size=s]){font-size:var(--luzmo-item-option-panel-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-panel-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-panel-font-size-xl,var(--luzmo-font-size-xl))}`,s,c=class extends e.i{constructor(...e){super(...e),this._loadItemConfig=new a.Task(this,{task:async([e,t,r,i])=>{let a=this._getTranslationOverrides(i),o=this._getTranslationsFile(i),s=this._hasCustomTranslationsFile;if(this._translationOverrides=a??o?.options,this._groupTranslationOverrides=a,this._hasCustomTranslationsFile=!!o,r)return this._isCustomOptionsConfiguration=!0,this._optionsConfiguration=r,this._translations=o??{},this._itemTypeLoaded=void 0,this._languageLoaded=void 0,{config:this._optionsConfiguration};if(e){let r=e!==this._itemTypeLoaded,i=e!==this._itemTypeLoaded||t!==this._languageLoaded||!o&&s;if(r&&(this._optionsConfiguration=await n.r(e)??[],this._itemTypeLoaded=e),o)this._translations=o,this._languageLoaded=t;else if(i){let r=t??`en`;this._translations=await n.i(e,r,!0)??{},this._languageLoaded=t}this._isCustomOptionsConfiguration=!1}else this._optionsConfiguration=[],this._translations=o??{};return{config:this._optionsConfiguration}},args:()=>[this.itemType,this.language,this.customOptionsConfiguration,this.customTranslations]}),this.language=`en`,this.options={},this.slots=[],this.size=`m`,this._optionsConfiguration=[],this._translations={},this._hasCustomTranslationsFile=!1,this.renderAllGroups=e=>{if(!Array.isArray(e))return r.html`
+require("./tokens-BWMfo_w4.cjs");const e=require("./base-CGDNY_7v.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./item-option-DpLdospV.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/divider");let a=require("@lit/task");require("@luzmo/lucero/accordion");var o=`:host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-font-size))}:host luzmo-divider{margin:var(--luzmo-item-option-panel-divider-vertical-margin,calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))) 0;display:block}:host luzmo-item-option{margin:var(--luzmo-item-option-divider-vertical-margin,var(--luzmo-spacing-4)) 0;display:block}:host([size=s]){font-size:var(--luzmo-item-option-panel-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-panel-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-panel-font-size-xl,var(--luzmo-font-size-xl))}`,s,c=class extends e.i{constructor(...e){super(...e),this._loadItemConfig=new a.Task(this,{task:async([e,t,r,i])=>{let a=this._getTranslationOverrides(i),o=this._getTranslationsFile(i),s=this._hasCustomTranslationsFile;if(this._translationOverrides=a??o?.options,this._groupTranslationOverrides=a,this._hasCustomTranslationsFile=!!o,r)return this._isCustomOptionsConfiguration=!0,this._optionsConfiguration=r,this._translations=o??{},this._itemTypeLoaded=void 0,this._languageLoaded=void 0,{config:this._optionsConfiguration};if(e){let r=e!==this._itemTypeLoaded,i=e!==this._itemTypeLoaded||t!==this._languageLoaded||!o&&s;if(r&&(this._optionsConfiguration=await n.r(e)??[],this._itemTypeLoaded=e),o)this._translations=o,this._languageLoaded=t;else if(i){let r=t??`en`;this._translations=await n.i(e,r,!0)??{},this._languageLoaded=t}this._isCustomOptionsConfiguration=!1}else this._optionsConfiguration=[],this._translations=o??{};return{config:this._optionsConfiguration}},args:()=>[this.itemType,this.language,this.customOptionsConfiguration,this.customTranslations]}),this.language=`en`,this.options={},this.slots=[],this.size=`m`,this.liveInteractions=!1,this._optionsConfiguration=[],this._translations={},this._hasCustomTranslationsFile=!1,this.renderAllGroups=e=>{if(!Array.isArray(e))return r.html`
         
       `;let t=e?.map(e=>{if(e?.children)return this.renderGroup(e)});return e&&e.length>0?r.html`<luzmo-accordion
           variant="highlight"
@@ -43,11 +43,12 @@ require("./tokens-BWMfo_w4.cjs");const e=require("./base-CGDNY_7v.cjs"),t=requir
             >${this.renderGroup(e)}</luzmo-accordion
           >`}),n=e.key?this._groupTranslationOverrides?.[e.key]?.label??this._translations.groups?.[e.key]?.label??e.label??e.key:e.label??``;return r.html`<luzmo-accordion-item label=${n} ?open=${e.open}>
       ${t(e.children)}
-    </luzmo-accordion-item>`},this.changedOptions=e=>{let t=e?.detail?.options;this.options=e?.detail?.options,e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`luzmo-options-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{options:t}}))},this.renderOptionControl=e=>{let t=this._isCustomOptionsConfiguration,i=t?n.n(e,this.customOptionsConfiguration??[],!0):void 0,a=t?this._getOptionTranslation(e):this._translationOverrides;return r.html`<luzmo-item-option
+    </luzmo-accordion-item>`},this._getLatestOptions=()=>this.options??{},this.changedOptions=e=>{let t=e?.detail?.options,n=e?.detail?.interaction;this.options=e?.detail?.options,e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`luzmo-options-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:n?{options:t,interaction:n}:{options:t}}))},this.renderOptionControl=e=>{let t=this._isCustomOptionsConfiguration,i=t?n.n(e,this.customOptionsConfiguration??[],!0):void 0,a=t?this._getOptionTranslation(e):this._translationOverrides;return r.html`<luzmo-item-option
       class="control"
       .itemType=${t?void 0:this.itemType}
       .optionKey=${e}
       .options=${this.options}
+      .latestOptions=${this._getLatestOptions}
       .customOptionConfiguration=${i}
       .customTranslations=${a}
       .slots=${this.slots}
@@ -57,11 +58,12 @@ require("./tokens-BWMfo_w4.cjs");const e=require("./base-CGDNY_7v.cjs"),t=requir
       .apiUrl=${this.apiUrl}
       .authKey=${this.authKey}
       .authToken=${this.authToken}
+      ?live-interactions=${this.liveInteractions}
       @luzmo-options-changed=${this.changedOptions}
     ></luzmo-item-option>`},this.renderDivider=()=>r.html`
       <luzmo-divider></luzmo-divider>
-    `}render(){return this._loadItemConfig.render({pending:()=>r.html`
+    `}endInteraction(){for(let e of this.renderRoot?.querySelectorAll(`luzmo-item-option`)??[])e.endInteraction?.()}render(){return this._loadItemConfig.render({pending:()=>r.html`
           <p role="status">Loading...</p>
         `,complete:e=>this.renderAllGroups(e.config),error:e=>(console.error(e),r.html`
           
-        `)})}_getOptionTranslation(e){return this._translationOverrides?.[e]??this._translations.options?.[e]}_getTranslationsFile(e){if(e&&typeof e==`object`&&(`groups`in e||`options`in e))return e}_getTranslationOverrides(e){if(e&&typeof e==`object`&&!(`groups`in e||`options`in e))return e}};s=c,s.styles=(0,r.unsafeCSS)(o),t.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`language`,void 0),t.t([(0,i.property)({type:String,reflect:!0,attribute:`item-type`})],c.prototype,`itemType`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`options`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`slots`,void 0),t.t([(0,i.property)({type:Object,reflect:!1})],c.prototype,`customOptionsConfiguration`,void 0),t.t([(0,i.property)({type:Object,reflect:!1})],c.prototype,`customTranslations`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`theme`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`size`,void 0),t.t([(0,i.property)({type:String,attribute:`api-url`,reflect:!0})],c.prototype,`apiUrl`,void 0),t.t([(0,i.property)({type:String,attribute:`auth-key`,reflect:!0})],c.prototype,`authKey`,void 0),t.t([(0,i.property)({type:String,attribute:`auth-token`,reflect:!0})],c.prototype,`authToken`,void 0),customElements.get(`luzmo-item-option-panel`)||customElements.define(`luzmo-item-option-panel`,c),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
+        `)})}_getOptionTranslation(e){return this._translationOverrides?.[e]??this._translations.options?.[e]}_getTranslationsFile(e){if(e&&typeof e==`object`&&(`groups`in e||`options`in e))return e}_getTranslationOverrides(e){if(e&&typeof e==`object`&&!(`groups`in e||`options`in e))return e}};s=c,s.styles=(0,r.unsafeCSS)(o),t.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`language`,void 0),t.t([(0,i.property)({type:String,reflect:!0,attribute:`item-type`})],c.prototype,`itemType`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`options`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`slots`,void 0),t.t([(0,i.property)({type:Object,reflect:!1})],c.prototype,`customOptionsConfiguration`,void 0),t.t([(0,i.property)({type:Object,reflect:!1})],c.prototype,`customTranslations`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`theme`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`size`,void 0),t.t([(0,i.property)({type:String,attribute:`api-url`,reflect:!0})],c.prototype,`apiUrl`,void 0),t.t([(0,i.property)({type:String,attribute:`auth-key`,reflect:!0})],c.prototype,`authKey`,void 0),t.t([(0,i.property)({type:String,attribute:`auth-token`,reflect:!0})],c.prototype,`authToken`,void 0),t.t([(0,i.property)({type:Boolean,reflect:!0,attribute:`live-interactions`})],c.prototype,`liveInteractions`,void 0),customElements.get(`luzmo-item-option-panel`)||customElements.define(`luzmo-item-option-panel`,c),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});

package/components/item-option-slider/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("../item-option-slider-CyWKWr5D.cjs");exports.LuzmoItemOptionSlider=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-slider-Kz2eFBql.cjs");exports.LuzmoItemOptionSlider=e.t;

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

@@ -5,4 +5,4 @@ declare global {
     }
 }
 export { LuzmoItemOptionSlider } from './item-option-slider';
-export type { ItemOptionChangedEventDetail } from '../item-option/types';
+export type { ItemOptionChangedEventDetail, ItemOptionInteraction, ItemOptionInteractionEventDetail } from '../item-option/types';

package/components/item-option-slider/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 LuzmoItemOptionSlider } from "../item-option-slider-Bo5vs6nr.js";
+export { t as LuzmoItemOptionSlider } from "../item-option-slider-BKtJfL3D.js";

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

@@ -1,9 +1,12 @@
 import '@luzmo/lucero/slider';
-import { type CSSResultArray } from 'lit';
+import { type CSSResultArray, type PropertyValues } from 'lit';
 import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
 /**
  * @customElement luzmo-item-option-slider
- * @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 on every drag or key step and carries `interaction` inside a gesture.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-start - With `live-interactions`: a drag or held key first changed the value, right before that value update. A press that never changes the value emits no lifecycle.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-end - With `live-interactions`: the gesture ended, after its last value update. `changed` is false when the value is back at its start.
+ * @fires {CustomEvent<ItemOptionInteractionEventDetail>} luzmo-option-interaction-cancel - With `live-interactions`: the pointer was cancelled and the slider reverted to its start value.
  */
 export declare class LuzmoItemOptionSlider extends LuzmoItemOptionBase {
     static get styles(): CSSResultArray;
@@ -19,15 +22,25 @@ export declare class LuzmoItemOptionSlider extends LuzmoItemOptionBase {
     step: number;
     /** Delay in milliseconds before the change event is emitted after the user stops interacting. */
     debounce: number;
+    /** Emits value updates live, without `debounce`, plus interaction lifecycle events for drags and held keys. */
+    liveInteractions: boolean;
     /** Optional transform applied to the stored value before it is displayed in the control. */
     parseValue?: (value?: string | number | any) => number;
     /** Optional transform applied to the control's value before it is emitted in the change event. */
     toValue?: (value?: number) => string | number | any;
     private _slider;
+    private readonly _interaction;
     private _debounceTimeout;
     private _lastEmittedSliderValue?;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     disconnectedCallback(): void;
+    private _clearDebounce;
+    /** Ends an open drag or held-key gesture now, keeping its value. Call before removing the element. */
+    endInteraction(): void;
     private _emitOptionChanged;
+    private _handleInteractionStart;
+    private _handleInteractionEnd;
+    private _handleInteractionCancel;
     private _handleEvent;
     protected renderController(): import("lit-html").TemplateResult<1>;
 }

package/components/item-option-slider-BKtJfL3D.js

@@ -0,0 +1,119 @@
+/*! * 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 "./option-interaction-controller-B8S1N_Oo.js";
+import { t as n } from "./item-option-base-BfHciede.js";
+import { html as r, unsafeCSS as i } from "lit";
+import { property as a, query as o } from "lit/decorators.js";
+import "@luzmo/lucero/slider";
+// src/components/item-option-slider/item-option-slider.module.scss?inline
+var s = ":host{overflow:visible}luzmo-slider{contain:layout}", c = class extends n {
+	constructor(...e) {
+		super(...e), this.value = 0, this.default = 0, this.min = 0, this.max = 100, this.step = 100, this.debounce = 200, this.liveInteractions = !1, this._interaction = new t(this), this._debounceTimeout = null;
+	}
+	static get styles() {
+		return [...super.styles, i(s)];
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("liveInteractions") && (this.liveInteractions ? this._clearDebounce() : this.endInteraction());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._clearDebounce();
+	}
+	_clearDebounce() {
+		this._debounceTimeout &&= (clearTimeout(this._debounceTimeout), null);
+	}
+	endInteraction() {
+		this._slider?.endInteraction?.(), this._interaction.endAll();
+	}
+	_emitOptionChanged(e, t) {
+		let n = typeof this.toValue == "function" ? this.toValue(e) : e;
+		this._lastEmittedSliderValue = e, this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: t ? {
+				value: n,
+				interaction: t
+			} : { value: n }
+		}));
+	}
+	_handleInteractionStart(e) {
+		this.liveInteractions && this._interaction.start(e.currentTarget, e.detail, this._slider.value);
+	}
+	_handleInteractionEnd(e) {
+		this._interaction.end(e.currentTarget, e.detail);
+	}
+	_handleInteractionCancel(e) {
+		this._interaction.cancel(e.currentTarget, e.detail);
+	}
+	_handleEvent(e) {
+		let t = this._slider.value;
+		this.liveInteractions ? this._interaction.update(e.currentTarget, t, (e) => this._emitOptionChanged(t, e)) : (e.type !== "change" || this._debounceTimeout || !Object.is(t, this._lastEmittedSliderValue)) && (this._debounceTimeout &&= (clearTimeout(this._debounceTimeout), null), this.debounce > 0 ? this._debounceTimeout = setTimeout(() => {
+			this._debounceTimeout = null, this._emitOptionChanged(t);
+		}, this.debounce) : this._emitOptionChanged(t));
+	}
+	renderController() {
+		let e = typeof this.parseValue == "function" ? this.parseValue(this.value) : this.value, t = typeof this.parseValue == "function" ? this.parseValue(this.default) : this.default;
+		return r`
+      <luzmo-slider
+        id="luzmo-item-option-control"
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .value=${e ?? t}
+        .step=${this.step}
+        .size=${this.size}
+        .disabled=${this.disabled}
+        @input=${this._handleEvent}
+        @change=${this._handleEvent}
+        @luzmo-interaction-start=${this._handleInteractionStart}
+        @luzmo-interaction-end=${this._handleInteractionEnd}
+        @luzmo-interaction-cancel=${this._handleInteractionCancel}
+      ></luzmo-slider>
+    `;
+	}
+};
+// src/components/item-option-slider/index.ts
+e([a({
+	type: Number,
+	reflect: !0
+})], c.prototype, "value", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], c.prototype, "default", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], c.prototype, "min", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], c.prototype, "max", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], c.prototype, "step", void 0), e([a({
+	type: Number,
+	reflect: !0
+})], c.prototype, "debounce", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "live-interactions"
+})], c.prototype, "liveInteractions", void 0), e([a()], c.prototype, "parseValue", void 0), e([a()], c.prototype, "toValue", void 0), e([o("luzmo-slider")], c.prototype, "_slider", void 0), customElements.get("luzmo-item-option-slider") || customElements.define("luzmo-item-option-slider", c);
+export { c as t };

package/components/item-option-slider-Kz2eFBql.cjs

@@ -0,0 +1,36 @@
+/*! * 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("./option-interaction-controller-D0U-CTpZ.cjs"),n=require("./item-option-base-BMy6dWbc.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/slider");var a=`:host{overflow:visible}luzmo-slider{contain:layout}`,o=class extends n.t{constructor(...e){super(...e),this.value=0,this.default=0,this.min=0,this.max=100,this.step=100,this.debounce=200,this.liveInteractions=!1,this._interaction=new t.t(this),this._debounceTimeout=null}static get styles(){return[...super.styles,(0,r.unsafeCSS)(a)]}willUpdate(e){super.willUpdate(e),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction())}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_clearDebounce(){this._debounceTimeout&&=(clearTimeout(this._debounceTimeout),null)}endInteraction(){this._slider?.endInteraction?.(),this._interaction.endAll()}_emitOptionChanged(e,t){let n=typeof this.toValue==`function`?this.toValue(e):e;this._lastEmittedSliderValue=e,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:t?{value:n,interaction:t}:{value:n}}))}_handleInteractionStart(e){this.liveInteractions&&this._interaction.start(e.currentTarget,e.detail,this._slider.value)}_handleInteractionEnd(e){this._interaction.end(e.currentTarget,e.detail)}_handleInteractionCancel(e){this._interaction.cancel(e.currentTarget,e.detail)}_handleEvent(e){let t=this._slider.value;this.liveInteractions?this._interaction.update(e.currentTarget,t,e=>this._emitOptionChanged(t,e)):(e.type!==`change`||this._debounceTimeout||!Object.is(t,this._lastEmittedSliderValue))&&(this._debounceTimeout&&=(clearTimeout(this._debounceTimeout),null),this.debounce>0?this._debounceTimeout=setTimeout(()=>{this._debounceTimeout=null,this._emitOptionChanged(t)},this.debounce):this._emitOptionChanged(t))}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return r.html`
+      <luzmo-slider
+        id="luzmo-item-option-control"
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .value=${e??t}
+        .step=${this.step}
+        .size=${this.size}
+        .disabled=${this.disabled}
+        @input=${this._handleEvent}
+        @change=${this._handleEvent}
+        @luzmo-interaction-start=${this._handleInteractionStart}
+        @luzmo-interaction-end=${this._handleInteractionEnd}
+        @luzmo-interaction-cancel=${this._handleInteractionCancel}
+      ></luzmo-slider>
+    `}};e.t([(0,i.property)({type:Number,reflect:!0})],o.prototype,`value`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],o.prototype,`default`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],o.prototype,`min`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],o.prototype,`max`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],o.prototype,`step`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],o.prototype,`debounce`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0,attribute:`live-interactions`})],o.prototype,`liveInteractions`,void 0),e.t([(0,i.property)()],o.prototype,`parseValue`,void 0),e.t([(0,i.property)()],o.prototype,`toValue`,void 0),e.t([(0,i.query)(`luzmo-slider`)],o.prototype,`_slider`,void 0),customElements.get(`luzmo-item-option-slider`)||customElements.define(`luzmo-item-option-slider`,o),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/components/item-options-configs.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("./area-chart-options.config-D99tvt_H.cjs"),t=require("./bar-chart-options.config-BQ-PbucR.cjs"),n=require("./box-plot-options.config-BcGisybi.cjs"),r=require("./bubble-chart-options.config-DMk8Yjfk.cjs"),i=require("./bullet-chart-options.config-DUAnmPGW.cjs"),a=require("./choropleth-map-options.config-CXDGMiSJ.cjs"),o=require("./circle-pack-chart-options.config-DMNMYWZX.cjs"),s=require("./circular-gauge-options.config-B4Hk-AXi.cjs"),c=require("./column-chart-options.config-CyD8V7j4.cjs"),l=require("./combination-chart-options.config-Cg3ZEKMe.cjs"),u=require("./conditional-number-options.config-CsEhIU-T.cjs"),d=require("./date-comparison-filter-options.config-vCXOhzkp.cjs"),f=require("./date-filter-options.config-D_SMC4NH.cjs"),p=require("./donut-chart-options.config-DX-spmaZ.cjs"),m=require("./dropdown-filter-options.config-FjrC4F1D.cjs"),h=require("./evolution-number-options.config-B5qxlpwU.cjs"),g=require("./funnel-chart-options.config-CKp94nx7.cjs"),_=require("./heat-map-options.config-DiNa8NnG.cjs"),v=require("./heat-table-options.config-BvE6coaV.cjs"),y=require("./hexbin-map-options.config-DZLLOr7D.cjs"),b=require("./image-options.config-Dc8N_USB.cjs"),x=require("./line-chart-options.config-DOGbeJhy.cjs"),S=require("./marker-map-options.config-DxcxzLu_.cjs"),C=require("./ohlc-chart-options.config-CvlHm6hy.cjs"),w=require("./parallel-coordinates-plot-options.config-UHrCS9q5.cjs"),T=require("./pivot-table-options.config-5pYvqc35.cjs"),E=require("./pyramid-chart-options.config-CAC6cMmt.cjs"),D=require("./radar-chart-options.config-C1gfNkE6.cjs"),O=require("./regular-table-options.config-BCth1USK.cjs"),k=require("./route-map-options.config-DdCaVtIF.cjs"),A=require("./sankey-diagram-options.config-B8aHKfFt.cjs"),j=require("./scatter-plot-options.config-DhOGahRc.cjs"),M=require("./search-filter-options.config-DcPuNHyG.cjs"),N=require("./slicer-filter-options.config-DqI9WtAi.cjs"),P=require("./slider-filter-options.config-CgMb9Xmz.cjs"),F=require("./speedometer-chart-options.config-C3o5xpCj.cjs"),I=require("./spike-map-options.config-B3hDh2qU.cjs"),L=require("./strip-plot-options.config-CoiMZRzM.cjs"),R=require("./sunburst-chart-options.config-CZdd6qx0.cjs"),z=require("./symbol-map-options.config-C3RTDsGN.cjs"),B=require("./text-options.config-D9EkimNf.cjs"),V=require("./treemap-chart-options.config-DLEY6YuI.cjs"),H=require("./venn-diagram-options.config-BsxzLI46.cjs"),U=require("./video-options.config-BACuLmHj.cjs"),W=require("./wordcloud-chart-options.config-DiyF596X.cjs");exports.areaChartOptionsConfig=e.n,exports.barChartOptionsConfig=t.n,exports.boxPlotOptionsConfig=n.n,exports.bubbleChartOptionsConfig=r.n,exports.bulletChartOptionsConfig=i.n,exports.choroplethMapOptionsConfig=a.n,exports.circlePackChartOptionsConfig=o.n,exports.circularGaugeOptionsConfig=s.n,exports.columnChartOptionsConfig=c.n,exports.combinationChartOptionsConfig=l.n,exports.conditionalNumberOptionsConfig=u.n,exports.dateComparisonFilterOptionsConfig=d.n,exports.dateFilterOptionsConfig=f.n,exports.donutChartOptionsConfig=p.n,exports.dropdownFilterOptionsConfig=m.n,exports.evolutionNumberOptionsConfig=h.t,exports.funnelChartOptionsConfig=g.n,exports.heatMapOptionsConfig=_.t,exports.heatTableOptionsConfig=v.n,exports.hexbinMapOptionsConfig=y.n,exports.imageOptionsConfig=b.t,exports.lineChartOptionsConfig=x.t,exports.markerMapOptionsConfig=S.n,exports.ohlcChartOptionsConfig=C.t,exports.parallelCoordinatesPlotOptionsConfig=w.t,exports.pivotTableOptionsConfig=T.n,exports.pyramidChartOptionsConfig=E.n,exports.radarChartOptionsConfig=D.n,exports.regularTableOptionsConfig=O.t,exports.routeMapOptionsConfig=k.t,exports.sankeyDiagramOptionsConfig=A.t,exports.scatterPlotOptionsConfig=j.t,exports.searchFilterOptionsConfig=M.t,exports.slicerFilterOptionsConfig=N.t,exports.sliderFilterOptionsConfig=P.t,exports.speedometerChartOptionsConfig=F.t,exports.spikeMapOptionsConfig=I.t,exports.stripPlotOptionsConfig=L.n,exports.sunburstChartOptionsConfig=R.t,exports.symbolMapOptionsConfig=z.t,exports.textOptionsConfig=B.t,exports.treemapChartOptionsConfig=V.t,exports.vennDiagramOptionsConfig=H.t,exports.videoOptionsConfig=U.t,exports.wordcloudChartOptionsConfig=W.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./area-chart-options.config-D99tvt_H.cjs"),t=require("./bar-chart-options.config-BQ-PbucR.cjs"),n=require("./box-plot-options.config-BcGisybi.cjs"),r=require("./bubble-chart-options.config-DMk8Yjfk.cjs"),i=require("./bullet-chart-options.config-DUAnmPGW.cjs"),a=require("./choropleth-map-options.config-DwFJ00CS.cjs"),o=require("./circle-pack-chart-options.config-DMNMYWZX.cjs"),s=require("./circular-gauge-options.config-B4Hk-AXi.cjs"),c=require("./column-chart-options.config-CyD8V7j4.cjs"),l=require("./combination-chart-options.config-Cg3ZEKMe.cjs"),u=require("./conditional-number-options.config-CsEhIU-T.cjs"),d=require("./date-comparison-filter-options.config-vCXOhzkp.cjs"),f=require("./date-filter-options.config-D_SMC4NH.cjs"),p=require("./donut-chart-options.config-DX-spmaZ.cjs"),m=require("./dropdown-filter-options.config-FjrC4F1D.cjs"),h=require("./evolution-number-options.config-B5qxlpwU.cjs"),g=require("./funnel-chart-options.config-CKp94nx7.cjs"),_=require("./heat-map-options.config-DjQkB039.cjs"),v=require("./heat-table-options.config-D21xtaIk.cjs"),y=require("./hexbin-map-options.config-DZLLOr7D.cjs"),b=require("./image-options.config-Dc8N_USB.cjs"),x=require("./line-chart-options.config-DOGbeJhy.cjs"),S=require("./marker-map-options.config-DxcxzLu_.cjs"),C=require("./ohlc-chart-options.config-CvlHm6hy.cjs"),w=require("./parallel-coordinates-plot-options.config-UHrCS9q5.cjs"),T=require("./pivot-table-options.config-5pYvqc35.cjs"),E=require("./pyramid-chart-options.config-CAC6cMmt.cjs"),D=require("./radar-chart-options.config-C1gfNkE6.cjs"),O=require("./regular-table-options.config-BCth1USK.cjs"),k=require("./route-map-options.config-DER6ENky.cjs"),A=require("./sankey-diagram-options.config-B8aHKfFt.cjs"),j=require("./scatter-plot-options.config-DhOGahRc.cjs"),M=require("./search-filter-options.config-DcPuNHyG.cjs"),N=require("./slicer-filter-options.config-DqI9WtAi.cjs"),P=require("./slider-filter-options.config-CgMb9Xmz.cjs"),F=require("./speedometer-chart-options.config-C3o5xpCj.cjs"),I=require("./spike-map-options.config-DeF1Whq5.cjs"),L=require("./strip-plot-options.config-CoiMZRzM.cjs"),R=require("./sunburst-chart-options.config-CZdd6qx0.cjs"),z=require("./symbol-map-options.config-C3RTDsGN.cjs"),B=require("./text-options.config-D9EkimNf.cjs"),V=require("./treemap-chart-options.config-DLEY6YuI.cjs"),H=require("./venn-diagram-options.config-BsxzLI46.cjs"),U=require("./video-options.config-BACuLmHj.cjs"),W=require("./wordcloud-chart-options.config-DiyF596X.cjs");exports.areaChartOptionsConfig=e.n,exports.barChartOptionsConfig=t.n,exports.boxPlotOptionsConfig=n.n,exports.bubbleChartOptionsConfig=r.n,exports.bulletChartOptionsConfig=i.n,exports.choroplethMapOptionsConfig=a.n,exports.circlePackChartOptionsConfig=o.n,exports.circularGaugeOptionsConfig=s.n,exports.columnChartOptionsConfig=c.n,exports.combinationChartOptionsConfig=l.n,exports.conditionalNumberOptionsConfig=u.n,exports.dateComparisonFilterOptionsConfig=d.n,exports.dateFilterOptionsConfig=f.n,exports.donutChartOptionsConfig=p.n,exports.dropdownFilterOptionsConfig=m.n,exports.evolutionNumberOptionsConfig=h.t,exports.funnelChartOptionsConfig=g.n,exports.heatMapOptionsConfig=_.t,exports.heatTableOptionsConfig=v.n,exports.hexbinMapOptionsConfig=y.n,exports.imageOptionsConfig=b.t,exports.lineChartOptionsConfig=x.t,exports.markerMapOptionsConfig=S.n,exports.ohlcChartOptionsConfig=C.t,exports.parallelCoordinatesPlotOptionsConfig=w.t,exports.pivotTableOptionsConfig=T.n,exports.pyramidChartOptionsConfig=E.n,exports.radarChartOptionsConfig=D.n,exports.regularTableOptionsConfig=O.t,exports.routeMapOptionsConfig=k.t,exports.sankeyDiagramOptionsConfig=A.t,exports.scatterPlotOptionsConfig=j.t,exports.searchFilterOptionsConfig=M.t,exports.slicerFilterOptionsConfig=N.t,exports.sliderFilterOptionsConfig=P.t,exports.speedometerChartOptionsConfig=F.t,exports.spikeMapOptionsConfig=I.t,exports.stripPlotOptionsConfig=L.n,exports.sunburstChartOptionsConfig=R.t,exports.symbolMapOptionsConfig=z.t,exports.textOptionsConfig=B.t,exports.treemapChartOptionsConfig=V.t,exports.vennDiagramOptionsConfig=H.t,exports.videoOptionsConfig=U.t,exports.wordcloudChartOptionsConfig=W.t;

package/components/item-options-configs.js

@@ -22,7 +22,7 @@ import { n as t } from "./bar-chart-options.config-DHO8grQN.js";
 import { n } from "./box-plot-options.config-BgiiwSrU.js";
 import { n as r } from "./bubble-chart-options.config-UM9w5tBs.js";
 import { n as i } from "./bullet-chart-options.config-D9HklLUI.js";
-import { n as a } from "./choropleth-map-options.config-D9-u-NwX.js";
+import { n as a } from "./choropleth-map-options.config-Blu0Z2tR.js";
 import { n as o } from "./circle-pack-chart-options.config-DQs-uitJ.js";
 import { n as s } from "./circular-gauge-options.config-CnWE16oE.js";
 import { n as c } from "./column-chart-options.config-BYDJTVx6.js";
@@ -34,8 +34,8 @@ import { n as p } from "./donut-chart-options.config-B2vxfMyh.js";
 import { n as m } from "./dropdown-filter-options.config-B2S5I7IG.js";
 import { t as h } from "./evolution-number-options.config-BBWPkY_K.js";
 import { n as g } from "./funnel-chart-options.config-W83a8ukL.js";
-import { t as _ } from "./heat-map-options.config-ChZeslEy.js";
-import { n as v } from "./heat-table-options.config-BPCszrFn.js";
+import { t as _ } from "./heat-map-options.config-BQkhkLPb.js";
+import { n as v } from "./heat-table-options.config-CMWWTeyo.js";
 import { n as y } from "./hexbin-map-options.config-DUbhSv0B.js";
 import { t as b } from "./image-options.config-D_QOqkE_.js";
 import { t as x } from "./line-chart-options.config-Opoz2jPk.js";
@@ -46,14 +46,14 @@ import { n as T } from "./pivot-table-options.config-BlrguysB.js";
 import { n as E } from "./pyramid-chart-options.config-0Qf1naIx.js";
 import { n as D } from "./radar-chart-options.config-Dd6SMpMz.js";
 import { t as O } from "./regular-table-options.config-TXfzXF_Y.js";
-import { t as k } from "./route-map-options.config-B7vT6KG_.js";
+import { t as k } from "./route-map-options.config-DTcS47fW.js";
 import { t as A } from "./sankey-diagram-options.config-Y6jRK3wk.js";
 import { t as j } from "./scatter-plot-options.config-DvGofFzR.js";
 import { t as M } from "./search-filter-options.config-JvAotvWb.js";
 import { t as N } from "./slicer-filter-options.config-Bc38dVoU.js";
 import { t as P } from "./slider-filter-options.config-BaoIKTFj.js";
 import { t as F } from "./speedometer-chart-options.config-CIZKRvbg.js";
-import { t as I } from "./spike-map-options.config-DkmRZ1JZ.js";
+import { t as I } from "./spike-map-options.config-CPYfKWoF.js";
 import { n as L } from "./strip-plot-options.config-D1h3YBHj.js";
 import { t as R } from "./sunburst-chart-options.config-DVETeZFc.js";
 import { t as z } from "./symbol-map-options.config-BwZ7_S4w.js";