@momentum-design/components 0.115.0 → 0.116.1

package/dist/index.d.ts

@@ -78,6 +78,7 @@ import VirtualizedList from './components/virtualizedlist';
 import Combobox from './components/combobox';
 import Slider from './components/slider';
 import ListBox from './components/listbox';
+import Banner from './components/banner';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -93,6 +94,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, webAPIIconsCache } from './utils/icon-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, 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, };
+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, 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, webAPIIconsCache, };

package/dist/index.js

@@ -80,11 +80,12 @@ import VirtualizedList from './components/virtualizedlist';
 import Combobox from './components/combobox';
 import Slider from './components/slider';
 import ListBox from './components/listbox';
+import Banner from './components/banner';
 // Constants / Utils Imports
 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';
 // 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, 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, };
+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, 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, webAPIIconsCache, };

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

@@ -0,0 +1,40 @@
+import Component from '../../components/banner';
+/**
+ * `mdc-banner` is a component that allows applications to communicate important messages to users
+ * and requires user action to dismiss them. It supports different message types with appropriate styling
+ * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.
+ *
+ * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.
+ *
+ * This component supports both structured content via properties and flexible customization via slots:
+ * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.
+ * - Use slots for custom content and complete layout control.
+ * - Combine both approaches for maximum flexibility.
+ * - Create custom orientations and actions using CSS parts and slots.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.
+ * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.
+ * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.
+ * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.
+ *
+ * @tagname mdc-banner
+ *
+ * @csspart leading - The leading section containing the icon and text.
+ * @csspart leading-icon - The icon displayed for variants or custom icon slot.
+ * @csspart leading-text - The leading section containing label and secondary label text.
+ * @csspart trailing - The trailing section containing action buttons and controls.
+ * @csspart leading-label - The label text of the banner.
+ * @csspart leading-secondary-label - The secondary label text of the banner.
+ *
+ * @cssproperty --mdc-banner-background-color - Background color of the banner.
+ * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
+ * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
+ * @cssproperty --mdc-banner-padding - Padding inside the banner.
+ * @cssproperty --mdc-banner-gap - Gap between banner elements.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/banner/index.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/banner';
+import { TAG_NAME } from '../../components/banner/banner.constants';
+/**
+ * `mdc-banner` is a component that allows applications to communicate important messages to users
+ * and requires user action to dismiss them. It supports different message types with appropriate styling
+ * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.
+ *
+ * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.
+ *
+ * This component supports both structured content via properties and flexible customization via slots:
+ * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.
+ * - Use slots for custom content and complete layout control.
+ * - Combine both approaches for maximum flexibility.
+ * - Create custom orientations and actions using CSS parts and slots.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.
+ * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.
+ * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.
+ * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.
+ *
+ * @tagname mdc-banner
+ *
+ * @csspart leading - The leading section containing the icon and text.
+ * @csspart leading-icon - The icon displayed for variants or custom icon slot.
+ * @csspart leading-text - The leading section containing label and secondary label text.
+ * @csspart trailing - The trailing section containing action buttons and controls.
+ * @csspart leading-label - The label text of the banner.
+ * @csspart leading-secondary-label - The secondary label text of the banner.
+ *
+ * @cssproperty --mdc-banner-background-color - Background color of the banner.
+ * @cssproperty --mdc-banner-border-color - Border color of the banner.
+ * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.
+ * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.
+ * @cssproperty --mdc-banner-padding - Padding inside the banner.
+ * @cssproperty --mdc-banner-gap - Gap between banner elements.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Banner',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -7,6 +7,7 @@ export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
@@ -55,8 +56,8 @@ export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
-export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
+export { default as Searchfield } from './searchfield';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
@@ -71,11 +72,11 @@ export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 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 Text } from './text';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as Typewriter } from './typewriter';

package/dist/react/index.js

@@ -7,6 +7,7 @@ export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
+export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
@@ -55,8 +56,8 @@ export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
-export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
+export { default as Searchfield } from './searchfield';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';
@@ -71,11 +72,11 @@ export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 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 Text } from './text';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as Typewriter } from './typewriter';

package/dist/utils/controllers/ElementStore.d.ts

@@ -1,11 +1,27 @@
 import { ReactiveController } from 'lit';
 import type { Component } from '../../models';
 export type ElementStoreChangeTypes = 'added' | 'removed';
-interface ElementStoreOptions {
+interface ElementStoreOptions<TItem extends HTMLElement = HTMLElement> {
     /**
-     * - A function to determine if an item is valid for caching.
+     * Checks if the item is valid.
+     * Invalid items will not be collected or processed.
+     * This method can be overridden by subclasses to define custom validation logic.
+     *
+     * @param item - The item to validate.
+     * @returns - True if the item is valid, false otherwise.
      */
     isValidItem: (item: any) => boolean;
+    /**
+     * Callback function that is called before the store is updated.
+     *
+     * Not called when the store is reset.
+     *
+     * @param item - The item that is being added or removed.
+     * @param changeType - The type of change ('added' or 'removed').
+     * @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;
 }
 /**
  * ElementStore is a controller that manages a collection of elements.
@@ -35,15 +51,10 @@ interface ElementStoreOptions {
  */
 export declare class ElementStore<TItem extends HTMLElement> implements ReactiveController {
     private host;
-    /**
-     * Checks if the item is valid.
-     * Invalid items will not be collected or processed.
-     * This method can be overridden by subclasses to define custom validation logic.
-     *
-     * @param item - The item to validate.
-     * @returns - True if the item is valid, false otherwise.
-     */
+    /** Checks if the item is valid. */
     private readonly isValidItem;
+    /** Callback function that is called before the store is updated. */
+    private readonly onStoreUpdate;
     /** Stored items */
     private cache;
     /** Access to stored items */

package/dist/utils/controllers/ElementStore.js

@@ -97,6 +97,7 @@ export class ElementStore {
         this.host = host;
         host.addController(this);
         this.isValidItem = (options === null || options === void 0 ? void 0 : options.isValidItem) || defaultIsValidFn;
+        this.onStoreUpdate = options === null || options === void 0 ? void 0 : options.onStoreUpdate;
         this.host.addEventListener(LIFE_CYCLE_EVENTS.CREATED, this.itemCreationHandler);
         this.host.addEventListener(LIFE_CYCLE_EVENTS.DESTROYED, this.itemDestroyHandler);
     }
@@ -136,9 +137,13 @@ export class ElementStore {
      * @param index - The index at which to add the item. If `undefined`, the item is added automatically.
      */
     addItem(item, index = undefined) {
+        var _a;
         const newItem = item;
         if (this.isValidItem(newItem) && !this.cache.includes(newItem)) {
             const idx = index === undefined ? this.cache.findIndex(e => isBefore(newItem, e)) : index;
+            if (this.onStoreUpdate) {
+                (_a = this.onStoreUpdate) === null || _a === void 0 ? void 0 : _a.call(this, newItem, 'added', idx === -1 ? this.cache.length : idx, this.cache.slice());
+            }
             if (idx === -1) {
                 this.cache.push(newItem);
             }
@@ -153,8 +158,12 @@ export class ElementStore {
      * @param item - The item to remove from the cache.
      */
     delete(item) {
+        var _a;
         const idx = this.cache.indexOf(item);
         if (idx !== -1) {
+            if (this.onStoreUpdate) {
+                (_a = this.onStoreUpdate) === null || _a === void 0 ? void 0 : _a.call(this, item, 'removed', idx, this.cache.slice());
+            }
             this.cache.splice(idx, 1);
         }
     }

package/package.json

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