feat(labs): add fieldset and menuitem checkedness support

labs/aria/menu/demo/stories.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '@material/web/labs/aria/menu/md-aria-fieldset.js';
 import '@material/web/labs/aria/menu/md-aria-menuitem.js';
 import '@material/web/labs/aria/menu/md-aria-menulist.js';
 
@@ -91,4 +92,138 @@ const menuWithPopover: MaterialStoryInit<StoryKnobs> = {
   },
 };
 
-export const stories = [menu, menuWithDialog, menuWithPopover];
+const menuWithFieldset: MaterialStoryInit<StoryKnobs> = {
+  name: 'Menu with fieldset, not checkable',
+  styles: css``,
+  render(knobs) {
+    return html`
+      <button popovertarget="the-menu">Menu</button>
+      <md-aria-menulist id="the-menu">
+        <md-aria-fieldset>
+          <md-aria-menuitem autofocus>Item 1</md-aria-menuitem>
+          <md-aria-menuitem>Item 2</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 3</md-aria-menuitem>
+        </md-aria-fieldset>
+      </md-aria-menulist>
+    `;
+  },
+};
+
+const menuWithFieldsetSingleCheckable: MaterialStoryInit<StoryKnobs> = {
+  name: 'Menu with fieldset, single-checkable',
+  styles: css``,
+  render(knobs) {
+    return html`
+      <button popovertarget="the-menu">Menu</button>
+      <md-aria-menulist id="the-menu">
+        <md-aria-fieldset checkable="single">
+          <md-aria-menuitem autofocus>Item 1</md-aria-menuitem>
+          <md-aria-menuitem>Item 2</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 3</md-aria-menuitem>
+        </md-aria-fieldset>
+      </md-aria-menulist>
+    `;
+  },
+};
+
+const menuWithFieldsetMultipleCheckable: MaterialStoryInit<StoryKnobs> = {
+  name: 'Menu with fieldset, multiple-checkable',
+  styles: css``,
+  render(knobs) {
+    return html`
+      <button popovertarget="the-menu">Menu</button>
+      <md-aria-menulist id="the-menu">
+        <md-aria-fieldset checkable="multiple">
+          <md-aria-menuitem autofocus>Item 1</md-aria-menuitem>
+          <md-aria-menuitem>Item 2</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 3</md-aria-menuitem>
+        </md-aria-fieldset>
+      </md-aria-menulist>
+    `;
+  },
+};
+
+const menuWithFieldsetDisabled: MaterialStoryInit<StoryKnobs> = {
+  name: 'Menu with disabled fieldset',
+  styles: css``,
+  render(knobs) {
+    return html`
+      <button popovertarget="the-menu">Menu</button>
+      <md-aria-menulist id="the-menu">
+        <md-aria-fieldset checkable="multiple" disabled>
+          <md-aria-menuitem autofocus>Item 1</md-aria-menuitem>
+          <md-aria-menuitem>Item 2</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 3</md-aria-menuitem>
+        </md-aria-fieldset>
+      </md-aria-menulist>
+    `;
+  },
+};
+
+const menuWithMultipleFieldsetsCheckable: MaterialStoryInit<StoryKnobs> = {
+  name: 'Menu with multiple fieldsets, single- and multiple-checkable',
+  styles: css``,
+  render(knobs) {
+    return html`
+      <button popovertarget="the-menu">Menu</button>
+      <md-aria-menulist id="the-menu">
+        <md-aria-fieldset checkable="single">
+          <md-aria-menuitem autofocus>Item 1</md-aria-menuitem>
+          <md-aria-menuitem>Item 2</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 3</md-aria-menuitem>
+        </md-aria-fieldset>
+        <hr />
+        <md-aria-fieldset checkable="multiple">
+          <md-aria-menuitem autofocus>Item 4</md-aria-menuitem>
+          <md-aria-menuitem>Item 5</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 6</md-aria-menuitem>
+        </md-aria-fieldset>
+      </md-aria-menulist>
+    `;
+  },
+};
+
+const menuWithStyles: MaterialStoryInit<StoryKnobs> = {
+  name: 'Menu with styles',
+  styles: css`
+    md-aria-menuitem:state(enabled) {
+      color: blue;
+    }
+
+    md-aria-menuitem:state(disabled) {
+      font-style: italic;
+    }
+
+    md-aria-menuitem:state(checked) {
+      color: green;
+    }
+
+    md-aria-menuitem::part(checkmark)::before {
+      content: '\\25B8'; /* &rtrif; */
+    }
+  `,
+  render(knobs) {
+    return html`
+      <button popovertarget="the-menu">Menu</button>
+      <md-aria-menulist id="the-menu">
+        <md-aria-fieldset checkable="multiple">
+          <md-aria-menuitem autofocus>Item 1</md-aria-menuitem>
+          <md-aria-menuitem>Item 2</md-aria-menuitem>
+          <md-aria-menuitem disabled>Item 3</md-aria-menuitem>
+        </md-aria-fieldset>
+      </md-aria-menulist>
+    `;
+  },
+};
+
+export const stories = [
+  menu,
+  menuWithDialog,
+  menuWithPopover,
+  menuWithFieldset,
+  menuWithFieldsetSingleCheckable,
+  menuWithFieldsetMultipleCheckable,
+  menuWithFieldsetDisabled,
+  menuWithMultipleFieldsetsCheckable,
+  menuWithStyles,
+];

labs/aria/menu/fieldset.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {createContext, provide} from '@lit/context';
+import {CSSResultOrNative, LitElement, css, html} from 'lit';
+import {property} from 'lit/decorators.js';
+import {
+  internals,
+  mixinElementInternals,
+} from '../../behaviors/element-internals.js';
+import {sharedSlottedContentStyles} from './shared-slotted-content.js';
+
+/**
+ * The `<md-aria-fieldset>` that should own descendant `<md-aria-menuitem>`s.
+ */
+export const ancestorFieldsetContext = createContext<
+  AriaFieldsetElement | undefined
+>(Symbol('ancestorFieldsetContext'));
+
+/**
+ * `checkable` state of this `<md-aria-fieldset>`, for use by owned
+ * `<md-aria-menuitem>`s.
+ */
+export const checkableContext = createContext<'single' | 'multiple' | null>(
+  Symbol('checkableContext'),
+);
+
+/**
+ * `disabled` state of this `<md-aria-fieldset>`, for use by owned
+ * `<md-aria-menuitem>`s.
+ */
+export const disabledContext = createContext<boolean | null>(
+  Symbol('disabledContext'),
+);
+
+/** Private property key for the `ancestorFieldset` context. */
+const ancestorFieldset = Symbol('ancestorFieldset');
+
+const baseClass = mixinElementInternals(LitElement);
+
+/**
+ * An element implementing the proposed menu behavior of `<fieldset>`.
+ */
+export class AriaFieldsetElement extends baseClass {
+  static override styles: CSSResultOrNative[] = [
+    sharedSlottedContentStyles,
+    css`
+      :host {
+        display: block;
+        margin-inline: 2px;
+        border: groove 2px ThreeDFace;
+        padding-block: 0.35em 0.625em;
+        padding-inline: 0.75em;
+        min-inline-size: min-content;
+      }
+    `,
+  ];
+
+  /** Used by decendant menuitems to retrieve other menuitems. */
+  @provide({context: ancestorFieldsetContext})
+  [ancestorFieldset] = this;
+
+  /**
+   * Whether or not menuitems in this fieldset are checkable, and if they are
+   * exclusively checkable.
+   *
+   * This property is provided as a separate context so that descendant
+   * menuitems will respond to changes to its value even when the containing
+   * fieldset does not change.
+   */
+  @provide({context: checkableContext})
+  @property({type: String, reflect: true})
+  checkable: 'single' | 'multiple' | null = null;
+
+  /**
+   * Whether or not menuitems in this fieldset are disabled.
+   *
+   * This property is provided as a separate context so that descendant
+   * menuitems will respond to changes to its value even when the containing
+   * fieldset does not change.
+   */
+  @provide({context: disabledContext})
+  @property({type: Boolean, reflect: true})
+  disabled = false;
+
+  constructor() {
+    super();
+    this[internals].role = 'group';
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}