@luzmo/analytics-components-kit 1.1.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cumulio-internal/analytics-components-kit.git"
@@ -346,7 +346,7 @@
     "@lit/context": "^1.1.5",
     "@lit/localize": "^0.12.2",
     "@lit/task": "^1.0.1",
-    "@luzmo/embed": "^7.5.0",
+    "@luzmo/embed": "^7.5.0 || ^8.0.0",
     "@luzmo/icons": "^1.0.1-alpha.49",
     "@luzmo/lucero": "^2.6.1",
     "colorjs.io": "^0.5.2",

package/react/components/interactive-viz-item.component.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
 
 const LuzmoInteractiveVizItemComponent = createComponent({
   tagName: 'luzmo-interactive-viz-item',
@@ -9,6 +9,9 @@ const LuzmoInteractiveVizItemComponent = createComponent({
   events: {
     onLuzmoChartOptionsChanged: 'luzmo-chart-options-changed' as EventName<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>,
     onLuzmoChartChanged: 'luzmo-chart-changed' as EventName<CustomEvent<InteractiveVizItemChartChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>,
+    onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel' as EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>,
     onLuzmoFeedbackChanged: 'luzmo-feedback-changed' as EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>,
     onLuzmoChartAdded: 'luzmo-chart-added' as EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>,
     onLuzmoChartAddFailed: 'luzmo-chart-add-failed' as EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>
@@ -19,7 +22,10 @@ const LuzmoInteractiveVizItemComponent = createComponent({
  * React wrapper for <luzmo-interactive-viz-item>
  *
  * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set.
- * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. With `live-interactions`, option updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: an option drag or held key in the config panel first changed its value, right before that `luzmo-chart-changed`; `detail.optionKey` names the option and `detail.chart` is the chart it started on.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last `luzmo-chart-changed`. `detail.changed` is false when the value is back at its start; `detail.chart` is still the chart it started on.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the gesture was cancelled and the control reverted to its start value.
  * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes.
  * @event onLuzmoChartAdded - Fired by the inner `luzmo-add-to-dashboard` after the chart was saved.
  * @event onLuzmoChartAddFailed - Fired by the inner `luzmo-add-to-dashboard` when saving failed.
@@ -29,6 +35,9 @@ export const LuzmoInteractiveVizItem = LuzmoInteractiveVizItemComponent as React
   {
     onLuzmoChartOptionsChanged: EventName<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>;
     onLuzmoChartChanged: EventName<CustomEvent<InteractiveVizItemChartChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
     onLuzmoFeedbackChanged: EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>;
     onLuzmoChartAdded: EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>;
     onLuzmoChartAddFailed: EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>;

package/react/components/item-option-color-picker.component.ts

@@ -1,25 +1,31 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
 
 const LuzmoItemOptionColorPickerComponent = createComponent({
   tagName: 'luzmo-item-option-color-picker',
   elementClass: LuzmoItemOptionColorPickerClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-color-picker>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended (including when the popover closes), after its last value update.
  */
 export const LuzmoItemOptionColorPicker = LuzmoItemOptionColorPickerComponent as ReactWebComponent<
   LuzmoItemOptionColorPickerClass,
   {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
   }
 >;
 

package/react/components/item-option-color-range.component.ts

@@ -1,25 +1,31 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+import { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
 
 const LuzmoItemOptionColorRangeComponent = createComponent({
   tagName: 'luzmo-item-option-color-range',
   elementClass: LuzmoItemOptionColorRangeClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-color-range>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted immediately and carries `interaction` while a stop's color is dragged.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: that stop's gesture ended, after its last value update.
  */
 export const LuzmoItemOptionColorRange = LuzmoItemOptionColorRangeComponent as ReactWebComponent<
   LuzmoItemOptionColorRangeClass,
   {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
   }
 >;
 

package/react/components/item-option-guidelines.component.ts

@@ -1,25 +1,31 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+import { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
 
 const LuzmoItemOptionGuidelinesComponent = createComponent({
   tagName: 'luzmo-item-option-guidelines',
   elementClass: LuzmoItemOptionGuidelinesClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-guidelines>
  *
- * @event onLuzmoOptionChanged - Emitted when the guidelines value changes.
+ * @event onLuzmoOptionChanged - Emitted when the guidelines value changes. With `live-interactions`, emitted immediately and carries `interaction` while a line's color is dragged.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: that line's gesture ended, after its last value update.
  */
 export const LuzmoItemOptionGuidelines = LuzmoItemOptionGuidelinesComponent as ReactWebComponent<
   LuzmoItemOptionGuidelinesClass,
   {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
   }
 >;
 

package/react/components/item-option-panel.component.ts

@@ -1,25 +1,34 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionPanel as LuzmoItemOptionPanelClass, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
+import { LuzmoItemOptionPanel as LuzmoItemOptionPanelClass, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
 
 const LuzmoItemOptionPanelComponent = createComponent({
   tagName: 'luzmo-item-option-panel',
   elementClass: LuzmoItemOptionPanelClass,
   react: React,
   events: {
-    onLuzmoOptionsChanged: 'luzmo-options-changed' as EventName<CustomEvent<ItemOptionsChangedEventDetail>>
+    onLuzmoOptionsChanged: 'luzmo-options-changed' as EventName<CustomEvent<ItemOptionsChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-panel>
  *
- * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: bubbles from the option whose gesture ended, after its last options update.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted.
  */
 export const LuzmoItemOptionPanel = LuzmoItemOptionPanelComponent as ReactWebComponent<
   LuzmoItemOptionPanelClass,
   {
     onLuzmoOptionsChanged: EventName<CustomEvent<ItemOptionsChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
   }
 >;
 

package/react/components/item-option-slider.component.ts

@@ -1,25 +1,34 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionSlider as LuzmoItemOptionSliderClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+import { LuzmoItemOptionSlider as LuzmoItemOptionSliderClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
 
 const LuzmoItemOptionSliderComponent = createComponent({
   tagName: 'luzmo-item-option-slider',
   elementClass: LuzmoItemOptionSliderClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-slider>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted on every drag or key step and carries `interaction` inside a gesture.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last value update. `changed` is false when the value is back at its start.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the pointer was cancelled and the slider reverted to its start value.
  */
 export const LuzmoItemOptionSlider = LuzmoItemOptionSliderComponent as ReactWebComponent<
   LuzmoItemOptionSliderClass,
   {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
   }
 >;
 

package/react/components/item-option.component.ts

@@ -1,25 +1,34 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOption as LuzmoItemOptionClass, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
+import { LuzmoItemOption as LuzmoItemOptionClass, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
 
 const LuzmoItemOptionComponent = createComponent({
   tagName: 'luzmo-item-option',
   elementClass: LuzmoItemOptionClass,
   react: React,
   events: {
-    onLuzmoOptionsChanged: 'luzmo-options-changed' as EventName<CustomEvent<ItemOptionsChangedEventDetail>>
+    onLuzmoOptionsChanged: 'luzmo-options-changed' as EventName<CustomEvent<ItemOptionsChangedEventDetail>>,
+    onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>,
+    onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel' as EventName<CustomEvent<ItemOptionInteractionEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option>
  *
- * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: a drag or held key first changed the control's value, right before that options update. A press that never changes the value emits no lifecycle. `detail.optionKey` is set.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last options update. `detail.changed` is false when the value is back at its start.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the gesture was cancelled and the control reverted to its start value.
  */
 export const LuzmoItemOption = LuzmoItemOptionComponent as ReactWebComponent<
   LuzmoItemOptionClass,
   {
     onLuzmoOptionsChanged: EventName<CustomEvent<ItemOptionsChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
   }
 >;
 

package/react/esm/components/interactive-viz-item.component.d.ts

@@ -1,10 +1,13 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
+import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboardChartAddFailedEventDetail, AddToDashboardChartAddedEventDetail, InteractiveVizItemChartChangedEventDetail, InteractiveVizItemChartOptionsChangedEventDetail, InteractiveVizItemFeedbackChangedEventDetail, InteractiveVizItemInteractionEventDetail } from '@luzmo/analytics-components-kit/interactive-viz-item';
 /**
  * React wrapper for <luzmo-interactive-viz-item>
  *
  * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set.
- * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. With `live-interactions`, option updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: an option drag or held key in the config panel first changed its value, right before that `luzmo-chart-changed`; `detail.optionKey` names the option and `detail.chart` is the chart it started on.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last `luzmo-chart-changed`. `detail.changed` is false when the value is back at its start; `detail.chart` is still the chart it started on.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the gesture was cancelled and the control reverted to its start value.
  * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes.
  * @event onLuzmoChartAdded - Fired by the inner `luzmo-add-to-dashboard` after the chart was saved.
  * @event onLuzmoChartAddFailed - Fired by the inner `luzmo-add-to-dashboard` when saving failed.
@@ -12,6 +15,9 @@ import { LuzmoInteractiveVizItem as LuzmoInteractiveVizItemClass, AddToDashboard
 export declare const LuzmoInteractiveVizItem: ReactWebComponent<LuzmoInteractiveVizItemClass, {
     onLuzmoChartOptionsChanged: EventName<CustomEvent<InteractiveVizItemChartOptionsChangedEventDetail>>;
     onLuzmoChartChanged: EventName<CustomEvent<InteractiveVizItemChartChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<InteractiveVizItemInteractionEventDetail>>;
     onLuzmoFeedbackChanged: EventName<CustomEvent<InteractiveVizItemFeedbackChangedEventDetail>>;
     onLuzmoChartAdded: EventName<CustomEvent<AddToDashboardChartAddedEventDetail>>;
     onLuzmoChartAddFailed: EventName<CustomEvent<AddToDashboardChartAddFailedEventDetail>>;

package/react/esm/components/interactive-viz-item.component.js

@@ -8,6 +8,9 @@ const LuzmoInteractiveVizItemComponent = createComponent({
     events: {
         onLuzmoChartOptionsChanged: 'luzmo-chart-options-changed',
         onLuzmoChartChanged: 'luzmo-chart-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end',
+        onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel',
         onLuzmoFeedbackChanged: 'luzmo-feedback-changed',
         onLuzmoChartAdded: 'luzmo-chart-added',
         onLuzmoChartAddFailed: 'luzmo-chart-add-failed'
@@ -17,7 +20,10 @@ const LuzmoInteractiveVizItemComponent = createComponent({
  * React wrapper for <luzmo-interactive-viz-item>
  *
  * @event onLuzmoChartOptionsChanged - Fired when the inline actions (ranking, sort, display mode) change the chart options. Applied to `chart` first unless `controlled` is set.
- * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set.
+ * @event onLuzmoChartChanged - Fired when the config panel changes slots, filters, or options (full chart). Applied to `chart` first unless `controlled` is set. With `live-interactions`, option updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: an option drag or held key in the config panel first changed its value, right before that `luzmo-chart-changed`; `detail.optionKey` names the option and `detail.chart` is the chart it started on.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last `luzmo-chart-changed`. `detail.changed` is false when the value is back at its start; `detail.chart` is still the chart it started on.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the gesture was cancelled and the control reverted to its start value.
  * @event onLuzmoFeedbackChanged - Fired when the user changes the thumbs up/down rating. Never applied to `feedback`; the host owns it in both modes.
  * @event onLuzmoChartAdded - Fired by the inner `luzmo-add-to-dashboard` after the chart was saved.
  * @event onLuzmoChartAddFailed - Fired by the inner `luzmo-add-to-dashboard` when saving failed.

package/react/esm/components/item-option-color-picker.component.d.ts

@@ -1,12 +1,16 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
+import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-picker';
 /**
  * React wrapper for <luzmo-item-option-color-picker>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended (including when the popover closes), after its last value update.
  */
 export declare const LuzmoItemOptionColorPicker: ReactWebComponent<LuzmoItemOptionColorPickerClass, {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoItemOptionColorPicker */
 export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerClass;

package/react/esm/components/item-option-color-picker.component.js

@@ -6,12 +6,16 @@ const LuzmoItemOptionColorPickerComponent = createComponent({
     elementClass: LuzmoItemOptionColorPickerClass,
     react: React,
     events: {
-        onLuzmoOptionChanged: 'luzmo-option-changed'
+        onLuzmoOptionChanged: 'luzmo-option-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end'
     }
 });
 /**
  * React wrapper for <luzmo-item-option-color-picker>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted on every color change and carries `interaction` inside a gesture.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: a color area, hue or opacity drag or held key first changed the color, right before that value update. A press that never changes the color emits no lifecycle.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended (including when the popover closes), after its last value update.
  */
 export const LuzmoItemOptionColorPicker = LuzmoItemOptionColorPickerComponent;

package/react/esm/components/item-option-color-range.component.d.ts

@@ -1,12 +1,16 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
+import { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-color-range';
 /**
  * React wrapper for <luzmo-item-option-color-range>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted immediately and carries `interaction` while a stop's color is dragged.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: that stop's gesture ended, after its last value update.
  */
 export declare const LuzmoItemOptionColorRange: ReactWebComponent<LuzmoItemOptionColorRangeClass, {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoItemOptionColorRange */
 export type LuzmoItemOptionColorRangeElement = LuzmoItemOptionColorRangeClass;

package/react/esm/components/item-option-color-range.component.js

@@ -6,12 +6,16 @@ const LuzmoItemOptionColorRangeComponent = createComponent({
     elementClass: LuzmoItemOptionColorRangeClass,
     react: React,
     events: {
-        onLuzmoOptionChanged: 'luzmo-option-changed'
+        onLuzmoOptionChanged: 'luzmo-option-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end'
     }
 });
 /**
  * React wrapper for <luzmo-item-option-color-range>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted immediately and carries `interaction` while a stop's color is dragged.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: that stop's gesture ended, after its last value update.
  */
 export const LuzmoItemOptionColorRange = LuzmoItemOptionColorRangeComponent;

package/react/esm/components/item-option-guidelines.component.d.ts

@@ -1,12 +1,16 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
+import { LuzmoItemOptionGuidelines as LuzmoItemOptionGuidelinesClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-guidelines';
 /**
  * React wrapper for <luzmo-item-option-guidelines>
  *
- * @event onLuzmoOptionChanged - Emitted when the guidelines value changes.
+ * @event onLuzmoOptionChanged - Emitted when the guidelines value changes. With `live-interactions`, emitted immediately and carries `interaction` while a line's color is dragged.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: that line's gesture ended, after its last value update.
  */
 export declare const LuzmoItemOptionGuidelines: ReactWebComponent<LuzmoItemOptionGuidelinesClass, {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoItemOptionGuidelines */
 export type LuzmoItemOptionGuidelinesElement = LuzmoItemOptionGuidelinesClass;

package/react/esm/components/item-option-guidelines.component.js

@@ -6,12 +6,16 @@ const LuzmoItemOptionGuidelinesComponent = createComponent({
     elementClass: LuzmoItemOptionGuidelinesClass,
     react: React,
     events: {
-        onLuzmoOptionChanged: 'luzmo-option-changed'
+        onLuzmoOptionChanged: 'luzmo-option-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end'
     }
 });
 /**
  * React wrapper for <luzmo-item-option-guidelines>
  *
- * @event onLuzmoOptionChanged - Emitted when the guidelines value changes.
+ * @event onLuzmoOptionChanged - Emitted when the guidelines value changes. With `live-interactions`, emitted immediately and carries `interaction` while a line's color is dragged.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: that line's gesture ended, after its last value update.
  */
 export const LuzmoItemOptionGuidelines = LuzmoItemOptionGuidelinesComponent;

package/react/esm/components/item-option-panel.component.d.ts

@@ -1,12 +1,18 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionPanel as LuzmoItemOptionPanelClass, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
+import { LuzmoItemOptionPanel as LuzmoItemOptionPanelClass, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-panel';
 /**
  * React wrapper for <luzmo-item-option-panel>
  *
- * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: bubbles from the option whose gesture ended, after its last options update.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted.
  */
 export declare const LuzmoItemOptionPanel: ReactWebComponent<LuzmoItemOptionPanelClass, {
     onLuzmoOptionsChanged: EventName<CustomEvent<ItemOptionsChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoItemOptionPanel */
 export type LuzmoItemOptionPanelElement = LuzmoItemOptionPanelClass;

package/react/esm/components/item-option-panel.component.js

@@ -6,12 +6,18 @@ const LuzmoItemOptionPanelComponent = createComponent({
     elementClass: LuzmoItemOptionPanelClass,
     react: React,
     events: {
-        onLuzmoOptionsChanged: 'luzmo-options-changed'
+        onLuzmoOptionsChanged: 'luzmo-options-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end',
+        onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel'
     }
 });
 /**
  * React wrapper for <luzmo-item-option-panel>
  *
- * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: bubbles from the option whose gesture ended, after its last options update.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: bubbles from the option whose gesture was cancelled and reverted.
  */
 export const LuzmoItemOptionPanel = LuzmoItemOptionPanelComponent;

package/react/esm/components/item-option-slider.component.d.ts

@@ -1,12 +1,18 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionSlider as LuzmoItemOptionSliderClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
+import { LuzmoItemOptionSlider as LuzmoItemOptionSliderClass, ItemOptionChangedEventDetail, ItemOptionInteractionEventDetail } from '@luzmo/analytics-components-kit/item-option-slider';
 /**
  * React wrapper for <luzmo-item-option-slider>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted on every drag or key step and carries `interaction` inside a gesture.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last value update. `changed` is false when the value is back at its start.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the pointer was cancelled and the slider reverted to its start value.
  */
 export declare const LuzmoItemOptionSlider: ReactWebComponent<LuzmoItemOptionSliderClass, {
     onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoItemOptionSlider */
 export type LuzmoItemOptionSliderElement = LuzmoItemOptionSliderClass;

package/react/esm/components/item-option-slider.component.js

@@ -6,12 +6,18 @@ const LuzmoItemOptionSliderComponent = createComponent({
     elementClass: LuzmoItemOptionSliderClass,
     react: React,
     events: {
-        onLuzmoOptionChanged: 'luzmo-option-changed'
+        onLuzmoOptionChanged: 'luzmo-option-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end',
+        onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel'
     }
 });
 /**
  * React wrapper for <luzmo-item-option-slider>
  *
- * @event onLuzmoOptionChanged - Emitted when the option value changes.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes. With `live-interactions`, emitted on every drag or key step and carries `interaction` inside a gesture.
+ * @event onLuzmoOptionInteractionStart - 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.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last value update. `changed` is false when the value is back at its start.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the pointer was cancelled and the slider reverted to its start value.
  */
 export const LuzmoItemOptionSlider = LuzmoItemOptionSliderComponent;

package/react/esm/components/item-option.component.d.ts

@@ -1,12 +1,18 @@
 import { EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOption as LuzmoItemOptionClass, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
+import { LuzmoItemOption as LuzmoItemOptionClass, ItemOptionInteractionEventDetail, ItemOptionsChangedEventDetail } from '@luzmo/analytics-components-kit/item-option';
 /**
  * React wrapper for <luzmo-item-option>
  *
- * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: a drag or held key first changed the control's value, right before that options update. A press that never changes the value emits no lifecycle. `detail.optionKey` is set.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last options update. `detail.changed` is false when the value is back at its start.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the gesture was cancelled and the control reverted to its start value.
  */
 export declare const LuzmoItemOption: ReactWebComponent<LuzmoItemOptionClass, {
     onLuzmoOptionsChanged: EventName<CustomEvent<ItemOptionsChangedEventDetail>>;
+    onLuzmoOptionInteractionStart: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionEnd: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
+    onLuzmoOptionInteractionCancel: EventName<CustomEvent<ItemOptionInteractionEventDetail>>;
 }>;
 /** The underlying custom element type for LuzmoItemOption */
 export type LuzmoItemOptionElement = LuzmoItemOptionClass;

package/react/esm/components/item-option.component.js

@@ -6,12 +6,18 @@ const LuzmoItemOptionComponent = createComponent({
     elementClass: LuzmoItemOptionClass,
     react: React,
     events: {
-        onLuzmoOptionsChanged: 'luzmo-options-changed'
+        onLuzmoOptionsChanged: 'luzmo-options-changed',
+        onLuzmoOptionInteractionStart: 'luzmo-option-interaction-start',
+        onLuzmoOptionInteractionEnd: 'luzmo-option-interaction-end',
+        onLuzmoOptionInteractionCancel: 'luzmo-option-interaction-cancel'
     }
 });
 /**
  * React wrapper for <luzmo-item-option>
  *
- * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed. With `live-interactions`, updates inside a gesture carry `interaction`.
+ * @event onLuzmoOptionInteractionStart - With `live-interactions`: a drag or held key first changed the control's value, right before that options update. A press that never changes the value emits no lifecycle. `detail.optionKey` is set.
+ * @event onLuzmoOptionInteractionEnd - With `live-interactions`: the gesture ended, after its last options update. `detail.changed` is false when the value is back at its start.
+ * @event onLuzmoOptionInteractionCancel - With `live-interactions`: the gesture was cancelled and the control reverted to its start value.
  */
 export const LuzmoItemOption = LuzmoItemOptionComponent;