@momentum-design/components 0.134.22 → 0.135.1

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

@@ -0,0 +1,37 @@
+import Component from '../../components/statusmessage';
+/**
+ * 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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/statusmessage/index.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/statusmessage';
+import { TAG_NAME } from '../../components/statusmessage/statusmessage.constants';
+/**
+ * @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.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'StatusMessage',
+});
+export default reactWrapper;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.134.22",
+  "version": "0.135.1",
   "engines": {
-    "node": ">=20.0.0",
+    "node": ">=24.0.0",
     "npm": ">=8.0.0"
   },
   "main": "./dist/index.js",