@momentum-design/components 0.129.21 → 0.129.22

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

@@ -1,32 +1,28 @@
 import Component from '../../components/card';
 /**
  * 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.
@@ -46,13 +42,7 @@ import Component from '../../components/card';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/card/index.js

@@ -4,32 +4,28 @@ import Component from '../../components/card';
 import { TAG_NAME } from '../../components/card/card.constants';
 /**
  * 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.
@@ -49,13 +45,7 @@ import { TAG_NAME } from '../../components/card/card.constants';
  * @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
- *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -4,21 +4,18 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
 /**
  * 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 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @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/react/cardbutton/index.js

@@ -5,21 +5,18 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
 /**
  * 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
@@ -27,6 +24,13 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * @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/react/cardcheckbox/index.d.ts

@@ -2,15 +2,19 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/cardcheckbox';
 import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
 /**
- * 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
  *
@@ -24,6 +28,14 @@ import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
  * @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
@@ -39,14 +51,6 @@ import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/cardcheckbox/index.js

@@ -3,15 +3,19 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/cardcheckbox';
 import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
 /**
- * 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 @@ import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
  * @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 @@ import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -2,15 +2,20 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/cardradio';
 import type { Events } from '../../components/cardradio/cardradio.types';
 /**
- * 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 @@ import type { Events } from '../../components/cardradio/cardradio.types';
  * @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 @@ import type { Events } from '../../components/cardradio/cardradio.types';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/cardradio/index.js

@@ -3,15 +3,20 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/cardradio';
 import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
 /**
- * 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
  *
@@ -25,6 +30,14 @@ import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
  * @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
@@ -40,14 +53,6 @@ import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/mixins/CardComponentMixin.js

@@ -36,12 +36,17 @@ export const CardComponentMixin = (superClass) => {
              */
             this.imageAlt = '';
             /**
-             * The variant of the card. It can either be set to 'border' or 'ghost'
+             * The variant of the card that represents the border styling.
+             * - `border`: Card with border (default)
+             * - `ghost`: Card without border
+             * - `promotional`: Card with promotional styling
              * @default 'border'
              */
             this.variant = DEFAULTS.VARIANT;
             /**
-             * The orientation of the card. It can either be set to 'vertical' or 'horizontal'
+             * The orientation of the card.
+             * - `vertical`: Card in vertical layout with min-width of 20rem (default)
+             * - `horizontal`: Card in horizontal layout with min-width of 40rem
              * @default 'vertical'
              */
             this.orientation = DEFAULTS.ORIENTATION;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.21",
+  "version": "0.129.22",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"