@material/web 1.0.0-pre.1 → 1.0.0-pre.2

package/list/lib/_list.scss

@@ -7,34 +7,23 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevation/lib/elevation';
+@use 'sass:string';
+@use './listitem/list-item';
 @use '../../sass/theme';
-@use '../../tokens' as m3-tokens;
-@use './tokens';
-@use './divider/list-divider';
-
-$_reference: (
-  container-color:
-    map.get(tokens.md-comp-list-values(), 'list-item-container-color'),
-  list-divider-color:
-    map.get(tokens.md-comp-list-values(), 'list-divider-color'),
-  list-divider-height:
-    map.get(tokens.md-comp-list-values(), 'list-divider-height'),
-  container-surface-tint-layer-color:
-    map.get(m3-tokens.md-sys-color-values-light(), 'surface-tint'),
-  container-elevation: 0,
-);
+@use '../../tokens';
+@use '../../elevation/lib/elevation';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme($_reference, $tokens);
-  $tokens: _resolve-tokens($tokens);
+  $reference: resolve-tokens(tokens.md-comp-list-values());
+  $tokens: resolve-tokens($tokens);
+  $tokens: theme.validate-theme($reference, $tokens);
   $tokens: theme.create-theme-vars($tokens, list);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: _resolve-tokens($_reference);
+  $tokens: resolve-tokens(tokens.md-comp-list-values());
   $tokens: theme.create-theme-vars($tokens, list);
 
   :host {
@@ -42,13 +31,6 @@ $_reference: (
       --_#{$token}: #{$value};
     }
 
-    @include elevation.theme(
-      (
-        level: var(--_container-elevation),
-        surface-tint-color: var(--_container-surface-tint-layer-color),
-      )
-    );
-
     color: unset;
   }
 
@@ -63,22 +45,32 @@ $_reference: (
     // Add position so the elevation overlay (which is absolutely positioned)
     // can be positioned relative to the list root.
     position: relative;
-
-    @include list-divider.theme(
-      (
-        list-divider-color: var(--_list-divider-color),
-        list-divider-height: var(--_list-divider-height),
-      )
-    );
   }
+}
+
+/// Resolves the tokens that are specific to list.
+///
+/// The tokenset for list include list plus all of list item. We do not want to
+/// duplicate tokens and custom properties across md-list and md-list-item.
+/// So here we resolve list-items tokens, and resolve the difference between
+/// the full set of tokens and the ones specific to list-item.
+@function resolve-tokens($tokens) {
+  // We need container color so rename so that we don't lose it
+  $tokens: map.set(
+    $tokens,
+    container-color,
+    map.get($tokens, list-item-container-color)
+  );
+  $list-item-tokens: list-item.resolve-tokens($tokens);
+  $list-tokens: ();
+
+  @each $token, $value in $tokens {
+    $is-unique: not map.has-key($list-item-tokens, $token);
 
-  md-elevation {
-    inset: 0;
-    position: absolute;
-    z-index: 0;
+    @if $is-unique {
+      $list-tokens: map.set($list-tokens, $token, $value);
+    }
   }
-}
 
-@function _resolve-tokens($tokens) {
-  @return elevation.resolve-tokens($tokens, 'container-elevation');
+  @return $list-tokens;
 }

package/list/lib/avatar/_list-item-avatar.scss

@@ -8,7 +8,7 @@
 
 @use '../../../sass/map-ext';
 @use '../../../sass/theme';
-@use '../tokens';
+@use '../../../tokens';
 
 @mixin styles() {
   $tokens: map-ext.pick(

package/list/lib/avatar/list-item-avatar-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_list-item-leading-avatar-color: ;--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px)}.md3-list-item__avatar{border-radius:var(--_list-item-leading-avatar-shape);display:inline-flex;height:var(--_list-item-leading-avatar-size);margin-inline-start:16px;width:var(--_list-item-leading-avatar-size)}/*# sourceMappingURL=list-item-avatar-styles.css.map */
+export const styles = css `:host{--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px)}.md3-list-item__avatar{border-radius:var(--_list-item-leading-avatar-shape);display:inline-flex;height:var(--_list-item-leading-avatar-size);margin-inline-start:16px;width:var(--_list-item-leading-avatar-size)}/*# sourceMappingURL=list-item-avatar-styles.css.map */
 `;
 //# sourceMappingURL=list-item-avatar-styles.css.js.map

package/list/lib/avatar/list-item-avatar-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-avatar-styles.css.js","sourceRoot":"","sources":["list-item-avatar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-avatar-color: ;--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px)}.md3-list-item__avatar{border-radius:var(--_list-item-leading-avatar-shape);display:inline-flex;height:var(--_list-item-leading-avatar-size);margin-inline-start:16px;width:var(--_list-item-leading-avatar-size)}/*# sourceMappingURL=list-item-avatar-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-avatar-styles.css.js","sourceRoot":"","sources":["list-item-avatar-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px)}.md3-list-item__avatar{border-radius:var(--_list-item-leading-avatar-shape);display:inline-flex;height:var(--_list-item-leading-avatar-size);margin-inline-start:16px;width:var(--_list-item-leading-avatar-size)}/*# sourceMappingURL=list-item-avatar-styles.css.map */\n`;\n "]}

package/list/lib/avatar/list-item-avatar.d.ts

@@ -4,13 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement, TemplateResult } from 'lit';
-/** @soyCompatible */
 export declare class ListItemAvatar extends LitElement {
+    /**
+     * The image `src` for the avatar
+     */
     avatar: string;
-    altText?: string;
     /**
-     * @soyTemplate
-     * @soyClasses imageClasses: .md3-list-item__avatar
+     * The image `alt`.
+     */
+    altText: string;
+    /**
+     * The image `loading` attribute.
      */
+    loading: 'eager' | 'lazy';
     render(): TemplateResult;
 }

package/list/lib/avatar/list-item-avatar.js

@@ -4,32 +4,45 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-/** @soyCompatible */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class ListItemAvatar extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * The image `src` for the avatar
+         */
         this.avatar = '';
+        /**
+         * The image `alt`.
+         */
+        this.altText = '';
+        /**
+         * The image `loading` attribute.
+         */
+        this.loading = 'eager';
     }
-    /**
-     * @soyTemplate
-     * @soyClasses imageClasses: .md3-list-item__avatar
-     */
     render() {
         return html `
-       <img src="${this.avatar}" alt="${ifDefined(this.altText)}"
+       <img
+          src="${this.avatar}"
+          alt="${this.altText || nothing}"
+          loading="${this.loading}"
         class="md3-list-item__avatar" />
      `;
     }
 }
 __decorate([
-    property({ type: String, reflect: true }),
+    property(),
     __metadata("design:type", Object)
 ], ListItemAvatar.prototype, "avatar", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
+    property(),
+    __metadata("design:type", Object)
 ], ListItemAvatar.prototype, "altText", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], ListItemAvatar.prototype, "loading", void 0);
 //# sourceMappingURL=list-item-avatar.js.map

package/list/lib/avatar/list-item-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-avatar.js","sourceRoot":"","sources":["list-item-avatar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,qBAAqB;AACrB,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAC2C,WAAM,GAAG,EAAE,CAAC;IAavD,CAAC;IAVC;;;OAGG;IACM,MAAM;QACb,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,MAAM,UAAU,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;MAEzD,CAAC;IACL,CAAC;CACF;AAb0C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;8CAAa;AACZ;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;+CAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ListItemAvatar extends LitElement {\n  @property({type: String, reflect: true}) avatar = '';\n  @property({type: String, reflect: true}) altText?: string;\n\n  /**\n   * @soyTemplate\n   * @soyClasses imageClasses: .md3-list-item__avatar\n   */\n  override render(): TemplateResult {\n    return html`\n       <img src=\"${this.avatar}\" alt=\"${ifDefined(this.altText)}\"\n        class=\"md3-list-item__avatar\" />\n     `;\n  }\n}\n"]}
+{"version":3,"file":"list-item-avatar.js","sourceRoot":"","sources":["list-item-avatar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,gEAAgE;AAChE,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACE;;WAEG;QACS,WAAM,GAAG,EAAE,CAAC;QAExB;;WAEG;QACS,YAAO,GAAG,EAAE,CAAC;QAEzB;;WAEG;QACS,YAAO,GAAmB,OAAO,CAAC;IAWhD,CAAC;IATU,MAAM;QACb,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,MAAM;iBACX,IAAI,CAAC,OAAO,IAAI,OAAO;qBACnB,IAAI,CAAC,OAAO;;MAE3B,CAAC;IACL,CAAC;CACF;AArBa;IAAX,QAAQ,EAAE;;8CAAa;AAKZ;IAAX,QAAQ,EAAE;;+CAAc;AAKb;IAAX,QAAQ,EAAE;;+CAAmC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemAvatar extends LitElement {\n  /**\n   * The image `src` for the avatar\n   */\n  @property() avatar = '';\n\n  /**\n   * The image `alt`.\n   */\n  @property() altText = '';\n\n  /**\n   * The image `loading` attribute.\n   */\n  @property() loading: 'eager'|'lazy' = 'eager';\n\n  override render(): TemplateResult {\n    return html`\n       <img\n          src=\"${this.avatar}\"\n          alt=\"${this.altText || nothing}\"\n          loading=\"${this.loading}\"\n        class=\"md3-list-item__avatar\" />\n     `;\n  }\n}\n"]}

package/list/lib/icon/_list-item-icon.scss

@@ -33,6 +33,8 @@ $_reference: (
     @each $token, $value in $tokens {
       --_#{$token}: #{$value};
     }
+
+    display: inline-flex;
   }
 
   .md3-list-item__icon {
@@ -45,7 +47,7 @@ $_reference: (
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
-    display: inline-block;
+    display: inline-flex;
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;

package/list/lib/icon/list-item-icon-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_list-item-icon-color: var(--md-list-item-icon-list-item-icon-color, #000);--_list-item-icon-size: var(--md-list-item-icon-list-item-icon-size, 0);--_list-item-icon-opacity: var(--md-list-item-icon-list-item-icon-opacity, 1)}.md3-list-item__icon{color:var(--_list-item-icon-color);opacity:var(--_list-item-icon-opacity);font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:var(--_list-item-icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}/*# sourceMappingURL=list-item-icon-styles.css.map */
+export const styles = css `:host{--_list-item-icon-color: var(--md-list-item-icon-list-item-icon-color, #000);--_list-item-icon-size: var(--md-list-item-icon-list-item-icon-size, 0);--_list-item-icon-opacity: var(--md-list-item-icon-list-item-icon-opacity, 1);display:inline-flex}.md3-list-item__icon{color:var(--_list-item-icon-color);opacity:var(--_list-item-icon-opacity);font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:var(--_list-item-icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}/*# sourceMappingURL=list-item-icon-styles.css.map */
 `;
 //# sourceMappingURL=list-item-icon-styles.css.js.map

package/list/lib/icon/list-item-icon-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-icon-styles.css.js","sourceRoot":"","sources":["list-item-icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-icon-color: var(--md-list-item-icon-list-item-icon-color, #000);--_list-item-icon-size: var(--md-list-item-icon-list-item-icon-size, 0);--_list-item-icon-opacity: var(--md-list-item-icon-list-item-icon-opacity, 1)}.md3-list-item__icon{color:var(--_list-item-icon-color);opacity:var(--_list-item-icon-opacity);font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:var(--_list-item-icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}/*# sourceMappingURL=list-item-icon-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-icon-styles.css.js","sourceRoot":"","sources":["list-item-icon-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-icon-color: var(--md-list-item-icon-list-item-icon-color, #000);--_list-item-icon-size: var(--md-list-item-icon-list-item-icon-size, 0);--_list-item-icon-opacity: var(--md-list-item-icon-list-item-icon-opacity, 1);display:inline-flex}.md3-list-item__icon{color:var(--_list-item-icon-color);opacity:var(--_list-item-icon-opacity);font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:var(--_list-item-icon-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-flex;white-space:nowrap;word-wrap:normal;direction:ltr;height:100%;width:100%;padding-inline-start:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}/*# sourceMappingURL=list-item-icon-styles.css.map */\n`;\n "]}

package/list/lib/icon/list-item-icon.d.ts

@@ -4,9 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement, TemplateResult } from 'lit';
-/** @soyCompatible */
 export declare class ListItemIcon extends LitElement {
-    media: string;
-    /** @soyTemplate */
     render(): TemplateResult;
 }

package/list/lib/icon/list-item-icon.js

@@ -3,24 +3,13 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-/** @soyCompatible */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class ListItemIcon extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.media = 'icon';
-    }
-    /** @soyTemplate */
     render() {
         return html `
       <span class="md3-list-item__icon"><slot></slot></span>
     `;
     }
 }
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
-], ListItemIcon.prototype, "media", void 0);
 //# sourceMappingURL=list-item-icon.js.map

package/list/lib/icon/list-item-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-icon.js","sourceRoot":"","sources":["list-item-icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,qBAAqB;AACrB,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAC2C,UAAK,GAAG,MAAM,CAAC;IAQ1D,CAAC;IANC,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;CACF;AAR0C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;2CAAgB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/** @soyCompatible */\nexport class ListItemIcon extends LitElement {\n  @property({type: String, reflect: true}) media = 'icon';\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <span class=\"md3-list-item__icon\"><slot></slot></span>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"list-item-icon.js","sourceRoot":"","sources":["list-item-icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAErD,gEAAgE;AAChE,MAAM,OAAO,YAAa,SAAQ,UAAU;IACjC,MAAM;QACb,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemIcon extends LitElement {\n  override render(): TemplateResult {\n    return html`\n      <span class=\"md3-list-item__icon\"><slot></slot></span>\n    `;\n  }\n}\n"]}

package/list/lib/image/_list-item-image.scss

@@ -9,7 +9,7 @@
 @use 'sass:map';
 @use '../../../sass/theme';
 @use '../../../sass/map-ext';
-@use '../tokens';
+@use '../../../tokens';
 
 $_custom-property-prefix: 'list-item-image';
 

package/list/lib/image/list-item-image-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_list-item-leading-image-height: var(--md-list-item-image-list-item-leading-image-height, 56px);--_list-item-leading-image-width: var(--md-list-item-image-list-item-leading-image-width, 56px);--_list-item-leading-image-shape: var(--md-list-item-image-list-item-leading-image-shape, 0)}.md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape)}/*# sourceMappingURL=list-item-image-styles.css.map */
+export const styles = css `:host{--_list-item-leading-image-height: var(--md-list-item-image-list-item-leading-image-height, 56px);--_list-item-leading-image-width: var(--md-list-item-image-list-item-leading-image-width, 56px);--_list-item-leading-image-shape: var(--md-list-item-image-list-item-leading-image-shape, 0px)}.md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape)}/*# sourceMappingURL=list-item-image-styles.css.map */
 `;
 //# sourceMappingURL=list-item-image-styles.css.js.map

package/list/lib/image/list-item-image-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-image-styles.css.js","sourceRoot":"","sources":["list-item-image-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-image-height: var(--md-list-item-image-list-item-leading-image-height, 56px);--_list-item-leading-image-width: var(--md-list-item-image-list-item-leading-image-width, 56px);--_list-item-leading-image-shape: var(--md-list-item-image-list-item-leading-image-shape, 0)}.md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape)}/*# sourceMappingURL=list-item-image-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-image-styles.css.js","sourceRoot":"","sources":["list-item-image-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_list-item-leading-image-height: var(--md-list-item-image-list-item-leading-image-height, 56px);--_list-item-leading-image-width: var(--md-list-item-image-list-item-leading-image-width, 56px);--_list-item-leading-image-shape: var(--md-list-item-image-list-item-leading-image-shape, 0px)}.md3-list-item__image{display:inline-flex;margin-block-end:8px;margin-block-start:8px;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape)}/*# sourceMappingURL=list-item-image-styles.css.map */\n`;\n "]}

package/list/lib/image/list-item-image.d.ts

@@ -4,11 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement, TemplateResult } from 'lit';
-/** @soyCompatible */
 export declare class ListItemImage extends LitElement {
-    media: string;
+    /**
+     * The image `src`.
+     */
     image: string;
-    altText?: string;
-    /** @soyTemplate */
+    /**
+     * The image `alt`.
+     */
+    altText: string;
+    /**
+     * The image `loading` attribute.
+     */
+    loading: 'eager' | 'lazy';
     render(): TemplateResult;
 }

package/list/lib/image/list-item-image.js

@@ -4,34 +4,45 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-/** @soyCompatible */
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class ListItemImage extends LitElement {
     constructor() {
         super(...arguments);
-        this.media = 'image';
+        /**
+         * The image `src`.
+         */
         this.image = '';
+        /**
+         * The image `alt`.
+         */
+        this.altText = '';
+        /**
+         * The image `loading` attribute.
+         */
+        this.loading = 'eager';
     }
-    /** @soyTemplate */
     render() {
         return html `
-        <img src="${this.image}" alt="${ifDefined(this.altText)}"
-         class="md3-list-item__image" />
+      <img
+          src="${this.image}"
+          alt="${this.altText || nothing}"
+          loading=${this.loading}
+          class="md3-list-item__image" />
       `;
     }
 }
 __decorate([
-    property({ type: String, reflect: true }),
+    property(),
     __metadata("design:type", Object)
-], ListItemImage.prototype, "media", void 0);
+], ListItemImage.prototype, "image", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
+    property(),
     __metadata("design:type", Object)
-], ListItemImage.prototype, "image", void 0);
+], ListItemImage.prototype, "altText", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
+    property(),
     __metadata("design:type", String)
-], ListItemImage.prototype, "altText", void 0);
+], ListItemImage.prototype, "loading", void 0);
 //# sourceMappingURL=list-item-image.js.map

package/list/lib/image/list-item-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-image.js","sourceRoot":"","sources":["list-item-image.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,qBAAqB;AACrB,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAC2C,UAAK,GAAG,OAAO,CAAC;QAChB,UAAK,GAAG,EAAE,CAAC;IAUtD,CAAC;IAPC,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,KAAK,UAAU,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;OAExD,CAAC;IACN,CAAC;CACF;AAX0C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;4CAAiB;AAChB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;4CAAY;AACX;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;8CAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\n/** @soyCompatible */\nexport class ListItemImage extends LitElement {\n  @property({type: String, reflect: true}) media = 'image';\n  @property({type: String, reflect: true}) image = '';\n  @property({type: String, reflect: true}) altText?: string;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n        <img src=\"${this.image}\" alt=\"${ifDefined(this.altText)}\"\n         class=\"md3-list-item__image\" />\n      `;\n  }\n}\n"]}
+{"version":3,"file":"list-item-image.js","sourceRoot":"","sources":["list-item-image.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,gEAAgE;AAChE,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QACE;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB;;WAEG;QACS,YAAO,GAAG,EAAE,CAAC;QAEzB;;WAEG;QACS,YAAO,GAAmB,OAAO,CAAC;IAWhD,CAAC;IATU,MAAM;QACb,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,OAAO,IAAI,OAAO;oBACpB,IAAI,CAAC,OAAO;;OAEzB,CAAC;IACN,CAAC;CACF;AArBa;IAAX,QAAQ,EAAE;;4CAAY;AAKX;IAAX,QAAQ,EAAE;;8CAAc;AAKb;IAAX,QAAQ,EAAE;;8CAAmC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemImage extends LitElement {\n  /**\n   * The image `src`.\n   */\n  @property() image = '';\n\n  /**\n   * The image `alt`.\n   */\n  @property() altText = '';\n\n  /**\n   * The image `loading` attribute.\n   */\n  @property() loading: 'eager'|'lazy' = 'eager';\n\n  override render(): TemplateResult {\n    return html`\n      <img\n          src=\"${this.image}\"\n          alt=\"${this.altText || nothing}\"\n          loading=${this.loading}\n          class=\"md3-list-item__image\" />\n      `;\n  }\n}\n"]}

package/list/lib/list-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-list-container-color, #fff);--_list-divider-color: var(--md-list-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-list-divider-height, 1px);--_container-surface-tint-layer-color: var(--md-list-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-list-container-elevation, 0);--md-elevation-level:var(--_container-elevation);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color);color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative;--md-list-divider-list-divider-color:var(--_list-divider-color);--md-list-divider-list-divider-height:var(--_list-divider-height)}md-elevation{inset:0;position:absolute;z-index:0}/*# sourceMappingURL=list-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fffbfe));color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
 `;
 //# sourceMappingURL=list-styles.css.js.map

package/list/lib/list-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-list-container-color, #fff);--_list-divider-color: var(--md-list-list-divider-color, #c4c7c5);--_list-divider-height: var(--md-list-list-divider-height, 1px);--_container-surface-tint-layer-color: var(--md-list-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-list-container-elevation, 0);--md-elevation-level:var(--_container-elevation);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color);color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative;--md-list-divider-list-divider-color:var(--_list-divider-color);--md-list-divider-list-divider-height:var(--_list-divider-height)}md-elevation{inset:0;position:absolute;z-index:0}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fffbfe));color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}

package/list/lib/list.d.ts

@@ -3,44 +3,115 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../elevation/elevation.js';
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { ARIARole } from '../../types/aria.js';
 import { ListItem } from './listitem/list-item.js';
-/** @soyCompatible */
 export declare class List extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     ariaLabel: string;
     ariaActivedescendant: string;
     role: ARIARole;
-    listId: string;
+    /**
+     * The tabindex of the underlying list.
+     */
     listTabIndex: number;
-    items: ListItem[];
-    activeListItem: ListItem | null;
     listRoot: HTMLElement;
-    listItemTagName: string;
-    protected assignedElements: HTMLElement[] | null;
-    firstUpdated(changedProperties: PropertyValues): void;
-    /** @soyTemplate */
+    /**
+     * An array of activatable and disableable list items. Queries every assigned
+     * element that has the `md-list-item` attribute.
+     *
+     * _NOTE:_ This is a shallow, flattened query via
+     * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct
+     * children / directly slotted elements.
+     */
+    items: ListItem[];
     render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
+    /**
+     * Renders the main list element.
+     */
+    protected renderList(): TemplateResult<1>;
+    /**
+     * The classes to be applied to the underlying list.
+     */
+    protected getListClasses(): ClassInfo;
+    /**
+     * The content to be slotted into the list.
+     */
+    protected renderContent(): TemplateResult<1>;
+    /**
+     * Handles keyboard navigation in the list.
+     *
+     * @param event {KeyboardEvent} The keyboard event that triggers this handler.
+     */
     handleKeydown(event: KeyboardEvent): void;
-    protected activateListItem(item: ListItem): void;
-    protected deactivateListItem(item: ListItem): void;
-    protected isListItemActive(item: ListItem): boolean;
-    protected handleAction(event: CustomEvent): void;
-    activateFirstItem(): void;
-    activateLastItem(): void;
-    resetActiveListItem(): void;
-    focusListRoot(): void;
-    /** Updates `this.items` based on slot elements in the DOM. */
-    protected updateItems(): void;
-    /** @return Whether the given element is a list item element. */
-    private isListItem;
-    private getFirstItem;
-    private getLastItem;
-    private getPrevItem;
-    private getNextItem;
+    /**
+     * Activates the first non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to activate the
+     * first item.
+     */
+    static activateFirstItem<T extends ListItem>(items: T[]): void;
+    /**
+     * Activates the last non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to activate the
+     * last item.
+     */
+    static activateLastItem<T extends ListItem>(items: T[]): void;
+    /**
+     * Deactivates the currently active item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items from which to deactivate the
+     * active item.
+     * @returns A record of the deleselcted activated item including the item and
+     * the index of the item or `null` if none are deactivated.
+     */
+    static deactivateActiveItem<T extends ListItem>(items: T[]): {
+        item: T;
+        index: number;
+    };
+    focus(): void;
+    /**
+     * Retrieves the the first activated item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns A record of the first activated item including the item and the
+     * index of the item or `null` if none are activated.
+     */
+    static getActiveItem<T extends ListItem>(items: T[]): {
+        item: T;
+        index: number;
+    };
+    /**
+     * Retrieves the the first non-disabled item of a given array of items. This
+     * the first item that is not disabled.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns The first activatable item or `null` if none are activatable.
+     */
+    static getFirstActivatableItem<T extends ListItem>(items: T[]): T;
+    /**
+     * Retrieves the the last non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @returns The last activatable item or `null` if none are activatable.
+     */
+    static getLastActivatableItem<T extends ListItem>(items: T[]): T;
+    /**
+     * Retrieves the the next non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @param index {{index: number}} The index to search from.
+     * @returns The next activatable item or `null` if none are activatable.
+     */
+    protected static getNextItem<T extends ListItem>(items: T[], index: number): T;
+    /**
+     * Retrieves the the previous non-disabled item of a given array of items.
+     *
+     * @param items {Array<ListItem>} The items to search.
+     * @param index {{index: number}} The index to search from.
+     * @returns The previous activatable item or `null` if none are activatable.
+     */
+    protected static getPrevItem<T extends ListItem>(items: T[], index: number): T;
 }