@momentum-design/components 0.66.3 → 0.67.0

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

@@ -0,0 +1,18 @@
+declare const TAG_NAME: "mdc-dialog";
+declare const DIALOG_VARIANT: {
+    readonly DEFAULT: "default";
+    readonly PROMOTIONAL: "promotional";
+};
+declare const DEFAULTS: {
+    readonly VISIBLE: false;
+    readonly Z_INDEX: 1000;
+    readonly ROLE: "dialog";
+    readonly SIZE: "small";
+    readonly HEADER_TAG_NAME: "h2";
+    readonly DESCRIPTION_TAG_NAME: "p";
+    readonly CANCEL_ICON: "cancel-bold";
+    readonly VARIANT: "default";
+};
+declare const DIALOG_SIZE: readonly ["small", "medium", "large"];
+declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];
+export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

package/dist/components/dialog/dialog.constants.js

@@ -0,0 +1,19 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('dialog');
+const DIALOG_VARIANT = {
+    DEFAULT: 'default',
+    PROMOTIONAL: 'promotional',
+};
+const DEFAULTS = {
+    VISIBLE: false,
+    Z_INDEX: 1000,
+    ROLE: 'dialog',
+    SIZE: 'small',
+    HEADER_TAG_NAME: 'h2',
+    DESCRIPTION_TAG_NAME: 'p',
+    CANCEL_ICON: 'cancel-bold',
+    VARIANT: DIALOG_VARIANT.DEFAULT,
+};
+const DIALOG_SIZE = ['small', 'medium', 'large'];
+const DIALOG_ROLE = ['dialog', 'alertdialog'];
+export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

package/dist/components/dialog/dialog.events.d.ts

@@ -0,0 +1,34 @@
+import type Dialog from './dialog.component';
+export declare class DialogEventManager {
+    /**
+     * Dispatches a custom event for the dialog.
+     *
+     * @param eventName - The name of the event.
+     * @param instance - The dialog instance.
+     */
+    static dispatchDialogEvent(eventName: string, instance: Dialog): void;
+    /**
+     * Custom event that is fired when the dialog is shown.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onShowDialog(instance: Dialog): void;
+    /**
+     * Custom event that is fired when the dialog is hidden.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onHideDialog(instance: Dialog): void;
+    /**
+     * Custom event that is fired when the dialog is created.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onCreatedDialog(instance: Dialog): void;
+    /**
+     * Custom event that is fired when the dialog is destroyed.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onDestroyedDialog(instance: Dialog): void;
+}

package/dist/components/dialog/dialog.events.js

@@ -0,0 +1,47 @@
+export class DialogEventManager {
+    /**
+     * Dispatches a custom event for the dialog.
+     *
+     * @param eventName - The name of the event.
+     * @param instance - The dialog instance.
+     */
+    static dispatchDialogEvent(eventName, instance) {
+        instance.dispatchEvent(new CustomEvent(eventName, {
+            detail: { show: instance.visible },
+            composed: true,
+            bubbles: true,
+        }));
+    }
+    /**
+     * Custom event that is fired when the dialog is shown.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onShowDialog(instance) {
+        this.dispatchDialogEvent('shown', instance);
+    }
+    /**
+     * Custom event that is fired when the dialog is hidden.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onHideDialog(instance) {
+        this.dispatchDialogEvent('hidden', instance);
+    }
+    /**
+     * Custom event that is fired when the dialog is created.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onCreatedDialog(instance) {
+        this.dispatchDialogEvent('created', instance);
+    }
+    /**
+     * Custom event that is fired when the dialog is destroyed.
+     *
+     * @param instance - The dialog instance.
+     */
+    static onDestroyedDialog(instance) {
+        this.dispatchDialogEvent('destroyed', instance);
+    }
+}

package/dist/components/dialog/dialog.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,108 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-dialog-primary-background-color: var(--mds-color-theme-background-solid-primary-normal);
+    --mdc-dialog-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-dialog-header-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-dialog-description-text-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-dialog-elevation-3: var(--mds-elevation-3);
+    --mdc-dialog-width: 27rem; /* Default to small */
+    
+    background-color: var(--mdc-dialog-primary-background-color);
+    border: 0.0625rem solid var(--mdc-dialog-border-color);
+    border-radius: 0.5rem;
+    filter: var(--mdc-dialog-elevation-3);
+    display: none;
+    padding: 1rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    position: absolute;
+    right: 50%;
+    bottom: 50%;
+    transform: translate(50%,50%);
+  }
+
+
+  :host([variant='promotional']){
+    --mdc-dialog-border-color: var(--mds-color-theme-outline-promotion-normal);
+  }
+    
+  :host([visible]) {
+    display: flex;
+      
+  }
+
+  :host([size='medium']) {
+    --mdc-dialog-width: 41rem;
+  }
+
+  :host([size='large']) {
+    --mdc-dialog-width: 62rem;
+  }
+
+  :host {
+    width: var(--mdc-dialog-width);
+    max-width: 100%;
+  }
+    
+  :host::part(header),
+  :host::part(body),
+  :host::part(footer) {
+    display: flex;
+    align-self: stretch;
+  }
+
+  :host::part(header) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  :host::part(header-text) {
+    width: 23.625rem;
+    color: var(--mdc-dialog-header-text-color);
+  }
+    
+  :host::part(description-text) {
+    color: var(--mdc-dialog-description-text-color);
+  }
+    
+  :host::part(body) {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%
+  }
+
+  :host::part(footer) {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  ::slotted([slot='footer-link']), 
+  ::slotted([slot='footer-button-primary']), 
+  ::slotted([slot='footer-button-secondary']){
+    margin-bottom: 0.5rem;
+  }
+
+  :host::part(dialog-close-btn) {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    cursor: pointer;
+  }
+  
+  :host(:dir(rtl))::part(dialog-close-btn) {
+    right: auto;
+    left: 1rem;
+  }
+    
+  mdc-text::part(text) {
+    margin: 0;
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,12 @@
+import type { ValueOf } from '../../utils/types';
+import { DIALOG_ROLE, DIALOG_SIZE, DIALOG_VARIANT } from './dialog.constants';
+type DialogRole = (typeof DIALOG_ROLE)[number];
+type DialogSize = ValueOf<typeof DIALOG_SIZE>;
+type DialogVariant = ValueOf<typeof DIALOG_VARIANT>;
+interface Events {
+    onShownEvent: Event;
+    onHiddenEvent: Event;
+    onCreatedEvent: Event;
+    onDestroyedEvent: Event;
+}
+export type { DialogSize, DialogRole, DialogVariant, Events };

package/dist/components/dialog/dialog.types.js

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

package/dist/components/dialog/dialog.utils.d.ts

@@ -0,0 +1,7 @@
+import type Dialog from './dialog.component';
+export declare class DialogUtils {
+    private dialog;
+    constructor(dialog: Dialog);
+    setupAriaAttributes(): void;
+    createBackdrop(): void;
+}

package/dist/components/dialog/dialog.utils.js

@@ -0,0 +1,33 @@
+export class DialogUtils {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    setupAriaAttributes() {
+        if (this.dialog.headerText && !this.dialog.ariaLabel && !this.dialog.ariaLabelledby) {
+            this.dialog.setAttribute('aria-labelledby', this.dialog.headerText);
+        }
+        else if (!this.dialog.headerText && !this.dialog.ariaLabel && !this.dialog.ariaLabelledby) {
+            this.dialog.setAttribute('aria-labelledby', this.dialog.triggerId);
+        }
+    }
+    createBackdrop() {
+        var _a;
+        const backdrop = document.createElement('div');
+        backdrop.classList.add('dialog-backdrop');
+        const styleElement = document.createElement('style');
+        styleElement.textContent = `
+      .dialog-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--mds-color-theme-common-overlays-secondary-normal);
+        z-index: ${this.dialog.zIndex - 1};
+      }
+    `;
+        backdrop.appendChild(styleElement);
+        (_a = this.dialog.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(backdrop);
+        this.dialog.backdropElement = backdrop;
+    }
+}

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

@@ -0,0 +1,9 @@
+import '../button';
+import '../text';
+import Dialog from './dialog.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-dialog']: Dialog;
+    }
+}
+export default Dialog;

package/dist/components/dialog/index.js

@@ -0,0 +1,6 @@
+import '../button';
+import '../text';
+import Dialog from './dialog.component';
+import { TAG_NAME } from './dialog.constants';
+Dialog.register(TAG_NAME);
+export default Dialog;

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

@@ -0,0 +1,12 @@
+import '../icon';
+import '../staticcheckbox';
+import '../statictoggle';
+import '../text';
+import '../tooltip';
+import MenuItemCheckbox from './menuitemcheckbox.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menuitemcheckbox']: MenuItemCheckbox;
+    }
+}
+export default MenuItemCheckbox;

package/dist/components/menuitemcheckbox/index.js

@@ -0,0 +1,9 @@
+import '../icon';
+import '../staticcheckbox';
+import '../statictoggle';
+import '../text';
+import '../tooltip';
+import MenuItemCheckbox from './menuitemcheckbox.component';
+import { TAG_NAME } from './menuitemcheckbox.constants';
+MenuItemCheckbox.register(TAG_NAME);
+export default MenuItemCheckbox;

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

@@ -0,0 +1,54 @@
+import type { CSSResult, TemplateResult } from 'lit';
+import MenuItem from '../menuitem/menuitem.component';
+import type { AriaCheckedStates, 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 `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/>
+ *
+ * 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`,
+ * 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.
+ *
+ * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ *
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-statictoggle
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-menuitemcheckbox
+ *
+ * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
+ */
+declare class MenuItemCheckbox extends MenuItem {
+    /**
+     * The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.
+     * @default 'false'
+     */
+    ariaChecked: AriaCheckedStates;
+    /**
+     * The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.
+     * @default 'checkbox'
+     */
+    indicator: Indicator;
+    connectedCallback(): void;
+    private staticCheckbox;
+    private staticToggle;
+    private getCheckmarkIcon;
+    render(): TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default MenuItemCheckbox;

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

@@ -0,0 +1,137 @@
+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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+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 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 `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/>
+ *
+ * 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`,
+ * 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.
+ *
+ * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.
+ *
+ * @dependency mdc-staticcheckbox
+ * @dependency mdc-statictoggle
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-menuitemcheckbox
+ *
+ * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color
+ *
+ * @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.
+ * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.
+ */
+class MenuItemCheckbox extends MenuItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.
+         * @default 'false'
+         */
+        this.ariaChecked = DEFAULTS.ARIA_CHECKED;
+        /**
+         * The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.
+         * @default 'checkbox'
+         */
+        this.indicator = DEFAULTS.INDICATOR;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.MENUITEMCHECKBOX;
+    }
+    staticCheckbox() {
+        if (this.indicator !== INDICATOR.CHECKBOX) {
+            return nothing;
+        }
+        return html `
+      <mdc-staticcheckbox
+        slot="leading-controls"
+        ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
+        ?disabled="${this.disabled}"
+      ></mdc-staticcheckbox>
+  `;
+    }
+    staticToggle() {
+        if (this.indicator !== INDICATOR.TOGGLE) {
+            return nothing;
+        }
+        return html `
+      <mdc-statictoggle
+        slot="trailing-controls"
+        ?checked="${this.ariaChecked === ARIA_CHECKED_STATES.TRUE}"
+        ?disabled="${this.disabled}"
+        size="${TOGGLE_SIZE.COMPACT}"
+      ></mdc-statictoggle>
+    `;
+    }
+    getCheckmarkIcon() {
+        if (this.indicator !== INDICATOR.CHECKMARK || this.ariaChecked === ARIA_CHECKED_STATES.FALSE) {
+            return nothing;
+        }
+        return html `
+      <mdc-icon
+        slot="trailing-controls"
+        name="check-bold"
+        part="checkmark-icon"
+      ></mdc-icon>
+    `;
+    }
+    render() {
+        return html `
+      <div part="leading">
+        ${this.staticCheckbox()}
+        <slot name="leading-controls"></slot>
+        <div part="leading-text">
+          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+          ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
+        </div>
+      </div>
+      <div part="trailing">
+        <div part="trailing-text">
+          ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
+          ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
+        </div>
+        <slot name="trailing-controls"></slot>
+        ${this.staticToggle()}
+        ${this.getCheckmarkIcon()}
+      </div>
+    `;
+    }
+}
+MenuItemCheckbox.styles = [...MenuItem.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' }),
+    __metadata("design:type", String)
+], MenuItemCheckbox.prototype, "ariaChecked", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], MenuItemCheckbox.prototype, "indicator", void 0);
+export default MenuItemCheckbox;

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

@@ -0,0 +1,15 @@
+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";
+    readonly TOGGLE: "toggle";
+};
+declare const DEFAULTS: {
+    readonly ARIA_CHECKED: "false";
+    readonly INDICATOR: "checkbox";
+};
+export { TAG_NAME, ARIA_CHECKED_STATES, INDICATOR, DEFAULTS };

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

@@ -0,0 +1,16 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menuitemcheckbox');
+const ARIA_CHECKED_STATES = {
+    FALSE: 'false',
+    TRUE: 'true',
+};
+const INDICATOR = {
+    CHECKBOX: 'checkbox',
+    CHECKMARK: 'checkmark',
+    TOGGLE: 'toggle',
+};
+const DEFAULTS = {
+    ARIA_CHECKED: ARIA_CHECKED_STATES.FALSE,
+    INDICATOR: INDICATOR.CHECKBOX,
+};
+export { TAG_NAME, ARIA_CHECKED_STATES, INDICATOR, DEFAULTS };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,13 @@
+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;
+  }
+`;
+export default [styles];

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

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

package/dist/components/menuitemcheckbox/menuitemcheckbox.types.js

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

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

@@ -0,0 +1,10 @@
+import '../staticradio';
+import '../text';
+import '../tooltip';
+import MenuItemRadio from './menuitemradio.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menuitemradio']: MenuItemRadio;
+    }
+}
+export default MenuItemRadio;

package/dist/components/menuitemradio/index.js

@@ -0,0 +1,7 @@
+import '../staticradio';
+import '../text';
+import '../tooltip';
+import MenuItemRadio from './menuitemradio.component';
+import { TAG_NAME } from './menuitemradio.constants';
+MenuItemRadio.register(TAG_NAME);
+export default MenuItemRadio;

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

@@ -0,0 +1,34 @@
+import type { CSSResult } from 'lit';
+import MenuItem from '../menuitem/menuitem.component';
+import { AriaChecked } 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.
+ *
+ * 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`.
+ *
+ * @dependency mdc-staticradio
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menuitemradio
+ *
+ * @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.
+ */
+declare class MenuItemRadio extends MenuItem {
+    /**
+     * The aria-checked attribute is used to indicate that the menuitemradio is checked or not.
+     * @default 'false'
+     */
+    ariaChecked: AriaChecked;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default MenuItemRadio;