@momentum-design/components 0.133.40 → 0.134.1

package/dist/custom-elements.json

@@ -1846,6 +1846,44 @@
               "attribute": "autoplay",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "createLottieInstance",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create or re-create the lottie instance with the given animation data"
+            },
+            {
+              "kind": "method",
+              "name": "fetchAnimationFromUrl",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Fetch animation data from a URL"
+            },
             {
               "kind": "method",
               "name": "getAnimationData",
@@ -1925,7 +1963,18 @@
                   }
                 }
               ],
-              "description": "Create new lotty instance for the loaded data"
+              "description": "Create new lottie instance for the loaded data"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL pointing to a Lottie JSON animation file.\nWhen provided, it takes precedence over the `name` property.",
+              "default": "undefined",
+              "attribute": "src",
+              "reflects": true
             }
           ],
           "events": [
@@ -1958,6 +2007,15 @@
               "default": "undefined",
               "fieldName": "name"
             },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL pointing to a Lottie JSON animation file.\nWhen provided, it takes precedence over the `name` property.",
+              "default": "undefined",
+              "fieldName": "src"
+            },
             {
               "name": "loop",
               "type": {
@@ -19998,6 +20056,14 @@
             {
               "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
               "name": "trailing-button"
+            },
+            {
+              "description": "The footer element that contains the helper text and character counter.",
+              "name": "input-footer"
+            },
+            {
+              "description": "The character counter element.",
+              "name": "character-counter"
             }
           ],
           "slots": [
@@ -20051,6 +20117,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autocapitalize",
@@ -20086,6 +20162,19 @@
                 "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "characterLimitAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "checkValidity",
@@ -20165,6 +20254,16 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleCharacterOverflowStateChange",
+              "privacy": "protected",
+              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -20255,6 +20354,19 @@
               "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
               "attribute": "list"
             },
+            {
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "attribute": "max-character-limit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "maxlength",
@@ -20331,6 +20443,16 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected",
+              "description": "Renders the character counter element.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelperText",
@@ -20393,6 +20515,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "renderInputFooter",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -20687,6 +20814,18 @@
               "description": "(React: onBlur) This event is dispatched when the input loses focus.",
               "name": "blur",
               "reactName": "onBlur"
+            },
+            {
+              "name": "limitexceeded",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
+              "reactName": "onLimitExceeded",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
             }
           ],
           "attributes": [
@@ -20809,6 +20948,30 @@
               "description": "Defines a id pointing to the element which describes the input element.\nThe AriaDescribedby attribute to be set for accessibility.",
               "fieldName": "dataAriaDescribedby"
             },
+            {
+              "name": "max-character-limit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "fieldName": "maxCharacterLimit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -21014,6 +21177,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "CharacterLimitMixin",
+              "module": "/src/utils/mixins/CharacterLimitMixin"
+            },
             {
               "name": "KeyToActionMixin",
               "module": "/src/utils/mixins/KeyToActionMixin"
@@ -21036,7 +21203,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-input",
-          "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n *  It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\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 * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\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-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-height - Height for the input container\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
+          "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n *  It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\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 * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\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-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-height - Height for the input container\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart input-footer - The footer element that contains the helper text and character counter.\n * @csspart character-counter - The character counter element.\n */",
           "customElement": true
         }
       ],
@@ -32594,6 +32761,22 @@
                 "name": "Input",
                 "module": "src/components/input/input.component.ts"
               }
+            },
+            {
+              "description": "The footer element that contains the helper text and character counter.",
+              "name": "input-footer",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The character counter element.",
+              "name": "character-counter",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "slots": [
@@ -32663,6 +32846,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autocapitalize",
@@ -32706,6 +32899,19 @@
                 "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "characterLimitAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "checkValidity",
@@ -32801,6 +33007,16 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleCharacterOverflowStateChange",
+              "privacy": "protected",
+              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -32914,6 +33130,19 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "attribute": "max-character-limit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "maxlength",
@@ -33010,6 +33239,16 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected",
+              "description": "Renders the character counter element.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelperText",
@@ -33080,6 +33319,15 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderInputFooter",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -33437,6 +33685,18 @@
                 "module": "src/components/input/input.component.ts"
               }
             },
+            {
+              "name": "limitexceeded",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
+              "reactName": "onLimitExceeded",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "type": {
                 "text": "EventConstructor"
@@ -33478,6 +33738,30 @@
               "description": "Aria label for the hide password icon button.",
               "fieldName": "hideButtonAriaLabel"
             },
+            {
+              "name": "max-character-limit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "fieldName": "maxCharacterLimit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -38675,6 +38959,22 @@
             {
               "description": "The inline flow container for chips and the input field.",
               "name": "searchfield-container"
+            },
+            {
+              "description": "The footer element that contains the helper text and character counter.",
+              "name": "input-footer",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The character counter element.",
+              "name": "character-counter",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "slots": [
@@ -38748,6 +39048,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autocapitalize",
@@ -38791,6 +39101,19 @@
                 "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "characterLimitAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "checkValidity",
@@ -38939,6 +39262,16 @@
               ],
               "description": "Overrides the focus method to allow programmatically focusing the input field.\nDelegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior."
             },
+            {
+              "kind": "method",
+              "name": "handleCharacterOverflowStateChange",
+              "privacy": "protected",
+              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFilterContainerClick"
@@ -39045,6 +39378,19 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "attribute": "max-character-limit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "maxlength",
@@ -39156,6 +39502,16 @@
               ],
               "description": "Removes a chip element from the DOM and dispatches the 'chipRemove' event with the chip detail.\nIn controlled mode, the chip is not removed from the DOM, only the event is dispatched."
             },
+            {
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected",
+              "description": "Renders the character counter element.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelperText",
@@ -39222,6 +39578,15 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderInputFooter",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -39572,6 +39937,18 @@
                 "module": "src/components/input/input.component.ts"
               }
             },
+            {
+              "name": "limitexceeded",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
+              "reactName": "onLimitExceeded",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "type": {
                 "text": "EventConstructor"
@@ -39613,6 +39990,30 @@
                 "module": "src/utils/mixins/ControlTypeMixin.ts"
               }
             },
+            {
+              "name": "max-character-limit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "fieldName": "maxCharacterLimit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -40279,6 +40680,22 @@
                 "name": "Searchfield",
                 "module": "src/components/searchfield/searchfield.component.ts"
               }
+            },
+            {
+              "description": "The footer element that contains the helper text and character counter.",
+              "name": "input-footer",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The character counter element.",
+              "name": "character-counter",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "slots": [
@@ -40360,6 +40777,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "autocapitalize",
@@ -40403,6 +40830,19 @@
                 "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "characterLimitAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "checkValidity",
@@ -40570,6 +41010,16 @@
                 "module": "components/searchfield/searchfield.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleCharacterOverflowStateChange",
+              "privacy": "protected",
+              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFilterContainerClick",
@@ -40686,6 +41136,19 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "attribute": "max-character-limit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "maxlength",
@@ -40833,6 +41296,16 @@
                 "module": "components/searchfield/searchfield.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected",
+              "description": "Renders the character counter element.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderHelperText",
@@ -40899,6 +41372,15 @@
                 "module": "components/input/input.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderInputFooter",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -41263,6 +41745,18 @@
               "name": "hidden",
               "reactName": "onHidden"
             },
+            {
+              "name": "limitexceeded",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
+              "reactName": "onLimitExceeded",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "type": {
                 "text": "EventConstructor"
@@ -41322,6 +41816,30 @@
                 "module": "src/utils/mixins/ControlTypeMixin.ts"
               }
             },
+            {
+              "name": "max-character-limit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "fieldName": "maxCharacterLimit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -47208,9 +47726,13 @@
           "members": [
             {
               "kind": "method",
-              "name": "announceMaxLengthWarning",
-              "privacy": "private",
-              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced."
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -47254,7 +47776,11 @@
                 "text": "string | undefined"
               },
               "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"
+              "attribute": "character-limit-announcement",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
             },
             {
               "kind": "method",
@@ -47318,26 +47844,14 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "dispatchCharacterOverflowStateChangeEvent",
-              "privacy": "private",
-              "description": "Dispatches the character overflow state change event.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "handleCharacterOverflowStateChange",
-              "privacy": "private",
+              "privacy": "protected",
               "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
               }
             },
             {
@@ -47464,8 +47978,12 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "The maximum character limit for the textarea field for character counter.",
-              "attribute": "max-character-limit"
+              "description": "The maximum character limit for the field for character counter.",
+              "attribute": "max-character-limit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -47542,7 +48060,12 @@
             {
               "kind": "method",
               "name": "renderCharacterCounter",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Renders the character counter element.",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "utils/mixins/CharacterLimitMixin.js"
+              }
             },
             {
               "kind": "method",
@@ -47839,14 +48362,6 @@
             }
           ],
           "events": [
-            {
-              "name": "limitexceeded",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
-              "reactName": "onLimitExceeded"
-            },
             {
               "type": {
                 "text": "EventConstructor"
@@ -47871,6 +48386,18 @@
               "description": "(React: onBlur) This event is dispatched when the textarea loses focus.",
               "name": "blur",
               "reactName": "onBlur"
+            },
+            {
+              "name": "limitexceeded",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
+              "reactName": "onLimitExceeded",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
             }
           ],
           "attributes": [
@@ -47951,22 +48478,6 @@
               "description": "The minimum number of characters that the textarea field can accept.",
               "fieldName": "minlength"
             },
-            {
-              "name": "max-character-limit",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum character limit for the textarea field for character counter.",
-              "fieldName": "maxCharacterLimit"
-            },
-            {
-              "name": "character-limit-announcement",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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": {
@@ -47985,6 +48496,30 @@
               "default": "''",
               "fieldName": "resizeButtonAriaLabel"
             },
+            {
+              "name": "max-character-limit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "fieldName": "maxCharacterLimit",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
+              "inheritedFrom": {
+                "name": "CharacterLimitMixin",
+                "module": "src/utils/mixins/CharacterLimitMixin.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -48190,6 +48725,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "CharacterLimitMixin",
+              "module": "/src/utils/mixins/CharacterLimitMixin"
+            },
             {
               "name": "KeyDownHandledMixin",
               "module": "/src/utils/mixins/KeyDownHandledMixin"
@@ -56141,6 +56680,175 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/CharacterLimitMixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "Mixin that provides character limit / counter functionality.\n\nThis mixin is shared between `mdc-input` and `mdc-textarea` components.\nIt provides:\n- `maxCharacterLimit` and `characterLimitAnnouncement` properties\n- Character overflow state tracking and `limitexceeded` event dispatching\n- Screen reader announcement logic for character limit warnings\n- `renderCharacterCounter()` method for rendering the counter UI\n\nThe consuming component must:\n- Have a `value` property (string)\n- Have a `helpText` property (string)\n- Call `handleCharacterOverflowStateChange()` when `value` changes\n- Call `announceCharacterLimitWarning()` when `helpText` changes or value is updated",
+          "name": "CharacterLimitMixin",
+          "members": [
+            {
+              "kind": "method",
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced."
+            },
+            {
+              "kind": "field",
+              "name": "characterLimitAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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": "method",
+              "name": "handleCharacterOverflowStateChange",
+              "privacy": "protected",
+              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored."
+            },
+            {
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "attribute": "max-character-limit"
+            },
+            {
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected",
+              "description": "Renders the character counter element."
+            }
+          ],
+          "events": [
+            {
+              "name": "limitexceeded",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "max-character-limit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum character limit for the field for character counter.",
+              "fieldName": "maxCharacterLimit"
+            },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              },
+              "description": "The base class to extend."
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CharacterLimitMixinInterface",
+          "members": [
+            {
+              "kind": "method",
+              "name": "announceCharacterLimitWarning",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "characterLimitAnnouncement",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "characterLimitAriaLiveAnnouncer",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleCharacterOverflowStateChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "typeof nothing | ReturnType<typeof html>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CharacterLimitMixin",
+          "declaration": {
+            "name": "CharacterLimitMixin",
+            "module": "utils/mixins/CharacterLimitMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CharacterLimitMixinInterface",
+          "declaration": {
+            "name": "CharacterLimitMixinInterface",
+            "module": "utils/mixins/CharacterLimitMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Events",
+          "declaration": {
+            "name": "Events",
+            "module": "utils/mixins/CharacterLimitMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/ControlTypeMixin.js",