fix(core/toast): increase z-index to display over application overlays (#2014)

Author: danielleroux

.changeset/giant-humans-add.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix': patch
+---
+
+Increase z-index for `toast`s
+
+Fixes #1908

packages/core/scss/_z-index.scss

@@ -14,4 +14,5 @@
   --theme-z-index-modal: 1050;
   --theme-z-index-dropdown: 1060;
   --theme-z-index-tooltip: 1070;
+  --theme-z-index-toast: 1080;
 }

packages/core/src/components/toast/styles/toast-container.scss

@@ -23,6 +23,7 @@
 .toast-container {
   display: block;
   position: fixed;
+  z-index: var(--theme-z-index-toast);
 }
 
 .toast-container--top-right {

packages/core/src/components/toast/tests/toast.ct.ts

@@ -0,0 +1,65 @@
+/*
+ * 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 { regressionTest } from '@utils/test';
+import { toast } from './../../../public-api';
+
+declare global {
+  interface Window {
+    toast: typeof toast;
+  }
+}
+
+regressionTest('renders', async ({ mount, page }) => {
+  await mount('');
+
+  await page.evaluate(() => {
+    window.toast({
+      message: 'This is a toast message',
+    });
+  });
+
+  const toast = page.locator('ix-toast');
+  await expect(toast).toHaveClass(/hydrated/);
+  await expect(toast).toBeVisible();
+});
+
+regressionTest(
+  'should be visible through overlays',
+  async ({ mount, page }) => {
+    await mount(`
+      <ix-application>
+        <ix-application-header></ix-application-header>
+        <ix-menu>
+          <ix-menu-settings>
+          </ix-menu-settings>
+        </ix-menu>
+      </ix-application>
+    `);
+
+    const settingsButton = page.getByRole('button', { name: 'Settings' });
+    await settingsButton.click();
+
+    // Wait for the menu to be visible
+    await page.waitForTimeout(500);
+
+    await page.evaluate(() => {
+      window.toast({
+        message: 'This is a toast message',
+      });
+    });
+
+    const toast = page.locator('ix-toast');
+    const closeToast = toast.locator('ix-icon-button');
+    await expect(toast).toHaveClass(/hydrated/);
+
+    await closeToast.click();
+    await expect(toast).not.toBeVisible();
+  }
+);

packages/core/src/tests/utils/ct/index.html

@@ -27,6 +27,11 @@
       defineCustomElements();
     </script>
 
+    <script type="module">
+      import { toast } from '/www/build/index.esm.js';
+      window.toast = toast;
+    </script>
+
     <title>Stencil Component Starter</title>
     <style>
       html,