fix(core/message-bar): hide entire ix-message-bar and turn off user…

…-interactions (#1695)

packages/core/src/components/message-bar/message-bar.scss

@@ -58,4 +58,8 @@
   ix-icon {
     margin-top: $tiny-space;
   }
+
+  .message-bar-hidden {
+    display: none;
+  }
 }

packages/core/src/components/message-bar/message-bar.tsx

@@ -80,7 +80,7 @@ export class MessageBar {
         opacity: [1, 0],
         easing: 'easeOutSine',
         complete: () => {
-          el.classList.add('d-none');
+          el.classList.add('message-bar-hidden');
           this.closeAnimationCompleted.emit();
         },
       });

packages/core/src/components/message-bar/test/message-bar.ct.ts

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: 2025 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test.describe('ix-message-bar', () => {
+  test.beforeEach(async ({ mount }) => {
+    await mount(
+      `<ix-message-bar type="danger" dismissible>Content</ix-message-bar>`
+    );
+  });
+
+  test('emits closeAnimationCompleted event', async ({ page }) => {
+    const messageBar = page.locator('ix-message-bar');
+    const closeButton = messageBar.locator('[data-testid="close-btn"]');
+
+    const onCloseAnimationCompleted = messageBar.evaluate((element) => {
+      return new Promise<void>((resolve) => {
+        element.addEventListener('closeAnimationCompleted', () => resolve());
+      });
+    });
+    await closeButton.click();
+    await onCloseAnimationCompleted;
+
+    await expect(messageBar).not.toBeVisible();
+  });
+});