@material/web 1.0.0-pre.6 → 1.0.0-pre.7

package/linearprogress/lib/linear-progress-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress-styles.css.js","sourceRoot":"","sources":["linear-progress-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{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);display:block;position:relative;min-inline-size:80px;block-size:var(--_track-height);content-visibility:auto;contain:strict}.linear-progress,.track,.buffer-bar,.bar,.bar-inner{position:absolute}.linear-progress{inset:0;outline:rgba(0,0,0,0) solid 1px;border-radius:var(--_track-shape);overflow:hidden;display:flex;align-items:center}.bar{animation:none;inline-size:100%;block-size:var(--_active-indicator-height);transform-origin:left center;will-change:transform;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.buffer-bar{background:var(--_track-color);inset:0;will-change:transform;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.track{inset:0;will-change:transform;animation:linear infinite 250ms;animation-name:buffering;background:0/calc(var(--_track-height) / 2 * 5) 100% radial-gradient(circle at calc(var(--_track-height) / 2 * 2), var(--_track-color) 0, var(--_track-color) calc(var(--_track-height) / 2), transparent calc(var(--_track-height) / 2))}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .track{display:none}.indeterminate.animation-ready .primary-bar{will-change:transform;animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate.animation-ready .primary-bar>.bar-inner{will-change:transform;animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.animation-ready.four-colors .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-colors;animation-duration:2s,4s}.indeterminate.animation-ready .secondary-bar{will-change:transform;animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate.animation-ready .secondary-bar>.bar-inner{will-change:transform;animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.animation-ready.four-colors .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-colors;animation-duration:2s,4s}:host-context([dir=rtl]) .linear-progress .bar{transform-origin:right center}:host-context([dir=rtl]) .linear-progress .buffer-bar{transform-origin:right center}:host-context([dir=rtl]) .linear-progress .track{animation-name:buffering-rtl}:host-context([dir=rtl]) .linear-progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .linear-progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .linear-progress .bar{transform-origin:right center}:host([dir=rtl]) .linear-progress .buffer-bar{transform-origin:right center}:host([dir=rtl]) .linear-progress .track{animation-name:buffering-rtl}:host([dir=rtl]) .linear-progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .linear-progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.linear-progress:dir(rtl) .bar{transform-origin:right center}.linear-progress:dir(rtl) .buffer-bar{transform-origin:right center}.linear-progress:dir(rtl) .track{animation-name:buffering-rtl}.linear-progress:dir(rtl).indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}.linear-progress:dir(rtl).indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 200.611%))}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate-rtl{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes four-colors{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media screen and (forced-colors: active){.linear-progress{--_active-indicator-color: canvastext;--_track-color: graytext;border:1px solid canvastext}.indeterminate.linear-progress{--_track-color: canvas}}/*# sourceMappingURL=linear-progress-styles.css.map */\n`;\n "]}

package/linearprogress/lib/linear-progress-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './linear-progress';
+
+@include linear-progress.styles;

package/linearprogress/lib/linear-progress.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+/**
+ * LinearProgress component.
+ */
+export declare class LinearProgress extends LitElement {
+    /**
+     * Whether or not to render indeterminate progress in an animated state.
+     */
+    indeterminate: boolean;
+    /**
+     * Progress to display, a fraction between 0 and 1.
+     */
+    progress: number;
+    /**
+     * Buffer amount to display, a fraction between 0 and 1.
+     */
+    buffer: number;
+    /**
+     * Whether or not to render indeterminate mode using 4 colors instead of one.
+     *
+     */
+    fourColors: boolean;
+    protected rootEl: HTMLElement;
+    protected animationReady: boolean;
+    protected resizeObserver: ResizeObserver | null;
+    protected render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    protected restartAnimation(): Promise<void>;
+}

package/linearprogress/lib/linear-progress.js

@@ -0,0 +1,127 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
+/**
+ * LinearProgress component.
+ */
+export class LinearProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not to render indeterminate progress in an animated state.
+         */
+        this.indeterminate = false;
+        /**
+         * Progress to display, a fraction between 0 and 1.
+         */
+        this.progress = 0;
+        /**
+         * Buffer amount to display, a fraction between 0 and 1.
+         */
+        this.buffer = 1;
+        /**
+         * Whether or not to render indeterminate mode using 4 colors instead of one.
+         *
+         */
+        this.fourColors = false;
+        this.animationReady = true;
+        this.resizeObserver = null;
+    }
+    // Note, the indeterminate animation is rendered with transform %'s
+    // Previously, this was optimized to use px calculated with the resizeObserver
+    // due to a now fixed Chrome bug: crbug.com/389359.
+    render() {
+        const rootClasses = {
+            'indeterminate': this.indeterminate,
+            'animation-ready': this.animationReady,
+            'four-colors': this.fourColors
+        };
+        const progressStyles = {
+            transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`
+        };
+        const bufferStyles = {
+            transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
+        };
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <div
+          role="progressbar"
+          class="linear-progress ${classMap(rootClasses)}"
+          aria-label="${ariaLabel || nothing}"
+          aria-valuemin="0"
+          aria-valuemax="1"
+          aria-valuenow="${this.indeterminate ? nothing : this.progress}">
+        <div class="track"></div>
+        <div class="buffer-bar" style=${styleMap(bufferStyles)}></div>
+        <div class="bar primary-bar" style=${styleMap(progressStyles)}>
+          <div class="bar-inner"></div>
+        </div>
+        <div class="bar secondary-bar">
+          <div class="bar-inner"></div>
+        </div>
+      </div>`;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        // wait for rendering.
+        await this.updateComplete;
+        if (this.resizeObserver) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.indeterminate) {
+                this.restartAnimation();
+            }
+        });
+        this.resizeObserver.observe(this.rootEl);
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        super.disconnectedCallback();
+    }
+    // When size changes, restart the animation
+    // to avoid jank.
+    async restartAnimation() {
+        await this.updateComplete;
+        this.animationReady = false;
+        await new Promise(requestAnimationFrame);
+        this.animationReady = true;
+        await this.updateComplete;
+    }
+}
+_a = LinearProgress;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+__decorate([
+    property({ type: Boolean })
+], LinearProgress.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Number })
+], LinearProgress.prototype, "progress", void 0);
+__decorate([
+    property({ type: Number })
+], LinearProgress.prototype, "buffer", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'four-colors' })
+], LinearProgress.prototype, "fourColors", void 0);
+__decorate([
+    query('.linear-progress')
+], LinearProgress.prototype, "rootEl", void 0);
+__decorate([
+    state()
+], LinearProgress.prototype, "animationReady", void 0);
+//# sourceMappingURL=linear-progress.js.map

package/linearprogress/lib/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * LinearProgress component.\n */\nexport class LinearProgress extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * Whether or not to render indeterminate progress in an animated state.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Progress to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) progress = 0;\n\n  /**\n   * Buffer amount to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) buffer = 1;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   *\n   */\n  @property({type: Boolean, attribute: 'four-colors'}) fourColors = false;\n\n  @query('.linear-progress') protected rootEl!: HTMLElement;\n\n  @state() protected animationReady = true;\n  protected resizeObserver: ResizeObserver|null = null;\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override render() {\n    const rootClasses = {\n      'indeterminate': this.indeterminate,\n      'animation-ready': this.animationReady,\n      'four-colors': this.fourColors\n    };\n\n    const progressStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`\n    };\n    const bufferStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`\n    };\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div\n          role=\"progressbar\"\n          class=\"linear-progress ${classMap(rootClasses)}\"\n          aria-label=\"${ariaLabel || nothing}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"1\"\n          aria-valuenow=\"${this.indeterminate ? nothing : this.progress}\">\n        <div class=\"track\"></div>\n        <div class=\"buffer-bar\" style=${styleMap(bufferStyles)}></div>\n        <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n          <div class=\"bar-inner\"></div>\n        </div>\n        <div class=\"bar secondary-bar\">\n          <div class=\"bar-inner\"></div>\n        </div>\n      </div>`;\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback();\n    // wait for rendering.\n    await this.updateComplete;\n    if (this.resizeObserver) {\n      return;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.indeterminate) {\n        this.restartAnimation();\n      }\n    });\n    this.resizeObserver.observe(this.rootEl);\n  }\n\n  override disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  // When size changes, restart the animation\n  // to avoid jank.\n  protected async restartAnimation() {\n    await this.updateComplete;\n    this.animationReady = false;\n    await new Promise(requestAnimationFrame);\n    this.animationReady = true;\n    await this.updateComplete;\n  }\n}\n"]}

package/linearprogress/linear-progress.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LinearProgress } from './lib/linear-progress.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-linear-progress': MdLinearProgress;
+    }
+}
+/**
+ * @summary Linear progress indicators display progress by animating along the
+ * length of a fixed, visible track.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+export declare class MdLinearProgress extends LinearProgress {
+    static styles: import("lit").CSSResult[];
+}

package/linearprogress/linear-progress.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { LinearProgress } from './lib/linear-progress.js';
+import { styles } from './lib/linear-progress-styles.css.js';
+/**
+ * @summary Linear progress indicators display progress by animating along the
+ * length of a fixed, visible track.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+let MdLinearProgress = class MdLinearProgress extends LinearProgress {
+};
+MdLinearProgress.styles = [styles];
+MdLinearProgress = __decorate([
+    customElement('md-linear-progress')
+], MdLinearProgress);
+export { MdLinearProgress };
+//# sourceMappingURL=linear-progress.js.map

package/linearprogress/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAQ3D;;;;;;;;GAQG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {LinearProgress} from './lib/linear-progress.js';\nimport {styles} from './lib/linear-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-linear-progress': MdLinearProgress;\n  }\n}\n\n/**\n * @summary Linear progress indicators display progress by animating along the\n * length of a fixed, visible track.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-linear-progress')\nexport class MdLinearProgress extends LinearProgress {\n  static override styles = [styles];\n}\n"]}

package/list/lib/_list.scss

@@ -18,18 +18,15 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $reference: tokens.md-comp-list-values();
-  $reference: resolve-tokens($reference);
-  $tokens: resolve-tokens($tokens);
-  $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: theme.create-theme-vars($tokens, list);
+  $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-list-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
-  $tokens: resolve-tokens(tokens.md-comp-list-values());
-  $tokens: theme.create-theme-vars($tokens, list);
+  $tokens: tokens.md-comp-list-values();
 
   :host {
     @each $token, $value in $tokens {
@@ -42,6 +39,7 @@
 
   .md3-list {
     background-color: var(--_container-color);
+    border-radius: inherit;
     display: block;
     list-style-type: none;
     margin: 0;
@@ -53,44 +51,3 @@
     position: relative;
   }
 }
-
-/// 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) {
-  // Accept container-color token in the theme() mixin.
-  $container-color: map.get($tokens, container-color);
-
-  @if not $container-color {
-    // If not defined, rename the list-item-container-color token. This is
-    // useful for our styles() mixin where we simply feed this function the comp
-    // tokens from the compiler and no `container-color` token.
-    $container-color: map.get($tokens, list-item-container-color);
-    $tokens: map.set($tokens, container-color, $container-color);
-  }
-
-  $list-tokens: remove-unused-tokens($tokens);
-
-  @return $list-tokens;
-}
-
-// removes unused tokens
-@function remove-unused-tokens($tokens) {
-  $unused-tokens: ();
-  @each $token in map-keys($tokens) {
-    $index: string.index($token, 'list-item');
-
-    @if $index {
-      $unused-tokens: list.append($unused-tokens, $token);
-    }
-  }
-
-  @each $token in $unused-tokens {
-    $tokens: map.remove($tokens, $token);
-  }
-
-  @return $tokens;
-}

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, var(--md-sys-color-surface, #fef7ff));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;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, var(--md-sys-color-surface, #fef7ff));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# 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, #fef7ff));color:unset;min-width:300px}.md3-list{background-color:var(--_container-color);border-radius:inherit;display:block;list-style-type:none;margin:0;min-width:inherit;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}

package/list/lib/list.d.ts

@@ -9,9 +9,7 @@ import { ARIARole } from '../../types/aria.js';
 import { ListItem } from './listitem/list-item.js';
 export declare class List extends LitElement {
     static shadowRootOptions: ShadowRootInit;
-    ariaLabel: string;
-    ariaActivedescendant: string;
-    role: ARIARole;
+    type: ARIARole | '';
     /**
      * The tabindex of the underlying list.
      */

package/list/lib/list.js

@@ -3,14 +3,12 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-// Required for @ariaProperty
-// tslint:disable:no-new-decorators
-import { html, LitElement } from 'lit';
+var _a;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { keydownHandler } from '../../focus/strong-focus.js';
 const NAVIGABLE_KEYS = {
     ArrowDown: 'ArrowDown',
@@ -26,8 +24,7 @@ function isNavigableKey(key) {
 export class List extends LitElement {
     constructor() {
         super(...arguments);
-        // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-        this.role = 'list';
+        this.type = 'list';
         /**
          * The tabindex of the underlying list.
          */
@@ -40,11 +37,13 @@ export class List extends LitElement {
      * Renders the main list element.
      */
     renderList() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `
     <ul class="md3-list ${classMap(this.getListClasses())}"
-        aria-label="${ifDefined(this.ariaLabel)}"
+        aria-label=${ariaLabel || nothing}
         tabindex=${this.listTabIndex}
-        role=${this.role}
+        role=${this.type || nothing}
         @keydown=${this.handleKeydown}
         >
       ${this.renderContent()}
@@ -250,36 +249,21 @@ export class List extends LitElement {
         return null;
     }
 }
+_a = List;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 List.shadowRootOptions = { mode: 'open', delegatesFocus: true };
 __decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata("design:type", String)
-], List.prototype, "ariaLabel", void 0);
+    property()
+], List.prototype, "type", void 0);
 __decorate([
-    ariaProperty,
-    property({ type: String, attribute: 'data-aria-activedescendant', noAccessor: true }),
-    __metadata("design:type", String)
-], List.prototype, "ariaActivedescendant", void 0);
-__decorate([
-    ariaProperty
-    // tslint:disable-next-line
-    ,
-    property({ type: String, attribute: 'data-role', noAccessor: true })
-    // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-    ,
-    __metadata("design:type", String)
-], List.prototype, "role", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
+    property({ type: Number })
 ], List.prototype, "listTabIndex", void 0);
 __decorate([
-    query('.md3-list'),
-    __metadata("design:type", HTMLElement)
+    query('.md3-list')
 ], List.prototype, "listRoot", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true, selector: '[md-list-item]' }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ flatten: true, selector: '[md-list-item]' })
 ], List.prototype, "items", void 0);
 //# sourceMappingURL=list.js.map

package/list/lib/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {keydownHandler} from '../../focus/strong-focus.js';\nimport {ARIARole} from '../../types/aria.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n} as const;\n\ntype NavigatableValues = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\nconst navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS));\n\nfunction isNavigableKey(key: string): key is NavigatableValues {\n  return navigableKeySet.has(key as NavigatableValues);\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @ariaProperty\n  @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n  override ariaLabel!: string;\n\n  @ariaProperty\n  @property(\n      {type: String, attribute: 'data-aria-activedescendant', noAccessor: true})\n  ariaActivedescendant!: string;\n\n  @ariaProperty\n  // tslint:disable-next-line\n  @property({type: String, attribute: 'data-role', noAccessor: true})\n  // @ts-ignore(b/264292293): Use `override` with TS 4.9+\n  role: ARIARole = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number}) listTabIndex: number = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-list-item]'})\n  items!: ListItem[];\n\n  override render(): TemplateResult {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  protected renderList() {\n    return html`\n    <ul class=\"md3-list ${classMap(this.getListClasses())}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        tabindex=${this.listTabIndex}\n        role=${this.role}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The classes to be applied to the underlying list.\n   */\n  protected getListClasses(): ClassInfo {\n    return {};\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  protected renderContent() {\n    return html`<span><slot @click=${(e: Event) => {\n      e.stopPropagation();\n    }}></slot></span>`;\n  }\n\n  /**\n   * Handles keyboard navigation in the list.\n   *\n   * @param event {KeyboardEvent} The keyboard event that triggers this handler.\n   */\n  handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    if (!isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly so we don't re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = List.getActiveItem(items);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n\n    keydownHandler(event);\n    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        if (activeItemRecord) {\n          const next = List.getNextItem(items, activeItemRecord.index);\n\n          if (next) next.active = true;\n        } else {\n          List.activateFirstItem(items);\n        }\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        if (activeItemRecord) {\n          const prev = List.getPrevItem(items, activeItemRecord.index);\n          if (prev) prev.active = true;\n        } else {\n          items[items.length - 1].active = true;\n        }\n        break;\n\n      // Activate the first item\n      case NAVIGABLE_KEYS.Home:\n        List.activateFirstItem(items);\n        break;\n\n      // Activate the last item\n      case NAVIGABLE_KEYS.End:\n        List.activateLastItem(items);\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Activates the first non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * first item.\n   */\n  static activateFirstItem<T extends ListItem>(items: T[]) {\n    // NOTE: These selector functions are static and not on the instance such\n    // that multiple operations can be chained and we do not have to re-query\n    // the DOM\n    const firstItem = List.getFirstActivatableItem(items);\n    if (firstItem) {\n      firstItem.active = true;\n    }\n  }\n\n  /**\n   * Activates the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * last item.\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n  }\n\n  /**\n   * Deactivates the currently active item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to deactivate the\n   * active item.\n   * @returns A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   */\n  static deactivateActiveItem<T extends ListItem>(items: T[]) {\n    const activeItem = List.getActiveItem(items);\n    if (activeItem) {\n      activeItem.item.active = false;\n    }\n    return activeItem;\n  }\n\n  override focus() {\n    this.listRoot.focus();\n  }\n\n  /**\n   * Retrieves the the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   */\n  static getActiveItem<T extends ListItem>(items: T[]) {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (item.active) {\n        return {\n          item,\n          index: i,\n        };\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the the first non-disabled item of a given array of items. This\n   * the first item that is not disabled.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The first activatable item or `null` if none are activatable.\n   */\n  static getFirstActivatableItem<T extends ListItem>(items: T[]) {\n    for (const item of items) {\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The last activatable item or `null` if none are activatable.\n   */\n  static getLastActivatableItem<T extends ListItem>(items: T[]) {\n    for (let i = items.length - 1; i >= 0; i--) {\n      const item = items[i];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the the next non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @returns The next activatable item or `null` if none are activatable.\n   */\n  protected static getNextItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const nextIndex = (i + index) % items.length;\n      const item = items[nextIndex];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the the previous non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @returns The previous activatable item or `null` if none are activatable.\n   */\n  protected static getPrevItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const prevIndex = (index - i + items.length) % items.length;\n      const item = items[prevIndex];\n\n      if (!item.disabled) {\n        return item;\n      }\n    }\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAK3D,MAAM,cAAc,GAAG;IACrB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;CACF,CAAC;AAIX,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,SAAS,cAAc,CAAC,GAAW;IACjC,OAAO,eAAe,CAAC,GAAG,CAAC,GAAwB,CAAC,CAAC;AACvD,CAAC;AAED,gEAAgE;AAChE,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAQc,SAAI,GAAgB,MAAM,CAAC;QAEvC;;WAEG;QACuB,iBAAY,GAAG,CAAC,CAAC;IA+P7C,CAAC;IAhPU,MAAM;QACb,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IACO,UAAU;QAClB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;0BACW,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;qBACpC,SAAS,IAAI,OAAO;mBACtB,IAAI,CAAC,YAAY;eACrB,IAAI,CAAC,IAAI,IAAI,OAAO;mBAChB,IAAI,CAAC,aAAa;;QAE7B,IAAI,CAAC,aAAa,EAAE;;GAEzB,CAAC;IACF,CAAC;IAED;;OAEG;IACO,cAAc;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED;;OAEG;IACO,aAAa;QACrB,OAAO,IAAI,CAAA,sBAAsB,CAAC,CAAQ,EAAE,EAAE;YAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,iBAAiB,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,KAAoB;QAChC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;YACxB,OAAO;SACR;QACD,4EAA4E;QAC5E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEzB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAO;SACR;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEnD,IAAI,gBAAgB,EAAE;YACpB,gBAAgB,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACtC;QAED,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,QAAQ,GAAG,EAAE;YACX,yBAAyB;YACzB,KAAK,cAAc,CAAC,SAAS;gBAC3B,IAAI,gBAAgB,EAAE;oBACpB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBAE7D,IAAI,IAAI;wBAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;iBAC9B;qBAAM;oBACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;iBAC/B;gBACD,MAAM;YAER,6BAA6B;YAC7B,KAAK,cAAc,CAAC,OAAO;gBACzB,IAAI,gBAAgB,EAAE;oBACpB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBAC7D,IAAI,IAAI;wBAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;iBAC9B;qBAAM;oBACL,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC;iBACvC;gBACD,MAAM;YAER,0BAA0B;YAC1B,KAAK,cAAc,CAAC,IAAI;gBACtB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAC9B,MAAM;YAER,yBAAyB;YACzB,KAAK,cAAc,CAAC,GAAG;gBACrB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAC7B,MAAM;YAER;gBACE,MAAM;SACT;IACH,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,iBAAiB,CAAqB,KAAU;QACrD,yEAAyE;QACzE,yEAAyE;QACzE,UAAU;QACV,MAAM,SAAS,GAAG,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;QACtD,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;SACzB;IACH,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,gBAAgB,CAAqB,KAAU;QACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;QACpD,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED;;;;;;;OAOG;IACH,MAAM,CAAC,oBAAoB,CAAqB,KAAU;QACxD,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,UAAU,EAAE;YACd,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SAChC;QACD,OAAO,UAAU,CAAC;IACpB,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,aAAa,CAAqB,KAAU;QACjD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,OAAO;oBACL,IAAI;oBACJ,KAAK,EAAE,CAAC;iBACT,CAAC;aACH;SACF;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,uBAAuB,CAAqB,KAAU;QAC3D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,OAAO,IAAI,CAAC;aACb;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,sBAAsB,CAAqB,KAAU;QAC1D,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,OAAO,IAAI,CAAC;aACb;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;;OAMG;IACO,MAAM,CAAC,WAAW,CAAqB,KAAU,EAAE,KAAa;QACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;YAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,OAAO,IAAI,CAAC;aACb;SACF;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;;OAMG;IACO,MAAM,CAAC,WAAW,CAAqB,KAAU,EAAE,KAAa;QACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5D,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;YAE9B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,OAAO,IAAI,CAAC;aACb;SACF;QACD,OAAO,IAAI,CAAC;IACd,CAAC;;;AA1QD;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAEe,sBAAiB,GACZ,EAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC;AAE9C;IAAX,QAAQ,EAAE;kCAA4B;AAKb;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CAAkB;AAEvB;IAAnB,KAAK,CAAC,WAAW,CAAC;sCAAwB;AAW3C;IADC,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAC,CAAC;mCAChD","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {keydownHandler} from '../../focus/strong-focus.js';\nimport {ARIAMixinStrict, ARIARole} from '../../types/aria.js';\n\nimport {ListItem} from './listitem/list-item.js';\n\nconst NAVIGABLE_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n} as const;\n\ntype NavigatableValues = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\nconst navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS));\n\nfunction isNavigableKey(key: string): key is NavigatableValues {\n  return navigableKeySet.has(key as NavigatableValues);\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property() type: ARIARole|'' = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number}) listTabIndex = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement;\n\n  /**\n   * An array of activatable and disableable list items. Queries every assigned\n   * element that has the `md-list-item` attribute.\n   *\n   * _NOTE:_ This is a shallow, flattened query via\n   * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct\n   * children / directly slotted elements.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-list-item]'})\n  items!: ListItem[];\n\n  override render(): TemplateResult {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  protected renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"md3-list ${classMap(this.getListClasses())}\"\n        aria-label=${ariaLabel || nothing}\n        tabindex=${this.listTabIndex}\n        role=${this.type || nothing}\n        @keydown=${this.handleKeydown}\n        >\n      ${this.renderContent()}\n    </ul>\n  `;\n  }\n\n  /**\n   * The classes to be applied to the underlying list.\n   */\n  protected getListClasses(): ClassInfo {\n    return {};\n  }\n\n  /**\n   * The content to be slotted into the list.\n   */\n  protected renderContent() {\n    return html`<span><slot @click=${(e: Event) => {\n      e.stopPropagation();\n    }}></slot></span>`;\n  }\n\n  /**\n   * Handles keyboard navigation in the list.\n   *\n   * @param event {KeyboardEvent} The keyboard event that triggers this handler.\n   */\n  handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    if (!isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly so we don't re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = List.getActiveItem(items);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n\n    keydownHandler(event);\n    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        if (activeItemRecord) {\n          const next = List.getNextItem(items, activeItemRecord.index);\n\n          if (next) next.active = true;\n        } else {\n          List.activateFirstItem(items);\n        }\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        if (activeItemRecord) {\n          const prev = List.getPrevItem(items, activeItemRecord.index);\n          if (prev) prev.active = true;\n        } else {\n          items[items.length - 1].active = true;\n        }\n        break;\n\n      // Activate the first item\n      case NAVIGABLE_KEYS.Home:\n        List.activateFirstItem(items);\n        break;\n\n      // Activate the last item\n      case NAVIGABLE_KEYS.End:\n        List.activateLastItem(items);\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Activates the first non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * first item.\n   */\n  static activateFirstItem<T extends ListItem>(items: T[]) {\n    // NOTE: These selector functions are static and not on the instance such\n    // that multiple operations can be chained and we do not have to re-query\n    // the DOM\n    const firstItem = List.getFirstActivatableItem(items);\n    if (firstItem) {\n      firstItem.active = true;\n    }\n  }\n\n  /**\n   * Activates the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to activate the\n   * last item.\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n  }\n\n  /**\n   * Deactivates the currently active item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items from which to deactivate the\n   * active item.\n   * @returns A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   */\n  static deactivateActiveItem<T extends ListItem>(items: T[]) {\n    const activeItem = List.getActiveItem(items);\n    if (activeItem) {\n      activeItem.item.active = false;\n    }\n    return activeItem;\n  }\n\n  override focus() {\n    this.listRoot.focus();\n  }\n\n  /**\n   * Retrieves the the first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   */\n  static getActiveItem<T extends ListItem>(items: T[]) {\n    for (let i = 0; i < items.length; i++) {\n      const item = items[i];\n      if (item.active) {\n        return {\n          item,\n          index: i,\n        };\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the the first non-disabled item of a given array of items. This\n   * the first item that is not disabled.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The first activatable item or `null` if none are activatable.\n   */\n  static getFirstActivatableItem<T extends ListItem>(items: T[]) {\n    for (const item of items) {\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the the last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @returns The last activatable item or `null` if none are activatable.\n   */\n  static getLastActivatableItem<T extends ListItem>(items: T[]) {\n    for (let i = items.length - 1; i >= 0; i--) {\n      const item = items[i];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Retrieves the the next non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @returns The next activatable item or `null` if none are activatable.\n   */\n  protected static getNextItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const nextIndex = (i + index) % items.length;\n      const item = items[nextIndex];\n      if (!item.disabled) {\n        return item;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves the the previous non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @param index {{index: number}} The index to search from.\n   * @returns The previous activatable item or `null` if none are activatable.\n   */\n  protected static getPrevItem<T extends ListItem>(items: T[], index: number) {\n    for (let i = 1; i < items.length; i++) {\n      const prevIndex = (index - i + items.length) % items.length;\n      const item = items[prevIndex];\n\n      if (!item.disabled) {\n        return item;\n      }\n    }\n    return null;\n  }\n}\n"]}

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

@@ -17,18 +17,15 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    resolve-tokens(tokens.md-comp-list-values()),
-    resolve-tokens($tokens)
-  );
-  $tokens: theme.create-theme-vars($tokens, 'list');
+  $tokens: theme.validate-theme(tokens.md-comp-list-item-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-list-item-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
-  $tokens: resolve-tokens(tokens.md-comp-list-values());
-  $tokens: theme.create-theme-vars($tokens, 'list');
+  $tokens: tokens.md-comp-list-item-values();
 
   :host {
     @each $token, $value in $tokens {
@@ -88,6 +85,11 @@
   .content-wrapper {
     display: flex;
     width: 100%;
+    border-radius: inherit;
+  }
+
+  md-ripple {
+    border-radius: inherit;
   }
 
   .with-one-line {
@@ -417,64 +419,3 @@
     height: var(--_list-item-large-leading-video-height);
   }
 }
-
-/// Resolves the tokens that are specific to list-item.
-///
-/// 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 by selecting only tokens that have
-/// 'list-item' in its name.
-@function resolve-tokens($tokens) {
-  // Values pulled from b/198759625 spreadsheet
-  $list-item-tokens: (
-    'list-item-leading-space': 16px,
-    'list-item-trailing-space': 16px,
-    'list-item-leading-element-leading-space': 16px,
-    'list-item-leading-video-leading-space': 0px,
-    // Commented out until the comments in the spreadsheet linked above are
-    // resolved regarding vertical alignment.
-    // 'list-item-leading-item-top-space': 8px,
-    // 'list-item-leading-video-top-space': 0px,
-    // 'list-item-leading-item-bottom-space': 8px,
-    // 'list-item-leading-video-bottom-space': 0px,
-    'list-item-trailing-element-headline-trailing-element-space': 16px,
-  );
-
-  @each $token, $value in $tokens {
-    $index: string.index($token, 'list-item');
-
-    @if $index {
-      $list-item-tokens: map.set($list-item-tokens, $token, $value);
-    }
-  }
-
-  $list-item-tokens: _remove-unused-tokens($list-item-tokens);
-
-  @return $list-item-tokens;
-}
-
-// removes unused tokens
-@function _remove-unused-tokens($tokens) {
-  $unused-tokens: (
-    'list-item-container-elevation',
-    'list-item-disabled-state-layer-color',
-    'list-item-disabled-state-layer-opacity',
-    'list-item-dragged-container-elevation',
-    'list-item-dragged-label-text-color',
-    'list-item-dragged-leading-icon-icon-color',
-    'list-item-dragged-state-layer-color',
-    'list-item-dragged-state-layer-opacity',
-    'list-item-dragged-trailing-icon-icon-color',
-    'list-item-overline-color',
-    'list-item-overline-type',
-    'list-item-selected-trailing-icon',
-    'list-item-selected-trailing-icon-color',
-    'list-item-unselected-trailing-icon-color'
-  );
-
-  @each $token in $unused-tokens {
-    $tokens: map.remove($tokens, $token);
-  }
-
-  @return $tokens;
-}

package/list/lib/listitem/forced-colors-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `@media(forced-colors: active){:host{--md-list-list-item-leading-space:16px;--md-list-list-item-trailing-space:16px;--md-list-list-item-leading-element-leading-space:16px;--md-list-list-item-leading-video-leading-space:0px;--md-list-list-item-trailing-element-headline-trailing-element-space:16px;--md-list-list-item-disabled-label-text-color:GrayText;--md-list-list-item-disabled-label-text-opacity:1;--md-list-list-item-disabled-leading-icon-color:GrayText;--md-list-list-item-disabled-leading-icon-opacity:1;--md-list-list-item-disabled-trailing-icon-color:GrayText;--md-list-list-item-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=forced-colors-styles.css.map */
+export const styles = css `@media(forced-colors: active){:host{--md-list-item-list-item-disabled-label-text-color: GrayText;--md-list-item-list-item-disabled-label-text-opacity: 1;--md-list-item-list-item-disabled-leading-icon-color: GrayText;--md-list-item-list-item-disabled-leading-icon-opacity: 1;--md-list-item-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */
 `;
 //# sourceMappingURL=forced-colors-styles.css.js.map

package/list/lib/listitem/forced-colors-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){:host{--md-list-list-item-leading-space:16px;--md-list-list-item-trailing-space:16px;--md-list-list-item-leading-element-leading-space:16px;--md-list-list-item-leading-video-leading-space:0px;--md-list-list-item-trailing-element-headline-trailing-element-space:16px;--md-list-list-item-disabled-label-text-color:GrayText;--md-list-list-item-disabled-label-text-opacity:1;--md-list-list-item-disabled-leading-icon-color:GrayText;--md-list-list-item-disabled-leading-icon-opacity:1;--md-list-list-item-disabled-trailing-icon-color:GrayText;--md-list-list-item-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){:host{--md-list-item-list-item-disabled-label-text-color: GrayText;--md-list-item-list-item-disabled-label-text-opacity: 1;--md-list-item-list-item-disabled-leading-icon-color: GrayText;--md-list-item-list-item-disabled-leading-icon-opacity: 1;--md-list-item-list-item-disabled-trailing-icon-color: GrayText;--md-list-item-list-item-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}