From 78c52573ef5d0f305d9800f605f17ed57ee72a34 Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Tue, 16 Sep 2025 09:28:13 +0530
Subject: [PATCH 01/14] Added code for angular

---
 .../angular/src/providers/modal/modal.service.ts    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/angular/src/providers/modal/modal.service.ts b/packages/angular/src/providers/modal/modal.service.ts
index b7dc73eb9d1..a324e3c445f 100644
--- a/packages/angular/src/providers/modal/modal.service.ts
+++ b/packages/angular/src/providers/modal/modal.service.ts
@@ -36,9 +36,22 @@ export class ModalService extends BaseModalService {
     super(appRef, componentFactoryResolver, injector);
   }
 
+
   public open<TData = any, TReason = any>(
     config: ModalConfig<TData>
   ): Promise<ModalInstance<TReason>> {
     return super.open(config);
   }
+
+
+  /**
+   * Closes the given modal instance, optionally passing a result/reason.
+   */
+  public close<TReason = any>(instance: ModalInstance<TReason>, reason?: TReason): void {
+    if (instance && instance.htmlElement && typeof instance.htmlElement.closeModal === 'function') {
+      instance.htmlElement.closeModal(reason);
+    } else {
+      throw new Error('Invalid modal instance: cannot close');
+    }
+  }
 }

From 133ee192342d4177b495d976b983e25cef099d16 Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Wed, 17 Sep 2025 10:54:20 +0530
Subject: [PATCH 02/14] Added dismissmodal for react and vue

---
 packages/react/src/modal/index.ts | 12 ++++++++++++
 packages/vue/src/modal/index.ts   | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts
index 6d2303aef71..ba55b3588ec 100644
--- a/packages/react/src/modal/index.ts
+++ b/packages/react/src/modal/index.ts
@@ -22,3 +22,15 @@ export async function showModal(
 ) {
   return _showModal(config);
 }
+
+/**
+ * Dismisses a modal instance returned by showModal.
+ * @param modalInstance The modal instance returned by showModal
+ * @param dismissResult Optional result to pass to the dismiss event
+ */
+export function dismissModal(
+  modalInstance: { htmlElement: any },
+  dismissResult?: any
+) {
+  modalInstance?.htmlElement?.dismissModal?.(dismissResult);
+}
diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts
index 8dbf931be0d..deda9535e30 100644
--- a/packages/vue/src/modal/index.ts
+++ b/packages/vue/src/modal/index.ts
@@ -18,3 +18,15 @@ export async function showModal(
 ) {
   return _showModal(config);
 }
+
+/**
+ * Dismisses a modal instance returned by showModal.
+ * @param modalInstance The modal instance returned by showModal
+ * @param dismissResult Optional result to pass to the dismiss event
+ */
+export function dismissModal(
+  modalInstance: { htmlElement: any },
+  dismissResult?: any
+) {
+  modalInstance?.htmlElement?.dismissModal?.(dismissResult);
+}

From 6cbd4671b2464eacecd55e4eb0d7a77280f079ec Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Fri, 19 Sep 2025 10:29:41 +0530
Subject: [PATCH 03/14] Added close event to angular standalone

---
 .../common/src/providers/modal/modal.service.ts  | 15 +++++++++++++++
 .../angular/src/providers/modal/modal.service.ts | 16 +++++-----------
 .../angular/standalone/src/providers/modal.ts    |  7 +++++++
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/angular/common/src/providers/modal/modal.service.ts b/packages/angular/common/src/providers/modal/modal.service.ts
index c129d7fbef9..cdfaf929b72 100644
--- a/packages/angular/common/src/providers/modal/modal.service.ts
+++ b/packages/angular/common/src/providers/modal/modal.service.ts
@@ -36,6 +36,21 @@ export class ModalService {
     private injector: Injector
   ) {}
 
+  public close<TReason = any>(
+    instance: { htmlElement: any },
+    reason?: TReason
+  ): void {
+    if (
+      instance &&
+      instance.htmlElement &&
+      typeof instance.htmlElement.closeModal === 'function'
+    ) {
+      instance.htmlElement.closeModal(reason);
+    } else {
+      throw new Error('Invalid modal instance: cannot close');
+    }
+  }
+
   public async open<TData = any, TReason = any>(config: ModalConfig<TData>) {
     const context: ModalContext<TData> = {
       close: null,
diff --git a/packages/angular/src/providers/modal/modal.service.ts b/packages/angular/src/providers/modal/modal.service.ts
index a324e3c445f..6ba79396f92 100644
--- a/packages/angular/src/providers/modal/modal.service.ts
+++ b/packages/angular/src/providers/modal/modal.service.ts
@@ -36,22 +36,16 @@ export class ModalService extends BaseModalService {
     super(appRef, componentFactoryResolver, injector);
   }
 
-
   public open<TData = any, TReason = any>(
     config: ModalConfig<TData>
   ): Promise<ModalInstance<TReason>> {
     return super.open(config);
   }
 
-
-  /**
-   * Closes the given modal instance, optionally passing a result/reason.
-   */
-  public close<TReason = any>(instance: ModalInstance<TReason>, reason?: TReason): void {
-    if (instance && instance.htmlElement && typeof instance.htmlElement.closeModal === 'function') {
-      instance.htmlElement.closeModal(reason);
-    } else {
-      throw new Error('Invalid modal instance: cannot close');
-    }
+  public close<TReason = any>(
+    instance: ModalInstance<TReason>,
+    reason?: TReason
+  ): void {
+    super.close(instance, reason);
   }
 }
diff --git a/packages/angular/standalone/src/providers/modal.ts b/packages/angular/standalone/src/providers/modal.ts
index 3e92b6270b0..2df8450e326 100644
--- a/packages/angular/standalone/src/providers/modal.ts
+++ b/packages/angular/standalone/src/providers/modal.ts
@@ -37,4 +37,11 @@ export class ModalService extends BaseModalService {
     defineCustomElement();
     return super.open(config);
   }
+
+  public close<TReason = any>(
+    instance: ModalInstance<TReason>,
+    reason?: TReason
+  ): void {
+    super.close(instance, reason);
+  }
 }

From db59916509b38859741d6e4cea07034e4281b6bb Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Mon, 22 Sep 2025 12:11:01 +0530
Subject: [PATCH 04/14] Renamed some functions

---
 packages/react/src/modal/index.ts | 12 ++----------
 packages/vue/src/modal/index.ts   | 12 ++----------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts
index ba55b3588ec..9b83c42f83e 100644
--- a/packages/react/src/modal/index.ts
+++ b/packages/react/src/modal/index.ts
@@ -23,14 +23,6 @@ export async function showModal(
   return _showModal(config);
 }
 
-/**
- * Dismisses a modal instance returned by showModal.
- * @param modalInstance The modal instance returned by showModal
- * @param dismissResult Optional result to pass to the dismiss event
- */
-export function dismissModal(
-  modalInstance: { htmlElement: any },
-  dismissResult?: any
-) {
-  modalInstance?.htmlElement?.dismissModal?.(dismissResult);
+export function close(modalInstance: { htmlElement: any }, closeResult?: any) {
+  modalInstance?.htmlElement?.close?.(closeResult);
 }
diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts
index deda9535e30..3e2cdc01bb8 100644
--- a/packages/vue/src/modal/index.ts
+++ b/packages/vue/src/modal/index.ts
@@ -19,14 +19,6 @@ export async function showModal(
   return _showModal(config);
 }
 
-/**
- * Dismisses a modal instance returned by showModal.
- * @param modalInstance The modal instance returned by showModal
- * @param dismissResult Optional result to pass to the dismiss event
- */
-export function dismissModal(
-  modalInstance: { htmlElement: any },
-  dismissResult?: any
-) {
-  modalInstance?.htmlElement?.dismissModal?.(dismissResult);
+export function close(modalInstance: { htmlElement: any }, closeResult?: any) {
+  modalInstance?.htmlElement?.closeModal?.(closeResult);
 }

From f643c2e51c739fc4031831e3f130aed32282b886 Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Tue, 23 Sep 2025 12:40:09 +0530
Subject: [PATCH 05/14] Added preview examples for modal close

---
 .../src/app/app.routes.ts                     | 14 +++
 .../modal-close-by-instance.ts                | 34 +++++++
 .../modal-close-by-template.ts                | 77 +++++++++++++++
 .../src/app/app-routing.module.ts             | 10 ++
 .../angular-test-app/src/app/app.module.ts    |  4 +
 .../modal-close-by-instance.ts                | 30 ++++++
 .../modal-close-by-template.ts                | 67 +++++++++++++
 .../src/preview-examples/modal-close.html     | 97 +++++++++++++++++++
 packages/react-test-app/src/main.tsx          |  2 +
 .../src/preview-examples/modal-close.tsx      | 64 ++++++++++++
 packages/react/src/modal/index.ts             |  2 +-
 packages/vue-test-app/src/Root.vue            |  2 +
 .../src/preview-examples/modal-close.vue      | 48 +++++++++
 13 files changed, 450 insertions(+), 1 deletion(-)
 create mode 100644 packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.ts
 create mode 100644 packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts
 create mode 100644 packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts
 create mode 100644 packages/angular-test-app/src/preview-examples/modal-close-by-template.ts
 create mode 100644 packages/html-test-app/src/preview-examples/modal-close.html
 create mode 100644 packages/react-test-app/src/preview-examples/modal-close.tsx
 create mode 100644 packages/vue-test-app/src/preview-examples/modal-close.vue

diff --git a/packages/angular-standalone-test-app/src/app/app.routes.ts b/packages/angular-standalone-test-app/src/app/app.routes.ts
index c795dc5d59e..847578c30c6 100644
--- a/packages/angular-standalone-test-app/src/app/app.routes.ts
+++ b/packages/angular-standalone-test-app/src/app/app.routes.ts
@@ -909,6 +909,13 @@ export const routes: Routes = [
             (m) => m.default
           ),
       },
+      {
+        path: 'modal-close-by-instance',
+        loadComponent: () =>
+          import('../preview-examples/modal-close-by-instance').then(
+            (m) => m.default
+          ),
+      },
       {
         path: 'modal-by-template',
         loadComponent: () =>
@@ -916,6 +923,13 @@ export const routes: Routes = [
             (m) => m.default
           ),
       },
+      {
+        path: 'modal-close-by-template',
+        loadComponent: () =>
+          import('../preview-examples/modal-close-by-template').then(
+            (m) => m.default
+          ),
+      },
       {
         path: 'modal-form-ix-button-submit',
         loadComponent: () =>
diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.ts
new file mode 100644
index 00000000000..16728b1e22d
--- /dev/null
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.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 { Component } from '@angular/core';
+import { IxButton } from '@siemens/ix-angular/standalone';
+
+import { ModalService } from '@siemens/ix-angular';
+import ModalByInstanceExample from './modal-by-instance-content';
+
+@Component({
+  standalone: true,
+  selector: 'app-example',
+  imports: [IxButton],
+  template: '<ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>',
+})
+export default class ModalCloseByInstance {
+  constructor(private readonly modalService: ModalService) {}
+
+  async openModal() {
+    const modalInstance = await this.modalService.open({
+      content: ModalByInstanceExample,
+      data: 'Some data',
+    });
+    setTimeout(() => {
+      this.modalService.close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  }
+}
diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts
new file mode 100644
index 00000000000..4c61347b3d6
--- /dev/null
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts
@@ -0,0 +1,77 @@
+/*
+ * 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 { Component, TemplateRef, ViewChild } from '@angular/core';
+import {
+  IxButton,
+  IxModal,
+  IxModalHeader,
+  IxModalContent,
+  IxModalFooter,
+} from '@siemens/ix-angular/standalone';
+
+import { ModalService } from '@siemens/ix-angular';
+
+@Component({
+  standalone: true,
+  selector: 'app-example',
+  imports: [IxButton, IxModal, IxModalHeader, IxModalContent, IxModalFooter],
+  template: `
+    <ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>
+
+    <ng-template #customModal let-modal>
+      <ix-modal>
+        <ix-modal-header> Message headline </ix-modal-header>
+        <ix-modal-content
+          >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
+        >
+        <ix-modal-footer>
+          <ix-button
+            outline
+            class="dismiss-modal"
+            (click)="modal.dismiss('dismiss')"
+          >
+            Cancel
+          </ix-button>
+          <ix-button class="close-modal" (click)="modal.close('okay')">
+            OK
+          </ix-button>
+        </ix-modal-footer>
+      </ix-modal>
+    </ng-template>
+  `,
+})
+export default class Modal {
+  @ViewChild('customModal', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+
+  constructor(private readonly modalService: ModalService) {}
+
+  async openModal() {
+    const instance = await this.modalService.open({
+      content: this.customModalRef,
+      data: 'Some data',
+    });
+
+    setTimeout(() => {
+      this.modalService.close(instance, 'closed after 5 seconds');
+    }, 5000);
+
+    instance.onClose.on((a) => {
+      console.log(a);
+    });
+
+    instance.htmlElement.addEventListener(
+      'keydown',
+      (keyboardEvent: KeyboardEvent) => {
+        console.log(keyboardEvent.key);
+      }
+    );
+  }
+}
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index e20ba380ed2..be91d700cae 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -158,8 +158,10 @@ import Message from '../preview-examples/message';
 import MessageBar from '../preview-examples/message-bar';
 import MessageBarRemoval from '../preview-examples/message-bar-removal';
 import ModalByInstance from '../preview-examples/modal-by-instance';
+import ModalCloseByInstance from '../preview-examples/modal-close-by-instance';
 import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
 import ModalByTemplate from '../preview-examples/modal-by-template';
+import ModalCloseByTemplate from '../preview-examples/modal-close-by-template';
 import ModalFormIxButtonSubmit from '../preview-examples/modal-form-ix-button-submit';
 import ModalSizes from '../preview-examples/modal-sizes';
 import NumberInput from '../preview-examples/number-input';
@@ -757,10 +759,18 @@ const routes: Routes = [
         path: 'modal-by-instance',
         component: ModalByInstance,
       },
+      {
+        path: 'modal-close-by-instance',
+        component: ModalCloseByInstance,
+      },
       {
         path: 'modal-by-template',
         component: ModalByTemplate,
       },
+      {
+        path: 'modal-close-by-template',
+        component: ModalCloseByTemplate,
+      },
       {
         path: 'modal-form-ix-button-submit',
         component: ModalFormIxButtonSubmit,
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index 7dbadc13625..04d61ce0752 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -169,6 +169,8 @@ import MessageBarRemoval from '../preview-examples/message-bar-removal';
 import ModalByInstance from '../preview-examples/modal-by-instance';
 import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
 import ModalByTemplate from '../preview-examples/modal-by-template';
+import ModalCloseByInstance from '../preview-examples/modal-close-by-instance';
+import ModalCloseByTemplate from '../preview-examples/modal-close-by-template';
 import ModalSizes from '../preview-examples/modal-sizes';
 import NumberInput from '../preview-examples/number-input';
 import NumberInputDisabled from '../preview-examples/number-input-disabled';
@@ -392,6 +394,8 @@ import ProgressIndicatorCircular from '../preview-examples/progress-indicator-ci
     ModalByInstanceContent,
     ModalByInstance,
     ModalByTemplate,
+    ModalCloseByInstance,
+    ModalCloseByTemplate,
     ModalFormIxButtonSubmit,
     ModalSizes,
     PaginationAdvanced,
diff --git a/packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts b/packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts
new file mode 100644
index 00000000000..a0b07ea88b4
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 { Component } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular';
+import ModalByInstanceExample from './modal-by-instance-content';
+
+@Component({
+  selector: 'app-example',
+  template: '<ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>',
+})
+export default class ModalCloseByInstance {
+  constructor(private readonly modalService: ModalService) {}
+
+  async openModal() {
+    const modalInstance = await this.modalService.open({
+      content: ModalByInstanceExample,
+      data: 'Some data',
+    });
+    setTimeout(() => {
+      this.modalService.close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  }
+}
diff --git a/packages/angular-test-app/src/preview-examples/modal-close-by-template.ts b/packages/angular-test-app/src/preview-examples/modal-close-by-template.ts
new file mode 100644
index 00000000000..a554ebd75a9
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/modal-close-by-template.ts
@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>
+
+    <ng-template #customModal let-modal>
+      <ix-modal>
+        <ix-modal-header> Message headline </ix-modal-header>
+        <ix-modal-content
+          >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
+        >
+        <ix-modal-footer>
+          <ix-button
+            outline
+            class="dismiss-modal"
+            (click)="modal.dismiss('dismiss')"
+          >
+            Cancel
+          </ix-button>
+          <ix-button class="close-modal" (click)="modal.close('okay')">
+            OK
+          </ix-button>
+        </ix-modal-footer>
+      </ix-modal>
+    </ng-template>
+  `,
+})
+export default class Modal {
+  @ViewChild('customModal', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+
+  constructor(private readonly modalService: ModalService) {}
+
+  async openModal() {
+    const instance = await this.modalService.open({
+      content: this.customModalRef,
+      data: 'Some data',
+    });
+
+    setTimeout(() => {
+      this.modalService.close(instance, 'closed after 5 seconds');
+    }, 5000);
+
+    instance.onClose.on((a) => {
+      console.log(a);
+    });
+
+    instance.htmlElement.addEventListener(
+      'keydown',
+      (keyboardEvent: KeyboardEvent) => {
+        console.log(keyboardEvent.key);
+      }
+    );
+  }
+}
diff --git a/packages/html-test-app/src/preview-examples/modal-close.html b/packages/html-test-app/src/preview-examples/modal-close.html
new file mode 100644
index 00000000000..859bcb8b828
--- /dev/null
+++ b/packages/html-test-app/src/preview-examples/modal-close.html
@@ -0,0 +1,97 @@
+<!--
+SPDX-FileCopyrightText: 2024 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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal example</title>
+  </head>
+  <body>
+    <ix-button>Show modal for 5 seconds</ix-button>
+    <template id="modal-example-template">
+      <ix-modal-header>Message headline</ix-modal-header>
+      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+      <ix-modal-footer>
+        <ix-button outline data-cancel>Cancel</ix-button>
+        <ix-button data-okay>OK</ix-button>
+      </ix-modal-footer>
+    </template>
+
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+
+      function createExampleModal() {
+        const name = 'modal-example';
+        window.customElements.define(
+          name,
+          class extends HTMLElement {
+            isInitalRender = false;
+
+            constructor() {
+              super();
+            }
+
+            connectedCallback() {
+              if (this.isInitalRender) {
+                return;
+              }
+
+              this.isInitalRender = true;
+              this.firstRender();
+            }
+
+            firstRender() {
+              const modalTemplate = document.getElementById(
+                'modal-example-template'
+              );
+              const template = modalTemplate.content.cloneNode(true);
+
+              const cancelButton = template.querySelector('[data-cancel]');
+              const okayButton = template.querySelector('[data-okay]');
+
+              cancelButton.addEventListener('click', () => {
+                dismissModal(this);
+              });
+              okayButton.addEventListener('click', () => {
+                closeModal(this);
+              });
+
+              this.append(template);
+            }
+          }
+        );
+
+        return name;
+      }
+
+      (async function () {
+        const exampleModalName = createExampleModal();
+
+        await window.customElements.whenDefined('ix-button');
+        const button = document.querySelector('ix-button');
+
+        button.addEventListener('click', async () => {
+          const customModal = document.createElement(exampleModalName);
+
+          const modal = await showModal({
+            content: customModal,
+          });
+
+          // Auto-close the modal after 5 seconds
+          setTimeout(() => {
+            closeModal(customModal, 'closed after 5 seconds');
+          }, 5000);
+        });
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
index 3f4250ff524..7acb624a55f 100644
--- a/packages/react-test-app/src/main.tsx
+++ b/packages/react-test-app/src/main.tsx
@@ -156,6 +156,7 @@ import Message from './preview-examples/message';
 import MessageBar from './preview-examples/message-bar';
 import MessageBarRemoval from './preview-examples/message-bar-removal.tsx';
 import Modal from './preview-examples/modal';
+import ModalClose from './preview-examples/modal-close.tsx';
 import ModalSizes from './preview-examples/modal-sizes';
 import NumberInput from './preview-examples/number-input';
 import NumberInputDisabled from './preview-examples/number-input-disabled';
@@ -580,6 +581,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         />
 
         <Route path="/preview/modal" element={<Modal />} />
+        <Route path="/preview/modal-close" element={<ModalClose />} />
         <Route
           path="/preview/pagination-advanced"
           element={<PaginationAdvanced />}
diff --git a/packages/react-test-app/src/preview-examples/modal-close.tsx b/packages/react-test-app/src/preview-examples/modal-close.tsx
new file mode 100644
index 00000000000..fa9440cb268
--- /dev/null
+++ b/packages/react-test-app/src/preview-examples/modal-close.tsx
@@ -0,0 +1,64 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  Modal,
+  ModalRef,
+  showModal,
+  close,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+
+  return (
+    <Modal ref={modalRef}>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton outline onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()}>OK</IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+
+export default () => {
+  async function show() {
+    const modalInstance = await showModal({
+      content: <CustomModal />,
+    });
+    // Auto-close after 5 seconds
+    setTimeout(() => {
+      close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  }
+
+  return (
+    <>
+      <IxButton onClick={show}>Show modal for 5 seconds</IxButton>
+    </>
+  );
+};
diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts
index 9b83c42f83e..d0cecaf9ab9 100644
--- a/packages/react/src/modal/index.ts
+++ b/packages/react/src/modal/index.ts
@@ -24,5 +24,5 @@ export async function showModal(
 }
 
 export function close(modalInstance: { htmlElement: any }, closeResult?: any) {
-  modalInstance?.htmlElement?.close?.(closeResult);
+  modalInstance?.htmlElement?.closeModal?.(closeResult);
 }
diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue
index be647e2f64c..431de6e38cd 100644
--- a/packages/vue-test-app/src/Root.vue
+++ b/packages/vue-test-app/src/Root.vue
@@ -161,6 +161,7 @@ import MessageBarRemoval from './preview-examples/message-bar-removal.vue';
 import Message from './preview-examples/message.vue';
 import ModalSizes from './preview-examples/modal-sizes.vue';
 import ModalExample from './preview-examples/modal.vue';
+import ModalClose from './preview-examples/modal-close.vue';
 import NumberInputDisabled from './preview-examples/number-input-disabled.vue';
 import NumberInputLabel from './preview-examples/number-input-label.vue';
 import NumberInputReadOnly from './preview-examples/number-input-readonly.vue';
@@ -397,6 +398,7 @@ const routes: any = {
   '/preview/settings': Settings,
   '/preview/kpi': Kpi,
   '/preview/modal': ModalExample,
+  '/preview/modal-close': ModalClose,
   '/preview/modal-form-ix-button-submit': ModalFormIxButtonSubmit,
   '/preview/number-input': NumberInput,
   '/preview/number-input-disabled': NumberInputDisabled,
diff --git a/packages/vue-test-app/src/preview-examples/modal-close.vue b/packages/vue-test-app/src/preview-examples/modal-close.vue
new file mode 100644
index 00000000000..ef72da65f1c
--- /dev/null
+++ b/packages/vue-test-app/src/preview-examples/modal-close.vue
@@ -0,0 +1,48 @@
+<!--
+ * SPDX-FileCopyrightText: 2023 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.
+-->
+
+<script setup lang="tsx">
+import {
+  IxButton,
+  IxModalHeader,
+  IxModalContent,
+  IxModalFooter,
+  Modal,
+  ModalSlotProps,
+  showModal,
+  close,
+} from '@siemens/ix-vue';
+
+function show() {
+  showModal({
+    content: (
+      <Modal>
+        {({ closeModal, dismissModal }: ModalSlotProps) => [
+          <IxModalHeader>Message headline</IxModalHeader>,
+          <IxModalContent>Message text lorem ipsum</IxModalContent>,
+          <IxModalFooter>
+            <IxButton outline onClick={() => dismissModal()}>
+              Cancel
+            </IxButton>
+            <IxButton onClick={() => closeModal()}>OK</IxButton>
+          </IxModalFooter>,
+        ]}
+      </Modal>
+    ),
+  }).then((modalInstance) => {
+    setTimeout(() => {
+      close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  });
+}
+</script>
+
+<template>
+  <IxButton @click="show()">Show modal for 5 seconds</IxButton>
+</template>

From 7c22e26c85def41dcf91faf6e131897e9c76a167 Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Tue, 23 Sep 2025 13:32:13 +0530
Subject: [PATCH 06/14] Sonarlint error fix

---
 .../angular/common/src/providers/modal/modal.service.ts     | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/angular/common/src/providers/modal/modal.service.ts b/packages/angular/common/src/providers/modal/modal.service.ts
index cdfaf929b72..aaf4b0894bf 100644
--- a/packages/angular/common/src/providers/modal/modal.service.ts
+++ b/packages/angular/common/src/providers/modal/modal.service.ts
@@ -40,11 +40,7 @@ export class ModalService {
     instance: { htmlElement: any },
     reason?: TReason
   ): void {
-    if (
-      instance &&
-      instance.htmlElement &&
-      typeof instance.htmlElement.closeModal === 'function'
-    ) {
+    if (typeof instance?.htmlElement?.closeModal === 'function') {
       instance.htmlElement.closeModal(reason);
     } else {
       throw new Error('Invalid modal instance: cannot close');

From 16dab325839fce46ffbf6df66964a41f69b8a46d Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Tue, 23 Sep 2025 13:54:57 +0530
Subject: [PATCH 07/14] Added lint error fix

---
 packages/angular/common/src/providers/modal/modal.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/angular/common/src/providers/modal/modal.service.ts b/packages/angular/common/src/providers/modal/modal.service.ts
index aaf4b0894bf..fb315a93242 100644
--- a/packages/angular/common/src/providers/modal/modal.service.ts
+++ b/packages/angular/common/src/providers/modal/modal.service.ts
@@ -43,7 +43,7 @@ export class ModalService {
     if (typeof instance?.htmlElement?.closeModal === 'function') {
       instance.htmlElement.closeModal(reason);
     } else {
-      throw new Error('Invalid modal instance: cannot close');
+      throw new TypeError('Invalid modal instance: cannot close');
     }
   }
 

From d44eaa91e1b63bba6912eec1f15b2e0787bf5a03 Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Sun, 28 Sep 2025 23:34:58 +0530
Subject: [PATCH 08/14] Addressing review comments

---
 .../src/app/app.routes.ts                     | 13 +---
 .../modal-close-by-template.ts                | 77 -------------------
 ...al-close-by-instance.ts => modal-close.ts} |  3 +-
 .../src/app/app-routing.module.ts             | 11 +--
 .../angular-test-app/src/app/app.module.ts    |  6 +-
 .../modal-close-by-template.ts                | 67 ----------------
 ...al-close-by-instance.ts => modal-close.ts} |  5 +-
 .../src/preview-examples/modal-close.html     |  5 +-
 .../src/preview-examples/modal-close.tsx      |  9 +--
 packages/react/src/modal/index.ts             |  8 +-
 .../src/preview-examples/modal-close.vue      |  8 +-
 packages/vue/src/modal/index.ts               |  6 +-
 12 files changed, 32 insertions(+), 186 deletions(-)
 delete mode 100644 packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts
 rename packages/angular-standalone-test-app/src/preview-examples/{modal-close-by-instance.ts => modal-close.ts} (90%)
 delete mode 100644 packages/angular-test-app/src/preview-examples/modal-close-by-template.ts
 rename packages/angular-test-app/src/preview-examples/{modal-close-by-instance.ts => modal-close.ts} (84%)

diff --git a/packages/angular-standalone-test-app/src/app/app.routes.ts b/packages/angular-standalone-test-app/src/app/app.routes.ts
index 847578c30c6..e212f03ecc1 100644
--- a/packages/angular-standalone-test-app/src/app/app.routes.ts
+++ b/packages/angular-standalone-test-app/src/app/app.routes.ts
@@ -910,11 +910,9 @@ export const routes: Routes = [
           ),
       },
       {
-        path: 'modal-close-by-instance',
+        path: 'modal-close',
         loadComponent: () =>
-          import('../preview-examples/modal-close-by-instance').then(
-            (m) => m.default
-          ),
+          import('../preview-examples/modal-close').then((m) => m.default),
       },
       {
         path: 'modal-by-template',
@@ -923,13 +921,6 @@ export const routes: Routes = [
             (m) => m.default
           ),
       },
-      {
-        path: 'modal-close-by-template',
-        loadComponent: () =>
-          import('../preview-examples/modal-close-by-template').then(
-            (m) => m.default
-          ),
-      },
       {
         path: 'modal-form-ix-button-submit',
         loadComponent: () =>
diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts
deleted file mode 100644
index 4c61347b3d6..00000000000
--- a/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-template.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * 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 { Component, TemplateRef, ViewChild } from '@angular/core';
-import {
-  IxButton,
-  IxModal,
-  IxModalHeader,
-  IxModalContent,
-  IxModalFooter,
-} from '@siemens/ix-angular/standalone';
-
-import { ModalService } from '@siemens/ix-angular';
-
-@Component({
-  standalone: true,
-  selector: 'app-example',
-  imports: [IxButton, IxModal, IxModalHeader, IxModalContent, IxModalFooter],
-  template: `
-    <ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>
-
-    <ng-template #customModal let-modal>
-      <ix-modal>
-        <ix-modal-header> Message headline </ix-modal-header>
-        <ix-modal-content
-          >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
-        >
-        <ix-modal-footer>
-          <ix-button
-            outline
-            class="dismiss-modal"
-            (click)="modal.dismiss('dismiss')"
-          >
-            Cancel
-          </ix-button>
-          <ix-button class="close-modal" (click)="modal.close('okay')">
-            OK
-          </ix-button>
-        </ix-modal-footer>
-      </ix-modal>
-    </ng-template>
-  `,
-})
-export default class Modal {
-  @ViewChild('customModal', { read: TemplateRef })
-  customModalRef!: TemplateRef<any>;
-
-  constructor(private readonly modalService: ModalService) {}
-
-  async openModal() {
-    const instance = await this.modalService.open({
-      content: this.customModalRef,
-      data: 'Some data',
-    });
-
-    setTimeout(() => {
-      this.modalService.close(instance, 'closed after 5 seconds');
-    }, 5000);
-
-    instance.onClose.on((a) => {
-      console.log(a);
-    });
-
-    instance.htmlElement.addEventListener(
-      'keydown',
-      (keyboardEvent: KeyboardEvent) => {
-        console.log(keyboardEvent.key);
-      }
-    );
-  }
-}
diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
similarity index 90%
rename from packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.ts
rename to packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
index 16728b1e22d..5984bdb76fa 100644
--- a/packages/angular-standalone-test-app/src/preview-examples/modal-close-by-instance.ts
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
@@ -17,7 +17,8 @@ import ModalByInstanceExample from './modal-by-instance-content';
   standalone: true,
   selector: 'app-example',
   imports: [IxButton],
-  template: '<ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>',
+  template:
+    '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
 })
 export default class ModalCloseByInstance {
   constructor(private readonly modalService: ModalService) {}
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
index be91d700cae..1839322bef8 100644
--- a/packages/angular-test-app/src/app/app-routing.module.ts
+++ b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -158,10 +158,9 @@ import Message from '../preview-examples/message';
 import MessageBar from '../preview-examples/message-bar';
 import MessageBarRemoval from '../preview-examples/message-bar-removal';
 import ModalByInstance from '../preview-examples/modal-by-instance';
-import ModalCloseByInstance from '../preview-examples/modal-close-by-instance';
+import ModalClose from '../preview-examples/modal-close';
 import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
 import ModalByTemplate from '../preview-examples/modal-by-template';
-import ModalCloseByTemplate from '../preview-examples/modal-close-by-template';
 import ModalFormIxButtonSubmit from '../preview-examples/modal-form-ix-button-submit';
 import ModalSizes from '../preview-examples/modal-sizes';
 import NumberInput from '../preview-examples/number-input';
@@ -760,17 +759,13 @@ const routes: Routes = [
         component: ModalByInstance,
       },
       {
-        path: 'modal-close-by-instance',
-        component: ModalCloseByInstance,
+        path: 'modal-close',
+        component: ModalClose,
       },
       {
         path: 'modal-by-template',
         component: ModalByTemplate,
       },
-      {
-        path: 'modal-close-by-template',
-        component: ModalCloseByTemplate,
-      },
       {
         path: 'modal-form-ix-button-submit',
         component: ModalFormIxButtonSubmit,
diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
index 04d61ce0752..18d68b3353e 100644
--- a/packages/angular-test-app/src/app/app.module.ts
+++ b/packages/angular-test-app/src/app/app.module.ts
@@ -169,8 +169,7 @@ import MessageBarRemoval from '../preview-examples/message-bar-removal';
 import ModalByInstance from '../preview-examples/modal-by-instance';
 import ModalByInstanceContent from '../preview-examples/modal-by-instance-content';
 import ModalByTemplate from '../preview-examples/modal-by-template';
-import ModalCloseByInstance from '../preview-examples/modal-close-by-instance';
-import ModalCloseByTemplate from '../preview-examples/modal-close-by-template';
+import ModalClose from '../preview-examples/modal-close';
 import ModalSizes from '../preview-examples/modal-sizes';
 import NumberInput from '../preview-examples/number-input';
 import NumberInputDisabled from '../preview-examples/number-input-disabled';
@@ -394,8 +393,7 @@ import ProgressIndicatorCircular from '../preview-examples/progress-indicator-ci
     ModalByInstanceContent,
     ModalByInstance,
     ModalByTemplate,
-    ModalCloseByInstance,
-    ModalCloseByTemplate,
+    ModalClose,
     ModalFormIxButtonSubmit,
     ModalSizes,
     PaginationAdvanced,
diff --git a/packages/angular-test-app/src/preview-examples/modal-close-by-template.ts b/packages/angular-test-app/src/preview-examples/modal-close-by-template.ts
deleted file mode 100644
index a554ebd75a9..00000000000
--- a/packages/angular-test-app/src/preview-examples/modal-close-by-template.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 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 { Component, TemplateRef, ViewChild } from '@angular/core';
-import { ModalService } from '@siemens/ix-angular';
-
-@Component({
-  selector: 'app-example',
-  template: `
-    <ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>
-
-    <ng-template #customModal let-modal>
-      <ix-modal>
-        <ix-modal-header> Message headline </ix-modal-header>
-        <ix-modal-content
-          >Message text lorem ipsum: {{ modal.data }}</ix-modal-content
-        >
-        <ix-modal-footer>
-          <ix-button
-            outline
-            class="dismiss-modal"
-            (click)="modal.dismiss('dismiss')"
-          >
-            Cancel
-          </ix-button>
-          <ix-button class="close-modal" (click)="modal.close('okay')">
-            OK
-          </ix-button>
-        </ix-modal-footer>
-      </ix-modal>
-    </ng-template>
-  `,
-})
-export default class Modal {
-  @ViewChild('customModal', { read: TemplateRef })
-  customModalRef!: TemplateRef<any>;
-
-  constructor(private readonly modalService: ModalService) {}
-
-  async openModal() {
-    const instance = await this.modalService.open({
-      content: this.customModalRef,
-      data: 'Some data',
-    });
-
-    setTimeout(() => {
-      this.modalService.close(instance, 'closed after 5 seconds');
-    }, 5000);
-
-    instance.onClose.on((a) => {
-      console.log(a);
-    });
-
-    instance.htmlElement.addEventListener(
-      'keydown',
-      (keyboardEvent: KeyboardEvent) => {
-        console.log(keyboardEvent.key);
-      }
-    );
-  }
-}
diff --git a/packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts b/packages/angular-test-app/src/preview-examples/modal-close.ts
similarity index 84%
rename from packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts
rename to packages/angular-test-app/src/preview-examples/modal-close.ts
index a0b07ea88b4..5e913189900 100644
--- a/packages/angular-test-app/src/preview-examples/modal-close-by-instance.ts
+++ b/packages/angular-test-app/src/preview-examples/modal-close.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2024 Siemens AG
+ * SPDX-FileCopyrightText: 2025 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -13,7 +13,8 @@ import ModalByInstanceExample from './modal-by-instance-content';
 
 @Component({
   selector: 'app-example',
-  template: '<ix-button (click)="openModal()">Show modal for 5 seconds</ix-button>',
+  template:
+    '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
 })
 export default class ModalCloseByInstance {
   constructor(private readonly modalService: ModalService) {}
diff --git a/packages/html-test-app/src/preview-examples/modal-close.html b/packages/html-test-app/src/preview-examples/modal-close.html
index 859bcb8b828..a15a597fb24 100644
--- a/packages/html-test-app/src/preview-examples/modal-close.html
+++ b/packages/html-test-app/src/preview-examples/modal-close.html
@@ -1,5 +1,5 @@
 <!--
-SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-FileCopyrightText: 2025 Siemens AG
 
 SPDX-License-Identifier: MIT
 
@@ -15,7 +15,7 @@
     <title>Modal example</title>
   </head>
   <body>
-    <ix-button>Show modal for 5 seconds</ix-button>
+    <ix-button>Show modal (auto-dismiss)</ix-button>
     <template id="modal-example-template">
       <ix-modal-header>Message headline</ix-modal-header>
       <ix-modal-content>Message text lorem ipsum</ix-modal-content>
@@ -85,7 +85,6 @@
             content: customModal,
           });
 
-          // Auto-close the modal after 5 seconds
           setTimeout(() => {
             closeModal(customModal, 'closed after 5 seconds');
           }, 5000);
diff --git a/packages/react-test-app/src/preview-examples/modal-close.tsx b/packages/react-test-app/src/preview-examples/modal-close.tsx
index fa9440cb268..eb94dc301ac 100644
--- a/packages/react-test-app/src/preview-examples/modal-close.tsx
+++ b/packages/react-test-app/src/preview-examples/modal-close.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2024 Siemens AG
+ * SPDX-FileCopyrightText: 2025 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -15,7 +15,7 @@ import {
   Modal,
   ModalRef,
   showModal,
-  close,
+  dismissModal,
 } from '@siemens/ix-react';
 import { useRef } from 'react';
 
@@ -50,15 +50,14 @@ export default () => {
     const modalInstance = await showModal({
       content: <CustomModal />,
     });
-    // Auto-close after 5 seconds
     setTimeout(() => {
-      close(modalInstance, 'closed after 5 seconds');
+      dismissModal(modalInstance);
     }, 5000);
   }
 
   return (
     <>
-      <IxButton onClick={show}>Show modal for 5 seconds</IxButton>
+      <IxButton onClick={show}>Show modal (auto-dismiss)</IxButton>
     </>
   );
 };
diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts
index d0cecaf9ab9..6afc242f867 100644
--- a/packages/react/src/modal/index.ts
+++ b/packages/react/src/modal/index.ts
@@ -10,6 +10,8 @@
 import {
   ModalConfig as IxModalConfig,
   showModal as _showModal,
+  dismissModal as _dismissModal,
+  ModalInstance as IxModalInstance,
 } from '@siemens/ix';
 export * from './modal';
 
@@ -23,6 +25,8 @@ export async function showModal(
   return _showModal(config);
 }
 
-export function close(modalInstance: { htmlElement: any }, closeResult?: any) {
-  modalInstance?.htmlElement?.closeModal?.(closeResult);
+export function dismissModal(modalInstance: IxModalInstance) {
+  if (modalInstance?.htmlElement) {
+    _dismissModal(modalInstance.htmlElement);
+  }
 }
diff --git a/packages/vue-test-app/src/preview-examples/modal-close.vue b/packages/vue-test-app/src/preview-examples/modal-close.vue
index ef72da65f1c..bdec6f3e466 100644
--- a/packages/vue-test-app/src/preview-examples/modal-close.vue
+++ b/packages/vue-test-app/src/preview-examples/modal-close.vue
@@ -1,5 +1,5 @@
 <!--
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2025 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -16,7 +16,7 @@ import {
   Modal,
   ModalSlotProps,
   showModal,
-  close,
+  dismissModal,
 } from '@siemens/ix-vue';
 
 function show() {
@@ -37,12 +37,12 @@ function show() {
     ),
   }).then((modalInstance) => {
     setTimeout(() => {
-      close(modalInstance, 'closed after 5 seconds');
+      dismissModal(modalInstance);
     }, 5000);
   });
 }
 </script>
 
 <template>
-  <IxButton @click="show()">Show modal for 5 seconds</IxButton>
+  <IxButton @click="show()">Show modal (auto-dismiss)</IxButton>
 </template>
diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts
index 3e2cdc01bb8..9f23c667393 100644
--- a/packages/vue/src/modal/index.ts
+++ b/packages/vue/src/modal/index.ts
@@ -1,6 +1,8 @@
 import {
   ModalConfig as IxModalConfig,
   showModal as _showModal,
+  dismissModal as _dismissModal,
+  ModalInstance as IxModalInstance,
 } from '@siemens/ix';
 import { VNode } from 'vue';
 
@@ -19,6 +21,6 @@ export async function showModal(
   return _showModal(config);
 }
 
-export function close(modalInstance: { htmlElement: any }, closeResult?: any) {
-  modalInstance?.htmlElement?.closeModal?.(closeResult);
+export function dismissModal(modalInstance: IxModalInstance) {
+  _dismissModal(modalInstance.htmlElement);
 }

From 74bc48f239aae35a9408ef838aed23da36f570d9 Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Wed, 1 Oct 2025 14:11:35 +0200
Subject: [PATCH 09/14] Create sharp-ladybugs-clap.md

---
 .changeset/sharp-ladybugs-clap.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/sharp-ladybugs-clap.md

diff --git a/.changeset/sharp-ladybugs-clap.md b/.changeset/sharp-ladybugs-clap.md
new file mode 100644
index 00000000000..53aed58ebcd
--- /dev/null
+++ b/.changeset/sharp-ladybugs-clap.md
@@ -0,0 +1,7 @@
+---
+"@siemens/ix-angular": patch
+"@siemens/ix-react": patch
+"@siemens/ix-vue": patch
+---
+
+Add dismissModal function to allow programmatic closing of **ix-modal**s.

From 0c0be4084dbe7272249a64e2ba9c2f239a07862d Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Mon, 6 Oct 2025 20:09:46 +0530
Subject: [PATCH 10/14] Added comment changes and corrected build fails

---
 .../src/preview-examples/modal-close.ts       |  2 +-
 .../src/preview-examples/modal-close.ts       |  3 +-
 .../src/providers/modal/modal.service.spec.ts | 34 ++++++++++++++
 packages/vue/src/modal/index.ts               |  4 +-
 tooling/oss-clearing/create-sbom.ts           | 46 ++++++++-----------
 5 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
index 5984bdb76fa..ba77b2c80d0 100644
--- a/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
@@ -20,7 +20,7 @@ import ModalByInstanceExample from './modal-by-instance-content';
   template:
     '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
 })
-export default class ModalCloseByInstance {
+export default class ModalClose {
   constructor(private readonly modalService: ModalService) {}
 
   async openModal() {
diff --git a/packages/angular-test-app/src/preview-examples/modal-close.ts b/packages/angular-test-app/src/preview-examples/modal-close.ts
index 5e913189900..4c2199731ea 100644
--- a/packages/angular-test-app/src/preview-examples/modal-close.ts
+++ b/packages/angular-test-app/src/preview-examples/modal-close.ts
@@ -12,11 +12,12 @@ import { ModalService } from '@siemens/ix-angular';
 import ModalByInstanceExample from './modal-by-instance-content';
 
 @Component({
+  standalone: false,
   selector: 'app-example',
   template:
     '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
 })
-export default class ModalCloseByInstance {
+export default class ModalClose {
   constructor(private readonly modalService: ModalService) {}
 
   async openModal() {
diff --git a/packages/angular/common/src/providers/modal/modal.service.spec.ts b/packages/angular/common/src/providers/modal/modal.service.spec.ts
index 560bb5b523b..dbe8a6914ac 100644
--- a/packages/angular/common/src/providers/modal/modal.service.spec.ts
+++ b/packages/angular/common/src/providers/modal/modal.service.spec.ts
@@ -103,3 +103,37 @@ test('should create modal by component typ', async () => {
     modalElement: { type: 'html-element' },
   });
 });
+
+test('should close modal instance with reason and mark as closed', () => {
+  const closeModalMock = jest.fn(function (
+    this: { closed?: boolean },
+    reason?: any
+  ) {
+    if (typeof reason !== 'undefined') {
+      this.closed = true;
+    }
+  });
+  const instance = {
+    htmlElement: {
+      closeModal: closeModalMock,
+      closed: false,
+    },
+  };
+  const modalService = new ModalService({} as any, {} as any, {} as any);
+  const reason = 'user-dismissed';
+  modalService.close(instance, reason);
+  expect(closeModalMock).toHaveBeenCalledWith(reason);
+  expect(instance.htmlElement.closed).toBe(true);
+});
+
+test('should throw TypeError if instance cannot be closed', () => {
+  const instance = {
+    htmlElement: {},
+  };
+  const modalService = new ModalService({} as any, {} as any, {} as any);
+
+  expect(() => modalService.close(instance)).toThrow(TypeError);
+  expect(() => modalService.close(instance)).toThrow(
+    'Invalid modal instance: cannot close'
+  );
+});
diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts
index 9f23c667393..e452da1106b 100644
--- a/packages/vue/src/modal/index.ts
+++ b/packages/vue/src/modal/index.ts
@@ -22,5 +22,7 @@ export async function showModal(
 }
 
 export function dismissModal(modalInstance: IxModalInstance) {
-  _dismissModal(modalInstance.htmlElement);
+  if (modalInstance?.htmlElement) {
+    _dismissModal(modalInstance.htmlElement);
+  }
 }
diff --git a/tooling/oss-clearing/create-sbom.ts b/tooling/oss-clearing/create-sbom.ts
index e9288a605ee..410bf9dbaf6 100644
--- a/tooling/oss-clearing/create-sbom.ts
+++ b/tooling/oss-clearing/create-sbom.ts
@@ -24,7 +24,6 @@ function getPkg(pkgPath: string) {
 }
 
 function modifyDependenciesByIxMetaProperty(pnpmJson: any, pkg: any) {
-  const storeOriginalDependencies = { ...pnpmJson['dependencies'] };
   pnpmJson['dependencies'] = pnpmJson['devDependencies'];
   Object.keys(pnpmJson['dependencies']).forEach((key) => {
     if (!pkg['siemensix']['dependencies'].includes(key)) {
@@ -32,11 +31,6 @@ function modifyDependenciesByIxMetaProperty(pnpmJson: any, pkg: any) {
     }
   });
 
-  pnpmJson['dependencies'] = {
-    ...storeOriginalDependencies,
-    ...pnpmJson['dependencies'],
-  };
-
   return pnpmJson;
 }
 
@@ -75,19 +69,17 @@ async function resolveComponentData(
   version: string
 ): Promise<any> {
   return new Promise((resolve) => {
-    const { stdout } = spawnSync(
-      'pnpm',
-      ['v', '--json', '--long', `${packageName}@${version}`],
-      { shell: true }
-    );
+    const { stdout } = spawnSync('pnpm', [
+      'v',
+      '--json',
+      '--long',
+      `${packageName}@${version}`,
+    ], {
+      encoding: 'utf-8',
+      shell: true,
+    });
 
-    try {
-      resolve(JSON.parse(stdout.toString()));
-    } catch (error) {
-      throw new Error(
-        `Failed to fetch package data for ${packageName}@${version}: ${error}`
-      );
-    }
+    resolve(JSON.parse(stdout.toString()));
   });
 }
 
@@ -114,6 +106,7 @@ class CustomPUrlFactory extends CDX.Factories.PackageUrlFactory {
 async function createSBom(packageName: string) {
   const { stdout } = spawnSync('pnpm', ['ls', '--json', '--long'], {
     cwd: path.join(__dirname, 'node_modules', packageName),
+    encoding: 'utf-8',
     shell: true,
   });
 
@@ -122,6 +115,7 @@ async function createSBom(packageName: string) {
   if (packageName === '@siemens/ix-angular') {
     const { stdout } = spawnSync('pnpm', ['ls', '--json', '--long'], {
       cwd: path.join(npmJson.path, '..'),
+      encoding: 'utf-8',
       shell: true,
     });
     const [npmJsonParent] = JSON.parse(stdout.toString());
@@ -132,10 +126,6 @@ async function createSBom(packageName: string) {
     npmJson = await handleCoreLibraryDependencies(npmJson);
   }
 
-  if (packageName === '@siemens/ix-brand-theme') {
-    npmJson = await handleCoreLibraryDependencies(npmJson);
-  }
-
   if (packageName === '@siemens/ix-icons') {
     npmJson = await handleIconsLibraryDependencies(npmJson);
   }
@@ -254,10 +244,14 @@ async function createSBom(packageName: string) {
 }
 
 async function main() {
-  const { dependencies } = getPkg(path.join(__dirname, 'package.json'));
-  const packages = Object.keys(dependencies);
-
-  console.log('Creating SBOMs for packages:', packages);
+  const packages = [
+    '@siemens/ix',
+    '@siemens/ix-react',
+    '@siemens/ix-angular',
+    '@siemens/ix-vue',
+    '@siemens/ix-echarts',
+    '@siemens/ix-aggrid',
+  ];
 
   const sbomPromises = packages.map(async (pkg) => {
     const { version } = getPkg(

From d5532becf8c6699439bb3d948fc3c2db7235ebcd Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Mon, 6 Oct 2025 20:16:08 +0530
Subject: [PATCH 11/14] Create-sbom fail

---
 tooling/oss-clearing/create-sbom.ts | 46 ++++++++++++++++-------------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/tooling/oss-clearing/create-sbom.ts b/tooling/oss-clearing/create-sbom.ts
index 410bf9dbaf6..e9288a605ee 100644
--- a/tooling/oss-clearing/create-sbom.ts
+++ b/tooling/oss-clearing/create-sbom.ts
@@ -24,6 +24,7 @@ function getPkg(pkgPath: string) {
 }
 
 function modifyDependenciesByIxMetaProperty(pnpmJson: any, pkg: any) {
+  const storeOriginalDependencies = { ...pnpmJson['dependencies'] };
   pnpmJson['dependencies'] = pnpmJson['devDependencies'];
   Object.keys(pnpmJson['dependencies']).forEach((key) => {
     if (!pkg['siemensix']['dependencies'].includes(key)) {
@@ -31,6 +32,11 @@ function modifyDependenciesByIxMetaProperty(pnpmJson: any, pkg: any) {
     }
   });
 
+  pnpmJson['dependencies'] = {
+    ...storeOriginalDependencies,
+    ...pnpmJson['dependencies'],
+  };
+
   return pnpmJson;
 }
 
@@ -69,17 +75,19 @@ async function resolveComponentData(
   version: string
 ): Promise<any> {
   return new Promise((resolve) => {
-    const { stdout } = spawnSync('pnpm', [
-      'v',
-      '--json',
-      '--long',
-      `${packageName}@${version}`,
-    ], {
-      encoding: 'utf-8',
-      shell: true,
-    });
+    const { stdout } = spawnSync(
+      'pnpm',
+      ['v', '--json', '--long', `${packageName}@${version}`],
+      { shell: true }
+    );
 
-    resolve(JSON.parse(stdout.toString()));
+    try {
+      resolve(JSON.parse(stdout.toString()));
+    } catch (error) {
+      throw new Error(
+        `Failed to fetch package data for ${packageName}@${version}: ${error}`
+      );
+    }
   });
 }
 
@@ -106,7 +114,6 @@ class CustomPUrlFactory extends CDX.Factories.PackageUrlFactory {
 async function createSBom(packageName: string) {
   const { stdout } = spawnSync('pnpm', ['ls', '--json', '--long'], {
     cwd: path.join(__dirname, 'node_modules', packageName),
-    encoding: 'utf-8',
     shell: true,
   });
 
@@ -115,7 +122,6 @@ async function createSBom(packageName: string) {
   if (packageName === '@siemens/ix-angular') {
     const { stdout } = spawnSync('pnpm', ['ls', '--json', '--long'], {
       cwd: path.join(npmJson.path, '..'),
-      encoding: 'utf-8',
       shell: true,
     });
     const [npmJsonParent] = JSON.parse(stdout.toString());
@@ -126,6 +132,10 @@ async function createSBom(packageName: string) {
     npmJson = await handleCoreLibraryDependencies(npmJson);
   }
 
+  if (packageName === '@siemens/ix-brand-theme') {
+    npmJson = await handleCoreLibraryDependencies(npmJson);
+  }
+
   if (packageName === '@siemens/ix-icons') {
     npmJson = await handleIconsLibraryDependencies(npmJson);
   }
@@ -244,14 +254,10 @@ async function createSBom(packageName: string) {
 }
 
 async function main() {
-  const packages = [
-    '@siemens/ix',
-    '@siemens/ix-react',
-    '@siemens/ix-angular',
-    '@siemens/ix-vue',
-    '@siemens/ix-echarts',
-    '@siemens/ix-aggrid',
-  ];
+  const { dependencies } = getPkg(path.join(__dirname, 'package.json'));
+  const packages = Object.keys(dependencies);
+
+  console.log('Creating SBOMs for packages:', packages);
 
   const sbomPromises = packages.map(async (pkg) => {
     const { version } = getPkg(

From 5a5f0ae8d5947783960404a897f832480693797a Mon Sep 17 00:00:00 2001
From: 1307-Dev <devdarsh.panth@siemens.com>
Date: Thu, 16 Oct 2025 12:38:06 +0530
Subject: [PATCH 12/14] added closemodal function imports as well

---
 packages/react/src/modal/index.ts | 10 ++++++++++
 packages/vue/src/modal/index.ts   | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts
index 6afc242f867..a77fdc833f6 100644
--- a/packages/react/src/modal/index.ts
+++ b/packages/react/src/modal/index.ts
@@ -11,6 +11,7 @@ import {
   ModalConfig as IxModalConfig,
   showModal as _showModal,
   dismissModal as _dismissModal,
+  closeModal as _closeModal,
   ModalInstance as IxModalInstance,
 } from '@siemens/ix';
 export * from './modal';
@@ -30,3 +31,12 @@ export function dismissModal(modalInstance: IxModalInstance) {
     _dismissModal(modalInstance.htmlElement);
   }
 }
+
+export function closeModal<T = any>(
+  modalInstance: IxModalInstance,
+  reason?: T
+) {
+  if (modalInstance?.htmlElement) {
+    _closeModal(modalInstance.htmlElement, reason);
+  }
+}
diff --git a/packages/vue/src/modal/index.ts b/packages/vue/src/modal/index.ts
index e452da1106b..18f5bf6511a 100644
--- a/packages/vue/src/modal/index.ts
+++ b/packages/vue/src/modal/index.ts
@@ -2,6 +2,7 @@ import {
   ModalConfig as IxModalConfig,
   showModal as _showModal,
   dismissModal as _dismissModal,
+  closeModal as _closeModal,
   ModalInstance as IxModalInstance,
 } from '@siemens/ix';
 import { VNode } from 'vue';
@@ -26,3 +27,12 @@ export function dismissModal(modalInstance: IxModalInstance) {
     _dismissModal(modalInstance.htmlElement);
   }
 }
+
+export function closeModal<T = any>(
+  modalInstance: IxModalInstance,
+  reason?: T
+) {
+  if (modalInstance?.htmlElement) {
+    _closeModal(modalInstance.htmlElement, reason);
+  }
+}

From 00a3ce11c667472cf6160347785881fff4ddc7aa Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@siemens.com>
Date: Mon, 10 Nov 2025 16:48:17 +0100
Subject: [PATCH 13/14] add overrite keyboard to server

---
 .../src/preview-examples/modal-close.ts                    | 7 ++++---
 packages/angular/src/providers/modal/modal.service.ts      | 4 ++--
 packages/angular/standalone/src/providers/modal.ts         | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
index ba77b2c80d0..45dee43857c 100644
--- a/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { IxButton } from '@siemens/ix-angular/standalone';
 
-import { ModalService } from '@siemens/ix-angular';
+import { ModalService } from '@siemens/ix-angular/standalone';
 import ModalByInstanceExample from './modal-by-instance-content';
 
 @Component({
   standalone: true,
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ModalService],
   template:
     '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
 })
 export default class ModalClose {
-  constructor(private readonly modalService: ModalService) {}
+  private modalService = inject(ModalService);
 
   async openModal() {
     const modalInstance = await this.modalService.open({
diff --git a/packages/angular/src/providers/modal/modal.service.ts b/packages/angular/src/providers/modal/modal.service.ts
index 6ba79396f92..1d7430a5190 100644
--- a/packages/angular/src/providers/modal/modal.service.ts
+++ b/packages/angular/src/providers/modal/modal.service.ts
@@ -36,13 +36,13 @@ export class ModalService extends BaseModalService {
     super(appRef, componentFactoryResolver, injector);
   }
 
-  public open<TData = any, TReason = any>(
+  public override open<TData = any, TReason = any>(
     config: ModalConfig<TData>
   ): Promise<ModalInstance<TReason>> {
     return super.open(config);
   }
 
-  public close<TReason = any>(
+  public override close<TReason = any>(
     instance: ModalInstance<TReason>,
     reason?: TReason
   ): void {
diff --git a/packages/angular/standalone/src/providers/modal.ts b/packages/angular/standalone/src/providers/modal.ts
index 2df8450e326..93f8ad7f312 100644
--- a/packages/angular/standalone/src/providers/modal.ts
+++ b/packages/angular/standalone/src/providers/modal.ts
@@ -31,14 +31,14 @@ export class ModalService extends BaseModalService {
     super(appRef, componentFactoryResolver, injector);
   }
 
-  public open<TData = any, TReason = any>(
+  public override open<TData = any, TReason = any>(
     config: ModalConfig<TData>
   ): Promise<ModalInstance<TReason>> {
     defineCustomElement();
     return super.open(config);
   }
 
-  public close<TReason = any>(
+  public override close<TReason = any>(
     instance: ModalInstance<TReason>,
     reason?: TReason
   ): void {

From 1ae11b8eb04d001e195eae2affe9e71e17467152 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@siemens.com>
Date: Mon, 10 Nov 2025 16:57:53 +0100
Subject: [PATCH 14/14] align examples

---
 .../src/preview-examples/modal-close.html              |  3 +++
 .../src/preview-examples/modal-close.ts                |  4 +---
 .../src/preview-examples/modal-close.html              |  3 +++
 .../src/preview-examples/modal-close.ts                |  3 +--
 .../src/preview-examples/modal-close.html              | 10 +++++-----
 .../src/preview-examples/modal-close.tsx               |  8 ++------
 .../vue-test-app/src/preview-examples/modal-close.vue  |  4 ++--
 7 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 packages/angular-standalone-test-app/src/preview-examples/modal-close.html
 create mode 100644 packages/angular-test-app/src/preview-examples/modal-close.html

diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close.html b/packages/angular-standalone-test-app/src/preview-examples/modal-close.html
new file mode 100644
index 00000000000..64b10c48822
--- /dev/null
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close.html
@@ -0,0 +1,3 @@
+<ix-button variant="secondary" (click)="openModal()">
+  Show modal (auto-dismiss)
+</ix-button>
diff --git a/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
index 45dee43857c..eabd5d5952e 100644
--- a/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
+++ b/packages/angular-standalone-test-app/src/preview-examples/modal-close.ts
@@ -14,12 +14,10 @@ import { ModalService } from '@siemens/ix-angular/standalone';
 import ModalByInstanceExample from './modal-by-instance-content';
 
 @Component({
-  standalone: true,
   selector: 'app-example',
   imports: [IxButton],
   providers: [ModalService],
-  template:
-    '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
+  templateUrl: './modal-close.html',
 })
 export default class ModalClose {
   private modalService = inject(ModalService);
diff --git a/packages/angular-test-app/src/preview-examples/modal-close.html b/packages/angular-test-app/src/preview-examples/modal-close.html
new file mode 100644
index 00000000000..64b10c48822
--- /dev/null
+++ b/packages/angular-test-app/src/preview-examples/modal-close.html
@@ -0,0 +1,3 @@
+<ix-button variant="secondary" (click)="openModal()">
+  Show modal (auto-dismiss)
+</ix-button>
diff --git a/packages/angular-test-app/src/preview-examples/modal-close.ts b/packages/angular-test-app/src/preview-examples/modal-close.ts
index 4c2199731ea..e204b1b9b37 100644
--- a/packages/angular-test-app/src/preview-examples/modal-close.ts
+++ b/packages/angular-test-app/src/preview-examples/modal-close.ts
@@ -14,8 +14,7 @@ import ModalByInstanceExample from './modal-by-instance-content';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template:
-    '<ix-button (click)="openModal()">Show modal (auto-dismiss)</ix-button>',
+  templateUrl: './modal-close.html',
 })
 export default class ModalClose {
   constructor(private readonly modalService: ModalService) {}
diff --git a/packages/html-test-app/src/preview-examples/modal-close.html b/packages/html-test-app/src/preview-examples/modal-close.html
index a15a597fb24..7093520205b 100644
--- a/packages/html-test-app/src/preview-examples/modal-close.html
+++ b/packages/html-test-app/src/preview-examples/modal-close.html
@@ -20,7 +20,7 @@
       <ix-modal-header>Message headline</ix-modal-header>
       <ix-modal-content>Message text lorem ipsum</ix-modal-content>
       <ix-modal-footer>
-        <ix-button outline data-cancel>Cancel</ix-button>
+        <ix-button variant="secondary" data-cancel>Cancel</ix-button>
         <ix-button data-okay>OK</ix-button>
       </ix-modal-footer>
     </template>
@@ -33,18 +33,18 @@
         window.customElements.define(
           name,
           class extends HTMLElement {
-            isInitalRender = false;
+            isInitialRender = false;
 
             constructor() {
               super();
             }
 
             connectedCallback() {
-              if (this.isInitalRender) {
+              if (this.isInitialRender) {
                 return;
               }
 
-              this.isInitalRender = true;
+              this.isInitialRender = true;
               this.firstRender();
             }
 
@@ -81,7 +81,7 @@
         button.addEventListener('click', async () => {
           const customModal = document.createElement(exampleModalName);
 
-          const modal = await showModal({
+          await showModal({
             content: customModal,
           });
 
diff --git a/packages/react-test-app/src/preview-examples/modal-close.tsx b/packages/react-test-app/src/preview-examples/modal-close.tsx
index eb94dc301ac..2f9328a8e0b 100644
--- a/packages/react-test-app/src/preview-examples/modal-close.tsx
+++ b/packages/react-test-app/src/preview-examples/modal-close.tsx
@@ -36,7 +36,7 @@ function CustomModal() {
       </IxModalHeader>
       <IxModalContent>Message text lorem ipsum</IxModalContent>
       <IxModalFooter>
-        <IxButton outline onClick={() => dismiss()}>
+        <IxButton variant="secondary" onClick={() => dismiss()}>
           Cancel
         </IxButton>
         <IxButton onClick={() => close()}>OK</IxButton>
@@ -55,9 +55,5 @@ export default () => {
     }, 5000);
   }
 
-  return (
-    <>
-      <IxButton onClick={show}>Show modal (auto-dismiss)</IxButton>
-    </>
-  );
+  return <IxButton onClick={show}>Show modal (auto-dismiss)</IxButton>;
 };
diff --git a/packages/vue-test-app/src/preview-examples/modal-close.vue b/packages/vue-test-app/src/preview-examples/modal-close.vue
index bdec6f3e466..4f1a3d62fb8 100644
--- a/packages/vue-test-app/src/preview-examples/modal-close.vue
+++ b/packages/vue-test-app/src/preview-examples/modal-close.vue
@@ -14,7 +14,7 @@ import {
   IxModalContent,
   IxModalFooter,
   Modal,
-  ModalSlotProps,
+  type ModalSlotProps,
   showModal,
   dismissModal,
 } from '@siemens/ix-vue';
@@ -27,7 +27,7 @@ function show() {
           <IxModalHeader>Message headline</IxModalHeader>,
           <IxModalContent>Message text lorem ipsum</IxModalContent>,
           <IxModalFooter>
-            <IxButton outline onClick={() => dismissModal()}>
+            <IxButton variant="secondary" onClick={() => dismissModal()}>
               Cancel
             </IxButton>
             <IxButton onClick={() => closeModal()}>OK</IxButton>