@momentum-design/components 0.129.21 → 0.129.22

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

@@ -67,7 +67,7 @@ declare class Buttonsimple extends Buttonsimple_base {
      * a comma separated string.
      * For example: `aria-pressed,aria-expanded`
      *
-     * @default 'aria-pressed' (when)
+     * @default 'aria-pressed'
      */
     ariaStateKey?: string;
     /**

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

@@ -3,32 +3,28 @@ import { Component } from '../../models';
 declare const Card_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/CardComponentMixin").CardComponentMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
 /**
  * The card component allows users to organize information in a structured and tangible
- * format that is visually appealing. `mdc-card` is a static component that supports
- * the following features:
- * - Image
- * - Header
- *    - Icon
- *    - Title
- *    - Subtitle
- * - Body
+ * format that is visually appealing. `mdc-card` is a static component.
  *
- * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
+ * ## Card Structure
+ * - **Image**: Optional visual content at the top
+ * - **Header**: Contains icon, title, subtitle, and action buttons
+ * - **Body**: Main text content area
+ * - **Footer**: Optional footer with links and buttons
  *
- * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.
  *
- * To make this card interactive, use the following slots:
- * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
- * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
- * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
- * within the footer section.
+ * @tagname mdc-card
  *
- * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of
  * `mdc-button` component within the footer section.
@@ -48,13 +44,7 @@ declare const Card_base: import("../../utils/mixins/index.types").Constructor<im
  * @csspart icon-button - The icon button part of the card header
  * @csspart text - The text part of the card
  *
- * @tagname mdc-card
- *
- * @dependency mdc-icon
- * @dependency mdc-text
- *
  * @cssproperty --mdc-card-width - The width of the card
- *
  */
 declare class Card extends Card_base {
     /**

package/dist/components/card/card.component.js

@@ -17,32 +17,28 @@ import { DEFAULTS } from './card.constants';
 import styles from './card.styles';
 /**
  * The card component allows users to organize information in a structured and tangible
- * format that is visually appealing. `mdc-card` is a static component that supports
- * the following features:
- * - Image
- * - Header
- *    - Icon
- *    - Title
- *    - Subtitle
- * - Body
+ * format that is visually appealing. `mdc-card` is a static component.
  *
- * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
+ * ## Card Structure
+ * - **Image**: Optional visual content at the top
+ * - **Header**: Contains icon, title, subtitle, and action buttons
+ * - **Body**: Main text content area
+ * - **Footer**: Optional footer with links and buttons
  *
- * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.
  *
- * To make this card interactive, use the following slots:
- * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
- * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
- * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
- * within the footer section.
+ * @tagname mdc-card
  *
- * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
+ * @dependency mdc-icon
+ * @dependency mdc-text
  *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of
  * `mdc-button` component within the footer section.
@@ -62,13 +58,7 @@ import styles from './card.styles';
  * @csspart icon-button - The icon button part of the card header
  * @csspart text - The text part of the card
  *
- * @tagname mdc-card
- *
- * @dependency mdc-icon
- * @dependency mdc-text
- *
  * @cssproperty --mdc-card-width - The width of the card
- *
  */
 class Card extends CardComponentMixin(FooterMixin(Component)) {
     constructor() {

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

@@ -4,21 +4,18 @@ declare const CardButton_base: import("../../utils/mixins/index.types").Construc
 /**
  * cardbutton component looks like a card and behaves as a button component.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Interacting anywhere on the card triggers the click event.
+ * - Use `name` and `value` attributes when using within forms.
+ *
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardbutton
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It fires the click event when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It fires the click event when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
@@ -26,6 +23,13 @@ declare const CardButton_base: import("../../utils/mixins/index.types").Construc
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card

package/dist/components/cardbutton/cardbutton.component.js

@@ -6,21 +6,18 @@ import styles from './cardbutton.styles';
 /**
  * cardbutton component looks like a card and behaves as a button component.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Interacting anywhere on the card triggers the click event.
+ * - Use `name` and `value` attributes when using within forms.
+ *
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardbutton
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It fires the click event when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It fires the click event when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
  * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
@@ -28,6 +25,13 @@ import styles from './cardbutton.styles';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It fires the click event when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It fires the click event when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card

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

@@ -3,15 +3,19 @@ import Card from '../card/card.component';
 import type { SelectionType } from './cardcheckbox.types';
 declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
 /**
- * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.
+ * Multiple cards can be checked simultaneously.
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
- * This card would have events for selected and unselected (similar to checkbox)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).
+ * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.
+ * - Card has `role="checkbox"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - The `card-title` attribute is required.
+ * - When using within a form or group, wrap cards in a container with `role="group"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardcheckbox
  *
@@ -25,6 +29,14 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -40,14 +52,6 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare class CardCheckbox extends CardCheckbox_base {
     /**
@@ -56,7 +60,9 @@ declare class CardCheckbox extends CardCheckbox_base {
      */
     checked: boolean;
     /**
-     * The selection type of the card. It can either be set to 'check' or 'checkbox'
+     * The selection type of the card that determines the visual indicator.
+     * - `check`: Shows a check icon when selected
+     * - `checkbox`: Shows a checkbox component when selected or unselected
      * @default 'check'
      */
     selectionType: SelectionType;

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -17,15 +17,19 @@ import { KEYS } from '../../utils/keys';
 import { CHECK_MARK, DEFAULTS, SELECTION_TYPE } from './cardcheckbox.constants';
 import styles from './cardcheckbox.styles';
 /**
- * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
+ * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.
+ * Multiple cards can be checked simultaneously.
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "checkbox-group".
- * This card would have events for selected and unselected (similar to checkbox)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).
+ * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.
+ * - Card has `role="checkbox"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - The `card-title` attribute is required.
+ * - When using within a form or group, wrap cards in a container with `role="group"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardcheckbox
  *
@@ -39,6 +43,14 @@ import styles from './cardcheckbox.styles';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It toggles the checked state when enter key is used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It toggles the checked state when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -54,14 +66,6 @@ import styles from './cardcheckbox.styles';
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
@@ -72,7 +76,9 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
          */
         this.checked = false;
         /**
-         * The selection type of the card. It can either be set to 'check' or 'checkbox'
+         * The selection type of the card that determines the visual indicator.
+         * - `check`: Shows a check icon when selected
+         * - `checkbox`: Shows a checkbox component when selected or unselected
          * @default 'check'
          */
         this.selectionType = DEFAULTS.SELECTION_TYPE;

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

@@ -2,15 +2,20 @@ import { CSSResult, nothing, PropertyValues } from 'lit';
 import Card from '../card/card.component';
 declare const CardRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
 /**
- * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ * cardradio component extends `mdc-card` and supports radio selection interaction.
+ * Only one card can be selected at a time within the same group (defined by `name` attribute).
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
- * This card would have events for selected and unselected (similar to radio)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.
+ * - Supports keyboard navigation with arrow keys to move between cards in the same group.
+ * - Card has `role="radio"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - Both `card-title` and `name` attributes are required.
+ * - When using within a form or group, wrap cards in a container with `role="radiogroup"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardradio
  *
@@ -24,6 +29,14 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It selects the card when enter key or arrow keys are used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It selects the card when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -39,14 +52,6 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare class CardRadio extends CardRadio_base {
     /**
@@ -55,7 +60,8 @@ declare class CardRadio extends CardRadio_base {
      */
     checked: boolean;
     /**
-     * The name of the radio.
+     * The name of the radio group. Cards with the same name are grouped together,
+     * ensuring only one card in the group can be selected at a time.
      * @default ''
      */
     name: string;

package/dist/components/cardradio/cardradio.component.js

@@ -17,15 +17,20 @@ import { ROLE } from '../../utils/roles';
 import { KEYS } from '../../utils/keys';
 import styles from './cardradio.styles';
 /**
- * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
+ * cardradio component extends `mdc-card` and supports radio selection interaction.
+ * Only one card can be selected at a time within the same group (defined by `name` attribute).
  *
- * While using this component within a form or group of cards, make sure cards are in a role = "radio-group".
- * This card would have events for selected and unselected (similar to radio)
+ * ## Features
+ * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).
+ * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.
+ * - Supports keyboard navigation with arrow keys to move between cards in the same group.
+ * - Card has `role="radio"` and manages `aria-checked` and `aria-disabled` attributes automatically.
  *
- * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.
- * Make sure to pass only non-interactable elements within the slots.
+ * ## Usage
+ * - Both `card-title` and `name` attributes are required.
+ * - When using within a form or group, wrap cards in a container with `role="radiogroup"` and provide an `aria-label`.
  *
- * Make sure to pass the `card-title` mandatorily for this card.
+ * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.
  *
  * @tagname mdc-cardradio
  *
@@ -39,6 +44,14 @@ import styles from './cardradio.styles';
  * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
  * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
  *
+ * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
+ * It selects the card when enter key or arrow keys are used.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
+ * It selects the card when space key is used.
+ * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
+ *
  * @csspart header - The header part of the card
  * @csspart icon - The icon part of the card header
  * @csspart body - The body part of the card
@@ -54,14 +67,6 @@ import styles from './cardradio.styles';
  * @csspart check-icon-button - The check icon button part of the card
  *
  * @cssproperty --mdc-card-width - The width of the card
- *
- * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
- * It toggles the checked state when enter key is used.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
- * It toggles the checked state when space key is used.
- * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
@@ -72,7 +77,8 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
          */
         this.checked = false;
         /**
-         * The name of the radio.
+         * The name of the radio group. Cards with the same name are grouped together,
+         * ensuring only one card in the group can be selected at a time.
          * @default ''
          */
         this.name = '';