@momentum-design/components 0.104.14 → 0.104.15

package/dist/custom-elements.json

@@ -33010,8 +33010,46 @@
               "name": "--mdc-sidenavigation-expanded-width"
             },
             {
-              "description": "width of the sideNavigation when collpased",
+              "description": "width of the sideNavigation when collapsed",
               "name": "--mdc-sidenavigation-collapsed-width"
+            },
+            {
+              "description": "z-index of the vertical divider button",
+              "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main container wrapping the entire side navigation.",
+              "name": "side-navigation-container"
+            },
+            {
+              "description": "The scrollable section of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "The fixed section of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "The divider between the scrollable and fixed sections.",
+              "name": "separator"
+            },
+            {
+              "description": "The container wrapping the brand logo and footer text.",
+              "name": "brand-logo-container"
+            },
+            {
+              "description": "The footer text label in the fixed section.",
+              "name": "footer-text"
+            },
+            {
+              "description": "The vertical divider between the scrollable and fixed sections.",
+              "name": "vertical-divider"
+            },
+            {
+              "description": "The button inside the vertical divider used to toggle expand/collapse.",
+              "name": "vertical-divider-button"
             }
           ],
           "slots": [
@@ -33029,13 +33067,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "variant",
@@ -33079,6 +33110,13 @@
               "attribute": "parent-nav-tooltip-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "updateContext",
@@ -33090,16 +33128,6 @@
               },
               "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
             },
-            {
-              "kind": "field",
-              "name": "navMenuItems",
-              "type": {
-                "text": "NavMenuItem[]"
-              },
-              "privacy": "private",
-              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "preventScrollOnSpace",
@@ -33121,7 +33149,15 @@
           ],
           "events": [
             {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
+              "name": "toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.",
+              "reactName": "onToggle"
+            },
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.",
               "name": "activechange",
               "reactName": "onActiveChange"
             }
@@ -33168,7 +33204,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
           "customElement": true
         }
       ],
@@ -36868,376 +36904,690 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/toast/toast.component.js",
+      "path": "components/toggle/toggle.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
-          "name": "Toast",
+          "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
+          "name": "Toggle",
           "cssProperties": [
             {
-              "description": "Background color of the toast.",
-              "name": "--mdc-toast-background-color"
-            },
-            {
-              "description": "Border color of the toast.",
-              "name": "--mdc-toast-border-color"
-            },
-            {
-              "description": "Color of the header text in the toast.",
-              "name": "--mdc-toast-header-text-color"
-            },
-            {
-              "description": "Color of the icon in the toast.",
-              "name": "--mdc-toast-icon-color"
-            },
-            {
-              "description": "Elevation effect applied to the toast.",
-              "name": "--mdc-toast-elevation-3"
-            },
-            {
-              "description": "Width of the toast.",
-              "name": "--mdc-toast-width"
+              "description": "Width of the toggle",
+              "name": "--mdc-toggle-width"
             },
             {
-              "description": "Padding inside the toast.",
-              "name": "--mdc-toast-padding"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the toast's main content, including icon, text, and close button.",
-              "name": "content-container"
+              "description": "Height of the toggle",
+              "name": "--mdc-toggle-height"
             },
             {
-              "description": "The icon shown at the start of the toast, styled by variant.",
-              "name": "toast-prefix-icon"
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-toggle-width-compact"
             },
             {
-              "description": "The container for the header and body content of the toast.",
-              "name": "toast-content"
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-toggle-height-compact"
             },
             {
-              "description": "The header text of the toast.",
-              "name": "toast-header"
+              "description": "Line height of the toggle label",
+              "name": "--mdc-toggle-label-lineheight"
             },
             {
-              "description": "The container for the toast's footer, including toggle and action buttons.",
-              "name": "footer"
+              "description": "Font size of the toggle label",
+              "name": "--mdc-toggle-label-fontsize"
             },
             {
-              "description": "The toggle button for showing/hiding detailed content.",
-              "name": "footer-button-toggle"
+              "description": "Font weight of the toggle label",
+              "name": "--mdc-toggle-label-fontweight"
             },
             {
-              "description": "The close button for the toast.",
-              "name": "toast-close-btn"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for custom content before the icon (only for custom variant).",
-              "name": "content-prefix"
+              "description": "Color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
             },
             {
-              "description": "Slot for the main body content of the toast.",
-              "name": "toast-body-normal"
+              "description": "Color of the help text label",
+              "name": "--mdc-toggle-help-text-color"
             },
             {
-              "description": "Slot for additional detailed content, shown when expanded.",
-              "name": "toast-body-detailed"
+              "description": "Background color of the active toggle in hover state",
+              "name": "--mdc-toggle-active-hover-color"
             },
             {
-              "description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
-              "name": "footer"
+              "description": "Background color of the active toggle in pressed state",
+              "name": "--mdc-toggle-active-pressed-color"
             },
             {
-              "description": "Slot for passing the primary variant of `mdc-button` in the footer.",
-              "name": "footer-button-primary"
+              "description": "Background color of the inactive toggle in hover state",
+              "name": "--mdc-toggle-inactive-hover-color"
             },
             {
-              "description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
-              "name": "footer-button-secondary"
+              "description": "Background color of the inactive toggle in pressed state",
+              "name": "--mdc-toggle-inactive-pressed-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "checked",
               "type": {
-                "text": "ToastVariant"
+                "text": "boolean"
               },
-              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
-              "default": "'custom'",
-              "attribute": "variant",
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "closeButtonAriaLabel",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "ToggleSize"
               },
-              "description": "Defines aria-label attribute for close button accessibility",
-              "attribute": "close-button-aria-label"
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "headerText",
+              "name": "autofocus",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Defines a string value to display as the title of the toast",
-              "attribute": "header-text",
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "headerTagName",
-              "type": {
-                "text": "TagName"
-              },
-              "description": "The html tag to be used for the header text",
-              "default": "'h2'",
-              "attribute": "header-tag-name",
-              "reflects": true
+              "kind": "method",
+              "name": "manageRequired",
+              "privacy": "private",
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
             },
             {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines aria-label attribute when header is not used",
-              "attribute": "aria-label",
-              "reflects": true
+              "kind": "method",
+              "name": "setFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
             },
             {
-              "kind": "field",
-              "name": "showMoreText",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
-              "attribute": "show-more-text",
-              "reflects": true
+              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
             },
             {
-              "kind": "field",
-              "name": "showLessText",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
-              "attribute": "show-less-text",
-              "reflects": true
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
             },
             {
-              "kind": "field",
-              "name": "isDetailVisible",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "handleChange",
               "privacy": "private",
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
             },
             {
-              "kind": "field",
-              "name": "hasDetailedSlot",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "setToggleSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "ToggleSize"
+                  },
+                  "description": "The size to set."
+                }
+              ],
+              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
             },
             {
               "kind": "field",
-              "name": "detailedElements",
+              "name": "name",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "string"
               },
-              "privacy": "private"
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "hasFooterButtons",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "closeToast",
-              "privacy": "private",
-              "description": "Fired when Close Button is clicked using mouse or keyboard.\nThis method dispatches the close event.\nIt is used to notify that the toast should be closed."
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "toggleDetailVisibility",
-              "privacy": "private"
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateDetailedSlotPresence",
-              "privacy": "private"
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "updateFooterButtonsPresence",
-              "privacy": "private"
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderIcon",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "string"
-                  }
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
                 }
-              ]
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "shouldRenderToggleButton",
-              "privacy": "private"
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggletipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "infoIconAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderToggleDetailButton",
-              "privacy": "private"
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected"
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleFooterSlot",
+              "name": "renderHelpText",
               "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "tagname",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "variant",
-                  "optional": true,
-                  "type": {
-                    "text": "string | undefined"
-                  }
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ]
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderFooter",
+              "name": "renderHelperText",
               "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             }
           ],
           "events": [
             {
-              "description": "(React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.",
-              "name": "close",
-              "reactName": "onClose"
+              "type": {
+                "text": "EventConstructor"
+              }
+            },
+            {
+              "description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
+              "name": "change",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "checked",
               "type": {
-                "text": "ToastVariant"
+                "text": "boolean"
               },
-              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
-              "default": "'custom'",
-              "fieldName": "variant"
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
             },
             {
-              "name": "close-button-aria-label",
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines aria-label attribute for close button accessibility",
-              "fieldName": "closeButtonAriaLabel"
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "name": "header-text",
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines a string value to display as the title of the toast",
-              "fieldName": "headerText"
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "header-tag-name",
+              "name": "help-text",
               "type": {
-                "text": "TagName"
+                "text": "string | undefined"
               },
-              "description": "The html tag to be used for the header text",
-              "default": "'h2'",
-              "fieldName": "headerTagName"
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "aria-label",
+              "name": "toggletip-text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Defines aria-label attribute when header is not used",
-              "fieldName": "ariaLabel"
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "show-more-text",
+              "name": "toggletip-placement",
               "type": {
-                "text": "string | undefined"
+                "text": "PopoverPlacement"
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
-              "fieldName": "showMoreText"
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "show-less-text",
+              "name": "info-icon-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
-              "fieldName": "showLessText"
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "mixins": [
             {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
           },
-          "tagName": "mdc-toast",
-          "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n * \n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-linkbutton\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n * \n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
+          "tagName": "mdc-toggle",
+          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n */",
           "customElement": true
         }
       ],
@@ -37246,698 +37596,384 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toast",
-            "module": "components/toast/toast.component.js"
+            "name": "Toggle",
+            "module": "components/toggle/toggle.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/toggle/toggle.component.js",
+      "path": "components/toast/toast.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
-          "name": "Toggle",
+          "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
+          "name": "Toast",
           "cssProperties": [
             {
-              "description": "Width of the toggle",
-              "name": "--mdc-toggle-width"
+              "description": "Background color of the toast.",
+              "name": "--mdc-toast-background-color"
             },
             {
-              "description": "Height of the toggle",
-              "name": "--mdc-toggle-height"
+              "description": "Border color of the toast.",
+              "name": "--mdc-toast-border-color"
             },
             {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-toggle-width-compact"
+              "description": "Color of the header text in the toast.",
+              "name": "--mdc-toast-header-text-color"
             },
             {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-toggle-height-compact"
+              "description": "Color of the icon in the toast.",
+              "name": "--mdc-toast-icon-color"
             },
             {
-              "description": "Line height of the toggle label",
-              "name": "--mdc-toggle-label-lineheight"
+              "description": "Elevation effect applied to the toast.",
+              "name": "--mdc-toast-elevation-3"
             },
             {
-              "description": "Font size of the toggle label",
-              "name": "--mdc-toggle-label-fontsize"
+              "description": "Width of the toast.",
+              "name": "--mdc-toast-width"
             },
             {
-              "description": "Font weight of the toggle label",
-              "name": "--mdc-toggle-label-fontweight"
+              "description": "Padding inside the toast.",
+              "name": "--mdc-toast-padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container for the toast's main content, including icon, text, and close button.",
+              "name": "content-container"
             },
             {
-              "description": "Color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
+              "description": "The icon shown at the start of the toast, styled by variant.",
+              "name": "toast-prefix-icon"
             },
             {
-              "description": "Color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
+              "description": "The container for the header and body content of the toast.",
+              "name": "toast-content"
             },
             {
-              "description": "Background color of the active toggle in hover state",
-              "name": "--mdc-toggle-active-hover-color"
+              "description": "The header text of the toast.",
+              "name": "toast-header"
             },
             {
-              "description": "Background color of the active toggle in pressed state",
-              "name": "--mdc-toggle-active-pressed-color"
+              "description": "The container for the toast's footer, including toggle and action buttons.",
+              "name": "footer"
             },
             {
-              "description": "Background color of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-color"
+              "description": "The toggle button for showing/hiding detailed content.",
+              "name": "footer-button-toggle"
             },
             {
-              "description": "Background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-color"
+              "description": "The close button for the toast.",
+              "name": "toast-close-btn"
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "manageRequired",
-              "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
-            },
+          "slots": [
             {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
+              "description": "Slot for custom content before the icon (only for custom variant).",
+              "name": "content-prefix"
             },
             {
-              "kind": "method",
-              "name": "toggleState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
+              "description": "Slot for the main body content of the toast.",
+              "name": "toast-body-normal"
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
+              "description": "Slot for additional detailed content, shown when expanded.",
+              "name": "toast-body-detailed"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+              "description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
+              "name": "footer"
             },
             {
-              "kind": "method",
-              "name": "setToggleSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "ToggleSize"
-                  },
-                  "description": "The size to set."
-                }
-              ],
-              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
+              "description": "Slot for passing the primary variant of `mdc-button` in the footer.",
+              "name": "footer-button-primary"
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
+              "description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
+              "name": "footer-button-secondary"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "ToastVariant"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
+              "default": "'custom'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "closeButtonAriaLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Defines aria-label attribute for close button accessibility",
+              "attribute": "close-button-aria-label"
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "headerText",
               "type": {
-                "text": "ValidityState"
+                "text": "string | undefined"
               },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Defines a string value to display as the title of the toast",
+              "attribute": "header-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "headerTagName",
+              "type": {
+                "text": "TagName"
               },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The html tag to be used for the header text",
+              "default": "'h2'",
+              "attribute": "header-tag-name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "ariaLabel",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
+              "description": "Defines aria-label attribute when header is not used",
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "showMoreText",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
+              "attribute": "show-more-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "showLessText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
+              "attribute": "show-less-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "isDetailVisible",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "hasDetailedSlot",
               "type": {
-                "text": "ValidationType"
+                "text": "boolean"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "detailedElements",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement[]"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "hasFooterButtons",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "kind": "field",
-              "name": "toggletipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "kind": "method",
+              "name": "closeToast",
+              "privacy": "private",
+              "description": "Fired when Close Button is clicked using mouse or keyboard.\nThis method dispatches the close event.\nIt is used to notify that the toast should be closed."
             },
             {
-              "kind": "field",
-              "name": "infoIconAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "kind": "method",
+              "name": "toggleDetailVisibility",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "name": "updateDetailedSlotPresence",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderHelpTextIcon",
+              "name": "updateFooterButtonsPresence",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
               "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
-              "return": {
-                "type": {
-                  "text": ""
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "string"
+                  }
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "shouldRenderToggleButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderToggleDetailButton",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "name": "renderHeader",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "renderLabel",
+              "name": "handleFooterSlot",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "parameters": [
+                {
+                  "name": "tagname",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "variant",
+                  "optional": true,
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
+              "name": "renderFooter",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FooterMixin",
+                "module": "utils/mixins/FooterMixin.js"
               }
             }
           ],
           "events": [
             {
-              "type": {
-                "text": "EventConstructor"
-              }
-            },
-            {
-              "description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
-              "name": "change",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "description": "(React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.",
+              "name": "close",
+              "reactName": "onClose"
             }
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "ToastVariant"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
+              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
+              "default": "'custom'",
+              "fieldName": "variant"
             },
             {
-              "name": "validation-message",
+              "name": "close-button-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines aria-label attribute for close button accessibility",
+              "fieldName": "closeButtonAriaLabel"
             },
             {
-              "name": "label",
+              "name": "header-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines a string value to display as the title of the toast",
+              "fieldName": "headerText"
             },
             {
-              "name": "help-text-type",
+              "name": "header-tag-name",
               "type": {
-                "text": "ValidationType"
+                "text": "TagName"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "The html tag to be used for the header text",
+              "default": "'h2'",
+              "fieldName": "headerTagName"
             },
             {
-              "name": "help-text",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "default": "null",
+              "description": "Defines aria-label attribute when header is not used",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "toggletip-text",
+              "name": "show-more-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "toggletip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
+              "fieldName": "showMoreText"
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "show-less-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
+              "fieldName": "showLessText"
             }
           ],
           "mixins": [
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
             }
           ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n */",
+          "tagName": "mdc-toast",
+          "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n * \n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-linkbutton\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n * \n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
           "customElement": true
         }
       ],
@@ -37946,8 +37982,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toggle",
-            "module": "components/toggle/toggle.component.js"
+            "name": "Toast",
+            "module": "components/toast/toast.component.js"
           }
         }
       ]