@momentum-design/components 0.117.2 → 0.117.4

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/sidenavigation';
+import type { Events } from '../../components/sidenavigation/sidenavigation.types';
 /**
  * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
  * typically used in layouts with persistent or collapsible sidebars.
@@ -65,16 +66,7 @@ import Component from '../../components/sidenavigation';
  * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onToggle: EventName<CustomEvent<{
-        expanded: boolean;
-    }> & {
-        target: Component;
-    }>;
-    onActiveChange: EventName<CustomEvent<{
-        navId: string;
-        active: boolean;
-    }> & {
-        target: Component;
-    }>;
+    onToggle: EventName<Events["onToggleEvent"]>;
+    onActiveChange: EventName<Events["onActiveChangeEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/slider';
+import type { Events } from '../../components/slider/slider.types';
 /**
  * Slider component is used to select a value or range of values from within a defined range.
  * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
@@ -34,9 +35,7 @@ import Component from '../../components/slider';
  * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<CustomEvent<unknown> & {
-        target: Component;
-    }>;
-    onInput: EventName<import("../../utils/types").OverrideEventTarget<InputEvent, Component>>;
+    onChange: EventName<Events["onChangeEvent"]>;
+    onInput: EventName<Events["onInputEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/stepperitem';
+import type { Events } from '../../components/stepperitem/stepperitem.types';
 /**
  * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
  * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
@@ -35,8 +36,8 @@ import Component from '../../components/stepperitem';
  * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
  */
 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>>;
+    onClick: EventName<Events["onClickEvent"]>;
+    onKeyDown: EventName<Events["onKeyDownEvent"]>;
+    onKeyUp: EventName<Events["onKeyUpEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,7 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/tab';
+import type { Events } from '../../components/tab/tab.types';
+import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * `mdc-tab` is Tab component to be used within the Tabgroup.
  *
@@ -98,13 +100,10 @@ import Component from '../../components/tab';
  * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onActiveChange: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        tabId: string;
-        active: boolean;
-    }>>;
-    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>>;
+    onActiveChange: EventName<Events["onActiveChangeEvent"]>;
+    onClick: EventName<EventsInherited["onClickEvent"]>;
+    onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
+    onKeyUp: EventName<EventsInherited["onKeyUpEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/tablist';
+import type { Events } from '../../components/tablist/tablist.types';
 /**
  * Tab list organizes tabs into a container.
  *
@@ -44,8 +45,6 @@ import Component from '../../components/tablist';
  * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, {
-        tabId: string;
-    }>>;
+    onChange: EventName<Events["onChangeEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/textarea';
+import type { Events } from '../../components/textarea/textarea.types';
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
@@ -50,10 +51,10 @@ import Component from '../../components/textarea';
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onLimitExceeded: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
-    onInput: EventName<import("../../utils/types").OverrideEventTarget<InputEvent, Component>>;
-    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
-    onBlur: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+    onLimitExceeded: EventName<Events["onLimitExceededEvent"]>;
+    onInput: EventName<Events["onInputEvent"]>;
+    onChange: EventName<Events["onChangeEvent"]>;
+    onFocus: EventName<Events["onFocusEvent"]>;
+    onBlur: EventName<Events["onBlurEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/toast';
+import type { Events } from '../../components/toast/toast.types';
 /**
  * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.
  * It supports success, warning, error, and custom messages, and is designed to be controlled externally.
@@ -39,6 +40,6 @@ import Component from '../../components/toast';
  * @cssproperty --mdc-toast-padding - Padding inside the toast.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onClose: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
+    onClose: EventName<Events["onCloseEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/toggle';
+import type { Events } from '../../components/toggle/toggle.types';
 /**
  * Toggle Component is an interactive control used to switch between two mutually exclusive options,
  * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
@@ -36,7 +37,7 @@ import Component from '../../components/toggle';
  * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<import("../../utils/types").TypedCustomEvent<Component, unknown>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+    onChange: EventName<Events["onChangeEvent"]>;
+    onFocus: EventName<Events["onFocusEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/toggletip';
+import type { Events as EventsInherited } from '../../components/popover/popover.types';
 /**
  * A toggletip is triggered by clicking a trigger element.
  *
@@ -36,17 +37,9 @@ import Component from '../../components/toggletip';
  * @slot - Default slot for the toggletip content
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: EventName<import("../../components/popover/popover.types").PopoverShownEvent>;
-    onHidden: EventName<import("../../components/popover/popover.types").PopoverHiddenEvent>;
-    onCreated: EventName<CustomEvent<{
-        show: boolean;
-    }> & {
-        target: import("../../components/popover/popover.component").default;
-    }>;
-    onDestroyed: EventName<CustomEvent<{
-        show: boolean;
-    }> & {
-        target: import("../../components/popover/popover.component").default;
-    }>;
+    onShown: EventName<EventsInherited["onShownEvent"]>;
+    onHidden: EventName<EventsInherited["onHiddenEvent"]>;
+    onCreated: EventName<EventsInherited["onCreatedEvent"]>;
+    onDestroyed: EventName<EventsInherited["onDestroyedEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/tooltip';
+import type { Events as EventsInherited } from '../../components/popover/popover.types';
 /**
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
@@ -20,17 +21,9 @@ import Component from '../../components/tooltip';
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onShown: EventName<import("../../components/popover/popover.types").PopoverShownEvent>;
-    onHidden: EventName<import("../../components/popover/popover.types").PopoverHiddenEvent>;
-    onCreated: EventName<CustomEvent<{
-        show: boolean;
-    }> & {
-        target: import("../../components/popover/popover.component").default;
-    }>;
-    onDestroyed: EventName<CustomEvent<{
-        show: boolean;
-    }> & {
-        target: import("../../components/popover/popover.component").default;
-    }>;
+    onShown: EventName<EventsInherited["onShownEvent"]>;
+    onHidden: EventName<EventsInherited["onHiddenEvent"]>;
+    onCreated: EventName<EventsInherited["onCreatedEvent"]>;
+    onDestroyed: EventName<EventsInherited["onDestroyedEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/typewriter';
+import type { Events } from '../../components/typewriter/typewriter.types';
 /**
  * Typewriter component that creates a typewriter effect on text content.
  * It uses the Text component internally, adding a progressive typing effect.
@@ -45,7 +46,7 @@ import Component from '../../components/typewriter';
  *   Detail: \{ content: string, isTyping: boolean \}
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onTypingComplete: EventName<import("../../components/typewriter/typewriter.types").TypewriterTypingCompleteEvent>;
-    onChange: EventName<import("../../components/typewriter/typewriter.types").TypewriterChangeEvent>;
+    onTypingComplete: EventName<Events["onTypingCompleteEvent"]>;
+    onChange: EventName<Events["onChangeEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/virtualizedlist';
+import type { Events } from '../../components/virtualizedlist/virtualizedlist.types';
 /**
  * `mdc-virtualizedlist` component for creating custom virtualized lists.
  * IMPORTANT: This component does not create it's own list/list items.
@@ -15,6 +16,6 @@ import Component from '../../components/virtualizedlist';
  * @slot - Client side List with nested list items.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onScroll: EventName<import("../../components/virtualizedlist/virtualizedlist.types").VirtualizedListScrollEvent>;
+    onScroll: EventName<Events["onScrollEvent"]>;
 }>;
 export default reactWrapper;

package/dist/utils/provider/index.d.ts

@@ -1,4 +1,4 @@
-import { ContextConsumer } from '@lit/context';
+import { Context, ContextConsumer } from '@lit/context';
 import { ReactiveElement } from 'lit';
 type ConsumeOptions<C> = {
     host: ReactiveElement;
@@ -6,8 +6,6 @@ type ConsumeOptions<C> = {
     subscribe?: boolean;
 };
 declare const providerUtils: {
-    consume: <C extends {
-        __context__: unknown;
-    }>(options: ConsumeOptions<C>) => ContextConsumer<C, ReactiveElement>;
+    consume: <C extends Context<unknown, unknown>>(options: ConsumeOptions<C>) => ContextConsumer<C, ReactiveElement>;
 };
 export default providerUtils;

package/dist/utils/tag-name/index.d.ts

@@ -1,4 +1,6 @@
+import CONSTANTS from './constants';
+type ReturnType<ComponentName extends string> = `${typeof CONSTANTS.NAMESPACE.PREFIX}${typeof CONSTANTS.NAMESPACE.SEPARATOR}${ComponentName}`;
 declare const _default: {
-    constructTagName: <ComponentName extends string>(componentName: ComponentName) => `mdc-${ComponentName}`;
+    constructTagName: <ComponentName extends string>(componentName: ComponentName) => ReturnType<ComponentName>;
 };
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.117.2",
+  "version": "0.117.4",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"