@momentum-design/components 0.133.4 → 0.133.6

package/dist/custom-elements.json

@@ -18117,10 +18117,6 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
-            {
-              "description": "Formfieldgroup host container",
-              "name": "container"
-            },
             {
               "description": "This contains the label and help text for the group",
               "name": "group-header"
@@ -18165,21 +18161,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -18417,33 +18398,14 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
           "superclass": {
             "name": "FormfieldWrapper",
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-formfieldgroup",
-          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - Formfieldgroup host container\n * @csspart group-header - This contains the label and help text for the group\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
+          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart group-header - This contains the label and help text for the group\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
           "customElement": true,
           "attributes": [
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -36428,7 +36390,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The Radio component allows users to select a single option from a group of mutually exclusive choices.\nUnlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\nat a time within the same group. These are commonly used in forms, surveys, and settings where users\nneed to make a single selection from multiple options.\n\nTo create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\nshare the same `name` attribute.\n\n**Note:** This component internally renders a native radio input element with custom styling.\n\n## When to use\nUse radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,\nconsider using a dropdown menu instead.\n\n## Accessibility\n- Provide clear labels that describe each option\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n- Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n\n## Styling\nUse the `static-radio` part to apply custom styles to the radio visual element.\nThis part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.",
+          "description": "The Radio component allows users to select a single option from a group of mutually exclusive choices.\nUnlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\nat a time within the same group. These are commonly used in forms, surveys, and settings where users\nneed to make a single selection from multiple options.\n\nTo create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\nshare the same `name` attribute.\n\n## Validation\n\nRadio component support native form validation. But it does not have default validation message.\nAlso, `required` attribute does not render indicator (red asterisk) for the radio component.\n\nThe recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\nand set the `help-text` of the `mdc-radiogroup` based on its validation state.\n\nAlternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\nin a native tooltip when the radio is checked and invalid.\n\n## Accessibility\n\n- Provide clear labels that describe each option\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n- Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n\n## Styling\n\nUse the `static-radio` part to apply custom styles to the radio visual element.\nThis part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.",
           "name": "Radio",
           "cssParts": [
             {
@@ -36447,6 +36409,10 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "The staticradio that provides the visual radio appearance.",
+              "name": "static-radio"
+            },
             {
               "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
               "name": "required-indicator",
@@ -36494,18 +36460,44 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the radio indicator element. If not provided, a default styled radio will be rendered.",
+              "name": "indicator"
+            },
+            {
+              "description": "Slot for the label of the radio.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "description": "The native radio input element that provides the interactive functionality.",
-              "name": "radio-input"
+              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
+              "name": "toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "description": "The container for the label and helper text elements.",
-              "name": "text-container"
+              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
+              "name": "help-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "description": "The staticradio that provides the visual radio appearance.",
-              "name": "static-radio"
+              "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "members": [
@@ -36552,21 +36544,6 @@
               "kind": "method",
               "name": "click"
             },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -36582,6 +36559,26 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "emitCheckedChangeEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "helpText",
@@ -36892,12 +36889,20 @@
             }
           ],
           "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onInput) Event that gets dispatched when the radio state changes (before the change event).",
+              "reactName": "onInput"
+            },
             {
               "name": "change",
               "type": {
                 "text": "Event"
               },
-              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
+              "description": "(React: onChange) Event that gets dispatched when the radio state changes (after the input event).",
               "reactName": "onChange"
             },
             {
@@ -36967,19 +36972,6 @@
                 "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -37136,10 +37128,6 @@
             {
               "name": "FormInternalsMixin",
               "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
@@ -37147,42 +37135,8 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-radio",
-          "jsDoc": "/**\n * The Radio component allows users to select a single option from a group of mutually exclusive choices.\n * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\n * at a time within the same group. These are commonly used in forms, surveys, and settings where users\n * need to make a single selection from multiple options.\n *\n * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\n * share the same `name` attribute.\n *\n * **Note:** This component internally renders a native radio input element with custom styling.\n *\n * ## When to use\n * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,\n * consider using a dropdown menu instead.\n *\n * ## Accessibility\n * - Provide clear labels that describe each option\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n *\n * ## Styling\n * Use the `static-radio` part to apply custom styles to the radio visual element.\n * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-radio - The staticradio that provides the visual radio appearance.\n */",
+          "jsDoc": "/**\n * The Radio component allows users to select a single option from a group of mutually exclusive choices.\n * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\n * at a time within the same group. These are commonly used in forms, surveys, and settings where users\n * need to make a single selection from multiple options.\n *\n * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\n * share the same `name` attribute.\n *\n * ## Validation\n *\n * Radio component support native form validation. But it does not have default validation message.\n * Also, `required` attribute does not render indicator (red asterisk) for the radio component.\n *\n * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\n * and set the `help-text` of the `mdc-radiogroup` based on its validation state.\n *\n * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\n * in a native tooltip when the radio is checked and invalid.\n *\n * ## Accessibility\n *\n * - Provide clear labels that describe each option\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n *\n * ## Styling\n *\n * Use the `static-radio` part to apply custom styles to the radio visual element.\n * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart static-radio - The staticradio that provides the visual radio appearance.\n *\n * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.\n * @slot label - Slot for the label of the radio.\n */",
           "customElement": true,
-          "slots": [
-            {
-              "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
-              "name": "label",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
-              "name": "toggletip",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
-              "name": "help-icon",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.",
-              "name": "help-text",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
           "cssProperties": [
             {
               "description": "Font size for the label text.",
@@ -37278,100 +37232,7 @@
           "kind": "class",
           "description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
           "name": "RadioGroup",
-          "cssProperties": [
-            {
-              "description": "color of the description text",
-              "name": "--mdc-radiogroup-description-text-normal"
-            },
-            {
-              "description": "Font size for the label text.",
-              "name": "--mdc-label-font-size",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font weight for the label text.",
-              "name": "--mdc-label-font-weight",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Line height for the label text.",
-              "name": "--mdc-label-line-height",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the label text.",
-              "name": "--mdc-label-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font size for the help text.",
-              "name": "--mdc-help-text-font-size",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font weight for the help text.",
-              "name": "--mdc-help-text-font-weight",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Line height for the help text.",
-              "name": "--mdc-help-text-line-height",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the help text.",
-              "name": "--mdc-help-text-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the required indicator text.",
-              "name": "--mdc-required-indicator-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
           "members": [
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -37430,6 +37291,14 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "isRadio",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -37629,19 +37498,6 @@
               "description": "Name of the radio group.\nThey are used to group elements in a form together.",
               "fieldName": "name"
             },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -37787,7 +37643,7 @@
             "module": "/src/components/formfieldgroup"
           },
           "tagName": "mdc-radiogroup",
-          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
+          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n */",
           "customElement": true,
           "slots": [
             {
@@ -37897,19 +37753,85 @@
               }
             },
             {
-              "description": "Formfieldgroup host container",
-              "name": "container",
+              "description": "This contains the label and help text for the group",
+              "name": "group-header",
               "inheritedFrom": {
                 "name": "FormfieldGroup",
                 "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
               }
+            }
+          ],
+          "cssProperties": [
+            {
+              "description": "Font size for the label text.",
+              "name": "--mdc-label-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "description": "This contains the label and help text for the group",
-              "name": "group-header",
+              "description": "Font weight for the label text.",
+              "name": "--mdc-label-font-weight",
               "inheritedFrom": {
-                "name": "FormfieldGroup",
-                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the label text.",
+              "name": "--mdc-label-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the label text.",
+              "name": "--mdc-label-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font size for the help text.",
+              "name": "--mdc-help-text-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the help text.",
+              "name": "--mdc-help-text-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the help text.",
+              "name": "--mdc-help-text-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the help text.",
+              "name": "--mdc-help-text-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
           ]
@@ -45536,6 +45458,24 @@
               "name": "text"
             }
           ],
+          "slots": [
+            {
+              "description": "The slot for the content before the text, typically used for the icon.",
+              "name": "prefix"
+            },
+            {
+              "description": "The slot for the content after the text, typically used for the badge or chip.",
+              "name": "postfix"
+            },
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -45664,18 +45604,6 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "handleTabActiveChange",
-              "privacy": "private",
-              "description": "Dispatch the activechange event.",
-              "parameters": [
-                {
-                  "description": "The active state of the tab.",
-                  "name": "active"
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "iconName",
@@ -46176,18 +46104,8 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-tab",
-          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Text label of the button.",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ]
+          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n *\n * @slot prefix - The slot for the content before the text, typically used for the icon.\n * @slot postfix - The slot for the content after the text, typically used for the badge or chip.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -55704,7 +55622,7 @@
       "declarations": [
         {
           "kind": "mixin",
-          "description": "",
+          "description": "This mixin adds a `data-aria-label` property to the component, which can be used to set the Aria-Label attribute for accessibility.\n\nIt is useful when a component inside the shadow DOM needs to be labeled for accessibility purposes.\nThe problem with using `aria-label` directly on the host element is that the Screen Reader will read both\nthe host element and the component inside the shadow DOM, which can lead to redundant or confusing information being read out.\n\nSo instead the consumer can use `data-aria-label` to set the Aria-Label attribute on the component inside the shadow DOM.\n\nFor example all the input component which has a native input element inside the shadow DOM can use this mixin to allow the\nconsumer to set the Aria-Label attribute on the native input element for better accessibility.",
           "name": "DataAriaLabelMixin",
           "members": [
             {

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

@@ -36,7 +36,6 @@ import Component from '../../components/formfieldgroup';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart container - Formfieldgroup host container
  * @csspart group-header - This contains the label and help text for the group
  *
  * @cssproperty --mdc-label-font-size - Font size for the label text.

package/dist/react/formfieldgroup/index.js

@@ -39,7 +39,6 @@ import { TAG_NAME } from '../../components/formfieldgroup/formfieldgroup.constan
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
- * @csspart container - Formfieldgroup host container
  * @csspart group-header - This contains the label and help text for the group
  *
  * @cssproperty --mdc-label-font-size - Font size for the label text.