@momentum-design/components 0.4.16 → 0.4.18

package/dist/custom-elements.json

@@ -114,191 +114,22 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.",
-          "name": "Icon",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default fill color.",
-              "name": "--mdc-icon-fill-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "iconData",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "sizeFromContext",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "attribute": "length-unit"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
-            },
-            {
-              "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
-            },
-            {
-              "kind": "method",
-              "name": "setRoleOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaHiddenOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaLabelOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A badge is a small, visually distinct element that provides additional information\nor highlights the status of an item.\nBadges are often used to display notification dot, counts, making them a useful tool for\nconveying information quickly without taking up much space.",
+          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
           "name": "Badge",
           "members": [
             {
               "kind": "field",
               "name": "type",
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon` and `counter`\n\nDefault: `dot`",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
               "attribute": "type",
               "reflects": true
             },
@@ -308,13 +139,13 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
               "attribute": "icon-name"
             },
             {
               "kind": "field",
               "name": "variant",
-              "description": "badge variant",
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
               "attribute": "variant"
             },
             {
@@ -323,6 +154,7 @@
               "type": {
                 "text": "number | undefined"
               },
+              "description": "Counter is the number which can be provided in the badge.",
               "attribute": "counter"
             },
             {
@@ -331,6 +163,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "The maximum number can be set up to 999, anything about that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
               "attribute": "max-counter"
             },
             {
@@ -340,6 +173,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
               "attribute": "overlay"
             },
             {
@@ -395,33 +229,32 @@
                   "type": {
                     "text": "string"
                   },
-                  "description": "name of the icon to be used."
+                  "description": "the name of the icon from the icon set"
                 },
                 {
                   "name": "overlay",
                   "type": {
                     "text": "boolean"
-                  }
+                  },
+                  "description": "boolean indicating whether the badge should have an overlay."
                 },
                 {
                   "name": "iconVariant",
                   "type": {
                     "text": "string"
-                  }
+                  },
+                  "description": "the variant of the icon badge."
                 },
                 {
                   "name": "type",
                   "optional": true,
                   "type": {
                     "text": "string"
-                  }
-                },
-                {
-                  "description": "variant of the badge.",
-                  "name": "variant"
+                  },
+                  "description": "the type of the badge."
                 }
               ],
-              "description": "Method to generate the badge icon template."
+              "description": "Method to generate the badge icon."
             },
             {
               "kind": "method",
@@ -539,7 +372,10 @@
           "attributes": [
             {
               "name": "type",
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon` and `counter`\n\nDefault: `dot`",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
               "fieldName": "type"
             },
             {
@@ -547,12 +383,12 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
               "fieldName": "iconName"
             },
             {
               "name": "variant",
-              "description": "badge variant",
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
               "fieldName": "variant"
             },
             {
@@ -560,6 +396,7 @@
               "type": {
                 "text": "number | undefined"
               },
+              "description": "Counter is the number which can be provided in the badge.",
               "fieldName": "counter"
             },
             {
@@ -567,6 +404,7 @@
               "type": {
                 "text": "number"
               },
+              "description": "The maximum number can be set up to 999, anything about that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
               "fieldName": "maxCounter"
             },
             {
@@ -575,6 +413,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
               "fieldName": "overlay"
             },
             {
@@ -592,7 +431,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-badge",
-          "jsDoc": "/**\n * A badge is a small, visually distinct element that provides additional information\n * or highlights the status of an item.\n * Badges are often used to display notification dot, counts, making them a useful tool for\n * conveying information quickly without taking up much space.\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
           "customElement": true
         }
       ],
@@ -607,6 +446,178 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.",
+          "name": "Icon",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "iconData",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnitFromContext",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "sizeFromContext",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "attribute": "length-unit"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
+            },
+            {
+              "kind": "method",
+              "name": "setRoleOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setAriaHiddenOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setAriaLabelOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/iconprovider/iconprovider.component.js",
@@ -765,9 +776,6 @@
             {
               "kind": "field",
               "name": "type",
-              "type": {
-                "text": "FontType"
-              },
               "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'",
               "attribute": "type",
@@ -776,9 +784,6 @@
             {
               "kind": "field",
               "name": "tagname",
-              "type": {
-                "text": "ValidTextTags | 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",
@@ -788,17 +793,11 @@
           "attributes": [
             {
               "name": "type",
-              "type": {
-                "text": "FontType"
-              },
               "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'",
               "fieldName": "type"
             },
             {
               "name": "tagname",
-              "type": {
-                "text": "ValidTextTags | 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"
             }

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

@@ -1,9 +1,21 @@
 import Component from '../../components/badge';
 /**
- * A badge is a small, visually distinct element that provides additional information
- * or highlights the status of an item.
- * Badges are often used to display notification dot, counts, making them a useful tool for
- * conveying information quickly without taking up much space.
+ * The `mdc-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.
+ *
+ * For the `counter` type, the `mdc-text` component is used to render the counter value.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/dist/react/badge/index.js

@@ -3,10 +3,22 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/badge';
 import { TAG_NAME } from '../../components/badge/badge.constants';
 /**
- * A badge is a small, visually distinct element that provides additional information
- * or highlights the status of an item.
- * Badges are often used to display notification dot, counts, making them a useful tool for
- * conveying information quickly without taking up much space.
+ * The `mdc-badge` component is a versatile UI element used to
+ * display dot, icons, counters, success, warning and error type badge.
+ *
+ * Supported badge types:
+ * - `dot`: Displays a dot notification badge with a blue color.
+ * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
+ * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
+ * - `success`: Displays a success badge with a check circle icon and green color.
+ * - `warning`: Displays a warning badge with a warning icon and yellow color.
+ * - `error`: Displays a error badge with a error legacy icon and red color.
+ *
+ * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.
+ *
+ * For the `counter` type, the `mdc-text` component is used to render the counter value.
+ *
  * @dependency mdc-icon
  * @dependency mdc-text
  *

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Icon } from './icon';
 export { default as Badge } from './badge';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Icon } from './icon';
 export { default as Badge } from './badge';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/package.json

@@ -37,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.4.16"
+  "version": "0.4.18"
 }

package/dist/components/text/text.types.d.ts

@@ -1,2 +0,0 @@
-export type FontType = 'body-small-regular' | 'body-small-medium' | 'body-small-bold' | 'body-midsize-regular' | 'body-midsize-medium' | 'body-midsize-bold' | 'body-large-regular' | 'body-large-medium' | 'body-large-bold' | 'body-small-regular-underline' | 'body-small-medium-underline' | 'body-midsize-regular-underline' | 'body-midsize-medium-underline' | 'body-large-regular-underline' | 'body-large-medium-underline' | 'heading-small-regular' | 'heading-small-medium' | 'heading-small-bold' | 'heading-midsize-regular' | 'heading-midsize-medium' | 'heading-midsize-bold' | 'heading-large-regular' | 'heading-large-medium' | 'heading-large-bold' | 'heading-xlarge-regular' | 'heading-xlarge-medium' | 'heading-xlarge-bold' | 'headline-small-light' | 'headline-small-regular';
-export type ValidTextTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'small' | 'span' | 'div';

package/dist/components/text/text.types.js

@@ -1 +0,0 @@
-export {};