@momentum-design/components 0.117.1 → 0.117.3

package/dist/custom-elements.json

@@ -34416,7 +34416,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\nYou can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
           "name": "Select",
           "cssProperties": [
             {
@@ -34512,7 +34512,8 @@
               "type": {
                 "text": "Placement"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
+              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
+              "default": "'bottom-start'",
               "attribute": "placement",
               "reflects": true
             },
@@ -34542,7 +34543,7 @@
               "kind": "field",
               "name": "strategy",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "PopoverStrategy"
               },
               "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
               "default": "absolute",
@@ -34570,52 +34571,6 @@
               "attribute": "backdrop-append-to",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "getAllValidOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Array<Option>"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getFirstValidOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getLastValidOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getFirstSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "modifyListBoxWrapper",
-              "privacy": "private",
-              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
-            },
             {
               "kind": "method",
               "name": "handleOptionsClick",
@@ -34656,27 +34611,6 @@
               ],
               "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
             },
-            {
-              "kind": "method",
-              "name": "updateTabIndexForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "optional": true,
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which tabIndex should be set to 0."
-                }
-              ],
-              "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
-            },
             {
               "kind": "method",
               "name": "updateSelectedInChildOptions",
@@ -34786,34 +34720,123 @@
             },
             {
               "kind": "method",
-              "name": "handlePopoverKeydown",
+              "name": "getCurrentIndex",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "target",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "EventTarget | null"
                   },
-                  "description": "The keyboard event."
+                  "description": "The target element that triggered the event."
                 }
               ],
-              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
+              "description": "Retrieves the current index of the item that triggered the event.",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "updateState",
-              "privacy": "public",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -35192,7 +35215,8 @@
               "type": {
                 "text": "Placement"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
+              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
+              "default": "'bottom-start'",
               "fieldName": "placement"
             },
             {
@@ -35216,7 +35240,7 @@
             {
               "name": "strategy",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "PopoverStrategy"
               },
               "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
               "default": "absolute",
@@ -35404,6 +35428,14 @@
             }
           ],
           "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+            },
             {
               "name": "AutoFocusOnMountMixin",
               "module": "/src/utils/mixins/AutoFocusOnMountMixin"
@@ -35422,7 +35454,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
           "customElement": true
         }
       ],
@@ -40210,7 +40242,7 @@
             "module": "/src/models"
           },
           "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 *\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 */",
+          "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 *\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
         }
       ],

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/accordion';
+import type { Events as EventsInherited } from '../../components/accordionbutton/accordionbutton.types';
 /**
  * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.
  *
@@ -50,8 +51,6 @@ import Component from '../../components/accordion';
  * @csspart body-section - The body section of the accordion.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: EventName<import("../../utils/types").TypedCustomEvent<import("../../components/accordionbutton/accordionbutton.component").default, {
-        expanded: boolean;
-    }>>;
+    onShown: EventName<EventsInherited["onShownEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/accordionbutton';
+import type { Events } from '../../components/accordionbutton/accordionbutton.types';
 /**
  * An accordion button contains a header and body section with optional slots inside the heading which are focusable.
  *
@@ -47,8 +48,6 @@ import Component from '../../components/accordionbutton';
  * @csspart body-section - The body section of the accordion button.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        expanded: boolean;
-    }>>;
+    onShown: EventName<Events["onShownEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/alertchip';
+import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
@@ -27,9 +28,9 @@ import Component from '../../components/alertchip';
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onClick: EventName<EventsInherited["onClickEvent"]>;
+    onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
+    onKeyUp: EventName<EventsInherited["onKeyUpEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/animation';
+import type { Events } from '../../components/animation/animation.types';
 /**
  * The `mdc-animation` component is a wrapper around the Lottie animation library.
  * It fetches the animation data dynamically based on the provided name and renders it.
@@ -13,14 +14,8 @@ import Component from '../../components/animation';
  * @event error - (React: onError) This event is dispatched when animation loading failed
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onLoad: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        name: "meeting" | "success" | "audio_video" | "calling" | "alert_32px_loop" | "hello_32px" | "processing_32px_end" | "processing_32px_loop" | "processing_32px_start" | "responding_32px_end" | "responding_32px_loop" | "responding_32px_start" | "contacts" | "discoverability_badge" | "heart_opacity_test" | "personal_insight" | "celebrate" | "clap_dark" | "clap_light" | "clap_medium_dark" | "clap_medium_light" | "clap_medium" | "clap_yellow" | "fire" | "haha" | "heart" | "on_video_celebrate" | "on_video_clap_dark" | "on_video_clap_light" | "on_video_clap_medium_dark" | "on_video_clap_medium_light" | "on_video_clap_medium" | "on_video_clap_yellow" | "on_video_fire" | "on_video_haha" | "on_video_heart" | "on_video_prayer_dark" | "on_video_prayer_light" | "on_video_prayer_medium_dark" | "on_video_prayer_medium_light" | "on_video_prayer_medium" | "on_video_prayer_yellow" | "on_video_raise_hand_dark" | "on_video_raise_hand_light" | "on_video_raise_hand_medium_dark" | "on_video_raise_hand_medium_light" | "on_video_raise_hand_medium" | "on_video_raise_hand_yellow" | "on_video_sad" | "on_video_slow_down" | "on_video_smile" | "on_video_speed_up" | "on_video_thumb_down_dark" | "on_video_thumb_down_light" | "on_video_thumb_down_medium_dark" | "on_video_thumb_down_medium_light" | "on_video_thumb_down_medium" | "on_video_thumb_down_yellow" | "on_video_thumb_up_dark" | "on_video_thumb_up_light" | "on_video_thumb_up_medium_dark" | "on_video_thumb_up_medium_light" | "on_video_thumb_up_medium" | "on_video_thumb_up_yellow" | "on_video_wow" | "prayer_dark" | "prayer_light" | "prayer_medium_dark" | "prayer_medium_light" | "prayer_medium" | "prayer_yellow" | "raise_hand_dark" | "raise_hand_light" | "raise_hand_medium_dark" | "raise_hand_medium_light" | "raise_hand_medium" | "raise_hand_yellow" | "sad" | "slow_down" | "smile" | "speed_up" | "thumb_down_dark" | "thumb_down_light" | "thumb_down_medium_dark" | "thumb_down_medium_light" | "thumb_down_medium" | "thumb_down_yellow" | "thumb_up_dark" | "thumb_up_light" | "thumb_up_medium_dark" | "thumb_up_medium_light" | "thumb_up_medium" | "thumb_up_yellow" | "wow" | "space" | "teams" | "webex_logo_loop" | "welcome";
-    }>>;
-    onComplete: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        name: "meeting" | "success" | "audio_video" | "calling" | "alert_32px_loop" | "hello_32px" | "processing_32px_end" | "processing_32px_loop" | "processing_32px_start" | "responding_32px_end" | "responding_32px_loop" | "responding_32px_start" | "contacts" | "discoverability_badge" | "heart_opacity_test" | "personal_insight" | "celebrate" | "clap_dark" | "clap_light" | "clap_medium_dark" | "clap_medium_light" | "clap_medium" | "clap_yellow" | "fire" | "haha" | "heart" | "on_video_celebrate" | "on_video_clap_dark" | "on_video_clap_light" | "on_video_clap_medium_dark" | "on_video_clap_medium_light" | "on_video_clap_medium" | "on_video_clap_yellow" | "on_video_fire" | "on_video_haha" | "on_video_heart" | "on_video_prayer_dark" | "on_video_prayer_light" | "on_video_prayer_medium_dark" | "on_video_prayer_medium_light" | "on_video_prayer_medium" | "on_video_prayer_yellow" | "on_video_raise_hand_dark" | "on_video_raise_hand_light" | "on_video_raise_hand_medium_dark" | "on_video_raise_hand_medium_light" | "on_video_raise_hand_medium" | "on_video_raise_hand_yellow" | "on_video_sad" | "on_video_slow_down" | "on_video_smile" | "on_video_speed_up" | "on_video_thumb_down_dark" | "on_video_thumb_down_light" | "on_video_thumb_down_medium_dark" | "on_video_thumb_down_medium_light" | "on_video_thumb_down_medium" | "on_video_thumb_down_yellow" | "on_video_thumb_up_dark" | "on_video_thumb_up_light" | "on_video_thumb_up_medium_dark" | "on_video_thumb_up_medium_light" | "on_video_thumb_up_medium" | "on_video_thumb_up_yellow" | "on_video_wow" | "prayer_dark" | "prayer_light" | "prayer_medium_dark" | "prayer_medium_light" | "prayer_medium" | "prayer_yellow" | "raise_hand_dark" | "raise_hand_light" | "raise_hand_medium_dark" | "raise_hand_medium_light" | "raise_hand_medium" | "raise_hand_yellow" | "sad" | "slow_down" | "smile" | "speed_up" | "thumb_down_dark" | "thumb_down_light" | "thumb_down_medium_dark" | "thumb_down_medium_light" | "thumb_down_medium" | "thumb_down_yellow" | "thumb_up_dark" | "thumb_up_light" | "thumb_up_medium_dark" | "thumb_up_medium_light" | "thumb_up_medium" | "thumb_up_yellow" | "wow" | "space" | "teams" | "webex_logo_loop" | "welcome";
-    }>>;
-    onError: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        error: Error;
-    }>>;
+    onLoad: EventName<Events["onLoadEvent"]>;
+    onComplete: EventName<Events["onCompleteEvent"]>;
+    onError: EventName<Events["onErrorEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/avatarbutton';
+import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
  *
@@ -29,9 +30,9 @@ import Component from '../../components/avatarbutton';
  * @csspart loader - The loading indicator part of the avatar.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onClick: EventName<EventsInherited["onClickEvent"]>;
+    onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
+    onKeyUp: EventName<EventsInherited["onKeyUpEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/brandvisual';
+import type { Events } from '../../components/brandvisual/brandvisual.types';
 /**
  * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are
  * displayed correctly within applications.
@@ -18,11 +19,7 @@ import Component from '../../components/brandvisual';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onLoad: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        name: "device-deskphone-eighteightsevenfour" | "device-deskphone-eighteightsevenone" | "device-deskphone-eighteightseventwo" | "device-deskphone-eighteightsevenzero" | "device-deskphone-nineeightfiveone" | "device-deskphone-nineeightfourone" | "device-deskphone-nineeightsevenone" | "device-deskphone-nineeightsixone" | "device-deskpro-gtwo" | "device-dx-sixfivezero" | "device-ip-conference-phone-seveneightthreethree" | "device-ip-phone-eighteightfiveone-plus-multiple-screen" | "device-ip-phone-eighteightfiveone-plus-screen" | "device-ip-phone-eighteightfiveone" | "device-ip-phone-eighteightfourfive" | "device-ip-phone-eighteightfourone" | "device-ip-phone-eighteightoneone" | "device-ip-phone-eighteightsixfive-plus-screen" | "device-ip-phone-eighteightsixfive" | "device-ip-phone-eighteightsixone" | "device-ip-phone-seveneightfourone" | "device-ip-phone-seveneightoneone" | "device-ip-phone-seveneightsixone" | "device-ip-phone-seveneighttwoone" | "device-ip-phone-sixeightfiveone" | "device-ip-phone-sixeightsevenone" | "device-ip-phone-sixeightsixone" | "device-ip-phone-sixeighttwoone" | "device-ip-phone-sixninezeroone" | "device-thumbnails-deskphone-eighteightsevenfour" | "device-thumbnails-deskphone-eighteightsevenone" | "device-thumbnails-deskphone-eighteightseventwo" | "device-thumbnails-deskphone-eighteightsevenzero" | "device-thumbnails-deskphone-nineeightfiveone" | "device-thumbnails-deskphone-nineeightfourone" | "device-thumbnails-deskphone-nineeightsevenone" | "device-thumbnails-deskphone-nineeightsixone" | "device-thumbnails-deskpro-gtwo" | "device-thumbnails-dx-sixfivezero" | "device-thumbnails-ip-conference-phone-seveneightthreethree" | "device-thumbnails-ip-phone-eighteightfiveone-plus-multiple-screen" | "device-thumbnails-ip-phone-eighteightfiveone-plus-screen" | "device-thumbnails-ip-phone-eighteightfiveone" | "device-thumbnails-ip-phone-eighteightfourfive" | "device-thumbnails-ip-phone-eighteightfourone" | "device-thumbnails-ip-phone-eighteightoneone" | "device-thumbnails-ip-phone-eighteightsixfive-plus-screen" | "device-thumbnails-ip-phone-eighteightsixfive" | "device-thumbnails-ip-phone-eighteightsixone" | "device-thumbnails-ip-phone-seveneightfourone" | "device-thumbnails-ip-phone-seveneightoneone" | "device-thumbnails-ip-phone-seveneightsixone" | "device-thumbnails-ip-phone-seveneighttwoone" | "device-thumbnails-ip-phone-sixeightfiveone" | "device-thumbnails-ip-phone-sixeightsevenone" | "device-thumbnails-ip-phone-sixeightsixone" | "device-thumbnails-ip-phone-sixeighttwoone" | "device-thumbnails-ip-phone-sixninezeroone" | "operation-pop-background-dark" | "operation-pop-background-light" | "webex-background-dark" | "webex-background-light" | "alphalink" | "amazon-q-color" | "apple-business-chat-color" | "cisco-ai-assistant-bw-gradient" | "cisco-ai-assistant-bw-outline" | "cisco-ai-assistant-color-gradient" | "cisco-logo-dark-bw" | "cisco-logo-light-bw" | "cisco-logo-light-color" | "cisco-wordmark-finesse" | "citynet-horizontal" | "citynet-mark" | "creative-direction-logo-dark-bw-horizontal" | "creative-direction-logo-dark-bw-mark" | "creative-direction-logo-dark-bw-vertical" | "creative-direction-logo-dark-color-horizontal" | "creative-direction-logo-dark-color-mark" | "creative-direction-logo-dark-color-vertical" | "creative-direction-logo-light-bw-horizontal" | "creative-direction-logo-light-bw-mark" | "creative-direction-logo-light-bw-vertical" | "creative-direction-logo-light-color-horizontal" | "creative-direction-logo-light-color-mark" | "creative-direction-logo-light-color-vertical" | "device-deskphone-eighteightsevenfive" | "device-deskphone-eighteightsixsix" | "device-deskpro" | "device-generic-mobile" | "device-phoenix" | "device-telepresence-dxeightzero" | "device-telepresence-dxsevenzero" | "device-telepresence-ixfivezerozerozero" | "device-telepresence-mxeightzerozero-dual" | "device-telepresence-mxeightzerozero-speakertrack" | "device-telepresence-mxeightzerozero" | "device-telepresence-mxsevenzerozero" | "device-telepresence-mxtwozerozero-gtwo" | "device-telepresence-sxeightzero" | "device-telepresence-sxonezero" | "device-thumbnails-deskphone-eighteightsevenfive" | "device-thumbnails-deskphone-eighteightsixsix" | "device-thumbnails-deskpro" | "device-thumbnails-generic-mobile" | "device-thumbnails-phoenix" | "device-thumbnails-telepresence-dxeightzero" | "device-thumbnails-telepresence-dxsevenzero" | "device-thumbnails-telepresence-ixfivezerozerozero" | "device-thumbnails-telepresence-mxeightzerozero-dual" | "device-thumbnails-telepresence-mxeightzerozero-speakertrack" | "device-thumbnails-telepresence-mxeightzerozero" | "device-thumbnails-telepresence-mxsevenzerozero" | "device-thumbnails-telepresence-mxtwozerozero-gtwo" | "device-thumbnails-telepresence-sxeightzero" | "device-thumbnails-telepresence-sxonezero" | "device-thumbnails-webex-board-fivefive" | "device-thumbnails-webex-codec-plus" | "device-thumbnails-webex-room-bar" | "device-thumbnails-webex-room-fivefive" | "device-thumbnails-webex-room-kit-mini" | "device-thumbnails-webex-room-kit-plus" | "device-thumbnails-webex-room-kit-psixzero" | "device-thumbnails-webex-room-kit" | "device-thumbnails-webex-room-sevenzero-dual" | "device-thumbnails-webex-room-sevenzero" | "device-thumbnails-webex-share-ninesix-with-spark" | "device-thumbnails-webex-share-with-macbook" | "device-thumbnails-webex-share" | "device-webex-board-fivefive" | "device-webex-codec-plus" | "device-webex-room-bar" | "device-webex-room-fivefive" | "device-webex-room-kit-mini" | "device-webex-room-kit-plus" | "device-webex-room-kit-psixzero" | "device-webex-room-kit" | "device-webex-room-sevenzero-dual" | "device-webex-room-sevenzero" | "device-webex-share-ninesix-with-spark" | "device-webex-share-with-macbook" | "device-webex-share" | "excelcom-horizontal" | "excelcom-mark" | "fedramp-logo" | "glean-color" | "google-meet-color" | "iq-horizontal" | "iq-mark" | "jira-color" | "momentum-design-logo-dark-bw-horizontal" | "momentum-design-logo-dark-bw-mark" | "momentum-design-logo-dark-bw-vertical" | "momentum-design-logo-dark-color-horizontal" | "momentum-design-logo-dark-color-mark" | "momentum-design-logo-dark-color-vertical" | "momentum-design-logo-light-bw-horizontal" | "momentum-design-logo-light-bw-mark" | "momentum-design-logo-light-bw-vertical" | "momentum-design-logo-light-color-horizontal" | "momentum-design-logo-light-color-mark" | "momentum-design-logo-light-color-vertical" | "ms-teams-color" | "northland-horizontal" | "northland-mark" | "salesforce-color" | "slack-color" | "slido-color" | "social-alexa-bw" | "social-alexa-color" | "social-facebook-bw" | "social-facebook-color" | "social-fbmessenger-bw" | "social-fbmessenger-color" | "social-instagram" | "social-line-bw" | "social-line-color" | "social-microsoft-bw" | "social-microsoft-color" | "social-rcs-bw" | "social-rcs-color" | "social-telegram-bw" | "social-telegram-color" | "social-viber-bw" | "social-viber-color" | "social-wechat-bw" | "social-wechat-color" | "social-whatsapp-bw" | "social-whatsapp-color" | "social-x" | "swiftmatch-bw" | "swiftmatch-color" | "switchconnect-horizontal" | "switchconnect-mark" | "telus-horizontal" | "telus-mark" | "verizon-horizontal" | "verizon-mark" | "videotron-horizontal" | "videotron-mark" | "voicepilot-mark" | "voxon-horizontal" | "voxon-mark" | "webex-app-icon-color-container" | "webex-app-icon-meet-container" | "webex-app-icon-play-container" | "webex-app-icon-record-container" | "webex-app-icon-wda-container" | "webex-design-logo-dark-bw-gradient" | "webex-design-logo-dark-bw-outline" | "webex-design-logo-light-bw-gradient" | "webex-design-logo-light-bw-outline" | "webex-graphic-element-graphic-five" | "webex-graphic-element-graphic-four" | "webex-graphic-element-graphic-one" | "webex-graphic-element-graphic-three" | "webex-graphic-element-graphic-two" | "webex-graphic-element-wx-graphic" | "webex-logo-lockup-dark-bw-gradient-horizontal-bycisco" | "webex-logo-lockup-dark-bw-gradient-horizontal" | "webex-logo-lockup-dark-bw-gradient-vertical-bycisco" | "webex-logo-lockup-dark-bw-gradient-vertical" | "webex-logo-lockup-dark-bw-outline-horizontal-bycisco" | "webex-logo-lockup-dark-bw-outline-horizontal" | "webex-logo-lockup-dark-bw-outline-vertical-bycisco" | "webex-logo-lockup-dark-bw-outline-vertical" | "webex-logo-lockup-dark-color-gradient-horizontal-bycisco" | "webex-logo-lockup-dark-color-gradient-horizontal" | "webex-logo-lockup-dark-color-gradient-vertical-bycisco" | "webex-logo-lockup-dark-color-gradient-vertical" | "webex-logo-lockup-light-bw-gradient-horizontal-bycisco" | "webex-logo-lockup-light-bw-gradient-horizontal" | "webex-logo-lockup-light-bw-gradient-vertical-bycisco" | "webex-logo-lockup-light-bw-gradient-vertical" | "webex-logo-lockup-light-bw-outline-horizontal-bycisco" | "webex-logo-lockup-light-bw-outline-horizontal" | "webex-logo-lockup-light-bw-outline-vertical-bycisco" | "webex-logo-lockup-light-bw-outline-vertical" | "webex-logo-lockup-light-color-gradient-horizontal-bycisco" | "webex-logo-lockup-light-color-gradient-horizontal" | "webex-logo-lockup-light-color-gradient-vertical-bycisco" | "webex-logo-lockup-light-color-gradient-vertical" | "webex-partnership-logo-lockup-dark-apple" | "webex-partnership-logo-lockup-dark-box" | "webex-partnership-logo-lockup-dark-microsoft" | "webex-partnership-logo-lockup-dark-ms-teams" | "webex-partnership-logo-lockup-dark-okta" | "webex-partnership-logo-lockup-light-apple" | "webex-partnership-logo-lockup-light-box" | "webex-partnership-logo-lockup-light-microsoft" | "webex-partnership-logo-lockup-light-ms-teams" | "webex-partnership-logo-lockup-light-okta" | "webex-suite-icons-dark-bw-outline-events" | "webex-suite-icons-dark-bw-outline-vidcast" | "webex-suite-icons-dark-bw-outline-webex" | "webex-suite-icons-dark-color-gradient-events" | "webex-suite-icons-dark-color-gradient-vidcast" | "webex-suite-icons-dark-color-gradient-webex" | "webex-suite-icons-light-bw-outline-events" | "webex-suite-icons-light-bw-outline-vidcast" | "webex-suite-icons-light-bw-outline-webex" | "webex-suite-icons-light-color-gradient-events" | "webex-suite-icons-light-color-gradient-vidcast" | "webex-suite-icons-light-color-gradient-webex" | "webex-suite-tiles-dark-assist" | "webex-suite-tiles-dark-bot" | "webex-suite-tiles-dark-campaign" | "webex-suite-tiles-dark-engage" | "webex-suite-tiles-light-assist" | "webex-suite-tiles-light-bot" | "webex-suite-tiles-light-campaign" | "webex-suite-tiles-light-engage" | "webex-suite-wordmark-dark-account" | "webex-suite-wordmark-dark-adoption-methodology" | "webex-suite-wordmark-dark-ai-agent-studio" | "webex-suite-wordmark-dark-ambassador" | "webex-suite-wordmark-dark-analyzer" | "webex-suite-wordmark-dark-app-hub" | "webex-suite-wordmark-dark-assist" | "webex-suite-wordmark-dark-campaign-management" | "webex-suite-wordmark-dark-campaign-manager" | "webex-suite-wordmark-dark-campaign" | "webex-suite-wordmark-dark-connect-integrations" | "webex-suite-wordmark-dark-connect" | "webex-suite-wordmark-dark-contact-center" | "webex-suite-wordmark-dark-control-hub" | "webex-suite-wordmark-dark-cx-studio" | "webex-suite-wordmark-dark-directory-connector" | "webex-suite-wordmark-dark-ediscovery" | "webex-suite-wordmark-dark-engage" | "webex-suite-wordmark-dark-events" | "webex-suite-wordmark-dark-flow-designer" | "webex-suite-wordmark-dark-for-developers" | "webex-suite-wordmark-dark-global-service-status" | "webex-suite-wordmark-dark-interact" | "webex-suite-wordmark-dark-notify" | "webex-suite-wordmark-dark-partner-hub" | "webex-suite-wordmark-dark-placeholder" | "webex-suite-wordmark-dark-reach" | "webex-suite-wordmark-dark-settings" | "webex-suite-wordmark-dark-suite-settings" | "webex-suite-wordmark-dark-support" | "webex-suite-wordmark-dark-the-bridge" | "webex-suite-wordmark-dark-topic-analytics" | "webex-suite-wordmark-dark-user-hub" | "webex-suite-wordmark-dark-vidcast" | "webex-suite-wordmark-dark-view" | "webex-suite-wordmark-dark-whiteboard" | "webex-suite-wordmark-light-account" | "webex-suite-wordmark-light-adoption-methodology" | "webex-suite-wordmark-light-ai-agent-studio" | "webex-suite-wordmark-light-ambassador" | "webex-suite-wordmark-light-analyzer" | "webex-suite-wordmark-light-app-hub" | "webex-suite-wordmark-light-assist" | "webex-suite-wordmark-light-campaign-management" | "webex-suite-wordmark-light-campaign-manager" | "webex-suite-wordmark-light-campaign" | "webex-suite-wordmark-light-connect-integrations" | "webex-suite-wordmark-light-connect" | "webex-suite-wordmark-light-contact-center" | "webex-suite-wordmark-light-control-hub" | "webex-suite-wordmark-light-cx-studio" | "webex-suite-wordmark-light-directory-connector" | "webex-suite-wordmark-light-ediscovery" | "webex-suite-wordmark-light-engage" | "webex-suite-wordmark-light-events" | "webex-suite-wordmark-light-flow-designer" | "webex-suite-wordmark-light-for-developers" | "webex-suite-wordmark-light-global-service-status" | "webex-suite-wordmark-light-interact" | "webex-suite-wordmark-light-notify" | "webex-suite-wordmark-light-partner-hub" | "webex-suite-wordmark-light-placeholder" | "webex-suite-wordmark-light-reach" | "webex-suite-wordmark-light-settings" | "webex-suite-wordmark-light-suite-settings" | "webex-suite-wordmark-light-support" | "webex-suite-wordmark-light-the-bridge" | "webex-suite-wordmark-light-topic-analytics" | "webex-suite-wordmark-light-user-hub" | "webex-suite-wordmark-light-vidcast" | "webex-suite-wordmark-light-view" | "webex-suite-wordmark-light-whiteboard" | "webex-symbol-common-color-gradient" | "webex-symbol-dark-bw-gradient" | "webex-symbol-dark-bw-outline" | "webex-symbol-light-bw-gradient" | "webex-symbol-light-bw-outline" | "webex-wordmark-dark-horizontal-bycisco" | "webex-wordmark-dark-vertical-bycisco-center" | "webex-wordmark-dark-vertical-bycisco-right" | "webex-wordmark-dark-wordmark" | "webex-wordmark-light-horizontal-bycisco" | "webex-wordmark-light-vertical-bycisco-center" | "webex-wordmark-light-vertical-bycisco-right" | "webex-wordmark-light-wordmark" | "xtel-horizontal" | "xtel-mark" | "zoom-color";
-    }>>;
-    onError: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        error: Error;
-    }>>;
+    onLoad: EventName<Events["onLoadEvent"]>;
+    onError: EventName<Events["onErrorEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/button';
+import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -39,9 +40,9 @@ import Component from '../../components/button';
  * @csspart postfix - Content after the text label, passed in `postfix` slot
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onClick: EventName<EventsInherited["onClickEvent"]>;
+    onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
+    onKeyUp: EventName<EventsInherited["onKeyUpEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/buttonlink';
+import type { Events as EventsInherited } from '../../components/linksimple/linksimple.types';
 /**
  * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
  * features of `mdc-button`. This includes support for variants, sizing, and optional
@@ -27,9 +28,9 @@ import Component from '../../components/buttonlink';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/linksimple/linksimple.component").default>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/linksimple/linksimple.component").default>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/linksimple/linksimple.component").default>>;
-    onBlur: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/linksimple/linksimple.component").default>>;
+    onClick: EventName<EventsInherited["onClickEvent"]>;
+    onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
+    onBlur: EventName<EventsInherited["onBlurEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/buttonsimple';
+import type { Events } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.
@@ -13,9 +14,9 @@ import Component from '../../components/buttonsimple';
  * @tagname mdc-buttonsimple
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
-    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+    onClick: EventName<Events["onClickEvent"]>;
+    onKeyDown: EventName<Events["onKeyDownEvent"]>;
+    onKeyUp: EventName<Events["onKeyUpEvent"]>;
+    onFocus: EventName<Events["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/cardbutton';
+import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * cardbutton component looks like a card and behaves as a button component.
  *
@@ -38,9 +39,9 @@ import Component from '../../components/cardbutton';
  * @cssproperty --mdc-card-width - The width of the card
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, import("../../components/buttonsimple/buttonsimple.component").default>>;
+    onClick: EventName<EventsInherited["onClickEvent"]>;
+    onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
+    onKeyUp: EventName<EventsInherited["onKeyUpEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/cardcheckbox';
+import type { Events } from '../../components/cardcheckbox/cardcheckbox.types';
 /**
  * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.
  *
@@ -48,12 +49,10 @@ import Component from '../../components/cardcheckbox';
  * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<CustomEvent<unknown> & {
-        target: Component;
-    }>;
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
-    onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+    onChange: EventName<Events["onChangeEvent"]>;
+    onClick: EventName<Events["onClickEvent"]>;
+    onKeyDown: EventName<Events["onKeyDownEvent"]>;
+    onKeyUp: EventName<Events["onKeyUpEvent"]>;
+    onFocus: EventName<Events["onFocusEvent"]>;
 }>;
 export default reactWrapper;