@maicol07/material-web 2.3.0 → 2.5.1

package/labs/gb/components/menu/menu-item-element.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 { 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-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 class MenuItemElement 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;
+    }
+}
+/** @nocollapse */
+MenuItemElement.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 })
+], MenuItemElement.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MenuItemElement.prototype, "disabled", void 0);
+__decorate([
+    consume({ context: menuContext, subscribe: true })
+], MenuItemElement.prototype, "menuContext", void 0);
+__decorate([
+    state(),
+    consume({ context: menuItemCheckable, subscribe: true })
+], MenuItemElement.prototype, "checkable", void 0);
+//# sourceMappingURL=menu-item-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-element.js","sourceRoot":"","sources":["menu-item-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 {consume} from '@lit/context';\nimport {css, CSSResultOrNative, html, LitElement, nothing} from 'lit';\nimport {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\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-axes\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-axes\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\n * @cssprop --trailing-supporting-text-axes\n * @cssprop --trailing-supporting-text-color\n * @cssprop --trailing-supporting-text-tracking\n */\nexport class MenuItemElement extends baseClass {\n  /** @nocollapse */\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/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-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 )}.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);font-variation-settings:var(--label-text-axes)}.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);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.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,MCLF,6DACA,wDACA,iDACA,WACA,qBACA,6CACA,mEDEE,mBCWF,0DDTI,qBAGF,MACE,sBACA,sCACA,qCACA,wCACA,mCAGF,mCAEE,aAGF,6DAEE,2BACA,YAGF,0CACE,iBACA,gBACA,UAGF,gBACE,cAGF,yCAEE,gBAKF,WCzBF,sBACA,oBACA,+BACA,eACA,iCACA,mDACA,+CACA,yDACA,iEACA,6DACA,0BACA,sBACA,uCACA,gEACA,mDACA,6DACA,qEACA,iBACA,8DACA,2BACA,uBACA,6DACA,uEACA,yEACA,iFDIE,uBCGF,0DACA,uCDDE,sBCKF,0DACA,uCDHE,uCACE,WCMJ,8DACA,gEACA,mEACA,iEACA,4EDPI,gCCWJ,mDACA,oDDTI,uCCaJ,mDACA,oDDXI,kCCeJ,mDACA,qDDXE,iCCeF,0DACA,8DACA,gEACA,uCACA,mEACA,iEACA,4EDnBI,uCAFF,iCCyBF,gDACA,oDACA,sDACA,yDACA,uDACA,mEDvBE,mCC2BF,yEACA,2EACA,8EACA,4EACA,yFD7BI,uCAFF,mCCqCF,sFAGA,wFAGA,2FAGA,yFAGA,qGD5CI,4DCkDJ,kFAGA,sFAGA,wFAGA,2FAGA,yFAGA,oGD5DE,WACE,kBACA,kBACA,aACA,mBACA,iBACA,sBACA,yBACA,qCACA,2BACA,mDACA,0DACA,sBACA,aACA,8BACA,uBACA,0CACA,+CAGF,mBACE,aACA,WACA,kBACA,cACA,WACA,sBACA,wCACA,+BACA,8DACA,oCACA,kCACA,wCAGF,oCACE,eAGF,8BACE,aACA,sBACA,OAGF,sCACE,mCACA,4BACA,+CACA,oDAGF,oCACE,4CACA,qCACA,wDACA,6DAGF,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-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 )}.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);font-variation-settings:var(--label-text-axes)}.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);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.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-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 )}.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);font-variation-settings:var(--label-text-axes)}.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);font-variation-settings:var(--supporting-text-axes)}.menu-item .menu-item-trailing-text{color:var(--trailing-supporting-text-color);font:var(--trailing-supporting-text);letter-spacing:var(--trailing-supporting-text-tracking);font-variation-settings:var(--trailing-supporting-text-axes)}.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-gb-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,8CAA8C;AAChD,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-gb-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"]}