npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058

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 (1016) hide show

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

@@ -1,3 +1,4 @@
 # ix-button
 ## HTML Examples
@@ -737,151 +738,6 @@
 </html>
 ```
-### Example: map-navigation-migration
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map navigation migration example</title>
-    <link rel="stylesheet" href="./map-navigation-migration.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconBulb } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconBulb,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application class="application">
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-          <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-          <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-          <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-        </ix-dropdown-button>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-pane
-        id="overlay"
-        class="overlay"
-        composition="right"
-        heading="Custom overlay"
-        icon="bulb"
-        size="320px"
-        variant="floating"
-        hide-on-collapse
-        expanded="false"
-      >
-        Overlay content
-      </ix-pane>
-      <ix-pane-layout>
-        <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
-          Sidebar content
-        </ix-pane>
-        <ix-content class="content">
-          <ix-content-header slot="header" header-title="My Content Page">
-          </ix-content-header>
-          <ix-button id="btn-open-overlay">Open overlay</ix-button>
-        </ix-content>
-      </ix-pane-layout>
-    </ix-application>
-    <script type="module">
-      const overlay = document.getElementById('overlay');
-      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
-      let expanded = overlay.getAttribute('expanded') === 'true';
-      overlay.addEventListener('expandedChanged', (e) => {
-        expanded = e.detail.expanded;
-      });
-      buttonOpenOverlay.addEventListener('click', () => {
-        expanded = !expanded;
-        overlay.setAttribute('expanded', expanded);
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: map-navigation-overlay
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map navigation overlay example</title>
-  </head>
-  <body>
-    <ix-map-navigation
-      application-name="My Application"
-      navigation-title="Navigation title"
-      hide-context-menu="false"
-    >
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content slot="sidebar-content">Sidebar content</ix-content>
-      <ix-content>
-        <ix-content-header
-          slot="header"
-          header-title="My Content Page"
-        ></ix-content-header>
-        <ix-button id="btn-open-overlay">Open overlay</ix-button>
-      </ix-content>
-    </ix-map-navigation>
-    <script type="module">
-      const mapNav = document.querySelector('ix-map-navigation');
-      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
-      buttonOpenOverlay.addEventListener('click', () => {
-        const overlay = document.createElement('ix-map-navigation-overlay');
-        overlay.slot = 'overlay';
-        overlay.name = 'Custom overlay';
-        overlay.icon = 'bulb';
-        const overlayContent = document.createElement('ix-content');
-        overlayContent.textContent = 'Overlay content';
-        overlay.appendChild(overlayContent);
-        mapNav.appendChild(overlay);
-        overlay.addEventListener('closeClick', (e) => {
-          overlay.parentNode.removeChild(overlay);
-        });
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
 ### Example: message-bar-removal
 ```html
 <!DOCTYPE html>
@@ -995,6 +851,97 @@
 </html>
 ```
+### Example: modal-close
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modal example</title>
+  </head>
+  <body>
+    <ix-button>Show modal (auto-dismiss)</ix-button>
+    <template id="modal-example-template">
+      <ix-modal-header>Message headline</ix-modal-header>
+      <ix-modal-content>Message text lorem ipsum</ix-modal-content>
+      <ix-modal-footer>
+        <ix-button variant="secondary" data-cancel>Cancel</ix-button>
+        <ix-button data-okay>OK</ix-button>
+      </ix-modal-footer>
+    </template>
+    <script type="module">
+      import { showModal, closeModal, dismissModal } from '@siemens/ix';
+      function createExampleModal() {
+        const name = 'modal-example';
+        window.customElements.define(
+          name,
+          class extends HTMLElement {
+            isInitialRender = false;
+            constructor() {
+              super();
+            }
+            connectedCallback() {
+              if (this.isInitialRender) {
+                return;
+              }
+              this.isInitialRender = true;
+              this.firstRender();
+            }
+            firstRender() {
+              const modalTemplate = document.getElementById(
+                'modal-example-template'
+              );
+              const template = modalTemplate.content.cloneNode(true);
+              const cancelButton = template.querySelector('[data-cancel]');
+              const okayButton = template.querySelector('[data-okay]');
+              cancelButton.addEventListener('click', () => {
+                dismissModal(this);
+              });
+              okayButton.addEventListener('click', () => {
+                closeModal(this);
+              });
+              this.append(template);
+            }
+          }
+        );
+        return name;
+      }
+      (async function () {
+        const exampleModalName = createExampleModal();
+        await window.customElements.whenDefined('ix-button');
+        const button = document.querySelector('ix-button');
+        button.addEventListener('click', async () => {
+          const customModal = document.createElement(exampleModalName);
+          await showModal({
+            content: customModal,
+          });
+          setTimeout(() => {
+            closeModal(customModal, 'closed after 5 seconds');
+          }, 5000);
+        });
+      })();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
 ### Example: modal-form-ix-button-submit
 ```html
 <!DOCTYPE html>
@@ -1293,7 +1240,7 @@
         <p>This is the bottom pane.</p>
       </ix-pane>
-      <div slot="content">
+      <div>
         <ix-button id="toggle-variant" style="margin: 2.5rem">
           Toggle Variant
         </ix-button>
@@ -1399,8 +1346,7 @@
       <ix-row>
         <ix-col size="2"></ix-col>
         <ix-col>
-          <input class="ix-form-control" type="checkbox" id="system" />
-          <label class="ix-form-label" for="system">Use System</label>
+          <ix-checkbox id="system" label="Use system"></ix-checkbox>
         </ix-col>
       </ix-row>
     </ix-layout-grid>
@@ -1408,44 +1354,71 @@
     <script type="module">
       import { themeSwitcher } from '@siemens/ix';
-      (async function () {
-        const themes = ['theme-classic-light', 'theme-classic-dark'];
-        let selectedTheme = themes[1];
+      const variants = ['light', 'dark'];
+      let selectedVariant = 'dark';
+      let useSystemTheme = false;
-        setTimeout(() => {
-          themeSwitcher.setTheme(selectedTheme);
-        });
+      const toggleModeButton = document.getElementById('toggle-mode');
+      const themeSelect = document.getElementById('select-theme');
+      const toggleSystem = document.getElementById('system');
-        const toggleModeButton = document.getElementById('toggle-mode');
-        toggleModeButton.addEventListener('click', () => {
-          themeSwitcher.toggleMode();
-        });
+      setTimeout(() => {
+        themeSwitcher.setTheme('classic');
+        themeSwitcher.setVariant(selectedVariant);
+      });
-        const themeSelect = document.getElementById('select-theme');
-        themes.forEach((theme) => {
-          const item = document.createElement('ix-select-item');
-          item.label = theme;
-          item.value = theme;
-          themeSelect.appendChild(item);
-        });
+      for (const variant of variants) {
+        const item = document.createElement('ix-select-item');
-        themeSelect.value = selectedTheme;
+        item.label = variant;
+        item.value = variant;
-        themeSelect.addEventListener('valueChange', ({ detail: theme }) => {
-          themeSwitcher.setTheme(theme);
-          selectedTheme = theme;
-        });
+        themeSelect.appendChild(item);
+      }
-        const toggleSystem = document.getElementById('system');
-        toggleSystem.addEventListener('change', ({ target }) => {
-          if (target.checked) {
-            themeSwitcher.setVariant();
-            return;
-          }
+      themeSelect.value = selectedVariant;
-          themeSwitcher.setTheme(selectedTheme);
-        });
-      })();
+      const updateControlsState = () => {
+        toggleModeButton.disabled = useSystemTheme;
+        themeSelect.disabled = useSystemTheme;
+      };
+      toggleModeButton.addEventListener('click', () => {
+        if (useSystemTheme) {
+          return;
+        }
+        themeSwitcher.toggleMode();
+        selectedVariant = selectedVariant === 'light' ? 'dark' : 'light';
+        themeSelect.value = selectedVariant;
+      });
+      themeSelect.addEventListener('valueChange', ({ detail: variant }) => {
+        if (useSystemTheme) {
+          return;
+        }
+        themeSwitcher.setVariant(variant);
+        selectedVariant = variant;
+      });
+      toggleSystem.addEventListener('checkedChange', ({ detail: checked }) => {
+        useSystemTheme = checked;
+        if (checked) {
+          themeSwitcher.setVariant();
+        } else {
+          themeSwitcher.setVariant(selectedVariant);
+          themeSelect.value = selectedVariant;
+        }
+        updateControlsState();
+      });
+      updateControlsState();
     </script>
     <script type="module" src="./init.js"></script>
   </body>
@@ -1670,6 +1643,39 @@
 </html>
 ```
+### Example: tooltip-with-icon
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tooltip example</title>
+    <link rel="stylesheet" href="./tooltip.css" />
+    <script type="module">
+      import { addIcons } from '@siemens/ix-icons';
+      import { iconInfo } from '@siemens/ix-icons/icons';
+      addIcons({
+        iconInfo,
+      });
+    </script>
+  </head>
+  <body>
+    <ix-button class="any-class" aria-describedby="tooltip-1">
+      Hover me
+    </ix-button>
+    <ix-tooltip id="tooltip-1" for=".any-class">
+      <ix-icon slot="title-icon" name="info" size="16"></ix-icon>
+      <div slot="title-content">Tooltip Title</div>
+      Simple selector with icon
+    </ix-tooltip>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
 ### Example: tooltip
 ```html
 <!DOCTYPE html>
@@ -2509,13 +2515,13 @@ export default () => {
 ### Example: loading
 ```tsx
-import { showModalLoading } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-react';
+import { ModalLoadingContext } from '@siemens/ix';
+import { IxButton, showModalLoading } from '@siemens/ix-react';
 export default () => {
   const startLoading = () => {
     let count = 0;
-    const progress = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -2530,166 +2536,6 @@ export default () => {
 };
 ```
-### Example: map-navigation-migration
-```tsx
-import { iconBulb } from '@siemens/ix-icons/icons';
-import './map-navigation-migration.scoped.css';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxButton,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxPane,
-  IxPaneLayout,
-} from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [expanded, setExpanded] = useState(false);
-  const initialExpanded = true;
-  function resetExpanded(value: boolean) {
-    setExpanded(value);
-  }
-  return (
-    <IxApplication className="application">
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-        {}
-        <IxDropdownButton variant="subtle-tertiary" label="Select config">
-          <IxDropdownItem label="Config 1"></IxDropdownItem>
-          <IxDropdownItem label="Config 2"></IxDropdownItem>
-          <IxDropdownItem label="Config 3"></IxDropdownItem>
-        </IxDropdownButton>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      {}
-      <IxPane
-        className="overlay"
-        composition="right"
-        heading="Custom overlay"
-        icon={iconBulb}
-        size="320px"
-        variant="floating"
-        hideOnCollapse
-        expanded={expanded}
-        onExpandedChanged={(e) => resetExpanded(e.detail.expanded)}
-      >
-        Overlay content
-      </IxPane>
-      <IxPaneLayout>
-        {}
-        <IxPane
-          slot="left"
-          heading="Navigation title"
-          size="320px"
-          expanded={initialExpanded}
-        >
-          Sidebar content
-        </IxPane>
-        <IxContent className="content">
-          <IxContentHeader
-            slot="header"
-            headerTitle="My Content Page"
-          ></IxContentHeader>
-          <IxButton onClick={() => setExpanded(!expanded)}>
-            Open overlay
-          </IxButton>
-        </IxContent>
-      </IxPaneLayout>
-    </IxApplication>
-  );
-};
-```
-### Example: map-navigation-overlay
-```tsx
-import { iconBulb } from '@siemens/ix-icons/icons';
-import {
-  IxButton,
-  IxContent,
-  IxContentHeader,
-  IxMapNavigation,
-  IxMapNavigationOverlay,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [overlay, setOverlay] = useState(false);
-  function openOverlay() {
-    setOverlay(true);
-  }
-  function closeOverlay() {
-    setOverlay(false);
-  }
-  return (
-    <IxMapNavigation
-      applicationName="My Application"
-      navigationTitle="Navigation title"
-      hideContextMenu={false}
-    >
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      <IxContent slot="sidebar-content">Sidebar content</IxContent>
-      <IxContent>
-        <IxContentHeader
-          slot="header"
-          header-title="My Content Page"
-        ></IxContentHeader>
-        <IxButton
-          onClick={() => {
-            openOverlay();
-          }}
-        >
-          Open overlay
-        </IxButton>
-      </IxContent>
-      {overlay ? (
-        <IxMapNavigationOverlay
-          slot="overlay"
-          name="Custom overlay"
-          icon={iconBulb}
-          onCloseClick={() => closeOverlay()}
-        >
-          <IxContent>Overlay content</IxContent>
-        </IxMapNavigationOverlay>
-      ) : null}
-    </IxMapNavigation>
-  );
-};
-```
 ### Example: message-bar-removal
 ```tsx
 import './message-bar.scoped.css';
@@ -2752,8 +2598,7 @@ export default () => {
 ### Example: message
 ```tsx
-import { showMessage } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-react';
+import { IxButton, showMessage } from '@siemens/ix-react';
 export default () => {
   const triggerMessage = async () => {
@@ -2769,8 +2614,62 @@ export default () => {
     ).once(console.log);
   };
   return (
-    <IxButton onClick={() => triggerMessage()}>Show 'success' message</IxButton>
+    <IxButton onClick={() => triggerMessage()}>Show 'success' message</IxButton>
+  );
+};
+```
+### Example: modal-close
+```tsx
+import {
+  IxButton,
+  IxModalContent,
+  IxModalFooter,
+  IxModalHeader,
+  Modal,
+  ModalRef,
+  showModal,
+  dismissModal,
+} from '@siemens/ix-react';
+import { useRef } from 'react';
+function CustomModal() {
+  const modalRef = useRef<ModalRef>(null);
+  const close = () => {
+    modalRef.current?.close('close payload!');
+  };
+  const dismiss = () => {
+    modalRef.current?.dismiss('dismiss payload');
+  };
+  return (
+    <Modal ref={modalRef}>
+      <IxModalHeader onCloseClick={() => dismiss()}>
+        Message headline
+      </IxModalHeader>
+      <IxModalContent>Message text lorem ipsum</IxModalContent>
+      <IxModalFooter>
+        <IxButton variant="secondary" onClick={() => dismiss()}>
+          Cancel
+        </IxButton>
+        <IxButton onClick={() => close()}>OK</IxButton>
+      </IxModalFooter>
+    </Modal>
   );
+}
+export default () => {
+  async function show() {
+    const modalInstance = await showModal({
+      content: <CustomModal />,
+    });
+    setTimeout(() => {
+      dismissModal(modalInstance);
+    }, 5000);
+  }
+  return <IxButton onClick={show}>Show modal (auto-dismiss)</IxButton>;
 };
 ```
@@ -2963,7 +2862,7 @@ export default () => {
         <p>This is the bottom pane.</p>
       </IxPane>
-      <div slot="content">
+      <div>
         <IxButton
           onClick={() =>
             setVariant(variant === 'inline' ? 'floating' : 'inline')
@@ -3032,48 +2931,73 @@ export default () => {
 ```tsx
 import './theme-switcher.scoped.css';
-import { IxSelectCustomEvent, themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 import {
   IxButton,
+  IxCheckbox,
   IxCol,
   IxLayoutGrid,
   IxRow,
   IxSelect,
   IxSelectItem,
 } from '@siemens/ix-react';
-import { ChangeEvent, useState } from 'react';
+import { useEffect, useState } from 'react';
 export default () => {
-  const [themes] = useState(['theme-classic-light', 'theme-classic-dark']);
-  const [selectedTheme, setSelectedTheme] = useState(themes[1]);
+  const [variants] = useState<ThemeVariant[]>(['light', 'dark']);
+  const [selectedVariant, setSelectedVariant] = useState<ThemeVariant>('dark');
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
+  useEffect(() => {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(selectedVariant);
+  }, []);
+  const onValueChange = (event: CustomEvent<string | string[]>) => {
+    if (useSystemTheme) {
+      return;
+    }
+    const newVariant = event.detail as ThemeVariant;
-  const valueChange = (event: IxSelectCustomEvent<string | string[]>) => {
-    const newTheme: string = event.detail as string;
-    themeSwitcher.setTheme(newTheme);
-    setSelectedTheme(newTheme);
+    themeSwitcher.setVariant(newVariant);
+    setSelectedVariant(newVariant);
   };
   const toggle = () => {
+    if (useSystemTheme) {
+      return;
+    }
     themeSwitcher.toggleMode();
+    const newVariant = selectedVariant === 'light' ? 'dark' : 'light';
+    setSelectedVariant(newVariant);
   };
-  const systemChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (target.checked) {
+  const onCheckedChange = (event: CustomEvent<boolean>) => {
+    const checked = event.detail;
+    setUseSystemTheme(checked);
+    if (checked) {
       themeSwitcher.setVariant();
-      return;
+    } else {
+      themeSwitcher.setVariant(selectedVariant);
     }
-    themeSwitcher.setTheme(selectedTheme);
   };
   return (
-    <IxLayoutGrid class="theme-switcher">
+    <IxLayoutGrid className="theme-switcher">
       <IxRow>
         <IxCol size="2">
           <span>Light/Dark</span>
         </IxCol>
         <IxCol>
-          <IxButton onClick={toggle}>Toggle mode</IxButton>
+          <IxButton onClick={toggle} disabled={useSystemTheme}>
+            Toggle mode
+          </IxButton>
         </IxCol>
       </IxRow>
@@ -3081,15 +3005,15 @@ export default () => {
         <IxCol size="2">Theme</IxCol>
         <IxCol>
           <IxSelect
-            value={selectedTheme}
-            onValueChange={valueChange}
-            placeholder="Select a theme"
+            value={selectedVariant}
+            onValueChange={onValueChange}
+            disabled={useSystemTheme}
           >
-            {themes.map((theme) => (
+            {variants.map((variant) => (
               <IxSelectItem
-                key={theme}
-                label={theme}
-                value={theme}
+                key={variant}
+                label={variant}
+                value={variant}
               ></IxSelectItem>
             ))}
           </IxSelect>
@@ -3099,15 +3023,7 @@ export default () => {
       <IxRow>
         <IxCol size="2"></IxCol>
         <IxCol>
-          <input
-            className="ix-form-control"
-            type="checkbox"
-            id="system"
-            onChange={systemChange}
-          />
-          <label className="ix-form-label" htmlFor="system">
-            Use System
-          </label>
+          <IxCheckbox label="Use system" onCheckedChange={onCheckedChange} />
         </IxCol>
       </IxRow>
     </IxLayoutGrid>
@@ -3266,6 +3182,31 @@ export default () => {
 };
 ```
+### Example: tooltip-with-icon
+```tsx
+import './tooltip.scoped.css';
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-react';
+import { iconInfo } from '@siemens/ix-icons/icons';
+const TooltipWithIcon = () => {
+  return (
+    <>
+      <IxButton className="any-class" aria-describedby="tooltip-1">
+        Hover me
+      </IxButton>
+      <IxTooltip id="tooltip-1" for=".any-class">
+        <IxIcon slot="title-icon" name={iconInfo} size="16"></IxIcon>
+        <div slot="title-content">Tooltip Title</div>
+        Simple selector with icon
+      </IxTooltip>
+    </>
+  );
+};
+export default TooltipWithIcon;
+```
 ### Example: tooltip
 ```tsx
 import './tooltip.scoped.css';
@@ -3275,7 +3216,7 @@ import { IxButton, IxTooltip } from '@siemens/ix-react';
 export default () => {
   return (
     <>
-      <IxButton class="any-class" aria-describedby="tooltip-1">
+      <IxButton className="any-class" aria-describedby="tooltip-1">
         Hover me
       </IxButton>
       <IxTooltip id="tooltip-1" for=".any-class">
@@ -4008,15 +3949,13 @@ import { IxButton, IxGroup, IxGroupItem } from '@siemens/ix-vue';
 ### Example: loading
 ```tsx
-1
 <script setup lang="ts">
-import { showModalLoading } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-vue';
+import { IxButton, showModalLoading } from '@siemens/ix-vue';
+import { ModalLoadingContext } from '@siemens/ix';
 const startLoading = () => {
   let count = 0;
-  const progress = showModalLoading('Loading 0/2');
+  const progress: ModalLoadingContext = showModalLoading('Loading 0/2');
   const interval = setInterval(() => {
     count++;
     progress.update(`Loading ${count}/2`);
@@ -4034,163 +3973,6 @@ const startLoading = () => {
 </template>
 ```
-### Example: map-navigation-migration
-```tsx
-<script setup lang="ts">
-import { iconBulb } from '@siemens/ix-icons/icons';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxButton,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxPane,
-  IxPaneLayout,
-} from '@siemens/ix-vue';
-</script>
-<style scoped src="./map-navigation-migration.css"></style>
-<script lang="ts">
-export default {
-  data(): {
-    expanded: boolean;
-  } {
-    return {
-      expanded: false,
-    };
-  },
-  methods: {
-    resetExpanded(e: Event) {
-      this.expanded = (e as CustomEvent).detail.expanded;
-    },
-  },
-};
-</script>
-<template>
-  <IxApplication className="application">
-    <IxApplicationHeader name="My Application">
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxDropdownButton variant="subtle-tertiary" label="Select config">
-        <IxDropdownItem label="Config 1"></IxDropdownItem>
-        <IxDropdownItem label="Config 2"></IxDropdownItem>
-        <IxDropdownItem label="Config 3"></IxDropdownItem>
-      </IxDropdownButton>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-    <IxPane
-      className="overlay"
-      composition="right"
-      heading="Custom overlay"
-      :icon="iconBulb"
-      size="320px"
-      variant="floating"
-      hideOnCollapse
-      :expanded="expanded"
-      @expanded-changed="(e: Event) => resetExpanded(e)"
-    >
-      Overlay content
-    </IxPane>
-    <IxPaneLayout>
-      <IxPane slot="left" heading="Navigation title" size="320px" expanded>
-        Sidebar content
-      </IxPane>
-      <IxContent className="content">
-        <IxContentHeader
-          slot="header"
-          header-title="My Content Page"
-        ></IxContentHeader>
-        <IxButton @click="expanded = !expanded">Open overlay</IxButton>
-      </IxContent>
-    </IxPaneLayout>
-  </IxApplication>
-</template>
-```
-### Example: map-navigation-overlay
-```tsx
-<script setup lang="ts">
-import { iconBulb } from '@siemens/ix-icons/icons';
-import {
-  IxButton,
-  IxContent,
-  IxContentHeader,
-  IxMapNavigation,
-  IxMapNavigationOverlay,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-</script>
-<script lang="ts">
-export default {
-  data(): {
-    overlay: boolean;
-  } {
-    return {
-      overlay: false,
-    };
-  },
-  methods: {
-    showOverlay(show: boolean) {
-      this.overlay = show;
-    },
-  },
-};
-</script>
-<template>
-  <IxMapNavigation
-    applicationName="My Application"
-    navigationTitle="Navigation title"
-    :hideContextMenu="false"
-  >
-    <div className="placeholder-logo" slot="logo"></div>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-    <IxContent slot="sidebar-content">Sidebar content</IxContent>
-    <IxContent>
-      <IxContentHeader slot="header" headerTitle="My Content Page">
-      </IxContentHeader>
-      <IxButton @click="() => showOverlay(true)">Open overlay</IxButton>
-    </IxContent>
-    <IxMapNavigationOverlay
-      v-if="overlay"
-      slot="overlay"
-      name="Custom overlay"
-      :icon="iconBulb"
-      @close-click="() => showOverlay(false)"
-    >
-      <IxContent>Overlay content</IxContent>
-    </IxMapNavigationOverlay>
-  </IxMapNavigation>
-</template>
-```
 ### Example: message-bar-removal
 ```tsx
 <script setup lang="ts">
@@ -4253,8 +4035,7 @@ import { IxButton, IxMessageBar } from '@siemens/ix-vue';
 ### Example: message
 ```tsx
 <script setup lang="ts">
-import { showMessage } from '@siemens/ix';
-import { IxButton } from '@siemens/ix-vue';
+import { IxButton, showMessage } from '@siemens/ix-vue';
 const triggerMessage = async () => {
   (
@@ -4275,6 +4056,49 @@ const triggerMessage = async () => {
 </template>
 ```
+### Example: modal-close
+```tsx
+<script setup lang="tsx">
+import {
+  IxButton,
+  IxModalHeader,
+  IxModalContent,
+  IxModalFooter,
+  Modal,
+  type ModalSlotProps,
+  showModal,
+  dismissModal,
+} from '@siemens/ix-vue';
+function show() {
+  showModal({
+    content: (
+      <Modal>
+        {({ closeModal, dismissModal }: ModalSlotProps) => [
+          <IxModalHeader>Message headline</IxModalHeader>,
+          <IxModalContent>Message text lorem ipsum</IxModalContent>,
+          <IxModalFooter>
+            <IxButton variant="secondary" onClick={() => dismissModal()}>
+              Cancel
+            </IxButton>
+            <IxButton onClick={() => closeModal()}>OK</IxButton>
+          </IxModalFooter>,
+        ]}
+      </Modal>
+    ),
+  }).then((modalInstance) => {
+    setTimeout(() => {
+      dismissModal(modalInstance);
+    }, 5000);
+  });
+}
+</script>
+<template>
+  <IxButton @click="show()">Show modal (auto-dismiss)</IxButton>
+</template>
+```
 ### Example: modal-form-ix-button-submit
 ```tsx
 <script setup lang="ts">
@@ -4438,7 +4262,7 @@ const layout = ref<'full-horizontal' | 'full-vertical'>('full-horizontal');
       <p>This is the bottom pane.</p>
     </IxPane>
-    <div slot="content">
+    <div>
       <IxButton
         @click="
           () => {
@@ -4516,55 +4340,58 @@ onMounted(() => {
 ### Example: theme-switcher
 ```tsx
 <script setup lang="ts">
-import { themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, type ThemeVariant } from '@siemens/ix';
 import {
   IxButton,
+  IxCheckbox,
   IxCol,
   IxLayoutGrid,
   IxRow,
   IxSelect,
+  IxSelectItem,
 } from '@siemens/ix-vue';
-import { onMounted } from 'vue';
-const themes = ['theme-classic-light', 'theme-classic-dark'];
-let selectedTheme = themes[1];
+import { onMounted, ref } from 'vue';
-themeSwitcher.setTheme(selectedTheme);
+const variants = ref<ThemeVariant[]>(['light', 'dark']);
+const selectedVariant = ref<ThemeVariant>('dark');
+const useSystemTheme = ref(false);
 onMounted(() => {
-  const themeSelect: HTMLSelectElement | null = document.getElementById(
-    'select-theme'
-  ) as HTMLSelectElement;
-  if (themeSelect) {
-    themes.forEach((theme) => {
-      const item = document.createElement('ix-select-item');
-      item.label = theme;
-      item.value = theme;
-      themeSelect.appendChild(item);
-    });
-    themeSelect.value = selectedTheme;
-    themeSelect.addEventListener('valueChange', (event: Event) => {
-      const target = event.target as HTMLSelectElement;
-      const detail = target.value;
-      themeSwitcher.setTheme(detail);
-      selectedTheme = detail;
-    });
-  }
+  themeSwitcher.setTheme('classic');
+  themeSwitcher.setVariant(selectedVariant.value);
 });
+const valueChange = (event: CustomEvent<string | string[]>) => {
+  if (useSystemTheme.value) {
+    return;
+  }
+  const newVariant = event.detail as ThemeVariant;
+  themeSwitcher.setVariant(newVariant);
+  selectedVariant.value = newVariant;
+};
 const toggle = () => {
+  if (useSystemTheme.value) {
+    return;
+  }
   themeSwitcher.toggleMode();
+  selectedVariant.value = selectedVariant.value === 'light' ? 'dark' : 'light';
 };
-const systemChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  if (target.checked) {
+const systemChange = (event: CustomEvent<boolean>) => {
+  const checked = event.detail;
+  useSystemTheme.value = checked;
+  if (checked) {
     themeSwitcher.setVariant();
-    return;
+  } else {
+    themeSwitcher.setVariant(selectedVariant.value);
   }
-  themeSwitcher.setTheme(selectedTheme);
 };
 </script>
@@ -4577,27 +4404,35 @@ const systemChange = (event: Event) => {
         <span>Light/Dark</span>
       </IxCol>
       <IxCol>
-        <IxButton @click="toggle">Toggle mode</IxButton>
+        <IxButton @click="toggle" :disabled="useSystemTheme">
+          Toggle mode
+        </IxButton>
       </IxCol>
     </IxRow>
     <IxRow>
       <IxCol :size="'2'">Theme</IxCol>
       <IxCol>
-        <IxSelect id="select-theme" placeholder="Select a theme"> </IxSelect>
+        <IxSelect
+          :value="selectedVariant"
+          @valueChange="valueChange"
+          :disabled="useSystemTheme"
+          placeholder="Select a theme"
+        >
+          <IxSelectItem
+            v-for="variant in variants"
+            :key="variant"
+            :label="variant"
+            :value="variant"
+          />
+        </IxSelect>
       </IxCol>
     </IxRow>
     <IxRow>
       <IxCol :size="'2'"></IxCol>
       <IxCol>
-        <input
-          class="ix-form-control"
-          type="checkbox"
-          id="system"
-          @change="systemChange"
-        />
-        <label class="ix-form-label" for="system">Use System</label>
+        <IxCheckbox label="Use system" @checkedChange="systemChange" />
       </IxCol>
     </IxRow>
   </IxLayoutGrid>
@@ -4725,6 +4560,25 @@ import { IxButton, showToast } from '@siemens/ix-vue';
 </template>
 ```
+### Example: tooltip-with-icon
+```tsx
+<script setup lang="ts">
+import { IxButton, IxTooltip, IxIcon } from '@siemens/ix-vue';
+import { iconInfo } from '@siemens/ix-icons/icons';
+</script>
+<style scoped src="./tooltip.css"></style>
+<template>
+  <IxButton class="any-class" aria-describedby="tooltip-1"> Hover me </IxButton>
+  <IxTooltip id="tooltip-1" for=".any-class">
+    <IxIcon slot="title-icon" :name="iconInfo" :size="16"></IxIcon>
+    <div slot="title-content">Tooltip Title</div>
+    Simple selector with icon</IxTooltip
+  >
+</template>
+```
 ### Example: tooltip
 ```tsx
 <script setup lang="ts">
@@ -5630,7 +5484,8 @@ export default class GroupCustomEntry {}
 import { Component } from '@angular/core';
-import { showModalLoading } from '@siemens/ix';
+import { ModalLoadingContext } from '@siemens/ix';
+import { LoadingService } from '@siemens/ix-angular';
 @Component({
   standalone: false,
@@ -5638,150 +5493,22 @@ import { showModalLoading } from '@siemens/ix';
   template: ` <ix-button (click)="startLoading()">Start loading</ix-button> `,
 })
 export default class Loading {
+  constructor(private readonly loadingService: LoadingService) {}
   startLoading = () => {
     let count = 0;
-    const progress = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext =
+      this.loadingService.showModalLoading('Loading 0/2');
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
       if (count === 2) {
         progress.finish('Done');
-        clearInterval(interval);
-      }
-    }, 1000);
-  };
-}
-```
-### Example: map-navigation-migration
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './map-navigation-migration.html',
-  styleUrls: ['./map-navigation-migration.css'],
-})
-export default class MapNavigationMigration {
-  expanded = false;
-  resetExpanded(event: Event) {
-    requestAnimationFrame(() => {
-      this.expanded = (event as CustomEvent).detail.expanded;
-    });
-  }
-  toggleOverlay() {
-    this.expanded = !this.expanded;
-  }
-}
-```
-#### Component template
-```html
-<ix-application class="application">
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <!--{KEEP} Compare context menu -->
-    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-    </ix-dropdown-button>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <!--{KEEP} Compare overlay -->
-  <ix-pane
-    class="overlay"
-    composition="right"
-    heading="Custom overlay"
-    icon="bulb"
-    size="320px"
-    variant="floating"
-    hide-on-collapse
-    [expanded]="expanded"
-    (expandedChanged)="resetExpanded($event)"
-  >
-    Overlay content
-  </ix-pane>
-  <ix-pane-layout>
-    <!--{KEEP} Compare sidebar -->
-    <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
-      Sidebar content
-    </ix-pane>
-    <ix-content class="content">
-      <ix-content-header slot="header" header-title="My Content Page">
-      </ix-content-header>
-      <ix-button (click)="toggleOverlay()">Open overlay</ix-button>
-    </ix-content>
-  </ix-pane-layout>
-</ix-application>
-```
-### Example: map-navigation-overlay
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-map-navigation
-      application-name="My Application"
-      navigation-title="Navigation title"
-      hide-context-menu="false"
-    >
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content slot="sidebar-content">Sidebar content</ix-content>
-      <ix-content>
-        <ix-content-header
-          slot="header"
-          header-title="My Content Page"
-        ></ix-content-header>
-        <ix-button (click)="showOverlay = true">Show overlay</ix-button>
-      </ix-content>
-      <ix-map-navigation-overlay
-        *ngIf="showOverlay"
-        slot="overlay"
-        name="Custom overlay"
-        icon="bulb"
-        (closeClick)="showOverlay = false"
-      >
-        <ix-content>Overlay content</ix-content>
-      </ix-map-navigation-overlay>
-    </ix-map-navigation>
-  `,
-})
-export default class MapNavigationOverlay {
-  showOverlay = true;
+        clearInterval(interval);
+      }
+    }, 1000);
+  };
 }
 ```
@@ -5887,7 +5614,7 @@ LICENSE file in the root directory of this source tree.
 import { Component } from '@angular/core';
-import { showMessage } from '@siemens/ix';
+import { MessageService } from '@siemens/ix-angular';
 @Component({
   standalone: false,
@@ -5897,9 +5624,11 @@ import { showMessage } from '@siemens/ix';
   `,
 })
 export default class Message {
+  constructor(private readonly messageService: MessageService) {}
   triggerMessage = async () => {
     (
-      await showMessage.success(
+      await this.messageService.success(
         'Example title',
         'message',
         'Save',
@@ -5913,6 +5642,43 @@ export default class Message {
 ```
+### Example: modal-close
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { ModalService } from '@siemens/ix-angular';
+import ModalByInstanceExample from './modal-by-instance-content';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './modal-close.html',
+})
+export default class ModalClose {
+  constructor(private readonly modalService: ModalService) {}
+  async openModal() {
+    const modalInstance = await this.modalService.open({
+      content: ModalByInstanceExample,
+      data: 'Some data',
+    });
+    setTimeout(() => {
+      this.modalService.close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  }
+}
+```
+#### Component template
+```html
+<ix-button variant="secondary" (click)="openModal()">
+  Show modal (auto-dismiss)
+</ix-button>
+```
 ### Example: modal-form-ix-button-submit
 #### Component typescript
 ```typescript
@@ -6095,7 +5861,7 @@ LICENSE file in the root directory of this source tree.
     <p>This is the bottom pane.</p>
   </ix-pane>
-  <div slot="content">
+  <div>
     <ix-button (click)="toggleVariant()" style="margin: 2.5rem"
       >Toggle Variant</ix-button
     >
@@ -6169,8 +5935,8 @@ LICENSE file in the root directory of this source tree.
 ```typescript
-import { Component } from '@angular/core';
-import { themeSwitcher } from '@siemens/ix';
+import { Component, OnInit } from '@angular/core';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 @Component({
   standalone: false,
@@ -6178,30 +5944,48 @@ import { themeSwitcher } from '@siemens/ix';
   templateUrl: './theme-switcher.html',
   styleUrls: ['./theme-switcher.css'],
 })
-export default class ThemeSwitcher {
-  themes = ['theme-classic-light', 'theme-classic-dark'];
-  selectedTheme = this.themes[1];
-  constructor() {}
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
   onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
     const customEvent = event as CustomEvent<string>;
-    const newTheme = customEvent.detail;
-    themeSwitcher.setTheme(newTheme);
-    this.selectedTheme = newTheme;
+    const newVariant = customEvent.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    this.selectedVariant = newVariant;
   }
   toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
     themeSwitcher.toggleMode();
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
   }
-  onSystemMode({ target }: Event) {
-    if ((target as HTMLInputElement).checked) {
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+    if (checked) {
       themeSwitcher.setVariant();
-      return;
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
     }
-    themeSwitcher.setTheme(this.selectedTheme);
   }
 }
@@ -6214,7 +5998,9 @@ export default class ThemeSwitcher {
       <span>Light/Dark</span>
     </ix-col>
     <ix-col>
-      <ix-button (click)="toggleMode()">Toggle mode</ix-button>
+      <ix-button (click)="toggleMode()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
     </ix-col>
   </ix-row>
@@ -6222,14 +6008,15 @@ export default class ThemeSwitcher {
     <ix-col size="2">Theme</ix-col>
     <ix-col>
       <ix-select
-        [value]="selectedTheme"
+        [value]="selectedVariant"
         (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
         placeholder="Select a theme"
       >
         <ix-select-item
-          *ngFor="let theme of themes"
-          [label]="theme"
-          [value]="theme"
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
         ></ix-select-item>
       </ix-select>
     </ix-col>
@@ -6238,13 +6025,10 @@ export default class ThemeSwitcher {
   <ix-row>
     <ix-col size="2"></ix-col>
     <ix-col>
-      <input
-        class="ix-form-control"
-        type="checkbox"
-        id="system"
-        (change)="onSystemMode($event)"
-      />
-      <label class="ix-form-label" for="system">Use System</label>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
     </ix-col>
   </ix-row>
 </ix-layout-grid>
@@ -6421,6 +6205,42 @@ export default class Toast {
 ```
+### Example: tooltip-with-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './tooltip-with-icon.html',
+  styleUrls: ['./tooltip.css'],
+})
+export default class TooltipWithIcon {}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+<ix-tooltip id="tooltip-1" for=".any-class">
+  <ix-icon slot="title-icon" name="info" size="16"></ix-icon>
+  <div slot="title-content">Tooltip Title</div>
+  Simple selector with icon
+</ix-tooltip>
+```
 ### Example: tooltip
 #### Component typescript
 ```typescript
@@ -7497,9 +7317,8 @@ export default class GroupCustomEntry {}
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-import { showModalLoading } from '@siemens/ix';
+import { ModalLoadingContext } from '@siemens/ix';
+import { IxButton, LoadingService } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
@@ -7507,9 +7326,12 @@ import { showModalLoading } from '@siemens/ix';
   template: ` <ix-button (click)="startLoading()">Start loading</ix-button> `,
 })
 export default class Loading {
+  constructor(private readonly loadingService: LoadingService) {}
   startLoading = () => {
     let count = 0;
-    const progress = showModalLoading('Loading 0/2');
+    const progress: ModalLoadingContext =
+      this.loadingService.showModalLoading('Loading 0/2');
     const interval = setInterval(() => {
       count++;
       progress.update(`Loading ${count}/2`);
@@ -7524,191 +7346,6 @@ export default class Loading {
 ```
-### Example: map-navigation-migration
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxPane,
-  IxPaneLayout,
-  IxContent,
-  IxContentHeader,
-  IxButton,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxDropdownButton,
-    IxDropdownItem,
-    IxMenu,
-    IxMenuItem,
-    IxPane,
-    IxPaneLayout,
-    IxContent,
-    IxContentHeader,
-    IxButton,
-  ],
-  templateUrl: './map-navigation-migration.html',
-  styleUrls: ['./map-navigation-migration.css'],
-})
-export default class MapNavigationMigration {
-  expanded = false;
-  resetExpanded(event: Event) {
-    requestAnimationFrame(() => {
-      this.expanded = (event as CustomEvent).detail.expanded;
-    });
-  }
-  toggleOverlay() {
-    this.expanded = !this.expanded;
-  }
-}
-```
-#### 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-application class="application">
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <!--{KEEP} Compare context menu -->
-    <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-      <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-    </ix-dropdown-button>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <!--{KEEP} Compare overlay -->
-  <ix-pane
-    class="overlay"
-    composition="right"
-    heading="Custom overlay"
-    icon="bulb"
-    size="320px"
-    variant="floating"
-    hide-on-collapse
-    [expanded]="expanded"
-    (expandedChanged)="resetExpanded($event)"
-  >
-    Overlay content
-  </ix-pane>
-  <ix-pane-layout>
-    <!--{KEEP} Compare sidebar -->
-    <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
-      Sidebar content
-    </ix-pane>
-    <ix-content class="content">
-      <ix-content-header slot="header" header-title="My Content Page">
-      </ix-content-header>
-      <ix-button (click)="toggleOverlay()">Open overlay</ix-button>
-    </ix-content>
-  </ix-pane-layout>
-</ix-application>
-```
-### Example: map-navigation-overlay
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { NgIf } from '@angular/common';
-import {
-  IxMapNavigation,
-  IxMenu,
-  IxMenuItem,
-  IxContent,
-  IxContentHeader,
-  IxButton,
-  IxMapNavigationOverlay,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxMapNavigation,
-    IxMenu,
-    IxMenuItem,
-    IxContent,
-    IxContentHeader,
-    IxButton,
-    IxMapNavigationOverlay,
-    NgIf,
-  ],
-  template: `
-    <ix-map-navigation
-      application-name="My Application"
-      navigation-title="Navigation title"
-      hide-context-menu="false"
-    >
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content slot="sidebar-content">Sidebar content</ix-content>
-      <ix-content>
-        <ix-content-header
-          slot="header"
-          header-title="My Content Page"
-        ></ix-content-header>
-        <ix-button (click)="showOverlay = true">Show overlay</ix-button>
-      </ix-content>
-      <ix-map-navigation-overlay
-        *ngIf="showOverlay"
-        slot="overlay"
-        name="Custom overlay"
-        icon="bulb"
-        (closeClick)="showOverlay = false"
-      >
-        <ix-content>Overlay content</ix-content>
-      </ix-map-navigation-overlay>
-    </ix-map-navigation>
-  `,
-})
-export default class MapNavigationOverlay {
-  showOverlay = true;
-}
-```
 ### Example: message-bar-removal
 #### Component typescript
 ```typescript
@@ -7784,9 +7421,7 @@ export default class MessageBar {}
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-import { showMessage } from '@siemens/ix';
+import { IxButton, MessageService } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
@@ -7796,9 +7431,11 @@ import { showMessage } from '@siemens/ix';
   `,
 })
 export default class Message {
+  constructor(private readonly messageService: MessageService) {}
   triggerMessage = async () => {
     (
-      await showMessage.success(
+      await this.messageService.success(
         'Example title',
         'message',
         'Save',
@@ -7812,6 +7449,45 @@ export default class Message {
 ```
+### Example: modal-close
+#### Component typescript
+```typescript
+import { Component, inject } from '@angular/core';
+import { IxButton, ModalService } from '@siemens/ix-angular/standalone';
+import ModalByInstanceExample from './modal-by-instance-content';
+@Component({
+  selector: 'app-example',
+  imports: [IxButton],
+  providers: [ModalService],
+  templateUrl: './modal-close.html',
+})
+export default class ModalClose {
+  private modalService = inject(ModalService);
+  async openModal() {
+    const modalInstance = await this.modalService.open({
+      content: ModalByInstanceExample,
+      data: 'Some data',
+    });
+    setTimeout(() => {
+      this.modalService.close(modalInstance, 'closed after 5 seconds');
+    }, 5000);
+  }
+}
+```
+#### Component template
+```html
+<ix-button variant="secondary" (click)="openModal()">
+  Show modal (auto-dismiss)
+</ix-button>
+```
 ### Example: modal-form-ix-button-submit
 #### Component typescript
 ```typescript
@@ -7904,9 +7580,9 @@ LICENSE file in the root directory of this source tree.
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
+import { IxButton, ModalService } from '@siemens/ix-angular/standalone';
-import { IxModalSize, ModalService } from '@siemens/ix-angular';
+import { IxModalSize } from '@siemens/ix-angular';
 @Component({
   selector: 'app-example',
@@ -8018,7 +7694,7 @@ LICENSE file in the root directory of this source tree.
     <p>This is the bottom pane.</p>
   </ix-pane>
-  <div slot="content">
+  <div>
     <ix-button (click)="toggleVariant()" style="margin: 2.5rem"
       >Toggle Variant</ix-button
     >
@@ -8093,20 +7769,21 @@ LICENSE file in the root directory of this source tree.
 ```typescript
-import { Component } from '@angular/core';
 import { NgForOf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
 import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
   IxLayoutGrid,
   IxRow,
-  IxCol,
-  IxButton,
   IxSelect,
   IxSelectItem,
   IxSelectValueAccessorDirective,
 } from '@siemens/ix-angular/standalone';
-import { themeSwitcher } from '@siemens/ix';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
 @Component({
   selector: 'app-example',
@@ -8115,6 +7792,7 @@ import { themeSwitcher } from '@siemens/ix';
     IxRow,
     IxCol,
     IxButton,
+    IxCheckbox,
     IxSelect,
     IxSelectItem,
     IxSelectValueAccessorDirective,
@@ -8123,30 +7801,48 @@ import { themeSwitcher } from '@siemens/ix';
   templateUrl: './theme-switcher.html',
   styleUrls: ['./theme-switcher.css'],
 })
-export default class ThemeSwitcher {
-  themes = ['theme-classic-light', 'theme-classic-dark'];
-  selectedTheme = this.themes[1];
-  constructor() {}
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
   onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
     const customEvent = event as CustomEvent<string>;
-    const newTheme = customEvent.detail;
-    themeSwitcher.setTheme(newTheme);
-    this.selectedTheme = newTheme;
+    const newVariant = customEvent.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    this.selectedVariant = newVariant;
   }
   toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
     themeSwitcher.toggleMode();
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
   }
-  onSystemMode({ target }: Event) {
-    if ((target as HTMLInputElement).checked) {
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+    if (checked) {
       themeSwitcher.setVariant();
-      return;
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
     }
-    themeSwitcher.setTheme(this.selectedTheme);
   }
 }
@@ -8168,7 +7864,9 @@ LICENSE file in the root directory of this source tree.
       <span>Light/Dark</span>
     </ix-col>
     <ix-col>
-      <ix-button (click)="toggleMode()">Toggle mode</ix-button>
+      <ix-button (click)="toggleMode()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
     </ix-col>
   </ix-row>
@@ -8176,14 +7874,15 @@ LICENSE file in the root directory of this source tree.
     <ix-col size="2">Theme</ix-col>
     <ix-col>
       <ix-select
-        [value]="selectedTheme"
+        [value]="selectedVariant"
         (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
         placeholder="Select a theme"
       >
         <ix-select-item
-          *ngFor="let theme of themes"
-          [label]="theme"
-          [value]="theme"
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
         ></ix-select-item>
       </ix-select>
     </ix-col>
@@ -8192,8 +7891,10 @@ LICENSE file in the root directory of this source tree.
   <ix-row>
     <ix-col size="2"></ix-col>
     <ix-col>
-      <input type="checkbox" id="system" (change)="onSystemMode($event)" />
-      <label for="system">Use System</label>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
     </ix-col>
   </ix-row>
 </ix-layout-grid>
@@ -8260,13 +7961,12 @@ export default class Tile {}
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-import { ToastService } from '@siemens/ix-angular';
+import { IxButton, ToastService } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ToastService],
   template: `
     <ix-button (click)="showToastMessage()" style="margin-right: 0.5rem">
       Trigger toast with custom message
@@ -8322,13 +8022,12 @@ export default class ToastCustom {
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-import { ToastService } from '@siemens/ix-angular';
+import { IxButton, ToastService } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ToastService],
   template: `
     <ix-button (click)="showToastMessage()">Trigger toast</ix-button>
   `,
@@ -8352,13 +8051,12 @@ export default class ToastPosition {
 import { Component } from '@angular/core';
-import { IxButton } from '@siemens/ix-angular/standalone';
-import { ToastService } from '@siemens/ix-angular';
+import { IxButton, ToastService } from '@siemens/ix-angular/standalone';
 @Component({
   selector: 'app-example',
   imports: [IxButton],
+  providers: [ToastService],
   template: `
     <ix-button (click)="showToastMessage()">Trigger toast</ix-button>
   `,
@@ -8375,6 +8073,43 @@ export default class Toast {
 ```
+### Example: tooltip-with-icon
+#### Component typescript
+```typescript
+import { Component } from '@angular/core';
+import { IxButton, IxIcon, IxTooltip } from '@siemens/ix-angular/standalone';
+@Component({
+  selector: 'app-example',
+  imports: [IxButton, IxTooltip, IxIcon],
+  templateUrl: './tooltip-with-icon.html',
+  styleUrls: ['./tooltip.css'],
+})
+export default class Tooltip {}
+```
+#### 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 class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+<ix-tooltip id="tooltip-1" for=".any-class">
+  <ix-icon slot="title-icon" name="info" size="16"></ix-icon>
+  <div slot="title-content">Tooltip Title</div>
+  Simple selector with icon
+</ix-tooltip>
+```
 ### Example: tooltip
 #### Component typescript
 ```typescript
@@ -8597,10 +8332,6 @@ LICENSE file in the root directory of this source tree.
 ```
-<!-- Auto Generated Below -->
 ## Properties
 | Property          | Attribute           | Description                                                                                                                        | Type                                                                                                                                                                   | Default     |