@material/web 1.0.0 → 1.0.2-nightly.6a1fb38.0

package/list/internal/list.js

@@ -6,7 +6,7 @@
 import { __decorate } from "tslib";
 import { html, isServer, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
-import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
+import { polyfillARIAMixin, polyfillElementInternalsAria, } from '../../internal/aria/aria.js';
 import { ListController, NavigableKeys } from './list-controller.js';
 const NAVIGABLE_KEY_SET = new Set(Object.values(NavigableKeys));
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
@@ -30,7 +30,9 @@ export class List extends LitElement {
             isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),
             isActivatable: (item) => !item.disabled && item.type !== 'text',
         });
-        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
+        this.internals = polyfillElementInternalsAria(this, 
+        // Cast needed for closure
+        this.attachInternals());
         if (!isServer) {
             this.internals.role = 'list';
             this.addEventListener('keydown', this.listController.handleKeydown);
@@ -39,9 +41,9 @@ export class List extends LitElement {
     render() {
         return html `
       <slot
-          @deactivate-items=${this.listController.onDeactivateItems}
-          @request-activation=${this.listController.onRequestActivation}
-          @slotchange=${this.listController.onSlotchange}>
+        @deactivate-items=${this.listController.onDeactivateItems}
+        @request-activation=${this.listController.onRequestActivation}
+        @slotchange=${this.listController.onSlotchange}>
       </slot>
     `;
     }
@@ -65,7 +67,7 @@ export class List extends LitElement {
     }
 }
 (() => {
-    setupHostAria(List, { focusable: false });
+    polyfillARIAMixin(List);
 })();
 __decorate([
     queryAssignedElements({ flatten: true })

package/list/internal/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,4BAA4B,EAAE,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAExF,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAGnE,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAS,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAMxE,gEAAgE;AAChE,MAAM,OAAO,IAAK,SAAQ,UAAU;IAgBlC,cAAc;IACd,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IACnC,CAAC;IAsBD;QACE,KAAK,EAAE,CAAC;QArBO,mBAAc,GAAG,IAAI,cAAc,CAAW;YAC7D,MAAM,EAAE,CAAC,IAAiB,EAAoB,EAAE,CAC5C,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;YACrC,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS;YACtC,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK;YACvD,cAAc,EACV,CAAC,IAAI,EAAE,EAAE;gBACP,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACrB,CAAC;YACL,YAAY,EACR,CAAC,IAAI,EAAE,EAAE;gBACP,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YACpB,CAAC;YACL,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC;YACnD,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;SAChE,CAAC,CAAC;QAEc,cAAS,GAAG,4BAA4B,CACrD,IAAI,EAAG,IAAmB,CAAC,wBAAyB,CAAC,eAAe,EAAE,CAAC,CAAC;QAI1E,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;YAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SACrE;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;8BAEe,IAAI,CAAC,cAAc,CAAC,iBAAiB;gCACnC,IAAI,CAAC,cAAc,CAAC,mBAAmB;wBAC/C,IAAI,CAAC,cAAc,CAAC,YAAY;;KAEnD,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,gBAAgB;QACd,OAAO,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACH,oBAAoB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,CAAC;IACpD,CAAC;CACF;AA7EC;IACE,aAAa,CAAC,IAAI,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC,CAAC;AAC1C,CAAC,GAAA,CAAA;AAWS;IADT,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAC6B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';\n\nimport {ListController, NavigableKeys} from './list-controller.js';\nimport {ListItem as SharedListItem} from './list-navigation-helpers.js';\n\nconst NAVIGABLE_KEY_SET = new Set<string>(Object.values(NavigableKeys));\n\ninterface ListItem extends SharedListItem {\n  type: 'text'|'button'|'link';\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static {\n    setupHostAria(List, {focusable: false});\n  }\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})\n  protected slotItems!: Array<ListItem|HTMLElement&{item?: ListItem}>;\n\n  /** @export */\n  get items() {\n    return this.listController.items;\n  }\n\n  private readonly listController = new ListController<ListItem>({\n    isItem: (item: HTMLElement): item is ListItem =>\n        item.hasAttribute('md-list-item'),\n    getPossibleItems: () => this.slotItems,\n    isRtl: () => getComputedStyle(this).direction === 'rtl',\n    deactivateItem:\n        (item) => {\n          item.tabIndex = -1;\n        },\n    activateItem:\n        (item) => {\n          item.tabIndex = 0;\n        },\n    isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),\n    isActivatable: (item) => !item.disabled && item.type !== 'text',\n  });\n\n  private readonly internals = polyfillElementInternalsAria(\n      this, (this as HTMLElement /* needed for closure */).attachInternals());\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'list';\n      this.addEventListener('keydown', this.listController.handleKeydown);\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot\n          @deactivate-items=${this.listController.onDeactivateItems}\n          @request-activation=${this.listController.onRequestActivation}\n          @slotchange=${this.listController.onSlotchange}>\n      </slot>\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    return this.listController.activateNextItem();\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    return this.listController.activatePreviousItem();\n  }\n}\n"]}
+{"version":3,"file":"list.js","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,4BAA4B,GAC7B,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAC,cAAc,EAAE,aAAa,EAAC,MAAM,sBAAsB,CAAC;AAGnE,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAS,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAMxE,gEAAgE;AAChE,MAAM,OAAO,IAAK,SAAQ,UAAU;IAgBlC,cAAc;IACd,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;IACnC,CAAC;IAuBD;QACE,KAAK,EAAE,CAAC;QAtBO,mBAAc,GAAG,IAAI,cAAc,CAAW;YAC7D,MAAM,EAAE,CAAC,IAAiB,EAAoB,EAAE,CAC9C,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;YACnC,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS;YACtC,KAAK,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK;YACvD,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE;gBACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACrB,CAAC;YACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YACpB,CAAC;YACD,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC;YACnD,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;SAChE,CAAC,CAAC;QAEc,cAAS,GAAG,4BAA4B,CACvD,IAAI;QACJ,0BAA0B;QACzB,IAAoB,CAAC,eAAe,EAAE,CACxC,CAAC;QAIA,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;YAC7B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SACrE;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,cAAc,CAAC,iBAAiB;8BACnC,IAAI,CAAC,cAAc,CAAC,mBAAmB;sBAC/C,IAAI,CAAC,cAAc,CAAC,YAAY;;KAEjD,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACH,gBAAgB;QACd,OAAO,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC;IAChD,CAAC;IAED;;;;;OAKG;IACH,oBAAoB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,oBAAoB,EAAE,CAAC;IACpD,CAAC;CACF;AA9EC;IACE,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC,GAAA,CAAA;AAWS;IADT,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCACmC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {queryAssignedElements} from 'lit/decorators.js';\n\nimport {\n  polyfillARIAMixin,\n  polyfillElementInternalsAria,\n} from '../../internal/aria/aria.js';\n\nimport {ListController, NavigableKeys} from './list-controller.js';\nimport {ListItem as SharedListItem} from './list-navigation-helpers.js';\n\nconst NAVIGABLE_KEY_SET = new Set<string>(Object.values(NavigableKeys));\n\ninterface ListItem extends SharedListItem {\n  type: 'text' | 'button' | 'link';\n}\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class List extends LitElement {\n  static {\n    polyfillARIAMixin(List);\n  }\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})\n  protected slotItems!: Array<ListItem | (HTMLElement & {item?: ListItem})>;\n\n  /** @export */\n  get items() {\n    return this.listController.items;\n  }\n\n  private readonly listController = new ListController<ListItem>({\n    isItem: (item: HTMLElement): item is ListItem =>\n      item.hasAttribute('md-list-item'),\n    getPossibleItems: () => this.slotItems,\n    isRtl: () => getComputedStyle(this).direction === 'rtl',\n    deactivateItem: (item) => {\n      item.tabIndex = -1;\n    },\n    activateItem: (item) => {\n      item.tabIndex = 0;\n    },\n    isNavigableKey: (key) => NAVIGABLE_KEY_SET.has(key),\n    isActivatable: (item) => !item.disabled && item.type !== 'text',\n  });\n\n  private readonly internals = polyfillElementInternalsAria(\n    this,\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals(),\n  );\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'list';\n      this.addEventListener('keydown', this.listController.handleKeydown);\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot\n        @deactivate-items=${this.listController.onDeactivateItems}\n        @request-activation=${this.listController.onRequestActivation}\n        @slotchange=${this.listController.onSlotchange}>\n      </slot>\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    return this.listController.activateNextItem();\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    return this.listController.activatePreviousItem();\n  }\n}\n"]}

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

@@ -48,6 +48,10 @@
     );
   }
 
+  :host(:is([type='button']:not([disabled]), [type='link'])) {
+    cursor: pointer;
+  }
+
   md-focus-ring {
     z-index: 1;
 
@@ -64,6 +68,7 @@
     // Resets. These can be removed once we're no longer use these tags
     background: none;
     border: none;
+    cursor: inherit;
     padding: 0;
     margin: 0;
     text-align: unset;
@@ -74,6 +79,8 @@
     border-radius: inherit;
     display: flex;
     flex: 1;
+    max-width: inherit;
+    min-width: inherit;
     outline: none;
     // hide android tap color since we have ripple
     -webkit-tap-highlight-color: transparent;
@@ -143,4 +150,15 @@
   [slot='end'] {
     color: map.get($tokens, 'trailing-icon-color');
   }
+
+  @media (forced-colors: active) {
+    .disabled slot {
+      color: GrayText;
+    }
+
+    .list-item.disabled {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
 }

package/list/internal/listitem/harness.d.ts

@@ -11,11 +11,11 @@ import { ListItem } from '../list-navigation-helpers.js';
  * Keys that are handled by MdList. Keys not included in this are not handled by
  * MdList and should be dispatched by yourself.
  */
-export type HandledListKeys = typeof NavigableKeys[keyof typeof NavigableKeys];
+export type HandledListKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];
 /**
  * Test harness for list item.
  */
-export declare class ListItemHarness extends Harness<ListItem & LitElement> {
+export declare class ListItemHarness<T extends LitElement = ListItem & LitElement> extends Harness<T> {
     getInteractiveElement(): Promise<HTMLElement>;
     /**
      * Constructs keyboard events that are handled by List and makes sure that
@@ -23,5 +23,5 @@ export declare class ListItemHarness extends Harness<ListItem & LitElement> {
      *
      * @param key The key to dispatch on the list.
      */
-    pressHandledKey<T extends string = HandledListKeys>(key: T): Promise<void>;
+    pressHandledKey<U extends string = HandledListKeys>(key: U): Promise<void>;
 }

package/list/internal/listitem/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAUpD;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,OAA4B;IACtD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;IAC5E,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;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';\nimport {NavigableKeys} from '../list-controller.js';\nimport {ListItem} from '../list-navigation-helpers.js';\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys = typeof NavigableKeys[keyof typeof NavigableKeys];\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness extends Harness<ListItem&LitElement> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.list-item') as HTMLElement;\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAWpD;;GAEG;AACH,MAAM,OAAO,eAEX,SAAQ,OAAU;IACT,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;IAC5E,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;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';\nimport {NavigableKeys} from '../list-controller.js';\nimport {ListItem} from '../list-navigation-helpers.js';\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n  (typeof NavigableKeys)[keyof typeof NavigableKeys];\n\n/**\n * Test harness for list item.\n */\nexport class ListItemHarness<\n  T extends LitElement = ListItem & LitElement,\n> extends Harness<T> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.list-item') as HTMLElement;\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<U extends string = HandledListKeys>(key: U) {\n    await this.keypress(key, {code: key});\n  }\n}\n"]}

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{display:flex;--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# sourceMappingURL=list-item-styles.css.map */
+export const styles = css `:host{display:flex;--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}/*# 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{display:flex;--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# 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{display:flex;--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}/*# sourceMappingURL=list-item-styles.css.map */\n`;\n "]}

package/list/internal/listitem/list-item.d.ts

@@ -3,9 +3,9 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../../../ripple/ripple.js';
 import '../../../focus/md-focus-ring.js';
 import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
 import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { ListItem } from '../list-navigation-helpers.js';
@@ -14,7 +14,8 @@ import { ListItem } from '../list-navigation-helpers.js';
  */
 export type ListItemType = 'text' | 'button' | 'link';
 /**
- * @fires request-activation
+ * @fires request-activation {Event} Requests the list to set `tabindex=0` on
+ * the item and focus it. --bubbles --composed
  */
 export declare class ListItemEl extends LitElement implements ListItem {
     /** @nocollapse */

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

@@ -4,17 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '../../../ripple/ripple.js';
 import '../../../focus/md-focus-ring.js';
 import '../../../labs/item/item.js';
+import '../../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { html as staticHtml, literal } from 'lit/static-html.js';
+import { literal, html as staticHtml } from 'lit/static-html.js';
 import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
-import { createRequestActivationEvent } from '../list-navigation-helpers.js';
+import { createRequestActivationEvent, } from '../list-navigation-helpers.js';
 /**
- * @fires request-activation
+ * @fires request-activation {Event} Requests the list to set `tabindex=0` on
+ * the item and focus it. --bubbles --composed
  */
 export class ListItemEl extends LitElement {
     constructor() {
@@ -55,8 +56,7 @@ export class ListItemEl extends LitElement {
         return this.renderListItem(html `
       <md-item>
         <div slot="container">
-          ${this.renderRipple()}
-          ${this.renderFocusRing()}
+          ${this.renderRipple()} ${this.renderFocusRing()}
         </div>
         <slot name="start" slot="start"></slot>
         <slot name="end" slot="end"></slot>
@@ -112,11 +112,10 @@ export class ListItemEl extends LitElement {
         if (this.type === 'text') {
             return nothing;
         }
-        return html `
-      <md-ripple
-          part="ripple"
-          for="item"
-          ?disabled=${this.isDisabled}></md-ripple>`;
+        return html ` <md-ripple
+      part="ripple"
+      for="item"
+      ?disabled=${this.isDisabled}></md-ripple>`;
     }
     /**
      * Handles rendering of the focus ring.
@@ -125,12 +124,11 @@ export class ListItemEl extends LitElement {
         if (this.type === 'text') {
             return nothing;
         }
-        return html `
-      <md-focus-ring
-          @visibility-changed=${this.onFocusRingVisibilityChanged}
-          part="focus-ring"
-          for="item"
-          inward></md-focus-ring>`;
+        return html ` <md-focus-ring
+      @visibility-changed=${this.onFocusRingVisibilityChanged}
+      part="focus-ring"
+      for="item"
+      inward></md-focus-ring>`;
     }
     onFocusRingVisibilityChanged(e) { }
     /**
@@ -148,8 +146,9 @@ export class ListItemEl extends LitElement {
       <slot name="overline" slot="overline"></slot>
       <slot name="headline" slot="headline"></slot>
       <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot name="trailing-supporting-text"
-          slot="trailing-supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"></slot>
     `;
     }
     onFocus() {
@@ -171,13 +170,13 @@ export class ListItemEl extends LitElement {
 /** @nocollapse */
 ListItemEl.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
-    delegatesFocus: true
+    delegatesFocus: true,
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ListItemEl.prototype, "disabled", void 0);
 __decorate([
-    property()
+    property({ reflect: true })
 ], ListItemEl.prototype, "type", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'md-list-item', reflect: true })

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../ripple/ripple.js';\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {createRequestActivationEvent, ListItem} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text'|'button'|'link';\n\n/**\n * @fires request-activation\n */\nexport class ListItemEl extends LitElement implements ListItem {\n  static {\n    requestUpdateOnAriaChange(ListItemEl);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n   * \"button\" for interactive items.\n   */\n  @property() type: ListItemType = 'text';\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;\n\n  private get isDisabled() {\n    return this.disabled && this.type !== 'link';\n  }\n\n  protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n    if (this.href) {\n      this.type = 'link';\n    }\n\n    super.willUpdate(changed);\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()}\n          ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.type) {\n      case 'link':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'text':\n        tag = literal`li`;\n        break;\n    }\n\n    const isInteractive = this.type !== 'text';\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"listitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n        ?disabled=${this.isDisabled}\n        role=\"listitem\"\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @focus=${this.onFocus}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult|typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html`\n      <md-ripple\n          part=\"ripple\"\n          for=\"item\"\n          ?disabled=${this.isDisabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult|typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html`\n      <md-focus-ring\n          @visibility-changed=${this.onFocusRingVisibilityChanged}\n          part=\"focus-ring\"\n          for=\"item\"\n          inward></md-focus-ring>`;\n  }\n\n  protected onFocusRingVisibilityChanged(e: Event) {}\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {'disabled': this.isDisabled};\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  protected onFocus() {\n    if (this.tabIndex !== -1) {\n      return;\n    }\n    // Handles the case where the user clicks on the element and then tabs.\n    this.dispatchEvent(createRequestActivationEvent());\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {\n  createRequestActivationEvent,\n  ListItem,\n} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text' | 'button' | 'link';\n\n/**\n * @fires request-activation {Event} Requests the list to set `tabindex=0` on\n * the item and focus it. --bubbles --composed\n */\nexport class ListItemEl extends LitElement implements ListItem {\n  static {\n    requestUpdateOnAriaChange(ListItemEl);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Disables the item and makes it non-selectable and non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n   * \"button\" for interactive items.\n   */\n  @property({reflect: true}) type: ListItemType = 'text';\n\n  /**\n   * READONLY. Sets the `md-list-item` attribute on the element.\n   */\n  @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n  isListItem = true;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n   * set.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n  private get isDisabled() {\n    return this.disabled && this.type !== 'link';\n  }\n\n  protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n    if (this.href) {\n      this.type = 'link';\n    }\n\n    super.willUpdate(changed);\n  }\n\n  protected override render() {\n    return this.renderListItem(html`\n      <md-item>\n        <div slot=\"container\">\n          ${this.renderRipple()} ${this.renderFocusRing()}\n        </div>\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n        ${this.renderBody()}\n      </md-item>\n    `);\n  }\n\n  /**\n   * Renders the root list item.\n   *\n   * @param content the child content of the list item.\n   */\n  protected renderListItem(content: unknown) {\n    const isAnchor = this.type === 'link';\n    let tag: StaticValue;\n    switch (this.type) {\n      case 'link':\n        tag = literal`a`;\n        break;\n      case 'button':\n        tag = literal`button`;\n        break;\n      default:\n      case 'text':\n        tag = literal`li`;\n        break;\n    }\n\n    const isInteractive = this.type !== 'text';\n    // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n    // then all are \"listitem\" roles for correct announcement.\n    const target = isAnchor && !!this.target ? this.target : nothing;\n    return staticHtml`\n      <${tag}\n        id=\"item\"\n        tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n        ?disabled=${this.isDisabled}\n        role=\"listitem\"\n        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n        class=\"list-item ${classMap(this.getRenderClasses())}\"\n        href=${this.href || nothing}\n        target=${target}\n        @focus=${this.onFocus}\n      >${content}</${tag}>\n    `;\n  }\n\n  /**\n   * Handles rendering of the ripple element.\n   */\n  protected renderRipple(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-ripple\n      part=\"ripple\"\n      for=\"item\"\n      ?disabled=${this.isDisabled}></md-ripple>`;\n  }\n\n  /**\n   * Handles rendering of the focus ring.\n   */\n  protected renderFocusRing(): TemplateResult | typeof nothing {\n    if (this.type === 'text') {\n      return nothing;\n    }\n\n    return html` <md-focus-ring\n      @visibility-changed=${this.onFocusRingVisibilityChanged}\n      part=\"focus-ring\"\n      for=\"item\"\n      inward></md-focus-ring>`;\n  }\n\n  protected onFocusRingVisibilityChanged(e: Event) {}\n\n  /**\n   * Classes applied to the list item root.\n   */\n  protected getRenderClasses(): ClassInfo {\n    return {'disabled': this.isDisabled};\n  }\n\n  /**\n   * Handles rendering the headline and supporting text.\n   */\n  protected renderBody() {\n    return html`\n      <slot></slot>\n      <slot name=\"overline\" slot=\"overline\"></slot>\n      <slot name=\"headline\" slot=\"headline\"></slot>\n      <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n      <slot\n        name=\"trailing-supporting-text\"\n        slot=\"trailing-supporting-text\"></slot>\n    `;\n  }\n\n  protected onFocus() {\n    if (this.tabIndex !== -1) {\n      return;\n    }\n    // Handles the case where the user clicks on the element and then tabs.\n    this.dispatchEvent(createRequestActivationEvent());\n  }\n\n  override focus() {\n    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n    // work programmatically like in FF and select-option\n    this.listItemRoot?.focus();\n  }\n}\n"]}

package/list/list-item.d.ts

@@ -30,24 +30,16 @@ declare global {
  *
  * Acceptable slot child variants are:
  *
- * - `video[slot=start-video]`
- * - `video[slot=start-video-large]`
- * - `img,span[slot=start-avatar]`
- * - `img[slot=start-image]`
- * - `md-icon[slot=start-icon]`
- * - `svg[slot=start-icon]`
- * - `img[slot=start-icon]`
- * - `md-icon[slot=end-icon]`
- * - `svg[slot=end-icon]`
- * - `img[slot=end-icon]`
+ * - `img[slot=end]`
+ * - `img[slot=start]`
  *
  *  @example
  * ```html
  * <md-list-item
  *     headline="User Name"
  *     supportingText="user@name.com">
- *   <md-icon slot="start-icon">account_circle</md-icon>
- *   <md-icon slot="end-icon">check</md-icon>
+ *   <md-icon slot="start">account_circle</md-icon>
+ *   <md-icon slot="end">check</md-icon>
  * </md-list-item>
  * ```
  *

package/list/list-item.js

@@ -5,7 +5,6 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './internal/listitem/forced-colors-styles.css.js';
 import { ListItemEl as ListItem } from './internal/listitem/list-item.js';
 import { styles } from './internal/listitem/list-item-styles.css.js';
 /**
@@ -28,24 +27,16 @@ import { styles } from './internal/listitem/list-item-styles.css.js';
  *
  * Acceptable slot child variants are:
  *
- * - `video[slot=start-video]`
- * - `video[slot=start-video-large]`
- * - `img,span[slot=start-avatar]`
- * - `img[slot=start-image]`
- * - `md-icon[slot=start-icon]`
- * - `svg[slot=start-icon]`
- * - `img[slot=start-icon]`
- * - `md-icon[slot=end-icon]`
- * - `svg[slot=end-icon]`
- * - `img[slot=end-icon]`
+ * - `img[slot=end]`
+ * - `img[slot=start]`
  *
  *  @example
  * ```html
  * <md-list-item
  *     headline="User Name"
  *     supportingText="user@name.com">
- *   <md-icon slot="start-icon">account_circle</md-icon>
- *   <md-icon slot="end-icon">check</md-icon>
+ *   <md-icon slot="start">account_circle</md-icon>
+ *   <md-icon slot="end">check</md-icon>
  * </md-list-item>
  * ```
  *
@@ -56,7 +47,7 @@ import { styles } from './internal/listitem/list-item-styles.css.js';
  */
 export let MdListItem = class MdListItem extends ListItem {
 };
-MdListItem.styles = [styles, forcedColors];
+MdListItem.styles = [styles];
 MdListItem = __decorate([
     customElement('md-list-item')
 ], MdListItem);

package/list/list-item.js.map

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

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,OAAO,IAAI,CAAC,OAAe,CAAC;IAC9B,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 as Menu;\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"]}
+{"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,OAAe,CAAC;IAC9B,CAAC;IAED,uDAAuD;IACvD,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAC3B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAgC,CAAC,CAChE,CAAC;IACJ,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,CACnB,QAAQ,EACR,GAAG,EAAE;gBACH,OAAO,CAAC,IAAI,CAAC,CAAC;YAChB,CAAC,EACD,EAAC,IAAI,EAAE,IAAI,EAAC,CACb,CAAC;QACJ,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 as Menu;\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\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(\n        'opened',\n        () => {\n          resolve(true);\n        },\n        {once: true},\n      );\n    });\n\n    menu.show();\n    await opened;\n  }\n}\n"]}

package/menu/internal/_menu.scss

@@ -60,6 +60,12 @@
   .menu {
     border-radius: map.get($tokens, 'container-shape');
     display: none;
+    inset: auto;
+    border: none;
+    padding: 0px;
+    overflow: visible;
+    // [popover] adds a canvas background
+    background-color: transparent;
     opacity: 0;
     z-index: 20;
     position: absolute;
@@ -70,6 +76,10 @@
     max-width: inherit;
   }
 
+  .menu::backdrop {
+    display: none;
+  }
+
   .fixed {
     position: fixed;
   }
@@ -93,10 +103,11 @@
     padding-block: 8px;
   }
 
-  .has-overflow .items {
+  .has-overflow:not([popover]) .items {
     overflow: visible;
   }
 
+  .has-overflow.animating .items,
   .animating .items {
     overflow: hidden;
   }
@@ -121,4 +132,12 @@
   ::slotted(:is(md-divider, [role='separator'])) {
     margin: 8px 0;
   }
+
+  @media (forced-colors: active) {
+    .menu {
+      border-style: solid;
+      border-color: CanvasText;
+      border-width: 1px;
+    }
+  }
 }

package/menu/internal/controllers/menuItemController.d.ts

@@ -60,6 +60,12 @@ export interface MenuItemControllerConfig {
      * A function that returns the headline element of the menu item.
      */
     getHeadlineElements: () => HTMLElement[];
+    /**
+     * The HTML Element that accepts user interactions like click. Used for
+     * occasions like programmatically clicking anchor tags when `Enter` is
+     * pressed.
+     */
+    getInteractiveElement: () => HTMLElement | null;
 }
 /**
  * A controller that provides most functionality of an element that implements
@@ -69,6 +75,7 @@ export declare class MenuItemController implements ReactiveController {
     private readonly host;
     private internalTypeaheadText;
     private readonly getHeadlineElements;
+    private readonly getInteractiveElement;
     /**
      * @param host The MenuItem in which to attach this controller to.
      * @param config The object that configures this controller's behavior.

package/menu/internal/controllers/menuItemController.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { CloseReason, createDefaultCloseMenuEvent, isClosableKey } from './shared.js';
+import { CloseReason, createDefaultCloseMenuEvent, isClosableKey, } from './shared.js';
 /**
  * A controller that provides most functionality of an element that implements
  * the MenuItem interface.
@@ -23,23 +23,36 @@ export class MenuItemController {
         this.onClick = () => {
             if (this.host.keepOpen)
                 return;
-            this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, { kind: CloseReason.CLICK_SELECTION }));
+            this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, {
+                kind: CloseReason.CLICK_SELECTION,
+            }));
         };
         /**
          * Bind this click listener to the interactive element. Handles closing the
          * menu.
          */
         this.onKeydown = (event) => {
+            // Check if the interactive element is an anchor tag. If so, click it.
+            if (this.host.href && event.code === 'Enter') {
+                const interactiveElement = this.getInteractiveElement();
+                if (interactiveElement instanceof HTMLAnchorElement) {
+                    interactiveElement.click();
+                }
+            }
             if (this.host.keepOpen || event.defaultPrevented)
                 return;
             const keyCode = event.code;
             if (!event.defaultPrevented && isClosableKey(keyCode)) {
                 event.preventDefault();
-                this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, { kind: CloseReason.KEYDOWN, key: keyCode }));
+                this.host.dispatchEvent(createDefaultCloseMenuEvent(this.host, {
+                    kind: CloseReason.KEYDOWN,
+                    key: keyCode,
+                }));
             }
         };
-        const { getHeadlineElements, } = config;
+        const { getHeadlineElements, getInteractiveElement } = config;
         this.getHeadlineElements = getHeadlineElements;
+        this.getInteractiveElement = getInteractiveElement;
         this.host.addController(this);
     }
     /**

package/menu/internal/controllers/menuItemController.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuItemController.js","sourceRoot":"","sources":["menuItemController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {CloseReason, createDefaultCloseMenuEvent, isClosableKey} from './shared.js';\n\n/**\n * Interface specific to menu item and not HTMLElement.\n *\n * NOTE: required properties are expected to be reactive.\n */\ninterface MenuItemAdditions {\n  /**\n   * Whether or not the item is in the disabled state.\n   */\n  disabled: boolean;\n  /**\n   * The text of the item that will be used for typeahead. If not set, defaults\n   * to the textContent of the element slotted into the headline.\n   */\n  typeaheadText: string;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected: boolean;\n  /**\n   * Sets the behavior and role of the menu item, defaults to \"menuitem\".\n   */\n  type: MenuItemType;\n  /**\n   * Whether it should keep the menu open after click.\n   */\n  keepOpen?: boolean;\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  href?: string;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * it should have the `md-menu-item` attribute set.\n *\n * NOTE, the required properties are recommended to be reactive properties.\n */\nexport type MenuItem = MenuItemAdditions&HTMLElement;\n\n/**\n * Supported behaviors for a menu item.\n */\nexport type MenuItemType = 'menuitem'|'option'|'button'|'link';\n\n/**\n * The options used to inialize MenuItemController.\n */\nexport interface MenuItemControllerConfig {\n  /**\n   * A function that returns the headline element of the menu item.\n   */\n  getHeadlineElements: () => HTMLElement[];\n}\n\n/**\n * A controller that provides most functionality of an element that implements\n * the MenuItem interface.\n */\nexport class MenuItemController implements ReactiveController {\n  private internalTypeaheadText: string|null = null;\n  private readonly getHeadlineElements:\n      MenuItemControllerConfig['getHeadlineElements'];\n\n  /**\n   * @param host The MenuItem in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n      private readonly host: ReactiveControllerHost&MenuItem,\n      config: MenuItemControllerConfig) {\n    const {\n      getHeadlineElements,\n    } = config;\n    this.getHeadlineElements = getHeadlineElements;\n    this.host.addController(this);\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    if (this.internalTypeaheadText !== null) {\n      return this.internalTypeaheadText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach((headlineElement) => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    return textParts.join(' ');\n  }\n\n  /**\n   * The recommended tag name to render as the list item.\n   */\n  get tagName() {\n    const type = this.host.type;\n\n    switch (type) {\n      case 'link':\n        return 'a' as const;\n      case 'button':\n        return 'button' as const;\n      default:\n      case 'menuitem':\n      case 'option':\n        return 'li' as const;\n    }\n  }\n\n  /**\n   * The recommended role of the menu item.\n   */\n  get role() {\n    return this.host.type === 'option' ? 'option' : 'menuitem';\n  }\n\n  hostConnected() {\n    this.host.toggleAttribute('md-menu-item', true);\n  }\n\n  hostUpdate() {\n    if (this.host.href) {\n      this.host.type = 'link';\n    }\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    if (this.host.keepOpen) return;\n\n    this.host.dispatchEvent(createDefaultCloseMenuEvent(\n        this.host, {kind: CloseReason.CLICK_SELECTION}));\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (event: KeyboardEvent) => {\n    if (this.host.keepOpen || event.defaultPrevented) return;\n    const keyCode = event.code;\n\n    if (!event.defaultPrevented && isClosableKey(keyCode)) {\n      event.preventDefault();\n      this.host.dispatchEvent(createDefaultCloseMenuEvent(\n          this.host, {kind: CloseReason.KEYDOWN, key: keyCode}));\n    }\n  };\n\n  /**\n   * Use to set the typeaheadText when it changes.\n   */\n  setTypeaheadText(text: string) {\n    this.internalTypeaheadText = text;\n  }\n}"]}
+{"version":3,"file":"menuItemController.js","sourceRoot":"","sources":["menuItemController.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ReactiveController, ReactiveControllerHost} from 'lit';\n\nimport {\n  CloseReason,\n  createDefaultCloseMenuEvent,\n  isClosableKey,\n} from './shared.js';\n\n/**\n * Interface specific to menu item and not HTMLElement.\n *\n * NOTE: required properties are expected to be reactive.\n */\ninterface MenuItemAdditions {\n  /**\n   * Whether or not the item is in the disabled state.\n   */\n  disabled: boolean;\n  /**\n   * The text of the item that will be used for typeahead. If not set, defaults\n   * to the textContent of the element slotted into the headline.\n   */\n  typeaheadText: string;\n  /**\n   * Whether or not the item is in the selected visual state.\n   */\n  selected: boolean;\n  /**\n   * Sets the behavior and role of the menu item, defaults to \"menuitem\".\n   */\n  type: MenuItemType;\n  /**\n   * Whether it should keep the menu open after click.\n   */\n  keepOpen?: boolean;\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  href?: string;\n  /**\n   * Focuses the item.\n   */\n  focus: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * it should have the `md-menu-item` attribute set.\n *\n * NOTE, the required properties are recommended to be reactive properties.\n */\nexport type MenuItem = MenuItemAdditions & HTMLElement;\n\n/**\n * Supported behaviors for a menu item.\n */\nexport type MenuItemType = 'menuitem' | 'option' | 'button' | 'link';\n\n/**\n * The options used to inialize MenuItemController.\n */\nexport interface MenuItemControllerConfig {\n  /**\n   * A function that returns the headline element of the menu item.\n   */\n  getHeadlineElements: () => HTMLElement[];\n\n  /**\n   * The HTML Element that accepts user interactions like click. Used for\n   * occasions like programmatically clicking anchor tags when `Enter` is\n   * pressed.\n   */\n  getInteractiveElement: () => HTMLElement | null;\n}\n\n/**\n * A controller that provides most functionality of an element that implements\n * the MenuItem interface.\n */\nexport class MenuItemController implements ReactiveController {\n  private internalTypeaheadText: string | null = null;\n  private readonly getHeadlineElements: MenuItemControllerConfig['getHeadlineElements'];\n  private readonly getInteractiveElement: MenuItemControllerConfig['getInteractiveElement'];\n\n  /**\n   * @param host The MenuItem in which to attach this controller to.\n   * @param config The object that configures this controller's behavior.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost & MenuItem,\n    config: MenuItemControllerConfig,\n  ) {\n    const {getHeadlineElements, getInteractiveElement} = config;\n    this.getHeadlineElements = getHeadlineElements;\n    this.getInteractiveElement = getInteractiveElement;\n    this.host.addController(this);\n  }\n\n  /**\n   * The text that is selectable via typeahead. If not set, defaults to the\n   * innerText of the item slotted into the `\"headline\"` slot.\n   */\n  get typeaheadText() {\n    if (this.internalTypeaheadText !== null) {\n      return this.internalTypeaheadText;\n    }\n\n    const headlineElements = this.getHeadlineElements();\n\n    const textParts: string[] = [];\n    headlineElements.forEach((headlineElement) => {\n      if (headlineElement.textContent && headlineElement.textContent.trim()) {\n        textParts.push(headlineElement.textContent.trim());\n      }\n    });\n\n    return textParts.join(' ');\n  }\n\n  /**\n   * The recommended tag name to render as the list item.\n   */\n  get tagName() {\n    const type = this.host.type;\n\n    switch (type) {\n      case 'link':\n        return 'a' as const;\n      case 'button':\n        return 'button' as const;\n      default:\n      case 'menuitem':\n      case 'option':\n        return 'li' as const;\n    }\n  }\n\n  /**\n   * The recommended role of the menu item.\n   */\n  get role() {\n    return this.host.type === 'option' ? 'option' : 'menuitem';\n  }\n\n  hostConnected() {\n    this.host.toggleAttribute('md-menu-item', true);\n  }\n\n  hostUpdate() {\n    if (this.host.href) {\n      this.host.type = 'link';\n    }\n  }\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onClick = () => {\n    if (this.host.keepOpen) return;\n\n    this.host.dispatchEvent(\n      createDefaultCloseMenuEvent(this.host, {\n        kind: CloseReason.CLICK_SELECTION,\n      }),\n    );\n  };\n\n  /**\n   * Bind this click listener to the interactive element. Handles closing the\n   * menu.\n   */\n  onKeydown = (event: KeyboardEvent) => {\n    // Check if the interactive element is an anchor tag. If so, click it.\n    if (this.host.href && event.code === 'Enter') {\n      const interactiveElement = this.getInteractiveElement();\n      if (interactiveElement instanceof HTMLAnchorElement) {\n        interactiveElement.click();\n      }\n    }\n\n    if (this.host.keepOpen || event.defaultPrevented) return;\n    const keyCode = event.code;\n\n    if (!event.defaultPrevented && isClosableKey(keyCode)) {\n      event.preventDefault();\n      this.host.dispatchEvent(\n        createDefaultCloseMenuEvent(this.host, {\n          kind: CloseReason.KEYDOWN,\n          key: keyCode,\n        }),\n      );\n    }\n  };\n\n  /**\n   * Use to set the typeaheadText when it changes.\n   */\n  setTypeaheadText(text: string) {\n    this.internalTypeaheadText = text;\n  }\n}\n"]}