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 defaultchecked>Item 1</md-aria-menuitem>
+          <md-aria-menuitem defaultchecked>Item 2</md-aria-menuitem>
+          <md-aria-menuitem defaultchecked>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 defaultchecked>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 defaultchecked>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 defaultchecked>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,90 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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';
+
+declare global {
+  interface HTMLElementEventMap {
+    'checkable-changed': CustomEvent<{value: 'single' | 'multiple' | null}>;
+    'disabled-changed': CustomEvent<{value: boolean}>;
+  }
+}
+
+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;
+      }
+    `,
+  ];
+
+  private internalCheckable: 'single' | 'multiple' | null = null;
+  private internalDisabled = false;
+
+  /**
+   * Whether or not menuitems in this fieldset are checkable, and if they are
+   * exclusively checkable.
+   */
+  @property({type: String, reflect: true})
+  get checkable(): 'single' | 'multiple' | null {
+    return this.internalCheckable;
+  }
+  set checkable(value: 'single' | 'multiple' | null) {
+    if (value === this.internalCheckable) {
+      return;
+    }
+
+    const oldValue = this.internalCheckable;
+    this.internalCheckable = value;
+    this.dispatchEvent(new CustomEvent('checkable-changed', {detail: {value}}));
+    this.requestUpdate('checkable', oldValue);
+  }
+
+  /**
+   * Whether or not menuitems in this fieldset are disabled.
+   */
+  @property({type: Boolean, reflect: true})
+  get disabled(): boolean {
+    return this.internalDisabled;
+  }
+  set disabled(value: boolean) {
+    if (value === this.internalDisabled) {
+      return;
+    }
+
+    const oldValue = this.internalDisabled;
+    this.internalDisabled = value;
+    this.dispatchEvent(new CustomEvent('disabled-changed', {detail: {value}}));
+    this.requestUpdate('disabled', oldValue);
+  }
+
+  constructor() {
+    super();
+    this[internals].role = 'group';
+  }
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}