@material/web 2.4.2-nightly.a589695.0 → 2.4.2-nightly.b4af72e.0

package/labs/gb/components/list/md-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-list.js","sourceRoot":"","sources":["md-list.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,UAAU,MAAM,YAAY,CAAC,OAAM,IAAI,EAAE,KAAK,EAAC,CAAC,CAAC,cAAc;AACtE,4EAA4E;AAE5E,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAS/B,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;;;;GAOG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,SAAS;IAajC;QACE,KAAK,EAAE,CAAC;QAIV;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAN3C,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,CAAC;IAOkB,MAAM;QACvB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,IAAI,CAAC;;WAEzC,CAAC;IACV,CAAC;;AA1Be,WAAM,GAAwB;IAC5C,UAAU;IACV,GAAG,CAAA;;;;;;;KAOF;CACF,AAVqB,CAUpB;AAUyB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAmB;AArBlC,IAAI;IADhB,aAAa,CAAC,YAAY,CAAC;GACf,IAAI,CA4BhB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport listStyles from './list.css' with {type: 'css'}; // github-only\n// import {styles as listStyles} from './list.cssresult.js'; // google3-only\n\nimport {list} from './list.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design list component. */\n    'md-gb-list': List;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design list component.\n *\n * @slot - Used to display list items.\n * @csspart list - The list's root element.\n * @cssprop --container-shape\n * @cssprop --gap\n */\n@customElement('md-gb-list')\nexport class List extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    listStyles,\n    css`\n      :host {\n        display: flex;\n      }\n      .list {\n        flex: 1;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this[internals].role = 'list';\n  }\n\n  /**\n   * Whether to render the list with segmented items.\n   */\n  @property({type: Boolean}) segmented = false;\n\n  protected override render() {\n    return html`<div part=\"list\" class=\"${list(this)}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/labs/gb/components/menu/_menu-tokens.scss

@@ -0,0 +1,132 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin root {
+  // LINT.IfChange
+  --container-color: var(--md-sys-color-surface-container-low);
+  --container-elevation: var(--md-sys-elevation-shadow-2);
+  --container-shape: var(--md-sys-shape-corner-lg);
+  --gap: 2px;
+  --group-padding: 2px;
+  --group-shape: var(--md-sys-shape-corner-sm);
+  --section-label-text-color: var(--md-sys-color-on-surface-variant);
+  // LINT.ThenChange(md-menu.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin inactive {
+  --container-shape: var(--md-sys-shape-corner-sm);
+}
+
+@mixin active {
+  --container-shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin vibrant {
+  --container-color: var(--md-sys-color-tertiary-container);
+}
+
+@mixin item {
+  // LINT.IfChange
+  --between-space: 12px;
+  --bottom-space: 8px;
+  --container-color: transparent;
+  --height: 44px;
+  --inner-corner-corner-size: none;
+  --label-text-color: var(--md-sys-color-on-surface);
+  --label-text: var(--md-sys-typescale-label-lg);
+  --label-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  --leading-icon-color: var(--md-sys-color-on-surface-variant);
+  --leading-icon-size: 20px;
+  --leading-space: 16px;
+  --shape: var(--md-sys-shape-corner-xs);
+  --supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --supporting-text: var(--md-sys-typescale-body-sm);
+  --supporting-text-tracking: var(--md-sys-typescale-body-sm-tracking);
+  --top-space: 8px;
+  --trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  --trailing-icon-size: 20px;
+  --trailing-space: 16px;
+  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --trailing-supporting-text: var(--md-sys-typescale-label-lg);
+  --trailing-supporting-text-tracking: var(--md-sys-typescale-label-lg-tracking);
+  // LINT.ThenChange(md-menu-item.ts) keep in sync with `@cssprop` jsdoc tags
+}
+
+@mixin item-first-child {
+  --inner-corner-corner-size: var(--md-sys-shape-corner-xs);
+  --shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin item-last-child {
+  --inner-corner-corner-size: var(--md-sys-shape-corner-xs);
+  --shape: var(--md-sys-shape-corner-md);
+}
+
+@mixin item-vibrant {
+  --label-text-color: var(--md-sys-color-on-tertiary-container);
+  --leading-icon-color: var(--md-sys-color-on-tertiary-container);
+  --supporting-text-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+}
+
+@mixin item-vibrant-hovered {
+  --leading-icon-color: var(--md-sys-color-tertiary);
+  --trailing-icon-color: var(--md-sys-color-tertiary);
+}
+
+@mixin item-vibrant-focused {
+  --leading-icon-color: var(--md-sys-color-tertiary);
+  --trailing-icon-color: var(--md-sys-color-tertiary);
+}
+
+@mixin item-vibrant-pressed {
+  --leading-icon-color: var(--md-sys-color-tertiary);
+  --trailing-icon-color: var(--md-sys-color-tertiary);
+}
+
+@mixin item-selected {
+  --container-color: var(--md-sys-color-tertiary-container);
+  --label-text-color: var(--md-sys-color-on-tertiary-container);
+  --leading-icon-color: var(--md-sys-color-on-tertiary-container);
+  --shape: var(--md-sys-shape-corner-md);
+  --supporting-text-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-icon-color: var(--md-sys-color-on-tertiary-container);
+  --trailing-supporting-text-color: var(--md-sys-color-on-tertiary-container);
+}
+
+@mixin item-selected-vibrant {
+  --container-color: var(--md-sys-color-tertiary);
+  --label-text-color: var(--md-sys-color-on-tertiary);
+  --leading-icon-color: var(--md-sys-color-on-tertiary);
+  --supporting-text-color: var(--md-sys-color-on-tertiary);
+  --trailing-icon-color: var(--md-sys-color-on-tertiary);
+  --trailing-supporting-text-color: var(--md-sys-color-on-tertiary);
+}
+
+@mixin item-disabled {
+  --label-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --leading-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+  --trailing-supporting-text-color: hsl(from var(--md-sys-color-on-surface) h s l / 38%);
+}
+
+@mixin item-disabled-vibrant {
+  --label-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --leading-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --trailing-supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+}
+
+@mixin item-disabled-selected {
+  --container-color: hsl(from var(--md-sys-color-tertiary-container) h s l / 38%);
+  --label-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --leading-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --trailing-icon-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+  --trailing-supporting-text-color: hsl(from var(--md-sys-color-on-tertiary-container) h s l / 38%);
+}

package/labs/gb/components/menu/md-menu-group.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type MenuItemCheckable } from './menu.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-gb-menu-group': MenuGroup;
+    }
+}
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * A Material Design menu group component.
+ *
+ * @slot - Used to display the menu group's items.
+ */
+export declare class MenuGroup extends baseClass {
+    static styles: CSSResultOrNative[];
+    checkable: MenuItemCheckable | null;
+    get menu(): HTMLElement | null;
+    get items(): HTMLElement[];
+    private readonly menuContext;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/gb/components/menu/md-menu-group.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { consume, provide } from '@lit/context';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { menuContext, menuItemCheckable, } from './menu.js';
+// Separate variable needed for closure.
+const baseClass = mixinElementInternals(LitElement);
+/**
+ * A Material Design menu group component.
+ *
+ * @slot - Used to display the menu group's items.
+ */
+let MenuGroup = class MenuGroup extends baseClass {
+    // TODO: add optional section label
+    get menu() {
+        return this.menuContext?.menu || null;
+    }
+    get items() {
+        return (this.menuContext?.getItems?.() || []).filter((item) => this.compareDocumentPosition(item) &
+            Node.DOCUMENT_POSITION_CONTAINED_BY);
+    }
+    constructor() {
+        super();
+        this.checkable = null;
+        this.menuContext = null;
+        this[internals].role = 'none';
+        // TODO: single-select items should not be allowed to uncheck themselves.
+        // A single change event should be emitted from the group instead.
+        this.addEventListener('change', (event) => {
+            if (this.checkable === 'single') {
+                const composedPath = event.composedPath();
+                const items = this.items;
+                for (const item of items) {
+                    if (!composedPath.includes(item) && item.checked) {
+                        item.checked = false;
+                    }
+                }
+            }
+        });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+MenuGroup.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+    `,
+];
+__decorate([
+    provide({ context: menuItemCheckable }),
+    property({ reflect: true })
+], MenuGroup.prototype, "checkable", void 0);
+__decorate([
+    consume({ context: menuContext, subscribe: true })
+], MenuGroup.prototype, "menuContext", void 0);
+MenuGroup = __decorate([
+    customElement('md-gb-menu-group')
+], MenuGroup);
+export { MenuGroup };
+//# sourceMappingURL=md-menu-group.js.map

package/labs/gb/components/menu/md-menu-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-menu-group.js","sourceRoot":"","sources":["md-menu-group.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,OAAO,EAAE,OAAO,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,GAAG,EAAqB,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EACL,WAAW,EACX,iBAAiB,GAGlB,MAAM,WAAW,CAAC;AAQnB,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;GAIG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAatC,mCAAmC;IAEnC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAClD,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAClC,IAAI,CAAC,8BAA8B,CACtC,CAAC;IACJ,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QApBV,cAAS,GAA6B,IAAI,CAAC;QAiB1B,gBAAW,GAAuB,IAAI,CAAC;QAItD,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAC9B,yEAAyE;QACzE,kEAAkE;QAClE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;gBAChC,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiD,CAAC;gBACrE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wBACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;oBACvB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjDe,gBAAM,GAAwB;IAC5C,GAAG,CAAA;;;;KAIF;CACF,AANqB,CAMpB;AAIF;IAFC,OAAO,CAAC,EAAC,OAAO,EAAE,iBAAiB,EAAC,CAAC;IACrC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;4CACiB;AAiB1B;IADhB,OAAO,CAAC,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;8CACO;AA5B7C,SAAS;IADrB,aAAa,CAAC,kBAAkB,CAAC;GACrB,SAAS,CAmDrB","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume, provide} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\n\nimport {\n  menuContext,\n  menuItemCheckable,\n  type MenuContext,\n  type MenuItemCheckable,\n} from './menu.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-gb-menu-group': MenuGroup;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * A Material Design menu group component.\n *\n * @slot - Used to display the menu group's items.\n */\n@customElement('md-gb-menu-group')\nexport class MenuGroup extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ];\n\n  @provide({context: menuItemCheckable})\n  @property({reflect: true})\n  checkable: MenuItemCheckable | null = null;\n\n  // TODO: add optional section label\n\n  get menu(): HTMLElement | null {\n    return this.menuContext?.menu || null;\n  }\n\n  get items(): HTMLElement[] {\n    return (this.menuContext?.getItems?.() || []).filter(\n      (item) =>\n        this.compareDocumentPosition(item) &\n        Node.DOCUMENT_POSITION_CONTAINED_BY,\n    );\n  }\n\n  @consume({context: menuContext, subscribe: true})\n  private readonly menuContext: MenuContext | null = null;\n\n  constructor() {\n    super();\n    this[internals].role = 'none';\n    // TODO: single-select items should not be allowed to uncheck themselves.\n    // A single change event should be emitted from the group instead.\n    this.addEventListener('change', (event: Event) => {\n      if (this.checkable === 'single') {\n        const composedPath = event.composedPath();\n        const items = this.items as Array<HTMLElement & {checked?: boolean}>;\n        for (const item of items) {\n          if (!composedPath.includes(item) && item.checked) {\n            item.checked = false;\n          }\n        }\n      }\n    });\n  }\n\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/labs/gb/components/menu/md-menu-item.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-gb-menu-item': MenuItem;
+    }
+}
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/focusable.js").Focusable>, import("../../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * A Material Design menu item component.
+ *
+ * @slot - Used to display the item's primary label.
+ * @slot leading - Used to display icons and content before the item's main content.
+ * @slot supporting-text - Used to display supporting text below the main label.
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
+ * @slot trailing - Used to display icons and content after the item's main content.
+ * @fires {Event} change - Fired when a checkbox or menu item is checked or unchecked. --bubbles
+ * @fires {InputEvent} input - Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed
+ * @csspart menu-item - The menu item's root element.
+ * @cssprop --between-space
+ * @cssprop --bottom-space
+ * @cssprop --container-color
+ * @cssprop --height
+ * @cssprop --inner-corner-corner-size
+ * @cssprop --label-text-color
+ * @cssprop --label-text
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-size
+ * @cssprop --leading-space
+ * @cssprop --shape
+ * @cssprop --supporting-text-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-tracking
+ * @cssprop --top-space
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-size
+ * @cssprop --trailing-space
+ * @cssprop --trailing-supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-tracking
+ */
+export declare class MenuItem extends baseClass {
+    static styles: CSSResultOrNative[];
+    checked: boolean;
+    disabled: boolean;
+    get menu(): HTMLElement | null;
+    private readonly menuContext?;
+    private readonly checkable?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    protected updated(): void;
+}
+export {};

package/labs/gb/components/menu/md-menu-item.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { consume } from '@lit/context';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../../internal/events/dispatch-hooks.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { isFocusable, mixinFocusable } from '../../../behaviors/focusable.js';
+import { hasSlotted } from '../shared/has-slotted.js';
+import focusRingStyles from '../focus/focus-ring.css' with { type: 'css' }; // github-only
+// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only
+import rippleStyles from '../ripple/ripple.css' with { type: 'css' }; // github-only
+// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only
+import menuStyles from './menu.css' with { type: 'css' }; // github-only
+// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only
+import { menuContext, menuItem, menuItemCheckable, } from './menu.js';
+// Separate variable needed for closure.
+const baseClass = mixinElementInternals(mixinFocusable(LitElement));
+/**
+ * A Material Design menu item component.
+ *
+ * @slot - Used to display the item's primary label.
+ * @slot leading - Used to display icons and content before the item's main content.
+ * @slot supporting-text - Used to display supporting text below the main label.
+ * @slot trailing-text - Used to display metadata or text after the item's main content.
+ * @slot trailing - Used to display icons and content after the item's main content.
+ * @fires {Event} change - Fired when a checkbox or menu item is checked or unchecked. --bubbles
+ * @fires {InputEvent} input - Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed
+ * @csspart menu-item - The menu item's root element.
+ * @cssprop --between-space
+ * @cssprop --bottom-space
+ * @cssprop --container-color
+ * @cssprop --height
+ * @cssprop --inner-corner-corner-size
+ * @cssprop --label-text-color
+ * @cssprop --label-text
+ * @cssprop --label-text-tracking
+ * @cssprop --leading-icon-color
+ * @cssprop --leading-icon-size
+ * @cssprop --leading-space
+ * @cssprop --shape
+ * @cssprop --supporting-text-color
+ * @cssprop --supporting-text
+ * @cssprop --supporting-text-tracking
+ * @cssprop --top-space
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-size
+ * @cssprop --trailing-space
+ * @cssprop --trailing-supporting-text-color
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-tracking
+ */
+let MenuItem = class MenuItem extends baseClass {
+    get menu() {
+        return this.menuContext?.menu || null;
+    }
+    constructor() {
+        super();
+        this.checked = false;
+        this.disabled = false;
+        this[internals].role = 'menuitem';
+        setupDispatchHooks(this, 'click');
+        this.addEventListener('click', (e) => {
+            if (this.disabled) {
+                e.stopImmediatePropagation();
+                return;
+            }
+            const wasChecked = this.checked;
+            afterDispatch(e, () => {
+                if (e.defaultPrevented)
+                    return;
+                if (this.checkable) {
+                    // TODO: radio menu items should not be allowed to uncheck themselves.
+                    this.checked = !wasChecked;
+                    this.dispatchEvent(new Event('change', { bubbles: true }));
+                    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+                }
+                if (this.checkable !== 'multiple') {
+                    this.menu?.hidePopover();
+                }
+            });
+        });
+        this.addEventListener('keydown', (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.click();
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.menuContext?.itemConnected(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.menuContext?.itemDisconnected(this);
+    }
+    render() {
+        return html `<div
+      part="menu-item"
+      class="${menuItem({
+            checked: this.checked,
+            disabled: this.disabled,
+        })} ripple-host focus-ring-host">
+      ${this.renderContent()}
+    </div>`;
+    }
+    renderContent() {
+        return html `
+      <span class="menu-item-leading">
+        <slot name="leading" ${hasSlotted()}>
+          ${this.checked ? html `<span class="checkmark">check</span>` : nothing}
+        </slot>
+      </span>
+      <span class="menu-item-content">
+        <slot></slot>
+        <slot name="supporting-text" class="menu-item-supporting-text"></slot>
+      </span>
+      <span class="menu-item-trailing">
+        <slot
+          name="trailing-text"
+          class="menu-item-trailing-text"
+          ${hasSlotted()}></slot>
+        <slot name="trailing" ${hasSlotted()}></slot>
+      </span>
+    `;
+    }
+    updated() {
+        if (this.checkable === 'single') {
+            this[internals].role = 'menuitemradio';
+        }
+        else if (this.checkable === 'multiple') {
+            this[internals].role = 'menuitemcheckbox';
+        }
+        else {
+            this[internals].role = 'menuitem';
+        }
+        if (this.checkable) {
+            this[internals].ariaChecked = String(this.checked);
+        }
+        else {
+            this[internals].ariaChecked = null;
+        }
+        this[internals].ariaDisabled = String(this.disabled);
+        this[isFocusable] = !this.disabled;
+    }
+};
+MenuItem.styles = [
+    focusRingStyles,
+    rippleStyles,
+    menuStyles,
+    css `
+      :host {
+        display: flex;
+        outline: none;
+      }
+      .menu-item {
+        flex: 1;
+      }
+      :is(.menu-item-leading, .menu-item-trailing):not(
+        :has(.has-slotted, .checkmark)
+      ) {
+        display: none;
+      }
+      slot:not(.has-slotted) {
+        display: contents;
+      }
+      .checkmark {
+        display: flex;
+        font: var(--md-icon-size) var(--md-icon-font);
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "disabled", void 0);
+__decorate([
+    consume({ context: menuContext, subscribe: true })
+], MenuItem.prototype, "menuContext", void 0);
+__decorate([
+    state(),
+    consume({ context: menuItemCheckable, subscribe: true })
+], MenuItem.prototype, "checkable", void 0);
+MenuItem = __decorate([
+    customElement('md-gb-menu-item')
+], MenuItem);
+export { MenuItem };
+//# sourceMappingURL=md-menu-item.js.map

package/labs/gb/components/menu/md-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-menu-item.js","sourceRoot":"","sources":["md-menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {consume} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../../internal/events/dispatch-hooks.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {isFocusable, mixinFocusable} from '../../../behaviors/focusable.js';\nimport {hasSlotted} from '../shared/has-slotted.js';\n\nimport focusRingStyles from '../focus/focus-ring.css' with {type: 'css'}; // github-only\n// import focusRingStyles from '../focus/focus-ring.cssresult.js'; // google3-only\nimport rippleStyles from '../ripple/ripple.css' with {type: 'css'}; // github-only\n// import rippleStyles from '../ripple/ripple.cssresult.js'; // google3-only\nimport menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {\n  menuContext,\n  type MenuContext,\n  menuItem,\n  menuItemCheckable,\n  type MenuItemCheckable,\n} from './menu.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-gb-menu-item': MenuItem;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/**\n * A Material Design menu item component.\n *\n * @slot - Used to display the item's primary label.\n * @slot leading - Used to display icons and content before the item's main content.\n * @slot supporting-text - Used to display supporting text below the main label.\n * @slot trailing-text - Used to display metadata or text after the item's main content.\n * @slot trailing - Used to display icons and content after the item's main content.\n * @fires {Event} change - Fired when a checkbox or menu item is checked or unchecked. --bubbles\n * @fires {InputEvent} input - Fired when a checkbox or menu item is checked or unchecked. --bubbles --composed\n * @csspart menu-item - The menu item's root element.\n * @cssprop --between-space\n * @cssprop --bottom-space\n * @cssprop --container-color\n * @cssprop --height\n * @cssprop --inner-corner-corner-size\n * @cssprop --label-text-color\n * @cssprop --label-text\n * @cssprop --label-text-tracking\n * @cssprop --leading-icon-color\n * @cssprop --leading-icon-size\n * @cssprop --leading-space\n * @cssprop --shape\n * @cssprop --supporting-text-color\n * @cssprop --supporting-text\n * @cssprop --supporting-text-tracking\n * @cssprop --top-space\n * @cssprop --trailing-icon-color\n * @cssprop --trailing-icon-size\n * @cssprop --trailing-space\n * @cssprop --trailing-supporting-text-color\n * @cssprop --trailing-supporting-text\n * @cssprop --trailing-supporting-text-tracking\n */\n@customElement('md-gb-menu-item')\nexport class MenuItem extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    focusRingStyles,\n    rippleStyles,\n    menuStyles,\n    css`\n      :host {\n        display: flex;\n        outline: none;\n      }\n      .menu-item {\n        flex: 1;\n      }\n      :is(.menu-item-leading, .menu-item-trailing):not(\n        :has(.has-slotted, .checkmark)\n      ) {\n        display: none;\n      }\n      slot:not(.has-slotted) {\n        display: contents;\n      }\n      .checkmark {\n        display: flex;\n        font: var(--md-icon-size) var(--md-icon-font);\n      }\n    `,\n  ];\n\n  @property({type: Boolean, reflect: true}) checked = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  get menu(): HTMLElement | null {\n    return this.menuContext?.menu || null;\n  }\n\n  @consume({context: menuContext, subscribe: true})\n  private readonly menuContext?: MenuContext;\n\n  @state()\n  @consume({context: menuItemCheckable, subscribe: true})\n  private readonly checkable?: MenuItemCheckable | null;\n\n  constructor() {\n    super();\n    this[internals].role = 'menuitem';\n    setupDispatchHooks(this, 'click');\n    this.addEventListener('click', (e) => {\n      if (this.disabled) {\n        e.stopImmediatePropagation();\n        return;\n      }\n\n      const wasChecked = this.checked;\n      afterDispatch(e, () => {\n        if (e.defaultPrevented) return;\n        if (this.checkable) {\n          // TODO: radio menu items should not be allowed to uncheck themselves.\n          this.checked = !wasChecked;\n          this.dispatchEvent(new Event('change', {bubbles: true}));\n          this.dispatchEvent(\n            new InputEvent('input', {bubbles: true, composed: true}),\n          );\n        }\n\n        if (this.checkable !== 'multiple') {\n          this.menu?.hidePopover();\n        }\n      });\n    });\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (this.disabled) return;\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.click();\n      }\n    });\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.menuContext?.itemConnected(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.menuContext?.itemDisconnected(this);\n  }\n\n  protected override render() {\n    return html`<div\n      part=\"menu-item\"\n      class=\"${menuItem({\n        checked: this.checked,\n        disabled: this.disabled,\n      })} ripple-host focus-ring-host\">\n      ${this.renderContent()}\n    </div>`;\n  }\n\n  private renderContent() {\n    return html`\n      <span class=\"menu-item-leading\">\n        <slot name=\"leading\" ${hasSlotted()}>\n          ${this.checked ? html`<span class=\"checkmark\">check</span>` : nothing}\n        </slot>\n      </span>\n      <span class=\"menu-item-content\">\n        <slot></slot>\n        <slot name=\"supporting-text\" class=\"menu-item-supporting-text\"></slot>\n      </span>\n      <span class=\"menu-item-trailing\">\n        <slot\n          name=\"trailing-text\"\n          class=\"menu-item-trailing-text\"\n          ${hasSlotted()}></slot>\n        <slot name=\"trailing\" ${hasSlotted()}></slot>\n      </span>\n    `;\n  }\n\n  protected override updated() {\n    if (this.checkable === 'single') {\n      this[internals].role = 'menuitemradio';\n    } else if (this.checkable === 'multiple') {\n      this[internals].role = 'menuitemcheckbox';\n    } else {\n      this[internals].role = 'menuitem';\n    }\n\n    if (this.checkable) {\n      this[internals].ariaChecked = String(this.checked);\n    } else {\n      this[internals].ariaChecked = null;\n    }\n\n    this[internals].ariaDisabled = String(this.disabled);\n    this[isFocusable] = !this.disabled;\n  }\n}\n"]}

package/labs/gb/components/menu/md-menu.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type MenuColor } from './menu.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design menu component. */
+        'md-gb-menu': Menu;
+    }
+}
+declare const baseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../../behaviors/focusable.js").Focusable>, import("../../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * A Material Design menu component.
+ *
+ * @slot - Used to display the menu's items.
+ * @csspart menu - The menu's root element.
+ * @cssprop --container-color
+ * @cssprop --container-elevation
+ * @cssprop --container-shape
+ * @cssprop --gap
+ * @cssprop --group-padding
+ * @cssprop --group-shape
+ * @cssprop --section-label-text-color
+ */
+export declare class Menu extends baseClass {
+    static styles: CSSResultOrNative[];
+    color: MenuColor;
+    get items(): HTMLElement[];
+    private previouslyFocused?;
+    private readonly itemsSet;
+    constructor();
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};