@momentum-design/components 0.134.21 → 0.135.0

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