@momentum-design/components 0.129.20 → 0.129.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/browser/index.js +2 -2
  2. package/dist/browser/index.js.map +3 -3
  3. package/dist/components/alertchip/alertchip.component.d.ts +7 -7
  4. package/dist/components/alertchip/alertchip.component.js +7 -14
  5. package/dist/components/alertchip/alertchip.constants.js +2 -1
  6. package/dist/components/alertchip/alertchip.types.d.ts +1 -1
  7. package/dist/components/alertchip/alertchip.utils.js +2 -2
  8. package/dist/components/buttonsimple/buttonsimple.component.d.ts +1 -1
  9. package/dist/components/card/card.component.d.ts +13 -23
  10. package/dist/components/card/card.component.js +13 -23
  11. package/dist/components/cardbutton/cardbutton.component.d.ts +13 -9
  12. package/dist/components/cardbutton/cardbutton.component.js +13 -9
  13. package/dist/components/cardcheckbox/cardcheckbox.component.d.ts +21 -15
  14. package/dist/components/cardcheckbox/cardcheckbox.component.js +21 -15
  15. package/dist/components/cardradio/cardradio.component.d.ts +21 -15
  16. package/dist/components/cardradio/cardradio.component.js +21 -15
  17. package/dist/custom-elements.json +87 -69
  18. package/dist/react/alertchip/index.d.ts +5 -5
  19. package/dist/react/alertchip/index.js +5 -5
  20. package/dist/react/card/index.d.ts +13 -23
  21. package/dist/react/card/index.js +13 -23
  22. package/dist/react/cardbutton/index.d.ts +13 -9
  23. package/dist/react/cardbutton/index.js +13 -9
  24. package/dist/react/cardcheckbox/index.d.ts +18 -14
  25. package/dist/react/cardcheckbox/index.js +18 -14
  26. package/dist/react/cardradio/index.d.ts +19 -14
  27. package/dist/react/cardradio/index.js +19 -14
  28. package/dist/utils/mixins/CardComponentMixin.js +7 -2
  29. package/package.json +1 -1
@@ -153,8 +153,8 @@
153
153
  "attribute": "disabled",
154
154
  "reflects": true,
155
155
  "inheritedFrom": {
156
- "name": "AccordionButton",
157
- "module": "components/accordionbutton/accordionbutton.component.js"
156
+ "name": "DisabledMixin",
157
+ "module": "utils/mixins/DisabledMixin.js"
158
158
  }
159
159
  },
160
160
  {
@@ -412,8 +412,8 @@
412
412
  "default": "undefined",
413
413
  "fieldName": "disabled",
414
414
  "inheritedFrom": {
415
- "name": "AccordionButton",
416
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
415
+ "name": "DisabledMixin",
416
+ "module": "src/utils/mixins/DisabledMixin.ts"
417
417
  }
418
418
  },
419
419
  {
@@ -1010,7 +1010,7 @@
1010
1010
  "declarations": [
1011
1011
  {
1012
1012
  "kind": "class",
1013
- "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
1013
+ "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - error, informational, neutral, success and warning.\n\nThis component is built by extending Buttonsimple.",
1014
1014
  "name": "AlertChip",
1015
1015
  "cssProperties": [
1016
1016
  {
@@ -1095,7 +1095,7 @@
1095
1095
  "text": "string | undefined"
1096
1096
  },
1097
1097
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
1098
- "default": "'aria-pressed' (when)",
1098
+ "default": "'aria-pressed'",
1099
1099
  "attribute": "ariaStateKey",
1100
1100
  "reflects": true,
1101
1101
  "inheritedFrom": {
@@ -1207,9 +1207,8 @@
1207
1207
  "kind": "field",
1208
1208
  "name": "label",
1209
1209
  "type": {
1210
- "text": "string"
1210
+ "text": "string | undefined"
1211
1211
  },
1212
- "default": "''",
1213
1212
  "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
1214
1213
  "attribute": "label"
1215
1214
  },
@@ -1411,7 +1410,7 @@
1411
1410
  "type": {
1412
1411
  "text": "VariantType"
1413
1412
  },
1414
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
1413
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- error\n- success\n- warning\n- informational",
1415
1414
  "default": "neutral",
1416
1415
  "attribute": "variant",
1417
1416
  "reflects": true
@@ -1419,7 +1418,7 @@
1419
1418
  ],
1420
1419
  "events": [
1421
1420
  {
1422
- "description": "(React: onClick) This event is dispatched when the chip is clicked.",
1421
+ "description": "(React: onClick) This event is dispatched when the alertchip is clicked.",
1423
1422
  "name": "click",
1424
1423
  "reactName": "onClick",
1425
1424
  "inheritedFrom": {
@@ -1428,7 +1427,7 @@
1428
1427
  }
1429
1428
  },
1430
1429
  {
1431
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the chip.",
1430
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.",
1432
1431
  "name": "keydown",
1433
1432
  "reactName": "onKeyDown",
1434
1433
  "inheritedFrom": {
@@ -1437,7 +1436,7 @@
1437
1436
  }
1438
1437
  },
1439
1438
  {
1440
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the chip.",
1439
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the alertchip.",
1441
1440
  "name": "keyup",
1442
1441
  "reactName": "onKeyUp",
1443
1442
  "inheritedFrom": {
@@ -1446,7 +1445,7 @@
1446
1445
  }
1447
1446
  },
1448
1447
  {
1449
- "description": "(React: onFocus) This event is dispatched when the chip receives focus.",
1448
+ "description": "(React: onFocus) This event is dispatched when the alertchip receives focus.",
1450
1449
  "name": "focus",
1451
1450
  "reactName": "onFocus",
1452
1451
  "inheritedFrom": {
@@ -1461,16 +1460,15 @@
1461
1460
  "type": {
1462
1461
  "text": "VariantType"
1463
1462
  },
1464
- "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
1463
+ "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- error\n- success\n- warning\n- informational",
1465
1464
  "default": "neutral",
1466
1465
  "fieldName": "variant"
1467
1466
  },
1468
1467
  {
1469
1468
  "name": "label",
1470
1469
  "type": {
1471
- "text": "string"
1470
+ "text": "string | undefined"
1472
1471
  },
1473
- "default": "''",
1474
1472
  "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
1475
1473
  "fieldName": "label"
1476
1474
  },
@@ -1583,7 +1581,7 @@
1583
1581
  "text": "string | undefined"
1584
1582
  },
1585
1583
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
1586
- "default": "'aria-pressed' (when)",
1584
+ "default": "'aria-pressed'",
1587
1585
  "fieldName": "ariaStateKey",
1588
1586
  "inheritedFrom": {
1589
1587
  "name": "Buttonsimple",
@@ -1639,7 +1637,7 @@
1639
1637
  "module": "/src/components/buttonsimple/buttonsimple.component"
1640
1638
  },
1641
1639
  "tagName": "mdc-alertchip",
1642
- "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
1640
+ "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - error, informational, neutral, success and warning.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.\n * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.\n */",
1643
1641
  "customElement": true,
1644
1642
  "slots": [
1645
1643
  {
@@ -3710,7 +3708,7 @@
3710
3708
  "text": "string | undefined"
3711
3709
  },
3712
3710
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
3713
- "default": "'aria-pressed' (when)",
3711
+ "default": "'aria-pressed'",
3714
3712
  "attribute": "ariaStateKey",
3715
3713
  "reflects": true,
3716
3714
  "inheritedFrom": {
@@ -4308,7 +4306,7 @@
4308
4306
  "text": "string | undefined"
4309
4307
  },
4310
4308
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
4311
- "default": "'aria-pressed' (when)",
4309
+ "default": "'aria-pressed'",
4312
4310
  "fieldName": "ariaStateKey",
4313
4311
  "inheritedFrom": {
4314
4312
  "name": "Buttonsimple",
@@ -5258,7 +5256,7 @@
5258
5256
  "text": "string | undefined"
5259
5257
  },
5260
5258
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
5261
- "default": "'aria-pressed' (when)",
5259
+ "default": "'aria-pressed'",
5262
5260
  "attribute": "ariaStateKey",
5263
5261
  "reflects": true,
5264
5262
  "inheritedFrom": {
@@ -5859,7 +5857,7 @@
5859
5857
  "text": "string | undefined"
5860
5858
  },
5861
5859
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
5862
- "default": "'aria-pressed' (when)",
5860
+ "default": "'aria-pressed'",
5863
5861
  "fieldName": "ariaStateKey",
5864
5862
  "inheritedFrom": {
5865
5863
  "name": "Buttonsimple",
@@ -6973,7 +6971,7 @@
6973
6971
  "text": "string | undefined"
6974
6972
  },
6975
6973
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
6976
- "default": "'aria-pressed' (when)",
6974
+ "default": "'aria-pressed'",
6977
6975
  "attribute": "ariaStateKey",
6978
6976
  "reflects": true
6979
6977
  },
@@ -7266,7 +7264,7 @@
7266
7264
  "text": "string | undefined"
7267
7265
  },
7268
7266
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
7269
- "default": "'aria-pressed' (when)",
7267
+ "default": "'aria-pressed'",
7270
7268
  "fieldName": "ariaStateKey"
7271
7269
  },
7272
7270
  {
@@ -7374,7 +7372,7 @@
7374
7372
  "declarations": [
7375
7373
  {
7376
7374
  "kind": "class",
7377
- "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'.",
7375
+ "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.\n\n## Card Structure\n- **Image**: Optional visual content at the top\n- **Header**: Contains icon, title, subtitle, and action buttons\n- **Body**: Main text content area\n- **Footer**: Optional footer with links and buttons\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.",
7378
7376
  "name": "Card",
7379
7377
  "cssProperties": [
7380
7378
  {
@@ -7441,6 +7439,10 @@
7441
7439
  "description": "This slot is for passing the content after the body",
7442
7440
  "name": "after-body"
7443
7441
  },
7442
+ {
7443
+ "description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
7444
+ "name": "icon-button"
7445
+ },
7444
7446
  {
7445
7447
  "description": "This slot is for passing `mdc-link` component within the footer section.",
7446
7448
  "name": "footer-link"
@@ -7524,7 +7526,7 @@
7524
7526
  "type": {
7525
7527
  "text": "CardOrientation"
7526
7528
  },
7527
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
7529
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
7528
7530
  "default": "'vertical'",
7529
7531
  "attribute": "orientation",
7530
7532
  "reflects": true,
@@ -7655,7 +7657,7 @@
7655
7657
  "type": {
7656
7658
  "text": "CardVariant"
7657
7659
  },
7658
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
7660
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
7659
7661
  "default": "'border'",
7660
7662
  "attribute": "variant",
7661
7663
  "reflects": true,
@@ -7680,7 +7682,7 @@
7680
7682
  "module": "/src/models"
7681
7683
  },
7682
7684
  "tagName": "mdc-card",
7683
- "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 image - This slot is for overriding the image content of the card\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 */",
7685
+ "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.\n * \n * ## Card Structure\n * - **Image**: Optional visual content at the top\n * - **Header**: Contains icon, title, subtitle, and action buttons\n * - **Body**: Main text content area\n * - **Footer**: Optional footer with links and buttons\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\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 icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)\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 * @cssproperty --mdc-card-width - The width of the card\n */",
7684
7686
  "customElement": true,
7685
7687
  "attributes": [
7686
7688
  {
@@ -7740,7 +7742,7 @@
7740
7742
  "type": {
7741
7743
  "text": "CardVariant"
7742
7744
  },
7743
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
7745
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
7744
7746
  "default": "'border'",
7745
7747
  "fieldName": "variant",
7746
7748
  "inheritedFrom": {
@@ -7753,7 +7755,7 @@
7753
7755
  "type": {
7754
7756
  "text": "CardOrientation"
7755
7757
  },
7756
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
7758
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
7757
7759
  "default": "'vertical'",
7758
7760
  "fieldName": "orientation",
7759
7761
  "inheritedFrom": {
@@ -7819,7 +7821,7 @@
7819
7821
  "declarations": [
7820
7822
  {
7821
7823
  "kind": "class",
7822
- "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.",
7824
+ "description": "cardbutton component looks like a card and behaves as a button component.\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Interacting anywhere on the card triggers the click event.\n- Use `name` and `value` attributes when using within forms.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
7823
7825
  "name": "CardButton",
7824
7826
  "cssProperties": [
7825
7827
  {
@@ -7958,7 +7960,7 @@
7958
7960
  "text": "string | undefined"
7959
7961
  },
7960
7962
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
7961
- "default": "'aria-pressed' (when)",
7963
+ "default": "'aria-pressed'",
7962
7964
  "attribute": "ariaStateKey",
7963
7965
  "reflects": true,
7964
7966
  "inheritedFrom": {
@@ -8132,7 +8134,7 @@
8132
8134
  "type": {
8133
8135
  "text": "CardOrientation"
8134
8136
  },
8135
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
8137
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
8136
8138
  "default": "'vertical'",
8137
8139
  "attribute": "orientation",
8138
8140
  "reflects": true,
@@ -8426,7 +8428,7 @@
8426
8428
  "type": {
8427
8429
  "text": "CardVariant"
8428
8430
  },
8429
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
8431
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
8430
8432
  "default": "'border'",
8431
8433
  "attribute": "variant",
8432
8434
  "reflects": true,
@@ -8485,7 +8487,7 @@
8485
8487
  "module": "/src/components/buttonsimple/buttonsimple.component"
8486
8488
  },
8487
8489
  "tagName": "mdc-cardbutton",
8488
- "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 image - This slot is for overriding the image content of the card\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 */",
8490
+ "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Interacting anywhere on the card triggers the click event.\n * - Use `name` and `value` attributes when using within forms.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\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 * @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 * @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 */",
8489
8491
  "customElement": true,
8490
8492
  "attributes": [
8491
8493
  {
@@ -8545,7 +8547,7 @@
8545
8547
  "type": {
8546
8548
  "text": "CardVariant"
8547
8549
  },
8548
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
8550
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
8549
8551
  "default": "'border'",
8550
8552
  "fieldName": "variant",
8551
8553
  "inheritedFrom": {
@@ -8558,7 +8560,7 @@
8558
8560
  "type": {
8559
8561
  "text": "CardOrientation"
8560
8562
  },
8561
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
8563
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
8562
8564
  "default": "'vertical'",
8563
8565
  "fieldName": "orientation",
8564
8566
  "inheritedFrom": {
@@ -8701,7 +8703,7 @@
8701
8703
  "text": "string | undefined"
8702
8704
  },
8703
8705
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
8704
- "default": "'aria-pressed' (when)",
8706
+ "default": "'aria-pressed'",
8705
8707
  "fieldName": "ariaStateKey",
8706
8708
  "inheritedFrom": {
8707
8709
  "name": "Buttonsimple",
@@ -8765,7 +8767,7 @@
8765
8767
  "declarations": [
8766
8768
  {
8767
8769
  "kind": "class",
8768
- "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.",
8770
+ "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.\nMultiple cards can be checked simultaneously.\n\n## Features\n- Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).\n- Interacting anywhere on the card toggles the checked state and dispatches a `change` event.\n- Card has `role=\"checkbox\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n\n## Usage\n- The `card-title` attribute is required.\n- When using within a form or group, wrap cards in a container with `role=\"group\"` and provide an `aria-label`.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
8769
8771
  "name": "CardCheckbox",
8770
8772
  "cssProperties": [
8771
8773
  {
@@ -8920,6 +8922,14 @@
8920
8922
  "module": "src/components/card/card.component.ts"
8921
8923
  }
8922
8924
  },
8925
+ {
8926
+ "description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
8927
+ "name": "icon-button",
8928
+ "inheritedFrom": {
8929
+ "name": "Card",
8930
+ "module": "src/components/card/card.component.ts"
8931
+ }
8932
+ },
8923
8933
  {
8924
8934
  "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
8925
8935
  "name": "footer-button-secondary",
@@ -9029,7 +9039,7 @@
9029
9039
  "type": {
9030
9040
  "text": "CardOrientation"
9031
9041
  },
9032
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
9042
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
9033
9043
  "default": "'vertical'",
9034
9044
  "attribute": "orientation",
9035
9045
  "reflects": true,
@@ -9130,7 +9140,7 @@
9130
9140
  "type": {
9131
9141
  "text": "SelectionType"
9132
9142
  },
9133
- "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
9143
+ "description": "The selection type of the card that determines the visual indicator.\n- `check`: Shows a check icon when selected\n- `checkbox`: Shows a checkbox component when selected or unselected",
9134
9144
  "default": "'check'",
9135
9145
  "attribute": "selection-type",
9136
9146
  "reflects": true
@@ -9237,7 +9247,7 @@
9237
9247
  "type": {
9238
9248
  "text": "CardVariant"
9239
9249
  },
9240
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
9250
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
9241
9251
  "default": "'border'",
9242
9252
  "attribute": "variant",
9243
9253
  "reflects": true,
@@ -9292,7 +9302,7 @@
9292
9302
  "type": {
9293
9303
  "text": "SelectionType"
9294
9304
  },
9295
- "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
9305
+ "description": "The selection type of the card that determines the visual indicator.\n- `check`: Shows a check icon when selected\n- `checkbox`: Shows a checkbox component when selected or unselected",
9296
9306
  "default": "'check'",
9297
9307
  "fieldName": "selectionType"
9298
9308
  },
@@ -9379,7 +9389,7 @@
9379
9389
  "type": {
9380
9390
  "text": "CardVariant"
9381
9391
  },
9382
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
9392
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
9383
9393
  "default": "'border'",
9384
9394
  "fieldName": "variant",
9385
9395
  "inheritedFrom": {
@@ -9392,7 +9402,7 @@
9392
9402
  "type": {
9393
9403
  "text": "CardOrientation"
9394
9404
  },
9395
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
9405
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
9396
9406
  "default": "'vertical'",
9397
9407
  "fieldName": "orientation",
9398
9408
  "inheritedFrom": {
@@ -9454,7 +9464,7 @@
9454
9464
  "module": "/src/components/card/card.component"
9455
9465
  },
9456
9466
  "tagName": "mdc-cardcheckbox",
9457
- "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 focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
9467
+ "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.\n * Multiple cards can be checked simultaneously.\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).\n * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.\n * - Card has `role=\"checkbox\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n *\n * ## Usage\n * - The `card-title` attribute is required.\n * - When using within a form or group, wrap cards in a container with `role=\"group\"` and provide an `aria-label`.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\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 * @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 focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\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 */",
9458
9468
  "customElement": true
9459
9469
  }
9460
9470
  ],
@@ -9475,7 +9485,7 @@
9475
9485
  "declarations": [
9476
9486
  {
9477
9487
  "kind": "class",
9478
- "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.",
9488
+ "description": "cardradio component extends `mdc-card` and supports radio selection interaction.\nOnly one card can be selected at a time within the same group (defined by `name` attribute).\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.\n- Supports keyboard navigation with arrow keys to move between cards in the same group.\n- Card has `role=\"radio\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n\n## Usage\n- Both `card-title` and `name` attributes are required.\n- When using within a form or group, wrap cards in a container with `role=\"radiogroup\"` and provide an `aria-label`.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
9479
9489
  "name": "CardRadio",
9480
9490
  "cssProperties": [
9481
9491
  {
@@ -9630,6 +9640,14 @@
9630
9640
  "module": "src/components/card/card.component.ts"
9631
9641
  }
9632
9642
  },
9643
+ {
9644
+ "description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
9645
+ "name": "icon-button",
9646
+ "inheritedFrom": {
9647
+ "name": "Card",
9648
+ "module": "src/components/card/card.component.ts"
9649
+ }
9650
+ },
9633
9651
  {
9634
9652
  "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
9635
9653
  "name": "footer-button-secondary",
@@ -9751,7 +9769,7 @@
9751
9769
  "text": "string"
9752
9770
  },
9753
9771
  "default": "''",
9754
- "description": "The name of the radio.",
9772
+ "description": "The name of the radio group. Cards with the same name are grouped together,\nensuring only one card in the group can be selected at a time.",
9755
9773
  "attribute": "name"
9756
9774
  },
9757
9775
  {
@@ -9760,7 +9778,7 @@
9760
9778
  "type": {
9761
9779
  "text": "CardOrientation"
9762
9780
  },
9763
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
9781
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
9764
9782
  "default": "'vertical'",
9765
9783
  "attribute": "orientation",
9766
9784
  "reflects": true,
@@ -9992,7 +10010,7 @@
9992
10010
  "type": {
9993
10011
  "text": "CardVariant"
9994
10012
  },
9995
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
10013
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
9996
10014
  "default": "'border'",
9997
10015
  "attribute": "variant",
9998
10016
  "reflects": true,
@@ -10012,17 +10030,17 @@
10012
10030
  "reactName": "onChange"
10013
10031
  },
10014
10032
  {
10015
- "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
10033
+ "description": "(React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.",
10016
10034
  "name": "click",
10017
10035
  "reactName": "onClick"
10018
10036
  },
10019
10037
  {
10020
- "description": "(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.",
10038
+ "description": "(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.",
10021
10039
  "name": "keydown",
10022
10040
  "reactName": "onKeyDown"
10023
10041
  },
10024
10042
  {
10025
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
10043
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It selects the card when space key is used.",
10026
10044
  "name": "keyup",
10027
10045
  "reactName": "onKeyUp"
10028
10046
  },
@@ -10048,7 +10066,7 @@
10048
10066
  "text": "string"
10049
10067
  },
10050
10068
  "default": "''",
10051
- "description": "The name of the radio.",
10069
+ "description": "The name of the radio group. Cards with the same name are grouped together,\nensuring only one card in the group can be selected at a time.",
10052
10070
  "fieldName": "name"
10053
10071
  },
10054
10072
  {
@@ -10134,7 +10152,7 @@
10134
10152
  "type": {
10135
10153
  "text": "CardVariant"
10136
10154
  },
10137
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
10155
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
10138
10156
  "default": "'border'",
10139
10157
  "fieldName": "variant",
10140
10158
  "inheritedFrom": {
@@ -10147,7 +10165,7 @@
10147
10165
  "type": {
10148
10166
  "text": "CardOrientation"
10149
10167
  },
10150
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
10168
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
10151
10169
  "default": "'vertical'",
10152
10170
  "fieldName": "orientation",
10153
10171
  "inheritedFrom": {
@@ -10209,7 +10227,7 @@
10209
10227
  "module": "/src/components/card/card.component"
10210
10228
  },
10211
10229
  "tagName": "mdc-cardradio",
10212
- "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 focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
10230
+ "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction.\n * Only one card can be selected at a time within the same group (defined by `name` attribute).\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.\n * - Supports keyboard navigation with arrow keys to move between cards in the same group.\n * - Card has `role=\"radio\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n *\n * ## Usage\n * - Both `card-title` and `name` attributes are required.\n * - When using within a form or group, wrap cards in a container with `role=\"radiogroup\"` and provide an `aria-label`.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\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 * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It selects the card when enter key or arrow keys are used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It selects the card when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\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 */",
10213
10231
  "customElement": true
10214
10232
  }
10215
10233
  ],
@@ -11272,7 +11290,7 @@
11272
11290
  "text": "string | undefined"
11273
11291
  },
11274
11292
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
11275
- "default": "'aria-pressed' (when)",
11293
+ "default": "'aria-pressed'",
11276
11294
  "attribute": "ariaStateKey",
11277
11295
  "reflects": true,
11278
11296
  "inheritedFrom": {
@@ -11771,7 +11789,7 @@
11771
11789
  "text": "string | undefined"
11772
11790
  },
11773
11791
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
11774
- "default": "'aria-pressed' (when)",
11792
+ "default": "'aria-pressed'",
11775
11793
  "fieldName": "ariaStateKey",
11776
11794
  "inheritedFrom": {
11777
11795
  "name": "Buttonsimple",
@@ -16770,7 +16788,7 @@
16770
16788
  "text": "string | undefined"
16771
16789
  },
16772
16790
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
16773
- "default": "'aria-pressed' (when)",
16791
+ "default": "'aria-pressed'",
16774
16792
  "attribute": "ariaStateKey",
16775
16793
  "reflects": true,
16776
16794
  "inheritedFrom": {
@@ -17329,7 +17347,7 @@
17329
17347
  "text": "string | undefined"
17330
17348
  },
17331
17349
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
17332
- "default": "'aria-pressed' (when)",
17350
+ "default": "'aria-pressed'",
17333
17351
  "fieldName": "ariaStateKey",
17334
17352
  "inheritedFrom": {
17335
17353
  "name": "Buttonsimple",
@@ -21364,7 +21382,7 @@
21364
21382
  "text": "string | undefined"
21365
21383
  },
21366
21384
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
21367
- "default": "'aria-pressed' (when)",
21385
+ "default": "'aria-pressed'",
21368
21386
  "attribute": "ariaStateKey",
21369
21387
  "reflects": true,
21370
21388
  "inheritedFrom": {
@@ -21858,7 +21876,7 @@
21858
21876
  "text": "string | undefined"
21859
21877
  },
21860
21878
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
21861
- "default": "'aria-pressed' (when)",
21879
+ "default": "'aria-pressed'",
21862
21880
  "fieldName": "ariaStateKey",
21863
21881
  "inheritedFrom": {
21864
21882
  "name": "Buttonsimple",
@@ -45927,7 +45945,7 @@
45927
45945
  "text": "string | undefined"
45928
45946
  },
45929
45947
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
45930
- "default": "'aria-pressed' (when)",
45948
+ "default": "'aria-pressed'",
45931
45949
  "attribute": "ariaStateKey",
45932
45950
  "reflects": true,
45933
45951
  "inheritedFrom": {
@@ -46490,7 +46508,7 @@
46490
46508
  "text": "string | undefined"
46491
46509
  },
46492
46510
  "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
46493
- "default": "'aria-pressed' (when)",
46511
+ "default": "'aria-pressed'",
46494
46512
  "fieldName": "ariaStateKey",
46495
46513
  "inheritedFrom": {
46496
46514
  "name": "Buttonsimple",
@@ -55205,7 +55223,7 @@
55205
55223
  "type": {
55206
55224
  "text": "CardOrientation"
55207
55225
  },
55208
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
55226
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
55209
55227
  "default": "'vertical'",
55210
55228
  "attribute": "orientation",
55211
55229
  "reflects": true
@@ -55282,7 +55300,7 @@
55282
55300
  "type": {
55283
55301
  "text": "CardVariant"
55284
55302
  },
55285
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
55303
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
55286
55304
  "default": "'border'",
55287
55305
  "attribute": "variant",
55288
55306
  "reflects": true
@@ -55330,7 +55348,7 @@
55330
55348
  "type": {
55331
55349
  "text": "CardVariant"
55332
55350
  },
55333
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
55351
+ "description": "The variant of the card that represents the border styling.\n- `border`: Card with border (default)\n- `ghost`: Card without border\n- `promotional`: Card with promotional styling",
55334
55352
  "default": "'border'",
55335
55353
  "fieldName": "variant"
55336
55354
  },
@@ -55339,7 +55357,7 @@
55339
55357
  "type": {
55340
55358
  "text": "CardOrientation"
55341
55359
  },
55342
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
55360
+ "description": "The orientation of the card.\n- `vertical`: Card in vertical layout with min-width of 20rem (default)\n- `horizontal`: Card in horizontal layout with min-width of 40rem",
55343
55361
  "default": "'vertical'",
55344
55362
  "fieldName": "orientation"
55345
55363
  },