@momentum-design/components 0.85.5 → 0.85.7

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

@@ -26,7 +26,10 @@ import { Component } from '../../models';
 declare class MenuBar extends Component {
     constructor();
     connectedCallback(): void;
-    menuItems: Array<HTMLElement>;
+    /**
+     * Returns all menuitem elements, including those nested inside menusection.
+     */
+    get menuItems(): Array<HTMLElement>;
     update(changedProperties: PropertyValues): void;
     firstUpdated(changedProperties: PropertyValues): void;
     /**
@@ -43,6 +46,9 @@ declare class MenuBar extends Component {
     private navigateToMenuItem;
     private showSubmenu;
     private getKeyWithDirectionFix;
+    /**
+     * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
+     */
     private isTopLevelMenuItem;
     private isNestedMenuItem;
     private closeAllMenuPopovers;

package/dist/components/menubar/menubar.component.js

@@ -1,19 +1,9 @@
-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 { Component } from '../../models';
 import { ROLE } from '../../utils/roles';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
-import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
+import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { KEYS } from '../../utils/keys';
 import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENUBAR_TAGNAME } from './menubar.constants';
@@ -51,6 +41,25 @@ class MenuBar extends Component {
         this.role = ROLE.MENUBAR;
         this.ariaOrientation = DEFAULTS.ORIENTATION;
     }
+    /**
+     * Returns all menuitem elements, including those nested inside menusection.
+     */
+    get menuItems() {
+        var _a, _b;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const assigned = (_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) !== null && _b !== void 0 ? _b : [];
+        const items = [];
+        const collect = (el) => {
+            if (el.role === ROLE.MENUITEM && !el.hasAttribute('disabled')) {
+                items.push(el);
+            }
+            else if (el.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
+                Array.from(el.children).forEach(collect);
+            }
+        };
+        assigned.forEach(collect);
+        return items;
+    }
     update(changedProperties) {
         super.update(changedProperties);
         this.updatePopoverPlacement();
@@ -124,13 +133,26 @@ class MenuBar extends Component {
             return KEYS.ARROW_LEFT;
         return originalKey;
     }
+    /**
+     * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
+     */
     isTopLevelMenuItem(element) {
         var _a;
-        return (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === MENUBAR_TAGNAME &&
-            element.tagName.toLowerCase() === MENUITEM_TAGNAME);
+        const parent = element.parentElement;
+        if (!parent || element.role !== ROLE.MENUITEM)
+            return false;
+        const parentTag = parent.tagName.toLowerCase();
+        if (parentTag === MENUBAR_TAGNAME) {
+            return true;
+        }
+        if (parentTag === MENUSECTION_TAGNAME &&
+            ((_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === MENUBAR_TAGNAME) {
+            return true;
+        }
+        return false;
     }
     isNestedMenuItem(element) {
-        return !!element.closest(MENUPOPOVER_TAGNAME) && element.tagName.toLowerCase() === MENUITEM_TAGNAME;
+        return !!element.closest(MENUPOPOVER_TAGNAME) && element.role === ROLE.MENUITEM;
     }
     async closeAllMenuPopovers() {
         const popovers = [];
@@ -144,7 +166,7 @@ class MenuBar extends Component {
         await Promise.all(popovers.map(popover => popover.updateComplete));
     }
     async crossMenubarNavigationOnLeft(element) {
-        const isMenuItem = element.tagName.toLowerCase() === MENUITEM_TAGNAME;
+        const isMenuItem = element.role === ROLE.MENUITEM;
         if (isMenuItem) {
             const parentPopover = element.closest(MENUPOPOVER_TAGNAME);
             const triggerId = parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.getAttribute('triggerid');
@@ -229,8 +251,4 @@ class MenuBar extends Component {
     }
 }
 MenuBar.styles = [...Component.styles, ...styles];
-__decorate([
-    queryAssignedElements({ selector: `${MENUITEM_TAGNAME}:not([disabled])` }),
-    __metadata("design:type", Array)
-], MenuBar.prototype, "menuItems", void 0);
 export default MenuBar;

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

@@ -8,7 +8,10 @@ import type { ArrowPositions, ArrowDirections } from './menuitem.types';
  * The leading and trailing slots can be used to display controls and text.<br/>
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted.
  *
- * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
+ * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.
+ * For example mdc-menupopover or mdc-menubar.
+ *
+ * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * @dependency mdc-text
  * @dependency mdc-icon
@@ -16,6 +19,14 @@ import type { ArrowPositions, ArrowDirections } from './menuitem.types';
  *
  * @tagname mdc-menuitem
  *
+ * @slot leading-controls - slot for menu item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item primary label.
+ * @slot leading-text-secondary-label - slot for menu item secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item tertiary label.
+ * @slot trailing-text-side-header - slot for menu item side header text.
+ * @slot trailing-text-subline - slot for menu item subline text.
+ * @slot trailing-controls - slot for menu item controls to appear of trailing end.
+ *
  * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.
@@ -36,6 +47,15 @@ declare class MenuItem extends ListItem {
      * - `'negative'`: Arrow points toward the leading side.
      */
     arrowDirection?: ArrowDirections;
+    /**
+     * The name attribute is used to identify the menu item when it is selected.
+     */
+    name?: undefined | string;
+    /**
+     * The value attribute is used to represent a value when the menu item is selected.
+     * It is typically used with checkbox and radio menu items, but can be handy for any menu item.
+     */
+    value?: undefined | string;
     constructor();
     /**
      * Handles the keydown event for the menu item.

package/dist/components/menuitem/menuitem.component.js

@@ -22,7 +22,10 @@ import styles from './menuitem.styles';
  * The leading and trailing slots can be used to display controls and text.<br/>
  * Based on the leading/trailing slot, the position of the controls and text can be adjusted.
  *
- * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
+ * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.
+ * For example mdc-menupopover or mdc-menubar.
+ *
+ * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * @dependency mdc-text
  * @dependency mdc-icon
@@ -30,6 +33,14 @@ import styles from './menuitem.styles';
  *
  * @tagname mdc-menuitem
  *
+ * @slot leading-controls - slot for menu item controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item primary label.
+ * @slot leading-text-secondary-label - slot for menu item secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item tertiary label.
+ * @slot trailing-text-side-header - slot for menu item side header text.
+ * @slot trailing-text-subline - slot for menu item subline text.
+ * @slot trailing-controls - slot for menu item controls to appear of trailing end.
+ *
  * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.
@@ -38,6 +49,15 @@ import styles from './menuitem.styles';
 class MenuItem extends ListItem {
     constructor() {
         super();
+        /**
+         * The name attribute is used to identify the menu item when it is selected.
+         */
+        this.name = undefined;
+        /**
+         * The value attribute is used to represent a value when the menu item is selected.
+         * It is typically used with checkbox and radio menu items, but can be handy for any menu item.
+         */
+        this.value = undefined;
         this.addEventListener('keyup', this.handleKeyUp);
     }
     /**
@@ -116,4 +136,12 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'arrow-direction' }),
     __metadata("design:type", String)
 ], MenuItem.prototype, "arrowDirection", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], MenuItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], MenuItem.prototype, "value", void 0);
 export default MenuItem;

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

@@ -1,26 +1,30 @@
-import type { CSSResult, TemplateResult } from 'lit';
+import type { PropertyValues, CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import type { AriaCheckedStates } from '../menusection/menusection.types';
 import type { Indicator } from './menuitemcheckbox.types';
 /**
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.
  *
- * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.
+ * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.
  *
- * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.
- * By default the `indicator` is set to <b>checkbox</b>.<br/>
+ * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.
+ *
+ * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>checkbox</b>.<br/>
  *
  * The checkbox will always be positioned on the leading side of the menuitem label and
  * the toggle and checkmark will always be positioned on the trailing side.
  *
  * The checkbox will have the possible states of `true` or `false`.
- * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
  * then the checkmark will be displayed. if not, then no indicator will be displayed.
  *
- * If you want only one item in a group to be checked, consider using menuitemradio component.
+ * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
- * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ * If you want only one item in a group to be checked, consider using menuitemradio component.
  *
  * @dependency mdc-staticcheckbox
  * @dependency mdc-statictoggle
@@ -28,7 +32,13 @@ import type { Indicator } from './menuitemcheckbox.types';
  *
  * @tagname mdc-menuitemcheckbox
  *
- * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item checkbox primary label.
+ * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.
+ * @slot trailing-text-side-header - slot for menu item checkbox side header text.
+ * @slot trailing-text-subline - slot for menu item checkbox subline text.
+ * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.
  *
  * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
@@ -36,10 +46,10 @@ import type { Indicator } from './menuitemcheckbox.types';
  */
 declare class MenuItemCheckbox extends MenuItem {
     /**
-     * The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.
-     * @default 'false'
+     * The checked attribute is used to indicate that the menuitemcheckbox is checked or not.
+     * @default false
      */
-    ariaChecked: AriaCheckedStates;
+    checked: boolean;
     /**
      * The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.
      * @default 'checkbox'
@@ -50,9 +60,10 @@ declare class MenuItemCheckbox extends MenuItem {
     /**
      * Handles click events to toggle checked state
      * If the menuitemcheckbox is disabled, it does nothing.
-     * If the menuitemcheckbox is not disabled, it toggles the `aria-checked` state between `true` and `false`.
+     * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
      */
     private menuitemcheckboxHandleClick;
+    update(changedProperties: PropertyValues): void;
     /**
      * Returns a static checkbox element if the indicator is set to checkbox.
      * If the indicator is not set to checkbox, it returns nothing.
@@ -68,8 +79,8 @@ declare class MenuItemCheckbox extends MenuItem {
      */
     private staticToggle;
     /**
-     * Returns a checkmark icon if the indicator is set to checkmark and the aria-checked state is true.
-     * If the indicator is not set to checkmark or the aria-checked state is false, it returns nothing.
+     * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.
+     * If the indicator is not set to checkmark or the checked state is false, it returns nothing.
      *
      * The checkmark icon will always be positioned on the trailing side of the menuitem label.
      * @returns TemplateResult | typeof nothing

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

@@ -13,28 +13,32 @@ 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 } from '../menusection/menusection.constants';
 import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
 import styles from './menuitemcheckbox.styles';
 /**
  * A menuitemcheckbox component is a checkable menuitem.
  * There should be no focusable descendants inside this menuitemcheckbox component.
  *
- * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.
+ * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.
  *
- * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.
- * By default the `indicator` is set to <b>checkbox</b>.<br/>
+ * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.
+ *
+ * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>checkbox</b>.<br/>
  *
  * The checkbox will always be positioned on the leading side of the menuitem label and
  * the toggle and checkmark will always be positioned on the trailing side.
  *
  * The checkbox will have the possible states of `true` or `false`.
- * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
  * then the checkmark will be displayed. if not, then no indicator will be displayed.
  *
- * If you want only one item in a group to be checked, consider using menuitemradio component.
+ * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
- * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ * If you want only one item in a group to be checked, consider using menuitemradio component.
  *
  * @dependency mdc-staticcheckbox
  * @dependency mdc-statictoggle
@@ -42,7 +46,13 @@ import styles from './menuitemcheckbox.styles';
  *
  * @tagname mdc-menuitemcheckbox
  *
- * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item checkbox primary label.
+ * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.
+ * @slot trailing-text-side-header - slot for menu item checkbox side header text.
+ * @slot trailing-text-subline - slot for menu item checkbox subline text.
+ * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.
  *
  * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.
@@ -52,10 +62,10 @@ class MenuItemCheckbox extends MenuItem {
     constructor() {
         super();
         /**
-         * The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.
-         * @default 'false'
+         * The checked attribute is used to indicate that the menuitemcheckbox is checked or not.
+         * @default false
          */
-        this.ariaChecked = DEFAULTS.ARIA_CHECKED;
+        this.checked = false;
         /**
          * The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.
          * @default 'checkbox'
@@ -64,13 +74,14 @@ class MenuItemCheckbox extends MenuItem {
         /**
          * Handles click events to toggle checked state
          * If the menuitemcheckbox is disabled, it does nothing.
-         * If the menuitemcheckbox is not disabled, it toggles the `aria-checked` state between `true` and `false`.
+         * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
          */
-        this.menuitemcheckboxHandleClick = () => {
+        this.menuitemcheckboxHandleClick = (event) => {
+            event.stopPropagation();
             if (this.disabled)
                 return;
-            const prevChecked = this.ariaChecked === ARIA_CHECKED_STATES.TRUE;
-            this.ariaChecked = prevChecked ? ARIA_CHECKED_STATES.FALSE : ARIA_CHECKED_STATES.TRUE;
+            this.checked = !this.checked;
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         };
         this.addEventListener('click', this.menuitemcheckboxHandleClick);
     }
@@ -78,6 +89,12 @@ class MenuItemCheckbox extends MenuItem {
         super.connectedCallback();
         this.role = ROLE.MENUITEMCHECKBOX;
     }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.ariaChecked = `${this.checked}`;
+        }
+    }
     /**
      * Returns a static checkbox element if the indicator is set to checkbox.
      * If the indicator is not set to checkbox, it returns nothing.
@@ -90,7 +107,7 @@ class MenuItemCheckbox extends MenuItem {
         return html `
       <mdc-staticcheckbox
         slot="leading-controls"
-        ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
+        ?checked="${this.checked}"
         ?disabled="${this.disabled}"
       ></mdc-staticcheckbox>
     `;
@@ -109,24 +126,24 @@ class MenuItemCheckbox extends MenuItem {
         return html `
       <mdc-statictoggle
         slot="trailing-controls"
-        ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
+        ?checked="${this.checked}"
         ?disabled="${this.disabled}"
         size="${TOGGLE_SIZE.COMPACT}"
       ></mdc-statictoggle>
     `;
     }
     /**
-     * Returns a checkmark icon if the indicator is set to checkmark and the aria-checked state is true.
-     * If the indicator is not set to checkmark or the aria-checked state is false, it returns nothing.
+     * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.
+     * If the indicator is not set to checkmark or the checked state is false, it returns nothing.
      *
      * The checkmark icon will always be positioned on the trailing side of the menuitem label.
      * @returns TemplateResult | typeof nothing
      */
     getCheckmarkIcon() {
-        if (this.indicator !== INDICATOR.CHECKMARK || this.ariaChecked === ARIA_CHECKED_STATES.FALSE) {
-            return nothing;
+        if (this.checked && this.indicator === INDICATOR.CHECKMARK) {
+            return html ` <mdc-icon slot="trailing-controls" name="check-bold" part="checkmark-icon"></mdc-icon> `;
         }
-        return html ` <mdc-icon slot="trailing-controls" name="check-bold" part="checkmark-icon"></mdc-icon> `;
+        return nothing;
     }
     render() {
         return html `
@@ -152,9 +169,9 @@ class MenuItemCheckbox extends MenuItem {
 }
 MenuItemCheckbox.styles = [...MenuItem.styles, ...styles];
 __decorate([
-    property({ type: String, reflect: true, attribute: 'aria-checked' }),
-    __metadata("design:type", String)
-], MenuItemCheckbox.prototype, "ariaChecked", void 0);
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], MenuItemCheckbox.prototype, "checked", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -1,11 +1,11 @@
 declare const TAG_NAME: "mdc-menuitemcheckbox";
 declare const INDICATOR: {
+    readonly NONE: "none";
     readonly CHECKBOX: "checkbox";
     readonly CHECKMARK: "checkmark";
     readonly TOGGLE: "toggle";
 };
 declare const DEFAULTS: {
-    readonly ARIA_CHECKED: "false";
     readonly INDICATOR: "checkbox";
 };
 export { TAG_NAME, INDICATOR, DEFAULTS };

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

@@ -1,13 +1,12 @@
 import utils from '../../utils/tag-name';
-import { ARIA_CHECKED_STATES } from '../menusection/menusection.constants';
 const TAG_NAME = utils.constructTagName('menuitemcheckbox');
 const INDICATOR = {
+    NONE: 'none',
     CHECKBOX: 'checkbox',
     CHECKMARK: 'checkmark',
     TOGGLE: 'toggle',
 };
 const DEFAULTS = {
-    ARIA_CHECKED: ARIA_CHECKED_STATES.FALSE,
     INDICATOR: INDICATOR.CHECKBOX,
 };
 export { TAG_NAME, INDICATOR, DEFAULTS };

package/dist/components/menuitemcheckbox/menuitemcheckbox.styles.js

@@ -1,12 +1,6 @@
 import { css } from 'lit';
 const styles = css `
-  :host {
-    --mdc-checkmark-indicator-color: var(--mds-color-theme-control-active-normal);
-  }
   :host::part(checkmark-icon) {
-    --mdc-icon-fill-color: var(--mdc-checkmark-indicator-color);
-  }
-  :host([disabled])::part(checkmark-icon) {
     --mdc-icon-fill-color: currentColor;
   }
 `;

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

@@ -1,22 +1,45 @@
-import type { CSSResult } from 'lit';
+import type { PropertyValues, CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import type { AriaCheckedStates } from '../menusection/menusection.types';
+import { Indicator } from './menuitemradio.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/>
  * There should be no focusable descendants inside this menuitemradio component.
  *
- * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ * The `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.
+ *
+ * Menu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.
  *
  * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.
  *
- * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.
+ * The `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.
+ * By default, the `indicator` is set to <b>radio</b>.<br/>
+ *
+ * The checkbox will always be positioned on the leading side of the menuitem label and
+ * the checkmark will always be positioned on the trailing side.
+ *
+ * The radio will have the possible states of `true` or `false`.
+ * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,
+ * then the checkmark will be displayed. if not, then no indicator will be displayed.
+ *
+ * The third options for the `indicator` is <b>none</b>, which will not display any indicator at all.
+ * It is intended to be used for customised menu items where the indicator is implemented differently.
+ * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.
+ * Make sure the new indicator is accessible.
  *
  * @dependency mdc-staticradio
  * @dependency mdc-text
  *
  * @tagname mdc-menuitemradio
  *
+ * @slot leading-controls - slot for menu item radio controls to appear of leading end.
+ * @slot leading-text-primary-label - slot for menu item radio primary label.
+ * @slot leading-text-secondary-label - slot for menu item radio secondary label.
+ * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.
+ * @slot trailing-text-side-header - slot for menu item radio side header text.
+ * @slot trailing-text-subline - slot for menu item radio subline text.
+ * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.
+ *
  * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.
  * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.
  * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.
@@ -24,22 +47,48 @@ import type { AriaCheckedStates } from '../menusection/menusection.types';
 declare class MenuItemRadio extends MenuItem {
     /**
      * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
-     * @default 'false'
+     * @default false
      */
-    ariaChecked: AriaCheckedStates;
+    checked: boolean;
     /**
-     * The name attribute is used to group radio items within the same menu container.
+     * The indicator attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.
+     * @default 'radio'
      */
-    name: string;
+    indicator: Indicator;
     constructor();
     connectedCallback(): void;
+    /**
+     * Returns all radios within the same group (name).
+     */
+    private getAllRadiosWithinSameGroup;
+    /**
+     * Updates the checked state of all other radios in the same group.
+     * This method is called when a radio is clicked to ensure that only one radio in the group can be checked at a time.
+     * It sets the `checked` property of all other radios in the same group to `false`.
+     */
+    private updateOtherRadiosCheckedState;
     /**
      * Handles click events to set checked state and uncheck siblings in the same group and container.
-     * If the menuitemradio is not checked, it sets its aria-checked state to `true`
-     * and sets all other menuitemradio elements of the same group with aria-checked state to `false`.
+     * If the menuitemradio is not checked, it sets its checked state to `true`
+     * and sets all other menuitemradio elements of the same group with checked state to `false`.
+     */
+    private radioHandleClick;
+    update(changedProperties: PropertyValues): void;
+    /**
+     * Returns a static checkbox element if the indicator is set to checkbox.
+     * If the indicator is not set to checkbox, it returns nothing.
+     * @returns TemplateResult | typeof nothing
+     */
+    private renderStaticRadio;
+    /**
+     * Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.
+     * If the indicator is not set to checkmark or the checked state is false, it returns nothing.
+     *
+     * The checkmark icon will always be positioned on the trailing side of the menuitem label.
+     * @returns TemplateResult | typeof nothing
      */
-    private menuitemradioHandleClick;
-    render(): import("lit-html").TemplateResult<1>;
+    private renderCheckmarkIcon;
+    render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default MenuItemRadio;