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

@siemens/ix-docs 4.4.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 (2401) hide show

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

@@ -6,7 +6,7 @@
 ### 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" />
@@ -24,7 +24,7 @@
 ### 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" />
@@ -42,7 +42,7 @@
 ### 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" />
@@ -60,7 +60,7 @@
 ### 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" />
@@ -81,7 +81,7 @@
 ### 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" />
@@ -107,16 +107,33 @@
     </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-button variant="subtle-primary" onclick="toggle(this)" icon="star">
+      Button
+    </ix-button>
-    <ix-icon-button variant="subtle-primary" onclick="toggle(this)" icon="star">
+    <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"></ix-icon-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>
@@ -125,7 +142,7 @@
 ### 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" />
@@ -143,7 +160,7 @@
 ### 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" />
@@ -161,7 +178,7 @@
 ### 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" />
@@ -179,7 +196,7 @@
 ### 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" />
@@ -197,7 +214,7 @@
 ### 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" />
@@ -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" />
@@ -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" />
@@ -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({ message: '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" />
@@ -1944,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(() => {
@@ -1954,12 +1964,12 @@ export default () => {
           }, 2500);
         }}
         loading={toggle}
-        outline
       >
         Button
       </IxButton>
       <IxButton
+        variant="subtle-primary"
         onClick={() => {
           setToggle2(true);
           setTimeout(() => {
@@ -1967,13 +1977,13 @@ export default () => {
           }, 2500);
         }}
         loading={toggle2}
-        outline
         icon={iconStar}
       >
         Button
       </IxButton>
       <IxButton
+        variant="subtle-primary"
         onClick={() => {
           setToggle3(true);
           setTimeout(() => {
@@ -1981,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>
     </>
   );
 };
@@ -2222,9 +2238,7 @@ export default () => {
   return (
     <>
       <IxButton>Button</IxButton>
-      <IxButton disabled>
-        Button
-      </IxButton>
+      <IxButton disabled>Button</IxButton>
     </>
   );
 };
@@ -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({ message: '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);
         }}
@@ -3468,16 +3502,19 @@ import { ref } from 'vue';
 let toggle1 = ref(false);
 let toggle2 = ref(false);
 let toggle3 = ref(false);
+let toggle4 = ref(false);
 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;
   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>
@@ -3486,13 +3523,38 @@ function load(value: string) {
 <template>
   <div>
-    <IxButton variant="subtle-primary" :loading="toggle1" @click="load('1')"> Button </IxButton>
-    <IxButton variant="subtle-primary" :loading="toggle2" @click="load('2')" :icon="iconStar">
+    <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="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></IxIconButton>
+    <IxIconButton
+      variant="subtle-primary"
+      loading
+      :icon="iconStar"
+      aria-label="Loading action"
+    ></IxIconButton>
   </div>
 </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">
@@ -3953,9 +3976,11 @@ import { IxButton, IxGroup, IxGroupItem } from '@siemens/ix-vue';
 import { IxButton, showModalLoading } from '@siemens/ix-vue';
 import type { ModalLoadingContext } from '@siemens/ix';
-const startLoading = () => {
+const startLoading = async () => {
   let count = 0;
-  const progress: ModalLoadingContext = showModalLoading({ message: '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>
@@ -4854,13 +4879,14 @@ import { Component } from '@angular/core';
 @Component({
   standalone: false,
   selector: 'app-example',
-  template: './button-loading.html',
+  templateUrl: './button-loading.html',
   styleUrls: ['./button-loading.css'],
 })
 export default class ButtonLoading {
   loading = false;
   loading2 = false;
   loading3 = false;
+  loading4 = false;
   toggle() {
     this.loading = true;
@@ -4882,6 +4908,13 @@ export default class ButtonLoading {
       this.loading3 = false;
     }, 2500);
   }
+  toggle4() {
+    this.loading4 = true;
+    setTimeout(() => {
+      this.loading4 = false;
+    }, 2500);
+  }
 }
 ```
@@ -4895,12 +4928,30 @@ export default class ButtonLoading {
   Button
 </ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-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"></ix-icon-button>
+<ix-icon-button
+  variant="subtle-primary"
+  loading
+  icon="star"
+  aria-label="Loading action"
+></ix-icon-button>
 ```
@@ -5216,54 +5267,6 @@ LICENSE file in the root directory of this source tree.
 ```
-### Example: drawer-full-height
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  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>
-  `,
-})
-export default class DrawerFullHeight {
-  show = false;
-}
-```
-### 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
@@ -5494,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({ message: 'Loading 0/2' });
+      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -5745,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
@@ -5949,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) {
@@ -5961,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;
   }
@@ -5981,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);
     }
   }
 }
@@ -6313,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">
@@ -6563,16 +6627,19 @@ export default class ButtonGroup {}
 import { Component } from '@angular/core';
+import { IxButton, IxIconButton } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
-  template: './button-loading.html',
+  imports: [IxButton, IxIconButton],
+  templateUrl: './button-loading.html',
   styleUrls: ['./button-loading.css'],
 })
 export default class ButtonLoading {
   loading = false;
   loading2 = false;
   loading3 = false;
+  loading4 = false;
   toggle() {
     this.loading = true;
@@ -6594,6 +6661,13 @@ export default class ButtonLoading {
       this.loading3 = false;
     }, 2500);
   }
+  toggle4() {
+    this.loading4 = true;
+    setTimeout(() => {
+      this.loading4 = false;
+    }, 2500);
+  }
 }
 ```
@@ -6608,18 +6682,38 @@ 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)="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"
+  (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"></ix-icon-button>
+<ix-icon-button
+  variant="subtle-primary"
+  loading
+  icon="star"
+  aria-label="Loading action"
+></ix-icon-button>
 ```
@@ -6746,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'],
 })
@@ -6947,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
@@ -7327,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({ message: 'Loading 0/2' });
+      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -7573,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
@@ -7806,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) {
@@ -7818,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;
   }
@@ -7838,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);
     }
   }
 }
@@ -7906,16 +8020,11 @@ 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: `
     <div class="example">
       <ix-tile size="small">92.8 °C</ix-tile>
@@ -8194,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">
@@ -8342,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