@material/web 1.0.0-pre.16 → 1.0.0-pre.17

package/list/internal/list.js

@@ -37,7 +37,7 @@ export class List extends LitElement {
         // Needed for closure conformance
         const { ariaLabel } = this;
         return html `
-    <ul class="md3-list"
+    <ul class="list"
         aria-label=${ariaLabel || nothing}
         tabindex=${this.listTabIndex}
         role=${this.type || nothing}
@@ -51,9 +51,7 @@ export class List extends LitElement {
      * The content to be slotted into the list.
      */
     renderContent() {
-        return html `<span><slot @click=${(event) => {
-            event.stopPropagation();
-        }}></slot></span>`;
+        return html `<span><slot></slot></span>`;
     }
     /**
      * Handles keyboard navigation in the list.
@@ -62,7 +60,7 @@ export class List extends LitElement {
      */
     handleKeydown(event) {
         const key = event.key;
-        if (!isNavigableKey(key)) {
+        if (event.defaultPrevented || !isNavigableKey(key)) {
             return;
         }
         // do not use this.items directly so we don't re-query the DOM unnecessarily
@@ -295,7 +293,7 @@ __decorate([
     property({ type: Number, attribute: 'list-tabindex' })
 ], List.prototype, "listTabIndex", void 0);
 __decorate([
-    query('.md3-list')
+    query('.list')
 ], List.prototype, "listRoot", void 0);
 __decorate([
     queryAssignedElements({ flatten: true, selector: '[md-list-item]' })

package/list/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(List);\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') private 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  private 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} 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(List);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property() type: 'menu'|'menubar'|'listbox'|'list'|'' = 'list';\n\n  /**\n   * The tabindex of the underlying list.\n   */\n  @property({type: Number, attribute: 'list-tabindex'}) listTabIndex = 0;\n\n  @query('.list') private 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=\"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></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  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    if (event.defaultPrevented || !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/internal/listitem/_list-item.scss

@@ -138,6 +138,7 @@
     display: inline-flex;
     justify-content: center;
     flex-direction: column;
+    min-width: 0;
     box-sizing: border-box;
     flex: 1 0 0;
     padding-inline-start: var(--_leading-space);
@@ -164,12 +165,14 @@
   }
 
   .label-text {
-    display: flex;
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
     color: var(--_label-text-color);
-    font: var(--_label-text-type);
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
 
     :hover & {
       color: var(--_hover-label-text-color);
@@ -195,7 +198,10 @@
     overflow: hidden;
     width: 100%;
     color: var(--_supporting-text-color);
-    font: var(--_supporting-text-type);
+    font-family: var(--_supporting-text-font);
+    font-size: var(--_supporting-text-size);
+    line-height: var(--_supporting-text-line-height);
+    font-weight: var(--_supporting-text-weight);
 
     // Box is supposed to be deprecated, but line-clamp is not. It's still on
     // standards track and can only be applied with display: -webkit-box and
@@ -216,7 +222,10 @@
   }
 
   .trailing-supporting-text {
-    font: var(--_trailing-supporting-text-type);
+    font-family: var(--_trailing-supporting-text-font);
+    font-size: var(--_trailing-supporting-text-size);
+    line-height: var(--_trailing-supporting-text-line-height);
+    font-weight: var(--_trailing-supporting-text-weight);
 
     .list-item:not(.disabled) & {
       color: var(--_trailing-supporting-text-color);
@@ -347,7 +356,10 @@
     width: var(--_leading-avatar-size);
     border-radius: var(--_leading-avatar-shape);
     color: var(--_leading-avatar-label-color);
-    font: var(--_leading-avatar-label-type);
+    font-family: var(--_leading-avatar-label-font);
+    font-size: var(--_leading-avatar-label-size);
+    line-height: var(--_leading-avatar-label-line-height);
+    font-weight: var(--_leading-avatar-label-weight);
   }
 }
 

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_container-shape: var(--md-list-item-container-shape, 0px);--_disabled-label-text-color: var(--md-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-list-item-disabled-label-text-opacity, 0.3);--_disabled-leading-icon-color: var(--md-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-list-item-disabled-leading-icon-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-list-item-disabled-trailing-icon-opacity, 0.38);--_focus-label-text-color: var(--md-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-leading-icon-icon-color: var(--md-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-icon-color: var(--md-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-icon-color: var(--md-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--_hover-trailing-icon-icon-color: var(--md-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-line-height: var(--md-list-item-label-text-line-height, 1.5rem);--_label-text-type: var(--md-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_large-leading-video-height: var(--md-list-item-large-leading-video-height, 69px);--_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_leading-avatar-label-type: var(--md-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, 9999px);--_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);--_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-list-item-leading-icon-size, 18px);--_leading-image-height: var(--md-list-item-leading-image-height, 56px);--_leading-image-shape: var(--md-list-item-leading-image-shape, 0px);--_leading-image-width: var(--md-list-item-leading-image-width, 56px);--_leading-video-shape: var(--md-list-item-leading-video-shape, 0px);--_leading-video-width: var(--md-list-item-leading-video-width, 100px);--_one-line-container-height: var(--md-list-item-one-line-container-height, 56px);--_pressed-label-text-color: var(--md-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-leading-icon-icon-color: var(--md-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12);--_pressed-trailing-icon-icon-color: var(--md-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_small-leading-video-height: var(--md-list-item-small-leading-video-height, 56px);--_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_three-line-container-height: var(--md-list-item-three-line-container-height, 88px);--_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-list-item-trailing-icon-size, 24px);--_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-supporting-text-line-height: var(--md-list-item-trailing-supporting-text-line-height, 1rem);--_trailing-supporting-text-type: var(--md-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_two-line-container-height: var(--md-list-item-two-line-container-height, 72px);--_leading-element-leading-space: var(--md-list-item-leading-element-leading-space, 16px);--_leading-space: var(--md-list-item-leading-space, 16px);--_leading-video-leading-space: var(--md-list-item-leading-video-leading-space, 0px);--_trailing-element-headline-trailing-element-space: var(--md-list-item-trailing-element-headline-trailing-element-space, 16px);--_trailing-space: var(--md-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_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(--_container-color);border-radius:var(--_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(--_trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_one-line-container-height)}.with-two-line{min-height:var(--_two-line-container-height)}.with-three-line{min-height:var(--_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(--_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(--_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(--_trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_label-text-color);font:var(--_label-text-type)}:hover .label-text{color:var(--_hover-label-text-color)}:focus .label-text{color:var(--_focus-label-text-color)}:active .label-text{color:var(--_pressed-label-text-color)}.disabled .label-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_supporting-text-color);font:var(--_supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{font:var(--_trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_leading-image-height);width:var(--_leading-image-width);border-radius:var(--_leading-image-shape);margin-block:calc((var(--_two-line-container-height) - var(--_leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){margin-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_leading-icon-size);width:var(--_leading-icon-size);height:var(--_leading-icon-size);color:var(--_leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);color:var(--_trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_disabled-leading-icon-opacity);color:var(--_disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_disabled-trailing-icon-opacity);color:var(--_disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_leading-avatar-color);height:var(--_leading-avatar-size);width:var(--_leading-avatar-size);border-radius:var(--_leading-avatar-shape);color:var(--_leading-avatar-label-color);font:var(--_leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_small-leading-video-height);width:var(--_leading-video-width);border-radius:var(--_leading-video-shape);margin-inline-start:var(--_leading-video-leading-space);margin-block:calc((var(--_three-line-container-height) - var(--_small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){margin-block:0}::slotted([data-variant=video-large]){margin-block:calc((var(--_three-line-container-height) - var(--_large-leading-video-height))/2);height:var(--_large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_container-shape: var(--md-list-item-container-shape, 0px);--_disabled-label-text-color: var(--md-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-list-item-disabled-label-text-opacity, 0.3);--_disabled-leading-icon-color: var(--md-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-list-item-disabled-leading-icon-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-list-item-disabled-trailing-icon-opacity, 0.38);--_focus-label-text-color: var(--md-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-leading-icon-icon-color: var(--md-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-icon-color: var(--md-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-icon-color: var(--md-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--_hover-trailing-icon-icon-color: var(--md-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-size: var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_large-leading-video-height: var(--md-list-item-large-leading-video-height, 69px);--_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_leading-avatar-label-font: var(--md-list-item-leading-avatar-label-font, var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto)));--_leading-avatar-label-line-height: var(--md-list-item-leading-avatar-label-line-height, var(--md-sys-typescale-title-medium-line-height, 1.5rem));--_leading-avatar-label-size: var(--md-list-item-leading-avatar-label-size, var(--md-sys-typescale-title-medium-size, 1rem));--_leading-avatar-label-weight: var(--md-list-item-leading-avatar-label-weight, var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, 9999px);--_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);--_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-list-item-leading-icon-size, 18px);--_leading-image-height: var(--md-list-item-leading-image-height, 56px);--_leading-image-shape: var(--md-list-item-leading-image-shape, 0px);--_leading-image-width: var(--md-list-item-leading-image-width, 56px);--_leading-video-shape: var(--md-list-item-leading-video-shape, 0px);--_leading-video-width: var(--md-list-item-leading-video-width, 100px);--_one-line-container-height: var(--md-list-item-one-line-container-height, 56px);--_pressed-label-text-color: var(--md-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-leading-icon-icon-color: var(--md-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12);--_pressed-trailing-icon-icon-color: var(--md-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_small-leading-video-height: var(--md-list-item-small-leading-video-height, 56px);--_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-list-item-supporting-text-weight, var(--md-ref-typeface-weight-regular, 400));--_three-line-container-height: var(--md-list-item-three-line-container-height, 88px);--_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-list-item-trailing-icon-size, 24px);--_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-supporting-text-font: var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_trailing-supporting-text-line-height: var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_trailing-supporting-text-size: var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.688rem));--_trailing-supporting-text-weight: var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_two-line-container-height: var(--md-list-item-two-line-container-height, 72px);--_leading-element-leading-space: var(--md-list-item-leading-element-leading-space, 16px);--_leading-space: var(--md-list-item-leading-space, 16px);--_leading-video-leading-space: var(--md-list-item-leading-video-leading-space, 0px);--_trailing-element-headline-trailing-element-space: var(--md-list-item-trailing-element-headline-trailing-element-space, 16px);--_trailing-space: var(--md-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_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(--_container-color);border-radius:var(--_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(--_trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_one-line-container-height)}.with-two-line{min-height:var(--_two-line-container-height)}.with-three-line{min-height:var(--_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(--_leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;min-width:0;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_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(--_trailing-element-headline-trailing-element-space)}.label-text{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}:hover .label-text{color:var(--_hover-label-text-color)}:focus .label-text{color:var(--_focus-label-text-color)}:active .label-text{color:var(--_pressed-label-text-color)}.disabled .label-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{font-family:var(--_trailing-supporting-text-font);font-size:var(--_trailing-supporting-text-size);line-height:var(--_trailing-supporting-text-line-height);font-weight:var(--_trailing-supporting-text-weight)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_leading-image-height);width:var(--_leading-image-width);border-radius:var(--_leading-image-shape);margin-block:calc((var(--_two-line-container-height) - var(--_leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){margin-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_leading-icon-size);width:var(--_leading-icon-size);height:var(--_leading-icon-size);color:var(--_leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);color:var(--_trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_disabled-leading-icon-opacity);color:var(--_disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_disabled-trailing-icon-opacity);color:var(--_disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_leading-avatar-color);height:var(--_leading-avatar-size);width:var(--_leading-avatar-size);border-radius:var(--_leading-avatar-shape);color:var(--_leading-avatar-label-color);font-family:var(--_leading-avatar-label-font);font-size:var(--_leading-avatar-label-size);line-height:var(--_leading-avatar-label-line-height);font-weight:var(--_leading-avatar-label-weight)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_small-leading-video-height);width:var(--_leading-video-width);border-radius:var(--_leading-video-shape);margin-inline-start:var(--_leading-video-leading-space);margin-block:calc((var(--_three-line-container-height) - var(--_small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){margin-block:0}::slotted([data-variant=video-large]){margin-block:calc((var(--_three-line-container-height) - var(--_large-leading-video-height))/2);height:var(--_large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
 `;
 //# sourceMappingURL=list-item-styles.css.js.map

package/list/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{--_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_container-shape: var(--md-list-item-container-shape, 0px);--_disabled-label-text-color: var(--md-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-list-item-disabled-label-text-opacity, 0.3);--_disabled-leading-icon-color: var(--md-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-list-item-disabled-leading-icon-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-list-item-disabled-trailing-icon-opacity, 0.38);--_focus-label-text-color: var(--md-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-leading-icon-icon-color: var(--md-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-icon-color: var(--md-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-icon-color: var(--md-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--_hover-trailing-icon-icon-color: var(--md-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-line-height: var(--md-list-item-label-text-line-height, 1.5rem);--_label-text-type: var(--md-list-item-label-text-type, var(--md-sys-typescale-body-large, 400 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_large-leading-video-height: var(--md-list-item-large-leading-video-height, 69px);--_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_leading-avatar-label-type: var(--md-list-item-leading-avatar-label-type, var(--md-sys-typescale-title-medium, 500 1rem / 1.5rem var(--md-ref-typeface-plain, Roboto)));--_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, 9999px);--_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);--_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-list-item-leading-icon-size, 18px);--_leading-image-height: var(--md-list-item-leading-image-height, 56px);--_leading-image-shape: var(--md-list-item-leading-image-shape, 0px);--_leading-image-width: var(--md-list-item-leading-image-width, 56px);--_leading-video-shape: var(--md-list-item-leading-video-shape, 0px);--_leading-video-width: var(--md-list-item-leading-video-width, 100px);--_one-line-container-height: var(--md-list-item-one-line-container-height, 56px);--_pressed-label-text-color: var(--md-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-leading-icon-icon-color: var(--md-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12);--_pressed-trailing-icon-icon-color: var(--md-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_small-leading-video-height: var(--md-list-item-small-leading-video-height, 56px);--_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-list-item-supporting-text-type, var(--md-sys-typescale-body-medium, 400 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_three-line-container-height: var(--md-list-item-three-line-container-height, 88px);--_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-list-item-trailing-icon-size, 24px);--_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-supporting-text-line-height: var(--md-list-item-trailing-supporting-text-line-height, 1rem);--_trailing-supporting-text-type: var(--md-list-item-trailing-supporting-text-type, var(--md-sys-typescale-label-small, 500 0.688rem / 1rem var(--md-ref-typeface-plain, Roboto)));--_two-line-container-height: var(--md-list-item-two-line-container-height, 72px);--_leading-element-leading-space: var(--md-list-item-leading-element-leading-space, 16px);--_leading-space: var(--md-list-item-leading-space, 16px);--_leading-video-leading-space: var(--md-list-item-leading-video-leading-space, 0px);--_trailing-element-headline-trailing-element-space: var(--md-list-item-trailing-element-headline-trailing-element-space, 16px);--_trailing-space: var(--md-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_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(--_container-color);border-radius:var(--_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(--_trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_one-line-container-height)}.with-two-line{min-height:var(--_two-line-container-height)}.with-three-line{min-height:var(--_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(--_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(--_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(--_trailing-element-headline-trailing-element-space)}.label-text{display:flex;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_label-text-color);font:var(--_label-text-type)}:hover .label-text{color:var(--_hover-label-text-color)}:focus .label-text{color:var(--_focus-label-text-color)}:active .label-text{color:var(--_pressed-label-text-color)}.disabled .label-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_supporting-text-color);font:var(--_supporting-text-type);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{font:var(--_trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_leading-image-height);width:var(--_leading-image-width);border-radius:var(--_leading-image-shape);margin-block:calc((var(--_two-line-container-height) - var(--_leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){margin-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_leading-icon-size);width:var(--_leading-icon-size);height:var(--_leading-icon-size);color:var(--_leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);color:var(--_trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_disabled-leading-icon-opacity);color:var(--_disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_disabled-trailing-icon-opacity);color:var(--_disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_leading-avatar-color);height:var(--_leading-avatar-size);width:var(--_leading-avatar-size);border-radius:var(--_leading-avatar-shape);color:var(--_leading-avatar-label-color);font:var(--_leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_small-leading-video-height);width:var(--_leading-video-width);border-radius:var(--_leading-video-shape);margin-inline-start:var(--_leading-video-leading-space);margin-block:calc((var(--_three-line-container-height) - var(--_small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){margin-block:0}::slotted([data-variant=video-large]){margin-block:calc((var(--_three-line-container-height) - var(--_large-leading-video-height))/2);height:var(--_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{--_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));--_container-shape: var(--md-list-item-container-shape, 0px);--_disabled-label-text-color: var(--md-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-list-item-disabled-label-text-opacity, 0.3);--_disabled-leading-icon-color: var(--md-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-list-item-disabled-leading-icon-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-list-item-disabled-trailing-icon-opacity, 0.38);--_focus-label-text-color: var(--md-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-leading-icon-icon-color: var(--md-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-icon-color: var(--md-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-icon-color: var(--md-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--_hover-trailing-icon-icon-color: var(--md-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-size: var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_large-leading-video-height: var(--md-list-item-large-leading-video-height, 69px);--_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_leading-avatar-label-font: var(--md-list-item-leading-avatar-label-font, var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto)));--_leading-avatar-label-line-height: var(--md-list-item-leading-avatar-label-line-height, var(--md-sys-typescale-title-medium-line-height, 1.5rem));--_leading-avatar-label-size: var(--md-list-item-leading-avatar-label-size, var(--md-sys-typescale-title-medium-size, 1rem));--_leading-avatar-label-weight: var(--md-list-item-leading-avatar-label-weight, var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, 9999px);--_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);--_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-list-item-leading-icon-size, 18px);--_leading-image-height: var(--md-list-item-leading-image-height, 56px);--_leading-image-shape: var(--md-list-item-leading-image-shape, 0px);--_leading-image-width: var(--md-list-item-leading-image-width, 56px);--_leading-video-shape: var(--md-list-item-leading-video-shape, 0px);--_leading-video-width: var(--md-list-item-leading-video-width, 100px);--_one-line-container-height: var(--md-list-item-one-line-container-height, 56px);--_pressed-label-text-color: var(--md-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-leading-icon-icon-color: var(--md-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12);--_pressed-trailing-icon-icon-color: var(--md-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_small-leading-video-height: var(--md-list-item-small-leading-video-height, 56px);--_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-list-item-supporting-text-weight, var(--md-ref-typeface-weight-regular, 400));--_three-line-container-height: var(--md-list-item-three-line-container-height, 88px);--_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-list-item-trailing-icon-size, 24px);--_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-supporting-text-font: var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_trailing-supporting-text-line-height: var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_trailing-supporting-text-size: var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.688rem));--_trailing-supporting-text-weight: var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_two-line-container-height: var(--md-list-item-two-line-container-height, 72px);--_leading-element-leading-space: var(--md-list-item-leading-element-leading-space, 16px);--_leading-space: var(--md-list-item-leading-space, 16px);--_leading-video-leading-space: var(--md-list-item-leading-video-leading-space, 0px);--_trailing-element-headline-trailing-element-space: var(--md-list-item-trailing-element-headline-trailing-element-space, 16px);--_trailing-space: var(--md-list-item-trailing-space, 24px)}:host{color:unset;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_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(--_container-color);border-radius:var(--_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(--_trailing-space)}md-ripple{border-radius:inherit}.with-one-line{min-height:var(--_one-line-container-height)}.with-two-line{min-height:var(--_two-line-container-height)}.with-three-line{min-height:var(--_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(--_leading-element-leading-space)}.body{display:inline-flex;justify-content:center;flex-direction:column;min-width:0;box-sizing:border-box;flex:1 0 0;padding-inline-start:var(--_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(--_trailing-element-headline-trailing-element-space)}.label-text{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;color:var(--_label-text-color);font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}:hover .label-text{color:var(--_hover-label-text-color)}:focus .label-text{color:var(--_focus-label-text-color)}:active .label-text{color:var(--_pressed-label-text-color)}.disabled .label-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text{text-overflow:ellipsis;white-space:normal;overflow:hidden;width:100%;color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box}.disabled .supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-line-clamp:2}.trailing-supporting-text{font-family:var(--_trailing-supporting-text-font);font-size:var(--_trailing-supporting-text-size);line-height:var(--_trailing-supporting-text-line-height);font-weight:var(--_trailing-supporting-text-weight)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;height:var(--_leading-image-height);width:var(--_leading-image-width);border-radius:var(--_leading-image-shape);margin-block:calc((var(--_two-line-container-height) - var(--_leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){margin-block:0}::slotted(*){fill:currentColor}slot[name=start]::slotted([data-variant=icon]){font-size:var(--_leading-icon-size);width:var(--_leading-icon-size);height:var(--_leading-icon-size);color:var(--_leading-icon-color)}.with-three-line slot[name=start]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);color:var(--_trailing-icon-color)}.with-three-line slot[name=end]::slotted([data-variant=icon]){margin-block-start:calc((var(--_label-text-line-height) - var(--_trailing-icon-size))/2)}:hover slot[name=start]::slotted([data-variant=icon]){color:var(--_hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){color:var(--_hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){color:var(--_focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){color:var(--_focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){color:var(--_pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){color:var(--_pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_disabled-leading-icon-opacity);color:var(--_disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_disabled-trailing-icon-opacity);color:var(--_disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;background-color:var(--_leading-avatar-color);height:var(--_leading-avatar-size);width:var(--_leading-avatar-size);border-radius:var(--_leading-avatar-shape);color:var(--_leading-avatar-label-color);font-family:var(--_leading-avatar-label-font);font-size:var(--_leading-avatar-label-size);line-height:var(--_leading-avatar-label-line-height);font-weight:var(--_leading-avatar-label-weight)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_small-leading-video-height);width:var(--_leading-video-width);border-radius:var(--_leading-video-shape);margin-inline-start:var(--_leading-video-leading-space);margin-block:calc((var(--_three-line-container-height) - var(--_small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){margin-block:0}::slotted([data-variant=video-large]){margin-block:calc((var(--_three-line-container-height) - var(--_large-leading-video-height))/2);height:var(--_large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}

package/menu/harness.d.ts

@@ -17,5 +17,5 @@ export declare class MenuHarness extends Harness<Menu> {
     protected getInteractiveElement(): Promise<HTMLElement>;
     /** @return ListItem harnesses for the menu's items. */
     getItems(): MenuItemHarness[];
-    show(quick?: boolean): Promise<void>;
+    show(): Promise<void>;
 }

package/menu/harness.js

@@ -15,16 +15,15 @@ export class MenuHarness extends Harness {
      */
     async getInteractiveElement() {
         await this.element.updateComplete;
-        await this.show();
-        return (await this.getItems())[0].getInteractiveElement();
+        return this.element.renderRoot.querySelector('md-list').renderRoot
+            .querySelector('.list');
     }
     /** @return ListItem harnesses for the menu's items. */
     getItems() {
         return this.element.items.map((item) => new MenuItemHarness(item));
     }
-    async show(quick = true) {
+    async show() {
         const menu = this.element;
-        menu.quick = quick;
         if (menu.open) {
             return;
         }

package/menu/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAA8B,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './internal/menu.js';\nimport {MenuItemHarness} from './internal/menuitem/harness.js';\n\nexport {MenuItemHarness} from './internal/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    await this.show();\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new MenuItemHarness(item as typeof item&LitElement));\n  }\n\n  async show(quick = true) {\n    const menu = this.element;\n    menu.quick = quick;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener('opened', () => {\n        resolve(true);\n      }, {once: true});\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAE,CAAC,UAAU;aACvD,aAAa,CAAC,OAAO,CAAgB,CAAC;IACpD,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAA8B,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAC1B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,MAAM,MAAM,CAAC;IACf,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Menu} from './internal/menu.js';\nimport {MenuItemHarness} from './internal/menuitem/harness.js';\n\nexport {MenuItemHarness} from './internal/menuitem/harness.js';\n\n/**\n * Test harness for menu.\n */\nexport class MenuHarness extends Harness<Menu> {\n  /**\n   * Shows the menu and returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('md-list')!.renderRoot\n               .querySelector('.list') as HTMLElement;\n  }\n\n  /** @return ListItem harnesses for the menu's items. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new MenuItemHarness(item as typeof item&LitElement));\n  }\n\n  async show() {\n    const menu = this.element;\n    if (menu.open) {\n      return;\n    }\n\n    const opened = new Promise((resolve) => {\n      menu.addEventListener('opened', () => {\n        resolve(true);\n      }, {once: true});\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}

package/menu/internal/_menu.scss

@@ -72,37 +72,43 @@
     max-height: inherit;
     height: inherit;
     min-width: inherit;
+  }
 
-    &.fixed {
-      position: fixed;
-    }
+  .fixed {
+    position: fixed;
+  }
 
-    md-list {
-      height: inherit;
-      max-height: inherit;
-      display: block;
-      overflow: auto;
-      min-width: inherit;
-      border-radius: inherit;
-    }
+  md-list {
+    height: inherit;
+    max-height: inherit;
+    display: block;
+    overflow: auto;
+    min-width: inherit;
+    border-radius: inherit;
+  }
 
-    &.has-overflow md-list {
-      overflow: visible;
-    }
+  .has-overflow md-list {
+    overflow: visible;
+  }
 
-    &.animating md-list {
-      pointer-events: none;
-      overflow: hidden;
-    }
+  .animating md-list {
+    overflow: hidden;
+  }
 
-    &.animating ::slotted(.md-menu-hidden) {
-      opacity: 0;
-    }
+  .has-overflow.animating md-list {
+    // Often has-overlow is set because there are submenus. Since we need
+    // overflow to be hidden to make the animation work, we need to disable
+    // submenus opening mid-animation or else it looks completely wrong.
+    pointer-events: none;
+  }
 
-    slot {
-      display: block;
-      height: inherit;
-      max-height: inherit;
-    }
+  .animating ::slotted(.md-menu-hidden) {
+    opacity: 0;
+  }
+
+  slot {
+    display: block;
+    height: inherit;
+    max-height: inherit;
   }
 }

package/menu/internal/menu-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);min-width:300px}md-focus-ring{--md-focus-ring-shape: var(--_container-shape)}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.md-menu-hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);min-width:300px}md-focus-ring{--md-focus-ring-shape: var(--_container-shape)}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.fixed{position:fixed}md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.has-overflow md-list{overflow:visible}.animating md-list{overflow:hidden}.has-overflow.animating md-list{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */
 `;
 //# sourceMappingURL=menu-styles.css.js.map

package/menu/internal/menu-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);min-width:300px}md-focus-ring{--md-focus-ring-shape: var(--_container-shape)}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.md-menu-hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}
+{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--md-list-container-color: var(--_container-color);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);min-width:300px}md-focus-ring{--md-focus-ring-shape: var(--_container-shape)}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit}.fixed{position:fixed}md-list{height:inherit;max-height:inherit;display:block;overflow:auto;min-width:inherit;border-radius:inherit}.has-overflow md-list{overflow:visible}.animating md-list{overflow:hidden}.has-overflow.animating md-list{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}

package/menu/internal/menu.d.ts

@@ -7,7 +7,6 @@ import '../../list/list.js';
 import '../../focus/md-focus-ring.js';
 import '../../elevation/elevation.js';
 import { LitElement } from 'lit';
-import { ARIARole } from '../../internal/aria/aria.js';
 import { MenuItem } from './shared.js';
 import { Corner, SurfacePositionTarget } from './surfacePositionController.js';
 import { TypeaheadController } from './typeaheadController.js';
@@ -31,9 +30,13 @@ export declare abstract class Menu extends LitElement {
     private readonly surfaceEl;
     private readonly slotEl;
     /**
-     * The element in which the menu should align to.
+     * The ID of the element in the same root node in which the menu should align
+     * to. Overrides setting `anchorElement = elementReference`.
+     *
+     * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
+     * to an HTMLElement in order for menu to open.
      */
-    anchor: HTMLElement & Partial<SurfacePositionTarget> | null;
+    anchor: string;
     /**
      * Makes the element use `position:fixed` instead of `position:absolute`. In
      * most cases, the menu should position itself above most other
@@ -84,7 +87,7 @@ export declare abstract class Menu extends LitElement {
     /**
      * The role of the underlying list element.
      */
-    type: ARIARole;
+    type: 'menu' | 'menubar' | 'listbox' | 'list';
     /**
      * The max time between the keystrokes of the typeahead menu behavior before
      * it clears the typeahead buffer.
@@ -138,6 +141,14 @@ export declare abstract class Menu extends LitElement {
      * Handles typeahead navigation through the menu.
      */
     typeaheadController: TypeaheadController;
+    private currentAnchorElement;
+    /**
+     * The element which the menu should align to. If `anchor` is set to a
+     * non-empty idref string, then `anchorEl` will resolve to the element with
+     * the given id in the same root node. Otherwise, `null`.
+     */
+    get anchorElement(): HTMLElement & Partial<SurfacePositionTarget> | null;
+    set anchorElement(element: HTMLElement & Partial<SurfacePositionTarget> | null);
     /**
      * Handles positioning the surface and aligning it to the anchor.
      */

package/menu/internal/menu.js

@@ -48,9 +48,13 @@ export class Menu extends LitElement {
     constructor() {
         super(...arguments);
         /**
-         * The element in which the menu should align to.
+         * The ID of the element in the same root node in which the menu should align
+         * to. Overrides setting `anchorElement = elementReference`.
+         *
+         * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
+         * to an HTMLElement in order for menu to open.
          */
-        this.anchor = null;
+        this.anchor = '';
         /**
          * Makes the element use `position:fixed` instead of `position:absolute`. In
          * most cases, the menu should position itself above most other
@@ -156,6 +160,7 @@ export class Menu extends LitElement {
                 active: this.typeaheadActive
             };
         });
+        this.currentAnchorElement = null;
         /**
          * Handles positioning the surface and aligning it to the anchor.
          */
@@ -164,7 +169,7 @@ export class Menu extends LitElement {
                 anchorCorner: this.anchorCorner,
                 surfaceCorner: this.menuCorner,
                 surfaceEl: this.surfaceEl,
-                anchorEl: this.anchor,
+                anchorEl: this.anchorElement,
                 isTopLayer: this.fixed,
                 isOpen: this.open,
                 xOffset: this.xOffset,
@@ -251,6 +256,22 @@ export class Menu extends LitElement {
         const menuCornerBlock = this.menuCorner.split('_')[0];
         return menuCornerBlock === 'START' ? 'DOWN' : 'UP';
     }
+    /**
+     * The element which the menu should align to. If `anchor` is set to a
+     * non-empty idref string, then `anchorEl` will resolve to the element with
+     * the given id in the same root node. Otherwise, `null`.
+     */
+    get anchorElement() {
+        if (this.anchor) {
+            return this.getRootNode()
+                .querySelector(`#${this.anchor}`);
+        }
+        return this.currentAnchorElement;
+    }
+    set anchorElement(element) {
+        this.currentAnchorElement = element;
+        this.requestUpdate('anchorElement');
+    }
     /**
      * The menu items associated with this menu. The items must be `MenuItem`s and
      * have both the `md-menu-item` and `md-list-item` attributes.
@@ -534,6 +555,8 @@ export class Menu extends LitElement {
         if (!isServer) {
             window.addEventListener('click', this.onWindowClick, { capture: true });
         }
+        // need to self-identify as an md-menu for submenu ripple identification.
+        this.toggleAttribute('md-menu', true);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -616,7 +639,7 @@ __decorate([
     query('slot')
 ], Menu.prototype, "slotEl", void 0);
 __decorate([
-    property({ attribute: false })
+    property()
 ], Menu.prototype, "anchor", void 0);
 __decorate([
     property({ type: Boolean })