@material/web 1.0.0-pre.13 → 1.0.0-pre.14

package/labs/segmentedbutton/outlined-segmented-button.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { OutlinedSegmentedButton } from './lib/outlined-segmented-button.js';
+import { OutlinedSegmentedButton } from './internal/outlined-segmented-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-outlined-segmented-button': MdOutlinedSegmentedButton;

package/labs/segmentedbutton/outlined-segmented-button.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { OutlinedSegmentedButton } from './lib/outlined-segmented-button.js';
-import { styles as outlinedStyles } from './lib/outlined-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { OutlinedSegmentedButton } from './internal/outlined-segmented-button.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * MdOutlinedSegmentedButton is the custom element for the Material
  * Design outlined segmented button component.

package/labs/segmentedbutton/outlined-segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;GAKG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,uBAAuB;;AACpD,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC;SAFY,yBAAyB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButton} from './lib/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,uBAAuB;;AACpD,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC;SAFY,yBAAyB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButton} from './internal/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/labs/segmentedbuttonset/{lib → internal}/segmented-button-set.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LitElement } from 'lit';
-import { SegmentedButton } from '../../segmentedbutton/lib/segmented-button.js';
+import { SegmentedButton } from '../../segmentedbutton/internal/segmented-button.js';
 /**
  * SegmentedButtonSet is the parent component for two or more
  * `SegmentedButton` components. **Only** `SegmentedButton` components may be

package/labs/segmentedbuttonset/{lib → internal}/segmented-button-set.js

@@ -57,8 +57,8 @@ export class SegmentedButtonSet extends LitElement {
             this.buttons[i].selected = false;
         }
     }
-    handleSegmentedButtonInteraction(e) {
-        const index = this.buttons.indexOf(e.target);
+    handleSegmentedButtonInteraction(event) {
+        const index = this.buttons.indexOf(event.target);
         this.toggleSelection(index);
     }
     toggleSelection(index) {

package/labs/segmentedbuttonset/internal/segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {SegmentedButton} from '../../segmentedbutton/internal/segmented-button.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n */\nexport class SegmentedButtonSet extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) multiselect = false;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(event: CustomEvent) {\n    const index = this.buttons.indexOf(event.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n     <span\n       role=\"group\"\n       @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n       aria-label=${ariaLabel || nothing}\n       class=\"md3-segmented-button-set\">\n       <slot></slot>\n     </span>\n     `;\n  }\n\n  protected getRenderClasses() {\n    return {};\n  }\n}\n"]}

package/labs/segmentedbuttonset/outlined-segmented-button-set.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { OutlinedSegmentedButtonSet } from './lib/outlined-segmented-button-set.js';
+import { OutlinedSegmentedButtonSet } from './internal/outlined-segmented-button-set.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;

package/labs/segmentedbuttonset/outlined-segmented-button-set.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { OutlinedSegmentedButtonSet } from './lib/outlined-segmented-button-set.js';
-import { styles as outlinedStyles } from './lib/outlined-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { OutlinedSegmentedButtonSet } from './internal/outlined-segmented-button-set.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * MdOutlinedSegmentedButtonSet is the custom element for the Material
  * Design outlined segmented button set component.

package/labs/segmentedbuttonset/outlined-segmented-button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;GAKG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,6CAA6C,CAAC;AACvF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './internal/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/list/_list-item.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/listitem/list-item' show theme;
+@forward './internal/listitem/list-item' show theme;

package/list/_list.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/list' show theme;
+@forward './internal/list' show theme;

package/list/harness.d.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { List } from './lib/list.js';
-import { ListItemHarness } from './lib/listitem/harness.js';
-export { ListItemHarness } from './lib/listitem/harness.js';
+import { List } from './internal/list.js';
+import { ListItemHarness } from './internal/listitem/harness.js';
+export { ListItemHarness } from './internal/listitem/harness.js';
 declare const NAVIGABLE_KEYS: {
     readonly ArrowDown: "ArrowDown";
     readonly ArrowUp: "ArrowUp";

package/list/harness.js

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { ListItemHarness } from './lib/listitem/harness.js';
-export { ListItemHarness } from './lib/listitem/harness.js';
+import { ListItemHarness } from './internal/listitem/harness.js';
+export { ListItemHarness } from './internal/listitem/harness.js';
 const NAVIGABLE_KEYS = {
     'ArrowDown': 'ArrowDown',
     'ArrowUp': 'ArrowUp',

package/list/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAG1D,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,MAAM,cAAc,GAAG;IACrB,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;CACJ,CAAC;AASX;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAkB,CAAC,CAAC,CAAC;IACzD,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACM,KAAK,CAAC,QAAQ,CAAC,GAAW,EAAE,OAAO,EAAuB;QACjE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAE,CAAC;QAChE,IAAI,GAAG,EAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAC,CAAC;QAC5B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC/C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {List} from './lib/list.js';\nimport {ListItemHarness} from './lib/listitem/harness.js';\nimport {ListItemEl} from './lib/listitem/list-item.js';\n\nexport {ListItemHarness} from './lib/listitem/harness.js';\n\nconst NAVIGABLE_KEYS = {\n  'ArrowDown': 'ArrowDown',\n  'ArrowUp': 'ArrowUp',\n  'Home': 'Home',\n  'End': 'End',\n} as const;\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n    typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new ListItemHarness(item as ListItemEl));\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n\n  /**\n   * Dispatches a keypress on the list. It may or may not be a supported event.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  override async keypress(key: string, init = {} as KeyboardEventInit) {\n    const nativeList = this.element.renderRoot.querySelector('ul')!;\n    init = {code: key, ...init};\n    this.simulateKeypress(nativeList, key, init);\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,cAAc,GAAG;IACrB,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;CACJ,CAAC;AASX;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAkB,CAAC,CAAC,CAAC;IACzD,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACM,KAAK,CAAC,QAAQ,CAAC,GAAW,EAAE,OAAO,EAAuB;QACjE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAE,CAAC;QAChE,IAAI,GAAG,EAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAC,CAAC;QAC5B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC/C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {List} from './internal/list.js';\nimport {ListItemHarness} from './internal/listitem/harness.js';\nimport {ListItemEl} from './internal/listitem/list-item.js';\n\nexport {ListItemHarness} from './internal/listitem/harness.js';\n\nconst NAVIGABLE_KEYS = {\n  'ArrowDown': 'ArrowDown',\n  'ArrowUp': 'ArrowUp',\n  'Home': 'Home',\n  'End': 'End',\n} as const;\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n    typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new ListItemHarness(item as ListItemEl));\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n\n  /**\n   * Dispatches a keypress on the list. It may or may not be a supported event.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  override async keypress(key: string, init = {} as KeyboardEventInit) {\n    const nativeList = this.element.renderRoot.querySelector('ul')!;\n    init = {code: key, ...init};\n    this.simulateKeypress(nativeList, key, init);\n  }\n}\n"]}

package/list/{lib → internal}/list.js

@@ -52,8 +52,8 @@ export class List extends LitElement {
      * The content to be slotted into the list.
      */
     renderContent() {
-        return html `<span><slot @click=${(e) => {
-            e.stopPropagation();
+        return html `<span><slot @click=${(event) => {
+            event.stopPropagation();
         }}></slot></span>`;
     }
     /**

package/list/{lib → internal}/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\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict, ARIARole} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.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\n/**\n * A record that describes a list item in a list with metadata such a reference\n * to the item and its index in the list.\n */\nexport interface ItemRecord {\n  item: ListItem;\n  index: number;\n}\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  /** @nocollapse */\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, attribute: 'list-tabindex'}) listTabIndex = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement|null;\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  protected override render() {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  private renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"md3-list\"\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 content to be slotted into the list.\n   */\n  private 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    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        this.activateNextItemInternal(items, activeItemRecord);\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        this.activatePreviousItemInternal(items, activeItemRecord);\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  private activateNextItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const next = List.getNextItem(items, activeItemRecord.index);\n\n      if (next) next.active = true;\n\n      return next;\n    } else {\n      return List.activateFirstItem(items);\n    }\n  }\n\n  private activatePreviousItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const prev = List.getPrevItem(items, activeItemRecord.index);\n      if (prev) prev.active = true;\n      return prev;\n    } else {\n      return List.activateLastItem(items);\n    }\n  }\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activateNextItemInternal(items, activeItemRecord);\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activatePreviousItemInternal(items, activeItemRecord);\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   * @nocollapse\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    return firstItem;\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   * @nocollapse\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n    return lastItem;\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   * @return A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   * @nocollapse\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 first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   * @nocollapse\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        } as ItemRecord;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves 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   * @return The first activatable item or `null` if none are activatable.\n   * @nocollapse\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 last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return The last activatable item or `null` if none are activatable.\n   * @nocollapse\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 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   * @return The next activatable item or `null` if none are activatable.\n   */\n  private 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\n    return items[index] ? items[index] : null;\n  }\n\n  /**\n   * Retrieves 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   * @return The previous activatable item or `null` if none are activatable.\n   */\n  private 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\n    return items[index] ? items[index] : null;\n  }\n}\n"]}
+{"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\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict, ARIARole} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.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\n/**\n * A record that describes a list item in a list with metadata such a reference\n * to the item and its index in the list.\n */\nexport interface ItemRecord {\n  item: ListItem;\n  index: number;\n}\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  /** @nocollapse */\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, attribute: 'list-tabindex'}) listTabIndex = 0;\n\n  @query('.md3-list') listRoot!: HTMLElement|null;\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  protected override render() {\n    return this.renderList();\n  }\n\n  /**\n   * Renders the main list element.\n   */\n  private renderList() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n    <ul class=\"md3-list\"\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 content to be slotted into the list.\n   */\n  private renderContent() {\n    return html`<span><slot @click=${(event: Event) => {\n      event.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    event.preventDefault();\n\n    switch (key) {\n      // Activate the next item\n      case NAVIGABLE_KEYS.ArrowDown:\n        this.activateNextItemInternal(items, activeItemRecord);\n        break;\n\n      // Activate the previous item\n      case NAVIGABLE_KEYS.ArrowUp:\n        this.activatePreviousItemInternal(items, activeItemRecord);\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  private activateNextItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const next = List.getNextItem(items, activeItemRecord.index);\n\n      if (next) next.active = true;\n\n      return next;\n    } else {\n      return List.activateFirstItem(items);\n    }\n  }\n\n  private activatePreviousItemInternal(\n      items: ListItem[], activeItemRecord: null|ItemRecord): ListItem|null {\n    if (activeItemRecord) {\n      const prev = List.getPrevItem(items, activeItemRecord.index);\n      if (prev) prev.active = true;\n      return prev;\n    } else {\n      return List.activateLastItem(items);\n    }\n  }\n\n  /**\n   * Activates the next item in the list. If at the end of the list, the first\n   * item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activateNextItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activateNextItemInternal(items, activeItemRecord);\n  }\n\n  /**\n   * Activates the previous item in the list. If at the start of the list, the\n   * last item will be activated.\n   *\n   * @return The activated list item or `null` if there are no items.\n   */\n  activatePreviousItem(): ListItem|null {\n    const items = this.items;\n    const activeItemRecord = List.getActiveItem(items);\n    if (activeItemRecord) {\n      activeItemRecord.item.active = false;\n    }\n    return this.activatePreviousItemInternal(items, activeItemRecord);\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   * @nocollapse\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    return firstItem;\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   * @nocollapse\n   */\n  static activateLastItem<T extends ListItem>(items: T[]) {\n    const lastItem = List.getLastActivatableItem(items);\n    if (lastItem) {\n      lastItem.active = true;\n    }\n    return lastItem;\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   * @return A record of the deleselcted activated item including the item and\n   * the index of the item or `null` if none are deactivated.\n   * @nocollapse\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 first activated item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return A record of the first activated item including the item and the\n   * index of the item or `null` if none are activated.\n   * @nocollapse\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        } as ItemRecord;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Retrieves 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   * @return The first activatable item or `null` if none are activatable.\n   * @nocollapse\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 last non-disabled item of a given array of items.\n   *\n   * @param items {Array<ListItem>} The items to search.\n   * @return The last activatable item or `null` if none are activatable.\n   * @nocollapse\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 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   * @return The next activatable item or `null` if none are activatable.\n   */\n  private 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\n    return items[index] ? items[index] : null;\n  }\n\n  /**\n   * Retrieves 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   * @return The previous activatable item or `null` if none are activatable.\n   */\n  private 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\n    return items[index] ? items[index] : null;\n  }\n}\n"]}

package/list/{lib → internal}/listitem/_list-item.scss

@@ -45,11 +45,6 @@
   :host {
     color: unset;
 
-    @include focus-ring.theme(
-      (
-        'shape': 8px,
-      )
-    );
     @include ripple.theme(
       (
         hover-color: var(--_list-item-hover-state-layer-color),
@@ -60,6 +55,14 @@
     );
   }
 
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape': 8px,
+      )
+    );
+  }
+
   .list-item {
     align-items: center;
     box-sizing: border-box;
@@ -85,7 +88,9 @@
   .content-wrapper {
     display: flex;
     width: 100%;
+    box-sizing: border-box;
     border-radius: inherit;
+    padding-inline-end: var(--_list-item-trailing-space);
   }
 
   md-ripple {
@@ -132,7 +137,6 @@
     box-sizing: border-box;
     flex: 1 0 0;
     padding-inline-start: var(--_list-item-leading-space);
-    padding-inline-end: var(--_list-item-trailing-space);
     z-index: 1;
   }
 
@@ -150,7 +154,7 @@
 
   slot[name='end']::slotted(*),
   .trailing-supporting-text {
-    margin-inline-end: var(
+    margin-inline-start: var(
       --_list-item-trailing-element-headline-trailing-element-space
     );
   }

package/list/internal/listitem/list-item-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_list-item-container-color: var(--md-list-item-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_list-item-container-shape: var(--md-list-item-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-item-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-label-text-opacity: var(--md-list-item-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-item-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-leading-icon-opacity: var(--md-list-item-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-item-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-trailing-icon-opacity: var(--md-list-item-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-item-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-focus-leading-icon-icon-color: var(--md-list-item-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-trailing-icon-icon-color: var(--md-list-item-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-item-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-leading-icon-icon-color: var(--md-list-item-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-item-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-state-layer-opacity: var(--md-list-item-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-item-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-item-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-label-text-line-height: var(--md-list-item-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-item-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-large-leading-video-height: var(--md-list-item-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-item-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-item-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-leading-avatar-color: var(--md-list-item-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-item-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-item-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-item-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-item-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-item-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-item-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-item-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-item-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-item-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-item-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-item-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-leading-icon-icon-color: var(--md-list-item-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-item-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-state-layer-opacity: var(--md-list-item-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-item-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-item-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-item-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-item-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_list-item-three-line-container-height: var(--md-list-item-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-item-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-item-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-item-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-item-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-item-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_list-item-two-line-container-height: var(--md-list-item-list-item-two-line-container-height, 72px);--_list-item-leading-element-leading-space: var(--md-list-item-list-item-leading-element-leading-space, 16px);--_list-item-leading-space: var(--md-list-item-list-item-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-item-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-item-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-trailing-space: var(--md-list-item-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity: var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_list-item-pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;box-sizing:border-box;border-radius:inherit;padding-inline-end:var(--_list-item-trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_list-item-leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_list-item-leading-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-start:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);margin-inline-start:var(--_list-item-leading-video-leading-space);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
+`;
+//# sourceMappingURL=list-item-styles.css.js.map

package/list/{lib → internal}/listitem/list-item-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-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-container-color: var(--md-list-item-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_list-item-container-shape: var(--md-list-item-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-item-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-label-text-opacity: var(--md-list-item-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-item-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-leading-icon-opacity: var(--md-list-item-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-item-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-trailing-icon-opacity: var(--md-list-item-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-item-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-focus-leading-icon-icon-color: var(--md-list-item-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-trailing-icon-icon-color: var(--md-list-item-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-item-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-leading-icon-icon-color: var(--md-list-item-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-item-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-state-layer-opacity: var(--md-list-item-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-item-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-item-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-label-text-line-height: var(--md-list-item-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-item-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-large-leading-video-height: var(--md-list-item-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-item-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-item-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-leading-avatar-color: var(--md-list-item-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-item-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-item-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-item-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-item-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-item-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-item-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-item-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-item-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-item-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-item-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-item-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-leading-icon-icon-color: var(--md-list-item-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-item-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-state-layer-opacity: var(--md-list-item-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-item-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-item-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-item-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-item-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_list-item-three-line-container-height: var(--md-list-item-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-item-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-item-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-item-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-item-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-item-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_list-item-two-line-container-height: var(--md-list-item-list-item-two-line-container-height, 72px);--_list-item-leading-element-leading-space: var(--md-list-item-list-item-leading-element-leading-space, 16px);--_list-item-leading-space: var(--md-list-item-list-item-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-item-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-item-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-trailing-space: var(--md-list-item-list-item-trailing-space, 16px)}:host{color:unset;--md-focus-ring-shape: 8px;--md-ripple-hover-color: var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity: var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_list-item-pressed-state-layer-opacity)}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;border-radius:inherit}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_list-item-leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_list-item-leading-space);padding-inline-end:var(--_list-item-trailing-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-end:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);margin-inline-start:var(--_list-item-leading-video-leading-space);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}
+{"version":3,"file":"list-item-styles.css.js","sourceRoot":"","sources":["list-item-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-container-color: var(--md-list-item-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_list-item-container-shape: var(--md-list-item-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-item-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-label-text-opacity: var(--md-list-item-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-item-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-leading-icon-opacity: var(--md-list-item-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-item-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-disabled-trailing-icon-opacity: var(--md-list-item-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-item-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-focus-leading-icon-icon-color: var(--md-list-item-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-trailing-icon-icon-color: var(--md-list-item-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-item-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-leading-icon-icon-color: var(--md-list-item-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-item-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-hover-state-layer-opacity: var(--md-list-item-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-item-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-item-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-label-text-line-height: var(--md-list-item-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-item-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-large-leading-video-height: var(--md-list-item-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-item-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-item-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_list-item-leading-avatar-color: var(--md-list-item-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-item-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-item-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-item-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-item-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-item-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-item-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-item-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-item-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-item-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-item-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-item-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-leading-icon-icon-color: var(--md-list-item-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-item-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_list-item-pressed-state-layer-opacity: var(--md-list-item-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-item-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-item-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-item-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-item-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_list-item-three-line-container-height: var(--md-list-item-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-item-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-item-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-item-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-item-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-item-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_list-item-two-line-container-height: var(--md-list-item-list-item-two-line-container-height, 72px);--_list-item-leading-element-leading-space: var(--md-list-item-list-item-leading-element-leading-space, 16px);--_list-item-leading-space: var(--md-list-item-list-item-leading-space, 16px);--_list-item-leading-video-leading-space: var(--md-list-item-list-item-leading-video-leading-space, 0px);--_list-item-trailing-element-headline-trailing-element-space: var(--md-list-item-list-item-trailing-element-headline-trailing-element-space, 16px);--_list-item-trailing-space: var(--md-list-item-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity: var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_list-item-pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape);-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled):not(.noninteractive){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%;box-sizing:border-box;border-radius:inherit;padding-inline-end:var(--_list-item-trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}slot[name=start]::slotted([data-variant=icon]),slot[name=start]::slotted([data-variant=image]),slot[name=start]::slotted([data-variant=avatar]){margin-inline-start:var(--_list-item-leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_list-item-leading-space);z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;z-index:1}.with-three-line .end{justify-content:start}slot[name=end]::slotted(*),.trailing-supporting-text{margin-inline-start:var(--_list-item-trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);margin-inline-start:var(--_list-item-leading-video-leading-space);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}

package/list/{lib → internal}/listitem/list-item.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../../../ripple/ripple.js';
-import '../../../focus/focus-ring.js';
+import '../../../focus/md-focus-ring.js';
 import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
 /**
  * Supported roles for a list item.

package/list/{lib → internal}/listitem/list-item.js

@@ -6,7 +6,7 @@
 var _a;
 import { __decorate } from "tslib";
 import '../../../ripple/ripple.js';
-import '../../../focus/focus-ring.js';
+import '../../../focus/md-focus-ring.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -121,7 +121,7 @@ export class ListItemEl extends LitElement {
      * Handles rendering of the focus ring.
      */
     renderFocusRing() {
-        return html `<md-focus-ring class="focus-ring" for="item" inward></md-focus-ring>`;
+        return html `<md-focus-ring class="focus-ring" part="focus-ring" for="item" inward></md-focus-ring>`;
     }
     /**
      * Classes applied to the list item root.

package/list/internal/listitem/list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/md-focus-ring.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * Supported roles for a list item.\n */\nexport type ListItemRole = 'listitem'|'menuitem'|'option'|'link'|'none';\n\ninterface ListItemSelf {\n  active: boolean;\n  disabled: boolean;\n}\n\n/**\n * The interface of an item that is compatible with md-list. An item that is\n * selectable and disablable.\n */\nexport type ListItem = ListItemSelf&HTMLElement;\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class ListItemEl extends LitElement implements ListItem {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * The primary, headline text of the list item.\n   */\n  @property() headline = '';\n\n  /**\n   * The one-line supporting text below the headline. Set\n   * `multiLineSupportingText` to `true` to support multiple lines in the\n   * supporting text.\n   */\n  @property({attribute: 'supporting-text'}) supportingText = '';\n\n  /**\n   * Modifies `supportingText` to support multiple lines.\n   */\n  @property({type: Boolean, attribute: 'multi-line-supporting-text'})\n  multiLineSupportingText = false;\n\n  /**\n   * The supporting text placed at the end of the item. Overridden by elements\n   * slotted into the `end` slot.\n   */\n  @property({attribute: 'trailing-supporting-text'})\n  trailingSupportingText = '';\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * The tabindex of the underlying item.\n   *\n   * __NOTE:__ this is overridden by the keyboard behavior of `md-list` and by\n   * setting `selected`.\n   */\n  @property({type: Number, attribute: 'item-tabindex'}) itemTabIndex = -1;\n\n  /**\n   * Whether or not the element is actively being interacted with by md-list.\n   * When active, tabindex is set to 0, and in some list item variants (like\n   * md-list-item), focuses the underlying item.\n   */\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * Sets the role of the list item. Set to '' to clear the role.\n   */\n  @property()\n  type: ListItemRole = 'listitem';\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n\n  /**\n   * Only meant to be overridden by subclassing and not by the user. This is\n   * so that we have control over focus on specific variants such as disabling\n   * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.\n   */\n  protected focusOnActivation = true;\n\n  protected isFirstUpdate = true;\n\n  protected override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('active') && !this.disabled) {\n      if (this.active) {\n        this.itemTabIndex = 0;\n      } else if (!this.isFirstUpdate) {\n        // Do not reset anything if it's the first render because user could\n        // have set `itemTabIndex` manually.\n        this.itemTabIndex = -1;\n      }\n    }\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <div class=\"content-wrapper\">\n        ${this.renderStart()}\n        ${this.renderBody()}\n        ${this.renderEnd()}\n        ${this.renderRipple()}\n        ${this.renderFocusRing()}\n      </div>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    return html`\n      <li\n        id=\"item\"\n        tabindex=${this.disabled ? -1 : this.itemTabIndex}\n        role=${this.type === 'none' ? nothing : this.type}\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        @click=${this.onClick}\n        @pointerenter=${this.onPointerenter}\n        @pointerleave=${this.onPointerleave}\n        @keydown=${this.onKeydown}\n      >${content}</li>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    return html`<md-ripple for=\"item\" ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult|typeof nothing {\n    return html`<md-focus-ring class=\"focus-ring\" part=\"focus-ring\" for=\"item\" inward></md-focus-ring>`;\n  }\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses() {\n    return {\n      'with-one-line': this.supportingText === '',\n      'with-two-line':\n          this.supportingText !== '' && !this.multiLineSupportingText,\n      'with-three-line':\n          this.supportingText !== '' && this.multiLineSupportingText,\n      'disabled': this.disabled\n    };\n  }\n\n  /**\n   * The content rendered at the start of the list item.\n   */\n  protected renderStart() {\n    return html`<div class=\"start\"><slot name=\"start\"></slot></div>`;\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    const supportingText =\n        this.supportingText !== '' ? this.renderSupportingText() : '';\n\n    return html`<div class=\"body\"\n      ><span class=\"label-text\">${this.headline}</span>${supportingText}</div>`;\n  }\n\n  /**\n   * Renders the one-line supporting text.\n   */\n  protected renderSupportingText() {\n    return html`<span\n        class=\"supporting-text ${classMap(this.getSupportingTextClasses())}\"\n      >${this.supportingText}</span>`;\n  }\n\n  /**\n   * Gets the classes for the supporting text node\n   */\n  protected getSupportingTextClasses() {\n    return {'supporting-text--multi-line': this.multiLineSupportingText};\n  }\n\n  /**\n   * The content rendered at the end of the list item.\n   */\n  protected renderEnd() {\n    const supportingText = this.trailingSupportingText !== '' ?\n        this.renderTrailingSupportingText() :\n        '';\n    return html`<div class=\"end\"\n      ><slot name=\"end\">${supportingText}</slot></div>`;\n  }\n\n  /**\n   * Renders the supporting text at the end of the list item.\n   */\n  protected renderTrailingSupportingText() {\n    return html`<span class=\"trailing-supporting-text\"\n      >${this.trailingSupportingText}</span>`;\n  }\n\n  // For easier overriding in menu-item\n  protected onClick?(event: Event): void;\n  protected onKeydown?(event: KeyboardEvent): void;\n  protected onPointerenter?(event: Event): void;\n  protected onPointerleave?(event: Event): void;\n\n  protected override updated(changed: PropertyValues<this>) {\n    super.updated(changed);\n\n    // will focus the list item root if it is selected but not on the first\n    // update or else it may cause the page to jump on first load.\n    if (changed.has('active') && !this.isFirstUpdate && this.active &&\n        this.focusOnActivation) {\n      this.focus();\n    }\n\n    this.isFirstUpdate = false;\n  }\n\n  override focus() {\n    this.listItemRoot?.focus?.();\n  }\n}\n"]}

package/list/list-item-link.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ListItemLinkOnly as ListItemLink } from './lib/listitemlink/list-item-link-only.js';
+import { ListItemLinkOnly as ListItemLink } from './internal/listitemlink/list-item-link-only.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list-item-link': MdListItemLink;

package/list/list-item-link.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
-import { styles } from './lib/listitem/list-item-styles.css.js';
-import { ListItemLinkOnly as ListItemLink } from './lib/listitemlink/list-item-link-only.js';
+import { styles as forcedColors } from './internal/listitem/forced-colors-styles.css.js';
+import { styles } from './internal/listitem/list-item-styles.css.js';
+import { ListItemLinkOnly as ListItemLink } from './internal/listitemlink/list-item-link-only.js';
 /**
  * @summary
  * Lists are continuous, vertical indexes of text or images. Items are placed

package/list/list-item-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAC,gBAAgB,IAAI,YAAY,EAAC,MAAM,2CAA2C,CAAC;AAQ3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\nimport {ListItemLinkOnly as ListItemLink} from './lib/listitemlink/list-item-link-only.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item-link': MdListItemLink;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list. This is a linkable variant.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Example slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item-link\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\"\n *     href=\"/accounts\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">open_in_new</md-icon>\n * </md-list-item-link>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item-link')\nexport class MdListItemLink extends ListItemLink {\n  static override styles = [styles, forcedColors];\n}\n"]}
+{"version":3,"file":"list-item-link.js","sourceRoot":"","sources":["list-item-link.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AACnE,OAAO,EAAC,gBAAgB,IAAI,YAAY,EAAC,MAAM,gDAAgD,CAAC;AAQhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './internal/listitem/forced-colors-styles.css.js';\nimport {styles} from './internal/listitem/list-item-styles.css.js';\nimport {ListItemLinkOnly as ListItemLink} from './internal/listitemlink/list-item-link-only.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item-link': MdListItemLink;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list. This is a linkable variant.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Example slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item-link\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\"\n *     href=\"/accounts\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">open_in_new</md-icon>\n * </md-list-item-link>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item-link')\nexport class MdListItemLink extends ListItemLink {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/list/list-item.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ListItemOnly as ListItem } from './lib/listitem/list-item-only.js';
-export { ListItemRole } from './lib/listitem/list-item.js';
+import { ListItemOnly as ListItem } from './internal/listitem/list-item-only.js';
+export { ListItemRole } from './internal/listitem/list-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list-item': MdListItem;

package/list/list-item.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './lib/listitem/forced-colors-styles.css.js';
-import { ListItemOnly as ListItem } from './lib/listitem/list-item-only.js';
-import { styles } from './lib/listitem/list-item-styles.css.js';
+import { styles as forcedColors } from './internal/listitem/forced-colors-styles.css.js';
+import { ListItemOnly as ListItem } from './internal/listitem/list-item-only.js';
+import { styles } from './internal/listitem/list-item-styles.css.js';
 /**
  * @summary
  * Lists are continuous, vertical indexes of text or images. Items are placed

package/list/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAC,YAAY,IAAI,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAU9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';\nimport {ListItemOnly as ListItem} from './lib/listitem/list-item-only.js';\nimport {styles} from './lib/listitem/list-item-styles.css.js';\n\nexport {ListItemRole} from './lib/listitem/list-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAC,YAAY,IAAI,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AAUnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;;AACtB,iBAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './internal/listitem/forced-colors-styles.css.js';\nimport {ListItemOnly as ListItem} from './internal/listitem/list-item-only.js';\nimport {styles} from './internal/listitem/list-item-styles.css.js';\n\nexport {ListItemRole} from './internal/listitem/list-item.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list-item': MdListItem;\n  }\n}\n\n/**\n * @summary\n * Lists are continuous, vertical indexes of text or images. Items are placed\n * inside the list.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * Acceptable slottable child variants are:\n *\n * - `video[data-variant=video]`\n * - `img,span[data-variant=avatar]`\n * - `img[data-variant=image]`\n * - `md-icon[data-variant=icon]`\n *\n *  @example\n * ```html\n * <md-list-item\n *     headline=\"User Name\"\n *     supportingText=\"user@name.com\">\n *   <md-icon data-variant=\"icon\" slot=\"start\">account_circle</md-icon>\n *   <md-icon data-variant=\"icon\" slot=\"end\">check</md-icon>\n * </md-list-item>\n * ```\n *\n * @example\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list-item')\nexport class MdListItem extends ListItem {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/list/list.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { List } from './lib/list.js';
+import { List } from './internal/list.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-list': MdList;

package/list/list.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { List } from './lib/list.js';
-import { styles } from './lib/list-styles.css.js';
+import { List } from './internal/list.js';
+import { styles } from './internal/list-styles.css.js';
 /**
  * @summary Lists are continuous, vertical indexes of text or images.
  *

package/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAQhD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './lib/list.js';\nimport {styles} from './lib/list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {List} from './internal/list.js';\nimport {styles} from './internal/list-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-list': MdList;\n  }\n}\n\n/**\n * @summary Lists are continuous, vertical indexes of text or images.\n *\n * @description\n * Lists consist of one or more list items, and can contain actions represented\n * by icons and text. List items come in three sizes: one-line, two-line, and\n * three-line.\n *\n * __Takeaways:__\n *\n * - Lists should be sorted in logical ways that make content easy to scan, such\n *   as alphabetical, numerical, chronological, or by user preference.\n * - Lists present content in a way that makes it easy to identify a specific\n *   item in a collection and act on it.\n * - Lists should present icons, text, and actions in a consistent format.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-list')\nexport class MdList extends List {\n  static override styles = [styles];\n}\n"]}