@momentum-design/components 0.98.0 → 0.99.0

package/dist/index.d.ts

@@ -55,6 +55,7 @@ import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
 import StaticToggle from './components/statictoggle';
+import Toast from './components/toast';
 import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
@@ -81,6 +82,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -57,6 +57,7 @@ import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
 import StaticToggle from './components/statictoggle';
+import Toast from './components/toast';
 import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
@@ -76,6 +77,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

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

@@ -10,15 +10,14 @@ import Component from '../../components/card';
  *    - Subtitle
  * - Body
  *
- * The card can either be vertically or horizontally oriented.
+ * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
  *
  * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
  *
  * To make this card interactive, use the following slots:
  * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
  * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of
- * `mdc-button` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
  * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
  * within the footer section.
  *
@@ -35,14 +34,23 @@ import Component from '../../components/card';
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred.
  *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
  * @tagname mdc-card
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
+ * @cssproperty --mdc-card-width - The width of the card
  *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/card/index.js

@@ -13,15 +13,14 @@ import { TAG_NAME } from '../../components/card/card.constants';
  *    - Subtitle
  * - Body
  *
- * The card can either be vertically or horizontally oriented.
+ * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
  *
  * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
  *
  * To make this card interactive, use the following slots:
  * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
  * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of
- * `mdc-button` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
  * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
  * within the footer section.
  *
@@ -38,14 +37,23 @@ import { TAG_NAME } from '../../components/card/card.constants';
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred.
  *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
  * @tagname mdc-card
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
+ * @cssproperty --mdc-card-width - The width of the card
  *
  */
 const reactWrapper = createComponent({

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

@@ -11,10 +11,6 @@ import Component from '../../components/cardbutton';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
- *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
  * It fires the click event when enter key is used.
@@ -22,6 +18,24 @@ import Component from '../../components/cardbutton';
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/cardbutton/index.js

@@ -13,10 +13,6 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
- *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
  * It fires the click event when enter key is used.
@@ -24,6 +20,24 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -20,6 +20,24 @@ import Component from '../../components/cardcheckbox';
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

package/dist/react/cardcheckbox/index.js

@@ -22,6 +22,24 @@ import { TAG_NAME } from '../../components/cardcheckbox/cardcheckbox.constants';
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

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

@@ -20,6 +20,24 @@ import Component from '../../components/cardradio';
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

package/dist/react/cardradio/index.js

@@ -22,6 +22,24 @@ import { TAG_NAME } from '../../components/cardradio/cardradio.constants';
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

package/dist/react/index.d.ts

@@ -67,6 +67,7 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
+export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';

package/dist/react/index.js

@@ -67,6 +67,7 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
+export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';

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

@@ -0,0 +1,45 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/toast';
+/**
+ * `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.
+ *
+ * **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">`.
+ * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-linkbutton
+ *
+ * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
+ * @slot toast-body-normal - Slot for the main body content of the toast.
+ * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.
+ * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.
+ * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.
+ * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.
+ *
+ * @tagname mdc-toast
+ *
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.
+ *
+ * @csspart content-container - The container for the toast's main content, including icon, text, and close button.
+ * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.
+ * @csspart toast-content - The container for the header and body content of the toast.
+ * @csspart toast-header - The header text of the toast.
+ * @csspart footer - The container for the toast's footer, including toggle and action buttons.
+ * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
+ * @csspart toast-close-btn - The close button for the toast.
+ *
+ * @cssproperty --mdc-toast-background-color - Background color of the toast.
+ * @cssproperty --mdc-toast-border-color - Border color of the toast.
+ * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.
+ * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.
+ * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.
+ * @cssproperty --mdc-toast-width - Width of the toast.
+ * @cssproperty --mdc-toast-padding - Padding inside the toast.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClose: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/toast/index.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast';
+import { TAG_NAME } from '../../components/toast/toast.constants';
+/**
+ * `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.
+ *
+ * **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">`.
+ * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-linkbutton
+ *
+ * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
+ * @slot toast-body-normal - Slot for the main body content of the toast.
+ * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.
+ * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.
+ * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.
+ * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.
+ *
+ * @tagname mdc-toast
+ *
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.
+ *
+ * @csspart content-container - The container for the toast's main content, including icon, text, and close button.
+ * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.
+ * @csspart toast-content - The container for the header and body content of the toast.
+ * @csspart toast-header - The header text of the toast.
+ * @csspart footer - The container for the toast's footer, including toggle and action buttons.
+ * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
+ * @csspart toast-close-btn - The close button for the toast.
+ *
+ * @cssproperty --mdc-toast-background-color - Background color of the toast.
+ * @cssproperty --mdc-toast-border-color - Border color of the toast.
+ * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.
+ * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.
+ * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.
+ * @cssproperty --mdc-toast-width - Width of the toast.
+ * @cssproperty --mdc-toast-padding - Padding inside the toast.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClose: 'close',
+    },
+    displayName: 'Toast',
+});
+export default reactWrapper;

package/package.json

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