@momentum-design/components 0.124.0 → 0.125.0

package/dist/custom-elements.json

@@ -513,157 +513,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -1004,6 +853,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -1654,218 +1654,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
-          "name": "Animation",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "attribute": "autoplay",
-              "reflects": true
-            },
-            {
-              "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": "ariaLabelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getLoopValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadSuccessHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "animationData",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "description": "Create new lotty instance for the loaded data"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadFailHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "Error"
-                  }
-                }
-              ],
-              "description": "Error handler for animation loading"
-            },
-            {
-              "kind": "method",
-              "name": "getAnimationData",
-              "privacy": "private",
-              "description": "Import animation data dynamically"
-            },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            }
-          ],
-          "events": [
-            {
-              "name": "load",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
-              "name": "complete",
-              "reactName": "onComplete"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when animation loading failed",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "fieldName": "loop"
-            },
-            {
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "fieldName": "autoplay"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledby"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-animation",
-          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Animation",
-            "module": "components/animation/animation.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/announcementdialog/announcementdialog.component.js",
@@ -3290,6 +3078,218 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
+          "name": "Animation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "attribute": "autoplay",
+              "reflects": true
+            },
+            {
+              "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": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "lottieInstance",
+              "type": {
+                "text": "AnimationItem | undefined"
+              },
+              "privacy": "private",
+              "description": "Lottie animation instance"
+            },
+            {
+              "kind": "field",
+              "name": "containerRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "private",
+              "description": "Container for the animation"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "description": "Exposed API of the animation library (lottie)",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getLoopValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadSuccessHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create new lotty instance for the loaded data"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadFailHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ],
+              "description": "Error handler for animation loading"
+            },
+            {
+              "kind": "method",
+              "name": "getAnimationData",
+              "privacy": "private",
+              "description": "Import animation data dynamically"
+            },
+            {
+              "kind": "field",
+              "name": "onCompleteHandler",
+              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
+            }
+          ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
+              "name": "complete",
+              "reactName": "onComplete"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when animation loading failed",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "fieldName": "loop"
+            },
+            {
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "fieldName": "autoplay"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledby"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-animation",
+          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Animation",
+            "module": "components/animation/animation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -46564,7 +46564,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
+          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.\n\n### Accessibility \n\n#### Resize\n \nAccessible text area resizing can be turned on with the `resizable`. \nIt is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.\n\n#### Best practices\n\n- Always provide a `label` for screen readers to identify the textarea's purpose\n- Use `help-text` to provide additional context or instructions\n- When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates\n- Use appropriate `help-text-type` (error, warning, success) to convey validation state\n- Ensure `validation-message` is set for form validation errors",
           "name": "Textarea",
           "cssProperties": [
             {
@@ -46709,6 +46709,26 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "The textarea element.",
+              "name": "textarea"
+            },
+            {
+              "description": "The container element that wraps the textarea and resize button.",
+              "name": "textarea-container"
+            },
+            {
+              "description": "The footer element that contains the character counter.",
+              "name": "textarea-footer"
+            },
+            {
+              "description": "The character counter element.",
+              "name": "character-counter"
+            },
+            {
+              "description": "The resize button element (shown when `resizable` is true).",
+              "name": "resize-button"
+            },
             {
               "description": "The helper/validation text element.",
               "name": "help-text",
@@ -46786,7 +46806,8 @@
               },
               "description": "The rows attribute specifies the visible number of lines in a text area.",
               "default": "5",
-              "attribute": "rows"
+              "attribute": "rows",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -46873,6 +46894,27 @@
               "description": "Template string for the announcement that will be read by screen readers when the max character limit is set.\nConsumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,\nwhich will be dynamically replaced with the actual values at runtime.\nFor example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`\nExample output: \"93 out of 140 characters are typed.\"",
               "attribute": "character-limit-announcement"
             },
+            {
+              "kind": "field",
+              "name": "resizable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the textarea is resizable via the resize button.\nWhen set to false, the resize button will be hidden.",
+              "attribute": "resizable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "resizeButtonAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the resize button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "attribute": "resize-button-aria-label"
+            },
             {
               "kind": "field",
               "name": "textarea",
@@ -46961,6 +47003,57 @@
               "name": "renderTextareaFooter",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "handleResizeKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the resize button keydown event for keyboard-based resizing."
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerDown",
+              "privacy": "private",
+              "description": "Handles the start of pointer-based resizing.",
+              "parameters": [
+                {
+                  "description": "The pointer event.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerMove",
+              "privacy": "private",
+              "description": "Handles pointer movement during resizing.",
+              "parameters": [
+                {
+                  "description": "The pointer event.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerUp",
+              "privacy": "private",
+              "description": "Handles the end of pointer-based resizing.",
+              "parameters": [
+                {
+                  "description": "The pointer event.",
+                  "name": "event"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "autoFocusOnMount",
@@ -47454,6 +47547,24 @@
               "description": "Template string for the announcement that will be read by screen readers when the max character limit is set.\nConsumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,\nwhich will be dynamically replaced with the actual values at runtime.\nFor example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`\nExample output: \"93 out of 140 characters are typed.\"",
               "fieldName": "characterLimitAnnouncement"
             },
+            {
+              "name": "resizable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the textarea is resizable via the resize button.\nWhen set to false, the resize button will be hidden.",
+              "fieldName": "resizable"
+            },
+            {
+              "name": "resize-button-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the resize button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "fieldName": "resizeButtonAriaLabel"
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -47674,7 +47785,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-textarea",
-          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\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 *\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 * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
+          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * ### Accessibility \n * \n * #### Resize\n *  \n * Accessible text area resizing can be turned on with the `resizable`. \n * It is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.\n * \n * #### Best practices\n * \n * - Always provide a `label` for screen readers to identify the textarea's purpose\n * - Use `help-text` to provide additional context or instructions\n * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates\n * - Use appropriate `help-text-type` (error, warning, success) to convey validation state\n * - Ensure `validation-message` is set for form validation errors\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\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 textarea - The textarea element.\n * @csspart textarea-container - The container element that wraps the textarea and resize button.\n * @csspart textarea-footer - The footer element that contains the character counter.\n * @csspart character-counter - The character counter element.\n * @csspart resize-button - The resize button element (shown when `resizable` is true).\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 *\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 * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
           "customElement": true
         }
       ],