@material/web 2.5.1-nightly.56a486b.0 → 2.5.1-nightly.703aed2.0

package/labs/aria/menu/menubar.js

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, css, html } from 'lit';
+import { internals, mixinElementInternals, } from '../../behaviors/element-internals.js';
+import { sharedSlottedContentStyles } from './shared-slotted-content.js';
+const baseClass = mixinElementInternals(LitElement);
+/** An element implementing the proposed `<menubar>` built-in element. */
+export class AriaMenubarElement extends baseClass {
+    constructor() {
+        super();
+        this[internals].role = 'menubar';
+        this[internals].ariaOrientation = 'horizontal';
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!this.hasAttribute('focusgroup')) {
+            this.setAttribute('focusgroup', 'menubar');
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+AriaMenubarElement.styles = [
+    css `
+      :host {
+        display: inline-flex;
+        flex-direction: row;
+        width: max-content;
+        background-color: transparent;
+        gap: 0.5em;
+        border-width: 1px;
+        border-style: solid;
+        border-color: currentcolor;
+        border-image: none;
+        border-radius: 0.25em;
+        padding: 0.25em;
+      }
+    `,
+    sharedSlottedContentStyles,
+];
+//# sourceMappingURL=menubar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","sourceRoot":"","sources":["menubar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAoB,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC7E,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAC,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAEvE,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD,yEAAyE;AACzE,MAAM,OAAO,kBAAmB,SAAQ,SAAS;IAoB/C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,CAAC,eAAe,GAAG,YAAY,CAAC;IACjD,CAAC;IAEkB,OAAO,CAAC,iBAAuC;QAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAnCe,yBAAM,GAAwB;IAC5C,GAAG,CAAA;;;;;;;;;;;;;;KAcF;IACD,0BAA0B;CAC3B,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative, LitElement, PropertyValues, css, html} from 'lit';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {sharedSlottedContentStyles} from './shared-slotted-content.js';\n\nconst baseClass = mixinElementInternals(LitElement);\n\n/** An element implementing the proposed `<menubar>` built-in element. */\nexport class AriaMenubarElement extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    css`\n      :host {\n        display: inline-flex;\n        flex-direction: row;\n        width: max-content;\n        background-color: transparent;\n        gap: 0.5em;\n        border-width: 1px;\n        border-style: solid;\n        border-color: currentcolor;\n        border-image: none;\n        border-radius: 0.25em;\n        padding: 0.25em;\n      }\n    `,\n    sharedSlottedContentStyles,\n  ];\n\n  constructor() {\n    super();\n    this[internals].role = 'menubar';\n    this[internals].ariaOrientation = 'horizontal';\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.hasAttribute('focusgroup')) {\n      this.setAttribute('focusgroup', 'menubar');\n    }\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

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

@@ -4,23 +4,56 @@
  * 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;
+import { setCheckedness, updateUsedValues } from './internal.js';
 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.
  *
+ * @fires {Event} checked - Fired when the item is checked or unchecked.
  * @cssstate enabled - True when the item is enabled.
  * @cssstate disabled - True when the item is disabled.
+ * @cssstate checked - True when the item is checked.
  */
 export declare class AriaMenuitemElement extends baseClass {
     static styles: CSSResultOrNative[];
-    [ancestorMenulist]?: AriaMenulistElement;
+    private internalDisabled;
+    private checkedness;
+    private dirtyCheckedness;
+    private internalDefaultChecked;
+    private cachedAncestorMenulist;
+    private cachedAncestorFieldset;
+    private get usedCheckable();
+    private get usedDisabled();
+    /**
+     * Recomputes this element's used `disabled` and `checkable` values and
+     * projects them onto its ARIA attributes and custom states.
+     *
+     * `<md-aria-fieldset>` calls this on its items when a value they inherit from
+     * it changes.
+     */
+    [updateUsedValues](): void;
+    private resetAncestorElementCache;
+    /**
+     * Sets this element's checkedness directly, without running the rest of the
+     * 'check a menuitem element' steps.
+     *
+     * `<md-aria-fieldset>` calls this to reset the items excluded by a newly
+     * checked item.
+     *
+     * @param value The new checkedness.
+     */
+    [setCheckedness](value: boolean): void;
+    private checkAMenuitemElement;
     get disabled(): boolean;
     set disabled(value: boolean);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
     constructor();
     render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     click(): void;
 }
 export {};

package/labs/aria/menu/menuitem.js

@@ -3,9 +3,7 @@
  * 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';
@@ -13,32 +11,150 @@ import { mixinCustomStateSet, toggleState, } from '../../behaviors/custom-state-
 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');
+import { resetMenuitemCheckedness, setCheckedness, updateUsedValues, } from './internal.js';
 const baseClass = mixinCustomStateSet(mixinFocusable(mixinElementInternals(LitElement)));
 /**
  * An element implementing the proposed `<menuitem>` built-in element.
  *
+ * @fires {Event} checked - Fired when the item is checked or unchecked.
  * @cssstate enabled - True when the item is enabled.
  * @cssstate disabled - True when the item is disabled.
+ * @cssstate checked - True when the item is checked.
  */
 export class AriaMenuitemElement extends baseClass {
+    get usedCheckable() {
+        if (this.cachedAncestorMenulist === null ||
+            this.cachedAncestorFieldset === null) {
+            return null;
+        }
+        return this.cachedAncestorFieldset.checkable;
+    }
+    get usedDisabled() {
+        return this.cachedAncestorFieldset?.disabled || this.internalDisabled;
+    }
+    /**
+     * Recomputes this element's used `disabled` and `checkable` values and
+     * projects them onto its ARIA attributes and custom states.
+     *
+     * `<md-aria-fieldset>` calls this on its items when a value they inherit from
+     * it changes.
+     */
+    [updateUsedValues]() {
+        const usedDisabled = this.usedDisabled;
+        this[internals].ariaDisabled = String(usedDisabled);
+        this[toggleState]('disabled', usedDisabled);
+        this[toggleState]('enabled', !usedDisabled);
+        const usedCheckable = this.usedCheckable;
+        switch (usedCheckable) {
+            case null:
+                this[internals].role = 'menuitem';
+                this[toggleState]('_checkable', false);
+                break;
+            case 'single':
+                this[internals].role = 'menuitemradio';
+                this[toggleState]('_checkable', true);
+                break;
+            case 'multiple':
+            default:
+                this[internals].role = 'menuitemcheckbox';
+                this[toggleState]('_checkable', true);
+                break;
+        }
+        const usedChecked = usedCheckable !== null ? this.checkedness : null;
+        if (usedChecked === null) {
+            this[internals].ariaChecked = null;
+            this[toggleState]('checked', false);
+        }
+        else {
+            this[internals].ariaChecked = String(usedChecked);
+            this[toggleState]('checked', usedChecked);
+        }
+    }
+    resetAncestorElementCache() {
+        this.cachedAncestorMenulist = null;
+        this.cachedAncestorFieldset = null;
+        for (let node = this.parentNode; node instanceof HTMLElement; node = node.parentNode) {
+            if (node.localName === 'md-aria-menulist') {
+                this.cachedAncestorMenulist = node;
+                break;
+            }
+            if (node.localName === 'md-aria-fieldset') {
+                this.cachedAncestorFieldset = node;
+            }
+        }
+        this[updateUsedValues]();
+    }
+    /**
+     * Sets this element's checkedness directly, without running the rest of the
+     * 'check a menuitem element' steps.
+     *
+     * `<md-aria-fieldset>` calls this to reset the items excluded by a newly
+     * checked item.
+     *
+     * @param value The new checkedness.
+     */
+    [setCheckedness](value) {
+        this.checkedness = value;
+        this[updateUsedValues]();
+    }
+    checkAMenuitemElement(isChecked, fireEvents) {
+        if (this.usedCheckable === null) {
+            // TODO: Handle the invoked submenu.
+            return 'close-menulist';
+        }
+        this[setCheckedness](isChecked);
+        this.dirtyCheckedness = true;
+        if (fireEvents) {
+            this.dispatchEvent(new Event('checked'));
+        }
+        if (this.checkedness && this.usedCheckable === 'single') {
+            this.cachedAncestorFieldset?.[resetMenuitemCheckedness](this);
+        }
+        return this.usedCheckable === 'single' ? 'close-menulist' : 'stay-open';
+    }
     get disabled() {
-        return this[internals].ariaDisabled === 'true';
+        return this.internalDisabled;
     }
     set disabled(value) {
-        const oldValue = this.disabled;
         value = Boolean(value);
-        this[internals].ariaDisabled = String(value);
-        this[toggleState]('disabled', value);
-        this[toggleState]('enabled', !value);
+        const oldValue = this.internalDisabled;
+        this.internalDisabled = value;
+        this[updateUsedValues]();
         this.requestUpdate('disabled', oldValue);
     }
+    get checked() {
+        return this.checkedness;
+    }
+    set checked(value) {
+        this.checkAMenuitemElement(value, false);
+    }
+    get defaultChecked() {
+        return this.internalDefaultChecked;
+    }
+    set defaultChecked(value) {
+        value = Boolean(value);
+        const oldValue = this.internalDefaultChecked;
+        this.internalDefaultChecked = value;
+        if (!this.dirtyCheckedness) {
+            // The proposed spec DOES NOT call into the full 'check a menuitem
+            // element' steps - it only sets checkedness - but this seems like the
+            // only reasonable behavior when the element is part of a single-checkable
+            // fieldset. Otherwise, multiple elements with `defaultchecked` could
+            // become checked.
+            this.checkAMenuitemElement(value, false);
+            this.dirtyCheckedness = false;
+        }
+        this.requestUpdate('defaultChecked', oldValue);
+    }
     constructor() {
         super();
-        this[internals].role = 'menuitem';
-        this.disabled = false;
+        this.internalDisabled = false;
+        this.checkedness = false;
+        this.dirtyCheckedness = false;
+        this.internalDefaultChecked = false;
+        this.cachedAncestorMenulist = null;
+        this.cachedAncestorFieldset = null;
+        this[updateUsedValues]();
         setupDispatchHooks(this, 'keydown', 'click');
         this.addEventListener('keydown', (event) => {
             afterDispatch(event, () => {
@@ -52,35 +168,70 @@ export class AriaMenuitemElement extends baseClass {
         });
         this.addEventListener('click', (event) => {
             afterDispatch(event, () => {
-                if (event.defaultPrevented || this.disabled) {
+                if (event.defaultPrevented || this.usedDisabled) {
                     return;
                 }
-                this[ancestorMenulist]?.hidePopover();
+                const newChecked = !this.checkedness;
+                const closeBehavior = this.checkAMenuitemElement(newChecked, true);
+                // TODO: Handle the invoked submenu.
+                if (closeBehavior === 'close-menulist') {
+                    // TODO: This should be the 'outermost containing menulist', not just
+                    // the cached ancestor menulist.
+                    this.cachedAncestorMenulist?.hidePopover();
+                }
                 sharedCommandInvokerActivationSteps(this, event);
             });
         });
     }
     render() {
-        return html `<slot></slot>`;
+        return html `<span part="checkmark"></span><slot></slot>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.resetAncestorElementCache();
+        if (this.internalDefaultChecked && !this.dirtyCheckedness) {
+            this.checkAMenuitemElement(true, false);
+            this.dirtyCheckedness = false;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resetAncestorElementCache();
     }
     click() {
-        if (!this.disabled) {
+        if (!this.usedDisabled) {
             super.click();
         }
     }
 }
-_a = ancestorMenulist;
 AriaMenuitemElement.styles = [
     css `
       :host {
         display: inline-flex;
       }
+
+      [part='checkmark'] {
+        &::before {
+          content: '\\2713' / '';
+        }
+
+        :host(:not(:state(_checkable))) & {
+          display: none;
+        }
+
+        :host(:not(:state(checked))) & {
+          visibility: hidden;
+        }
+      }
     `,
 ];
 __decorate([
-    consume({ context: ancestorMenulistContext, subscribe: true })
-], AriaMenuitemElement.prototype, _a, void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, noAccessor: true })
+    property({ type: Boolean, reflect: true })
 ], AriaMenuitemElement.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], AriaMenuitemElement.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AriaMenuitemElement.prototype, "defaultChecked", null);
 //# sourceMappingURL=menuitem.js.map

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

@@ -1 +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"]}
+{"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 {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 type {AriaFieldsetElement, CheckableState} from './fieldset.js';\nimport {\n  resetMenuitemCheckedness,\n  setCheckedness,\n  updateUsedValues,\n} from './internal.js';\nimport type {AriaMenulistElement} from './menulist.js';\n\nconst baseClass = mixinCustomStateSet(\n  mixinFocusable(mixinElementInternals(LitElement)),\n);\n\n/**\n * An element implementing the proposed `<menuitem>` built-in element.\n *\n * @fires {Event} checked - Fired when the item is checked or unchecked.\n * @cssstate enabled - True when the item is enabled.\n * @cssstate disabled - True when the item is disabled.\n * @cssstate checked - True when the item is checked.\n */\nexport class AriaMenuitemElement extends baseClass {\n  static override styles: CSSResultOrNative[] = [\n    css`\n      :host {\n        display: inline-flex;\n      }\n\n      [part='checkmark'] {\n        &::before {\n          content: '\\\\2713' / '';\n        }\n\n        :host(:not(:state(_checkable))) & {\n          display: none;\n        }\n\n        :host(:not(:state(checked))) & {\n          visibility: hidden;\n        }\n      }\n    `,\n  ];\n\n  private internalDisabled = false;\n  private checkedness = false;\n  private dirtyCheckedness = false;\n  private internalDefaultChecked = false;\n  private cachedAncestorMenulist: AriaMenulistElement | null = null;\n  private cachedAncestorFieldset: AriaFieldsetElement | null = null;\n\n  private get usedCheckable(): CheckableState {\n    if (\n      this.cachedAncestorMenulist === null ||\n      this.cachedAncestorFieldset === null\n    ) {\n      return null;\n    }\n\n    return this.cachedAncestorFieldset.checkable;\n  }\n\n  private get usedDisabled(): boolean {\n    return this.cachedAncestorFieldset?.disabled || this.internalDisabled;\n  }\n\n  /**\n   * Recomputes this element's used `disabled` and `checkable` values and\n   * projects them onto its ARIA attributes and custom states.\n   *\n   * `<md-aria-fieldset>` calls this on its items when a value they inherit from\n   * it changes.\n   */\n  [updateUsedValues]() {\n    const usedDisabled = this.usedDisabled;\n    this[internals].ariaDisabled = String(usedDisabled);\n    this[toggleState]('disabled', usedDisabled);\n    this[toggleState]('enabled', !usedDisabled);\n\n    const usedCheckable = this.usedCheckable;\n    switch (usedCheckable) {\n      case null:\n        this[internals].role = 'menuitem';\n        this[toggleState]('_checkable', false);\n        break;\n      case 'single':\n        this[internals].role = 'menuitemradio';\n        this[toggleState]('_checkable', true);\n        break;\n      case 'multiple':\n      default:\n        this[internals].role = 'menuitemcheckbox';\n        this[toggleState]('_checkable', true);\n        break;\n    }\n\n    const usedChecked: boolean | null =\n      usedCheckable !== null ? this.checkedness : null;\n    if (usedChecked === null) {\n      this[internals].ariaChecked = null;\n      this[toggleState]('checked', false);\n    } else {\n      this[internals].ariaChecked = String(usedChecked);\n      this[toggleState]('checked', usedChecked);\n    }\n  }\n\n  private resetAncestorElementCache() {\n    this.cachedAncestorMenulist = null;\n    this.cachedAncestorFieldset = null;\n\n    for (\n      let node = this.parentNode;\n      node instanceof HTMLElement;\n      node = node.parentNode\n    ) {\n      if (node.localName === 'md-aria-menulist') {\n        this.cachedAncestorMenulist = node as AriaMenulistElement;\n        break;\n      }\n\n      if (node.localName === 'md-aria-fieldset') {\n        this.cachedAncestorFieldset = node as AriaFieldsetElement;\n      }\n    }\n\n    this[updateUsedValues]();\n  }\n\n  /**\n   * Sets this element's checkedness directly, without running the rest of the\n   * 'check a menuitem element' steps.\n   *\n   * `<md-aria-fieldset>` calls this to reset the items excluded by a newly\n   * checked item.\n   *\n   * @param value The new checkedness.\n   */\n  [setCheckedness](value: boolean) {\n    this.checkedness = value;\n    this[updateUsedValues]();\n  }\n\n  private checkAMenuitemElement(\n    isChecked: boolean,\n    fireEvents: boolean,\n  ): 'close-menulist' | 'stay-open' {\n    if (this.usedCheckable === null) {\n      // TODO: Handle the invoked submenu.\n      return 'close-menulist';\n    }\n\n    this[setCheckedness](isChecked);\n    this.dirtyCheckedness = true;\n\n    if (fireEvents) {\n      this.dispatchEvent(new Event('checked'));\n    }\n\n    if (this.checkedness && this.usedCheckable === 'single') {\n      this.cachedAncestorFieldset?.[resetMenuitemCheckedness](this);\n    }\n\n    return this.usedCheckable === 'single' ? 'close-menulist' : 'stay-open';\n  }\n\n  @property({type: Boolean, reflect: true})\n  get disabled() {\n    return this.internalDisabled;\n  }\n  set disabled(value: boolean) {\n    value = Boolean(value);\n    const oldValue = this.internalDisabled;\n\n    this.internalDisabled = value;\n    this[updateUsedValues]();\n\n    this.requestUpdate('disabled', oldValue);\n  }\n\n  @property({type: Boolean, attribute: false})\n  get checked(): boolean {\n    return this.checkedness;\n  }\n  set checked(value: boolean) {\n    this.checkAMenuitemElement(value, false);\n  }\n\n  @property({type: Boolean, reflect: true})\n  get defaultChecked(): boolean {\n    return this.internalDefaultChecked;\n  }\n  set defaultChecked(value: boolean) {\n    value = Boolean(value);\n    const oldValue = this.internalDefaultChecked;\n\n    this.internalDefaultChecked = value;\n\n    if (!this.dirtyCheckedness) {\n      // The proposed spec DOES NOT call into the full 'check a menuitem\n      // element' steps - it only sets checkedness - but this seems like the\n      // only reasonable behavior when the element is part of a single-checkable\n      // fieldset. Otherwise, multiple elements with `defaultchecked` could\n      // become checked.\n      this.checkAMenuitemElement(value, false);\n      this.dirtyCheckedness = false;\n    }\n\n    this.requestUpdate('defaultChecked', oldValue);\n  }\n\n  constructor() {\n    super();\n    this[updateUsedValues]();\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.usedDisabled) {\n          return;\n        }\n\n        const newChecked = !this.checkedness;\n\n        const closeBehavior = this.checkAMenuitemElement(newChecked, true);\n\n        // TODO: Handle the invoked submenu.\n\n        if (closeBehavior === 'close-menulist') {\n          // TODO: This should be the 'outermost containing menulist', not just\n          // the cached ancestor menulist.\n          this.cachedAncestorMenulist?.hidePopover();\n        }\n\n        sharedCommandInvokerActivationSteps(this, event);\n      });\n    });\n  }\n\n  override render() {\n    return html`<span part=\"checkmark\"></span><slot></slot>`;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.resetAncestorElementCache();\n\n    if (this.internalDefaultChecked && !this.dirtyCheckedness) {\n      this.checkAMenuitemElement(true, false);\n      this.dirtyCheckedness = false;\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resetAncestorElementCache();\n  }\n\n  override click() {\n    if (!this.usedDisabled) {\n      super.click();\n    }\n  }\n}\n"]}

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

@@ -3,11 +3,7 @@
  * 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;
-};
+import { CSSResultOrNative, LitElement, PropertyValues } from 'lit';
 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.
@@ -15,8 +11,8 @@ declare const baseClass: import("../../behaviors/mixin.js").MixinReturn<typeof L
 export declare class AriaMenulistElement extends baseClass {
     static styles: CSSResultOrNative[];
     popover: string;
-    focusGroup: string;
     constructor();
+    protected updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     private opener;
     private handleToggle;

package/labs/aria/menu/menulist.js

@@ -5,12 +5,10 @@
  */
 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'));
+import { sharedSlottedContentStyles } from './shared-slotted-content.js';
 const baseClass = mixinElementInternals(LitElement);
 /**
  * An element implementing the proposed `<menulist>` built-in element.
@@ -19,17 +17,18 @@ 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));
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!this.hasAttribute('focusgroup')) {
+            this.setAttribute('focusgroup', 'menu');
+        }
+    }
     render() {
         return html `<slot></slot>`;
     }
@@ -50,6 +49,7 @@ export class AriaMenulistElement extends baseClass {
     }
 }
 AriaMenulistElement.styles = [
+    sharedSlottedContentStyles,
     css `
       /* Unset UA |[popover]| styles. */
       @layer {
@@ -86,53 +86,19 @@ AriaMenulistElement.styles = [
         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;
+        position-try-fallbacks:
+          flip-block,
+          flip-inline,
+          flip-block flip-inline;
       }
 
       :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

@@ -1 +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"]}
+{"version":3,"file":"menulist.js","sourceRoot":"","sources":["menulist.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,qDAAqD;AAErD,OAAO,EAAoB,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EACL,SAAS,EACT,qBAAqB,GACtB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAC,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAOvE,MAAM,SAAS,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,SAAS;IAuDhD;QACE,KAAK,EAAE,CAAC;QAHD,YAAO,GAAG,MAAM,CAAC;QAsBlB,WAAM,GAAiC,IAAI,CAAC;QAlBlD,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;IAEkB,OAAO,CAAC,iBAAuC;QAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QAC1C,CAAC;IACH,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;;AA1Fe,0BAAM,GAAwB;IAC5C,0BAA0B;IAC1B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CF;CACF,AAjDqB,CAiDpB;AAGO;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oDACA","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 {CSSResultOrNative, LitElement, PropertyValues, css, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../behaviors/element-internals.js';\nimport {sharedSlottedContentStyles} from './shared-slotted-content.js';\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    sharedSlottedContentStyles,\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        position-area: block-end span-inline-end;\n        position-try-fallbacks:\n          flip-block,\n          flip-inline,\n          flip-block flip-inline;\n      }\n\n      :host(:not(:popover-open)) {\n        display: none;\n      }\n    `,\n  ];\n\n  @property({reflect: true})\n  override popover = 'auto';\n\n  constructor() {\n    super();\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  protected override updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.hasAttribute('focusgroup')) {\n      this.setAttribute('focusgroup', 'menu');\n    }\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/menu/shared-slotted-content.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Shared styles used by `<md-aria-menulist>` and `<md-aria-fieldset>`, to
+ * simulate the descendant combinator in UA styles for `<menuitem>`.
+ */
+export declare const sharedSlottedContentStyles: import("lit").CSSResult;

package/labs/aria/menu/shared-slotted-content.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { css } from 'lit';
+/**
+ * Shared styles used by `<md-aria-menulist>` and `<md-aria-fieldset>`, to
+ * simulate the descendant combinator in UA styles for `<menuitem>`.
+ */
+export const sharedSlottedContentStyles = css `
+  ::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(md-aria-fieldset) {
+    margin-inline: 0;
+    border: none;
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  ::slotted(hr) {
+    color: inherit;
+    margin-inline: 0;
+    border: none;
+    border-block-start: 1px solid currentColor;
+    border-image: none;
+  }
+
+  ::slotted(a:any-link),
+  ::slotted(img[usemap]) {
+    display: none;
+  }
+`;
+//# sourceMappingURL=shared-slotted-content.js.map

package/labs/aria/menu/shared-slotted-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-slotted-content.js","sourceRoot":"","sources":["shared-slotted-content.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC5C,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {css} from 'lit';\n\n/**\n * Shared styles used by `<md-aria-menulist>` and `<md-aria-fieldset>`, to\n * simulate the descendant combinator in UA styles for `<menuitem>`.\n */\nexport const sharedSlottedContentStyles = css`\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(md-aria-fieldset) {\n    margin-inline: 0;\n    border: none;\n    padding-block: 0;\n    padding-inline: 0;\n  }\n\n  ::slotted(hr) {\n    color: inherit;\n    margin-inline: 0;\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"]}

package/labs/aria/pseudo-classes.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Returns whether the element is disabled.
+ *
+ * Checks if the element matches any of the following:
+ * - `.disabled` class
+ * - `:disabled` pseudo-class
+ * - `:state(disabled)` pseudo-class
+ * - `[disabled]` attribute
+ * - `[aria-disabled=true]` attribute
+ *
+ * @param element The element to check.
+ * @return true if the element is disabled.
+ */
+export declare function isDisabled(element: Element): boolean;