refactor(list-item)!: remove duplicate list-item menu-item from custo…

…m prop names

BREAKING: renames custom props from this:

`--md-list-item-list-item-...`
`--md-menu-item-list-item-...`

to:
`--md-list-item-...`
`--md-menu-item-...`
PiperOrigin-RevId: 557337871

catalog/site/css/global.css

@@ -86,7 +86,7 @@ a:focus-visible {
 }
 
 nav-drawer md-list-item[href][selected] {
-  --md-list-item-list-item-container-color: var(
+  --md-list-item-container-color: var(
     --md-sys-color-surface-container-highest
   );
 }
@@ -104,7 +104,7 @@ nav-drawer md-list-item[href][selected] {
 
 md-list {
   --md-list-container-color: transparent;
-  --md-list-item-list-item-container-color: transparent;
+  --md-list-item-container-color: transparent;
   display: block;
   margin-inline: var(--catalog-spacing-m);
   min-width: unset;

catalog/src/components/nav-drawer.ts

@@ -151,7 +151,7 @@ import {SignalElement} from '../signals/signal-element.js';
     }
 
     ::slotted(*) {
-      --md-list-item-list-item-container-shape: var(--catalog-shape-xl);
+      --md-list-item-container-shape: var(--catalog-shape-xl);
       --md-focus-ring-shape: var(--catalog-shape-xl);
     }
 

list/internal/listitem/_list-item.scss

@@ -51,10 +51,10 @@
 
     @include ripple.theme(
       (
-        hover-color: var(--_list-item-hover-state-layer-color),
-        hover-opacity: var(--_list-item-hover-state-layer-opacity),
-        pressed-color: var(--_list-item-pressed-state-layer-color),
-        pressed-opacity: var(--_list-item-pressed-state-layer-opacity),
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
   }
@@ -75,8 +75,8 @@
     position: relative;
     width: 100%;
     text-decoration: none;
-    background-color: var(--_list-item-container-color);
-    border-radius: var(--_list-item-container-shape);
+    background-color: var(--_container-color);
+    border-radius: var(--_container-shape);
     // hide android tap color since we have ripple
     -webkit-tap-highlight-color: transparent;
 
@@ -94,23 +94,23 @@
     width: 100%;
     box-sizing: border-box;
     border-radius: inherit;
-    padding-inline-end: var(--_list-item-trailing-space);
+    padding-inline-end: var(--_trailing-space);
   }
 
   md-ripple {
     border-radius: inherit;
   }
 
   .with-one-line {
-    min-height: var(--_list-item-one-line-container-height);
+    min-height: var(--_one-line-container-height);
   }
 
   .with-two-line {
-    min-height: var(--_list-item-two-line-container-height);
+    min-height: var(--_two-line-container-height);
   }
 
   .with-three-line {
-    min-height: var(--_list-item-three-line-container-height);
+    min-height: var(--_three-line-container-height);
   }
 
   .start {
@@ -130,7 +130,7 @@
     &::slotted([data-variant='icon']),
     &::slotted([data-variant='image']),
     &::slotted([data-variant='avatar']) {
-      margin-inline-start: var(--_list-item-leading-element-leading-space);
+      margin-inline-start: var(--_leading-element-leading-space);
     }
   }
 
@@ -140,7 +140,7 @@
     flex-direction: column;
     box-sizing: border-box;
     flex: 1 0 0;
-    padding-inline-start: var(--_list-item-leading-space);
+    padding-inline-start: var(--_leading-space);
     z-index: 1;
   }
 
@@ -159,7 +159,7 @@
   slot[name='end']::slotted(*),
   .trailing-supporting-text {
     margin-inline-start: var(
-      --_list-item-trailing-element-headline-trailing-element-space
+      --_trailing-element-headline-trailing-element-space
     );
   }
 
@@ -168,24 +168,24 @@
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
-    color: var(--_list-item-label-text-color);
-    font: var(--_list-item-label-text-type);
+    color: var(--_label-text-color);
+    font: var(--_label-text-type);
 
     :hover & {
-      color: var(--_list-item-hover-label-text-color);
+      color: var(--_hover-label-text-color);
     }
 
     :focus & {
-      color: var(--_list-item-focus-label-text-color);
+      color: var(--_focus-label-text-color);
     }
 
     :active & {
-      color: var(--_list-item-pressed-label-text-color);
+      color: var(--_pressed-label-text-color);
     }
 
     .disabled & {
-      color: var(--_list-item-disabled-label-text-color);
-      opacity: var(--_list-item-disabled-label-text-opacity);
+      color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
     }
   }
 
@@ -194,8 +194,8 @@
     white-space: normal;
     overflow: hidden;
     width: 100%;
-    color: var(--_list-item-supporting-text-color);
-    font: var(--_list-item-supporting-text-type);
+    color: var(--_supporting-text-color);
+    font: var(--_supporting-text-type);
 
     // Box is supposed to be deprecated, but line-clamp is not. It's still on
     // standards track and can only be applied with display: -webkit-box and
@@ -206,8 +206,8 @@
     display: -webkit-box;
 
     .disabled & {
-      color: var(--_list-item-disabled-label-text-color);
-      opacity: var(--_list-item-disabled-label-text-opacity);
+      color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
     }
   }
 
@@ -217,24 +217,24 @@
 
   .trailing-supporting-text {
     padding-inline-start: 16px;
-    font: var(--_list-item-trailing-supporting-text-type);
+    font: var(--_trailing-supporting-text-type);
 
     .list-item:not(.disabled) & {
-      color: var(--_list-item-trailing-supporting-text-color);
+      color: var(--_trailing-supporting-text-color);
     }
 
     .disabled & {
-      color: var(--_list-item-disabled-label-text-color);
-      opacity: var(--_list-item-disabled-label-text-opacity);
+      color: var(--_disabled-label-text-color);
+      opacity: var(--_disabled-label-text-opacity);
     }
 
     .with-three-line & {
       // In three line, trailing-supporting-text must align with the mid-line of
       // the headline text.
       padding-block-start: calc(
         (
-            var(--_list-item-label-text-line-height) -
-              var(--_list-item-trailing-supporting-text-line-height)
+            var(--_label-text-line-height) -
+              var(--_trailing-supporting-text-line-height)
           ) / 2
       );
     }
@@ -248,15 +248,12 @@
 @mixin _image() {
   ::slotted([data-variant='image']) {
     display: inline-flex;
-    height: var(--_list-item-leading-image-height);
-    width: var(--_list-item-leading-image-width);
-    border-radius: var(--_list-item-leading-image-shape);
+    height: var(--_leading-image-height);
+    width: var(--_leading-image-width);
+    border-radius: var(--_leading-image-shape);
     // Min height is two-line height
     padding-block: calc(
-      (
-          var(--_list-item-two-line-container-height) -
-            var(--_list-item-leading-image-height)
-        ) / 2
+      (var(--_two-line-container-height) - var(--_leading-image-height)) / 2
     );
 
     .with-three-line & {
@@ -271,78 +268,72 @@
   }
 
   slot[name='start']::slotted([data-variant='icon']) {
-    font-size: var(--_list-item-leading-icon-size);
-    width: var(--_list-item-leading-icon-size);
-    height: var(--_list-item-leading-icon-size);
-    color: var(--_list-item-leading-icon-color);
+    font-size: var(--_leading-icon-size);
+    width: var(--_leading-icon-size);
+    height: var(--_leading-icon-size);
+    color: var(--_leading-icon-color);
 
     .with-three-line & {
       // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
-        (
-            var(--_list-item-label-text-line-height) -
-              var(--_list-item-leading-icon-size)
-          ) / 2
+        (var(--_label-text-line-height) - var(--_leading-icon-size)) / 2
       );
     }
   }
 
   slot[name='end']::slotted([data-variant='icon']) {
-    font-size: var(--_list-item-trailing-icon-size);
-    width: var(--_list-item-trailing-icon-size);
-    height: var(--_list-item-trailing-icon-size);
-    color: var(--_list-item-trailing-icon-color);
+    font-size: var(--_trailing-icon-size);
+    width: var(--_trailing-icon-size);
+    height: var(--_trailing-icon-size);
+    color: var(--_trailing-icon-color);
 
     .with-three-line & {
       // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
-        (
-            var(--_list-item-label-text-line-height) -
-              var(--_list-item-trailing-icon-size)
-          ) / 2
+        (var(--_label-text-line-height) - var(--_trailing-icon-size)) / 2
       );
     }
   }
 
   :hover {
     slot[name='start']::slotted([data-variant='icon']) {
-      color: var(--_list-item-hover-leading-icon-icon-color);
+      color: var(--_hover-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      color: var(--_list-item-hover-trailing-icon-icon-color);
+      color: var(--_hover-trailing-icon-icon-color);
     }
   }
 
   :focus {
     slot[name='start']::slotted([data-variant='icon']) {
-      color: var(--_list-item-focus-leading-icon-icon-color);
+      color: var(--_focus-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      color: var(--_list-item-focus-trailing-icon-icon-color);
+      color: var(--_focus-trailing-icon-icon-color);
     }
   }
 
   :active {
     slot[name='start']::slotted([data-variant='icon']) {
-      color: var(--_list-item-pressed-leading-icon-icon-color);
+      color: var(--_pressed-leading-icon-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      color: var(--_list-item-pressed-trailing-icon-icon-color);
+      color: var(--_pressed-trailing-icon-icon-color);
     }
   }
 
   .disabled {
     slot[name='start']::slotted([data-variant='icon']) {
-      opacity: var(--_list-item-disabled-leading-icon-opacity);
-      color: var(--_list-item-disabled-leading-icon-color);
+      opacity: var(--_disabled-leading-icon-opacity);
+      color: var(--_disabled-leading-icon-color);
     }
 
     slot[name='end']::slotted([data-variant='icon']) {
-      opacity: var(--_list-item-disabled-trailing-icon-opacity);
-      color: var(--_list-item-disabled-trailing-icon-color);
+      opacity: var(--_disabled-trailing-icon-opacity);
+      color: var(--_disabled-trailing-icon-color);
     }
   }
 }
@@ -352,12 +343,12 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--_list-item-leading-avatar-color);
-    height: var(--_list-item-leading-avatar-size);
-    width: var(--_list-item-leading-avatar-size);
-    border-radius: var(--_list-item-leading-avatar-shape);
-    color: var(--_list-item-leading-avatar-label-color);
-    font: var(--_list-item-leading-avatar-label-type);
+    background-color: var(--_leading-avatar-color);
+    height: var(--_leading-avatar-size);
+    width: var(--_leading-avatar-size);
+    border-radius: var(--_leading-avatar-shape);
+    color: var(--_leading-avatar-label-color);
+    font: var(--_leading-avatar-label-type);
   }
 }
 
@@ -366,16 +357,14 @@
   ::slotted([data-variant='video-large']) {
     display: inline-flex;
     object-fit: cover;
-    height: var(--_list-item-small-leading-video-height);
-    width: var(--_list-item-leading-video-width);
-    border-radius: var(--_list-item-leading-video-shape);
-    margin-inline-start: var(--_list-item-leading-video-leading-space);
+    height: var(--_small-leading-video-height);
+    width: var(--_leading-video-width);
+    border-radius: var(--_leading-video-shape);
+    margin-inline-start: var(--_leading-video-leading-space);
     // Min height is three-line height
     padding-block: calc(
-      (
-          var(--_list-item-three-line-container-height) -
-            var(--_list-item-small-leading-video-height)
-        ) / 2
+      (var(--_three-line-container-height) - var(--_small-leading-video-height)) /
+        2
     );
 
     // Let it auto-layout so that we don't mess with the icons and supporting
@@ -388,11 +377,9 @@
   ::slotted([data-variant='video-large']) {
     // Min height is three-line height
     padding-block: calc(
-      (
-          var(--_list-item-three-line-container-height) -
-            var(--_list-item-large-leading-video-height)
-        ) / 2
+      (var(--_three-line-container-height) - var(--_large-leading-video-height)) /
+        2
     );
-    height: var(--_list-item-large-leading-video-height);
+    height: var(--_large-leading-video-height);
   }
 }

list/internal/listitem/forced-colors-styles.scss

@@ -11,12 +11,12 @@
   :host {
     @include list-item.theme(
       (
-        list-item-disabled-label-text-color: GrayText,
-        list-item-disabled-label-text-opacity: 1,
-        list-item-disabled-leading-icon-color: GrayText,
-        list-item-disabled-leading-icon-opacity: 1,
-        list-item-disabled-trailing-icon-color: GrayText,
-        list-item-disabled-trailing-icon-opacity: 1,
+        disabled-label-text-color: GrayText,
+        disabled-label-text-opacity: 1,
+        disabled-leading-icon-color: GrayText,
+        disabled-leading-icon-opacity: 1,
+        disabled-trailing-icon-color: GrayText,
+        disabled-trailing-icon-opacity: 1,
       )
     );
   }