@maicol07/material-web 2.3.0 → 2.5.1

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

@@ -0,0 +1,161 @@
+//
+// 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(menu-element.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-axes: var(--md-sys-typescale-label-lg-axes);
+  --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-axes: var(--md-sys-typescale-body-sm-axes);
+  --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: var(--md-sys-typescale-label-lg);
+  --trailing-supporting-text-axes: var(--md-sys-typescale-label-lg-axes);
+  --trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+  --trailing-supporting-text-tracking: var(
+    --md-sys-typescale-label-lg-tracking
+  );
+  // LINT.ThenChange(menu-item-element.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-gb-menu-group.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuGroupElement } from './menu-group-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-menu-group': MenuGroupElement;
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuGroupElement } from './menu-group-element.js';
+customElements.define('md-gb-menu-group', MenuGroupElement);
+//# sourceMappingURL=md-gb-menu-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-menu-group.js","sourceRoot":"","sources":["md-gb-menu-group.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AASzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuGroupElement} from './menu-group-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-menu-group': MenuGroupElement;\n  }\n}\n\ncustomElements.define('md-gb-menu-group', MenuGroupElement);\n"]}

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItemElement } from './menu-item-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-menu-item': MenuItemElement;
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuItemElement } from './menu-item-element.js';
+customElements.define('md-gb-menu-item', MenuItemElement);
+//# sourceMappingURL=md-gb-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-menu-item.js","sourceRoot":"","sources":["md-gb-menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AASvD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuItemElement} from './menu-item-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-menu-item': MenuItemElement;\n  }\n}\n\ncustomElements.define('md-gb-menu-item', MenuItemElement);\n"]}

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuElement } from './menu-element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        /** A Material Design component. */
+        'md-gb-menu': MenuElement;
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuElement } from './menu-element.js';
+customElements.define('md-gb-menu', MenuElement);
+//# sourceMappingURL=md-gb-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-gb-menu.js","sourceRoot":"","sources":["md-gb-menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAS9C,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {MenuElement} from './menu-element.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design component. */\n    'md-gb-menu': MenuElement;\n  }\n}\n\ncustomElements.define('md-gb-menu', MenuElement);\n"]}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type MenuColor } from './menu.js';
+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 MenuElement extends baseClass {
+    /** @nocollapse */
+    static styles: CSSResultOrNative[];
+    color: MenuColor;
+    get items(): HTMLElement[];
+    private previouslyFocused?;
+    private readonly itemsSet;
+    constructor();
+    connectedCallback(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/labs/gb/components/menu/menu-element.js

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { ContextProvider } from '@lit/context';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { internals, mixinElementInternals, } from '../../../behaviors/element-internals.js';
+import { mixinFocusable } from '../../../behaviors/focusable.js';
+import menuStyles from './menu.css' with { type: 'css' }; // github-only
+// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only
+import { menu, MENU_COLORS, menuContext } from './menu.js';
+// Separate variable needed for closure.
+const baseClass = mixinElementInternals(mixinFocusable(LitElement));
+/**
+ * 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 class MenuElement extends baseClass {
+    get items() {
+        return Array.from(this.itemsSet).sort((a, b) => {
+            return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING
+                ? 1
+                : -1;
+        });
+    }
+    constructor() {
+        super();
+        this.color = MENU_COLORS.standard;
+        this.itemsSet = new Set();
+        this[internals].role = 'menu';
+        this.addController(new ContextProvider(this, {
+            context: menuContext,
+            initialValue: {
+                menu: this,
+                getItems: () => this.items,
+                itemConnected: (item) => {
+                    this.itemsSet.add(item);
+                },
+                itemDisconnected: (item) => {
+                    this.itemsSet.delete(item);
+                },
+            },
+        }));
+        // TODO: move event listeners to setupMenu()
+        // Handle keyboard navigation
+        this.addEventListener('keydown', (event) => {
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                this.hidePopover();
+                return;
+            }
+            const items = this.items.filter((item) => !item.matches(':disabled,[disabled]'));
+            const index = items.findIndex((item) => item.matches(':focus-within'));
+            if (index === -1 && items.length > 0) {
+                // If no item is focused, focus the first one on arrow key
+                if ([
+                    'ArrowDown',
+                    'ArrowRight',
+                    'ArrowUp',
+                    'ArrowLeft',
+                    'Home',
+                    'End',
+                ].includes(event.key)) {
+                    event.preventDefault();
+                    items[0].focus();
+                }
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowDown':
+                case 'ArrowRight':
+                    event.preventDefault();
+                    if (index < items.length - 1) {
+                        items[index + 1].focus();
+                    }
+                    else {
+                        items[0].focus();
+                    }
+                    break;
+                case 'ArrowUp':
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    if (index > 0) {
+                        items[index - 1].focus();
+                    }
+                    else {
+                        items[items.length - 1].focus();
+                    }
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    items[0].focus();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    items[items.length - 1].focus();
+                    break;
+                default:
+                    break;
+            }
+        });
+        // Handle focus on open
+        this.addEventListener('toggle', (event) => {
+            if (event.newState === 'open') {
+                this.previouslyFocused = event.source;
+                // Focus the first non-disabled item
+                setTimeout(() => {
+                    this.items
+                        .find((item) => !item.matches(':disabled,.disabled,[disabled]'))
+                        ?.focus();
+                });
+            }
+            else {
+                this.previouslyFocused?.focus();
+                this.previouslyFocused = undefined;
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set popover behavior in connectedCallback since constructor may not
+        // sprout attributes.
+        this.popover = 'auto';
+    }
+    render() {
+        return html `<div part="menu" class="${menu({ color: this.color })} menu-host">
+      <slot></slot>
+    </div>`;
+    }
+}
+/** @nocollapse */
+MenuElement.styles = [menuStyles, css ``];
+__decorate([
+    property()
+], MenuElement.prototype, "color", void 0);
+//# sourceMappingURL=menu-element.js.map

package/labs/gb/components/menu/menu-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-element.js","sourceRoot":"","sources":["menu-element.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 {ContextProvider} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../../behaviors/focusable.js';\n\nimport menuStyles from './menu.css' with {type: 'css'}; // github-only\n// import {styles as menuStyles} from './menu.cssresult.js'; // google3-only\n\nimport {menu, MENU_COLORS, menuContext, type MenuColor} from './menu.js';\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/**\n * A Material Design menu component.\n *\n * @slot - Used to display the menu's items.\n * @csspart menu - The menu's root element.\n * @cssprop --container-color\n * @cssprop --container-elevation\n * @cssprop --container-shape\n * @cssprop --gap\n * @cssprop --group-padding\n * @cssprop --group-shape\n * @cssprop --section-label-text-color\n */\nexport class MenuElement extends baseClass {\n  /** @nocollapse */\n  static override styles: CSSResultOrNative[] = [menuStyles, css``];\n\n  @property() color: MenuColor = MENU_COLORS.standard;\n\n  get items(): HTMLElement[] {\n    return Array.from(this.itemsSet).sort((a, b) => {\n      return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING\n        ? 1\n        : -1;\n    });\n  }\n\n  private previouslyFocused?: HTMLElement;\n  private readonly itemsSet = new Set<HTMLElement>();\n\n  constructor() {\n    super();\n    this[internals].role = 'menu';\n    this.addController(\n      new ContextProvider(this, {\n        context: menuContext,\n        initialValue: {\n          menu: this,\n          getItems: () => this.items,\n          itemConnected: (item: HTMLElement) => {\n            this.itemsSet.add(item);\n          },\n          itemDisconnected: (item: HTMLElement) => {\n            this.itemsSet.delete(item);\n          },\n        },\n      }),\n    );\n\n    // TODO: move event listeners to setupMenu()\n    // Handle keyboard navigation\n    this.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Tab') {\n        event.preventDefault();\n        this.hidePopover();\n        return;\n      }\n\n      const items = this.items.filter(\n        (item) => !item.matches(':disabled,[disabled]'),\n      );\n      const index = items.findIndex((item) => item.matches(':focus-within'));\n      if (index === -1 && items.length > 0) {\n        // If no item is focused, focus the first one on arrow key\n        if (\n          [\n            'ArrowDown',\n            'ArrowRight',\n            'ArrowUp',\n            'ArrowLeft',\n            'Home',\n            'End',\n          ].includes(event.key)\n        ) {\n          event.preventDefault();\n          items[0].focus();\n        }\n        return;\n      }\n\n      switch (event.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          event.preventDefault();\n          if (index < items.length - 1) {\n            items[index + 1].focus();\n          } else {\n            items[0].focus();\n          }\n          break;\n        case 'ArrowUp':\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (index > 0) {\n            items[index - 1].focus();\n          } else {\n            items[items.length - 1].focus();\n          }\n          break;\n        case 'Home':\n          event.preventDefault();\n          items[0].focus();\n          break;\n        case 'End':\n          event.preventDefault();\n          items[items.length - 1].focus();\n          break;\n        default:\n          break;\n      }\n    });\n\n    // Handle focus on open\n    this.addEventListener(\n      'toggle',\n      (event: ToggleEvent & {source?: Element | null}) => {\n        if (event.newState === 'open') {\n          this.previouslyFocused = event.source as HTMLElement;\n          // Focus the first non-disabled item\n          setTimeout(() => {\n            this.items\n              .find((item) => !item.matches(':disabled,.disabled,[disabled]'))\n              ?.focus();\n          });\n        } else {\n          this.previouslyFocused?.focus();\n          this.previouslyFocused = undefined;\n        }\n      },\n    );\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Set popover behavior in connectedCallback since constructor may not\n    // sprout attributes.\n    this.popover = 'auto';\n  }\n\n  protected override render() {\n    return html`<div part=\"menu\" class=\"${menu({color: this.color})} menu-host\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

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

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { type MenuItemCheckable } from './menu.js';
+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 MenuGroupElement extends baseClass {
+    /** @nocollapse */
+    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/menu-group-element.js

@@ -0,0 +1,66 @@
+/**
+ * @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 { 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.
+ */
+export class MenuGroupElement 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>`;
+    }
+}
+/** @nocollapse */
+MenuGroupElement.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+    `,
+];
+__decorate([
+    provide({ context: menuItemCheckable }),
+    property({ reflect: true })
+], MenuGroupElement.prototype, "checkable", void 0);
+__decorate([
+    consume({ context: menuContext, subscribe: true })
+], MenuGroupElement.prototype, "menuContext", void 0);
+//# sourceMappingURL=menu-group-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-element.js","sourceRoot":"","sources":["menu-group-element.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,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,yCAAyC,CAAC;AAEjD,OAAO,EACL,WAAW,EACX,iBAAiB,GAGlB,MAAM,WAAW,CAAC;AAEnB,wCAAwC;AACxC,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;;;GAIG;AACH,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAc7C,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;;AAlDD,kBAAkB;AACF,uBAAM,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;mDACiB;AAiB1B;IADhB,OAAO,CAAC,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;qDACO","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 {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\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 */\nexport class MenuGroupElement extends baseClass {\n  /** @nocollapse */\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/menu-item-element.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+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-axes
+ * @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-axes
+ * @cssprop --supporting-text-tracking
+ * @cssprop --top-space
+ * @cssprop --trailing-icon-color
+ * @cssprop --trailing-icon-size
+ * @cssprop --trailing-space
+ * @cssprop --trailing-supporting-text
+ * @cssprop --trailing-supporting-text-axes
+ * @cssprop --trailing-supporting-text-color
+ * @cssprop --trailing-supporting-text-tracking
+ */
+export declare class MenuItemElement extends baseClass {
+    /** @nocollapse */
+    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 {};