@momentum-design/components 0.117.4 → 0.118.1

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import AccordionGroup from './components/accordiongroup';
 import AccordionButton from './components/accordionbutton';
 import AlertChip from './components/alertchip';
 import Animation from './components/animation';
+import AnnouncementDialog from './components/announcementdialog';
 import Appheader from './components/appheader';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
@@ -96,6 +97,6 @@ import type { VirtualizedListScrollEvent } from './components/virtualizedlist/vi
 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, webAPIAssetsCache } from './utils/assets-cache';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -5,6 +5,7 @@ import AccordionGroup from './components/accordiongroup';
 import AccordionButton from './components/accordionbutton';
 import AlertChip from './components/alertchip';
 import Animation from './components/animation';
+import AnnouncementDialog from './components/announcementdialog';
 import Appheader from './components/appheader';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
@@ -88,6 +89,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

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

@@ -0,0 +1,75 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/announcementdialog';
+import type { Events as EventsInherited } from '../../components/dialog/dialog.types';
+/**
+ * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.
+ * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.
+ * The dialog is available in 4 sizes:  medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
+ * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
+ *
+ * The dialog can be controlled solely through the `visible` property, no trigger element is required.
+ * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
+ * remember the previously focused element before the dialog was opened.
+ *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
+ * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ *
+ * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
+ *
+ * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
+ * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
+ * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ *
+ * @dependency mdc-button
+ * @dependency mdc-illustration
+ * @dependency mdc-text
+ *
+ * @tagname mdc-announcementdialog
+ *
+ * @event shown - (React: onShown) Dispatched when the dialog is shown
+ * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
+ * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
+ *
+ * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section
+ * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
+ * @cssproperty --mdc-dialog-border-color - border color of the dialog
+ * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog
+ * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
+ * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
+ * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
+ *
+ * @csspart body - The main body container that holds the illustration and content sections
+ * @csspart illustration-container - The container for the illustration section
+ * @csspart content-container - The container for the content section
+ * @csspart header-text - The header text
+ *
+ * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
+ * @slot dialog-body - Slot for the dialog body content
+ * @slot illustration-container - Slot for the illustration container section
+ * @slot content-container - Slot for the content (header, description, etc) section
+ * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * @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
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onShown: EventName<EventsInherited["onShownEvent"]>;
+    onHidden: EventName<EventsInherited["onHiddenEvent"]>;
+    onCreated: EventName<EventsInherited["onCreatedEvent"]>;
+    onDestroyed: EventName<EventsInherited["onDestroyedEvent"]>;
+    onClose: EventName<EventsInherited["onCloseEvent"]>;
+}>;
+export default reactWrapper;

package/dist/react/announcementdialog/index.js

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/announcementdialog';
+import { TAG_NAME } from '../../components/announcementdialog/announcementdialog.constants';
+/**
+ * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.
+ * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.
+ * The dialog is available in 4 sizes:  medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
+ * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
+ *
+ * The dialog can be controlled solely through the `visible` property, no trigger element is required.
+ * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will
+ * remember the previously focused element before the dialog was opened.
+ *
+ * The dialog is a controlled component, meaning it does not have its own state management for visibility.
+ * Use the `visible` property to control the visibility of the dialog.
+ * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked
+ * or Escape is pressed).
+ *
+ * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ *
+ * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.
+ * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.
+ *
+ * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**
+ * - Use `?visible=true/false` as an attribute instead of `visible=true/false`
+ * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ *
+ * @dependency mdc-button
+ * @dependency mdc-illustration
+ * @dependency mdc-text
+ *
+ * @tagname mdc-announcementdialog
+ *
+ * @event shown - (React: onShown) Dispatched when the dialog is shown
+ * @event hidden - (React: onHidden) Dispatched when the dialog is hidden
+ * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed
+ * (this does not hide the dialog)
+ *
+ * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section
+ * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog
+ * @cssproperty --mdc-dialog-border-color - border color of the dialog
+ * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog
+ * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
+ * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
+ * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
+ *
+ * @csspart body - The main body container that holds the illustration and content sections
+ * @csspart illustration-container - The container for the illustration section
+ * @csspart content-container - The container for the content section
+ * @csspart header-text - The header text
+ *
+ * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
+ * @slot dialog-body - Slot for the dialog body content
+ * @slot illustration-container - Slot for the illustration container section
+ * @slot content-container - Slot for the content (header, description, etc) section
+ * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component
+ * within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of
+ * `mdc-button` component within the footer section.
+ * @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
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onShown: 'shown',
+        onHidden: 'hidden',
+        onCreated: 'created',
+        onDestroyed: 'destroyed',
+        onClose: 'close',
+    },
+    displayName: 'AnnouncementDialog',
+});
+export default reactWrapper;

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

@@ -45,6 +45,7 @@ import type { Events } from '../../components/dialog/dialog.types';
  * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
  *
  * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
  * @slot dialog-body - Slot for the dialog body content

package/dist/react/dialog/index.js

@@ -46,6 +46,7 @@ import { TAG_NAME } from '../../components/dialog/dialog.constants';
  * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog
  * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog
  * @cssproperty --mdc-dialog-width - width of the dialog
+ * @cssproperty --mdc-dialog-height - height of the dialog
  *
  * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.
  * @slot dialog-body - Slot for the dialog body content

package/dist/react/index.d.ts

@@ -1,11 +1,12 @@
-export { default as AccordionButton } from './accordionbutton';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as Accordion } from './accordion';
+export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
-export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Appheader } from './appheader';
+export { default as AnnouncementDialog } from './announcementdialog';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
@@ -14,8 +15,8 @@ export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
-export { default as CardButton } from './cardbutton';
 export { default as Card } from './card';
+export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';

package/dist/react/index.js

@@ -1,11 +1,12 @@
-export { default as AccordionButton } from './accordionbutton';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as Accordion } from './accordion';
+export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
-export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Appheader } from './appheader';
+export { default as AnnouncementDialog } from './announcementdialog';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
@@ -14,8 +15,8 @@ export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
-export { default as CardButton } from './cardbutton';
 export { default as Card } from './card';
+export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';

package/dist/utils/mixins/lifecycle/lifecycle.contants.d.ts

@@ -1,5 +1,5 @@
 export declare const LIFE_CYCLE_EVENTS: {
-    CREATED: string;
-    DESTROYED: string;
-    MODIFIED: string;
+    readonly CREATED: "created";
+    readonly DESTROYED: "destroyed";
+    readonly MODIFIED: "modified";
 };

package/package.json

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