@momentum-design/components 0.117.1 → 0.117.3

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/popover';
+import type { Events } from '../../components/popover/popover.types';
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
  * It can be used for tooltips, dropdowns, or contextual menus.
@@ -36,17 +37,9 @@ import Component from '../../components/popover';
  *
  */
 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: Component;
-    }>;
-    onDestroyed: EventName<CustomEvent<{
-        show: boolean;
-    }> & {
-        target: Component;
-    }>;
+    onShown: EventName<Events["onShownEvent"]>;
+    onHidden: EventName<Events["onHiddenEvent"]>;
+    onCreated: EventName<Events["onCreatedEvent"]>;
+    onDestroyed: EventName<Events["onDestroyedEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/radio';
+import type { Events } from '../../components/radio/radio.types';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.
@@ -28,7 +29,7 @@ import Component from '../../components/radio';
  *
  */
 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/searchfield/index.d.ts

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/searchfield';
+import type { Events as EventsInherited } from '../../components/input/input.types';
 /**
  * `mdc-searchfield` component is used as an input field for search functionality.
  *
@@ -18,10 +19,10 @@ import Component from '../../components/searchfield';
  * @slot filters - Slot for input chips
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onInput: EventName<import("../../components/input/input.types").InputInputEvent>;
-    onChange: EventName<import("../../components/input/input.types").InputChangeEvent>;
-    onFocus: EventName<import("../../components/input/input.types").InputFocusEvent>;
-    onBlur: EventName<import("../../components/input/input.types").InputBlurEvent>;
-    onClear: EventName<import("../../components/input/input.types").InputClearEvent>;
+    onInput: EventName<EventsInherited["onInputEvent"]>;
+    onChange: EventName<EventsInherited["onChangeEvent"]>;
+    onFocus: EventName<EventsInherited["onFocusEvent"]>;
+    onBlur: EventName<EventsInherited["onBlurEvent"]>;
+    onClear: EventName<EventsInherited["onClearEvent"]>;
 }>;
 export default reactWrapper;

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/select';
+import type { Events } from '../../components/select/select.types';
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
@@ -7,6 +8,7 @@ import Component from '../../components/select';
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ * 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.
  *
  * **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.
  *
@@ -45,10 +47,10 @@ import Component from '../../components/select';
  * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
-    onChange: EventName<import("../../components/select/select.types").SelectChangeEvent>;
-    onInput: EventName<import("../../components/select/select.types").SelectInputEvent>;
-    onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
-    onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
-    onFocus: EventName<import("../../utils/types").OverrideEventTarget<FocusEvent, Component>>;
+    onChange: EventName<Events["onChangeEvent"]>;
+    onInput: EventName<Events["onInputEvent"]>;
+    onClick: EventName<Events["onClickEvent"]>;
+    onKeyDown: EventName<Events["onKeyDownEvent"]>;
+    onFocus: EventName<Events["onFocusEvent"]>;
 }>;
 export default reactWrapper;

package/dist/react/select/index.js

@@ -9,6 +9,7 @@ import { TAG_NAME } from '../../components/select/select.constants';
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ * 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.
  *
  * **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.
  *

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/controllers/ElementStore.d.ts

@@ -21,7 +21,7 @@ interface ElementStoreOptions<TItem extends HTMLElement = HTMLElement> {
      * @param index - Index at which the item is added or removed.
      * @param store - The current state of the store.
      */
-    onStoreUpdate?: (item: TItem, changeType: ElementStoreChangeTypes, index: number, store: TItem[]) => void;
+    onStoreUpdate?: (item: TItem, changeType: ElementStoreChangeTypes, index: number, store?: TItem[]) => void;
 }
 /**
  * ElementStore is a controller that manages a collection of elements.

package/dist/utils/mixins/ListNavigationMixin.js

@@ -146,11 +146,12 @@ export const ListNavigationMixin = (superClass) => {
          * @param index - The index of the currently focused item.
          */
         resetTabIndexes(index) {
+            var _a;
             if (this.navItems.length > 0) {
                 this.navItems.forEach(item => item.setAttribute('tabindex', '-1'));
                 const currentIndex = this.navItems[index] ? index : 0;
                 this.navItems[currentIndex].setAttribute('tabindex', '0');
-                this.navItems[currentIndex].focus();
+                (_a = this.navItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             }
         }
         /**

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.1",
+  "version": "0.117.3",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"