Material Web Team 5092de07e9 refactor(menu,list): clean up list-menu tokens and remove list-item variant components
In this PR:

- Remove unnecessary list-item variants
  - `md-list-item-icon` -> md-icon[data-variant=icon]
  - `md-list-item-video` -> video[data-variant=video]
  - `md-list-item-avatar` -> :is(img,div)[data-variant=avatar]
  - `md-list-item-avatar` -> img[data-variant=avatar]
- also upgrade menu tokens to maximize token sharing in list-item and menu-item
- testing menu and list for unused & undefined tokens
- fixed some small things in list to align with spec more

PiperOrigin-RevId: 513932810
2023-03-06 07:01:56 -08:00

42 lines
1.2 KiB
TypeScript

/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import {customElement} from 'lit/decorators.js';
import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
import {styles} from './lib/menuitem/menu-item-styles.css.js';
import {MenuItemEl} from './lib/menuitem/menu-item.js';
export {ListItem} from '../list/lib/listitem/list-item.js';
export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';
declare global {
interface HTMLElementTagNameMap {
'md-menu-item': MdMenuItem;
}
}
/**
* @summary Menus display a list of choices on a temporary surface.
*
* @description
* Menu items are the selectable choices within the menu. Menu items must
* implement the `MenuItem` interface and also have the `md-menu-item`
* attribute. Additionally menu items are list items so they must also have the
* `md-list-item` attribute.
*
* Menu items can control a menu by selectively firing the `close-menu` and
* `deselect-items` events.
*
* @final
* @suppress {visibility}
*/
@customElement('md-menu-item')
export class MdMenuItem extends MenuItemEl {
static override styles = [listItemStyles, styles];
}