@momentum-design/components 0.129.21 → 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.
- package/dist/browser/index.js.map +2 -2
- package/dist/components/buttonsimple/buttonsimple.component.d.ts +1 -1
- package/dist/components/card/card.component.d.ts +13 -23
- package/dist/components/card/card.component.js +13 -23
- package/dist/components/cardbutton/cardbutton.component.d.ts +13 -9
- package/dist/components/cardbutton/cardbutton.component.js +13 -9
- package/dist/components/cardcheckbox/cardcheckbox.component.d.ts +21 -15
- package/dist/components/cardcheckbox/cardcheckbox.component.js +21 -15
- package/dist/components/cardradio/cardradio.component.d.ts +21 -15
- package/dist/components/cardradio/cardradio.component.js +21 -15
- package/dist/custom-elements.json +73 -53
- package/dist/react/card/index.d.ts +13 -23
- package/dist/react/card/index.js +13 -23
- package/dist/react/cardbutton/index.d.ts +13 -9
- package/dist/react/cardbutton/index.js +13 -9
- package/dist/react/cardcheckbox/index.d.ts +18 -14
- package/dist/react/cardcheckbox/index.js +18 -14
- package/dist/react/cardradio/index.d.ts +19 -14
- package/dist/react/cardradio/index.js +19 -14
- package/dist/utils/mixins/CardComponentMixin.js +7 -2
- package/package.json +1 -1
|
@@ -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'
|
|
1098
|
+
"default": "'aria-pressed'",
|
|
1099
1099
|
"attribute": "ariaStateKey",
|
|
1100
1100
|
"reflects": true,
|
|
1101
1101
|
"inheritedFrom": {
|
|
@@ -1581,7 +1581,7 @@
|
|
|
1581
1581
|
"text": "string | undefined"
|
|
1582
1582
|
},
|
|
1583
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`",
|
|
1584
|
-
"default": "'aria-pressed'
|
|
1584
|
+
"default": "'aria-pressed'",
|
|
1585
1585
|
"fieldName": "ariaStateKey",
|
|
1586
1586
|
"inheritedFrom": {
|
|
1587
1587
|
"name": "Buttonsimple",
|
|
@@ -3708,7 +3708,7 @@
|
|
|
3708
3708
|
"text": "string | undefined"
|
|
3709
3709
|
},
|
|
3710
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`",
|
|
3711
|
-
"default": "'aria-pressed'
|
|
3711
|
+
"default": "'aria-pressed'",
|
|
3712
3712
|
"attribute": "ariaStateKey",
|
|
3713
3713
|
"reflects": true,
|
|
3714
3714
|
"inheritedFrom": {
|
|
@@ -4306,7 +4306,7 @@
|
|
|
4306
4306
|
"text": "string | undefined"
|
|
4307
4307
|
},
|
|
4308
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`",
|
|
4309
|
-
"default": "'aria-pressed'
|
|
4309
|
+
"default": "'aria-pressed'",
|
|
4310
4310
|
"fieldName": "ariaStateKey",
|
|
4311
4311
|
"inheritedFrom": {
|
|
4312
4312
|
"name": "Buttonsimple",
|
|
@@ -5256,7 +5256,7 @@
|
|
|
5256
5256
|
"text": "string | undefined"
|
|
5257
5257
|
},
|
|
5258
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`",
|
|
5259
|
-
"default": "'aria-pressed'
|
|
5259
|
+
"default": "'aria-pressed'",
|
|
5260
5260
|
"attribute": "ariaStateKey",
|
|
5261
5261
|
"reflects": true,
|
|
5262
5262
|
"inheritedFrom": {
|
|
@@ -5857,7 +5857,7 @@
|
|
|
5857
5857
|
"text": "string | undefined"
|
|
5858
5858
|
},
|
|
5859
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`",
|
|
5860
|
-
"default": "'aria-pressed'
|
|
5860
|
+
"default": "'aria-pressed'",
|
|
5861
5861
|
"fieldName": "ariaStateKey",
|
|
5862
5862
|
"inheritedFrom": {
|
|
5863
5863
|
"name": "Buttonsimple",
|
|
@@ -6971,7 +6971,7 @@
|
|
|
6971
6971
|
"text": "string | undefined"
|
|
6972
6972
|
},
|
|
6973
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`",
|
|
6974
|
-
"default": "'aria-pressed'
|
|
6974
|
+
"default": "'aria-pressed'",
|
|
6975
6975
|
"attribute": "ariaStateKey",
|
|
6976
6976
|
"reflects": true
|
|
6977
6977
|
},
|
|
@@ -7264,7 +7264,7 @@
|
|
|
7264
7264
|
"text": "string | undefined"
|
|
7265
7265
|
},
|
|
7266
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`",
|
|
7267
|
-
"default": "'aria-pressed'
|
|
7267
|
+
"default": "'aria-pressed'",
|
|
7268
7268
|
"fieldName": "ariaStateKey"
|
|
7269
7269
|
},
|
|
7270
7270
|
{
|
|
@@ -7372,7 +7372,7 @@
|
|
|
7372
7372
|
"declarations": [
|
|
7373
7373
|
{
|
|
7374
7374
|
"kind": "class",
|
|
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
|
|
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.",
|
|
7376
7376
|
"name": "Card",
|
|
7377
7377
|
"cssProperties": [
|
|
7378
7378
|
{
|
|
@@ -7439,6 +7439,10 @@
|
|
|
7439
7439
|
"description": "This slot is for passing the content after the body",
|
|
7440
7440
|
"name": "after-body"
|
|
7441
7441
|
},
|
|
7442
|
+
{
|
|
7443
|
+
"description": "This slot supports action icon buttons in the header section (maximum of 3 buttons)",
|
|
7444
|
+
"name": "icon-button"
|
|
7445
|
+
},
|
|
7442
7446
|
{
|
|
7443
7447
|
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
|
7444
7448
|
"name": "footer-link"
|
|
@@ -7522,7 +7526,7 @@
|
|
|
7522
7526
|
"type": {
|
|
7523
7527
|
"text": "CardOrientation"
|
|
7524
7528
|
},
|
|
7525
|
-
"description": "The orientation of the card
|
|
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",
|
|
7526
7530
|
"default": "'vertical'",
|
|
7527
7531
|
"attribute": "orientation",
|
|
7528
7532
|
"reflects": true,
|
|
@@ -7653,7 +7657,7 @@
|
|
|
7653
7657
|
"type": {
|
|
7654
7658
|
"text": "CardVariant"
|
|
7655
7659
|
},
|
|
7656
|
-
"description": "The variant of the card
|
|
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",
|
|
7657
7661
|
"default": "'border'",
|
|
7658
7662
|
"attribute": "variant",
|
|
7659
7663
|
"reflects": true,
|
|
@@ -7678,7 +7682,7 @@
|
|
|
7678
7682
|
"module": "/src/models"
|
|
7679
7683
|
},
|
|
7680
7684
|
"tagName": "mdc-card",
|
|
7681
|
-
"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
|
|
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 */",
|
|
7682
7686
|
"customElement": true,
|
|
7683
7687
|
"attributes": [
|
|
7684
7688
|
{
|
|
@@ -7738,7 +7742,7 @@
|
|
|
7738
7742
|
"type": {
|
|
7739
7743
|
"text": "CardVariant"
|
|
7740
7744
|
},
|
|
7741
|
-
"description": "The variant of the card
|
|
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",
|
|
7742
7746
|
"default": "'border'",
|
|
7743
7747
|
"fieldName": "variant",
|
|
7744
7748
|
"inheritedFrom": {
|
|
@@ -7751,7 +7755,7 @@
|
|
|
7751
7755
|
"type": {
|
|
7752
7756
|
"text": "CardOrientation"
|
|
7753
7757
|
},
|
|
7754
|
-
"description": "The orientation of the card
|
|
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",
|
|
7755
7759
|
"default": "'vertical'",
|
|
7756
7760
|
"fieldName": "orientation",
|
|
7757
7761
|
"inheritedFrom": {
|
|
@@ -7817,7 +7821,7 @@
|
|
|
7817
7821
|
"declarations": [
|
|
7818
7822
|
{
|
|
7819
7823
|
"kind": "class",
|
|
7820
|
-
"description": "cardbutton component looks like a card and behaves as a button component.\n\n
|
|
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.",
|
|
7821
7825
|
"name": "CardButton",
|
|
7822
7826
|
"cssProperties": [
|
|
7823
7827
|
{
|
|
@@ -7956,7 +7960,7 @@
|
|
|
7956
7960
|
"text": "string | undefined"
|
|
7957
7961
|
},
|
|
7958
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`",
|
|
7959
|
-
"default": "'aria-pressed'
|
|
7963
|
+
"default": "'aria-pressed'",
|
|
7960
7964
|
"attribute": "ariaStateKey",
|
|
7961
7965
|
"reflects": true,
|
|
7962
7966
|
"inheritedFrom": {
|
|
@@ -8130,7 +8134,7 @@
|
|
|
8130
8134
|
"type": {
|
|
8131
8135
|
"text": "CardOrientation"
|
|
8132
8136
|
},
|
|
8133
|
-
"description": "The orientation of the card
|
|
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",
|
|
8134
8138
|
"default": "'vertical'",
|
|
8135
8139
|
"attribute": "orientation",
|
|
8136
8140
|
"reflects": true,
|
|
@@ -8424,7 +8428,7 @@
|
|
|
8424
8428
|
"type": {
|
|
8425
8429
|
"text": "CardVariant"
|
|
8426
8430
|
},
|
|
8427
|
-
"description": "The variant of the card
|
|
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",
|
|
8428
8432
|
"default": "'border'",
|
|
8429
8433
|
"attribute": "variant",
|
|
8430
8434
|
"reflects": true,
|
|
@@ -8483,7 +8487,7 @@
|
|
|
8483
8487
|
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
8484
8488
|
},
|
|
8485
8489
|
"tagName": "mdc-cardbutton",
|
|
8486
|
-
"jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\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 */",
|
|
8487
8491
|
"customElement": true,
|
|
8488
8492
|
"attributes": [
|
|
8489
8493
|
{
|
|
@@ -8543,7 +8547,7 @@
|
|
|
8543
8547
|
"type": {
|
|
8544
8548
|
"text": "CardVariant"
|
|
8545
8549
|
},
|
|
8546
|
-
"description": "The variant of the card
|
|
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",
|
|
8547
8551
|
"default": "'border'",
|
|
8548
8552
|
"fieldName": "variant",
|
|
8549
8553
|
"inheritedFrom": {
|
|
@@ -8556,7 +8560,7 @@
|
|
|
8556
8560
|
"type": {
|
|
8557
8561
|
"text": "CardOrientation"
|
|
8558
8562
|
},
|
|
8559
|
-
"description": "The orientation of the card
|
|
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",
|
|
8560
8564
|
"default": "'vertical'",
|
|
8561
8565
|
"fieldName": "orientation",
|
|
8562
8566
|
"inheritedFrom": {
|
|
@@ -8699,7 +8703,7 @@
|
|
|
8699
8703
|
"text": "string | undefined"
|
|
8700
8704
|
},
|
|
8701
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`",
|
|
8702
|
-
"default": "'aria-pressed'
|
|
8706
|
+
"default": "'aria-pressed'",
|
|
8703
8707
|
"fieldName": "ariaStateKey",
|
|
8704
8708
|
"inheritedFrom": {
|
|
8705
8709
|
"name": "Buttonsimple",
|
|
@@ -8763,7 +8767,7 @@
|
|
|
8763
8767
|
"declarations": [
|
|
8764
8768
|
{
|
|
8765
8769
|
"kind": "class",
|
|
8766
|
-
"description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction
|
|
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.",
|
|
8767
8771
|
"name": "CardCheckbox",
|
|
8768
8772
|
"cssProperties": [
|
|
8769
8773
|
{
|
|
@@ -8918,6 +8922,14 @@
|
|
|
8918
8922
|
"module": "src/components/card/card.component.ts"
|
|
8919
8923
|
}
|
|
8920
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
|
+
},
|
|
8921
8933
|
{
|
|
8922
8934
|
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
8923
8935
|
"name": "footer-button-secondary",
|
|
@@ -9027,7 +9039,7 @@
|
|
|
9027
9039
|
"type": {
|
|
9028
9040
|
"text": "CardOrientation"
|
|
9029
9041
|
},
|
|
9030
|
-
"description": "The orientation of the card
|
|
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",
|
|
9031
9043
|
"default": "'vertical'",
|
|
9032
9044
|
"attribute": "orientation",
|
|
9033
9045
|
"reflects": true,
|
|
@@ -9128,7 +9140,7 @@
|
|
|
9128
9140
|
"type": {
|
|
9129
9141
|
"text": "SelectionType"
|
|
9130
9142
|
},
|
|
9131
|
-
"description": "The selection type of the card
|
|
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",
|
|
9132
9144
|
"default": "'check'",
|
|
9133
9145
|
"attribute": "selection-type",
|
|
9134
9146
|
"reflects": true
|
|
@@ -9235,7 +9247,7 @@
|
|
|
9235
9247
|
"type": {
|
|
9236
9248
|
"text": "CardVariant"
|
|
9237
9249
|
},
|
|
9238
|
-
"description": "The variant of the card
|
|
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",
|
|
9239
9251
|
"default": "'border'",
|
|
9240
9252
|
"attribute": "variant",
|
|
9241
9253
|
"reflects": true,
|
|
@@ -9290,7 +9302,7 @@
|
|
|
9290
9302
|
"type": {
|
|
9291
9303
|
"text": "SelectionType"
|
|
9292
9304
|
},
|
|
9293
|
-
"description": "The selection type of the card
|
|
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",
|
|
9294
9306
|
"default": "'check'",
|
|
9295
9307
|
"fieldName": "selectionType"
|
|
9296
9308
|
},
|
|
@@ -9377,7 +9389,7 @@
|
|
|
9377
9389
|
"type": {
|
|
9378
9390
|
"text": "CardVariant"
|
|
9379
9391
|
},
|
|
9380
|
-
"description": "The variant of the card
|
|
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",
|
|
9381
9393
|
"default": "'border'",
|
|
9382
9394
|
"fieldName": "variant",
|
|
9383
9395
|
"inheritedFrom": {
|
|
@@ -9390,7 +9402,7 @@
|
|
|
9390
9402
|
"type": {
|
|
9391
9403
|
"text": "CardOrientation"
|
|
9392
9404
|
},
|
|
9393
|
-
"description": "The orientation of the card
|
|
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",
|
|
9394
9406
|
"default": "'vertical'",
|
|
9395
9407
|
"fieldName": "orientation",
|
|
9396
9408
|
"inheritedFrom": {
|
|
@@ -9452,7 +9464,7 @@
|
|
|
9452
9464
|
"module": "/src/components/card/card.component"
|
|
9453
9465
|
},
|
|
9454
9466
|
"tagName": "mdc-cardcheckbox",
|
|
9455
|
-
"jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction
|
|
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 */",
|
|
9456
9468
|
"customElement": true
|
|
9457
9469
|
}
|
|
9458
9470
|
],
|
|
@@ -9473,7 +9485,7 @@
|
|
|
9473
9485
|
"declarations": [
|
|
9474
9486
|
{
|
|
9475
9487
|
"kind": "class",
|
|
9476
|
-
"description": "cardradio component extends `mdc-card` and supports radio selection interaction
|
|
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.",
|
|
9477
9489
|
"name": "CardRadio",
|
|
9478
9490
|
"cssProperties": [
|
|
9479
9491
|
{
|
|
@@ -9628,6 +9640,14 @@
|
|
|
9628
9640
|
"module": "src/components/card/card.component.ts"
|
|
9629
9641
|
}
|
|
9630
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
|
+
},
|
|
9631
9651
|
{
|
|
9632
9652
|
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
|
9633
9653
|
"name": "footer-button-secondary",
|
|
@@ -9749,7 +9769,7 @@
|
|
|
9749
9769
|
"text": "string"
|
|
9750
9770
|
},
|
|
9751
9771
|
"default": "''",
|
|
9752
|
-
"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.",
|
|
9753
9773
|
"attribute": "name"
|
|
9754
9774
|
},
|
|
9755
9775
|
{
|
|
@@ -9758,7 +9778,7 @@
|
|
|
9758
9778
|
"type": {
|
|
9759
9779
|
"text": "CardOrientation"
|
|
9760
9780
|
},
|
|
9761
|
-
"description": "The orientation of the card
|
|
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",
|
|
9762
9782
|
"default": "'vertical'",
|
|
9763
9783
|
"attribute": "orientation",
|
|
9764
9784
|
"reflects": true,
|
|
@@ -9990,7 +10010,7 @@
|
|
|
9990
10010
|
"type": {
|
|
9991
10011
|
"text": "CardVariant"
|
|
9992
10012
|
},
|
|
9993
|
-
"description": "The variant of the card
|
|
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",
|
|
9994
10014
|
"default": "'border'",
|
|
9995
10015
|
"attribute": "variant",
|
|
9996
10016
|
"reflects": true,
|
|
@@ -10010,17 +10030,17 @@
|
|
|
10010
10030
|
"reactName": "onChange"
|
|
10011
10031
|
},
|
|
10012
10032
|
{
|
|
10013
|
-
"description": "(React: onClick) Event that gets dispatched when the card is clicked. It
|
|
10033
|
+
"description": "(React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.",
|
|
10014
10034
|
"name": "click",
|
|
10015
10035
|
"reactName": "onClick"
|
|
10016
10036
|
},
|
|
10017
10037
|
{
|
|
10018
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It
|
|
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.",
|
|
10019
10039
|
"name": "keydown",
|
|
10020
10040
|
"reactName": "onKeyDown"
|
|
10021
10041
|
},
|
|
10022
10042
|
{
|
|
10023
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It
|
|
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.",
|
|
10024
10044
|
"name": "keyup",
|
|
10025
10045
|
"reactName": "onKeyUp"
|
|
10026
10046
|
},
|
|
@@ -10046,7 +10066,7 @@
|
|
|
10046
10066
|
"text": "string"
|
|
10047
10067
|
},
|
|
10048
10068
|
"default": "''",
|
|
10049
|
-
"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.",
|
|
10050
10070
|
"fieldName": "name"
|
|
10051
10071
|
},
|
|
10052
10072
|
{
|
|
@@ -10132,7 +10152,7 @@
|
|
|
10132
10152
|
"type": {
|
|
10133
10153
|
"text": "CardVariant"
|
|
10134
10154
|
},
|
|
10135
|
-
"description": "The variant of the card
|
|
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",
|
|
10136
10156
|
"default": "'border'",
|
|
10137
10157
|
"fieldName": "variant",
|
|
10138
10158
|
"inheritedFrom": {
|
|
@@ -10145,7 +10165,7 @@
|
|
|
10145
10165
|
"type": {
|
|
10146
10166
|
"text": "CardOrientation"
|
|
10147
10167
|
},
|
|
10148
|
-
"description": "The orientation of the card
|
|
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",
|
|
10149
10169
|
"default": "'vertical'",
|
|
10150
10170
|
"fieldName": "orientation",
|
|
10151
10171
|
"inheritedFrom": {
|
|
@@ -10207,7 +10227,7 @@
|
|
|
10207
10227
|
"module": "/src/components/card/card.component"
|
|
10208
10228
|
},
|
|
10209
10229
|
"tagName": "mdc-cardradio",
|
|
10210
|
-
"jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction
|
|
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 */",
|
|
10211
10231
|
"customElement": true
|
|
10212
10232
|
}
|
|
10213
10233
|
],
|
|
@@ -11270,7 +11290,7 @@
|
|
|
11270
11290
|
"text": "string | undefined"
|
|
11271
11291
|
},
|
|
11272
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`",
|
|
11273
|
-
"default": "'aria-pressed'
|
|
11293
|
+
"default": "'aria-pressed'",
|
|
11274
11294
|
"attribute": "ariaStateKey",
|
|
11275
11295
|
"reflects": true,
|
|
11276
11296
|
"inheritedFrom": {
|
|
@@ -11769,7 +11789,7 @@
|
|
|
11769
11789
|
"text": "string | undefined"
|
|
11770
11790
|
},
|
|
11771
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`",
|
|
11772
|
-
"default": "'aria-pressed'
|
|
11792
|
+
"default": "'aria-pressed'",
|
|
11773
11793
|
"fieldName": "ariaStateKey",
|
|
11774
11794
|
"inheritedFrom": {
|
|
11775
11795
|
"name": "Buttonsimple",
|
|
@@ -16768,7 +16788,7 @@
|
|
|
16768
16788
|
"text": "string | undefined"
|
|
16769
16789
|
},
|
|
16770
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`",
|
|
16771
|
-
"default": "'aria-pressed'
|
|
16791
|
+
"default": "'aria-pressed'",
|
|
16772
16792
|
"attribute": "ariaStateKey",
|
|
16773
16793
|
"reflects": true,
|
|
16774
16794
|
"inheritedFrom": {
|
|
@@ -17327,7 +17347,7 @@
|
|
|
17327
17347
|
"text": "string | undefined"
|
|
17328
17348
|
},
|
|
17329
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`",
|
|
17330
|
-
"default": "'aria-pressed'
|
|
17350
|
+
"default": "'aria-pressed'",
|
|
17331
17351
|
"fieldName": "ariaStateKey",
|
|
17332
17352
|
"inheritedFrom": {
|
|
17333
17353
|
"name": "Buttonsimple",
|
|
@@ -21362,7 +21382,7 @@
|
|
|
21362
21382
|
"text": "string | undefined"
|
|
21363
21383
|
},
|
|
21364
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`",
|
|
21365
|
-
"default": "'aria-pressed'
|
|
21385
|
+
"default": "'aria-pressed'",
|
|
21366
21386
|
"attribute": "ariaStateKey",
|
|
21367
21387
|
"reflects": true,
|
|
21368
21388
|
"inheritedFrom": {
|
|
@@ -21856,7 +21876,7 @@
|
|
|
21856
21876
|
"text": "string | undefined"
|
|
21857
21877
|
},
|
|
21858
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`",
|
|
21859
|
-
"default": "'aria-pressed'
|
|
21879
|
+
"default": "'aria-pressed'",
|
|
21860
21880
|
"fieldName": "ariaStateKey",
|
|
21861
21881
|
"inheritedFrom": {
|
|
21862
21882
|
"name": "Buttonsimple",
|
|
@@ -45925,7 +45945,7 @@
|
|
|
45925
45945
|
"text": "string | undefined"
|
|
45926
45946
|
},
|
|
45927
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`",
|
|
45928
|
-
"default": "'aria-pressed'
|
|
45948
|
+
"default": "'aria-pressed'",
|
|
45929
45949
|
"attribute": "ariaStateKey",
|
|
45930
45950
|
"reflects": true,
|
|
45931
45951
|
"inheritedFrom": {
|
|
@@ -46488,7 +46508,7 @@
|
|
|
46488
46508
|
"text": "string | undefined"
|
|
46489
46509
|
},
|
|
46490
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`",
|
|
46491
|
-
"default": "'aria-pressed'
|
|
46511
|
+
"default": "'aria-pressed'",
|
|
46492
46512
|
"fieldName": "ariaStateKey",
|
|
46493
46513
|
"inheritedFrom": {
|
|
46494
46514
|
"name": "Buttonsimple",
|
|
@@ -55203,7 +55223,7 @@
|
|
|
55203
55223
|
"type": {
|
|
55204
55224
|
"text": "CardOrientation"
|
|
55205
55225
|
},
|
|
55206
|
-
"description": "The orientation of the card
|
|
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",
|
|
55207
55227
|
"default": "'vertical'",
|
|
55208
55228
|
"attribute": "orientation",
|
|
55209
55229
|
"reflects": true
|
|
@@ -55280,7 +55300,7 @@
|
|
|
55280
55300
|
"type": {
|
|
55281
55301
|
"text": "CardVariant"
|
|
55282
55302
|
},
|
|
55283
|
-
"description": "The variant of the card
|
|
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",
|
|
55284
55304
|
"default": "'border'",
|
|
55285
55305
|
"attribute": "variant",
|
|
55286
55306
|
"reflects": true
|
|
@@ -55328,7 +55348,7 @@
|
|
|
55328
55348
|
"type": {
|
|
55329
55349
|
"text": "CardVariant"
|
|
55330
55350
|
},
|
|
55331
|
-
"description": "The variant of the card
|
|
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",
|
|
55332
55352
|
"default": "'border'",
|
|
55333
55353
|
"fieldName": "variant"
|
|
55334
55354
|
},
|
|
@@ -55337,7 +55357,7 @@
|
|
|
55337
55357
|
"type": {
|
|
55338
55358
|
"text": "CardOrientation"
|
|
55339
55359
|
},
|
|
55340
|
-
"description": "The orientation of the card
|
|
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",
|
|
55341
55361
|
"default": "'vertical'",
|
|
55342
55362
|
"fieldName": "orientation"
|
|
55343
55363
|
},
|