@momentum-design/components 0.104.0 → 0.104.2

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

@@ -1,8 +1,11 @@
-import type { ValueOf } from '../../utils/types';
+import type { TypedCustomEvent, ValueOf } from '../../utils/types';
+import type AccordionButton from './accordionbutton.component';
 import { ICON_NAME, VARIANT } from './accordionbutton.constants';
 type Variant = ValueOf<typeof VARIANT>;
 type IconName = ValueOf<typeof ICON_NAME>;
 interface Events {
-    onShownEvent: Event;
+    onShownEvent: TypedCustomEvent<AccordionButton, {
+        expanded: boolean;
+    }>;
 }
 export type { Variant, IconName, Events };

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

@@ -1,12 +1,20 @@
 import type AnimationNames from '@momentum-design/animations/dist/types/types';
+import type { TypedCustomEvent } from '../../utils/types';
+import type Animation from './animation.component';
 /** Event mapping for React */
 interface Events {
     /** This event is dispatched when the animation is loaded */
-    onLoadEvent: Event;
+    onLoadEvent: TypedCustomEvent<Animation, {
+        name: AnimationNames;
+    }>;
     /** This event is dispatched when all animation loops completed */
-    onCompleteEvent: Event;
+    onCompleteEvent: TypedCustomEvent<Animation, {
+        name: AnimationNames;
+    }>;
     /** This event is dispatched when animation loading failed */
-    onErrorEvent: Event;
+    onErrorEvent: TypedCustomEvent<Animation, {
+        error: Error;
+    }>;
 }
 type LoopType = `${boolean | number}`;
 export type { Events, AnimationNames, LoopType };

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

@@ -1,6 +1,12 @@
 import type BrandVisualNames from '@momentum-design/brand-visuals/dist/types/types';
+import type { TypedCustomEvent } from '../../utils/types';
+import type Brandvisual from './brandvisual.component';
 interface Events {
-    onLoadEvent: Event;
-    onErrorEvent: Event;
+    onLoadEvent: TypedCustomEvent<Brandvisual, {
+        name: BrandVisualNames;
+    }>;
+    onErrorEvent: TypedCustomEvent<Brandvisual, {
+        error: Error;
+    }>;
 }
 export type { BrandVisualNames, Events };

package/dist/components/button/button.component.d.ts

@@ -28,15 +28,19 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
  * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
  * - **Icon button**: A button represented by just an icon without any text.
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ * @slot prefix - Content to be displayed before the text label.
+ * @slot postfix - Content to be displayed after the text label.
  *
  * @csspart button-text - Text label of the button, passed in default slot
+ * @csspart prefix - Content before the text label, passed in `prefix` slot
+ * @csspart postfix - Content after the text label, passed in `postfix` slot
  */
 declare class Button extends Button_base {
     /**

package/dist/components/button/button.component.js

@@ -39,15 +39,19 @@ import { getIconNameWithoutStyle } from './button.utils';
  * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
  * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
  * - **Icon button**: A button represented by just an icon without any text.
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ * @slot prefix - Content to be displayed before the text label.
+ * @slot postfix - Content to be displayed after the text label.
  *
  * @csspart button-text - Text label of the button, passed in default slot
+ * @csspart prefix - Content before the text label, passed in `prefix` slot
+ * @csspart postfix - Content after the text label, passed in `postfix` slot
  */
 class Button extends ButtonComponentMixin(Buttonsimple) {
     constructor() {
@@ -124,21 +128,25 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
     }
     render() {
         return html `
-      ${this.prefixFilledIconName
+      <slot name="prefix" part="prefix">
+        ${this.prefixFilledIconName
             ? html ` <mdc-icon
-            name="${this.prefixFilledIconName}"
-            part="prefix-icon"
-            length-unit="rem"
-          ></mdc-icon>`
+              name="${this.prefixFilledIconName}"
+              part="prefix-icon"
+              length-unit="rem"
+            ></mdc-icon>`
             : ''}
+      </slot>
       <slot @slotchange=${this.inferButtonType} part="button-text"></slot>
-      ${this.postfixFilledIconName
+      <slot name="postfix" part="postfix">
+        ${this.postfixFilledIconName
             ? html ` <mdc-icon
-            name="${this.postfixFilledIconName}"
-            part="postfix-icon"
-            length-unit="rem"
-          ></mdc-icon>`
+              name="${this.postfixFilledIconName}"
+              part="postfix-icon"
+              length-unit="rem"
+            ></mdc-icon>`
             : ''}
+      </slot>
     `;
     }
 }

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

@@ -1,7 +1,9 @@
+import type { OverrideEventTarget } from "../../utils/types";
+import type ButtonLink from "./buttonlink.component";
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
-    onBlurEvent: Event;
+    onClickEvent: OverrideEventTarget<MouseEvent, ButtonLink>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, ButtonLink>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, ButtonLink>;
+    onBlurEvent: OverrideEventTarget<FocusEvent, ButtonLink>;
 }
 export type { Events };

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

@@ -1,11 +1,12 @@
-import type { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type ButtonSimple from './buttonsimple.component';
 import { BUTTON_TYPE, BUTTON_SIZES } from './buttonsimple.constants';
 type ButtonSize = ValueOf<typeof BUTTON_SIZES>;
 type ButtonType = ValueOf<typeof BUTTON_TYPE>;
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
+    onClickEvent: OverrideEventTarget<MouseEvent, ButtonSimple>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, ButtonSimple>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, ButtonSimple>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, ButtonSimple>;
 }
 export type { ButtonSize, ButtonType, Events };

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

@@ -1,7 +1,9 @@
+import type { OverrideEventTarget } from "../../utils/types";
+import type CardButton from "./cardbutton.component";
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
+    onClickEvent: OverrideEventTarget<MouseEvent, CardButton>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardButton>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardButton>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, CardButton>;
 }
 export type { Events };

package/dist/components/cardcheckbox/cardcheckbox.component.d.ts

@@ -46,7 +46,6 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  * It toggles the checked state when enter key is used.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
- * @event change - (React: onChange) Event that gets dispatched when the card state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
  */

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -60,7 +60,6 @@ import styles from './cardcheckbox.styles';
  * It toggles the checked state when enter key is used.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
- * @event change - (React: onChange) Event that gets dispatched when the card state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
  */

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

@@ -1,11 +1,11 @@
-import type { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type CardCheckbox from './cardcheckbox.component';
 import { SELECTION_TYPE } from './cardcheckbox.constants';
 type SelectionType = ValueOf<typeof SELECTION_TYPE>;
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
-    onChangeEvent: Event;
+    onClickEvent: OverrideEventTarget<MouseEvent, CardCheckbox>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardCheckbox>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardCheckbox>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, CardCheckbox>;
 }
 export { SelectionType, Events };

package/dist/components/cardradio/cardradio.component.d.ts

@@ -45,7 +45,6 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  * It toggles the checked state when enter key is used.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
- * @event change - (React: onChange) Event that gets dispatched when the card state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
  */

package/dist/components/cardradio/cardradio.component.js

@@ -60,7 +60,6 @@ import styles from './cardradio.styles';
  * It toggles the checked state when enter key is used.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
- * @event change - (React: onChange) Event that gets dispatched when the card state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
  */

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

@@ -1,8 +1,9 @@
+import type { OverrideEventTarget } from '../../utils/types';
+import type CardRadio from './cardradio.component';
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
-    onChangeEvent: Event;
+    onClickEvent: OverrideEventTarget<MouseEvent, CardRadio>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardRadio>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardRadio>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, CardRadio>;
 }
 export type { Events };

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

@@ -1,5 +1,7 @@
+import type { OverrideEventTarget, TypedCustomEvent } from "../../utils/types";
+import type Checkbox from "./checkbox.component";
 interface Events {
-    onChangeEvent: Event;
-    onFocusEvent: FocusEvent;
+    onChangeEvent: TypedCustomEvent<Checkbox>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Checkbox>;
 }
 export type { Events };

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

@@ -1,13 +1,24 @@
-import type { ValueOf } from '../../utils/types';
+import type { TypedCustomEvent, ValueOf } from '../../utils/types';
+import type Dialog from './dialog.component';
 import { DIALOG_ROLE, DIALOG_SIZE, DIALOG_VARIANT } from './dialog.constants';
 type DialogRole = (typeof DIALOG_ROLE)[number];
 type DialogSize = ValueOf<typeof DIALOG_SIZE>;
 type DialogVariant = ValueOf<typeof DIALOG_VARIANT>;
 interface Events {
-    onShownEvent: Event;
-    onHiddenEvent: Event;
-    onCreatedEvent: Event;
-    onDestroyedEvent: Event;
-    onCloseEvent: Event;
+    onShownEvent: TypedCustomEvent<Dialog, {
+        show: boolean;
+    }>;
+    onHiddenEvent: TypedCustomEvent<Dialog, {
+        show: boolean;
+    }>;
+    onCreatedEvent: TypedCustomEvent<Dialog, {
+        show: boolean;
+    }>;
+    onDestroyedEvent: TypedCustomEvent<Dialog, {
+        show: boolean;
+    }>;
+    onCloseEvent: TypedCustomEvent<Dialog, {
+        show: boolean;
+    }>;
 }
 export type { DialogSize, DialogRole, DialogVariant, Events };

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

@@ -1,16 +1,16 @@
-import type { TypedEvent, ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
 import type Input from './input.component';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE } from './input.constants';
 type AutoCapitalizeType = ValueOf<typeof AUTO_CAPITALIZE>;
 type AutoCompleteType = ValueOf<typeof AUTO_COMPLETE>;
 type InputType = ValueOf<typeof INPUT_TYPE>;
-type InputClearEvent = TypedEvent<Input>;
-type InputChangeEvent = TypedEvent<Input>;
+type InputClearEvent = TypedCustomEvent<Input>;
+type InputChangeEvent = TypedCustomEvent<Input>;
 interface Events {
-    onInputEvent: InputEvent;
+    onInputEvent: OverrideEventTarget<InputEvent, Input>;
     onChangeEvent: InputChangeEvent;
-    onFocusEvent: FocusEvent;
-    onBlurEvent: FocusEvent;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Input>;
+    onBlurEvent: OverrideEventTarget<FocusEvent, Input>;
     onClearEvent: InputClearEvent;
 }
 export type { AutoCapitalizeType, AutoCompleteType, InputType, InputClearEvent, InputChangeEvent, Events };

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

@@ -1,4 +1,6 @@
+import type { TypedCustomEvent } from "../../utils/types";
+import type InputChip from "./inputchip.component";
 interface Events {
-    onRemoveEvent: Event;
+    onRemoveEvent: TypedCustomEvent<InputChip>;
 }
 export type { Events };

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

@@ -1,10 +1,11 @@
-import type { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type Link from './link.component';
 import { LINK_SIZES } from './link.constants';
 type LinkSize = ValueOf<typeof LINK_SIZES>;
 interface Events {
-    onClickEvent: MouseEvent;
-    onBlurEvent: Event;
-    onKeyDownEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
+    onClickEvent: OverrideEventTarget<MouseEvent, Link>;
+    onBlurEvent: OverrideEventTarget<FocusEvent, Link>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, Link>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Link>;
 }
 export type { LinkSize, Events };

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

@@ -1,10 +1,11 @@
-import type { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type LinkButton from './linkbutton.component';
 import { LINKBUTTON_SIZES } from './linkbutton.constants';
 type LinkButtonSize = ValueOf<typeof LINKBUTTON_SIZES>;
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
-    onBlurEvent: Event;
+    onClickEvent: OverrideEventTarget<MouseEvent, LinkButton>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, LinkButton>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, LinkButton>;
+    onBlurEvent: OverrideEventTarget<FocusEvent, LinkButton>;
 }
 export type { Events, LinkButtonSize };

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

@@ -1,7 +1,9 @@
+import type { OverrideEventTarget } from "../../utils/types";
+import type LinkSimple from "./linksimple.component";
 interface Events {
-    onClickEvent: MouseEvent;
-    onBlurEvent: Event;
-    onKeyDownEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
+    onClickEvent: OverrideEventTarget<MouseEvent, LinkSimple>;
+    onBlurEvent: OverrideEventTarget<FocusEvent, LinkSimple>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, LinkSimple>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, LinkSimple>;
 }
 export type { Events };

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

@@ -1,21 +1,22 @@
-import type { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type ListItem from './listitem.component';
 import { LISTITEM_VARIANTS } from './listitem.constants';
 export type ListItemVariants = ValueOf<typeof LISTITEM_VARIANTS>;
 export interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
-    onEnabledEvent: Event;
-    onDisabledEvent: Event;
-    onCreatedEvent: Event;
-    onDestroyedEvent: Event;
+    onClickEvent: OverrideEventTarget<MouseEvent, ListItem>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, ListItem>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, ListItem>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, ListItem>;
+    onEnabledEvent: TypedCustomEvent<ListItem>;
+    onDisabledEvent: TypedCustomEvent<ListItem>;
+    onCreatedEvent: TypedCustomEvent<ListItem>;
+    onDestroyedEvent: TypedCustomEvent<ListItem>;
 }
 declare global {
     interface GlobalEventHandlersEventMap {
-        disabled: Event;
-        enabled: Event;
-        created: Event;
-        destroyed: Event;
+        disabled: TypedCustomEvent<ListItem>;
+        enabled: TypedCustomEvent<ListItem>;
+        created: TypedCustomEvent<ListItem>;
+        destroyed: TypedCustomEvent<ListItem>;
     }
 }

package/dist/components/menuitem/menuitem.component.d.ts

@@ -31,6 +31,10 @@ import type { ArrowPositions, ArrowDirections } from './menuitem.types';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.
  * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
+ * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled
+ * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled
+ * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)
  */
 declare class MenuItem extends ListItem {
     /**

package/dist/components/menuitem/menuitem.component.js

@@ -45,6 +45,10 @@ import styles from './menuitem.styles';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.
  * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
+ * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled
+ * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled
+ * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)
  */
 class MenuItem extends ListItem {
     constructor() {

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

@@ -1,9 +1,15 @@
-import type { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type MenuItem from './menuitem.component';
 import { ARROW_POSITIONS, ARROW_DIRECTIONS } from './menuitem.constants';
 interface Events {
-    onChangeEvent: Event;
-    onClickEvent: MouseEvent;
-    onFocusEvent: FocusEvent;
+    onClickEvent: OverrideEventTarget<MouseEvent, MenuItem>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, MenuItem>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, MenuItem>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, MenuItem>;
+    onEnabledEvent: TypedCustomEvent<MenuItem>;
+    onDisabledEvent: TypedCustomEvent<MenuItem>;
+    onCreatedEvent: TypedCustomEvent<MenuItem>;
+    onDestroyedEvent: TypedCustomEvent<MenuItem>;
 }
 type ArrowPositions = ValueOf<typeof ARROW_POSITIONS>;
 type ArrowDirections = ValueOf<typeof ARROW_DIRECTIONS>;

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

@@ -1,9 +1,10 @@
-import { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type MenuItemCheckbox from './menuitemcheckbox.component';
 import { INDICATOR } from './menuitemcheckbox.constants';
 type Indicator = ValueOf<typeof INDICATOR>;
 interface Events {
-    onChangeEvent: Event;
-    onClickEvent: MouseEvent;
-    onFocusEvent: FocusEvent;
+    onChangeEvent: TypedCustomEvent<MenuItemCheckbox>;
+    onClickEvent: OverrideEventTarget<MouseEvent, MenuItemCheckbox>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, MenuItemCheckbox>;
 }
 export type { Events, Indicator };

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

@@ -1,9 +1,10 @@
-import { ValueOf } from '../../utils/types';
+import type { TypedCustomEvent, OverrideEventTarget, ValueOf } from '../../utils/types';
+import type MenuItemRadio from './menuitemradio.component';
 import { INDICATOR } from './menuitemradio.constants';
 type Indicator = ValueOf<typeof INDICATOR>;
 interface Events {
-    onChangeEvent: Event;
-    onClickEvent: MouseEvent;
-    onFocusEvent: FocusEvent;
+    onChangeEvent: TypedCustomEvent<MenuItemRadio>;
+    onClickEvent: OverrideEventTarget<MouseEvent, MenuItemRadio>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, MenuItemRadio>;
 }
 export type { Events, Indicator };

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

@@ -1,10 +1,7 @@
-import type MenuItem from '../menuitem';
-export type MenuPopoverChangeEvent = Event & {
-    target: MenuItem;
-};
-export type MenuPopoverActionEvent = Event & {
-    target: MenuItem;
-};
+import type { TypedCustomEvent } from '../../utils/types';
+import type MenuItem from '../menuitem/menuitem.component';
+export type MenuPopoverChangeEvent = TypedCustomEvent<MenuItem>;
+export type MenuPopoverActionEvent = TypedCustomEvent<MenuItem>;
 export interface Events {
     onChangeEvent: MenuPopoverChangeEvent;
     onActionEvent: MenuPopoverActionEvent;

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

@@ -1,7 +1,6 @@
-import type MenuItem from '../menuitem';
-export type MenuSectionChangeEvent = Event & {
-    target: MenuItem;
-};
+import type { TypedCustomEvent } from '../../utils/types';
+import type MenuItem from '../menuitem/menuitem.component';
+export type MenuSectionChangeEvent = TypedCustomEvent<MenuItem>;
 export interface Events {
     onChangeEvent: MenuSectionChangeEvent;
 }

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

@@ -1,11 +1,15 @@
-import { ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type NavMenuItem from './navmenuitem.component';
 import { ALLOWED_BADGE_TYPES } from './navmenuitem.constants';
 type BadgeType = ValueOf<typeof ALLOWED_BADGE_TYPES>;
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
-    onActiveChangeEvent: Event;
+    onClickEvent: OverrideEventTarget<MouseEvent, NavMenuItem>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, NavMenuItem>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, NavMenuItem>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, NavMenuItem>;
+    onActiveChangeEvent: TypedCustomEvent<NavMenuItem, {
+        navId: string;
+        active: boolean;
+    }>;
 }
 export type { Events, BadgeType };

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

@@ -1,7 +1,9 @@
+import type { OverrideEventTarget } from "../../utils/types";
+import type Option from "./option.component";
 interface Events {
-    onClickEvent: MouseEvent;
-    onKeyDownEvent: KeyboardEvent;
-    onKeyUpEvent: KeyboardEvent;
-    onFocusEvent: FocusEvent;
+    onClickEvent: OverrideEventTarget<MouseEvent, Option>;
+    onKeyDownEvent: OverrideEventTarget<KeyboardEvent, Option>;
+    onKeyUpEvent: OverrideEventTarget<KeyboardEvent, Option>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Option>;
 }
 export type { Events };

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

@@ -1,7 +1,9 @@
+import type { OverrideEventTarget, TypedCustomEvent } from "../../utils/types";
+import type Password from "./password.component";
 interface Events {
-    onInputEvent: InputEvent;
-    onChangeEvent: Event;
-    onFocusEvent: FocusEvent;
-    onBlurEvent: FocusEvent;
+    onInputEvent: OverrideEventTarget<InputEvent, Password>;
+    onChangeEvent: TypedCustomEvent<Password>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Password>;
+    onBlurEvent: OverrideEventTarget<FocusEvent, Password>;
 }
 export type { Events };

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

@@ -1,19 +1,19 @@
-import type { ValueOf, TypedEvent } from '../../utils/types';
+import type { ValueOf, TypedCustomEvent } from '../../utils/types';
 import type Popover from './popover.component';
 import { POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
 type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
 type PopoverColor = ValueOf<typeof COLOR>;
 type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;
-type PopoverShownEvent = TypedEvent<Popover, {
+type PopoverShownEvent = TypedCustomEvent<Popover, {
     show: boolean;
 }>;
-type PopoverHiddenEvent = TypedEvent<Popover, {
+type PopoverHiddenEvent = TypedCustomEvent<Popover, {
     show: boolean;
 }>;
-type PopoverCreatedEvent = TypedEvent<Popover, {
+type PopoverCreatedEvent = TypedCustomEvent<Popover, {
     show: boolean;
 }>;
-type PopoverDestroyedEvent = TypedEvent<Popover, {
+type PopoverDestroyedEvent = TypedCustomEvent<Popover, {
     show: boolean;
 }>;
 interface Events {

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

@@ -1,5 +1,7 @@
+import type { OverrideEventTarget, TypedCustomEvent } from "../../utils/types";
+import type Radio from "./radio.component";
 interface Events {
-    onChangeEvent: Event;
-    onFocusEvent: FocusEvent;
+    onChangeEvent: TypedCustomEvent<Radio>;
+    onFocusEvent: OverrideEventTarget<FocusEvent, Radio>;
 }
 export type { Events };