M3 list

src/dev-app/list/list-demo.html

@@ -243,6 +243,31 @@ <h2>Line scenarios</h2>
       </mat-list-item>
     </mat-list>
 
+    <mat-selection-list>
+      <mat-list-option>Title</mat-list-option>
+      <mat-list-option lines="2">
+        <span matListItemTitle>Title</span>
+        <span>This is unscoped text content that is supposed to not wrap. The list has only
+        acquired two lines and therefore there is no space for wrapping.</span>
+      </mat-list-option>
+      <mat-list-option lines="3">
+        <span matListItemTitle>Title</span>
+        <span>This is unscoped text content that is supposed to wrap to the third line.
+          The list item acquire spaces for three lines and text should have an ellipsis in the
+          third line upon text overflow.</span>
+      </mat-list-option>
+      <mat-list-option>
+        <span matListItemTitle>Title</span>
+        <span>This is unscoped text content that is supposed to not wrap. The list has only
+        acquired two lines (automatically) and therefore there is no space for wrapping.</span>
+      </mat-list-option>
+      <mat-list-option>
+        <span matListItemTitle>Title</span>
+        <span matListItemLine>Secondary line</span>
+        <span matListItemLine>Tertiary line</span>
+      </mat-list-option>
+    </mat-selection-list>
+
     <button mat-raised-button (click)="showBoxes = !showBoxes">Show item boxes</button>
   </div>
 

src/material-experimental/theming/_m3-density.scss

@@ -95,6 +95,10 @@ $_density-tokens: (
   (mat, icon-button): (
     touch-target-display: (block, block, none, none),
   ),
+  (mat, list): (
+    list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
+    list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
+  ),
   (mat, text-button): (
     touch-target-display: (block, block, none, none),
   ),

src/material/core/tokens/m2/_index.scss

@@ -20,6 +20,7 @@
 @use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/icon' as tokens-mat-icon;
 @use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
 @use './mat/menu' as tokens-mat-menu;
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
@@ -137,6 +138,7 @@
       _get-tokens-for-module($theme, tokens-mat-paginator),
       _get-tokens-for-module($theme, tokens-mat-checkbox),
       _get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
+      _get-tokens-for-module($theme, tokens-mat-list),
       _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
       _get-tokens-for-module($theme, tokens-mat-protected-button),
       _get-tokens-for-module($theme, tokens-mat-radio),

src/material/core/tokens/m2/mat/_list.scss

@@ -0,0 +1,40 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, list);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return (
+    list-item-leading-icon-start-space: 16px,
+    list-item-leading-icon-end-space: 32px,
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/list/_list-theme.scss

@@ -7,9 +7,11 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/m2/mat/list' as tokens-mat-list;
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 @use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
 @use '../core/tokens/m2/mdc/list' as tokens-mdc-list;
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
 @mixin base($theme) {
@@ -96,6 +98,8 @@
     // Add values for MDC list tokens.
     @include sass-utils.current-selector-or-root() {
       @include mdc-list-theme.theme($mdc-list-density-tokens);
+      @include token-utils.create-token-values(
+        tokens-mat-list.$prefix, tokens-mat-list.get-density-tokens($theme));
     }
 
     .mdc-list-item__start,
@@ -180,5 +184,8 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-list-theme.theme(map.get($tokens, tokens-mdc-list.$prefix));
+
+    $mat-list-tokens: token-utils.get-tokens-for($tokens, tokens-mat-list.$prefix);
+    @include token-utils.create-token-values(tokens-mat-list.$prefix, $mat-list-tokens);
   }
 }

src/material/list/list.scss

@@ -3,6 +3,7 @@
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '../core/style/layout-common';
+@use '../core/tokens/m2/mat/list' as m2-mat-list;
 @use '../core/tokens/m2/mdc/list' as m2-mdc-list;
 @use '../core/tokens/token-utils';
 @use './list-item-hcm-indicator';
@@ -195,3 +196,15 @@ mat-action-list button {
     border: 0;
   }
 }
+
+@include token-utils.use-tokens(m2-mat-list.$prefix,
+  m2-mat-list.get-token-slots()) {
+  .mdc-list-item--with-leading-icon .mdc-list-item__start {
+    @include token-utils.create-token-slot(margin-left, list-item-leading-icon-start-space);
+    @include token-utils.create-token-slot(margin-right, list-item-leading-icon-end-space);
+    [dir='rtl'] & {
+      @include token-utils.create-token-slot(margin-right, list-item-leading-icon-start-space);
+      @include token-utils.create-token-slot(margin-left, list-item-leading-icon-end-space);
+    }
+  }
+}