feat: List controller should manage Item events.

PiperOrigin-RevId: 438064073

components/list/lib/list-item.ts

@@ -102,6 +102,8 @@ export class ListItem extends LitElement {
     this.requestUpdate();
   }
 
+  handleClick() {}
+
   override update(changedProperties: PropertyValues<this>) {
     this.updateMetadata();
     super.update(changedProperties);
@@ -111,10 +113,4 @@ export class ListItem extends LitElement {
     this.hasLeadingIcon = this.leadingIcon.length > 0;
     this.hasTrailingIcon = this.trailingIcon.length > 0;
   }
-
-  protected handleClick() {
-    this.dispatchEvent(new CustomEvent(
-        'list-item-interaction',
-        {detail: {state: {selected: false}}, bubbles: true, composed: true}));
-  }
 }

components/list/lib/list.ts

@@ -8,6 +8,8 @@ import {html, LitElement, TemplateResult} from 'lit';
 
 import {ARIARole} from '../../types/aria';
 
+import {ListItemInteractionEvent} from './constants';
+
 /** @soyCompatible */
 export class List extends LitElement {
   static override shadowRootOptions:
@@ -21,9 +23,19 @@ export class List extends LitElement {
   /** @soyTemplate */
   override render(): TemplateResult {
     return html`
-      <ul tabindex="0" role=${this.getAriaRole()} class="md3-list">
+      <ul class="md3-list"
+          tabindex="0"
+          role=${this.getAriaRole()}
+          @list-item-interaction=${this.handleItemInteraction}>
         <slot></slot>
       </ul>
     `;
   }
+
+
+  handleItemInteraction(event: ListItemInteractionEvent) {
+    if (event.detail.state.isSelected) {
+      // TODO: manage selection state.
+    }
+  }
 }

components/list/lib/option-list-item.ts

@@ -14,4 +14,10 @@ export class OptionListItem extends ListItem {
   protected override getAriaRole(): ARIARole {
     return 'option';
   }
+
+  override handleClick() {
+    this.dispatchEvent(new CustomEvent(
+        'list-item-interaction',
+        {detail: {state: {isSelected: false}}, bubbles: true, composed: true}));
+  }
 }