@momentum-design/components 0.20.0 → 0.21.0

package/dist/custom-elements.json

@@ -4617,75 +4617,552 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/text/text.component.js",
+      "path": "components/radio/radio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
-          "name": "Text",
-          "cssParts": [
+          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
+          "name": "Radio",
+          "cssProperties": [
             {
-              "description": "The text element",
-              "name": "text"
+              "description": "size of the inner circle",
+              "name": "--mdc-radio-inner-circle-size"
+            },
+            {
+              "description": "color of the label when disabled",
+              "name": "--mdc-radio-text-disabled-color"
+            },
+            {
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-radio-disabled-border-color"
+            },
+            {
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-radio-normal-border-color"
+            },
+            {
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-radio-inner-circle-normal-background"
+            },
+            {
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-radio-inner-circle-disabled-background"
+            },
+            {
+              "description": "color of the radio button when inactive",
+              "name": "--mdc-radio-control-inactive-color"
+            },
+            {
+              "description": "color of the radio button when inactive and hovered",
+              "name": "--mdc-radio-control-inactive-hover"
+            },
+            {
+              "description": "color of the radio button when inactive and pressed",
+              "name": "--mdc-radio-control-inactive-pressed-color"
+            },
+            {
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-radio-control-inactive-disabled-background"
+            },
+            {
+              "description": "color of the radio button when active",
+              "name": "--mdc-radio-control-active-color"
+            },
+            {
+              "description": "color of the radio button when active and hovered",
+              "name": "--mdc-radio-control-active-hover-color"
+            },
+            {
+              "description": "color of the radio button when active and pressed",
+              "name": "--mdc-radio-control-active-pressed-color"
+            },
+            {
+              "description": "background color of the radio button when active and disabled",
+              "name": "--mdc-radio-control-active-disabled-background"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+            },
+            {
+              "kind": "method",
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
+              },
+              "description": "Returns all radios within the same group (name)."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchChangeEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+            },
+            {
+              "kind": "method",
+              "name": "updateRadio",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "enabledRadios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "An array of enabled radio buttons within the same group."
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the radio button to be updated within the enabled radios array."
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event that triggered the update."
+                }
+              ],
+              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+            },
+            {
+              "kind": "method",
+              "name": "updateTabIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "NameMixin",
+                "module": "utils/mixins/NameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ValueMixin",
+                "module": "utils/mixins/ValueMixin.js"
+              }
+            },
+            {
+              "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",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             }
           ],
-          "slots": [
+          "events": [
             {
-              "description": "Default slot for text content",
-              "name": ""
+              "type": {
+                "text": "EventConstructor"
+              }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "type",
+              "name": "checked",
               "type": {
-                "text": "TextType"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "attribute": "type",
-              "reflects": true
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "tagname",
+              "name": "readonly",
               "type": {
-                "text": "TagName | undefined"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "attribute": "tagname",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
             {
-              "name": "type",
+              "name": "name",
               "type": {
-                "text": "TextType"
+                "text": "string"
               },
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "fieldName": "type"
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "NameMixin",
+                "module": "src/utils/mixins/NameMixin.ts"
+              }
             },
             {
-              "name": "tagname",
+              "name": "value",
               "type": {
-                "text": "TagName | undefined"
+                "text": "string"
               },
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "fieldName": "tagname"
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "ValueMixin",
+                "module": "src/utils/mixins/ValueMixin.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": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "NameMixin",
+              "module": "/src/utils/mixins/NameMixin"
+            },
+            {
+              "name": "ValueMixin",
+              "module": "/src/utils/mixins/ValueMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
-          "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
-          "customElement": true
+          "tagName": "mdc-radio",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-radio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -4693,8 +5170,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Text",
-            "module": "components/text/text.component.js"
+            "name": "Radio",
+            "module": "components/radio/radio.component.js"
           }
         }
       ]
@@ -5303,6 +5780,90 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/text/text.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
+          "name": "Text",
+          "cssParts": [
+            {
+              "description": "The text element",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "attribute": "tagname",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "fieldName": "type"
+            },
+            {
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "fieldName": "tagname"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Text",
+            "module": "components/text/text.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/AvatarComponentMixin.js",