@material/web 2.4.2-nightly.2fe7e22.0 → 2.4.2-nightly.3758f46.0

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

@@ -0,0 +1,141 @@
+/**
+ * @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 { customElement, 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.
+ */
+let Menu = class Menu 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>`;
+    }
+};
+Menu.styles = [menuStyles, css ``];
+__decorate([
+    property()
+], Menu.prototype, "color", void 0);
+Menu = __decorate([
+    customElement('md-menu')
+], Menu);
+export { Menu };
+//# sourceMappingURL=md-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-menu.js","sourceRoot":"","sources":["md-menu.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 {customElement, 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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** A Material Design menu component. */\n    'md-menu': Menu;\n  }\n}\n\n// Separate variable needed for closure.\nconst baseClass = mixinElementInternals(mixinFocusable(LitElement));\n\n/**\n * A Material Design menu component.\n */\n@customElement('md-menu')\nexport class Menu extends baseClass {\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.css

@@ -0,0 +1,4 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--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)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--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)}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--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)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--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)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--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)}}.menu-item:is(:disabled,.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%)}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--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%)}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--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%)}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking)}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}/*# sourceMappingURL=menu.css.map */

package/labs/gb/components/menu/menu.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["menu.scss","_menu-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,mEACA,oBAEI,MCNF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDGE,mBCSF,0DDPI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WC5BF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,qEACA,iBACA,8DACA,2BACA,uBACA,yEACA,6DACA,+EDUE,uBCNF,0DACA,uCDQE,sBCJF,0DACA,uCDME,uCACE,WCHJ,8DACA,gEACA,mEACA,iEACA,4EDEI,gCCEJ,mDACA,2FAIA,mDACA,oDDFI,kCCMJ,mDACA,qDDFE,iCCMF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDVI,uCAFF,iCCgBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDdE,mCCkBF,yEACA,2EACA,8EACA,4EACA,uFDpBI,uCAFF,mCC0BF,oFACA,sFACA,yFACA,uFACA,mGDzBI,4DC6BJ,gFACA,oFACA,sFACA,yFACA,uFACA,kGD7BE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CAGF,oCACE,4CACA,qCACA,wDAGF,6DAEE,aACA,mBACA,QAGF,8BACE,2CACA,yCAGF,+BACE,4CACA","file":"menu.css"}

package/labs/gb/components/menu/menu.cssresult.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: CSSStyleSheet;
+export default _default;

package/labs/gb/components/menu/menu.cssresult.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./labs/gb/components/menu/menu.css.
+import { css } from 'lit';
+export const styles = css `/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--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)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--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)}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--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)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--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)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--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)}}.menu-item:is(:disabled,.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%)}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--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%)}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--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%)}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking)}.menu-item::before{display:flex;content:"";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}
+`;
+export default styles.styleSheet;
+//# sourceMappingURL=menu.cssresult.js.map

package/labs/gb/components/menu/menu.cssresult.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.cssresult.js","sourceRoot":"","sources":["menu.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/components/menu/menu.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;@layer md.comp.menu{.menu{--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)}.menu.menu-vibrant{--container-color: var(--md-sys-color-tertiary-container);--menu-vibrant: true}.menu{flex-direction:column;box-shadow:var(--container-elevation);border-radius:var(--container-shape);background-color:var(--container-color);padding-block:var(--group-padding)}.menu:popover-open,.menu.menu-host{display:flex}.menu:popover-open,:host(:popover-open):has(.menu.menu-host){position-area:end span-end;border:none}:host(:popover-open):has(.menu.menu-host){overflow:visible;background:none;padding:0}.menu.menu-host{overflow:auto}.menu .divider,.menu ::slotted(.divider){margin:8px 16px}.menu-item{--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)}.menu-item:first-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}.menu-item:last-child{--inner-corner-corner-size: var(--md-sys-shape-corner-xs);--shape: var(--md-sys-shape-corner-md)}@container style(--menu-vibrant: true){.menu-item{--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)}.menu-item:where(:hover,.hover){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:focus-within,.focus){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}.menu-item:where(:active,.active){--leading-icon-color: var(--md-sys-color-tertiary);--trailing-icon-color: var(--md-sys-color-tertiary)}}.menu-item:is(:checked,.checked){--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)}@container style(--menu-vibrant: true){.menu-item:is(:checked,.checked){--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)}}.menu-item:is(:disabled,.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%)}@container style(--menu-vibrant: true){.menu-item:is(:disabled,.disabled){--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%)}}.menu-item:is(:disabled,.disabled):where(:checked,.checked){--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%)}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;user-select:none;box-sizing:border-box;gap:var(--between-space);min-height:calc(var(--height) + 4px);border-radius:var(--shape);padding-block:var(--top-space) var(--bottom-space);padding-inline:var(--leading-space) var(--trailing-space);background-image:none;outline:none;color:var(--label-text-color);font:var(--label-text);letter-spacing:var(--label-text-tracking)}.menu-item::before{display:flex;content:\"\";position:absolute;inset:2px 4px;z-index:-1;border-radius:inherit;background-color:var(--container-color);background-image:var(--ripple);animation:var(--ripple-animation),var(--focus-ring-animation);transition:var(--ripple-transition);outline:var(--focus-ring-outline);outline-offset:var(--focus-ring-offset)}.menu-item:not(:disabled,.disabled){cursor:pointer}.menu-item .menu-item-content{display:flex;flex-direction:column;flex:1}.menu-item .menu-item-supporting-text{color:var(--supporting-text-color);font:var(--supporting-text);letter-spacing:var(--supporting-text-tracking)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking)}.menu-item .menu-item-leading,.menu-item .menu-item-trailing{display:flex;align-items:center;gap:8px}.menu-item .menu-item-leading{--md-icon-color: var(--leading-icon-color);--md-icon-size: var(--leading-icon-size)}.menu-item .menu-item-trailing{--md-icon-color: var(--trailing-icon-color);--md-icon-size: var(--trailing-icon-size)}}\n`;\nexport default styles.styleSheet!;\n"]}

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

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { type ClassInfo } from 'lit/directives/class-map.js';
+/** Menu context provided to menu items. */
+export interface MenuContext {
+    /** The item's parent menu. */
+    readonly menu: HTMLElement;
+    /** Returns the menu's items. */
+    getItems: () => HTMLElement[];
+    /** Callback for menu items to register themselves with the menu. */
+    itemConnected(item: HTMLElement): void;
+    /** Callback for menu items to unregister themselves with the menu. */
+    itemDisconnected(item: HTMLElement): void;
+}
+/** Menu context to provide to menu items. */
+export declare const menuContext: {
+    __context__: MenuContext;
+};
+/** Menu color configuration types. */
+export type MenuColor = 'standard' | 'vibrant';
+/** Menu color configurations. */
+export declare const MENU_COLORS: {
+    readonly standard: "standard";
+    readonly vibrant: "vibrant";
+};
+/** Menu classes. */
+export declare const MENU_CLASSES: {
+    readonly menu: "menu";
+    readonly menuVibrant: "menu-vibrant";
+};
+/** The state provided to the `menuClasses()` function. */
+export interface MenuClassesState {
+    /** The color of the menu. */
+    color?: MenuColor;
+}
+/**
+ * Returns the menu classes to apply to an element based on the given state.
+ *
+ * @param state The state of the menu.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function menuClasses({ color }?: MenuClassesState): ClassInfo;
+/**
+ * Sets up menu functionality for the given element.
+ *
+ * @param menu The element on which to set up menu functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupMenu(menu: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds menu styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menu()}">TODO: add examples</div>`;
+ * ```
+ */
+export declare const menu: (state?: MenuClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;
+/** Whether a group of menu items are single or multiple selectable. */
+export type MenuItemCheckable = 'single' | 'multiple';
+/** Context provided to menu items for the checkable state of a menu item group. */
+export declare const menuItemCheckable: {
+    __context__: MenuItemCheckable;
+};
+/** Menu item classes. */
+export declare const MENU_ITEM_CLASSES: {
+    readonly menuItem: "menu-item";
+    readonly checked: string;
+    readonly hover: string;
+    readonly focus: string;
+    readonly active: string;
+    readonly disabled: string;
+};
+/** The state provided to the `menuItemClasses()` function. */
+export interface MenuItemClassesState {
+    /** Emulates `:checked`. */
+    checked?: boolean;
+    /** Emulates `:hover`. */
+    hover?: boolean;
+    /** Emulates `:focus`. */
+    focus?: boolean;
+    /** Emulates `:active`. */
+    active?: boolean;
+    /** Emulates `:disabled`. */
+    disabled?: boolean;
+}
+/**
+ * Returns the menu item classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the menu item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export declare function menuItemClasses({ checked, hover, focus, active, disabled, }?: MenuItemClassesState): ClassInfo;
+/**
+ * Sets up menu item functionality for the given element.
+ *
+ * @param menuItem The element on which to set up menu item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export declare function setupMenuItem(menuItem: HTMLElement, opts?: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * A Lit directive that adds menu item styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menuItem()}">TODO: add examples</div>`;
+ * ```
+ */
+export declare const menuItem: (state?: MenuItemClassesState & import("../shared/directives.js").AdditionalClasses) => import("lit-html/directive.js").DirectiveResult;

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

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createContext } from '@lit/context';
+import { FOCUS_RING_TYPES, focusRingClasses } from '../focus/focus-ring.js';
+import { rippleClasses, setupRipple } from '../ripple/ripple.js';
+import { createClassMapDirective } from '../shared/directives.js';
+import { PSEUDO_CLASSES } from '../shared/pseudo-classes.js';
+/** Menu context to provide to menu items. */
+export const menuContext = createContext(Symbol('menuContext'));
+/** Menu color configurations. */
+export const MENU_COLORS = {
+    standard: 'standard',
+    vibrant: 'vibrant',
+};
+/** Menu classes. */
+export const MENU_CLASSES = {
+    menu: 'menu',
+    menuVibrant: 'menu-vibrant',
+};
+/**
+ * Returns the menu classes to apply to an element based on the given state.
+ *
+ * @param state The state of the menu.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function menuClasses({ color } = {}) {
+    return {
+        [MENU_CLASSES.menu]: true,
+        [MENU_CLASSES.menuVibrant]: color === MENU_COLORS.vibrant,
+    };
+}
+/**
+ * Sets up menu functionality for the given element.
+ *
+ * @param menu The element on which to set up menu functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupMenu(menu, opts) {
+    // TODO: add event listeners from <md-menu>
+}
+/**
+ * A Lit directive that adds menu styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menu()}">TODO: add examples</div>`;
+ * ```
+ */
+export const menu = createClassMapDirective({
+    getClasses: menuClasses,
+    setupElement: setupMenu,
+});
+/** Context provided to menu items for the checkable state of a menu item group. */
+export const menuItemCheckable = createContext(Symbol('menuItemCheckable'));
+/** Menu item classes. */
+export const MENU_ITEM_CLASSES = {
+    menuItem: 'menu-item',
+    checked: PSEUDO_CLASSES.checked,
+    hover: PSEUDO_CLASSES.hover,
+    focus: PSEUDO_CLASSES.focus,
+    active: PSEUDO_CLASSES.active,
+    disabled: PSEUDO_CLASSES.disabled,
+};
+/**
+ * Returns the menu item classes to apply to an element based on the given
+ * state.
+ *
+ * @param state The state of the menu item.
+ * @return An object of class names and truthy values if they apply.
+ */
+export function menuItemClasses({ checked = false, hover = false, focus = false, active = false, disabled = false, } = {}) {
+    return {
+        ...rippleClasses(),
+        ...focusRingClasses({ type: FOCUS_RING_TYPES.inner }),
+        [MENU_ITEM_CLASSES.menuItem]: true,
+        [MENU_ITEM_CLASSES.checked]: checked,
+        [MENU_ITEM_CLASSES.hover]: hover,
+        [MENU_ITEM_CLASSES.focus]: focus,
+        [MENU_ITEM_CLASSES.active]: active,
+        [MENU_ITEM_CLASSES.disabled]: disabled,
+    };
+}
+/**
+ * Sets up menu item functionality for the given element.
+ *
+ * @param menuItem The element on which to set up menu item functionality.
+ * @param opts Setup options, supports a cleanup `signal`.
+ */
+export function setupMenuItem(menuItem, opts) {
+    setupRipple(menuItem, opts);
+}
+/**
+ * A Lit directive that adds menu item styling and functionality to its element.
+ *
+ * @example
+ * ```ts
+ * html`<div class="${menuItem()}">TODO: add examples</div>`;
+ * ```
+ */
+export const menuItem = createClassMapDirective({
+    getClasses: menuItemClasses,
+    setupElement: setupMenuItem,
+});
+//# sourceMappingURL=menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAC,gBAAgB,EAAE,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAC,uBAAuB,EAAC,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAc3D,6CAA6C;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAc,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAK7E,iCAAiC;AACjC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,oBAAoB;AACpB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,cAAc;CACnB,CAAC;AAQX;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,EAAC,KAAK,KAAsB,EAAE;IACxD,OAAO;QACL,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI;QACzB,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,WAAW,CAAC,OAAO;KAC1D,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CACvB,IAAiB,EACjB,IAA6B;IAE7B,2CAA2C;AAC7C,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,uBAAuB,CAAC;IAC1C,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAKH,mFAAmF;AACnF,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,MAAM,CAAC,mBAAmB,CAAC,CAC5B,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,EAAE,cAAc,CAAC,MAAM;IAC7B,QAAQ,EAAE,cAAc,CAAC,QAAQ;CACzB,CAAC;AAgBX;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,KAAK,MACQ,EAAE;IAC1B,OAAO;QACL,GAAG,aAAa,EAAE;QAClB,GAAG,gBAAgB,CAAC,EAAC,IAAI,EAAE,gBAAgB,CAAC,KAAK,EAAC,CAAC;QACnD,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI;QAClC,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO;QACpC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK;QAChC,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM;QAClC,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,QAAQ;KACvC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAC3B,QAAqB,EACrB,IAA6B;IAE7B,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,uBAAuB,CAAC;IAC9C,UAAU,EAAE,eAAe;IAC3B,YAAY,EAAE,aAAa;CAC5B,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createContext} from '@lit/context';\nimport {type ClassInfo} from 'lit/directives/class-map.js';\nimport {FOCUS_RING_TYPES, focusRingClasses} from '../focus/focus-ring.js';\nimport {rippleClasses, setupRipple} from '../ripple/ripple.js';\nimport {createClassMapDirective} from '../shared/directives.js';\nimport {PSEUDO_CLASSES} from '../shared/pseudo-classes.js';\n\n/** Menu context provided to menu items. */\nexport interface MenuContext {\n  /** The item's parent menu. */\n  readonly menu: HTMLElement;\n  /** Returns the menu's items. */\n  getItems: () => HTMLElement[];\n  /** Callback for menu items to register themselves with the menu. */\n  itemConnected(item: HTMLElement): void;\n  /** Callback for menu items to unregister themselves with the menu. */\n  itemDisconnected(item: HTMLElement): void;\n}\n\n/** Menu context to provide to menu items. */\nexport const menuContext = createContext<MenuContext>(Symbol('menuContext'));\n\n/** Menu color configuration types. */\nexport type MenuColor = 'standard' | 'vibrant';\n\n/** Menu color configurations. */\nexport const MENU_COLORS = {\n  standard: 'standard',\n  vibrant: 'vibrant',\n} as const;\n\n/** Menu classes. */\nexport const MENU_CLASSES = {\n  menu: 'menu',\n  menuVibrant: 'menu-vibrant',\n} as const;\n\n/** The state provided to the `menuClasses()` function. */\nexport interface MenuClassesState {\n  /** The color of the menu. */\n  color?: MenuColor;\n}\n\n/**\n * Returns the menu classes to apply to an element based on the given state.\n *\n * @param state The state of the menu.\n * @return An object of class names and truthy values if they apply.\n */\nexport function menuClasses({color}: MenuClassesState = {}): ClassInfo {\n  return {\n    [MENU_CLASSES.menu]: true,\n    [MENU_CLASSES.menuVibrant]: color === MENU_COLORS.vibrant,\n  };\n}\n\n/**\n * Sets up menu functionality for the given element.\n *\n * @param menu The element on which to set up menu functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupMenu(\n  menu: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  // TODO: add event listeners from <md-menu>\n}\n\n/**\n * A Lit directive that adds menu styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${menu()}\">TODO: add examples</div>`;\n * ```\n */\nexport const menu = createClassMapDirective({\n  getClasses: menuClasses,\n  setupElement: setupMenu,\n});\n\n/** Whether a group of menu items are single or multiple selectable. */\nexport type MenuItemCheckable = 'single' | 'multiple';\n\n/** Context provided to menu items for the checkable state of a menu item group. */\nexport const menuItemCheckable = createContext<MenuItemCheckable | null>(\n  Symbol('menuItemCheckable'),\n);\n\n/** Menu item classes. */\nexport const MENU_ITEM_CLASSES = {\n  menuItem: 'menu-item',\n  checked: PSEUDO_CLASSES.checked,\n  hover: PSEUDO_CLASSES.hover,\n  focus: PSEUDO_CLASSES.focus,\n  active: PSEUDO_CLASSES.active,\n  disabled: PSEUDO_CLASSES.disabled,\n} as const;\n\n/** The state provided to the `menuItemClasses()` function. */\nexport interface MenuItemClassesState {\n  /** Emulates `:checked`. */\n  checked?: boolean;\n  /** Emulates `:hover`. */\n  hover?: boolean;\n  /** Emulates `:focus`. */\n  focus?: boolean;\n  /** Emulates `:active`. */\n  active?: boolean;\n  /** Emulates `:disabled`. */\n  disabled?: boolean;\n}\n\n/**\n * Returns the menu item classes to apply to an element based on the given\n * state.\n *\n * @param state The state of the menu item.\n * @return An object of class names and truthy values if they apply.\n */\nexport function menuItemClasses({\n  checked = false,\n  hover = false,\n  focus = false,\n  active = false,\n  disabled = false,\n}: MenuItemClassesState = {}): ClassInfo {\n  return {\n    ...rippleClasses(),\n    ...focusRingClasses({type: FOCUS_RING_TYPES.inner}),\n    [MENU_ITEM_CLASSES.menuItem]: true,\n    [MENU_ITEM_CLASSES.checked]: checked,\n    [MENU_ITEM_CLASSES.hover]: hover,\n    [MENU_ITEM_CLASSES.focus]: focus,\n    [MENU_ITEM_CLASSES.active]: active,\n    [MENU_ITEM_CLASSES.disabled]: disabled,\n  };\n}\n\n/**\n * Sets up menu item functionality for the given element.\n *\n * @param menuItem The element on which to set up menu item functionality.\n * @param opts Setup options, supports a cleanup `signal`.\n */\nexport function setupMenuItem(\n  menuItem: HTMLElement,\n  opts?: {signal?: AbortSignal},\n): void {\n  setupRipple(menuItem, opts);\n}\n\n/**\n * A Lit directive that adds menu item styling and functionality to its element.\n *\n * @example\n * ```ts\n * html`<div class=\"${menuItem()}\">TODO: add examples</div>`;\n * ```\n */\nexport const menuItem = createClassMapDirective({\n  getClasses: menuItemClasses,\n  setupElement: setupMenuItem,\n});\n"]}

package/labs/gb/components/menu/menu.scss

@@ -0,0 +1,171 @@
+/*!
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// go/keep-sorted start by_regex='(.+) prefix_order=sass:
+@use 'menu-tokens';
+// go/keep-sorted end
+
+@layer md.sys, md.comp.ripple, md.comp.focus-ring, md.comp.divider;
+@layer md.comp.menu {
+  .menu {
+    & {
+      @include menu-tokens.root;
+    }
+    &.menu-vibrant {
+      @include menu-tokens.vibrant;
+      --menu-vibrant: true;
+    }
+
+    & {
+      flex-direction: column;
+      box-shadow: var(--container-elevation);
+      border-radius: var(--container-shape);
+      background-color: var(--container-color);
+      padding-block: var(--group-padding);
+    }
+
+    &:popover-open,
+    &.menu-host {
+      display: flex;
+    }
+
+    &:popover-open,
+    :host(:popover-open):has(&.menu-host) {
+      position-area: end span-end;
+      border: none;
+    }
+
+    :host(:popover-open):has(&.menu-host) {
+      overflow: visible;
+      background: none;
+      padding: 0;
+    }
+
+    &.menu-host {
+      overflow: auto;
+    }
+
+    .divider,
+    ::slotted(.divider) {
+      margin: 8px 16px;
+    }
+  }
+
+  .menu-item {
+    & {
+      @include menu-tokens.item;
+    }
+    &:first-child {
+      @include menu-tokens.item-first-child;
+    }
+    &:last-child {
+      @include menu-tokens.item-last-child;
+    }
+    @container style(--menu-vibrant: true) {
+      & {
+        @include menu-tokens.item-vibrant;
+      }
+      &:where(:hover, .hover) {
+        @include menu-tokens.item-vibrant-hovered;
+      }
+      &:where(:focus-within, .focus) {
+        @include menu-tokens.item-vibrant-focused;
+      }
+      &:where(:active, .active) {
+        @include menu-tokens.item-vibrant-pressed;
+      }
+    }
+
+    &:is(:checked, .checked) {
+      @include menu-tokens.item-selected;
+      @container style(--menu-vibrant: true) {
+        @include menu-tokens.item-selected-vibrant;
+      }
+    }
+
+    &:is(:disabled, .disabled) {
+      @include menu-tokens.item-disabled;
+      @container style(--menu-vibrant: true) {
+        @include menu-tokens.item-disabled-vibrant;
+      }
+      &:where(:checked, .checked) {
+        @include menu-tokens.item-disabled-selected;
+      }
+    }
+
+    & {
+      position: relative;
+      isolation: isolate;
+      display: flex;
+      align-items: center;
+      user-select: none;
+      box-sizing: border-box;
+      gap: var(--between-space);
+      min-height: calc(var(--height) + 4px);
+      border-radius: var(--shape);
+      padding-block: var(--top-space) var(--bottom-space);
+      padding-inline: var(--leading-space) var(--trailing-space);
+      background-image: none;
+      outline: none;
+      color: var(--label-text-color);
+      font: var(--label-text);
+      letter-spacing: var(--label-text-tracking);
+    }
+
+    &::before {
+      display: flex;
+      content: '';
+      position: absolute;
+      inset: 2px 4px;
+      z-index: -1;
+      border-radius: inherit;
+      background-color: var(--container-color);
+      background-image: var(--ripple);
+      animation: var(--ripple-animation), var(--focus-ring-animation);
+      transition: var(--ripple-transition);
+      outline: var(--focus-ring-outline);
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    &:not(:disabled, .disabled) {
+      cursor: pointer;
+    }
+
+    .menu-item-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .menu-item-supporting-text {
+      color: var(--supporting-text-color);
+      font: var(--supporting-text);
+      letter-spacing: var(--supporting-text-tracking);
+    }
+
+    .menu-item-trailing-text {
+      color: var(--trailing-supporting-text-color);
+      font: var(--trailing-supporting-text);
+      letter-spacing: var(--trailing-supporting-text-tracking);
+    }
+
+    .menu-item-leading,
+    .menu-item-trailing {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .menu-item-leading {
+      --md-icon-color: var(--leading-icon-color);
+      --md-icon-size: var(--leading-icon-size);
+    }
+
+    .menu-item-trailing {
+      --md-icon-color: var(--trailing-icon-color);
+      --md-icon-size: var(--trailing-icon-size);
+    }
+  }
+}