@material/web 1.0.0-pre.8 → 1.0.0

package/list/internal/list-controller.js

@@ -0,0 +1,176 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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.
+ */
+// tslint:disable:enforce-name-casing Following Enum style
+export const NavigableKeys = {
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowUp: 'ArrowUp',
+    ArrowRight: 'ArrowRight',
+    Home: 'Home',
+    End: 'End',
+};
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+export class ListController {
+    constructor(config) {
+        /**
+         * Handles keyboard navigation. Should be bound to the node that will act as
+         * the List.
+         */
+        this.handleKeydown = (event) => {
+            const key = event.key;
+            if (event.defaultPrevented || !this.isNavigableKey(key)) {
+                return;
+            }
+            // do not use this.items directly in upcoming calculations so we don't
+            // re-query the DOM unnecessarily
+            const items = this.items;
+            if (!items.length) {
+                return;
+            }
+            const activeItemRecord = getActiveItem(items, this.isActivatable);
+            if (activeItemRecord) {
+                activeItemRecord.item.tabIndex = -1;
+            }
+            event.preventDefault();
+            const isRtl = this.isRtl();
+            const inlinePrevious = isRtl ? NavigableKeys.ArrowRight : NavigableKeys.ArrowLeft;
+            const inlineNext = isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
+            switch (key) {
+                // Activate the next item
+                case NavigableKeys.ArrowDown:
+                case inlineNext:
+                    activateNextItem(items, activeItemRecord, this.isActivatable);
+                    break;
+                // Activate the previous item
+                case NavigableKeys.ArrowUp:
+                case inlinePrevious:
+                    activatePreviousItem(items, activeItemRecord, this.isActivatable);
+                    break;
+                // Activate the first item
+                case NavigableKeys.Home:
+                    activateFirstItem(items, this.isActivatable);
+                    break;
+                // Activate the last item
+                case NavigableKeys.End:
+                    activateLastItem(items, this.isActivatable);
+                    break;
+                default:
+                    break;
+            }
+        };
+        /**
+         * Listener to be bound to the `deactivate-items` item event.
+         */
+        this.onDeactivateItems = () => {
+            const items = this.items;
+            for (const item of items) {
+                this.deactivateItem(item);
+            }
+        };
+        /**
+         * Listener to be bound to the `request-activation` item event..
+         */
+        this.onRequestActivation = (event) => {
+            this.onDeactivateItems();
+            const target = event.target;
+            this.activateItem(target);
+            target.focus();
+        };
+        /**
+         * Listener to be bound to the `slotchange` event for the slot that renders
+         * the items.
+         */
+        this.onSlotchange = () => {
+            const items = this.items;
+            // Whether we have encountered an item that has been activated
+            let encounteredActivated = false;
+            for (const item of items) {
+                const isActivated = !item.disabled && item.tabIndex > -1;
+                if (isActivated && !encounteredActivated) {
+                    encounteredActivated = true;
+                    item.tabIndex = 0;
+                    continue;
+                }
+                // Deactivate the rest including disabled
+                item.tabIndex = -1;
+            }
+            if (encounteredActivated) {
+                return;
+            }
+            const firstActivatableItem = getFirstActivatableItem(items, this.isActivatable);
+            if (!firstActivatableItem) {
+                return;
+            }
+            firstActivatableItem.tabIndex = 0;
+        };
+        const { isItem, getPossibleItems, isRtl, deactivateItem, activateItem, isNavigableKey, isActivatable, } = config;
+        this.isItem = isItem;
+        this.getPossibleItems = getPossibleItems;
+        this.isRtl = isRtl;
+        this.deactivateItem = deactivateItem;
+        this.activateItem = activateItem;
+        this.isNavigableKey = isNavigableKey;
+        this.isActivatable = isActivatable;
+    }
+    /**
+     * The items being managed by the list. Additionally, attempts to see if the
+     * object has a sub-item in the `.item` property.
+     */
+    get items() {
+        const maybeItems = this.getPossibleItems();
+        const items = [];
+        for (const itemOrParent of maybeItems) {
+            const isItem = this.isItem(itemOrParent);
+            // if the item is a list item, add it to the list of items
+            if (isItem) {
+                items.push(itemOrParent);
+                continue;
+            }
+            // If the item exposes an `item` property check if it is a list item.
+            const subItem = itemOrParent.item;
+            if (subItem && this.isItem(subItem)) {
+                items.push(subItem);
+            }
+        }
+        return items;
+    }
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem() {
+        const items = this.items;
+        const activeItemRecord = getActiveItem(items, this.isActivatable);
+        if (activeItemRecord) {
+            activeItemRecord.item.tabIndex = -1;
+        }
+        return activateNextItem(items, activeItemRecord, this.isActivatable);
+    }
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem() {
+        const items = this.items;
+        const activeItemRecord = getActiveItem(items, this.isActivatable);
+        if (activeItemRecord) {
+            activeItemRecord.item.tabIndex = -1;
+        }
+        return activatePreviousItem(items, activeItemRecord, this.isActivatable);
+    }
+}
+//# sourceMappingURL=list-controller.js.map

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

@@ -0,0 +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"]}

package/list/internal/list-navigation-helpers.d.ts

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export interface ListItem extends HTMLElement {
+    disabled: boolean;
+}
+/**
+ * A record that describes a list item in a list with metadata such a reference
+ * to the item and its index in the list.
+ */
+export interface ItemRecord<Item extends ListItem> {
+    item: Item;
+    index: number;
+}
+/**
+ * Activates the first non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     first item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ */
+export declare function activateFirstItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Activates the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     last item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
+ */
+export declare function activateLastItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Deactivates the currently active item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to deactivate the
+ *     active item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the deleselcted activated item including the item and
+ *     the index of the item or `null` if none are deactivated.
+ * @nocollapse
+ */
+export declare function deactivateActiveItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): ItemRecord<Item>;
+/**
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
+ */
+export declare function getActiveItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): ItemRecord<Item>;
+/**
+ * Retrieves the first non-disabled item of a given array of items. This
+ * the first item that is not disabled.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export declare function getFirstActivatableItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Retrieves the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export declare function getLastActivatableItem<Item extends ListItem>(items: Item[], isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Retrieves the next non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The next activatable item or `null` if none are activatable.
+ */
+export declare function getNextItem<Item extends ListItem>(items: Item[], index: number, isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Retrieves the previous non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The previous activatable item or `null` if none are activatable.
+ */
+export declare function getPrevItem<Item extends ListItem>(items: Item[], index: number, isActivatable?: (item: Item) => boolean): Item;
+/**
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
+ */
+export declare function activateNextItem<Item extends ListItem>(items: Item[], activeItemRecord: null | ItemRecord<Item>, isActivatable?: (item: Item) => boolean): Item | null;
+/**
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
+ */
+export declare function activatePreviousItem<Item extends ListItem>(items: Item[], activeItemRecord: null | ItemRecord<Item>, isActivatable?: (item: Item) => boolean): Item | null;
+/**
+ * Creates an event that requests the parent md-list to deactivate all other
+ * items.
+ */
+export declare function createDeactivateItemsEvent(): Event;
+/**
+ * The type of the event that requests the parent md-list to deactivate all
+ * other items.
+ */
+export type DeactivateItemsEvent = ReturnType<typeof createDeactivateItemsEvent>;
+/**
+ * Creates an event that requests the menu to set `tabindex=0` on the item and
+ * focus it. We use this pattern because List keeps track of what element is
+ * active in the List by maintaining tabindex. We do not want list items
+ * to set tabindex on themselves or focus themselves so that we can organize all
+ * that logic in the parent List and Menus, and list item stays as dumb as
+ * possible.
+ */
+export declare function createRequestActivationEvent(): Event;
+/**
+ * The type of the event that requests the list activates and focuses the item.
+ */
+export type RequestActivationEvent = ReturnType<typeof createRequestActivationEvent>;

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

@@ -0,0 +1,218 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Activates the first non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     first item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ */
+export function activateFirstItem(items, isActivatable = (isItemNotDisabled)) {
+    // NOTE: These selector functions are static and not on the instance such
+    // that multiple operations can be chained and we do not have to re-query
+    // the DOM
+    const firstItem = getFirstActivatableItem(items, isActivatable);
+    if (firstItem) {
+        firstItem.tabIndex = 0;
+        firstItem.focus();
+    }
+    return firstItem;
+}
+/**
+ * Activates the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     last item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
+ */
+export function activateLastItem(items, isActivatable = (isItemNotDisabled)) {
+    const lastItem = getLastActivatableItem(items, isActivatable);
+    if (lastItem) {
+        lastItem.tabIndex = 0;
+        lastItem.focus();
+    }
+    return lastItem;
+}
+/**
+ * Deactivates the currently active item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to deactivate the
+ *     active item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the deleselcted activated item including the item and
+ *     the index of the item or `null` if none are deactivated.
+ * @nocollapse
+ */
+export function deactivateActiveItem(items, isActivatable = (isItemNotDisabled)) {
+    const activeItem = getActiveItem(items, isActivatable);
+    if (activeItem) {
+        activeItem.item.tabIndex = -1;
+    }
+    return activeItem;
+}
+/**
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
+ */
+export function getActiveItem(items, isActivatable = (isItemNotDisabled)) {
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.tabIndex === 0 && isActivatable(item)) {
+            return {
+                item,
+                index: i,
+            };
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the first non-disabled item of a given array of items. This
+ * the first item that is not disabled.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export function getFirstActivatableItem(items, isActivatable = (isItemNotDisabled)) {
+    for (const item of items) {
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+export function getLastActivatableItem(items, isActivatable = (isItemNotDisabled)) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const item = items[i];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return null;
+}
+/**
+ * Retrieves the next non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The next activatable item or `null` if none are activatable.
+ */
+export function getNextItem(items, index, isActivatable = (isItemNotDisabled)) {
+    for (let i = 1; i < items.length; i++) {
+        const nextIndex = (i + index) % items.length;
+        const item = items[nextIndex];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return items[index] ? items[index] : null;
+}
+/**
+ * Retrieves the previous non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The previous activatable item or `null` if none are activatable.
+ */
+export function getPrevItem(items, index, isActivatable = (isItemNotDisabled)) {
+    for (let i = 1; i < items.length; i++) {
+        const prevIndex = (index - i + items.length) % items.length;
+        const item = items[prevIndex];
+        if (isActivatable(item)) {
+            return item;
+        }
+    }
+    return items[index] ? items[index] : null;
+}
+/**
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
+ */
+export function activateNextItem(items, activeItemRecord, isActivatable = (isItemNotDisabled)) {
+    if (activeItemRecord) {
+        const next = getNextItem(items, activeItemRecord.index, isActivatable);
+        if (next) {
+            next.tabIndex = 0;
+            next.focus();
+        }
+        return next;
+    }
+    else {
+        return activateFirstItem(items, isActivatable);
+    }
+}
+/**
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
+ */
+export function activatePreviousItem(items, activeItemRecord, isActivatable = (isItemNotDisabled)) {
+    if (activeItemRecord) {
+        const prev = getPrevItem(items, activeItemRecord.index, isActivatable);
+        if (prev) {
+            prev.tabIndex = 0;
+            prev.focus();
+        }
+        return prev;
+    }
+    else {
+        return activateLastItem(items, isActivatable);
+    }
+}
+/**
+ * Creates an event that requests the parent md-list to deactivate all other
+ * items.
+ */
+export function createDeactivateItemsEvent() {
+    return new Event('deactivate-items', { bubbles: true, composed: true });
+}
+/**
+ * Creates an event that requests the menu to set `tabindex=0` on the item and
+ * focus it. We use this pattern because List keeps track of what element is
+ * active in the List by maintaining tabindex. We do not want list items
+ * to set tabindex on themselves or focus themselves so that we can organize all
+ * that logic in the parent List and Menus, and list item stays as dumb as
+ * possible.
+ */
+export function createRequestActivationEvent() {
+    return new Event('request-activation', { bubbles: true, composed: true });
+}
+/**
+ * The default `isActivatable` function, which checks if an item is not
+ * disabled.
+ *
+ * @param item The item to check.
+ * @return true if `item.disabled` is `false.
+ */
+function isItemNotDisabled(item) {
+    return !item.disabled;
+}
+//# sourceMappingURL=list-navigation-helpers.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
+`;
+//# sourceMappingURL=list-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.css.js","sourceRoot":"","sources":["list-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */\n`;\n "]}

package/list/internal/list.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { ListItem as SharedListItem } from './list-navigation-helpers.js';
+interface ListItem extends SharedListItem {
+    type: 'text' | 'button' | 'link';
+}
+export declare class List extends LitElement {
+    /**
+     * An array of activatable and disableable list items. Queries every assigned
+     * element that has the `md-list-item` attribute.
+     *
+     * _NOTE:_ This is a shallow, flattened query via
+     * `HTMLSlotElement.queryAssignedElements` and thus will _only_ include direct
+     * children / directly slotted elements.
+     */
+    protected slotItems: Array<ListItem | HTMLElement & {
+        item?: ListItem;
+    }>;
+    /** @export */
+    get items(): ListItem[];
+    private readonly listController;
+    private readonly internals;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem(): ListItem | null;
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem(): ListItem | null;
+}
+export {};