@material/web 1.0.0 → 1.0.2-nightly.3d8c7ac.0

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

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

package/list/harness.d.ts

@@ -6,6 +6,7 @@
 import { Harness } from '../testing/harness.js';
 import { List } from './internal/list.js';
 import { ListItemHarness } from './internal/listitem/harness.js';
+import { ListItemEl } from './internal/listitem/list-item.js';
 export { ListItemHarness } from './internal/listitem/harness.js';
 declare const NAVIGABLE_KEYS: {
     readonly ArrowDown: "ArrowDown";
@@ -17,7 +18,7 @@ declare const NAVIGABLE_KEYS: {
  * 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 NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];
+export type HandledListKeys = (typeof NAVIGABLE_KEYS)[keyof typeof NAVIGABLE_KEYS];
 /**
  * Test harness for list.
  */
@@ -27,7 +28,7 @@ export declare class ListHarness extends Harness<List> {
      */
     protected getInteractiveElement(): Promise<List>;
     /** @return List item harnesses. */
-    getItems(): ListItemHarness[];
+    getItems(): ListItemHarness<ListItemEl>[];
     /**
      * Constructs keyboard events that are handled by List and makes sure that
      * they are constructed in a manner that List understands.

package/list/harness.js.map

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

package/list/internal/list-controller.d.ts

@@ -18,7 +18,7 @@ export declare const NavigableKeys: {
 /**
  * Default set of navigable keys.
  */
-export type NavigableKeys = typeof NavigableKeys[keyof typeof NavigableKeys];
+export type NavigableKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];
 /**
  * The configuration object to customize the behavior of the List Controller
  */

package/list/internal/list-controller.js

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { activateFirstItem, activateLastItem, activateNextItem, activatePreviousItem, getActiveItem, getFirstActivatableItem } from './list-navigation-helpers.js';
+import { activateFirstItem, activateLastItem, activateNextItem, activatePreviousItem, getActiveItem, getFirstActivatableItem, } from './list-navigation-helpers.js';
 // TODO: move this file to List and make List use this
 /**
  * Default keys that trigger navigation.
@@ -43,8 +43,12 @@ export class ListController {
             }
             event.preventDefault();
             const isRtl = this.isRtl();
-            const inlinePrevious = isRtl ? NavigableKeys.ArrowRight : NavigableKeys.ArrowLeft;
-            const inlineNext = isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
+            const inlinePrevious = isRtl
+                ? NavigableKeys.ArrowRight
+                : NavigableKeys.ArrowLeft;
+            const inlineNext = isRtl
+                ? NavigableKeys.ArrowLeft
+                : NavigableKeys.ArrowRight;
             switch (key) {
                 // Activate the next item
                 case NavigableKeys.ArrowDown:

package/list/internal/list-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-controller.js","sourceRoot":"","sources":["list-controller.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 {activateFirstItem, activateLastItem, activateNextItem, activatePreviousItem, getActiveItem, getFirstActivatableItem, ListItem} from './list-navigation-helpers.js';\n\n// TODO: move this file to List and make List use this\n\n/**\n * Default keys that trigger navigation.\n */\n// tslint:disable:enforce-name-casing Following Enum style\nexport const NavigableKeys = {\n  ArrowDown: 'ArrowDown',\n  ArrowLeft: 'ArrowLeft',\n  ArrowUp: 'ArrowUp',\n  ArrowRight: 'ArrowRight',\n  Home: 'Home',\n  End: 'End',\n} as const;\n// tslint:enable:enforce-name-casing\n\n/**\n * Default set of navigable keys.\n */\nexport type NavigableKeys = typeof NavigableKeys[keyof typeof NavigableKeys];\n\n/**\n * The configuration object to customize the behavior of the List Controller\n */\nexport interface ListControllerConfig<Item extends ListItem> {\n  /**\n   * A function that determines whether or not the given element is an Item\n   */\n  isItem: (item: HTMLElement) => item is Item;\n  /**\n   * A function that returns an array of elements to consider as items. For\n   * example, all the slotted elements.\n   */\n  getPossibleItems: () => HTMLElement[];\n  /**\n   * A function that returns whether or not the list is in an RTL context.\n   */\n  isRtl: () => boolean;\n  /**\n   * Deactivates an item such as setting the tabindex to -1 and or sets selected\n   * to false.\n   */\n  deactivateItem: (item: Item) => void;\n  /**\n   * Activates an item such as setting the tabindex to 1 and or sets selected to\n   * true (but does not focus).\n   */\n  activateItem: (item: Item) => void;\n  /**\n   * Whether or not the key should be handled by the list for navigation.\n   */\n  isNavigableKey: (key: string) => boolean;\n  /**\n   * Whether or not the item can be activated. Defaults to items that are not\n   * disabled.\n   */\n  isActivatable?: (item: Item) => boolean;\n}\n\n/**\n * A controller that handles list keyboard navigation and item management.\n */\nexport class ListController<Item extends ListItem> {\n  isItem: (item: HTMLElement) => item is Item;\n  private readonly getPossibleItems: () => HTMLElement[];\n  private readonly isRtl: () => boolean;\n  private readonly deactivateItem: (item: Item) => void;\n  private readonly activateItem: (item: Item) => void;\n  private readonly isNavigableKey: (key: string) => boolean;\n  private readonly isActivatable?: (item: Item) => boolean;\n\n  constructor(config: ListControllerConfig<Item>) {\n    const {\n      isItem,\n      getPossibleItems,\n      isRtl,\n      deactivateItem,\n      activateItem,\n      isNavigableKey,\n      isActivatable,\n    } = config;\n    this.isItem = isItem;\n    this.getPossibleItems = getPossibleItems;\n    this.isRtl = isRtl;\n    this.deactivateItem = deactivateItem;\n    this.activateItem = activateItem;\n    this.isNavigableKey = isNavigableKey;\n    this.isActivatable = isActivatable;\n  }\n\n  /**\n   * The items being managed by the list. Additionally, attempts to see if the\n   * object has a sub-item in the `.item` property.\n   */\n  get items(): Item[] {\n    const maybeItems = this.getPossibleItems();\n    const items: Item[] = [];\n\n    for (const itemOrParent of maybeItems) {\n      const isItem = this.isItem(itemOrParent);\n      // if the item is a list item, add it to the list of items\n      if (isItem) {\n        items.push(itemOrParent);\n        continue;\n      }\n\n      // If the item exposes an `item` property check if it is a list item.\n      const subItem = (itemOrParent as HTMLElement & {item?: Item}).item;\n      if (subItem && this.isItem(subItem)) {\n        items.push(subItem);\n      }\n    }\n\n    return items;\n  }\n\n  /**\n   * Handles keyboard navigation. Should be bound to the node that will act as\n   * the List.\n   */\n  handleKeydown = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (event.defaultPrevented || !this.isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly in upcoming calculations so we don't\n    // re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n\n    event.preventDefault();\n\n    const isRtl = this.isRtl();\n    const inlinePrevious =\n        isRtl ? NavigableKeys.ArrowRight : NavigableKeys.ArrowLeft;\n    const inlineNext =\n        isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;\n\n    switch (key) {\n      // Activate the next item\n      case NavigableKeys.ArrowDown:\n      case inlineNext:\n        activateNextItem(items, activeItemRecord, this.isActivatable);\n        break;\n\n      // Activate the previous item\n      case NavigableKeys.ArrowUp:\n      case inlinePrevious:\n        activatePreviousItem(items, activeItemRecord, this.isActivatable);\n        break;\n\n      // Activate the first item\n      case NavigableKeys.Home:\n        activateFirstItem(items, this.isActivatable);\n        break;\n\n      // Activate the last item\n      case NavigableKeys.End:\n        activateLastItem(items, this.isActivatable);\n        break;\n\n      default:\n        break;\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(): Item|null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activateNextItem(items, activeItemRecord, this.isActivatable);\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(): Item|null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activatePreviousItem(items, activeItemRecord, this.isActivatable);\n  }\n\n  /**\n   * Listener to be bound to the `deactivate-items` item event.\n   */\n  onDeactivateItems = () => {\n    const items = this.items;\n\n    for (const item of items) {\n      this.deactivateItem(item);\n    }\n  };\n\n  /**\n   * Listener to be bound to the `request-activation` item event..\n   */\n  onRequestActivation = (event: Event) => {\n    this.onDeactivateItems();\n    const target = event.target as Item;\n    this.activateItem(target);\n    target.focus();\n  };\n\n  /**\n   * Listener to be bound to the `slotchange` event for the slot that renders\n   * the items.\n   */\n  onSlotchange = () => {\n    const items = this.items;\n    // Whether we have encountered an item that has been activated\n    let encounteredActivated = false;\n\n    for (const item of items) {\n      const isActivated = !item.disabled && item.tabIndex > -1;\n\n      if (isActivated && !encounteredActivated) {\n        encounteredActivated = true;\n        item.tabIndex = 0;\n        continue;\n      }\n\n      // Deactivate the rest including disabled\n      item.tabIndex = -1;\n    }\n\n    if (encounteredActivated) {\n      return;\n    }\n\n    const firstActivatableItem =\n        getFirstActivatableItem(items, this.isActivatable);\n\n    if (!firstActivatableItem) {\n      return;\n    }\n\n    firstActivatableItem.tabIndex = 0;\n  };\n}\n"]}
+{"version":3,"file":"list-controller.js","sourceRoot":"","sources":["list-controller.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 {\n  activateFirstItem,\n  activateLastItem,\n  activateNextItem,\n  activatePreviousItem,\n  getActiveItem,\n  getFirstActivatableItem,\n  ListItem,\n} from './list-navigation-helpers.js';\n\n// TODO: move this file to List and make List use this\n\n/**\n * Default keys that trigger navigation.\n */\n// tslint:disable:enforce-name-casing Following Enum style\nexport const NavigableKeys = {\n  ArrowDown: 'ArrowDown',\n  ArrowLeft: 'ArrowLeft',\n  ArrowUp: 'ArrowUp',\n  ArrowRight: 'ArrowRight',\n  Home: 'Home',\n  End: 'End',\n} as const;\n// tslint:enable:enforce-name-casing\n\n/**\n * Default set of navigable keys.\n */\nexport type NavigableKeys = (typeof NavigableKeys)[keyof typeof NavigableKeys];\n\n/**\n * The configuration object to customize the behavior of the List Controller\n */\nexport interface ListControllerConfig<Item extends ListItem> {\n  /**\n   * A function that determines whether or not the given element is an Item\n   */\n  isItem: (item: HTMLElement) => item is Item;\n  /**\n   * A function that returns an array of elements to consider as items. For\n   * example, all the slotted elements.\n   */\n  getPossibleItems: () => HTMLElement[];\n  /**\n   * A function that returns whether or not the list is in an RTL context.\n   */\n  isRtl: () => boolean;\n  /**\n   * Deactivates an item such as setting the tabindex to -1 and or sets selected\n   * to false.\n   */\n  deactivateItem: (item: Item) => void;\n  /**\n   * Activates an item such as setting the tabindex to 1 and or sets selected to\n   * true (but does not focus).\n   */\n  activateItem: (item: Item) => void;\n  /**\n   * Whether or not the key should be handled by the list for navigation.\n   */\n  isNavigableKey: (key: string) => boolean;\n  /**\n   * Whether or not the item can be activated. Defaults to items that are not\n   * disabled.\n   */\n  isActivatable?: (item: Item) => boolean;\n}\n\n/**\n * A controller that handles list keyboard navigation and item management.\n */\nexport class ListController<Item extends ListItem> {\n  isItem: (item: HTMLElement) => item is Item;\n  private readonly getPossibleItems: () => HTMLElement[];\n  private readonly isRtl: () => boolean;\n  private readonly deactivateItem: (item: Item) => void;\n  private readonly activateItem: (item: Item) => void;\n  private readonly isNavigableKey: (key: string) => boolean;\n  private readonly isActivatable?: (item: Item) => boolean;\n\n  constructor(config: ListControllerConfig<Item>) {\n    const {\n      isItem,\n      getPossibleItems,\n      isRtl,\n      deactivateItem,\n      activateItem,\n      isNavigableKey,\n      isActivatable,\n    } = config;\n    this.isItem = isItem;\n    this.getPossibleItems = getPossibleItems;\n    this.isRtl = isRtl;\n    this.deactivateItem = deactivateItem;\n    this.activateItem = activateItem;\n    this.isNavigableKey = isNavigableKey;\n    this.isActivatable = isActivatable;\n  }\n\n  /**\n   * The items being managed by the list. Additionally, attempts to see if the\n   * object has a sub-item in the `.item` property.\n   */\n  get items(): Item[] {\n    const maybeItems = this.getPossibleItems();\n    const items: Item[] = [];\n\n    for (const itemOrParent of maybeItems) {\n      const isItem = this.isItem(itemOrParent);\n      // if the item is a list item, add it to the list of items\n      if (isItem) {\n        items.push(itemOrParent);\n        continue;\n      }\n\n      // If the item exposes an `item` property check if it is a list item.\n      const subItem = (itemOrParent as HTMLElement & {item?: Item}).item;\n      if (subItem && this.isItem(subItem)) {\n        items.push(subItem);\n      }\n    }\n\n    return items;\n  }\n\n  /**\n   * Handles keyboard navigation. Should be bound to the node that will act as\n   * the List.\n   */\n  handleKeydown = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (event.defaultPrevented || !this.isNavigableKey(key)) {\n      return;\n    }\n    // do not use this.items directly in upcoming calculations so we don't\n    // re-query the DOM unnecessarily\n    const items = this.items;\n\n    if (!items.length) {\n      return;\n    }\n\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n\n    event.preventDefault();\n\n    const isRtl = this.isRtl();\n    const inlinePrevious = isRtl\n      ? NavigableKeys.ArrowRight\n      : NavigableKeys.ArrowLeft;\n    const inlineNext = isRtl\n      ? NavigableKeys.ArrowLeft\n      : NavigableKeys.ArrowRight;\n\n    switch (key) {\n      // Activate the next item\n      case NavigableKeys.ArrowDown:\n      case inlineNext:\n        activateNextItem(items, activeItemRecord, this.isActivatable);\n        break;\n\n      // Activate the previous item\n      case NavigableKeys.ArrowUp:\n      case inlinePrevious:\n        activatePreviousItem(items, activeItemRecord, this.isActivatable);\n        break;\n\n      // Activate the first item\n      case NavigableKeys.Home:\n        activateFirstItem(items, this.isActivatable);\n        break;\n\n      // Activate the last item\n      case NavigableKeys.End:\n        activateLastItem(items, this.isActivatable);\n        break;\n\n      default:\n        break;\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(): Item | null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activateNextItem(items, activeItemRecord, this.isActivatable);\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(): Item | null {\n    const items = this.items;\n    const activeItemRecord = getActiveItem(items, this.isActivatable);\n    if (activeItemRecord) {\n      activeItemRecord.item.tabIndex = -1;\n    }\n    return activatePreviousItem(items, activeItemRecord, this.isActivatable);\n  }\n\n  /**\n   * Listener to be bound to the `deactivate-items` item event.\n   */\n  onDeactivateItems = () => {\n    const items = this.items;\n\n    for (const item of items) {\n      this.deactivateItem(item);\n    }\n  };\n\n  /**\n   * Listener to be bound to the `request-activation` item event..\n   */\n  onRequestActivation = (event: Event) => {\n    this.onDeactivateItems();\n    const target = event.target as Item;\n    this.activateItem(target);\n    target.focus();\n  };\n\n  /**\n   * Listener to be bound to the `slotchange` event for the slot that renders\n   * the items.\n   */\n  onSlotchange = () => {\n    const items = this.items;\n    // Whether we have encountered an item that has been activated\n    let encounteredActivated = false;\n\n    for (const item of items) {\n      const isActivated = !item.disabled && item.tabIndex > -1;\n\n      if (isActivated && !encounteredActivated) {\n        encounteredActivated = true;\n        item.tabIndex = 0;\n        continue;\n      }\n\n      // Deactivate the rest including disabled\n      item.tabIndex = -1;\n    }\n\n    if (encounteredActivated) {\n      return;\n    }\n\n    const firstActivatableItem = getFirstActivatableItem(\n      items,\n      this.isActivatable,\n    );\n\n    if (!firstActivatableItem) {\n      return;\n    }\n\n    firstActivatableItem.tabIndex = 0;\n  };\n}\n"]}

package/list/internal/list-navigation-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-navigation-helpers.js","sourceRoot":"","sources":["list-navigation-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport interface ListItem extends HTMLElement {\n  disabled: boolean;\n}\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<Item extends ListItem> {\n  item: Item;\n  index: number;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n */\nexport function activateFirstItem<Item extends ListItem>(\n    items: Item[], isActivatable = isItemNotDisabled<Item>) {\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 = getFirstActivatableItem(items, isActivatable);\n  if (firstItem) {\n    firstItem.tabIndex = 0;\n    firstItem.focus();\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @nocollapse\n */\nexport function activateLastItem<Item extends ListItem>(\n    items: Item[], isActivatable = isItemNotDisabled<Item>) {\n  const lastItem = getLastActivatableItem(items, isActivatable);\n  if (lastItem) {\n    lastItem.tabIndex = 0;\n    lastItem.focus();\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\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 */\nexport function deactivateActiveItem<Item extends ListItem>(\n    items: Item[], isActivatable = isItemNotDisabled<Item>) {\n  const activeItem = getActiveItem(items, isActivatable);\n  if (activeItem) {\n    activeItem.item.tabIndex = -1;\n  }\n  return activeItem;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\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 */\nexport function getActiveItem<Item extends ListItem>(\n    items: Item[], isActivatable = isItemNotDisabled<Item>) {\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.tabIndex === 0 && isActivatable(item)) {\n      return {\n        item,\n        index: i,\n      } as ItemRecord<Item>;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The first activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getFirstActivatableItem<Item extends ListItem>(\n    items: Item[], isActivatable = isItemNotDisabled<Item>) {\n  for (const item of items) {\n    if (isActivatable(item)) {\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The last activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getLastActivatableItem<Item extends ListItem>(\n    items: Item[], isActivatable = isItemNotDisabled<Item>) {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const item = items[i];\n    if (isActivatable(item)) {\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The next activatable item or `null` if none are activatable.\n */\nexport function getNextItem<Item extends ListItem>(\n    items: Item[], index: number, isActivatable = isItemNotDisabled<Item>) {\n  for (let i = 1; i < items.length; i++) {\n    const nextIndex = (i + index) % items.length;\n    const item = items[nextIndex];\n    if (isActivatable(item)) {\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The previous activatable item or `null` if none are activatable.\n */\nexport function getPrevItem<Item extends ListItem>(\n    items: Item[], index: number, isActivatable = isItemNotDisabled<Item>) {\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 (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return items[index] ? items[index] : null;\n}\n\n/**\n * Activates the next item and focuses it. If nothing is currently activated,\n * activates the first item.\n */\nexport function activateNextItem<Item extends ListItem>(\n    items: Item[], activeItemRecord: null|ItemRecord<Item>,\n    isActivatable = isItemNotDisabled<Item>): Item|null {\n  if (activeItemRecord) {\n    const next = getNextItem(items, activeItemRecord.index, isActivatable);\n\n    if (next) {\n      next.tabIndex = 0;\n      next.focus();\n    }\n\n    return next;\n  } else {\n    return activateFirstItem(items, isActivatable);\n  }\n}\n\n/**\n * Activates the previous item and focuses it. If nothing is currently\n * activated, activates the last item.\n */\nexport function activatePreviousItem<Item extends ListItem>(\n    items: Item[], activeItemRecord: null|ItemRecord<Item>,\n    isActivatable = isItemNotDisabled<Item>): Item|null {\n  if (activeItemRecord) {\n    const prev = getPrevItem(items, activeItemRecord.index, isActivatable);\n    if (prev) {\n      prev.tabIndex = 0;\n      prev.focus();\n    }\n    return prev;\n  } else {\n    return activateLastItem(items, isActivatable);\n  }\n}\n\n/**\n * Creates an event that requests the parent md-list to deactivate all other\n * items.\n */\nexport function createDeactivateItemsEvent() {\n  return new Event('deactivate-items', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the parent md-list to deactivate all\n * other items.\n */\nexport type DeactivateItemsEvent =\n    ReturnType<typeof createDeactivateItemsEvent>;\n\n/**\n * Creates an event that requests the menu to set `tabindex=0` on the item and\n * focus it. We use this pattern because List keeps track of what element is\n * active in the List by maintaining tabindex. We do not want list items\n * to set tabindex on themselves or focus themselves so that we can organize all\n * that logic in the parent List and Menus, and list item stays as dumb as\n * possible.\n */\nexport function createRequestActivationEvent() {\n  return new Event('request-activation', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the list activates and focuses the item.\n */\nexport type RequestActivationEvent =\n    ReturnType<typeof createRequestActivationEvent>;\n\n/**\n * The default `isActivatable` function, which checks if an item is not\n * disabled.\n *\n * @param item The item to check.\n * @return true if `item.disabled` is `false.\n */\nfunction isItemNotDisabled<Item extends ListItem>(item: Item) {\n  return !item.disabled;\n}\n"]}
+{"version":3,"file":"list-navigation-helpers.js","sourceRoot":"","sources":["list-navigation-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport interface ListItem extends HTMLElement {\n  disabled: boolean;\n}\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<Item extends ListItem> {\n  item: Item;\n  index: number;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n */\nexport function activateFirstItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\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 = getFirstActivatableItem(items, isActivatable);\n  if (firstItem) {\n    firstItem.tabIndex = 0;\n    firstItem.focus();\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @nocollapse\n */\nexport function activateLastItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  const lastItem = getLastActivatableItem(items, isActivatable);\n  if (lastItem) {\n    lastItem.tabIndex = 0;\n    lastItem.focus();\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\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 */\nexport function deactivateActiveItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  const activeItem = getActiveItem(items, isActivatable);\n  if (activeItem) {\n    activeItem.item.tabIndex = -1;\n  }\n  return activeItem;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\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 */\nexport function getActiveItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    if (item.tabIndex === 0 && isActivatable(item)) {\n      return {\n        item,\n        index: i,\n      } as ItemRecord<Item>;\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The first activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getFirstActivatableItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (const item of items) {\n    if (isActivatable(item)) {\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The last activatable item or `null` if none are activatable.\n * @nocollapse\n */\nexport function getLastActivatableItem<Item extends ListItem>(\n  items: Item[],\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = items.length - 1; i >= 0; i--) {\n    const item = items[i];\n    if (isActivatable(item)) {\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The next activatable item or `null` if none are activatable.\n */\nexport function getNextItem<Item extends ListItem>(\n  items: Item[],\n  index: number,\n  isActivatable = isItemNotDisabled<Item>,\n) {\n  for (let i = 1; i < items.length; i++) {\n    const nextIndex = (i + index) % items.length;\n    const item = items[nextIndex];\n    if (isActivatable(item)) {\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 * @param isActivatable Function to determine if an item can be  activated.\n *     Defaults to non-disabled items.\n * @return The previous activatable item or `null` if none are activatable.\n */\nexport function getPrevItem<Item extends ListItem>(\n  items: Item[],\n  index: number,\n  isActivatable = isItemNotDisabled<Item>,\n) {\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 (isActivatable(item)) {\n      return item;\n    }\n  }\n\n  return items[index] ? items[index] : null;\n}\n\n/**\n * Activates the next item and focuses it. If nothing is currently activated,\n * activates the first item.\n */\nexport function activateNextItem<Item extends ListItem>(\n  items: Item[],\n  activeItemRecord: null | ItemRecord<Item>,\n  isActivatable = isItemNotDisabled<Item>,\n): Item | null {\n  if (activeItemRecord) {\n    const next = getNextItem(items, activeItemRecord.index, isActivatable);\n\n    if (next) {\n      next.tabIndex = 0;\n      next.focus();\n    }\n\n    return next;\n  } else {\n    return activateFirstItem(items, isActivatable);\n  }\n}\n\n/**\n * Activates the previous item and focuses it. If nothing is currently\n * activated, activates the last item.\n */\nexport function activatePreviousItem<Item extends ListItem>(\n  items: Item[],\n  activeItemRecord: null | ItemRecord<Item>,\n  isActivatable = isItemNotDisabled<Item>,\n): Item | null {\n  if (activeItemRecord) {\n    const prev = getPrevItem(items, activeItemRecord.index, isActivatable);\n    if (prev) {\n      prev.tabIndex = 0;\n      prev.focus();\n    }\n    return prev;\n  } else {\n    return activateLastItem(items, isActivatable);\n  }\n}\n\n/**\n * Creates an event that requests the parent md-list to deactivate all other\n * items.\n */\nexport function createDeactivateItemsEvent() {\n  return new Event('deactivate-items', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the parent md-list to deactivate all\n * other items.\n */\nexport type DeactivateItemsEvent = ReturnType<\n  typeof createDeactivateItemsEvent\n>;\n\n/**\n * Creates an event that requests the menu to set `tabindex=0` on the item and\n * focus it. We use this pattern because List keeps track of what element is\n * active in the List by maintaining tabindex. We do not want list items\n * to set tabindex on themselves or focus themselves so that we can organize all\n * that logic in the parent List and Menus, and list item stays as dumb as\n * possible.\n */\nexport function createRequestActivationEvent() {\n  return new Event('request-activation', {bubbles: true, composed: true});\n}\n\n/**\n * The type of the event that requests the list activates and focuses the item.\n */\nexport type RequestActivationEvent = ReturnType<\n  typeof createRequestActivationEvent\n>;\n\n/**\n * The default `isActivatable` function, which checks if an item is not\n * disabled.\n *\n * @param item The item to check.\n * @return true if `item.disabled` is `false.\n */\nfunction isItemNotDisabled<Item extends ListItem>(item: Item) {\n  return !item.disabled;\n}\n"]}

package/list/internal/list.d.ts

@@ -17,9 +17,9 @@ export declare class List extends LitElement {
      * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct
      * children / directly slotted elements.
      */
-    protected slotItems: Array<ListItem | HTMLElement & {
+    protected slotItems: Array<ListItem | (HTMLElement & {
         item?: ListItem;
-    }>;
+    })>;
     /** @export */
     get items(): ListItem[];
     private readonly listController;

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"]}