@momentum-design/components 0.134.22 → 0.135.1

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -193,10 +193,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         if (!this.helpText) {
             return nothing;
         }
-        return html `<div part="help-text-container">
-      <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
+        return html `<mdc-statusmessage
+      part="help-text-container"
+      severity="${DEFAULTS.VALIDATION}"
+      exportparts="container: help-text-container, icon: helper-icon, text: help-text"
+    >
+      <slot name="help-icon" slot="icon">${this.renderHelpTextIcon()}</slot>
       <slot name="help-text">${this.renderHelpText()}</slot>
-    </div>`;
+    </mdc-statusmessage>`;
     }
 }
 FormfieldWrapper.styles = [...Component.styles, ...styles];

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -1,14 +1,9 @@
 import utils from '../../utils/tag-name';
 import { POPOVER_PLACEMENT, STRATEGY } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { STATUSMESSAGE_SEVERITY } from '../statusmessage/statusmessage.constants';
 const TAG_NAME = utils.constructTagName('formfieldwrapper');
-const VALIDATION = {
-    DEFAULT: 'default',
-    ERROR: 'error',
-    PRIORITY: 'priority',
-    SUCCESS: 'success',
-    WARNING: 'warning',
-};
+const VALIDATION = STATUSMESSAGE_SEVERITY;
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,
     HELPER_TEXT_ID: 'helper-text-id',

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -59,6 +59,16 @@ const styles = css `
     color: var(--mdc-help-text-color);
   }
 
+  mdc-statusmessage[part='help-text-container'] {
+    --mdc-statusmessage-color: var(--mdc-help-text-color);
+    --mdc-statusmessage-font-size: var(--mdc-help-text-font-size);
+    --mdc-statusmessage-font-weight: var(--mdc-help-text-font-weight);
+    --mdc-statusmessage-line-height: var(--mdc-help-text-line-height);
+    --mdc-statusmessage-gap: 0.5rem;
+
+    width: 100%;
+  }
+
   :host::part(info-icon-btn) {
     align-self: flex-start;
   }

package/dist/components/formfieldwrapper/formfieldwrapper.types.d.ts

@@ -1,6 +1,6 @@
 import type { ValueOf } from '../../utils/types';
-import type { IconNames } from '../icon/icon.types';
+import type { StatusMessageIcon } from '../statusmessage/statusmessage.types';
 import { VALIDATION } from './formfieldwrapper.constants';
 type ValidationType = ValueOf<typeof VALIDATION>;
-type HelperIconsList = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'priority-badge-filled'> | '';
+type HelperIconsList = StatusMessageIcon;
 export type { HelperIconsList, ValidationType };

package/dist/components/formfieldwrapper/formfieldwrapper.utils.js

@@ -1,12 +1,3 @@
-import { VALIDATION } from './formfieldwrapper.constants';
-const getHelperIcon = (type) => {
-    const helperIconSizeMap = {
-        [VALIDATION.ERROR]: 'error-legacy-badge-filled',
-        [VALIDATION.WARNING]: 'warning-badge-filled',
-        [VALIDATION.SUCCESS]: 'check-circle-badge-filled',
-        [VALIDATION.PRIORITY]: 'priority-badge-filled',
-        [VALIDATION.DEFAULT]: '',
-    };
-    return helperIconSizeMap[type] || '';
-};
+import { STATUSMESSAGE_ICON_NAME_BY_SEVERITY } from '../statusmessage/statusmessage.constants';
+const getHelperIcon = (type) => STATUSMESSAGE_ICON_NAME_BY_SEVERITY[type] || '';
 export { getHelperIcon };

package/dist/components/formfieldwrapper/index.d.ts

@@ -1,5 +1,6 @@
 import '../button';
 import '../icon';
+import '../statusmessage';
 import '../text';
 import '../toggletip';
 import FormfieldWrapper from './formfieldwrapper.component';

package/dist/components/formfieldwrapper/index.js

@@ -1,5 +1,6 @@
 import '../button';
 import '../icon';
+import '../statusmessage';
 import '../text';
 import '../toggletip';
 import FormfieldWrapper from './formfieldwrapper.component';

package/dist/components/spatialnavigationprovider/spatialnavigationprovider.component.js

@@ -500,13 +500,16 @@ class SpatialNavigationProvider extends Provider {
     goBack() {
         const goBackElement = findFocusable(this.root).find(el => el.hasAttribute(DATA_ATTRIBUTES.GO_BACK));
         const isDefaultPrevented = this.emitGoBackEvent(goBackElement);
-        if (goBackElement && !isDefaultPrevented) {
-            goBackElement.click();
-            return true;
-        }
-        if (window.history.length > this.initialHistoryLength) {
-            window.history.back();
-            return true;
+        // Skip default behavior when event was prevented by the user
+        if (!isDefaultPrevented) {
+            if (goBackElement) {
+                goBackElement.click();
+                return true;
+            }
+            if (window.history.length > this.initialHistoryLength) {
+                window.history.back();
+                return true;
+            }
         }
         return false;
     }

package/dist/components/statusmessage/index.d.ts

@@ -0,0 +1,9 @@
+import '../icon';
+import '../text';
+import StatusMessage from './statusmessage.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-statusmessage']: StatusMessage;
+    }
+}
+export default StatusMessage;

package/dist/components/statusmessage/index.js

@@ -0,0 +1,8 @@
+// AI-Assisted
+import '../icon';
+import '../text';
+import StatusMessage from './statusmessage.component';
+import { TAG_NAME } from './statusmessage.constants';
+StatusMessage.register(TAG_NAME);
+export default StatusMessage;
+// End AI-Assisted

package/dist/components/statusmessage/statusmessage.component.d.ts

@@ -0,0 +1,54 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { StatusMessageSeverity } from './statusmessage.types';
+/**
+ * The status message is a compact inline message used to communicate helper, validation, or status text with an optional severity icon. It is intentionally lightweight and does not behave like an alert or live region by default.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-statusmessage` for short inline messages that sit near a related control, setting, or content region.
+ * - Use a severity when the message needs a visual state such as error, warning, success, or priority.
+ * - Use the `icon` slot when a custom visual icon is required instead of the built-in severity icon.
+ * 
+ * **When not to use**
+ * 
+ * - Use `mdc-banner`, `mdc-toast`, or `mdc-announcementdialog` when the message needs more prominence, actions, dismissal, or system-level announcement behaviour.
+ * - Use form components' `help-text` APIs for standard field helper or validation text; those components compose `mdc-statusmessage` internally.
+ * - Use plain `mdc-text` when no severity styling or icon treatment is needed.
+ * 
+ * @tagname mdc-statusmessage
+ * 
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * 
+ * @slot default - Message content. Slotted content takes precedence over the `message` attribute.
+ * @slot icon - Custom icon content. Overrides the default severity icon.
+ * 
+ * @csspart container - The container for the icon and message text.
+ * @csspart icon - The default severity icon slot or rendered icon.
+ * @csspart text - The rendered message text when using the `message` attribute.
+ * 
+ * @cssproperty --mdc-statusmessage-color - Color for the icon and message text.
+ * @cssproperty --mdc-statusmessage-font-size - Font size for the message text.
+ * @cssproperty --mdc-statusmessage-font-weight - Font weight for the message text.
+ * @cssproperty --mdc-statusmessage-line-height - Line height for the message text.
+ * @cssproperty --mdc-statusmessage-gap - Gap between the icon and message text.
+ * @cssproperty --mdc-statusmessage-icon-size - Width and height of the default severity icon.
+ */
+declare class StatusMessage extends Component {
+    /**
+     * The severity used to set the status message color and default icon.
+     * Can be `default`, `error`, `warning`, `success`, or `priority`.
+     * @default default
+     */
+    severity: StatusMessageSeverity;
+    /**
+     * Message text to render when no default slot content is provided.
+     */
+    message?: string;
+    private renderIcon;
+    private renderMessage;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StatusMessage;

package/dist/components/statusmessage/statusmessage.component.js

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// AI-Assisted
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DEFAULTS, STATUSMESSAGE_ICON_NAME_BY_SEVERITY } from './statusmessage.constants';
+import styles from './statusmessage.styles';
+/**
+ * @tagname mdc-statusmessage
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @slot default - Message content. Slotted content takes precedence over the `message` attribute.
+ * @slot icon - Custom icon content. Overrides the default severity icon.
+ *
+ * @csspart container - The container for the icon and message text.
+ * @csspart icon - The default severity icon slot or rendered icon.
+ * @csspart text - The rendered message text when using the `message` attribute.
+ *
+ * @cssproperty --mdc-statusmessage-color - Color for the icon and message text.
+ * @cssproperty --mdc-statusmessage-font-size - Font size for the message text.
+ * @cssproperty --mdc-statusmessage-font-weight - Font weight for the message text.
+ * @cssproperty --mdc-statusmessage-line-height - Line height for the message text.
+ * @cssproperty --mdc-statusmessage-gap - Gap between the icon and message text.
+ * @cssproperty --mdc-statusmessage-icon-size - Width and height of the default severity icon.
+ */
+class StatusMessage extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The severity used to set the status message color and default icon.
+         * Can be `default`, `error`, `warning`, `success`, or `priority`.
+         * @default default
+         */
+        this.severity = DEFAULTS.SEVERITY;
+    }
+    renderIcon() {
+        const icon = STATUSMESSAGE_ICON_NAME_BY_SEVERITY[this.severity || DEFAULTS.SEVERITY];
+        if (!icon) {
+            return nothing;
+        }
+        return html `<mdc-icon part="icon" name="${icon}"></mdc-icon>`;
+    }
+    renderMessage() {
+        if (!this.message) {
+            return nothing;
+        }
+        return html `
+      <mdc-text part="text" tagname="${DEFAULTS.TEXT_TAGNAME}" type="${DEFAULTS.TEXT_TYPE}">${this.message}</mdc-text>
+    `;
+    }
+    render() {
+        return html `
+      <div part="container">
+        <slot name="icon" part="icon">${this.renderIcon()}</slot>
+        <slot part="text">${this.renderMessage()}</slot>
+      </div>
+    `;
+    }
+}
+StatusMessage.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StatusMessage.prototype, "severity", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StatusMessage.prototype, "message", void 0);
+export default StatusMessage;
+// End AI-Assisted

package/dist/components/statusmessage/statusmessage.constants.d.ts

@@ -0,0 +1,28 @@
+import type { IconNames } from '../icon/icon.types';
+declare const TAG_NAME: "mdc-statusmessage";
+declare const STATUSMESSAGE_SEVERITY: {
+    readonly DEFAULT: "default";
+    readonly ERROR: "error";
+    readonly PRIORITY: "priority";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+};
+declare const STATUSMESSAGE_ICON_NAMES: {
+    readonly ERROR: Extract<IconNames, "error-legacy-badge-filled">;
+    readonly WARNING: Extract<IconNames, "warning-badge-filled">;
+    readonly SUCCESS: Extract<IconNames, "check-circle-badge-filled">;
+    readonly PRIORITY: Extract<IconNames, "priority-badge-filled">;
+};
+declare const STATUSMESSAGE_ICON_NAME_BY_SEVERITY: {
+    readonly default: "";
+    readonly error: "error-legacy-badge-filled";
+    readonly warning: "warning-badge-filled";
+    readonly success: "check-circle-badge-filled";
+    readonly priority: "priority-badge-filled";
+};
+declare const DEFAULTS: {
+    readonly SEVERITY: "default";
+    readonly TEXT_TAGNAME: "span";
+    readonly TEXT_TYPE: "body-midsize-regular";
+};
+export { DEFAULTS, STATUSMESSAGE_ICON_NAME_BY_SEVERITY, STATUSMESSAGE_ICON_NAMES, STATUSMESSAGE_SEVERITY, TAG_NAME };

package/dist/components/statusmessage/statusmessage.constants.js

@@ -0,0 +1,31 @@
+// AI-Assisted
+import utils from '../../utils/tag-name';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('statusmessage');
+const STATUSMESSAGE_SEVERITY = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    PRIORITY: 'priority',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+};
+const STATUSMESSAGE_ICON_NAMES = {
+    ERROR: 'error-legacy-badge-filled',
+    WARNING: 'warning-badge-filled',
+    SUCCESS: 'check-circle-badge-filled',
+    PRIORITY: 'priority-badge-filled',
+};
+const STATUSMESSAGE_ICON_NAME_BY_SEVERITY = {
+    [STATUSMESSAGE_SEVERITY.DEFAULT]: '',
+    [STATUSMESSAGE_SEVERITY.ERROR]: STATUSMESSAGE_ICON_NAMES.ERROR,
+    [STATUSMESSAGE_SEVERITY.WARNING]: STATUSMESSAGE_ICON_NAMES.WARNING,
+    [STATUSMESSAGE_SEVERITY.SUCCESS]: STATUSMESSAGE_ICON_NAMES.SUCCESS,
+    [STATUSMESSAGE_SEVERITY.PRIORITY]: STATUSMESSAGE_ICON_NAMES.PRIORITY,
+};
+const DEFAULTS = {
+    SEVERITY: STATUSMESSAGE_SEVERITY.DEFAULT,
+    TEXT_TAGNAME: VALID_TEXT_TAGS.SPAN,
+    TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+};
+export { DEFAULTS, STATUSMESSAGE_ICON_NAME_BY_SEVERITY, STATUSMESSAGE_ICON_NAMES, STATUSMESSAGE_SEVERITY, TAG_NAME };
+// End AI-Assisted

package/dist/components/statusmessage/statusmessage.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/statusmessage/statusmessage.styles.js

@@ -0,0 +1,66 @@
+// AI-Assisted
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-statusmessage-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-statusmessage-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    --mdc-statusmessage-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    --mdc-statusmessage-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    --mdc-statusmessage-gap: 0.5rem;
+    --mdc-statusmessage-icon-size: 1rem;
+
+    display: block;
+    width: fit-content;
+    color: var(--mdc-statusmessage-color);
+    font-size: var(--mdc-statusmessage-font-size);
+    font-weight: var(--mdc-statusmessage-font-weight);
+    line-height: var(--mdc-statusmessage-line-height);
+  }
+
+  :host([severity='error']) {
+    --mdc-statusmessage-color: var(--mds-color-theme-text-error-normal);
+  }
+
+  :host([severity='warning']) {
+    --mdc-statusmessage-color: var(--mds-color-theme-text-warning-normal);
+  }
+
+  :host([severity='success']) {
+    --mdc-statusmessage-color: var(--mds-color-theme-text-success-normal);
+  }
+
+  :host([severity='priority']) {
+    --mdc-statusmessage-color: var(--mds-color-theme-text-accent-normal);
+  }
+
+  [part='container'] {
+    display: flex;
+    align-items: center;
+    gap: var(--mdc-statusmessage-gap);
+    width: 100%;
+    color: var(--mdc-statusmessage-color);
+    font-size: var(--mdc-statusmessage-font-size);
+    font-weight: var(--mdc-statusmessage-font-weight);
+    line-height: var(--mdc-statusmessage-line-height);
+  }
+
+  [part='icon'],
+  ::slotted([slot='icon']) {
+    --mdc-icon-size: var(--mdc-statusmessage-icon-size);
+
+    align-self: flex-start;
+    flex-shrink: 0;
+    height: var(--mdc-statusmessage-icon-size);
+    margin-block-start: 0.125rem;
+  }
+
+  [part='text'],
+  ::slotted(*) {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+`;
+export default [styles];
+// End AI-Assisted

package/dist/components/statusmessage/statusmessage.types.d.ts

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { STATUSMESSAGE_ICON_NAME_BY_SEVERITY, STATUSMESSAGE_SEVERITY } from './statusmessage.constants';
+type StatusMessageSeverity = ValueOf<typeof STATUSMESSAGE_SEVERITY>;
+type StatusMessageIcon = ValueOf<typeof STATUSMESSAGE_ICON_NAME_BY_SEVERITY>;
+export type { StatusMessageIcon, StatusMessageSeverity };

package/dist/components/statusmessage/statusmessage.types.js

@@ -0,0 +1,2 @@
+export {};
+// End AI-Assisted

package/dist/custom-elements.json

@@ -46056,6 +46056,136 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/statusmessage/statusmessage.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "StatusMessage",
+          "cssProperties": [
+            {
+              "description": "Color for the icon and message text.",
+              "name": "--mdc-statusmessage-color"
+            },
+            {
+              "description": "Font size for the message text.",
+              "name": "--mdc-statusmessage-font-size"
+            },
+            {
+              "description": "Font weight for the message text.",
+              "name": "--mdc-statusmessage-font-weight"
+            },
+            {
+              "description": "Line height for the message text.",
+              "name": "--mdc-statusmessage-line-height"
+            },
+            {
+              "description": "Gap between the icon and message text.",
+              "name": "--mdc-statusmessage-gap"
+            },
+            {
+              "description": "Width and height of the default severity icon.",
+              "name": "--mdc-statusmessage-icon-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container for the icon and message text.",
+              "name": "container"
+            },
+            {
+              "description": "The default severity icon slot or rendered icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The rendered message text when using the `message` attribute.",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Message content. Slotted content takes precedence over the `message` attribute.",
+              "name": "default"
+            },
+            {
+              "description": "Custom icon content. Overrides the default severity icon.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Message text to render when no default slot content is provided.",
+              "attribute": "message",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderMessage",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "StatusMessageSeverity"
+              },
+              "description": "The severity used to set the status message color and default icon.\nCan be `default`, `error`, `warning`, `success`, or `priority`.",
+              "default": "default",
+              "attribute": "severity",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "severity",
+              "type": {
+                "text": "StatusMessageSeverity"
+              },
+              "description": "The severity used to set the status message color and default icon.\nCan be `default`, `error`, `warning`, `success`, or `priority`.",
+              "default": "default",
+              "fieldName": "severity"
+            },
+            {
+              "name": "message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Message text to render when no default slot content is provided.",
+              "fieldName": "message"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-statusmessage",
+          "jsDoc": "/**\n * @tagname mdc-statusmessage\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - Message content. Slotted content takes precedence over the `message` attribute.\n * @slot icon - Custom icon content. Overrides the default severity icon.\n *\n * @csspart container - The container for the icon and message text.\n * @csspart icon - The default severity icon slot or rendered icon.\n * @csspart text - The rendered message text when using the `message` attribute.\n *\n * @cssproperty --mdc-statusmessage-color - Color for the icon and message text.\n * @cssproperty --mdc-statusmessage-font-size - Font size for the message text.\n * @cssproperty --mdc-statusmessage-font-weight - Font weight for the message text.\n * @cssproperty --mdc-statusmessage-line-height - Line height for the message text.\n * @cssproperty --mdc-statusmessage-gap - Gap between the icon and message text.\n * @cssproperty --mdc-statusmessage-icon-size - Width and height of the default severity icon.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StatusMessage",
+            "module": "components/statusmessage/statusmessage.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/stepper/stepper.component.js",

package/dist/index.d.ts

@@ -90,6 +90,7 @@ import ListBox from './components/listbox';
 import Banner from './components/banner';
 import Buttonsimple from './components/buttonsimple';
 import Verticaltablist from './components/verticaltablist';
+import StatusMessage from './components/statusmessage';
 import type { AvatarSize } from './components/avatar/avatar.types';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ColorType as ChipColorType } from './components/staticchip/staticchip.types';
@@ -101,6 +102,7 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import type { LinkButtonSize } from './components/linkbutton/linkbutton.types';
 import type { TextType as TypewriterType } from './components/typewriter/typewriter.types';
+import type { StatusMessageSeverity } from './components/statusmessage/statusmessage.types';
 import type { MenuPopoverActionEvent, MenuPopoverChangeEvent } from './components/menupopover/menupopover.types';
 import type { SelectChangeEvent, SelectInputEvent } from './components/select/select.types';
 import type { MenuSectionChangeEvent } from './components/menusection/menusection.types';
@@ -119,6 +121,6 @@ import type { TimePickerChangeEvent, TimePickerInputEvent } from './components/t
 import type { DatePickerChangeEvent, DatePickerInputEvent } from './components/datepicker/datepicker.types';
 import type { CalendarDateSelectedEvent, CalendarMonthChangedEvent } from './components/calendar/calendar.types';
 import type { ListBoxChangeEvent } from './components/listbox/listbox.types';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, };
-export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, ListBoxChangeEvent, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, };
+export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, StatusMessageSeverity, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, ListBoxChangeEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -92,11 +92,12 @@ import ListBox from './components/listbox';
 import Banner from './components/banner';
 import Buttonsimple from './components/buttonsimple';
 import Verticaltablist from './components/verticaltablist';
+import StatusMessage from './components/statusmessage';
 // 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, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, 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, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/index.d.ts

@@ -76,6 +76,7 @@ export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
+export { default as StatusMessage } from './statusmessage';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';

package/dist/react/index.js

@@ -76,6 +76,7 @@ export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
+export { default as StatusMessage } from './statusmessage';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';