@momentum-design/components 0.73.0 → 0.73.1

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts

@@ -1,6 +1,7 @@
 import type { CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import type { AriaCheckedStates, Indicator } from './menuitemcheckbox.types';
+import type { Indicator } from './menuitemcheckbox.types';
+import type { AriaCheckedStates } from '../menusection/menusection.types';
 /**
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -13,7 +13,8 @@ import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
 import { TOGGLE_SIZE } from '../toggle/toggle.constants';
-import { ARIA_CHECKED_STATES, DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
+import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
+import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 import styles from './menuitemcheckbox.styles';
 /**
  * A menuitemcheckbox component is a checkable menuitem.

package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.d.ts

@@ -1,8 +1,4 @@
 declare const TAG_NAME: "mdc-menuitemcheckbox";
-declare const ARIA_CHECKED_STATES: {
-    readonly FALSE: "false";
-    readonly TRUE: "true";
-};
 declare const INDICATOR: {
     readonly CHECKBOX: "checkbox";
     readonly CHECKMARK: "checkmark";
@@ -12,4 +8,4 @@ declare const DEFAULTS: {
     readonly ARIA_CHECKED: "false";
     readonly INDICATOR: "checkbox";
 };
-export { TAG_NAME, ARIA_CHECKED_STATES, INDICATOR, DEFAULTS };
+export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemcheckbox/menuitemcheckbox.constants.js

@@ -1,9 +1,6 @@
 import utils from '../../utils/tag-name';
+import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 const TAG_NAME = utils.constructTagName('menuitemcheckbox');
-const ARIA_CHECKED_STATES = {
-    FALSE: 'false',
-    TRUE: 'true',
-};
 const INDICATOR = {
     CHECKBOX: 'checkbox',
     CHECKMARK: 'checkmark',
@@ -13,4 +10,4 @@ const DEFAULTS = {
     ARIA_CHECKED: ARIA_CHECKED_STATES.FALSE,
     INDICATOR: INDICATOR.CHECKBOX,
 };
-export { TAG_NAME, ARIA_CHECKED_STATES, INDICATOR, DEFAULTS };
+export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemcheckbox/menuitemcheckbox.types.d.ts

@@ -1,10 +1,9 @@
 import { ValueOf } from '../../utils/types';
-import { ARIA_CHECKED_STATES, INDICATOR } from './menuitemcheckbox.constants';
-type AriaCheckedStates = ValueOf<typeof ARIA_CHECKED_STATES>;
+import { INDICATOR } from './menuitemcheckbox.constants';
 type Indicator = ValueOf<typeof INDICATOR>;
 interface Events {
     onChangeEvent: Event;
     onClickEvent: MouseEvent;
     onFocusEvent: FocusEvent;
 }
-export type { Events, AriaCheckedStates, Indicator };
+export type { Events, Indicator };

package/dist/components/menuitemradio/menuitemradio.component.d.ts

@@ -1,6 +1,6 @@
 import type { CSSResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import { AriaChecked } from './menuitemradio.types';
+import type { AriaCheckedStates } from '../menusection/menusection.types';
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * A menuitemradio should be checked only one at a time. <br/>
@@ -26,7 +26,7 @@ declare class MenuItemRadio extends MenuItem {
      * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
      * @default 'false'
      */
-    ariaChecked: AriaChecked;
+    ariaChecked: AriaCheckedStates;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
-import { ARIA_CHECKED_STATES } from './menuitemradio.constants';
+import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 /**
  * A menuitemradio component is a checkable menuitem that is used in a menu.
  * A menuitemradio should be checked only one at a time. <br/>

package/dist/components/menuitemradio/menuitemradio.constants.d.ts

@@ -1,6 +1,2 @@
 declare const TAG_NAME: "mdc-menuitemradio";
-declare const ARIA_CHECKED_STATES: {
-    readonly TRUE: "true";
-    readonly FALSE: "false";
-};
-export { TAG_NAME, ARIA_CHECKED_STATES };
+export { TAG_NAME };

package/dist/components/menuitemradio/menuitemradio.constants.js

@@ -1,7 +1,3 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menuitemradio');
-const ARIA_CHECKED_STATES = {
-    TRUE: 'true',
-    FALSE: 'false',
-};
-export { TAG_NAME, ARIA_CHECKED_STATES };
+export { TAG_NAME };

package/dist/components/menuitemradio/menuitemradio.types.d.ts

@@ -1,9 +1,6 @@
-import { ValueOf } from '../../utils/types';
-import { ARIA_CHECKED_STATES } from './menuitemradio.constants';
-type AriaChecked = ValueOf<typeof ARIA_CHECKED_STATES>;
 interface Events {
     onChangeEvent: Event;
     onClickEvent: MouseEvent;
     onFocusEvent: FocusEvent;
 }
-export type { Events, AriaChecked };
+export type { Events };

package/dist/components/menusection/index.d.ts

@@ -0,0 +1,7 @@
+import MenuSection from './menusection.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menusection']: MenuSection;
+    }
+}
+export default MenuSection;

package/dist/components/menusection/index.js

@@ -0,0 +1,4 @@
+import MenuSection from './menusection.component';
+import { TAG_NAME } from './menusection.constants';
+MenuSection.register(TAG_NAME);
+export default MenuSection;

package/dist/components/menusection/menusection.component.d.ts

@@ -0,0 +1,58 @@
+import { CSSResult } from 'lit';
+import type MenuItemRadio from '../menuitemradio/menuitemradio.component';
+import { Component } from '../../models';
+/**
+ * `mdc-menusection` is a container element used to group a set of menu items.
+ *
+ * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.
+ *
+ * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:
+ *   only one radio item can be selected at a time.
+ * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.
+ *
+ * @tagname mdc-menusection
+ *
+ * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ */
+declare class MenuSection extends Component {
+    /**
+     * Query assigned `menuitemradio` elements from the default slot.
+     * These elements are used to enforce single-selection behavior.
+     *
+     * @internal
+     */
+    radios: MenuItemRadio[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles `click` events within the component.
+     * Delegates logic to `toggleCheckedState()` based on the clicked element.
+     *
+     * @param event - The click event from a child menu item
+     *
+     * @internal
+     */
+    private handleClick;
+    /**
+     * Handles `keydown` events within the component.
+     * Activates menu items when the Enter or Space keys are pressed.
+     *
+     * @param event - The keyboard event from a child menu item
+     *
+     * @internal
+     */
+    private handleKeydown;
+    /**
+     * Toggles the `aria-checked` state on a target menu item based on its tag name.
+     * - For checkboxes, toggles the checked state.
+     * - For radios, ensures only one item is selected in the group.
+     *
+     * @param target - The event target element to update
+     *
+     * @internal
+     */
+    private toggleCheckedState;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: CSSResult[];
+}
+export default MenuSection;

package/dist/components/menusection/menusection.component.js

@@ -0,0 +1,115 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
+import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
+import { ARIA_CHECKED_STATES } from './menusection.constants';
+import { Component } from '../../models';
+import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
+/**
+ * `mdc-menusection` is a container element used to group a set of menu items.
+ *
+ * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.
+ *
+ * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:
+ *   only one radio item can be selected at a time.
+ * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.
+ *
+ * @tagname mdc-menusection
+ *
+ * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ */
+class MenuSection extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Handles `click` events within the component.
+         * Delegates logic to `toggleCheckedState()` based on the clicked element.
+         *
+         * @param event - The click event from a child menu item
+         *
+         * @internal
+         */
+        this.handleClick = (event) => {
+            this.toggleCheckedState(event.target);
+        };
+        /**
+         * Handles `keydown` events within the component.
+         * Activates menu items when the Enter or Space keys are pressed.
+         *
+         * @param event - The keyboard event from a child menu item
+         *
+         * @internal
+         */
+        this.handleKeydown = (event) => {
+            if (event.key !== KEYS.ENTER && event.key !== KEYS.SPACE)
+                return;
+            if (event.key === KEYS.SPACE) {
+                event.preventDefault(); // Prevent page scroll
+            }
+            this.toggleCheckedState(event.target);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', ROLE.GROUP);
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
+    /**
+     * Toggles the `aria-checked` state on a target menu item based on its tag name.
+     * - For checkboxes, toggles the checked state.
+     * - For radios, ensures only one item is selected in the group.
+     *
+     * @param target - The event target element to update
+     *
+     * @internal
+     */
+    toggleCheckedState(target) {
+        if (!(target instanceof HTMLElement))
+            return;
+        // Do not toggle state for disabled elements
+        if (target.hasAttribute('disabled'))
+            return;
+        const tagName = target.tagName.toLowerCase();
+        const currentChecked = target.getAttribute('aria-checked') === ARIA_CHECKED_STATES.TRUE;
+        switch (tagName) {
+            case MENUITEMCHECKBOX_TAGNAME:
+                target.setAttribute('aria-checked', String(!currentChecked));
+                break;
+            case MENUITEMRADIO_TAGNAME:
+                if (currentChecked)
+                    return;
+                this.radios.forEach((radio) => {
+                    const newCheckedState = radio === target ? ARIA_CHECKED_STATES.TRUE : ARIA_CHECKED_STATES.FALSE;
+                    radio.setAttribute('aria-checked', newCheckedState);
+                });
+                break;
+            default:
+                break;
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+MenuSection.styles = [...Component.styles];
+__decorate([
+    queryAssignedElements({ selector: `${MENUITEMRADIO_TAGNAME}:not([disabled])` }),
+    __metadata("design:type", Array)
+], MenuSection.prototype, "radios", void 0);
+export default MenuSection;

package/dist/components/menusection/menusection.constants.d.ts

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-menusection";
+declare const ARIA_CHECKED_STATES: {
+    readonly TRUE: "true";
+    readonly FALSE: "false";
+};
+export { ARIA_CHECKED_STATES, TAG_NAME };

package/dist/components/menusection/menusection.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menusection');
+const ARIA_CHECKED_STATES = {
+    TRUE: 'true',
+    FALSE: 'false',
+};
+export { ARIA_CHECKED_STATES, TAG_NAME };

package/dist/components/menusection/menusection.types.d.ts

@@ -0,0 +1,4 @@
+import { ValueOf } from '../../utils/types';
+import { ARIA_CHECKED_STATES } from './menusection.constants';
+type AriaCheckedStates = ValueOf<typeof ARIA_CHECKED_STATES>;
+export type { AriaCheckedStates };

package/dist/components/menusection/menusection.types.js

@@ -0,0 +1 @@
+export {};

package/dist/custom-elements.json

@@ -15443,7 +15443,7 @@
               "kind": "field",
               "name": "ariaChecked",
               "type": {
-                "text": "AriaChecked"
+                "text": "AriaCheckedStates"
               },
               "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
               "default": "'false'",
@@ -15749,7 +15749,7 @@
             {
               "name": "aria-checked",
               "type": {
-                "text": "AriaChecked"
+                "text": "AriaCheckedStates"
               },
               "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
               "default": "'false'",
@@ -16024,6 +16024,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/menusection/menusection.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
+          "name": "MenuSection",
+          "slots": [
+            {
+              "description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-menusection",
+          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MenuSection",
+            "module": "components/menusection/menusection.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/optgroup/optgroup.component.js",

package/dist/index.d.ts

@@ -54,6 +54,7 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import MenuItemRadio from './components/menuitemradio';
 import MenuItemCheckbox from './components/menuitemcheckbox';
+import MenuSection from './components/menusection';
 import Animation from './components/animation';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
@@ -62,6 +63,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, MenuSection, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -55,11 +55,12 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import MenuItemRadio from './components/menuitemradio';
 import MenuItemCheckbox from './components/menuitemcheckbox';
+import MenuSection from './components/menusection';
 import Animation from './components/animation';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, MenuSection, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -33,6 +33,7 @@ export { default as Marker } from './marker';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
+export { default as MenuSection } from './menusection';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';

package/dist/react/index.js

@@ -33,6 +33,7 @@ export { default as Marker } from './marker';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
+export { default as MenuSection } from './menusection';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';

package/dist/react/menusection/index.d.ts

@@ -0,0 +1,16 @@
+import Component from '../../components/menusection';
+/**
+ * `mdc-menusection` is a container element used to group a set of menu items.
+ *
+ * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.
+ *
+ * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:
+ *   only one radio item can be selected at a time.
+ * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.
+ *
+ * @tagname mdc-menusection
+ *
+ * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/menusection/index.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menusection';
+import { TAG_NAME } from '../../components/menusection/menusection.constants';
+/**
+ * `mdc-menusection` is a container element used to group a set of menu items.
+ *
+ * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.
+ *
+ * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:
+ *   only one radio item can be selected at a time.
+ * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.
+ *
+ * @tagname mdc-menusection
+ *
+ * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'MenuSection',
+});
+export default reactWrapper;

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.73.0"
+  "version": "0.73.1"
 }