@material/web 2.5.0 → 2.5.1-nightly.23b638c.0

package/labs/aria/command.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Performs the 'shared command invoker activation steps' for a button or
+ * menuitem, to be called when that element is activated: either runs a command
+ * (i.e. the element has `command` and `commandfor` attributes) or changes a
+ * popover's state (i.e. the element has the `popovertarget` and possibly
+ * `popovertargetaction` attributes).
+ *
+ * https://whatpr.org/html/12011/popover.html#shared-command-invoker-activation-steps
+ *
+ * @param element The button or menuitem being activated.
+ * @param event The event that activated `element`.
+ */
+export declare function sharedCommandInvokerActivationSteps(element: HTMLElement, event: Event): void;

package/labs/aria/command.js

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/// <reference types="../../types/command-event.d.ts" />
+/// <reference types="../../types/popover.d.ts" />
+import { queryAssociatedById } from './query-associated.js';
+/**
+ * Determines an element's `command` attribute state, given the attribute value.
+ */
+function getCommandState(attrValue) {
+    switch (attrValue) {
+        case 'toggle-popover':
+        case 'show-popover':
+        case 'hide-popover':
+        case 'close':
+        case 'request-close':
+        case 'show-modal':
+            return attrValue;
+        default:
+            return attrValue?.startsWith('--') ? 'custom' : 'unknown';
+    }
+}
+/** Determines the popover state of an element. */
+function getPopoverState(element) {
+    if (element.localName === 'md-aria-menulist') {
+        return 'auto';
+    }
+    const attrValue = element.getAttribute('popover');
+    switch (attrValue) {
+        case '':
+            return 'auto';
+        case 'auto':
+        case 'manual':
+        case 'hint':
+            return attrValue;
+        case null:
+        default:
+            return 'no-popover';
+    }
+}
+/**
+ * Determines the popover target action from an element's `popovertargetaction`
+ * attribute value.
+ */
+function getPopoverTargetActionState(attrValue) {
+    switch (attrValue) {
+        case 'toggle':
+        case 'show':
+        case 'hide':
+            return attrValue;
+        default:
+            return 'toggle';
+    }
+}
+/**
+ * Performs the 'shared command invoker activation steps' for a button or
+ * menuitem, to be called when that element is activated: either runs a command
+ * (i.e. the element has `command` and `commandfor` attributes) or changes a
+ * popover's state (i.e. the element has the `popovertarget` and possibly
+ * `popovertargetaction` attributes).
+ *
+ * https://whatpr.org/html/12011/popover.html#shared-command-invoker-activation-steps
+ *
+ * @param element The button or menuitem being activated.
+ * @param event The event that activated `element`.
+ */
+export function sharedCommandInvokerActivationSteps(element, event) {
+    const idref = element.getAttribute('commandfor');
+    const commandTarget = queryAssociatedById(element, idref ?? '');
+    if (!commandTarget) {
+        popoverTargetAttributeActivationBehavior(element, event.target);
+        return;
+    }
+    const command = element.getAttribute('command');
+    const commandState = getCommandState(command);
+    if (commandState === 'unknown' || command === null) {
+        return;
+    }
+    const isPopover = getPopoverState(commandTarget) !== 'no-popover';
+    if (isPopover && commandState !== 'custom') {
+        // `<dialog>` is the only element that defines 'is valid command steps'.
+        if (commandTarget.localName === 'dialog' &&
+            !['close', 'request-close', 'show-modal'].includes(commandState)) {
+            return;
+        }
+    }
+    const continueSteps = commandTarget.dispatchEvent(new CommandEvent('command', { source: element, command, cancelable: true }));
+    if (!continueSteps ||
+        !commandTarget.isConnected ||
+        commandState === 'custom') {
+        return;
+    }
+    switch (command) {
+        case 'hide-popover':
+            try {
+                // Use `togglePopover` because `hidePopover` doesn't support `source`.
+                commandTarget.togglePopover({ force: false, source: element });
+            }
+            catch (e) {
+                // Do nothing. No exception should be thrown by these steps if the
+                // popover isn't in the expected state.
+            }
+            break;
+        case 'toggle-popover':
+            try {
+                commandTarget.togglePopover({ source: element });
+            }
+            catch (e) {
+                // Do nothing. No exception should be thrown by these steps if the
+                // popover isn't in the expected state.
+            }
+            break;
+        case 'show-popover':
+            try {
+                commandTarget.showPopover({ source: element });
+            }
+            catch (e) {
+                // Do nothing. No exception should be thrown by these steps if the
+                // popover isn't in the expected state.
+            }
+            break;
+        default:
+            // An element can have 'command steps', which are run if the element's
+            // command is not a popover command. Currently, only `<dialog>` defines
+            // 'command steps', so they're inlined here.
+            //
+            // https://whatpr.org/html/12011/popover.html#command-steps
+            // https://whatpr.org/html/12011/interactive-elements.html#the-dialog-element:command-steps
+            if (commandTarget.localName === 'dialog') {
+                const dialog = commandTarget;
+                if (dialog.matches(':popover-open')) {
+                    return;
+                }
+                switch (commandState) {
+                    case 'close':
+                        if (dialog.hasAttribute('open')) {
+                            dialog.close(element.getAttribute('value') ?? undefined);
+                        }
+                        break;
+                    case 'request-close':
+                        if (dialog.hasAttribute('open')) {
+                            dialog.requestClose(element.getAttribute('value') ?? undefined);
+                        }
+                        break;
+                    case 'show-modal':
+                        if (!dialog.hasAttribute('open')) {
+                            dialog.showModal();
+                        }
+                        break;
+                    default:
+                        // Do nothing.
+                        break;
+                }
+            }
+    }
+}
+/**
+ * Performs the 'popover target attribute activation behavior' for a button or
+ * menuitem.
+ *
+ * These steps are taken when a button or menuitem is activated, but doesn't
+ * target an element with a `command` attribute.
+ *
+ * https://whatpr.org/html/12011/popover.html#popover-target-attribute-activation-behavior
+ *
+ * @param element The button or menuitem being activated.
+ * @param eventTarget The target of the event that activated `element`.
+ */
+function popoverTargetAttributeActivationBehavior(element, eventTarget) {
+    const idref = element.getAttribute('popovertarget');
+    const popover = queryAssociatedById(element, idref ?? '');
+    if (!popover) {
+        return;
+    }
+    // TODO: The spec describes a case here that's relevant when the popover is
+    // nested inside its invoker itself, which would cause clicking anywhere in
+    // the popover to close the popover.
+    //
+    // https://github.com/whatwg/html/pull/10770
+    const open = popover.matches(':popover-open');
+    const action = getPopoverTargetActionState(element.getAttribute('popovertargetaction') ?? '');
+    if (!open && (action === 'show' || action === 'toggle')) {
+        try {
+            popover.showPopover({ source: element });
+        }
+        catch (e) {
+            // Do nothing. No exception should be thrown by these steps if the
+            // popover isn't in the expected state.
+        }
+    }
+    else if (open && (action === 'hide' || action === 'toggle')) {
+        try {
+            // Use `togglePopover` because `hidePopover` doesn't support `source`.
+            popover.togglePopover({ force: false, source: element });
+        }
+        catch (e) {
+            // Do nothing. No exception should be thrown by these steps if the
+            // popover isn't in the expected state.
+        }
+    }
+}
+//# sourceMappingURL=command.js.map

package/labs/aria/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sourceRoot":"","sources":["command.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/// <reference types=\"../../types/command-event.d.ts\" />\n/// <reference types=\"../../types/popover.d.ts\" />\n\nimport {queryAssociatedById} from './query-associated.js';\n\n/**\n * An element's `command` attribute state: either one of a fixed set of commands\n * with spec-defined actions, `custom` (if it begins with `--`), or `unknown`.\n *\n * https://whatpr.org/html/12011/popover.html#attr-command\n */\ntype CommandState =\n  | 'toggle-popover'\n  | 'show-popover'\n  | 'hide-popover'\n  | 'close'\n  | 'request-close'\n  | 'show-modal'\n  | 'custom'\n  | 'unknown';\n\n/**\n * Determines an element's `command` attribute state, given the attribute value.\n */\nfunction getCommandState(attrValue: string | null): CommandState {\n  switch (attrValue) {\n    case 'toggle-popover':\n    case 'show-popover':\n    case 'hide-popover':\n    case 'close':\n    case 'request-close':\n    case 'show-modal':\n      return attrValue;\n    default:\n      return attrValue?.startsWith('--') ? 'custom' : 'unknown';\n  }\n}\n\n/**\n * An element's popover state, as determined by its type or `popover` attribute.\n *\n * https://whatpr.org/html/12011/popover.html#popover-state\n */\ntype PopoverState = 'auto' | 'manual' | 'hint' | 'no-popover';\n\n/** Determines the popover state of an element. */\nfunction getPopoverState(element: HTMLElement): PopoverState {\n  if (element.localName === 'md-aria-menulist') {\n    return 'auto';\n  }\n\n  const attrValue = element.getAttribute('popover');\n  switch (attrValue) {\n    case '':\n      return 'auto';\n    case 'auto':\n    case 'manual':\n    case 'hint':\n      return attrValue;\n    case null:\n    default:\n      return 'no-popover';\n  }\n}\n\n/**\n * An element's popover target action state: the action taken on the popover\n * referenced by the element's `popovertarget` attribute.\n *\n * https://whatpr.org/html/12011/popover.html#attr-popovertargetaction\n */\ntype PopoverTargetActionState = 'toggle' | 'show' | 'hide';\n\n/**\n * Determines the popover target action from an element's `popovertargetaction`\n * attribute value.\n */\nfunction getPopoverTargetActionState(\n  attrValue: string,\n): PopoverTargetActionState {\n  switch (attrValue) {\n    case 'toggle':\n    case 'show':\n    case 'hide':\n      return attrValue;\n    default:\n      return 'toggle';\n  }\n}\n\n/**\n * Performs the 'shared command invoker activation steps' for a button or\n * menuitem, to be called when that element is activated: either runs a command\n * (i.e. the element has `command` and `commandfor` attributes) or changes a\n * popover's state (i.e. the element has the `popovertarget` and possibly\n * `popovertargetaction` attributes).\n *\n * https://whatpr.org/html/12011/popover.html#shared-command-invoker-activation-steps\n *\n * @param element The button or menuitem being activated.\n * @param event The event that activated `element`.\n */\nexport function sharedCommandInvokerActivationSteps(\n  element: HTMLElement,\n  event: Event,\n) {\n  const idref = element.getAttribute('commandfor');\n  const commandTarget = queryAssociatedById(\n    element,\n    idref ?? '',\n  ) as HTMLElement | null;\n  if (!commandTarget) {\n    popoverTargetAttributeActivationBehavior(element, event.target as Node);\n    return;\n  }\n\n  const command = element.getAttribute('command');\n  const commandState = getCommandState(command);\n  if (commandState === 'unknown' || command === null) {\n    return;\n  }\n\n  const isPopover = getPopoverState(commandTarget) !== 'no-popover';\n  if (isPopover && commandState !== 'custom') {\n    // `<dialog>` is the only element that defines 'is valid command steps'.\n    if (\n      commandTarget.localName === 'dialog' &&\n      !['close', 'request-close', 'show-modal'].includes(commandState)\n    ) {\n      return;\n    }\n  }\n\n  const continueSteps = commandTarget.dispatchEvent(\n    new CommandEvent('command', {source: element, command, cancelable: true}),\n  );\n\n  if (\n    !continueSteps ||\n    !commandTarget.isConnected ||\n    commandState === 'custom'\n  ) {\n    return;\n  }\n\n  switch (command) {\n    case 'hide-popover':\n      try {\n        // Use `togglePopover` because `hidePopover` doesn't support `source`.\n        commandTarget.togglePopover({force: false, source: element});\n      } catch (e) {\n        // Do nothing. No exception should be thrown by these steps if the\n        // popover isn't in the expected state.\n      }\n      break;\n    case 'toggle-popover':\n      try {\n        commandTarget.togglePopover({source: element});\n      } catch (e) {\n        // Do nothing. No exception should be thrown by these steps if the\n        // popover isn't in the expected state.\n      }\n      break;\n    case 'show-popover':\n      try {\n        commandTarget.showPopover({source: element});\n      } catch (e) {\n        // Do nothing. No exception should be thrown by these steps if the\n        // popover isn't in the expected state.\n      }\n      break;\n    default:\n      // An element can have 'command steps', which are run if the element's\n      // command is not a popover command. Currently, only `<dialog>` defines\n      // 'command steps', so they're inlined here.\n      //\n      // https://whatpr.org/html/12011/popover.html#command-steps\n      // https://whatpr.org/html/12011/interactive-elements.html#the-dialog-element:command-steps\n      if (commandTarget.localName === 'dialog') {\n        const dialog = commandTarget as HTMLDialogElement;\n        if (dialog.matches(':popover-open')) {\n          return;\n        }\n\n        switch (commandState) {\n          case 'close':\n            if (dialog.hasAttribute('open')) {\n              dialog.close(element.getAttribute('value') ?? undefined);\n            }\n            break;\n          case 'request-close':\n            if (dialog.hasAttribute('open')) {\n              dialog.requestClose(element.getAttribute('value') ?? undefined);\n            }\n            break;\n          case 'show-modal':\n            if (!dialog.hasAttribute('open')) {\n              dialog.showModal();\n            }\n            break;\n          default:\n            // Do nothing.\n            break;\n        }\n      }\n  }\n}\n\n/**\n * Performs the 'popover target attribute activation behavior' for a button or\n * menuitem.\n *\n * These steps are taken when a button or menuitem is activated, but doesn't\n * target an element with a `command` attribute.\n *\n * https://whatpr.org/html/12011/popover.html#popover-target-attribute-activation-behavior\n *\n * @param element The button or menuitem being activated.\n * @param eventTarget The target of the event that activated `element`.\n */\nfunction popoverTargetAttributeActivationBehavior(\n  element: HTMLElement,\n  eventTarget: Node,\n) {\n  const idref = element.getAttribute('popovertarget');\n  const popover = queryAssociatedById(\n    element,\n    idref ?? '',\n  ) as HTMLElement | null;\n  if (!popover) {\n    return;\n  }\n\n  // TODO: The spec describes a case here that's relevant when the popover is\n  // nested inside its invoker itself, which would cause clicking anywhere in\n  // the popover to close the popover.\n  //\n  // https://github.com/whatwg/html/pull/10770\n\n  const open = popover.matches(':popover-open');\n  const action = getPopoverTargetActionState(\n    element.getAttribute('popovertargetaction') ?? '',\n  );\n  if (!open && (action === 'show' || action === 'toggle')) {\n    try {\n      popover.showPopover({source: element});\n    } catch (e) {\n      // Do nothing. No exception should be thrown by these steps if the\n      // popover isn't in the expected state.\n    }\n  } else if (open && (action === 'hide' || action === 'toggle')) {\n    try {\n      // Use `togglePopover` because `hidePopover` doesn't support `source`.\n      popover.togglePopover({force: false, source: element});\n    } catch (e) {\n      // Do nothing. No exception should be thrown by these steps if the\n      // popover isn't in the expected state.\n    }\n  }\n}\n"]}

package/labs/aria/menu/md-aria-menuitem.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaMenuitemElement } from './menuitem.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-aria-menuitem': AriaMenuitemElement;
+    }
+}

package/labs/aria/menu/md-aria-menuitem.js

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

package/labs/aria/menu/md-aria-menuitem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-aria-menuitem.js","sourceRoot":"","sources":["md-aria-menuitem.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAQlD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AriaMenuitemElement} from './menuitem.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-aria-menuitem': AriaMenuitemElement;\n  }\n}\n\ncustomElements.define('md-aria-menuitem', AriaMenuitemElement);\n"]}

package/labs/aria/menu/md-aria-menulist.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { AriaMenulistElement } from './menulist.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-aria-menulist': AriaMenulistElement;
+    }
+}

package/labs/aria/menu/md-aria-menulist.js

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

package/labs/aria/menu/md-aria-menulist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"md-aria-menulist.js","sourceRoot":"","sources":["md-aria-menulist.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAC;AAQlD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {AriaMenulistElement} from './menulist.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-aria-menulist': AriaMenulistElement;\n  }\n}\n\ncustomElements.define('md-aria-menulist', AriaMenulistElement);\n"]}

package/labs/aria/menu/menuitem.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+import { AriaMenulistElement } from './menulist.js';
+/** Private property key for the `ancestorMenulist` context. */
+declare const ancestorMenulist: unique symbol;
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>, import("../../behaviors/focusable.js").Focusable>, import("../../behaviors/custom-state-set.js").WithCustomStateSet>;
+/**
+ * An element implementing the proposed `<menuitem>` built-in element.
+ *
+ * @cssstate enabled - True when the item is enabled.
+ * @cssstate disabled - True when the item is disabled.
+ */
+export declare class AriaMenuitemElement extends baseClass {
+    static styles: CSSResultOrNative[];
+    [ancestorMenulist]?: AriaMenulistElement;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    click(): void;
+}
+export {};

package/labs/aria/menu/menuitem.js

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import { consume } from '@lit/context';
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { afterDispatch, setupDispatchHooks, } from '../../../internal/events/dispatch-hooks.js';
+import { mixinCustomStateSet, toggleState, } from '../../behaviors/custom-state-set.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+import { mixinFocusable } from '../../behaviors/focusable.js';
+import { sharedCommandInvokerActivationSteps } from '../command.js';
+import { ancestorMenulistContext } from './menulist.js';
+/** Private property key for the `ancestorMenulist` context. */
+const ancestorMenulist = Symbol('ancestorMenulist');
+const baseClass = mixinCustomStateSet(mixinFocusable(mixinElementInternals(LitElement)));
+/**
+ * An element implementing the proposed `<menuitem>` built-in element.
+ *
+ * @cssstate enabled - True when the item is enabled.
+ * @cssstate disabled - True when the item is disabled.
+ */
+export class AriaMenuitemElement extends baseClass {
+    get disabled() {
+        return this[internals].ariaDisabled === 'true';
+    }
+    set disabled(value) {
+        const oldValue = this.disabled;
+        value = Boolean(value);
+        this[internals].ariaDisabled = String(value);
+        this[toggleState]('disabled', value);
+        this[toggleState]('enabled', !value);
+        this.requestUpdate('disabled', oldValue);
+    }
+    constructor() {
+        super();
+        this[internals].role = 'menuitem';
+        this.disabled = false;
+        setupDispatchHooks(this, 'keydown', 'click');
+        this.addEventListener('keydown', (event) => {
+            afterDispatch(event, () => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                if (event.key === 'Enter' || event.key === ' ') {
+                    this.click();
+                }
+            });
+        });
+        this.addEventListener('click', (event) => {
+            afterDispatch(event, () => {
+                if (event.defaultPrevented || this.disabled) {
+                    return;
+                }
+                this[ancestorMenulist]?.hidePopover();
+                sharedCommandInvokerActivationSteps(this, event);
+            });
+        });
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    click() {
+        if (!this.disabled) {
+            super.click();
+        }
+    }
+}
+_a = ancestorMenulist;
+AriaMenuitemElement.styles = [
+    css `
+      :host {
+        display: inline-flex;
+      }
+    `,
+];
+__decorate([
+    consume({ context: ancestorMenulistContext, subscribe: true })
+], AriaMenuitemElement.prototype, _a, void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, noAccessor: true })
+], AriaMenuitemElement.prototype, "disabled", null);
+//# sourceMappingURL=menuitem.js.map

package/labs/aria/menu/menuitem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuitem.js","sourceRoot":"","sources":["menuitem.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 {CSSResultOrNative, LitElement, css, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n  afterDispatch,\n  setupDispatchHooks,\n} from '../../../internal/events/dispatch-hooks.js';\nimport {\n  mixinCustomStateSet,\n  toggleState,\n} from '../../behaviors/custom-state-set.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {mixinFocusable} from '../../behaviors/focusable.js';\nimport {sharedCommandInvokerActivationSteps} from '../command.js';\nimport {AriaMenulistElement, ancestorMenulistContext} from './menulist.js';\n\n/** Private property key for the `ancestorMenulist` context. */\nconst ancestorMenulist = Symbol('ancestorMenulist');\n\nconst baseClass = mixinCustomStateSet(\n  mixinFocusable(mixinElementInternals(LitElement)),\n);\n\n/**\n * An element implementing the proposed `<menuitem>` built-in element.\n *\n * @cssstate enabled - True when the item is enabled.\n * @cssstate disabled - True when the item is disabled.\n */\nexport class AriaMenuitemElement extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    css`\n      :host {\n        display: inline-flex;\n      }\n    `,\n  ];\n\n  @consume({context: ancestorMenulistContext, subscribe: true})\n  [ancestorMenulist]?: AriaMenulistElement;\n\n  @property({type: Boolean, reflect: true, noAccessor: true})\n  get disabled() {\n    return this[internals].ariaDisabled === 'true';\n  }\n  set disabled(value: boolean) {\n    const oldValue = this.disabled;\n    value = Boolean(value);\n    this[internals].ariaDisabled = String(value);\n    this[toggleState]('disabled', value);\n    this[toggleState]('enabled', !value);\n    this.requestUpdate('disabled', oldValue);\n  }\n\n  constructor() {\n    super();\n    this[internals].role = 'menuitem';\n    this.disabled = false;\n\n    setupDispatchHooks(this, 'keydown', 'click');\n    this.addEventListener('keydown', (event: KeyboardEvent) => {\n      afterDispatch(event, () => {\n        if (event.defaultPrevented) {\n          return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n          this.click();\n        }\n      });\n    });\n    this.addEventListener('click', (event: Event) => {\n      afterDispatch(event, () => {\n        if (event.defaultPrevented || this.disabled) {\n          return;\n        }\n\n        this[ancestorMenulist]?.hidePopover();\n        sharedCommandInvokerActivationSteps(this, event);\n      });\n    });\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n\n  override click() {\n    if (!this.disabled) {\n      super.click();\n    }\n  }\n}\n"]}

package/labs/aria/menu/menulist.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative, LitElement } from 'lit';
+/** The `<md-aria-menulist>` that should own descendant `<md-aria-menuitem>`s. */
+export declare const ancestorMenulistContext: {
+    __context__: AriaMenulistElement;
+};
+declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../behaviors/element-internals.js").WithElementInternals>;
+/**
+ * An element implementing the proposed `<menulist>` built-in element.
+ */
+export declare class AriaMenulistElement extends baseClass {
+    static styles: CSSResultOrNative[];
+    popover: string;
+    focusGroup: string;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    private opener;
+    private handleToggle;
+    private handleFocusout;
+}
+export {};

package/labs/aria/menu/menulist.js

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+/// <reference types="../../../types/popover.d.ts" />
+import { ContextProvider, createContext } from '@lit/context';
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+/** The `<md-aria-menulist>` that should own descendant `<md-aria-menuitem>`s. */
+export const ancestorMenulistContext = createContext(Symbol('ancestorMenulistContext'));
+const baseClass = mixinElementInternals(LitElement);
+/**
+ * An element implementing the proposed `<menulist>` built-in element.
+ */
+export class AriaMenulistElement extends baseClass {
+    constructor() {
+        super();
+        this.popover = 'auto';
+        this.focusGroup = 'menu';
+        this.opener = null;
+        const provider = new ContextProvider(this, {
+            context: ancestorMenulistContext,
+        });
+        provider.setValue(this);
+        this[internals].role = 'menu';
+        this[internals].ariaOrientation = 'vertical';
+        this.addEventListener('toggle', this.handleToggle.bind(this));
+        this.addEventListener('focusout', this.handleFocusout.bind(this));
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    handleToggle(event) {
+        if (event.newState === 'open') {
+            this.opener = event.source;
+        }
+        else if (event.newState === 'closed' && this.matches(':focus-within')) {
+            // When closing, restore focus if focus remained in the menulist (e.g.
+            // during _keyboard_ light dismiss).
+            this.opener?.focus?.();
+        }
+    }
+    handleFocusout() {
+        if (!this.matches(':focus-within')) {
+            this.hidePopover();
+        }
+    }
+}
+AriaMenulistElement.styles = [
+    css `
+      /* Unset UA |[popover]| styles. */
+      @layer {
+        :host([popover]) {
+          position: unset;
+          width: unset;
+          height: unset;
+          color: unset;
+          background-color: unset;
+          inset: unset;
+          margin: unset;
+          border: unset;
+          border-image: unset;
+          padding: unset;
+          overflow: unset;
+        }
+
+        :host([popover]:popover-open) {
+          display: unset;
+          overlay: unset;
+        }
+      }
+
+      :host {
+        display: block;
+        position: fixed;
+        width: max-content;
+        max-block-size: stretch;
+        color: canvastext;
+        background-color: canvas;
+        margin: 0px;
+        inset: auto;
+        overflow: auto;
+        border: 1px solid currentColor;
+        border-image: none;
+        padding: 0.25em;
+
+        /* This should really only apply when the implicit anchor is a menuitem
+         * in a menubar, but applies to buttons too? */
+        position-area: block-end span-inline-end;
+      }
+
+      :host(:not(:popover-open)) {
+        display: none;
+      }
+
+      ::slotted(md-aria-menuitem) {
+        display: flex;
+        align-items: center;
+        user-select: none;
+        min-inline-size: 24px;
+        min-block-size: max(24px, 1lh);
+        font-weight: inherit;
+        gap: 0.5em;
+        padding-inline: 0.5em;
+      }
+
+      ::slotted(md-aria-menuitem:state(enabled):hover) {
+        background-color: color-mix(in lab, currentColor 10%, transparent);
+      }
+
+      ::slotted(md-aria-menuitem:state(disabled)) {
+        color: color-mix(in lab, currentColor 50%, transparent);
+      }
+
+      ::slotted(hr) {
+        color: inherit;
+        margin-inline: 0px;
+        border: none;
+        border-block-start: 1px solid currentColor;
+        border-image: none;
+      }
+
+      ::slotted(a:any-link),
+      ::slotted(img[usemap]) {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    property({ reflect: true })
+], AriaMenulistElement.prototype, "popover", void 0);
+__decorate([
+    property({ reflect: true })
+], AriaMenulistElement.prototype, "focusGroup", void 0);
+//# sourceMappingURL=menulist.js.map

package/labs/aria/menu/menulist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menulist.js","sourceRoot":"","sources":["menulist.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,qDAAqD;AAErD,OAAO,EAAC,eAAe,EAAE,aAAa,EAAC,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAoB,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,sCAAsC,CAAC;AAE9C,iFAAiF;AACjF,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAClD,MAAM,CAAC,yBAAyB,CAAC,CAClC,CAAC;AAOF,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,SAAS;IAwFhD;QACE,KAAK,EAAE,CAAC;QAND,YAAO,GAAG,MAAM,CAAC;QAG1B,eAAU,GAAG,MAAM,CAAC;QAoBZ,WAAM,GAAiC,IAAI,CAAC;QAflD,MAAM,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE;YACzC,OAAO,EAAE,uBAAuB;SACjC,CAAC,CAAC;QACH,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAExB,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC;QAC9B,IAAI,CAAC,SAAS,CAAC,CAAC,eAAe,GAAG,UAAU,CAAC;QAC7C,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAIO,YAAY,CAAC,KAAkB;QACrC,IAAI,KAAK,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAsC,CAAC;QAC7D,CAAC;aAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;YACxE,sEAAsE;YACtE,oCAAoC;YACpC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;;AAzHe,0BAAM,GAAwB;IAC5C,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6EF;CACF,AA/EqB,CA+EpB;AAGO;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oDACA;AAG1B;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uDACN","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/// <reference types=\"../../../types/popover.d.ts\" />\n\nimport {ContextProvider, createContext} from '@lit/context';\nimport {CSSResultOrNative, LitElement, css, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\n\n/** The `<md-aria-menulist>` that should own descendant `<md-aria-menuitem>`s. */\nexport const ancestorMenulistContext = createContext<AriaMenulistElement>(\n  Symbol('ancestorMenulistContext'),\n);\n\n// `focus` is defined on `HTMLElement` and `SVGElement` directly, not `Element`.\ninterface MaybeFocusableElement extends Element {\n  focus?: HTMLElement['focus'];\n}\n\nconst baseClass = mixinElementInternals(LitElement);\n\n/**\n * An element implementing the proposed `<menulist>` built-in element.\n */\nexport class AriaMenulistElement extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    css`\n      /* Unset UA |[popover]| styles. */\n      @layer {\n        :host([popover]) {\n          position: unset;\n          width: unset;\n          height: unset;\n          color: unset;\n          background-color: unset;\n          inset: unset;\n          margin: unset;\n          border: unset;\n          border-image: unset;\n          padding: unset;\n          overflow: unset;\n        }\n\n        :host([popover]:popover-open) {\n          display: unset;\n          overlay: unset;\n        }\n      }\n\n      :host {\n        display: block;\n        position: fixed;\n        width: max-content;\n        max-block-size: stretch;\n        color: canvastext;\n        background-color: canvas;\n        margin: 0px;\n        inset: auto;\n        overflow: auto;\n        border: 1px solid currentColor;\n        border-image: none;\n        padding: 0.25em;\n\n        /* This should really only apply when the implicit anchor is a menuitem\n         * in a menubar, but applies to buttons too? */\n        position-area: block-end span-inline-end;\n      }\n\n      :host(:not(:popover-open)) {\n        display: none;\n      }\n\n      ::slotted(md-aria-menuitem) {\n        display: flex;\n        align-items: center;\n        user-select: none;\n        min-inline-size: 24px;\n        min-block-size: max(24px, 1lh);\n        font-weight: inherit;\n        gap: 0.5em;\n        padding-inline: 0.5em;\n      }\n\n      ::slotted(md-aria-menuitem:state(enabled):hover) {\n        background-color: color-mix(in lab, currentColor 10%, transparent);\n      }\n\n      ::slotted(md-aria-menuitem:state(disabled)) {\n        color: color-mix(in lab, currentColor 50%, transparent);\n      }\n\n      ::slotted(hr) {\n        color: inherit;\n        margin-inline: 0px;\n        border: none;\n        border-block-start: 1px solid currentColor;\n        border-image: none;\n      }\n\n      ::slotted(a:any-link),\n      ::slotted(img[usemap]) {\n        display: none;\n      }\n    `,\n  ];\n\n  @property({reflect: true})\n  override popover = 'auto';\n\n  @property({reflect: true})\n  focusGroup = 'menu';\n\n  constructor() {\n    super();\n\n    const provider = new ContextProvider(this, {\n      context: ancestorMenulistContext,\n    });\n    provider.setValue(this);\n\n    this[internals].role = 'menu';\n    this[internals].ariaOrientation = 'vertical';\n    this.addEventListener('toggle', this.handleToggle.bind(this));\n    this.addEventListener('focusout', this.handleFocusout.bind(this));\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n\n  private opener: MaybeFocusableElement | null = null;\n\n  private handleToggle(event: ToggleEvent) {\n    if (event.newState === 'open') {\n      this.opener = event.source as MaybeFocusableElement | null;\n    } else if (event.newState === 'closed' && this.matches(':focus-within')) {\n      // When closing, restore focus if focus remained in the menulist (e.g.\n      // during _keyboard_ light dismiss).\n      this.opener?.focus?.();\n    }\n  }\n\n  private handleFocusout() {\n    if (!this.matches(':focus-within')) {\n      this.hidePopover();\n    }\n  }\n}\n"]}

package/labs/aria/query-associated.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Queries for an associated element with the given ID that is in the same root
+ * as the given element.
+ *
+ * @param element The element to query from.
+ * @param id The ID of the associated element to query for.
+ * @return The associated element with the given ID, or null if not found.
+ */
+export declare function queryAssociatedById(element: Element, id: string): Element | null;
+/**
+ * Queries for one or more associated elements that match the given
+ * space-separated ID string that are in the same root as the given element.
+ *
+ * @param element The element to query from.
+ * @param ids The space-separated IDs of the associated elements to query for.
+ * @return An array of associated elements with the given IDs.
+ */
+export declare function queryAssociatedByIds(element: Element, ids: string): Element[];