@momentum-design/components 0.129.20 → 0.129.22

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

@@ -6,7 +6,7 @@ declare const AlertChip_base: import("../../utils/mixins/index.types").Construct
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
  * - It supports a leading icon along with label.
- * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ * - It supports 5 variants of alerts - error, informational, neutral, success and warning.
  *
  * This component is built by extending Buttonsimple.
  *
@@ -23,18 +23,18 @@ declare const AlertChip_base: import("../../utils/mixins/index.types").Construct
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
  *
- * @event click - (React: onClick) This event is dispatched when the chip is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
- * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.
+ * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.
  */
 declare class AlertChip extends AlertChip_base {
     /**
      * The variant of the alertchip. It supports 5 variants
      * - neutral
-     * - warning
      * - error
      * - success
+     * - warning
      * - informational
      *
      * @default neutral
@@ -46,7 +46,7 @@ declare class AlertChip extends AlertChip_base {
      * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
      * including empty spaces to split words.
      */
-    label: string;
+    label?: string;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/alertchip/alertchip.component.js

@@ -19,7 +19,7 @@ import { getAlertIcon } from './alertchip.utils';
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
  * - It supports a leading icon along with label.
- * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ * - It supports 5 variants of alerts - error, informational, neutral, success and warning.
  *
  * This component is built by extending Buttonsimple.
  *
@@ -36,10 +36,10 @@ import { getAlertIcon } from './alertchip.utils';
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
  *
- * @event click - (React: onClick) This event is dispatched when the chip is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
- * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.
+ * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.
  */
 class AlertChip extends IconNameMixin(Buttonsimple) {
     constructor() {
@@ -47,21 +47,14 @@ class AlertChip extends IconNameMixin(Buttonsimple) {
         /**
          * The variant of the alertchip. It supports 5 variants
          * - neutral
-         * - warning
          * - error
          * - success
+         * - warning
          * - informational
          *
          * @default neutral
          */
         this.variant = DEFAULTS.VARIANT;
-        /**
-         * The visible label text of the alertchip.
-         *
-         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
-         * including empty spaces to split words.
-         */
-        this.label = '';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -89,6 +82,6 @@ __decorate([
 ], AlertChip.prototype, "variant", void 0);
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], AlertChip.prototype, "label", void 0);
 export default AlertChip;

package/dist/components/alertchip/alertchip.constants.js

@@ -1,3 +1,4 @@
+import { ROLE } from '../../utils/roles';
 import utils from '../../utils/tag-name';
 import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -14,6 +15,6 @@ const DEFAULTS = {
     TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
     TAG_NAME: VALID_TEXT_TAGS.SPAN,
     SIZE: BUTTON_SIZES[24],
-    ROLE: 'button',
+    ROLE: ROLE.BUTTON,
 };
 export { DEFAULTS, TAG_NAME, VARIANTS };

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

@@ -3,7 +3,7 @@ import type { IconNames } from '../icon/icon.types';
 import type AlertChip from './alertchip.component';
 import { VARIANTS } from './alertchip.constants';
 type VariantType = ValueOf<typeof VARIANTS>;
-type IconListType = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'dnd-presence-badge-filled' | 'info-badge-filled'>;
+type IconListType = Extract<IconNames, 'error-legacy-badge-filled' | 'info-badge-filled' | 'dnd-presence-badge-filled' | 'check-circle-badge-filled' | 'warning-badge-filled'>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, AlertChip>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, AlertChip>;

package/dist/components/alertchip/alertchip.utils.js

@@ -2,10 +2,10 @@ import { VARIANTS } from './alertchip.constants';
 const getAlertIcon = (type) => {
     const alertIcon = {
         [VARIANTS.ERROR]: 'error-legacy-badge-filled',
-        [VARIANTS.WARNING]: 'warning-badge-filled',
-        [VARIANTS.SUCCESS]: 'check-circle-badge-filled',
         [VARIANTS.INFORMATIONAL]: 'info-badge-filled',
         [VARIANTS.NEUTRAL]: 'dnd-presence-badge-filled',
+        [VARIANTS.SUCCESS]: 'check-circle-badge-filled',
+        [VARIANTS.WARNING]: 'warning-badge-filled',
     };
     return alertIcon[type];
 };

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 = '';