npm - @siemens/ix-docs - Versions diffs - 4.3.0 → 5.0.0 - Mend

@siemens/ix-docs 4.3.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2698) hide show

package/build/docs/autogenerated/prompt/ix-button/readme.md CHANGED Viewed

@@ -3,33 +3,33 @@
 ## HTML Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button danger ghost example</title>
-    <link rel="stylesheet" href="./button-danger-ghost.css" />
+    <title>Button danger primary example</title>
+    <link rel="stylesheet" href="./button-danger-primary.css" />
   </head>
   <body>
-    <ix-button variant="danger-tertiary"> Button </ix-button>
-    <ix-button disabled variant="danger-tertiary"> Button </ix-button>
+    <ix-button variant="danger-primary"> Button </ix-button>
+    <ix-button disabled variant="danger-primary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button danger outline example</title>
-    <link rel="stylesheet" href="./button-danger-outline.css" />
+    <title>Button danger secondary example</title>
+    <link rel="stylesheet" href="./button-danger-secondary.css" />
   </head>
   <body>
     <ix-button variant="danger-secondary"> Button </ix-button>
@@ -39,87 +39,133 @@
 </html>
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button danger example</title>
-    <link rel="stylesheet" href="./button-danger.css" />
+    <title>Button danger tertiary example</title>
+    <link rel="stylesheet" href="./button-danger-tertiary.css" />
   </head>
   <body>
-    <ix-button variant="danger-primary"> Button </ix-button>
-    <ix-button disabled variant="danger-primary"> Button </ix-button>
+    <ix-button variant="danger-tertiary"> Button </ix-button>
+    <ix-button disabled variant="danger-tertiary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-ghost
+### Example: button-group
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button ghost example</title>
-    <link rel="stylesheet" href="./button-ghost.css" />
+    <title>Button group example</title>
   </head>
   <body>
-    <ix-button variant="tertiary"> Button </ix-button>
-    <ix-button variant="tertiary" disabled> Button </ix-button>
+    <div class="ix-button-group">
+      <ix-button variant="subtle-secondary">Button 1</ix-button>
+      <ix-button>Button 2</ix-button>
+      <ix-button variant="subtle-secondary">Button 3</ix-button>
+      <ix-button variant="subtle-secondary">Button 4</ix-button>
+    </div>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button grey ghost example</title>
-    <link rel="stylesheet" href="./button-grey-ghost.css" />
+    <title>Button loading example</title>
+    <link rel="stylesheet" href="./button-loading.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconStar } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconStar,
+      });
+    </script>
   </head>
   <body>
-    <ix-button variant="subtle-tertiary"> Button </ix-button>
-    <ix-button disabled variant="subtle-tertiary"> Button </ix-button>
+    <script>
+      function toggle(obj) {
+        obj.loading = true;
+        setTimeout(() => {
+          obj.loading = false;
+        }, 2500);
+      }
+    </script>
+    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
+    <ix-button variant="subtle-primary" onclick="toggle(this)" icon="star">
+      Button
+    </ix-button>
+    <ix-button
+      variant="subtle-primary"
+      onclick="toggle(this)"
+      icon="star"
+      aria-label="Star"
+    ></ix-button>
+    <ix-icon-button
+      variant="subtle-primary"
+      onclick="toggle(this)"
+      icon="star"
+      aria-label="Toggle loading"
+    >
+    </ix-icon-button>
+    <ix-button variant="subtle-primary" loading> Button </ix-button>
+    <ix-icon-button
+      variant="subtle-primary"
+      loading
+      icon="star"
+      aria-label="Loading action"
+    ></ix-icon-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-grey-secondary
+### Example: button-secondary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button grey secondary example</title>
-    <link rel="stylesheet" href="./button-grey-secondary.css" />
+    <title>Button secondary example</title>
+    <link rel="stylesheet" href="./button-secondary.css" />
   </head>
   <body>
-    <ix-button variant="subtle-secondary"> Button </ix-button>
-    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
+    <ix-button variant="secondary"> Button </ix-button>
+    <ix-button variant="secondary" disabled> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-grey
+### Example: button-subtle-primary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button grey example</title>
-    <link rel="stylesheet" href="./button-grey.css" />
+    <title>Button subtle primary example</title>
+    <link rel="stylesheet" href="./button-subtle-primary.css" />
   </head>
   <body>
     <ix-button variant="subtle-primary"> Button </ix-button>
@@ -129,84 +175,55 @@
 </html>
 ```
-### Example: button-group
+### Example: button-subtle-secondary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button group example</title>
+    <title>Button subtle secondary example</title>
+    <link rel="stylesheet" href="./button-subtle-secondary.css" />
   </head>
   <body>
-    <div class="ix-button-group">
-      <ix-button variant="subtle-secondary">Button 1</ix-button>
-      <ix-button>Button 2</ix-button>
-      <ix-button variant="subtle-secondary">Button 3</ix-button>
-      <ix-button variant="subtle-secondary">Button 4</ix-button>
-    </div>
+    <ix-button variant="subtle-secondary"> Button </ix-button>
+    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-loading
+### Example: button-subtle-tertiary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button loading example</title>
-    <link rel="stylesheet" href="./button-loading.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconStar } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconStar,
-      });
-    </script>
+    <title>Button subtle tertiary example</title>
+    <link rel="stylesheet" href="./button-subtle-tertiary.css" />
   </head>
   <body>
-    <script>
-      function toggle(obj) {
-        obj.loading = true;
-        setTimeout(() => {
-          obj.loading = false;
-        }, 2500);
-      }
-    </script>
-    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
-    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
-    <ix-button variant="subtle-primary" onclick="toggle(this)" icon="star"> Button </ix-button>
-    <ix-icon-button variant="subtle-primary" onclick="toggle(this)" icon="star">
-    </ix-icon-button>
-    <ix-button variant="subtle-primary" loading> Button </ix-button>
-    <ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
+    <ix-button variant="subtle-tertiary"> Button </ix-button>
+    <ix-button disabled variant="subtle-tertiary"> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
 ```
-### Example: button-secondary
+### Example: button-tertiary
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button secondary example</title>
-    <link rel="stylesheet" href="./button-secondary.css" />
+    <title>Button tertiary example</title>
+    <link rel="stylesheet" href="./button-tertiary.css" />
   </head>
   <body>
-    <ix-button variant="subtle-primary"> Button </ix-button>
-    <ix-button variant="subtle-primary" disabled> Button </ix-button>
+    <ix-button variant="tertiary"> Button </ix-button>
+    <ix-button variant="tertiary" disabled> Button </ix-button>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
@@ -215,7 +232,7 @@
 ### Example: button-text-icon
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -247,7 +264,7 @@
 ### Example: button-with-link
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -288,15 +305,15 @@
         <ix-button href="https://siemens.com" variant="secondary"
           >Secondary Link</ix-button
         >
-        <ix-button href="https://siemens.com" variant="danger"
+        <ix-button href="https://siemens.com" variant="danger-primary"
           >Danger Link</ix-button
         >
       </div>
       <div style="margin-bottom: 1rem">
-        <h3>Outline and Ghost Links</h3>
-        <ix-button href="https://siemens.com" outline> Outline Link </ix-button>
-        <ix-button href="https://siemens.com" ghost> Ghost Link </ix-button>
+        <h3>Secondary and Tertiary Links</h3>
+        <ix-button href="https://siemens.com" variant="secondary"> Secondary Link </ix-button>
+        <ix-button href="https://siemens.com" variant="tertiary"> Tertiary Link </ix-button>
       </div>
       <div style="margin-bottom: 1rem">
@@ -336,7 +353,7 @@
 ### Example: buttons
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -354,7 +371,7 @@
 ### Example: content-header-with-slot
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -376,9 +393,9 @@
         header-subtitle="Subtitle"
       >
         <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
-        <ix-button ghost>Button1</ix-button>
-        <ix-button ghost>Button2</ix-button>
-        <ix-button ghost>Button3</ix-button>
+        <ix-button variant="tertiary">Button1</ix-button>
+        <ix-button variant="tertiary">Button2</ix-button>
+        <ix-button variant="tertiary">Button3</ix-button>
       </ix-content-header>
     </div>
@@ -390,7 +407,7 @@
 ### Example: content-header
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -411,77 +428,10 @@
 </html>
 ```
-### Example: drawer-full-height
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Drawer full height example</title>
-  </head>
-  <body>
-    <ix-drawer>
-      <span>Some content of drawer</span>
-    </ix-drawer>
-    <ix-button>Toggle drawer</ix-button>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-drawer');
-        const drawer = document.querySelector('ix-drawer');
-        drawer.fullHeight = true;
-        drawer.closeOnClickOutside = true;
-        const button = document.querySelector('ix-button');
-        button.addEventListener('click', () => {
-          drawer.show = !drawer.show;
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: drawer
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Drawer example</title>
-  </head>
-  <body>
-    <ix-drawer>
-      <span>Some content of drawer</span>
-    </ix-drawer>
-    <ix-button>Toggle drawer</ix-button>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-drawer');
-        const drawer = document.querySelector('ix-drawer');
-        drawer.fullHeight = false;
-        drawer.closeOnClickOutside = true;
-        const button = document.querySelector('ix-button');
-        button.addEventListener('click', () => {
-          drawer.show = !drawer.show;
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
 ### Example: dropdown-icon
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -515,7 +465,7 @@
 ### Example: dropdown-quick-actions
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -562,7 +512,7 @@
 ### Example: dropdown-submenu
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -601,7 +551,7 @@
 ### Example: dropdown
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -625,7 +575,7 @@
 ### Example: form-layout-auto
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -647,7 +597,7 @@
 ### Example: form-layout-grid
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -686,7 +636,7 @@
 ### Example: group-custom-entry
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -706,7 +656,7 @@
 ### Example: loading
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -721,16 +671,18 @@
       const btn = document.querySelector('ix-button');
       btn.addEventListener('click', () => {
         let count = 0;
-        const progress = showModalLoading('Loading 0/2');
-        const interval = setInterval(() => {
-          count++;
-          progress.update(`Loading ${count}/2`);
-          if (count === 2) {
-            progress.finish('Done');
-            clearInterval(interval);
-          }
-        }, 1000);
+        const progress$ = showModalLoading({ message: 'Loading 0/2' });
+        progress$.then((progress) => {
+          const interval = setInterval(() => {
+            count++;
+            progress.update(`Loading ${count}/2`);
+            if (count === 2) {
+              progress.finish('Done');
+              clearInterval(interval);
+            }
+          }, 1000);
+        });
       });
     </script>
     <script type="module" src="./init.js"></script>
@@ -741,7 +693,7 @@
 ### Example: message-bar-removal
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -793,7 +745,7 @@
 ### Example: message-bar
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -820,7 +772,7 @@
 ### Example: message
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -854,7 +806,7 @@
 ### Example: modal-close
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -945,7 +897,7 @@
 ### Example: modal-form-ix-button-submit
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1031,10 +983,67 @@
 </html>
 ```
-### Example: modal-sizes
+### Example: modal-non-blocking
 ```html
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal non-blocking example</title>
+  </head>
+  <body>
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button id="open">Show non-blocking modal</ix-button>
+    </div>
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+      document.getElementById('open').addEventListener('click', async () => {
+        const modal = document.createElement('ix-modal');
+        modal.isNonBlocking = true;
+        modal.innerHTML = `
+      <ix-modal-header>Message headline</ix-modal-header>
+      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+      <ix-modal-footer>
+        <ix-button variant="subtle-primary" data-cancel>Cancel</ix-button>
+        <ix-button data-okay autofocus>OK</ix-button>
+      </ix-modal-footer>
+    `;
+        const header = modal.querySelector('ix-modal-header');
+        header.addEventListener('closeClick', () =>
+          dismissModal(header, 'dismiss payload')
+        );
+        const cancelButton = modal.querySelector('[data-cancel]');
+        const okayButton = modal.querySelector('[data-okay]');
+        cancelButton.addEventListener('click', () =>
+          dismissModal(cancelButton, 'dismiss payload')
+        );
+        okayButton.addEventListener('click', () =>
+          closeModal(okayButton, 'close payload!')
+        );
+        await showModal({ content: modal });
+      });
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+### Example: modal-sizes
+```html
+<!DOCTYPE html>
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1127,7 +1136,7 @@
 ### Example: modal
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1214,7 +1223,7 @@
 ### Example: pane-layout
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1276,7 +1285,7 @@
 ### Example: pane
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1317,7 +1326,7 @@
 ### Example: theme-switcher
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1363,8 +1372,7 @@
       const toggleSystem = document.getElementById('system');
       setTimeout(() => {
-        themeSwitcher.setTheme('classic');
-        themeSwitcher.setVariant(selectedVariant);
+        themeSwitcher.setTheme('classic', selectedVariant);
       });
       for (const variant of variants) {
@@ -1399,7 +1407,7 @@
           return;
         }
-        themeSwitcher.setVariant(variant);
+        themeSwitcher.setColorSchema(variant);
         selectedVariant = variant;
       });
@@ -1408,9 +1416,9 @@
         useSystemTheme = checked;
         if (checked) {
-          themeSwitcher.setVariant();
+          themeSwitcher.setColorSchema('system');
         } else {
-          themeSwitcher.setVariant(selectedVariant);
+          themeSwitcher.setColorSchema(selectedVariant);
           themeSelect.value = selectedVariant;
         }
@@ -1428,7 +1436,7 @@
 ### Example: tile
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1485,7 +1493,7 @@
 ### Example: toast-custom
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1504,7 +1512,7 @@
     <ix-button id="toastMessageButton">
       Trigger toast with custom message
     </ix-button>
     <ix-button id="toastActionButton">
       Trigger toast with action button
     </ix-button>
@@ -1529,7 +1537,7 @@
             const template = document.getElementById('custom-toast-message');
             const templateContent = template.content.cloneNode(true);
             customModal.appendChild(templateContent);
             const customModalAction = document.createElement('div');
             const templateAction = document.getElementById('custom-toast-action');
             const templateContentAction = templateAction.content.cloneNode(true);
@@ -1541,7 +1549,7 @@
               type: 'success',
             });
           });
         document
           .getElementById('toastActionButton')
           .addEventListener('click', async () => {
@@ -1583,7 +1591,7 @@
 ### Example: toast-position
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1615,7 +1623,7 @@
 ### Example: toast
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1646,7 +1654,7 @@
 ### Example: tooltip-with-icon
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1679,7 +1687,7 @@
 ### Example: tooltip
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1709,7 +1717,7 @@
 ### Example: tree-custom
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1725,7 +1733,7 @@
     <div style="height: 8rem; width: 100%">
       <ix-button variant="tertiary" id="expand" style="margin-bottom: 2rem">Expand Tree</ix-button
       >
-      <ix-tree root="root" id="tree"></ix-tree>
+      <ix-tree root="root" id="tree" aria-label="Sample tree"></ix-tree>
     </div>
     <script>
@@ -1819,7 +1827,7 @@
 ### Example: validation-select
 ```html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-ix-theme="classic" data-ix-color-schema="system">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -1860,19 +1868,17 @@
 ## React Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 ```tsx
-import './button-danger-ghost.scoped.css';
+import './button-danger-primary.scoped.css';
 import { IxButton } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton variant="subtle-tertiary">
-        Button
-      </IxButton>
-      <IxButton disabled variant="subtle-tertiary">
+      <IxButton variant="danger-primary">Button</IxButton>
+      <IxButton disabled variant="danger-primary">
         Button
       </IxButton>
     </>
@@ -1880,9 +1886,9 @@ export default () => {
 };
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 ```tsx
-import './button-danger-outline.scoped.css';
+import './button-danger-secondary.scoped.css';
 import { IxButton } from '@siemens/ix-react';
@@ -1900,37 +1906,19 @@ export default () => {
 };
 ```
-### Example: button-danger
-```tsx
-import './button-danger.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="danger-primary">Button</IxButton>
-      <IxButton disabled variant="danger-primary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-ghost
+### Example: button-danger-tertiary
 ```tsx
-import './button-ghost.scoped.css';
+import './button-danger-tertiary.scoped.css';
 import { IxButton } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton variant="tertiary">
+      <IxButton variant="danger-tertiary">
         Button
       </IxButton>
-      <IxButton variant="tertiary" disabled>
+      <IxButton disabled variant="danger-tertiary">
         Button
       </IxButton>
     </>
@@ -1938,65 +1926,7 @@ export default () => {
 };
 ```
-### Example: button-grey-ghost
-```tsx
-import './button-grey-ghost.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="subtle-tertiary">
-        Button
-      </IxButton>
-      <IxButton disabled variant="subtle-tertiary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-grey-secondary
-```tsx
-import './button-grey-secondary.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="subtle-secondary">
-        Button
-      </IxButton>
-      <IxButton disabled variant="subtle-secondary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-grey
-```tsx
-import './button-grey.scoped.css';
-import { IxButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton variant="subtle-primary">Button</IxButton>
-      <IxButton disabled variant="subtle-primary">
-        Button
-      </IxButton>
-    </>
-  );
-};
-```
-### Example: button-group
+### Example: button-group
 ```tsx
 import { IxButton } from '@siemens/ix-react';
@@ -2022,9 +1952,11 @@ export default () => {
   const [toggle, setToggle] = useState(false);
   const [toggle2, setToggle2] = useState(false);
   const [toggle3, setToggle3] = useState(false);
+  const [toggle4, setToggle4] = useState(false);
   return (
     <>
       <IxButton
+        variant="subtle-primary"
         onClick={() => {
           setToggle(true);
           setTimeout(() => {
@@ -2032,12 +1964,12 @@ export default () => {
           }, 2500);
         }}
         loading={toggle}
-        outline
       >
         Button
       </IxButton>
       <IxButton
+        variant="subtle-primary"
         onClick={() => {
           setToggle2(true);
           setTimeout(() => {
@@ -2045,13 +1977,13 @@ export default () => {
           }, 2500);
         }}
         loading={toggle2}
-        outline
         icon={iconStar}
       >
         Button
       </IxButton>
       <IxButton
+        variant="subtle-primary"
         onClick={() => {
           setToggle3(true);
           setTimeout(() => {
@@ -2059,25 +1991,31 @@ export default () => {
           }, 2500);
         }}
         loading={toggle3}
-        outline
         icon={iconStar}
+        aria-label="Star"
       ></IxButton>
       <IxIconButton
+        variant="subtle-primary"
         onClick={() => {
-          setToggle(true);
+          setToggle4(true);
           setTimeout(() => {
-            setToggle(false);
+            setToggle4(false);
           }, 2500);
         }}
-        loading={toggle}
-        outline
+        loading={toggle4}
         icon={iconStar}
+        aria-label="Toggle loading"
       ></IxIconButton>
       <IxButton variant="subtle-primary" loading>
         Button
       </IxButton>
-      <IxIconButton variant="subtle-primary" loading></IxIconButton>
+      <IxIconButton
+        variant="subtle-primary"
+        loading
+        icon={iconStar}
+        aria-label="Loading action"
+      ></IxIconButton>
     </>
   );
 };
@@ -2092,10 +2030,88 @@ import { IxButton } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton variant="subtle-primary">
+      <IxButton variant="secondary">
+        Button
+      </IxButton>
+      <IxButton variant="secondary" disabled>
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-subtle-primary
+```tsx
+import './button-subtle-primary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="subtle-primary">Button</IxButton>
+      <IxButton disabled variant="subtle-primary">
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-subtle-secondary
+```tsx
+import './button-subtle-secondary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="subtle-secondary">
+        Button
+      </IxButton>
+      <IxButton disabled variant="subtle-secondary">
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-subtle-tertiary
+```tsx
+import './button-subtle-tertiary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="subtle-tertiary">
+        Button
+      </IxButton>
+      <IxButton disabled variant="subtle-tertiary">
+        Button
+      </IxButton>
+    </>
+  );
+};
+```
+### Example: button-tertiary
+```tsx
+import './button-tertiary.scoped.css';
+import { IxButton } from '@siemens/ix-react';
+export default () => {
+  return (
+    <>
+      <IxButton variant="tertiary">
         Button
       </IxButton>
-      <IxButton variant="subtle-primary" disabled>
+      <IxButton variant="tertiary" disabled>
         Button
       </IxButton>
     </>
@@ -2164,18 +2180,18 @@ export const ButtonWithLink: React.FC = () => {
         <IxButton href="https://siemens.com" variant="secondary">
           Secondary Link
         </IxButton>
-        <IxButton href="https://siemens.com" variant="danger">
+        <IxButton href="https://siemens.com" variant="danger-primary">
           Danger Link
         </IxButton>
       </div>
       <div style={{ marginBottom: '1rem' }}>
-        <h3>Outline and Ghost Links</h3>
-        <IxButton href="https://siemens.com" outline>
-          Outline Link
+        <h3>Secondary and Tertiary Links</h3>
+        <IxButton href="https://siemens.com" variant="secondary">
+          Secondary Link
         </IxButton>
-        <IxButton href="https://siemens.com" ghost>
-          Ghost Link
+        <IxButton href="https://siemens.com" variant="tertiary">
+          Tertiary Link
         </IxButton>
       </div>
@@ -2222,9 +2238,7 @@ export default () => {
   return (
     <>
       <IxButton>Button</IxButton>
-      <IxButton disabled>
-        Button
-      </IxButton>
+      <IxButton disabled>Button</IxButton>
     </>
   );
 };
@@ -2246,9 +2260,9 @@ export default () => {
       <IxPill slot="header" icon={iconInfo} className="margin-top">
         Label
       </IxPill>
-      <IxButton ghost>Button1</IxButton>
-      <IxButton ghost>Button2</IxButton>
-      <IxButton ghost>Button3</IxButton>
+      <IxButton variant='tertiary'>Button1</IxButton>
+      <IxButton variant='tertiary'>Button2</IxButton>
+      <IxButton variant='tertiary'>Button3</IxButton>
     </IxContentHeader>
   );
 };
@@ -2273,53 +2287,6 @@ export default () => {
 };
 ```
-### Example: drawer-full-height
-```tsx
-import { IxButton, IxDrawer } from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <IxDrawer
-        closeOnClickOutside={true}
-        fullHeight={true}
-        show={show}
-        onDrawerClose={() => setShow(false)}
-      >
-        <span>Some content of drawer</span>
-      </IxDrawer>
-      <IxButton onClick={() => setShow(!show)}>Toggle drawer</IxButton>
-    </>
-  );
-};
-```
-### Example: drawer
-```tsx
-import { IxButton, IxDrawer } from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <IxDrawer
-        closeOnClickOutside={true}
-        show={show}
-        onDrawerClose={() => setShow(false)}
-      >
-        <span>Some content of drawer</span>
-      </IxDrawer>
-      <IxButton onClick={() => setShow(!show)}>Toggle drawer</IxButton>
-    </>
-  );
-};
-```
 ### Example: dropdown-icon
 ```tsx
 import { iconBulb, iconDocument, iconStar } from '@siemens/ix-icons/icons';
@@ -2519,9 +2486,11 @@ import { ModalLoadingContext } from '@siemens/ix';
 import { IxButton, showModalLoading } from '@siemens/ix-react';
 export default () => {
-  const startLoading = () => {
+  const startLoading = async () => {
     let count = 0;
-    const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext = await showModalLoading({
+      message: 'Loading 0/2',
+    });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -2736,6 +2705,69 @@ export default () => {
 };
 ```
+### Example: modal-non-blocking
+```tsx
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  IxTypography,
+  Modal,
+  ModalRef,
+  showModal,
+} 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} isNonBlocking>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="subtle-primary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()} autoFocus>
+          OK
+        </IxButton>
+      </IxModalFooter>
+    </Modal>
+  );
+}
+export default function ModalNonBlockingPreview() {
+  async function show() {
+    await showModal({
+      content: <CustomModal />,
+    });
+  }
+  return (
+    <div>
+      <div style={{ padding: '1rem' }}>
+        <IxTypography format="body" textColor="std">
+          Content behind the dialog
+        </IxTypography>
+        <IxButton id="behind">Behind control</IxButton>
+      </div>
+      <IxButton onClick={show}>Show non-blocking modal</IxButton>
+    </div>
+  );
+}
+```
 ### Example: modal-sizes
 ```tsx
 import './modal-sizes.scoped.css';
@@ -2811,7 +2843,9 @@ function CustomModal() {
         <IxButton variant="subtle-primary" onClick={() => dismiss()}>
           Cancel
         </IxButton>
-        <IxButton onClick={() => close()}>OK</IxButton>
+        <IxButton autoFocus onClick={() => close()}>
+          OK
+        </IxButton>
       </IxModalFooter>
     </Modal>
   );
@@ -2949,8 +2983,7 @@ export default () => {
   const [useSystemTheme, setUseSystemTheme] = useState(false);
   useEffect(() => {
-    themeSwitcher.setTheme('classic');
-    themeSwitcher.setVariant(selectedVariant);
+    themeSwitcher.setTheme('classic', selectedVariant);
   }, []);
   const onValueChange = (event: CustomEvent<string | string[]>) => {
@@ -2960,7 +2993,7 @@ export default () => {
     const newVariant = event.detail as ThemeVariant;
-    themeSwitcher.setVariant(newVariant);
+    themeSwitcher.setColorSchema(newVariant);
     setSelectedVariant(newVariant);
   };
@@ -2982,9 +3015,9 @@ export default () => {
     setUseSystemTheme(checked);
     if (checked) {
-      themeSwitcher.setVariant();
+      themeSwitcher.setColorSchema('system');
     } else {
-      themeSwitcher.setVariant(selectedVariant);
+      themeSwitcher.setColorSchema(selectedVariant);
     }
   };
@@ -3319,6 +3352,7 @@ export default () => {
         root="root"
         model={model}
         context={context}
+        aria-label="Sample tree"
         onContextChange={({ detail }) => {
           setContext(detail);
         }}
@@ -3400,27 +3434,27 @@ export default function () {
 ## Vue Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-danger-ghost.css"></style>
+<style scoped src="./button-danger-primary.css"></style>
 <template>
-  <IxButton variant="danger-tertiary"> Button </IxButton>
-  <IxButton disabled variant="danger-tertiary"> Button </IxButton>
+  <IxButton variant="danger-primary"> Button </IxButton>
+  <IxButton disabled variant="danger-primary"> Button </IxButton>
 </template>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-danger-outline.css"></style>
+<style scoped src="./button-danger-secondary.css"></style>
 <template>
   <IxButton variant="danger-secondary"> Button </IxButton>
@@ -3428,142 +3462,170 @@ import { IxButton } from '@siemens/ix-vue';
 </template>
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-danger.css"></style>
+<style scoped src="./button-danger-tertiary.css"></style>
 <template>
-  <IxButton variant="danger-primary"> Button </IxButton>
-  <IxButton disabled variant="danger-primary"> Button </IxButton>
+  <IxButton variant="danger-tertiary"> Button </IxButton>
+  <IxButton disabled variant="danger-tertiary"> Button </IxButton>
 </template>
 ```
-### Example: button-ghost
+### Example: button-group
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-ghost.css"></style>
 <template>
-  <IxButton variant="tertiary"> Button </IxButton>
-  <IxButton variant="tertiary" disabled> Button </IxButton>
+  <div class="ix-button-group">
+    <IxButton variant="subtle-secondary"> Button 1 </IxButton>
+    <IxButton> Button 2 </IxButton>
+    <IxButton variant="subtle-secondary"> Button 3 </IxButton>
+    <IxButton variant="subtle-secondary"> Button 4 </IxButton>
+  </div>
 </template>
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 ```tsx
 <script setup lang="ts">
-import { IxButton } from '@siemens/ix-vue';
-</script>
+import { iconStar } from '@siemens/ix-icons/icons';
+import { IxButton, IxIconButton } from '@siemens/ix-vue';
+import { ref } from 'vue';
-<style scoped src="./button-grey-ghost.css"></style>
+let toggle1 = ref(false);
+let toggle2 = ref(false);
+let toggle3 = ref(false);
+let toggle4 = ref(false);
-<template>
-  <IxButton variant="subtle-tertiary"> Button </IxButton>
-  <IxButton disabled variant="subtle-tertiary"> Button </IxButton>
-</template>
-```
+function load(value: string) {
+  if (value === '1') toggle1.value = true;
+  if (value === '2') toggle2.value = true;
+  if (value === '3') toggle3.value = true;
+  if (value === '4') toggle4.value = true;
-### Example: button-grey-secondary
-```tsx
-<script setup lang="ts">
-import { IxButton } from '@siemens/ix-vue';
+  setTimeout(() => {
+    if (value === '1') toggle1.value = false;
+    if (value === '2') toggle2.value = false;
+    if (value === '3') toggle3.value = false;
+    if (value === '4') toggle4.value = false;
+  }, 2500);
+}
 </script>
-<style scoped src="./button-grey-secondary.css"></style>
+<style scoped src="./button-loading.css"></style>
 <template>
-  <IxButton variant="subtle-secondary"> Button </IxButton>
-  <IxButton disabled variant="subtle-secondary"> Button </IxButton>
-</template>
-```
+  <div>
+    <IxButton variant="subtle-primary" :loading="toggle1" @click="load('1')">
+      Button
+    </IxButton>
+    <IxButton
+      variant="subtle-primary"
+      :loading="toggle2"
+      @click="load('2')"
+      :icon="iconStar"
+    >
+      Button
+    </IxButton>
+    <IxButton
+      variant="subtle-primary"
+      :loading="toggle3"
+      @click="load('3')"
+      :icon="iconStar"
+      aria-label="Star"
+    ></IxButton>
+    <IxIconButton
+      variant="subtle-primary"
+      :loading="toggle4"
+      @click="load('4')"
+      :icon="iconStar"
+      aria-label="Toggle loading"
+    ></IxIconButton>
+    <IxButton variant="subtle-primary" loading> Button </IxButton>
+    <IxIconButton
+      variant="subtle-primary"
+      loading
+      :icon="iconStar"
+      aria-label="Loading action"
+    ></IxIconButton>
+  </div>
+</template>
+```
-### Example: button-grey
+### Example: button-secondary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-grey.css"></style>
+<style scoped src="./button-secondary.css"></style>
 <template>
-  <IxButton variant="subtle-primary"> Button </IxButton>
-  <IxButton disabled variant="subtle-primary"> Button </IxButton>
+  <IxButton variant="secondary"> Button </IxButton>
+  <IxButton variant="secondary" disabled> Button </IxButton>
 </template>
 ```
-### Example: button-group
+### Example: button-subtle-primary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
+<style scoped src="./button-subtle-primary.css"></style>
 <template>
-  <div class="ix-button-group">
-    <IxButton variant="subtle-secondary"> Button 1 </IxButton>
-    <IxButton> Button 2 </IxButton>
-    <IxButton variant="subtle-secondary"> Button 3 </IxButton>
-    <IxButton variant="subtle-secondary"> Button 4 </IxButton>
-  </div>
+  <IxButton variant="subtle-primary"> Button </IxButton>
+  <IxButton disabled variant="subtle-primary"> Button </IxButton>
 </template>
 ```
-### Example: button-loading
+### Example: button-subtle-secondary
 ```tsx
 <script setup lang="ts">
-import { iconStar } from '@siemens/ix-icons/icons';
-import { IxButton, IxIconButton } from '@siemens/ix-vue';
-import { ref } from 'vue';
+import { IxButton } from '@siemens/ix-vue';
+</script>
-let toggle1 = ref(false);
-let toggle2 = ref(false);
-let toggle3 = ref(false);
+<style scoped src="./button-subtle-secondary.css"></style>
-function load(value: string) {
-  if (value === '1') toggle1.value = true;
-  if (value === '2') toggle2.value = true;
-  if (value === '3') toggle3.value = true;
+<template>
+  <IxButton variant="subtle-secondary"> Button </IxButton>
+  <IxButton disabled variant="subtle-secondary"> Button </IxButton>
+</template>
+```
-  setTimeout(() => {
-    if (value === '1') toggle1.value = false;
-    if (value === '2') toggle2.value = false;
-    if (value === '3') toggle3.value = false;
-  }, 2500);
-}
+### Example: button-subtle-tertiary
+```tsx
+<script setup lang="ts">
+import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-loading.css"></style>
+<style scoped src="./button-subtle-tertiary.css"></style>
 <template>
-  <div>
-    <IxButton variant="subtle-primary" :loading="toggle1" @click="load('1')"> Button </IxButton>
-    <IxButton variant="subtle-primary" :loading="toggle2" @click="load('2')" :icon="iconStar">
-      Button
-    </IxButton>
-    <IxIconButton variant="subtle-primary" :loading="toggle3" @click="load('3')" :icon="iconStar"></IxIconButton>
-    <IxButton variant="subtle-primary" loading> Button </IxButton>
-    <IxIconButton variant="subtle-primary" loading></IxIconButton>
-  </div>
+  <IxButton variant="subtle-tertiary"> Button </IxButton>
+  <IxButton disabled variant="subtle-tertiary"> Button </IxButton>
 </template>
 ```
-### Example: button-secondary
+### Example: button-tertiary
 ```tsx
 <script setup lang="ts">
 import { IxButton } from '@siemens/ix-vue';
 </script>
-<style scoped src="./button-secondary.css"></style>
+<style scoped src="./button-tertiary.css"></style>
 <template>
-  <IxButton variant="subtle-primary"> Button </IxButton>
-  <IxButton variant="subtle-primary" disabled> Button </IxButton>
+  <IxButton variant="tertiary"> Button </IxButton>
+  <IxButton variant="tertiary" disabled> Button </IxButton>
 </template>
 ```
@@ -3622,18 +3684,18 @@ addIcons({ iconHome, iconOpenExternal, iconInfo });
       <IxButton href="https://siemens.com" variant="secondary">
         Secondary Link
       </IxButton>
-      <IxButton href="https://siemens.com" variant="danger">
+      <IxButton href="https://siemens.com" variant="danger-primary">
         Danger Link
       </IxButton>
     </div>
     <div style="margin-bottom: 1rem;">
-      <h3>Outline and Ghost Links</h3>
-      <IxButton href="https://siemens.com" outline>
-        Outline Link
+      <h3>Secondary and Tertiary Links</h3>
+      <IxButton href="https://siemens.com" variant="secondary">
+        Secondary Link
       </IxButton>
-      <IxButton href="https://siemens.com" ghost>
-        Ghost Link
+      <IxButton href="https://siemens.com" variant="tertiary">
+        Tertiary Link
       </IxButton>
     </div>
@@ -3693,9 +3755,9 @@ import { iconInfo } from '@siemens/ix-icons/icons';
 <template>
   <IxContentHeader has-back-button header-title="Content title" header-subtitle="Subtitle">
     <IxPill slot="header" :icon="iconInfo" class="margin-top">Label</IxPill>
-    <IxButton ghost>Button1</IxButton>
-    <IxButton ghost>Button2</IxButton>
-    <IxButton ghost>Button3</IxButton>
+    <IxButton variant="tertiary">Button1</IxButton>
+    <IxButton variant="tertiary">Button2</IxButton>
+    <IxButton variant="tertiary">Button3</IxButton>
   </IxContentHeader>
 </template>
 ```
@@ -3719,45 +3781,6 @@ import { IxButton, IxContentHeader } from '@siemens/ix-vue';
 </template>
 ```
-### Example: drawer-full-height
-```tsx
-<script setup lang="ts">
-import { IxButton, IxDrawer } from '@siemens/ix-vue';
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-<template>
-  <IxDrawer
-    closeOnClickOutside
-    fullHeight
-    :show="show"
-    @drawerClose="show = false"
-  >
-    <span>Some content of drawer</span>
-  </IxDrawer>
-  <IxButton @click="show = !show">Toggle drawer</IxButton>
-</template>
-```
-### Example: drawer
-```tsx
-<script setup lang="ts">
-import { IxButton, IxDrawer } from '@siemens/ix-vue';
-import { ref } from 'vue';
-const show = ref(false);
-</script>
-<template>
-  <IxDrawer closeOnClickOutside :show="show" @drawerClose="show = false">
-    <span>Some content of drawer</span>
-  </IxDrawer>
-  <IxButton @click="show = !show">Toggle drawer</IxButton>
-</template>
-```
 ### Example: dropdown-icon
 ```tsx
 <script setup lang="ts">
@@ -3951,11 +3974,13 @@ import { IxButton, IxGroup, IxGroupItem } from '@siemens/ix-vue';
 ```tsx
 <script setup lang="ts">
 import { IxButton, showModalLoading } from '@siemens/ix-vue';
-import { ModalLoadingContext } from '@siemens/ix';
+import type { ModalLoadingContext } from '@siemens/ix';
-const startLoading = () => {
+const startLoading = async () => {
   let count = 0;
-  const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
+  const progress: ModalLoadingContext = await showModalLoading({
+    message: 'Loading 0/2',
+  });
   const interval = setInterval(() => {
     count++;
     progress.update(`Loading ${count}/2`);
@@ -4357,8 +4382,7 @@ const selectedVariant = ref<ThemeVariant>('dark');
 const useSystemTheme = ref(false);
 onMounted(() => {
-  themeSwitcher.setTheme('classic');
-  themeSwitcher.setVariant(selectedVariant.value);
+  themeSwitcher.setTheme('classic', selectedVariant.value);
 });
 const valueChange = (event: CustomEvent<string | string[]>) => {
@@ -4368,7 +4392,7 @@ const valueChange = (event: CustomEvent<string | string[]>) => {
   const newVariant = event.detail as ThemeVariant;
-  themeSwitcher.setVariant(newVariant);
+  themeSwitcher.setColorSchema(newVariant);
   selectedVariant.value = newVariant;
 };
@@ -4388,9 +4412,9 @@ const systemChange = (event: CustomEvent<boolean>) => {
   useSystemTheme.value = checked;
   if (checked) {
-    themeSwitcher.setVariant();
+    themeSwitcher.setColorSchema('system');
   } else {
-    themeSwitcher.setVariant(selectedVariant.value);
+    themeSwitcher.setColorSchema(selectedVariant.value);
   }
 };
 </script>
@@ -4692,6 +4716,7 @@ onMounted(() => {
       root="root"
       :model="model"
       :context="context"
+      aria-label="Sample tree"
       @contextChange="({ detail }) => (context = detail)"
     >
     </IxTree>
@@ -4754,7 +4779,7 @@ export default {
 ## Angular Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 #### Component typescript
 ```typescript
@@ -4764,19 +4789,20 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  templateUrl: './button-danger-ghost.html',
+  templateUrl: './button-danger-primary.html',
+  styleUrls: ['./button-danger-primary.css'],
 })
 export default class Buttons {}
 ```
 #### Component template
 ```html
-<ix-button variant="subtle-tertiary"> Button </ix-button>
-<ix-button disabled variant="subtle-tertiary"> Button </ix-button>
+<ix-button variant="danger-primary"> Button </ix-button>
+<ix-button disabled variant="danger-primary"> Button </ix-button>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 #### Component typescript
 ```typescript
@@ -4786,8 +4812,8 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  templateUrl: './button-danger-outline.html',
-  styleUrls: ['./button-danger-outline.css'],
+  templateUrl: './button-danger-secondary.html',
+  styleUrls: ['./button-danger-secondary.css'],
 })
 export default class Buttons {}
@@ -4799,7 +4825,7 @@ export default class Buttons {}
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 #### Component typescript
 ```typescript
@@ -4809,20 +4835,18 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  templateUrl: './button-danger.html',
-  styleUrls: ['./button-danger.css'],
+  templateUrl: './button-danger-tertiary.html',
 })
 export default class Buttons {}
 ```
 #### Component template
 ```html
-<ix-button variant="danger-primary"> Button </ix-button>
-<ix-button disabled variant="danger-primary"> Button </ix-button>
+<ix-button variant="danger-tertiary"> Button </ix-button>
+<ix-button disabled variant="danger-tertiary"> Button </ix-button>
 ```
-### Example: button-ghost
+### Example: button-group
 #### Component typescript
 ```typescript
@@ -4833,16 +4857,19 @@ import { Component } from '@angular/core';
   standalone: false,
   selector: 'app-example',
   template: `
-    <ix-button variant="tertiary"> Button </ix-button>
-    <ix-button variant="tertiary" disabled> Button </ix-button>
+    <div class="ix-button-group">
+      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
+      <ix-button> Button 2 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
+    </div>
   `,
-  styleUrls: ['./button-ghost.css'],
 })
-export default class Buttons {}
+export default class ButtonGroup {}
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 #### Component typescript
 ```typescript
@@ -4852,25 +4879,83 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: buttonGreyGhost(),
-  styleUrls: ['./button-grey-ghost.css'],
+  templateUrl: './button-loading.html',
+  styleUrls: ['./button-loading.css'],
 })
-export default class Buttons {}
+export default class ButtonLoading {
+  loading = false;
+  loading2 = false;
+  loading3 = false;
+  loading4 = false;
-function buttonGreyGhost(): string | undefined {
-  return `
-      <ix-button variant="subtle-tertiary">
-        Button
-      </ix-button>
-      <ix-button disabled variant="subtle-tertiary">
-        Button
-      </ix-button>
-  `;
+  toggle() {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 2500);
+  }
+  toggle2() {
+    this.loading2 = true;
+    setTimeout(() => {
+      this.loading2 = false;
+    }, 2500);
+  }
+  toggle3() {
+    this.loading3 = true;
+    setTimeout(() => {
+      this.loading3 = false;
+    }, 2500);
+  }
+  toggle4() {
+    this.loading4 = true;
+    setTimeout(() => {
+      this.loading4 = false;
+    }, 2500);
+  }
 }
+```
+#### Component template
+```html
+<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading">
+  Button
+</ix-button>
+<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
+  Button
+</ix-button>
+<ix-button
+  variant="subtle-primary"
+  (click)="toggle3()"
+  [loading]="loading3"
+  icon="star"
+  aria-label="Star"
+></ix-button>
+<ix-icon-button
+  variant="subtle-primary"
+  (click)="toggle4()"
+  [loading]="loading4"
+  icon="star"
+  aria-label="Toggle loading"
+></ix-icon-button>
+<ix-button variant="subtle-primary" loading> Button </ix-button>
+<ix-icon-button
+  variant="subtle-primary"
+  loading
+  icon="star"
+  aria-label="Loading action"
+></ix-icon-button>
 ```
-### Example: button-grey-secondary
+### Example: button-secondary
 #### Component typescript
 ```typescript
@@ -4880,17 +4965,15 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: `
-    <ix-button variant="subtle-secondary"> Button </ix-button>
-    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
-  `,
-  styleUrls: ['./button-grey-secondary.css'],
+  template: ` <ix-button variant="secondary"> Button </ix-button>
+    <ix-button variant="secondary" disabled> Button </ix-button>`,
+  styleUrls: ['./button-secondary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-grey
+### Example: button-subtle-primary
 #### Component typescript
 ```typescript
@@ -4904,13 +4987,13 @@ import { Component } from '@angular/core';
     <ix-button variant="subtle-primary"> Button </ix-button>
     <ix-button disabled variant="subtle-primary"> Button </ix-button>
   `,
-  styleUrls: ['./button-grey.css'],
+  styleUrls: ['./button-subtle-primary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-group
+### Example: button-subtle-secondary
 #### Component typescript
 ```typescript
@@ -4921,19 +5004,16 @@ import { Component } from '@angular/core';
   standalone: false,
   selector: 'app-example',
   template: `
-    <div class="ix-button-group">
-      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
-      <ix-button> Button 2 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
-    </div>
+    <ix-button variant="subtle-secondary"> Button </ix-button>
+    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
   `,
+  styleUrls: ['./button-subtle-secondary.css'],
 })
-export default class ButtonGroup {}
+export default class Buttons {}
 ```
-### Example: button-loading
+### Example: button-subtle-tertiary
 #### Component typescript
 ```typescript
@@ -4943,57 +5023,25 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: './button-loading.html',
-  styleUrls: ['./button-loading.css'],
+  template: buttonSubtleTertiary(),
+  styleUrls: ['./button-subtle-tertiary.css'],
 })
-export default class ButtonLoading {
-  loading = false;
-  loading2 = false;
-  loading3 = false;
-  toggle() {
-    this.loading = true;
-    setTimeout(() => {
-      this.loading = false;
-    }, 2500);
-  }
-  toggle2() {
-    this.loading2 = true;
-    setTimeout(() => {
-      this.loading2 = false;
-    }, 2500);
-  }
+export default class Buttons {}
-  toggle3() {
-    this.loading3 = true;
-    setTimeout(() => {
-      this.loading3 = false;
-    }, 2500);
-  }
+function buttonSubtleTertiary(): string | undefined {
+  return `
+      <ix-button variant="subtle-tertiary">
+        Button
+      </ix-button>
+      <ix-button disabled variant="subtle-tertiary">
+        Button
+      </ix-button>
+  `;
 }
-```
-#### Component template
-```html
-<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading">
-  Button
-</ix-button>
-<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
-  Button
-</ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-button>
-<ix-button variant="subtle-primary" loading> Button </ix-button>
-<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
 ```
-### Example: button-secondary
+### Example: button-tertiary
 #### Component typescript
 ```typescript
@@ -5003,9 +5051,11 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: ` <ix-button variant="subtle-primary"> Button </ix-button>
-    <ix-button variant="subtle-primary" disabled> Button </ix-button>`,
-  styleUrls: ['./button-secondary.css'],
+  template: `
+    <ix-button variant="tertiary"> Button </ix-button>
+    <ix-button variant="tertiary" disabled> Button </ix-button>
+  `,
+  styleUrls: ['./button-tertiary.css'],
 })
 export default class Buttons {}
@@ -5076,15 +5126,15 @@ export default class ButtonWithLink {}
     <ix-button href="https://siemens.com" variant="secondary"
       >Secondary Link</ix-button
     >
-    <ix-button href="https://siemens.com" variant="danger"
+    <ix-button href="https://siemens.com" variant="danger-primary"
       >Danger Link</ix-button
     >
   </div>
   <div style="margin-bottom: 1rem">
-    <h3>Outline and Ghost Links</h3>
-    <ix-button href="https://siemens.com" outline> Outline Link </ix-button>
-    <ix-button href="https://siemens.com" ghost> Ghost Link </ix-button>
+    <h3>Secondary and Tertiary Links</h3>
+    <ix-button href="https://siemens.com" variant="secondary"> Secondary Link </ix-button>
+    <ix-button href="https://siemens.com" variant="tertiary"> Tertiary Link </ix-button>
   </div>
   <div style="margin-bottom: 1rem">
@@ -5172,9 +5222,9 @@ LICENSE file in the root directory of this source tree.
   header-subtitle="Subtitle"
 >
   <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
-  <ix-button ghost>Button1</ix-button>
-  <ix-button ghost>Button2</ix-button>
-  <ix-button ghost>Button3</ix-button>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
 </ix-content-header>
 ```
@@ -5217,7 +5267,7 @@ LICENSE file in the root directory of this source tree.
 ```
-### Example: drawer-full-height
+### Example: dropdown-icon
 #### Component typescript
 ```typescript
@@ -5228,67 +5278,19 @@ import { Component } from '@angular/core';
   standalone: false,
   selector: 'app-example',
   template: `
-    <ix-drawer [fullHeight]="true" [closeOnClickOutside]="true" [show]="show">
-      <span>Some content of drawer</span>
-    </ix-drawer>
-    <ix-button (click)="show = !show">Toggle drawer</ix-button>
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-item label="Item 1" icon="star"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2" icon="document"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3" icon="bulb"></ix-dropdown-item>
+    </ix-dropdown>
   `,
 })
-export default class DrawerFullHeight {
-  show = false;
-}
+export default class DropdownIcon {}
 ```
-### Example: drawer
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-drawer [closeOnClickOutside]="true" [show]="show">
-      <span>Some content of drawer</span>
-    </ix-drawer>
-    <ix-button (click)="show = !show">Toggle drawer</ix-button>
-  `,
-})
-export default class Drawer {
-  show = false;
-}
-```
-### Example: dropdown-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-button id="iconTriggerId">Open</ix-button>
-    <ix-dropdown trigger="iconTriggerId">
-      <ix-dropdown-item label="Item 1" icon="star"></ix-dropdown-item>
-      <ix-dropdown-item label="Item 2" icon="document"></ix-dropdown-item>
-      <ix-dropdown-item label="Item 3" icon="bulb"></ix-dropdown-item>
-    </ix-dropdown>
-  `,
-})
-export default class DropdownIcon {}
-```
-### Example: dropdown-quick-actions
+### Example: dropdown-quick-actions
 #### Component typescript
 ```typescript
@@ -5495,10 +5497,10 @@ import { LoadingService } from '@siemens/ix-angular';
 export default class Loading {
   constructor(private readonly loadingService: LoadingService) {}
-  startLoading = () => {
+  startLoading = async () => {
     let count = 0;
     const progress: ModalLoadingContext =
-      this.loadingService.showModalLoading('Loading 0/2');
+      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -5746,6 +5748,67 @@ export default class ModalFormIxButtonSubmit {
 ```
+### Example: modal-non-blocking
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxActiveModal, ModalService } from '@siemens/ix-angular';
+@Component({
+  standalone: false,
+  selector: 'app-modal-non-blocking-content',
+  template: `
+    <ix-modal-header (closeClick)="activeModal.dismiss('dismiss payload')">
+      Message headline
+    </ix-modal-header>
+    <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+    <ix-modal-footer>
+      <ix-button
+        variant="subtle-primary"
+        (click)="activeModal.dismiss('dismiss payload')"
+      >
+        Cancel
+      </ix-button>
+      <ix-button autofocus (click)="activeModal.close('close payload!')">
+        OK
+      </ix-button>
+    </ix-modal-footer>
+  `,
+})
+export class ModalNonBlockingContent {
+  constructor(readonly activeModal: IxActiveModal) {}
+}
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  template: `
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button (click)="openModal()">Show non-blocking modal</ix-button>
+    </div>
+  `,
+})
+export default class ModalNonBlocking {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: ModalNonBlockingContent,
+      isNonBlocking: true,
+    });
+  }
+}
+```
 ### Example: modal-sizes
 #### Component typescript
 ```typescript
@@ -5950,8 +6013,7 @@ export default class ThemeSwitcher implements OnInit {
   useSystemTheme = false;
   ngOnInit() {
-    themeSwitcher.setTheme('classic');
-    themeSwitcher.setVariant(this.selectedVariant);
+    themeSwitcher.setTheme('classic', this.selectedVariant);
   }
   onValueChange(event: Event) {
@@ -5962,7 +6024,7 @@ export default class ThemeSwitcher implements OnInit {
     const customEvent = event as CustomEvent<string>;
     const newVariant = customEvent.detail as ThemeVariant;
-    themeSwitcher.setVariant(newVariant);
+    themeSwitcher.setColorSchema(newVariant);
     this.selectedVariant = newVariant;
   }
@@ -5982,9 +6044,9 @@ export default class ThemeSwitcher implements OnInit {
     this.useSystemTheme = checked;
     if (checked) {
-      themeSwitcher.setVariant();
+      themeSwitcher.setColorSchema('system');
     } else {
-      themeSwitcher.setVariant(this.selectedVariant);
+      themeSwitcher.setColorSchema(this.selectedVariant);
     }
   }
 }
@@ -6314,6 +6376,7 @@ type TreeData = {
       [model]="model"
       [context]="context"
       [renderItem]="treeItem"
+      aria-label="Sample tree"
     ></ix-tree>
     <ng-template #treeItem let-item>
       <div style="display: flex; align-items: center">
@@ -6436,7 +6499,7 @@ LICENSE file in the root directory of this source tree.
 ## Angular Standalone Examples
-### Example: button-danger-ghost
+### Example: button-danger-primary
 #### Component typescript
 ```typescript
@@ -6447,7 +6510,8 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  templateUrl: './button-danger-ghost.html',
+  templateUrl: './button-danger-primary.html',
+  styleUrls: ['./button-danger-primary.css'],
 })
 export default class Buttons {}
@@ -6463,12 +6527,12 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
-<ix-button variant="subtle-tertiary"> Button </ix-button>
-<ix-button disabled variant="subtle-tertiary"> Button </ix-button>
+<ix-button variant="danger-primary"> Button </ix-button>
+<ix-button disabled variant="danger-primary"> Button </ix-button>
 ```
-### Example: button-danger-outline
+### Example: button-danger-secondary
 #### Component typescript
 ```typescript
@@ -6479,8 +6543,8 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  templateUrl: './button-danger-outline.html',
-  styleUrls: ['./button-danger-outline.css'],
+  templateUrl: './button-danger-secondary.html',
+  styleUrls: ['./button-danger-secondary.css'],
 })
 export default class Buttons {}
@@ -6501,7 +6565,7 @@ LICENSE file in the root directory of this source tree.
 ```
-### Example: button-danger
+### Example: button-danger-tertiary
 #### Component typescript
 ```typescript
@@ -6512,8 +6576,7 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  templateUrl: './button-danger.html',
-  styleUrls: ['./button-danger.css'],
+  templateUrl: './button-danger-tertiary.html',
 })
 export default class Buttons {}
@@ -6529,12 +6592,12 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
-<ix-button variant="danger-primary"> Button </ix-button>
-<ix-button disabled variant="danger-primary"> Button </ix-button>
+<ix-button variant="danger-tertiary"> Button </ix-button>
+<ix-button disabled variant="danger-tertiary"> Button </ix-button>
 ```
-### Example: button-ghost
+### Example: button-group
 #### Component typescript
 ```typescript
@@ -6546,45 +6609,115 @@ import { IxButton } from '@siemens/ix-angular/standalone';
   selector: 'app-example',
   imports: [IxButton],
   template: `
-    <ix-button variant="tertiary"> Button </ix-button>
-    <ix-button variant="tertiary" disabled> Button </ix-button>
+    <div class="ix-button-group">
+      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
+      <ix-button> Button 2 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
+      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
+    </div>
   `,
-  styleUrls: ['./button-ghost.css'],
 })
-export default class Buttons {}
+export default class ButtonGroup {}
 ```
-### Example: button-grey-ghost
+### Example: button-loading
 #### Component typescript
 ```typescript
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
+import { IxButton, IxIconButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  imports: [IxButton],
-  template: buttonGreyGhost(),
-  styleUrls: ['./button-grey-ghost.css'],
+  imports: [IxButton, IxIconButton],
+  templateUrl: './button-loading.html',
+  styleUrls: ['./button-loading.css'],
 })
-export default class Buttons {}
+export default class ButtonLoading {
+  loading = false;
+  loading2 = false;
+  loading3 = false;
+  loading4 = false;
-function buttonGreyGhost(): string | undefined {
-  return `
-      <ix-button variant="subtle-tertiary">
-        Button
-      </ix-button>
-      <ix-button disabled variant="subtle-tertiary">
-        Button
-      </ix-button>
-  `;
+  toggle() {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 2500);
+  }
+  toggle2() {
+    this.loading2 = true;
+    setTimeout(() => {
+      this.loading2 = false;
+    }, 2500);
+  }
+  toggle3() {
+    this.loading3 = true;
+    setTimeout(() => {
+      this.loading3 = false;
+    }, 2500);
+  }
+  toggle4() {
+    this.loading4 = true;
+    setTimeout(() => {
+      this.loading4 = false;
+    }, 2500);
+  }
 }
+```
+#### Component template
+```html
+<!--
+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.
+-->
+<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading">
+  Button
+</ix-button>
+<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
+  Button
+</ix-button>
+<ix-button
+  variant="subtle-primary"
+  (click)="toggle3()"
+  [loading]="loading3"
+  icon="star"
+  aria-label="Star"
+></ix-button>
+<ix-icon-button
+  variant="subtle-primary"
+  (click)="toggle4()"
+  [loading]="loading4"
+  icon="star"
+  aria-label="Toggle loading"
+></ix-icon-button>
+<ix-button variant="subtle-primary" loading> Button </ix-button>
+<ix-icon-button
+  variant="subtle-primary"
+  loading
+  icon="star"
+  aria-label="Loading action"
+></ix-icon-button>
 ```
-### Example: button-grey-secondary
+### Example: button-secondary
 #### Component typescript
 ```typescript
@@ -6595,17 +6728,15 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  template: `
-    <ix-button variant="subtle-secondary"> Button </ix-button>
-    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
-  `,
-  styleUrls: ['./button-grey-secondary.css'],
+  template: ` <ix-button variant="secondary"> Button </ix-button>
+    <ix-button variant="secondary" disabled> Button </ix-button>`,
+  styleUrls: ['./button-secondary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-grey
+### Example: button-subtle-primary
 #### Component typescript
 ```typescript
@@ -6620,13 +6751,13 @@ import { IxButton } from '@siemens/ix-angular/standalone';
     <ix-button variant="subtle-primary"> Button </ix-button>
     <ix-button disabled variant="subtle-primary"> Button </ix-button>
   `,
-  styleUrls: ['./button-grey.css'],
+  styleUrls: ['./button-subtle-primary.css'],
 })
 export default class Buttons {}
 ```
-### Example: button-group
+### Example: button-subtle-secondary
 #### Component typescript
 ```typescript
@@ -6638,85 +6769,45 @@ import { IxButton } from '@siemens/ix-angular/standalone';
   selector: 'app-example',
   imports: [IxButton],
   template: `
-    <div class="ix-button-group">
-      <ix-button variant="subtle-secondary"> Button 1 </ix-button>
-      <ix-button> Button 2 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 3 </ix-button>
-      <ix-button variant="subtle-secondary"> Button 4 </ix-button>
-    </div>
+    <ix-button variant="subtle-secondary"> Button </ix-button>
+    <ix-button disabled variant="subtle-secondary"> Button </ix-button>
   `,
+  styleUrls: ['./button-subtle-secondary.css'],
 })
-export default class ButtonGroup {}
+export default class Buttons {}
 ```
-### Example: button-loading
+### Example: button-subtle-tertiary
 #### Component typescript
 ```typescript
 import { Component } from '@angular/core';
+import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  template: './button-loading.html',
-  styleUrls: ['./button-loading.css'],
+  imports: [IxButton],
+  template: buttonSubtleTertiary(),
+  styleUrls: ['./button-subtle-tertiary.css'],
 })
-export default class ButtonLoading {
-  loading = false;
-  loading2 = false;
-  loading3 = false;
-  toggle() {
-    this.loading = true;
-    setTimeout(() => {
-      this.loading = false;
-    }, 2500);
-  }
-  toggle2() {
-    this.loading2 = true;
-    setTimeout(() => {
-      this.loading2 = false;
-    }, 2500);
-  }
+export default class Buttons {}
-  toggle3() {
-    this.loading3 = true;
-    setTimeout(() => {
-      this.loading3 = false;
-    }, 2500);
-  }
+function buttonSubtleTertiary(): string | undefined {
+  return `
+      <ix-button variant="subtle-tertiary">
+        Button
+      </ix-button>
+      <ix-button disabled variant="subtle-tertiary">
+        Button
+      </ix-button>
+  `;
 }
-```
-#### Component template
-```html
-<!--
-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.
--->
-<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading"> Button </ix-button>
-<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
-  Button
-</ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-button>
-<ix-button variant="subtle-primary" loading> Button </ix-button>
-<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
 ```
-### Example: button-secondary
+### Example: button-tertiary
 #### Component typescript
 ```typescript
@@ -6727,9 +6818,11 @@ import { IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
-  template: ` <ix-button variant="subtle-primary"> Button </ix-button>
-    <ix-button variant="subtle-primary" disabled> Button </ix-button>`,
-  styleUrls: ['./button-secondary.css'],
+  template: `
+    <ix-button variant="tertiary"> Button </ix-button>
+    <ix-button variant="tertiary" disabled> Button </ix-button>
+  `,
+  styleUrls: ['./button-tertiary.css'],
 })
 export default class Buttons {}
@@ -6747,10 +6840,12 @@ import { IxButton } from '@siemens/ix-angular/standalone';
   selector: 'app-example',
   imports: [IxButton],
   template: `
-    <ix-button icon="star"> Button </ix-button>
-    <ix-button variant="subtle-primary" icon="star"> Button </ix-button>
-    <ix-button variant="subtle-primary" icon="star"> Button </ix-button>
-    <ix-button variant="tertiary" icon="star"> Button </ix-button>
+    <ix-button icon="star">Button</ix-button>
+    <ix-button icon="star" icon-right="bulb">Button</ix-button>
+    <ix-button icon-right="bulb">Button</ix-button>
+    <ix-button variant="subtle-primary" icon="star">Button</ix-button>
+    <ix-button variant="subtle-primary" icon="star">Button</ix-button>
+    <ix-button variant="tertiary" icon="star">Button</ix-button>
   `,
   styleUrls: ['./button-text-icon.css'],
 })
@@ -6800,15 +6895,15 @@ export default class ButtonWithLink {}
     <ix-button href="https://siemens.com" variant="secondary"
       >Secondary Link</ix-button
     >
-    <ix-button href="https://siemens.com" variant="danger"
+    <ix-button href="https://siemens.com" variant="danger-primary"
       >Danger Link</ix-button
     >
   </div>
   <div style="margin-bottom: 1rem">
-    <h3>Outline and Ghost Links</h3>
-    <ix-button href="https://siemens.com" outline> Outline Link </ix-button>
-    <ix-button href="https://siemens.com" ghost> Ghost Link </ix-button>
+    <h3>Secondary and Tertiary Links</h3>
+    <ix-button href="https://siemens.com" variant="secondary"> Secondary Link </ix-button>
+    <ix-button href="https://siemens.com" variant="tertiary"> Tertiary Link </ix-button>
   </div>
   <div style="margin-bottom: 1rem">
@@ -6902,9 +6997,9 @@ LICENSE file in the root directory of this source tree.
   header-subtitle="Subtitle"
 >
   <ix-pill slot="header" icon="info" class="margin-top">Label</ix-pill>
-  <ix-button ghost>Button1</ix-button>
-  <ix-button ghost>Button2</ix-button>
-  <ix-button ghost>Button3</ix-button>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
 </ix-content-header>
 ```
@@ -6948,56 +7043,6 @@ LICENSE file in the root directory of this source tree.
 ```
-### Example: drawer-full-height
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxDrawer, IxButton } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxDrawer, IxButton],
-  template: `
-    <ix-drawer [fullHeight]="true" [closeOnClickOutside]="true" [show]="show">
-      <span>Some content of drawer</span>
-    </ix-drawer>
-    <ix-button (click)="show = !show">Toggle drawer</ix-button>
-  `,
-})
-export default class DrawerFullHeight {
-  show = false;
-}
-```
-### Example: drawer
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxDrawer, IxButton } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxDrawer, IxButton],
-  template: `
-    <ix-drawer [closeOnClickOutside]="true" [show]="show">
-      <span>Some content of drawer</span>
-    </ix-drawer>
-    <ix-button (click)="show = !show">Toggle drawer</ix-button>
-  `,
-})
-export default class Drawer {
-  show = false;
-}
-```
 ### Example: dropdown-icon
 #### Component typescript
 ```typescript
@@ -7328,10 +7373,10 @@ import { IxButton, LoadingService } from '@siemens/ix-angular/standalone';
 export default class Loading {
   constructor(private readonly loadingService: LoadingService) {}
-  startLoading = () => {
+  startLoading = async () => {
     let count = 0;
     const progress: ModalLoadingContext =
-      this.loadingService.showModalLoading('Loading 0/2');
+      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -7574,6 +7619,75 @@ LICENSE file in the root directory of this source tree.
 ```
+### Example: modal-non-blocking
+#### Component typescript
+```typescript
+import { Component, inject } from '@angular/core';
+import {
+  IxActiveModal,
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  IxTypography,
+  ModalService,
+} from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-modal-non-blocking-content',
+  imports: [IxModalHeader, IxModalContent, IxModalFooter, IxButton],
+  template: `
+    <ix-modal-header (closeClick)="activeModal.dismiss('dismiss payload')">
+      Message headline
+    </ix-modal-header>
+    <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+    <ix-modal-footer>
+      <ix-button
+        variant="subtle-primary"
+        (click)="activeModal.dismiss('dismiss payload')"
+      >
+        Cancel
+      </ix-button>
+      <ix-button autofocus (click)="activeModal.close('close payload!')">
+        OK
+      </ix-button>
+    </ix-modal-footer>
+  `,
+})
+export class ModalNonBlockingContent {
+  readonly activeModal: IxActiveModal = inject(IxActiveModal);
+}
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxTypography],
+  template: `
+    <div>
+      <div style="padding: 1rem">
+        <ix-typography format="body" text-color="std">
+          Content behind the dialog
+        </ix-typography>
+        <ix-button id="behind">Behind control</ix-button>
+      </div>
+      <ix-button (click)="openModal()">Show non-blocking modal</ix-button>
+    </div>
+  `,
+})
+export default class ModalNonBlocking {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    await this.modalService.open({
+      content: ModalNonBlockingContent,
+      isNonBlocking: true,
+    });
+  }
+}
+```
 ### Example: modal-sizes
 #### Component typescript
 ```typescript
@@ -7807,8 +7921,7 @@ export default class ThemeSwitcher implements OnInit {
   useSystemTheme = false;
   ngOnInit() {
-    themeSwitcher.setTheme('classic');
-    themeSwitcher.setVariant(this.selectedVariant);
+    themeSwitcher.setTheme('classic', this.selectedVariant);
   }
   onValueChange(event: Event) {
@@ -7819,7 +7932,7 @@ export default class ThemeSwitcher implements OnInit {
     const customEvent = event as CustomEvent<string>;
     const newVariant = customEvent.detail as ThemeVariant;
-    themeSwitcher.setVariant(newVariant);
+    themeSwitcher.setColorSchema(newVariant);
     this.selectedVariant = newVariant;
   }
@@ -7839,9 +7952,9 @@ export default class ThemeSwitcher implements OnInit {
     this.useSystemTheme = checked;
     if (checked) {
-      themeSwitcher.setVariant();
+      themeSwitcher.setColorSchema('system');
     } else {
-      themeSwitcher.setVariant(this.selectedVariant);
+      themeSwitcher.setColorSchema(this.selectedVariant);
     }
   }
 }
@@ -7907,47 +8020,51 @@ LICENSE file in the root directory of this source tree.
 import { Component } from '@angular/core';
-import {
-  IxTile,
-  IxIconButton,
-  IxButton,
-  IxIcon,
-} from '@siemens/ix-angular/standalone';
+import { IxTile, IxIconButton, IxButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  imports: [IxTile, IxIconButton, IxButton, IxIcon],
+  imports: [IxTile, IxIconButton, IxButton],
   template: `
-    <ix-tile size="small">92.8 °C</ix-tile>
+    <div class="example">
+      <ix-tile size="small">92.8 °C</ix-tile>
-    <ix-tile size="medium">
-      <div slot="header">Tile header</div>
-      <div class="text-l">92.8 °C</div>
-    </ix-tile>
+      <ix-tile size="medium">
+        <div slot="header">Tile header</div>
+        <div class="text-l">92.8 °C</div>
+      </ix-tile>
-    <ix-tile size="big">
-      <div class="tile-header" slot="header">
-        Tile header
-        <ix-icon-button variant="tertiary" icon="context-menu"></ix-icon-button>
-      </div>
-      <div slot="subheader">Temperature</div>
-      <div
-        style="
+      <ix-tile size="big">
+        <div class="tile-header" slot="header">
+          Tile header
+          <ix-icon-button
+            variant="tertiary"
+            icon="context-menu"
+          ></ix-icon-button>
+        </div>
+        <div slot="subheader">Temperature</div>
+        <div
+          style="
         display: flex;
         flex-direction: column;
         height: 100%;
         align-items: flex-end;
         justify-content: space-between;
       "
-      >
-        <span>92.8 °C</span>
-      </div>
-      <div class="tile-footer" slot="footer">
-        <ix-button variant="tertiary" slot="footer">
-          <ix-icon name="chevron-right-small"></ix-icon>Details
-        </ix-button>
-      </div>
-    </ix-tile>
+        >
+          <span>92.8 °C</span>
+        </div>
+        <div class="tile-footer" slot="footer">
+          <ix-button
+            variant="tertiary"
+            slot="footer"
+            icon="chevron-right-small"
+          >
+            Details
+          </ix-button>
+        </div>
+      </ix-tile>
+    </div>
   `,
   styleUrls: ['./tile.css'],
 })
@@ -8186,6 +8303,7 @@ type TreeData = {
       [model]="model"
       [context]="context"
       [renderItem]="treeItem"
+      aria-label="Sample tree"
     ></ix-tree>
     <ng-template #treeItem let-item>
       <div style="display: flex; align-items: center">
@@ -8334,19 +8452,18 @@ LICENSE file in the root directory of this source tree.
 ## Properties
-| Property          | Attribute           | Description                                                                                                                        | Type                                                                                                                                                                   | Default     |
-| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `ariaLabelButton` | `aria-label-button` | ARIA label for the button Will be set as aria-label on the nested HTML button element                                              | `string \| undefined`                                                                                                                                                  | `undefined` |
-| `disabled`        | `disabled`          | Disable the button                                                                                                                 | `boolean`                                                                                                                                                              | `false`     |
-| `form`            | `form`              | Provide a form element ID to automatically submit the from if the button is pressed. Only works in combination with type="submit". | `string \| undefined`                                                                                                                                                  | `undefined` |
-| `href`            | `href`              | URL for the button link. When provided, the button will render as an anchor tag.                                                   | `string \| undefined`                                                                                                                                                  | `undefined` |
-| `icon`            | `icon`              | Icon name                                                                                                                          | `string \| undefined`                                                                                                                                                  | `undefined` |
-| `iconRight`       | `icon-right`        | Icon name for the right side of the button                                                                                         | `string \| undefined`                                                                                                                                                  | `undefined` |
-| `loading`         | `loading`           | Loading button                                                                                                                     | `boolean`                                                                                                                                                              | `false`     |
-| `rel`             | `rel`               | Specifies the relationship between the current document and the linked document when href is provided.                             | `string \| undefined`                                                                                                                                                  | `undefined` |
-| `target`          | `target`            | Specifies where to open the linked document when href is provided.                                                                 | `"_blank" \| "_parent" \| "_self" \| "_top" \| undefined`                                                                                                              | `'_self'`   |
-| `type`            | `type`              | Type of the button                                                                                                                 | `"button" \| "submit"`                                                                                                                                                 | `'button'`  |
-| `variant`         | `variant`           | Button variant                                                                                                                     | `"danger-primary" \| "danger-secondary" \| "danger-tertiary" \| "primary" \| "secondary" \| "subtle-primary" \| "subtle-secondary" \| "subtle-tertiary" \| "tertiary"` | `'primary'` |
+| Property    | Attribute    | Description                                                                                                                        | Type                                                                                                                                                                   | Default     |
+| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `disabled`  | `disabled`   | Disable the button                                                                                                                 | `boolean`                                                                                                                                                              | `false`     |
+| `form`      | `form`       | Provide a form element ID to automatically submit the from if the button is pressed. Only works in combination with type="submit". | `string \| undefined`                                                                                                                                                  | `undefined` |
+| `href`      | `href`       | URL for the button link. When provided, the button will render as an anchor tag.                                                   | `string \| undefined`                                                                                                                                                  | `undefined` |
+| `icon`      | `icon`       | Icon name                                                                                                                          | `string \| undefined`                                                                                                                                                  | `undefined` |
+| `iconRight` | `icon-right` | Icon name for the right side of the button                                                                                         | `string \| undefined`                                                                                                                                                  | `undefined` |
+| `loading`   | `loading`    | Loading button                                                                                                                     | `boolean`                                                                                                                                                              | `false`     |
+| `rel`       | `rel`        | Specifies the relationship between the current document and the linked document when href is provided.                             | `string \| undefined`                                                                                                                                                  | `undefined` |
+| `target`    | `target`     | Specifies where to open the linked document when href is provided.                                                                 | `"_blank" \| "_parent" \| "_self" \| "_top" \| undefined`                                                                                                              | `'_self'`   |
+| `type`      | `type`       | Type of the button                                                                                                                 | `"button" \| "submit"`                                                                                                                                                 | `'button'`  |
+| `variant`   | `variant`    | Button variant                                                                                                                     | `"danger-primary" \| "danger-secondary" \| "danger-tertiary" \| "primary" \| "secondary" \| "subtle-primary" \| "subtle-secondary" \| "subtle-tertiary" \| "tertiary"` | `'primary'` |
 ## Dependencies