feat(list): add interaction event

Adds a specific event for interaction in `limel-list`. With the current
change event it can be hard to sort out which element was actually
interacted with.

If one item is already selected and a new one is clicked then one could
see which one is selected to know the interaction. But if the same
selected item is clicked it's not possible to know that that element was
interacted with since the events come one by one by design.

With the new interaction event it's easy to know which item was either
clicked or selected by other means.

etc/lime-elements.api.md

@@ -1532,6 +1532,7 @@ namespace JSX_2 {
         "items"?: Array<ListItem | ListSeparator>;
         "maxLinesSecondaryText"?: number;
         "onChange"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
+        "onInteract"?: (event: LimelListCustomEvent<ListItem>) => void;
         "onSelect"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
         "type"?: ListType;
     }
@@ -1562,6 +1563,7 @@ namespace JSX_2 {
         "iconSize"?: IconSize;
         "items"?: Array<MenuItem | ListSeparator>;
         "maxLinesSecondaryText"?: number;
+        "onInteract"?: (event: LimelMenuListCustomEvent<MenuItem>) => void;
         "onSelect"?: (event: LimelMenuListCustomEvent<MenuItem>) => void;
         "type"?: MenuListType;
     }

src/components/list/list.tsx

@@ -99,6 +99,13 @@ export class List {
     @Event()
     protected select: EventEmitter<ListItem | ListItem[]>;
 
+    /**
+     * Fires when a user interacts with an item in the list (e.g., click,
+     * keyboard select).
+     */
+    @Event()
+    interact: EventEmitter<ListItem>;
+
     public connectedCallback() {
         this.setup();
     }
@@ -238,17 +245,23 @@ export class List {
             return !!item.selected;
         });
 
+        let interactedItem: ListItem;
+
         if (selectedItem) {
             if (this.type !== 'radio') {
                 this.mdcList.selectedIndex = -1;
             }
 
-            this.change.emit({ ...selectedItem, selected: false });
+            interactedItem = { ...selectedItem, selected: false };
+            this.change.emit(interactedItem);
         }
 
         if (listItems[index] !== selectedItem) {
-            this.change.emit({ ...listItems[index], selected: true });
+            interactedItem = { ...listItems[index], selected: true };
+            this.change.emit(interactedItem);
         }
+
+        this.interact.emit(interactedItem);
     };
 
     private handleMultiSelect = (index: number) => {
@@ -273,6 +286,7 @@ export class List {
             });
 
         this.change.emit(selectedItems);
+        this.interact.emit({ ...selectedItems[index] });
     };
 
     private isListItem = (item: ListItem): boolean => {

src/components/menu-list/menu-list.tsx

@@ -76,6 +76,13 @@ export class MenuList {
     @Event()
     private select: EventEmitter<MenuItem>;
 
+    /**
+     * Fires when a user interacts with an item in the list (e.g., click,
+     * keyboard select).
+     */
+    @Event()
+    interact: EventEmitter<MenuItem>;
+
     public connectedCallback() {
         this.setup();
     }
@@ -163,13 +170,18 @@ export class MenuList {
             return !!item.selected;
         });
 
+        let interactedItem: MenuItem;
         if (selectedItem) {
-            this.select.emit({ ...selectedItem, selected: false });
+            interactedItem = { ...selectedItem, selected: false };
+            this.select.emit(interactedItem);
         }
 
         if (MenuItems[index] !== selectedItem) {
-            this.select.emit({ ...MenuItems[index], selected: false });
+            interactedItem = { ...MenuItems[index], selected: false };
+            this.select.emit(interactedItem);
         }
+
+        this.interact.emit(interactedItem);
     };
 
     private isMenuItem = (item: MenuItem): boolean => {