@momentum-design/components 0.98.0 → 0.98.1

package/dist/custom-elements.json

@@ -4106,37 +4106,57 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of\n`mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
+          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe 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.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
           "name": "Card",
-          "slots": [
+          "cssProperties": [
             {
-              "description": "This slot is for passing the content before the body",
-              "name": "before-body"
+              "description": "The width of the card",
+              "name": "--mdc-card-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header"
             },
             {
-              "description": "This slot is for passing the text content for the card",
+              "description": "The icon part of the card header",
+              "name": "icon"
+            },
+            {
+              "description": "The body part of the card",
               "name": "body"
             },
             {
-              "description": "This slot is for passing the content after the body",
-              "name": "after-body"
+              "description": "The image part of the card",
+              "name": "image"
             },
             {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "description": "The footer part of the card",
+              "name": "footer"
+            },
+            {
+              "description": "The link part of the card footer",
               "name": "footer-link"
             },
             {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "description": "The primary button part of the card footer",
               "name": "footer-button-primary"
             },
             {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "description": "The secondary button part of the card footer",
               "name": "footer-button-secondary"
             },
             {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
-              "name": "footer"
+              "description": "The icon button part of the card header",
+              "name": "icon-button"
             },
+            {
+              "description": "The text part of the card",
+              "name": "text"
+            }
+          ],
+          "slots": [
             {
               "description": "This slot is for passing the content before the body",
               "name": "before-body"
@@ -4148,6 +4168,22 @@
             {
               "description": "This slot is for passing the content after the body",
               "name": "after-body"
+            },
+            {
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link"
+            },
+            {
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary"
+            },
+            {
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary"
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -4372,7 +4408,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-card",
-          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
+          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * 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.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
           "customElement": true,
           "attributes": [
             {
@@ -4513,6 +4549,54 @@
           "kind": "class",
           "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
           "name": "CardButton",
+          "cssProperties": [
+            {
+              "description": "The width of the card",
+              "name": "--mdc-card-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header"
+            },
+            {
+              "description": "The icon part of the card header",
+              "name": "icon"
+            },
+            {
+              "description": "The body part of the card",
+              "name": "body"
+            },
+            {
+              "description": "The image part of the card",
+              "name": "image"
+            },
+            {
+              "description": "The footer part of the card",
+              "name": "footer"
+            },
+            {
+              "description": "The link part of the card footer",
+              "name": "footer-link"
+            },
+            {
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary"
+            },
+            {
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary"
+            },
+            {
+              "description": "The icon button part of the card header",
+              "name": "icon-button"
+            },
+            {
+              "description": "The text part of the card",
+              "name": "text"
+            }
+          ],
           "slots": [
             {
               "description": "This slot is for passing the content before the body",
@@ -4525,6 +4609,14 @@
             {
               "description": "This slot is for passing the content after the body",
               "name": "after-body"
+            },
+            {
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link"
+            },
+            {
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary"
             }
           ],
           "members": [
@@ -5049,7 +5141,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-cardbutton",
-          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
           "customElement": true,
           "attributes": [
             {
@@ -5307,6 +5399,110 @@
           "kind": "class",
           "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
           "name": "CardCheckbox",
+          "cssProperties": [
+            {
+              "description": "The width of the card",
+              "name": "--mdc-card-width",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon part of the card header",
+              "name": "icon",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The body part of the card",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The image part of the card",
+              "name": "image",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The footer part of the card",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The link part of the card footer",
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon button part of the card header",
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The text part of the card",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The check part of the card",
+              "name": "check"
+            },
+            {
+              "description": "The check icon part of the card",
+              "name": "check-icon"
+            },
+            {
+              "description": "The check icon button part of the card",
+              "name": "check-icon-button"
+            }
+          ],
           "slots": [
             {
               "description": "This slot is for passing the content before the body",
@@ -5879,7 +6075,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event change - (React: onChange) Event that gets dispatched when the card state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event change - (React: onChange) Event that gets dispatched when the card state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
           "customElement": true
         }
       ],
@@ -5902,6 +6098,110 @@
           "kind": "class",
           "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
           "name": "CardRadio",
+          "cssProperties": [
+            {
+              "description": "The width of the card",
+              "name": "--mdc-card-width",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon part of the card header",
+              "name": "icon",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The body part of the card",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The image part of the card",
+              "name": "image",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The footer part of the card",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The link part of the card footer",
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon button part of the card header",
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The text part of the card",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The check part of the card",
+              "name": "check"
+            },
+            {
+              "description": "The check icon part of the card",
+              "name": "check-icon"
+            },
+            {
+              "description": "The check icon button part of the card",
+              "name": "check-icon-button"
+            }
+          ],
           "slots": [
             {
               "description": "This slot is for passing the content before the body",
@@ -6519,7 +6819,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event change - (React: onChange) Event that gets dispatched when the card state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event change - (React: onChange) Event that gets dispatched when the card state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
           "customElement": true
         }
       ],

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

@@ -10,15 +10,14 @@ import Component from '../../components/card';
  *    - Subtitle
  * - Body
  *
- * The card can either be vertically or horizontally oriented.
+ * 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.
  *
  * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
  *
  * 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-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.
  *
@@ -35,14 +34,23 @@ import Component from '../../components/card';
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred.
  *
+ * @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
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @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
  *
- * @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
+ * @cssproperty --mdc-card-width - The width of the card
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/card/index.js

@@ -13,15 +13,14 @@ import { TAG_NAME } from '../../components/card/card.constants';
  *    - Subtitle
  * - Body
  *
- * The card can either be vertically or horizontally oriented.
+ * 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.
  *
  * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
  *
  * 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-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.
  *
@@ -38,14 +37,23 @@ import { TAG_NAME } from '../../components/card/card.constants';
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred.
  *
+ * @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
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @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
  *
- * @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
+ * @cssproperty --mdc-card-width - The width of the card
  *
  */
 const reactWrapper = createComponent({

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

@@ -11,10 +11,6 @@ import Component from '../../components/cardbutton';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @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
- *
  * @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.
@@ -22,6 +18,24 @@ import Component from '../../components/cardbutton';
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @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 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.
+ *
+ * @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
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/cardbutton/index.js

@@ -13,10 +13,6 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @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
- *
  * @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.
@@ -24,6 +20,24 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @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 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.
+ *
+ * @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
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -20,6 +20,24 @@ import Component from '../../components/cardcheckbox';
  * @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 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.
+ *
+ * @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
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @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.