@luzmo/analytics-components-kit 1.0.3-beta.10 → 1.0.3-beta.11

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

@@ -1,25 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass } from '@luzmo/analytics-components-kit/item-option-color-picker';
+import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass, ItemOptionChangedEventDetail } 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>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-color-picker>
  *
- * @event onLuzmoOptionChanged - Emitted when the color is changed.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionColorPicker = LuzmoItemOptionColorPickerComponent as ReactWebComponent<
   LuzmoItemOptionColorPickerClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,25 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeClass } from '@luzmo/analytics-components-kit/item-option-color-range';
+import { LuzmoItemOptionColorRange as LuzmoItemOptionColorRangeClass, ItemOptionChangedEventDetail } 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>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-color-range>
  *
- * @event onLuzmoOptionChanged - Emitted when the color range is changed.
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionColorRange = LuzmoItemOptionColorRangeComponent as ReactWebComponent<
   LuzmoItemOptionColorRangeClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

package/react/components/item-option-multi-language-field.component.ts

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionMultiLangField as LuzmoItemOptionMultiLangFieldClass } from '@luzmo/analytics-components-kit/item-option-multi-language-field';
+import { LuzmoItemOptionMultiLangField as LuzmoItemOptionMultiLangFieldClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-multi-language-field';
 
 const LuzmoItemOptionMultiLanguageFieldComponent = createComponent({
   tagName: 'luzmo-item-option-multi-language-field',
   elementClass: LuzmoItemOptionMultiLangFieldClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-multi-language-field>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionMultiLanguageField = LuzmoItemOptionMultiLanguageFieldComponent as ReactWebComponent<
   LuzmoItemOptionMultiLangFieldClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionNumberField as LuzmoItemOptionNumberFieldClass } from '@luzmo/analytics-components-kit/item-option-number-field';
+import { LuzmoItemOptionNumberField as LuzmoItemOptionNumberFieldClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-number-field';
 
 const LuzmoItemOptionNumberFieldComponent = createComponent({
   tagName: 'luzmo-item-option-number-field',
   elementClass: LuzmoItemOptionNumberFieldClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-number-field>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionNumberField = LuzmoItemOptionNumberFieldComponent as ReactWebComponent<
   LuzmoItemOptionNumberFieldClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionPanel as LuzmoItemOptionPanelClass } from '@luzmo/analytics-components-kit/item-option-panel';
+import { LuzmoItemOptionPanel as LuzmoItemOptionPanelClass, 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>
+    onLuzmoOptionsChanged: 'luzmo-options-changed' as EventName<CustomEvent<ItemOptionsChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoItemOptionPanelComponent = createComponent({
 export const LuzmoItemOptionPanel = LuzmoItemOptionPanelComponent as ReactWebComponent<
   LuzmoItemOptionPanelClass,
   {
-    onLuzmoOptionsChanged: EventName<CustomEvent>;
+    onLuzmoOptionsChanged: EventName<CustomEvent<ItemOptionsChangedEventDetail>>;
   }
 >;
 

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionPicker as LuzmoItemOptionPickerClass } from '@luzmo/analytics-components-kit/item-option-picker';
+import { LuzmoItemOptionPicker as LuzmoItemOptionPickerClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-picker';
 
 const LuzmoItemOptionPickerComponent = createComponent({
   tagName: 'luzmo-item-option-picker',
   elementClass: LuzmoItemOptionPickerClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-picker>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionPicker = LuzmoItemOptionPickerComponent as ReactWebComponent<
   LuzmoItemOptionPickerClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionPositionPicker as LuzmoItemOptionPositionPickerClass } from '@luzmo/analytics-components-kit/item-option-position-picker';
+import { LuzmoItemOptionPositionPicker as LuzmoItemOptionPositionPickerClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-position-picker';
 
 const LuzmoItemOptionPositionPickerComponent = createComponent({
   tagName: 'luzmo-item-option-position-picker',
   elementClass: LuzmoItemOptionPositionPickerClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-position-picker>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionPositionPicker = LuzmoItemOptionPositionPickerComponent as ReactWebComponent<
   LuzmoItemOptionPositionPickerClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

package/react/components/item-option-positions-number-field.component.ts

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionPositionsNumberField as LuzmoItemOptionPositionsNumberFieldClass } from '@luzmo/analytics-components-kit/item-option-positions-number-field';
+import { LuzmoItemOptionPositionsNumberField as LuzmoItemOptionPositionsNumberFieldClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-positions-number-field';
 
 const LuzmoItemOptionPositionsNumberFieldComponent = createComponent({
   tagName: 'luzmo-item-option-positions-number-field',
   elementClass: LuzmoItemOptionPositionsNumberFieldClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-positions-number-field>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionPositionsNumberField = LuzmoItemOptionPositionsNumberFieldComponent as ReactWebComponent<
   LuzmoItemOptionPositionsNumberFieldClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

package/react/components/item-option-radio-button-group.component.ts

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionRadioButtonGroup as LuzmoItemOptionRadioButtonGroupClass } from '@luzmo/analytics-components-kit/item-option-radio-button-group';
+import { LuzmoItemOptionRadioButtonGroup as LuzmoItemOptionRadioButtonGroupClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-radio-button-group';
 
 const LuzmoItemOptionRadioButtonGroupComponent = createComponent({
   tagName: 'luzmo-item-option-radio-button-group',
   elementClass: LuzmoItemOptionRadioButtonGroupClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-radio-button-group>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionRadioButtonGroup = LuzmoItemOptionRadioButtonGroupComponent as ReactWebComponent<
   LuzmoItemOptionRadioButtonGroupClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionSlider as LuzmoItemOptionSliderClass } from '@luzmo/analytics-components-kit/item-option-slider';
+import { LuzmoItemOptionSlider as LuzmoItemOptionSliderClass, ItemOptionChangedEventDetail } 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>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-slider>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionSlider = LuzmoItemOptionSliderComponent as ReactWebComponent<
   LuzmoItemOptionSliderClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionSwitch as LuzmoItemOptionSwitchClass } from '@luzmo/analytics-components-kit/item-option-switch';
+import { LuzmoItemOptionSwitch as LuzmoItemOptionSwitchClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-switch';
 
 const LuzmoItemOptionSwitchComponent = createComponent({
   tagName: 'luzmo-item-option-switch',
   elementClass: LuzmoItemOptionSwitchClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-switch>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionSwitch = LuzmoItemOptionSwitchComponent as ReactWebComponent<
   LuzmoItemOptionSwitchClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionTextField as LuzmoItemOptionTextFieldClass } from '@luzmo/analytics-components-kit/item-option-text-field';
+import { LuzmoItemOptionTextField as LuzmoItemOptionTextFieldClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-text-field';
 
 const LuzmoItemOptionTextFieldComponent = createComponent({
   tagName: 'luzmo-item-option-text-field',
   elementClass: LuzmoItemOptionTextFieldClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-text-field>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionTextField = LuzmoItemOptionTextFieldComponent as ReactWebComponent<
   LuzmoItemOptionTextFieldClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

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

@@ -1,21 +1,26 @@
 import React from 'react';
-import { createComponent, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOption as LuzmoItemOptionClass } from '@luzmo/analytics-components-kit/item-option';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoItemOption as LuzmoItemOptionClass, 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>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option>
+ *
+ * @event onLuzmoOptionsChanged - Announces that the `options` of the element have changed
  */
 export const LuzmoItemOption = LuzmoItemOptionComponent as ReactWebComponent<
-  LuzmoItemOptionClass
+  LuzmoItemOptionClass,
+  {
+    onLuzmoOptionsChanged: EventName<CustomEvent<ItemOptionsChangedEventDetail>>;
+  }
 >;
 
 /** The underlying custom element type for LuzmoItemOption */

package/react/components/item-slot-drop-panel.component.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotDropPanel as LuzmoItemSlotDropPanelClass } from '@luzmo/analytics-components-kit/item-slot-drop-panel';
+import { LuzmoItemSlotDropPanel as LuzmoItemSlotDropPanelClass, SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop-panel';
 
 const LuzmoItemSlotDropPanelComponent = createComponent({
   tagName: 'luzmo-item-slot-drop-panel',
   elementClass: LuzmoItemSlotDropPanelClass,
   react: React,
   events: {
-    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent>,
-    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent>
+    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>,
+    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent<SlotsContentsChangedEventDetail>>
   }
 });
 
@@ -21,8 +21,8 @@ const LuzmoItemSlotDropPanelComponent = createComponent({
 export const LuzmoItemSlotDropPanel = LuzmoItemSlotDropPanelComponent as ReactWebComponent<
   LuzmoItemSlotDropPanelClass,
   {
-    onLuzmoSlotConstraintTriggered: EventName<CustomEvent>;
-    onLuzmoSlotsContentsChanged: EventName<CustomEvent>;
+    onLuzmoSlotConstraintTriggered: EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>;
+    onLuzmoSlotsContentsChanged: EventName<CustomEvent<SlotsContentsChangedEventDetail>>;
   }
 >;
 

package/react/components/item-slot-drop.component.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotDrop as LuzmoItemSlotDropClass, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
+import { LuzmoItemSlotDrop as LuzmoItemSlotDropClass, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '@luzmo/analytics-components-kit/item-slot-drop';
 
 const LuzmoItemSlotDropComponent = createComponent({
   tagName: 'luzmo-item-slot-drop',
@@ -8,8 +8,8 @@ const LuzmoItemSlotDropComponent = createComponent({
   react: React,
   events: {
     onLuzmoSlotMenuInactive: 'luzmo-slot-menu-inactive' as EventName<CustomEvent>,
-    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent>,
-    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent>,
+    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent<SlotMenuActiveEventDetail>>,
+    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent<SlotMenuHighlightEventDetail>>,
     onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent<InfoVisibilityChangedEventDetail>>,
     onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent<SlotContentsChangedEventDetail>>
   }
@@ -18,6 +18,8 @@ const LuzmoItemSlotDropComponent = createComponent({
 /**
  * React wrapper for <luzmo-item-slot-drop>
  *
+ * @event onLuzmoSlotMenuActive - Emitted when the slot menu overlay opens for a slot
+ * @event onLuzmoSlotMenuHighlight - Emitted to highlight the active column or formula in the slot menu
  * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked in display-settings, includes the visibility state and ID values
  * @event onLuzmoSlotContentsChanged - Announces that the slot contents has changed
  */
@@ -25,8 +27,8 @@ export const LuzmoItemSlotDrop = LuzmoItemSlotDropComponent as ReactWebComponent
   LuzmoItemSlotDropClass,
   {
     onLuzmoSlotMenuInactive: EventName<CustomEvent>;
-    onLuzmoSlotMenuActive: EventName<CustomEvent>;
-    onLuzmoSlotMenuHighlight: EventName<CustomEvent>;
+    onLuzmoSlotMenuActive: EventName<CustomEvent<SlotMenuActiveEventDetail>>;
+    onLuzmoSlotMenuHighlight: EventName<CustomEvent<SlotMenuHighlightEventDetail>>;
     onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
     onLuzmoSlotContentsChanged: EventName<CustomEvent<SlotContentsChangedEventDetail>>;
   }

package/react/components/item-slot-picker-panel.component.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotPickerPanel as LuzmoItemSlotPickerPanelClass } from '@luzmo/analytics-components-kit/item-slot-picker-panel';
+import { LuzmoItemSlotPickerPanel as LuzmoItemSlotPickerPanelClass, DatasetChangedEventDetail, DatasetConstraintTriggeredEventDetail, SlotConstraintTriggeredEventDetail, SlotsContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-picker-panel';
 
 const LuzmoItemSlotPickerPanelComponent = createComponent({
   tagName: 'luzmo-item-slot-picker-panel',
   elementClass: LuzmoItemSlotPickerPanelClass,
   react: React,
   events: {
-    onLuzmoDatasetConstraintTriggered: 'luzmo-dataset-constraint-triggered' as EventName<CustomEvent>,
-    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent>,
-    onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent>,
-    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent>
+    onLuzmoDatasetConstraintTriggered: 'luzmo-dataset-constraint-triggered' as EventName<CustomEvent<DatasetConstraintTriggeredEventDetail>>,
+    onLuzmoSlotsContentsChanged: 'luzmo-slots-contents-changed' as EventName<CustomEvent<SlotsContentsChangedEventDetail>>,
+    onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent<DatasetChangedEventDetail>>,
+    onLuzmoSlotConstraintTriggered: 'luzmo-slot-constraint-triggered' as EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>
   }
 });
 
@@ -25,10 +25,10 @@ const LuzmoItemSlotPickerPanelComponent = createComponent({
 export const LuzmoItemSlotPickerPanel = LuzmoItemSlotPickerPanelComponent as ReactWebComponent<
   LuzmoItemSlotPickerPanelClass,
   {
-    onLuzmoDatasetConstraintTriggered: EventName<CustomEvent>;
-    onLuzmoSlotsContentsChanged: EventName<CustomEvent>;
-    onLuzmoDatasetChanged: EventName<CustomEvent>;
-    onLuzmoSlotConstraintTriggered: EventName<CustomEvent>;
+    onLuzmoDatasetConstraintTriggered: EventName<CustomEvent<DatasetConstraintTriggeredEventDetail>>;
+    onLuzmoSlotsContentsChanged: EventName<CustomEvent<SlotsContentsChangedEventDetail>>;
+    onLuzmoDatasetChanged: EventName<CustomEvent<DatasetChangedEventDetail>>;
+    onLuzmoSlotConstraintTriggered: EventName<CustomEvent<SlotConstraintTriggeredEventDetail>>;
   }
 >;
 

package/react/components/item-slot-picker.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemSlotPicker as LuzmoItemSlotPickerClass } from '@luzmo/analytics-components-kit/item-slot-picker';
+import { LuzmoItemSlotPicker as LuzmoItemSlotPickerClass, SlotContentsChangedEventDetail } from '@luzmo/analytics-components-kit/item-slot-picker';
 
 const LuzmoItemSlotPickerComponent = createComponent({
   tagName: 'luzmo-item-slot-picker',
   elementClass: LuzmoItemSlotPickerClass,
   react: React,
   events: {
-    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent<SlotContentsChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoItemSlotPickerComponent = createComponent({
 export const LuzmoItemSlotPicker = LuzmoItemSlotPickerComponent as ReactWebComponent<
   LuzmoItemSlotPickerClass,
   {
-    onLuzmoSlotContentsChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentsChanged: EventName<CustomEvent<SlotContentsChangedEventDetail>>;
   }
 >;
 

package/react/components/slot-menu-list.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoSlotMenuList as LuzmoSlotMenuListClass } from '@luzmo/analytics-components-kit/slot-menu-list';
+import { LuzmoSlotMenuList as LuzmoSlotMenuListClass, SlotListChangedEventDetail } from '@luzmo/analytics-components-kit/slot-menu-list';
 
 const LuzmoSlotMenuListComponent = createComponent({
   tagName: 'luzmo-slot-menu-list',
   elementClass: LuzmoSlotMenuListClass,
   react: React,
   events: {
-    onLuzmoSlotListChanged: 'luzmo-slot-list-changed' as EventName<CustomEvent>
+    onLuzmoSlotListChanged: 'luzmo-slot-list-changed' as EventName<CustomEvent<SlotListChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoSlotMenuListComponent = createComponent({
 export const LuzmoSlotMenuList = LuzmoSlotMenuListComponent as ReactWebComponent<
   LuzmoSlotMenuListClass,
   {
-    onLuzmoSlotListChanged: EventName<CustomEvent>;
+    onLuzmoSlotListChanged: EventName<CustomEvent<SlotListChangedEventDetail>>;
   }
 >;
 

package/react/components/slot-menu.component.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoSlotMenu as LuzmoSlotMenuClass } from '@luzmo/analytics-components-kit/slot-menu';
+import { LuzmoSlotMenu as LuzmoSlotMenuClass, InfoVisibilityChangedEventDetail, SlotContentsChangedEventDetail, SlotMenuActiveEventDetail, SlotMenuHighlightEventDetail } from '@luzmo/analytics-components-kit/slot-menu';
 
 const LuzmoSlotMenuComponent = createComponent({
   tagName: 'luzmo-slot-menu',
   elementClass: LuzmoSlotMenuClass,
   react: React,
   events: {
-    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent>,
-    onLuzmoClose: 'luzmo-close' as EventName<CustomEvent>,
-    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent>,
-    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent>,
+    onLuzmoSlotContentsChanged: 'luzmo-slot-contents-changed' as EventName<CustomEvent<SlotContentsChangedEventDetail>>,
+    onLuzmoClose: 'luzmo-close' as EventName<CustomEvent<void>>,
+    onLuzmoSlotMenuActive: 'luzmo-slot-menu-active' as EventName<CustomEvent<SlotMenuActiveEventDetail>>,
+    onLuzmoSlotMenuHighlight: 'luzmo-slot-menu-highlight' as EventName<CustomEvent<SlotMenuHighlightEventDetail>>,
     onLuzmoSlotMenuInactive: 'luzmo-slot-menu-inactive' as EventName<CustomEvent>,
-    onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent>
+    onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent<InfoVisibilityChangedEventDetail>>
   }
 });
 
@@ -21,17 +21,19 @@ const LuzmoSlotMenuComponent = createComponent({
  *
  * @event onLuzmoSlotContentsChanged - Emitted when the slot contents change
  * @event onLuzmoClose - Emitted when the slot menu is closed
+ * @event onLuzmoSlotMenuActive - Emitted when the slot menu becomes active for a dataset
+ * @event onLuzmoSlotMenuHighlight - Emitted to highlight a column or formula in the slot menu
  * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked in display-settings, includes the visibility state and ID values
  */
 export const LuzmoSlotMenu = LuzmoSlotMenuComponent as ReactWebComponent<
   LuzmoSlotMenuClass,
   {
-    onLuzmoSlotContentsChanged: EventName<CustomEvent>;
-    onLuzmoClose: EventName<CustomEvent>;
-    onLuzmoSlotMenuActive: EventName<CustomEvent>;
-    onLuzmoSlotMenuHighlight: EventName<CustomEvent>;
+    onLuzmoSlotContentsChanged: EventName<CustomEvent<SlotContentsChangedEventDetail>>;
+    onLuzmoClose: EventName<CustomEvent<void>>;
+    onLuzmoSlotMenuActive: EventName<CustomEvent<SlotMenuActiveEventDetail>>;
+    onLuzmoSlotMenuHighlight: EventName<CustomEvent<SlotMenuHighlightEventDetail>>;
     onLuzmoSlotMenuInactive: EventName<CustomEvent>;
-    onLuzmoInfoVisibilityChanged: EventName<CustomEvent>;
+    onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
   }
 >;
 

package/react/components/viz-item-menu/types.ts

@@ -1 +1,11 @@
 export type VizItemMenuButton = 'clone' | 'edit' | 'delete';
+
+export interface VizItemMenuButtonClickedEventDetail {
+  action: string;
+  type: VizItemMenuButton;
+  id: string;
+}
+
+export interface VizItemMenuSelectedChangedEventDetail {
+  selectedButton: VizItemMenuButton | null;
+}