fix(material-experimental/mdc-list): incorrect active/hover color for…

… selected items

Fixes that the active/hover color for selected list-options (in
single-selection mode) does not match up with what the MDC-list
renders. The current effect is a little confusing visually.

src/material-experimental/mdc-list/_interactive-list-theme.scss

@@ -14,21 +14,27 @@
       background: $active-base-color;
     }
 
-    &.mdc-list-item--selected::before {
-      background: $selected-color;
-      opacity: mdc-ripple.states-opacity($selected-color, selected);
+    &:not(:focus):not(.mdc-list-item--disabled):hover::before {
+      opacity: mdc-ripple.states-opacity($active-base-color, hover);
     }
 
-    &:focus::before {
-      opacity: mdc-ripple.states-opacity($active-base-color, focus);
+    &.mdc-list-item--selected {
+      &::before {
+        background: $selected-color;
+        opacity: mdc-ripple.states-opacity($selected-color, selected);
+      }
+
+      &:not(:focus):not(.mdc-list-item--disabled):hover::before {
+        // The hover and selected opacities need to be combined to match with what the MDC
+        // ripple state would render. More details here:
+        // https://github.com/material-components/material-components-web/blob/348665978ce73694ad4518626dd70cdf5b984113/packages/mdc-ripple/_ripple-theme.scss#L450.
+        opacity: mdc-ripple.states-opacity($selected-color, hover) +
+                 mdc-ripple.states-opacity($selected-color, selected);
+      }
     }
-  }
 
-  // MDC still shows focus/selected state if the item is disabled.
-  // Just hover styles should not show up for disabled items.
-  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled):not(.mdc-list-item--selected) {
-    &:not(:focus):hover::before {
-      opacity: mdc-ripple.states-opacity($active-base-color, hover);
+    &:focus::before {
+      opacity: mdc-ripple.states-opacity($active-base-color, focus);
     }
   }
 }