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

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 4.1.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 (996) hide show

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

@@ -1,3466 +1,3 @@
-# ix-menu-item
-## HTML Examples
-### Example: application-advanced
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application advanced example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconAlarmBell,
-        iconHome,
-        iconPiechart,
-        iconPlant,
-        iconNetworkDevice,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconAlarmBell,
-        iconHome,
-        iconPiechart,
-        iconPlant,
-        iconNetworkDevice,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-        <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item home icon="home" active>Home</ix-menu-item>
-        <ix-menu-item icon="alarm-bell">Alarm</ix-menu-item>
-        <ix-menu-category icon="piechart" label="Analysis">
-          <ix-menu-item icon="plant">Plant</ix-menu-item>
-          <ix-menu-item icon="network-device">Network</ix-menu-item>
-        </ix-menu-category>
-        <ix-menu-settings></ix-menu-settings>
-        <ix-menu-about></ix-menu-about>
-      </ix-menu>
-      <ix-content>
-        <ix-content-header
-          id="contentHeaderId"
-          header-title="Example home content"
-        ></ix-content-header>
-      </ix-content>
-    </ix-application>
-    <script type="module">
-      (async function () {
-        await window.customElements.whenDefined('ix-menu');
-        const menuItems = document.querySelectorAll('ix-menu-item');
-        function registerClickListener(itemElement) {
-          itemElement.addEventListener('click', () => {
-            for (const item of menuItems) {
-              item.removeAttribute('active');
-            }
-            itemElement.setAttribute('active', '');
-            document
-              .getElementById('contentHeaderId')
-              .setAttribute(
-                'header-title',
-                `Example ${itemElement.innerText.toLowerCase()} content`
-              );
-          });
-        }
-        for (const element of menuItems) {
-          registerClickListener(element);
-        }
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: application-app-switch
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application app switch example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header name="Calculator App">
-        <placeholder-logo slot="logo"></placeholder-logo>
-        <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-avatar>
-          <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-          <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-          <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-        </ix-avatar>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content>
-        <ix-content-header slot="header" header-title="My Content Page">
-        </ix-content-header>
-      </ix-content>
-    </ix-application>
-    <script type="module">
-      const application = document.querySelector('ix-application');
-      application.appSwitchConfig = {
-        i18nAppSwitch: 'Switch to Application',
-        currentAppId: 'demo-app-2',
-        apps: [
-          {
-            id: 'demo-app-1',
-            name: 'Floor App',
-            iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-            url: 'https://ix.siemens.io/',
-            description: 'Example description for Floor app',
-            target: '_self',
-          },
-          {
-            id: 'demo-app-2',
-            name: 'Calculator App',
-            iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-            url: 'https://ix.siemens.io/',
-            description: 'Example description for Calculator app',
-            target: '_self',
-          },
-        ],
-      };
-    </script>
-    <script type="module">
-      import {
-        pulseOnElement,
-        waitForElement,
-        getElementPosition,
-      } from './utils.js';
-      pulseOnElement(() =>
-        document
-          .querySelector('ix-application-header')
-          .shadowRoot.querySelector('ix-icon-button.app-switch')
-      );
-    </script>
-    <script type="module">
-      (async () => {
-        await window.customElements.whenDefined('ix-application');
-        const menu = document.querySelector('ix-application');
-        menu.breakpoints = ['md'];
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: application-breakpoints
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application breakpoints example</title>
-  </head>
-  <body>
-    <ix-application application-name="Application name">
-      <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-avatar>
-          <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-          <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-          <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-        </ix-avatar>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content>
-        <ix-content-header slot="header" header-title="Choose breakpoint">
-        </ix-content-header>
-        <ix-radio-group id="radio-group" value="md">
-          <ix-radio value="sm" label="Small"></ix-radio>
-          <ix-radio value="md" label="Medium"></ix-radio>
-          <ix-radio value="lg" label="Large"></ix-radio>
-        </ix-radio-group>
-      </ix-content>
-    </ix-application>
-    <script type="module">
-      (async () => {
-        const validBreakpoints = new Set(['sm', 'md', 'lg']);
-        await globalThis.customElements.whenDefined('ix-application');
-        await globalThis.customElements.whenDefined('ix-radio-group');
-        const nav = document.querySelector('ix-application');
-        nav.breakpoints = ['md'];
-        const radioGroup = document.getElementById('radio-group');
-        radioGroup.addEventListener('valueChange', ({ detail }) => {
-          if (validBreakpoints.has(detail)) {
-            nav.breakpoints = [detail];
-          }
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: application
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content>
-        <ix-content-header slot="header" header-title="My Content Page">
-        </ix-content-header>
-      </ix-content>
-    </ix-application>
-    <script type="module">
-      (async () => {
-        await window.customElements.whenDefined('ix-application');
-        const menu = document.querySelector('ix-application');
-        menu.breakpoints = ['md'];
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: basic-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>Basic navigation migration example</title>
-    <link rel="stylesheet" href="./basic-navigation-migration.css" />
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-    </ix-application>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: basic-navigation-without-header
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Basic navigation without header example</title>
-  </head>
-  <body>
-    <ix-basic-navigation hide-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-    </ix-basic-navigation>
-    <script type="module">
-      (async () => {
-        await window.customElements.whenDefined('ix-menu');
-        const menu = document.querySelector('ix-menu');
-        menu.breakpoints = ['medium'];
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: basic-navigation
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Basic navigation example</title>
-    <link rel="stylesheet" href="./basic-navigation.css" />
-  </head>
-  <body>
-    <ix-basic-navigation application-name="Application name">
-      <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-basic-navigation>
-    <script type="module">
-      (async () => {
-        await window.customElements.whenDefined('ix-menu');
-        const menu = document.querySelector('ix-menu');
-        menu.breakpoints = ['medium'];
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</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: map-navigation
-```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 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-content>
-    </ix-map-navigation>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: menu-category
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Menu category example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconHome, iconGlobe, iconRocket } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconHome, iconGlobe, iconRocket,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application force-breakpoint="lg">
-      <ix-menu>
-        <ix-menu-item home icon="home">Home</ix-menu-item>
-        <ix-menu-item icon="globe">Normal Tab</ix-menu-item>
-        <ix-menu-category label="Top level Category" icon="rocket">
-          <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
-          <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
-        </ix-menu-category>
-      </ix-menu>
-    </ix-application>
-    <script type="module">
-      (async () => {
-        await window.customElements.whenDefined('ix-menu');
-        const menu = document.querySelector('ix-menu');
-        menu.breakpoints = ['medium'];
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: menu-with-bottom-tabs
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Menu with bottom tabs example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconHome, iconInfo } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconHome,
-        iconInfo,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-menu>
-      <ix-menu-item home icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="info" slot="bottom">Bottom tab</ix-menu-item>
-    </ix-menu>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: vertical-tabs-with-avatar
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vertical tabs with avatar example</title>
-    <link rel="stylesheet" href="./vertical-tabs-with-avatar.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconUserProfile,
-        iconHome,
-        iconGlobe,
-        iconStar,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconUserProfile,
-        iconHome,
-        iconGlobe,
-        iconStar,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-menu>
-      <ix-menu-avatar
-        top="john.doe@company.com"
-        bottom="Administrator"
-        image="https://ui-avatars.com/api/?name=John+Doe"
-      >
-        <ix-menu-avatar-item
-          icon="user-profile"
-          label="User profile..."
-        ></ix-menu-avatar-item>
-      </ix-menu-avatar>
-      <ix-menu-item home icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="globe">Normal tab</ix-menu-item>
-      <ix-menu-item icon="star" disabled>Disabled tab</ix-menu-item>
-      <ix-menu-item icon="star">With other icon</ix-menu-item>
-      <ix-menu-item icon="globe" style="display: none">
-        Should not be visible
-      </ix-menu-item>
-    </ix-menu>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: vertical-tabs
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vertical tabs example</title>
-    <link rel="stylesheet" href="./vertical-tabs.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconUserProfile,
-        iconHome,
-        iconGlobe,
-        iconStar,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconUserProfile,
-        iconHome,
-        iconGlobe,
-        iconStar,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-menu>
-      <ix-menu-item home icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="globe">Normal tab</ix-menu-item>
-      <ix-menu-item icon="star" disabled>Disabled tab</ix-menu-item>
-      <ix-menu-item icon="star">With other icon</ix-menu-item>
-      <ix-menu-item icon="globe" style="display: none">
-        Should not be visible
-      </ix-menu-item>
-    </ix-menu>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: application-advanced
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuCategory,
-  IxMenuItem,
-  IxMenuSettings,
-} from '@siemens/ix-react';
-import {
-  iconAlarmBell,
-  iconHome,
-  iconPiechart,
-  iconPlant,
-  iconNetworkDevice,
-} from '@siemens/ix-icons/icons';
-import { useState } from 'react';
-export default function ApplicationAdvancedExample() {
-  const [activeContent, setActiveContent] = useState('home');
-  return (
-    <IxApplication>
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-        <IxAvatar username="Example User" extra="Additional info"></IxAvatar>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem
-          home
-          icon={iconHome}
-          onClick={() => setActiveContent('home')}
-          active={activeContent === 'home'}
-        >
-          Home
-        </IxMenuItem>
-        <IxMenuItem
-          icon={iconAlarmBell}
-          onClick={() => setActiveContent('alarm')}
-          active={activeContent === 'alarm'}
-        >
-          Alarm
-        </IxMenuItem>
-        <IxMenuCategory icon={iconPiechart} label="Analysis">
-          <IxMenuItem
-            icon={iconPlant}
-            onClick={() => setActiveContent('plant')}
-            active={activeContent === 'plant'}
-          >
-            Plant
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconNetworkDevice}
-            onClick={() => setActiveContent('network')}
-            active={activeContent === 'network'}
-          >
-            Network
-          </IxMenuItem>
-        </IxMenuCategory>
-        <IxMenuSettings></IxMenuSettings>
-        <IxMenuAbout></IxMenuAbout>
-      </IxMenu>
-      <IxContent>
-        <IxContentHeader
-          headerTitle={`Example ${activeContent} content`}
-        ></IxContentHeader>
-      </IxContent>
-    </IxApplication>
-  );
-};
-```
-### Example: application-app-switch
-```tsx
-import { AppSwitchConfiguration } from '@siemens/ix';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-react';
-const appSwitchConfig: AppSwitchConfiguration = {
-  i18nAppSwitch: 'Switch to Application',
-  currentAppId: 'demo-app-2',
-  apps: [
-    {
-      id: 'demo-app-1',
-      name: 'Floor App',
-      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-      url: 'https://ix.siemens.io/',
-      description: 'Example description for Floor app',
-      target: '_self',
-    },
-    {
-      id: 'demo-app-2',
-      name: 'Calculator App',
-      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-      url: 'https://ix.siemens.io/',
-      description: 'Example description for Calculator app',
-      target: '_self',
-    },
-  ],
-};
-export default () => {
-  return (
-    <IxApplication appSwitchConfig={appSwitchConfig}>
-      <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>
-        <IxAvatar>
-          <IxDropdownItem label="Action 1"></IxDropdownItem>
-          <IxDropdownItem label="Action 2"></IxDropdownItem>
-          <IxDropdownItem label="Action 3"></IxDropdownItem>
-        </IxAvatar>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      <IxContent>
-        <IxContentHeader
-          slot="header"
-          headerTitle="My Content Page"
-        ></IxContentHeader>
-      </IxContent>
-    </IxApplication>
-  );
-};
-```
-### Example: application-breakpoints
-```tsx
-import { Breakpoint } from '@siemens/ix';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxRadio,
-  IxRadioGroup,
-} from '@siemens/ix-react';
-import { useState } from 'react';
-const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-export default () => {
-  const [breakpoints, setBreakpoints] = useState<Breakpoint[]>(['md']);
-  const handleBreakpointChange = (event: CustomEvent<string>) => {
-    const value = event.detail;
-    if (validBreakpoints.has(value as Breakpoint)) {
-      setBreakpoints([value as Breakpoint]);
-    }
-  };
-  return (
-    <IxApplication breakpoints={breakpoints}>
-      <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>
-        <IxAvatar>
-          <IxDropdownItem label="Action 1"></IxDropdownItem>
-          <IxDropdownItem label="Action 2"></IxDropdownItem>
-          <IxDropdownItem label="Action 3"></IxDropdownItem>
-        </IxAvatar>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      <IxContent>
-        <IxContentHeader
-          slot="header"
-          headerTitle="Choose breakpoint"
-        ></IxContentHeader>
-        <IxRadioGroup
-          value={breakpoints[0]}
-          onValueChange={handleBreakpointChange}
-        >
-          <IxRadio value="sm" label="Small"></IxRadio>
-          <IxRadio value="md" label="Medium"></IxRadio>
-          <IxRadio value="lg" label="Large"></IxRadio>
-        </IxRadioGroup>
-      </IxContent>
-    </IxApplication>
-  );
-};
-```
-### Example: application
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplication>
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      <IxContent>
-        <IxContentHeader
-          slot="header"
-          headerTitle="My Content Page"
-        ></IxContentHeader>
-      </IxContent>
-    </IxApplication>
-  );
-};
-```
-### Example: basic-navigation-migration
-```tsx
-import './basic-navigation-migration.scoped.css';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplication>
-      {}
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-### Example: basic-navigation-without-header
-```tsx
-import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxBasicNavigation hideHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-    </IxBasicNavigation>
-  );
-};
-```
-### Example: basic-navigation
-```tsx
-import './basic-navigation.scoped.css';
-import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxBasicNavigation applicationName="Application name">
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-    </IxBasicNavigation>
-  );
-};
-```
-### 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: map-navigation
-```tsx
-import {
-  IxContent,
-  IxContentHeader,
-  IxMapNavigation,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-react';
-export default () => {
-  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>
-      </IxContent>
-    </IxMapNavigation>
-  );
-};
-```
-### Example: menu-category
-```tsx
-import { iconGlobe, iconHome, iconRocket } from '@siemens/ix-icons/icons';
-import {
-  IxApplication,
-  IxMenu,
-  IxMenuCategory,
-  IxMenuItem,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplication>
-      <IxMenu>
-        <IxMenuItem home icon={iconHome}>
-          Home
-        </IxMenuItem>
-        <IxMenuItem icon={iconGlobe}>Normal Tab</IxMenuItem>
-        <IxMenuCategory label="Top level Category" icon={iconRocket}>
-          <IxMenuItem icon={iconGlobe}>Nested Tab</IxMenuItem>
-          <IxMenuItem icon={iconGlobe}>Nested Tab</IxMenuItem>
-        </IxMenuCategory>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-### Example: menu-with-bottom-tabs
-```tsx
-import { iconGlobe, iconHome } from '@siemens/ix-icons/icons';
-import { IxMenu, IxMenuItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxMenu>
-      <IxMenuItem home icon={iconHome}>
-        Home
-      </IxMenuItem>
-      <IxMenuItem icon={iconGlobe} slot="bottom">
-        Bottom Tab
-      </IxMenuItem>
-    </IxMenu>
-  );
-};
-```
-### Example: vertical-tabs-with-avatar
-```tsx
-import {
-  iconGlobe,
-  iconHome,
-  iconStar,
-  iconUserProfile,
-} from '@siemens/ix-icons/icons';
-import './vertical-tabs-with-avatar.scoped.css';
-import {
-  IxMenu,
-  IxMenuAvatar,
-  IxMenuAvatarItem,
-  IxMenuItem,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxMenu>
-      <IxMenuAvatar
-        top="john.doe@company.com"
-        bottom="Administrator"
-        image="https://ui-avatars.com/api/?name=John+Doe"
-      >
-        <IxMenuAvatarItem
-          icon={iconUserProfile}
-          label="User profile..."
-        ></IxMenuAvatarItem>
-      </IxMenuAvatar>
-      <IxMenuItem home icon={iconHome}>
-        Home
-      </IxMenuItem>
-      <IxMenuItem icon={iconGlobe}>Normal tab</IxMenuItem>
-      <IxMenuItem icon={iconStar} disabled>
-        Disabled Tab
-      </IxMenuItem>
-      <IxMenuItem icon={iconStar}>With other icon</IxMenuItem>
-      <IxMenuItem icon={iconStar} style={{ display: 'none' }}>
-        Should not be visible
-      </IxMenuItem>
-    </IxMenu>
-  );
-};
-```
-### Example: vertical-tabs
-```tsx
-import { iconGlobe, iconHome, iconStar } from '@siemens/ix-icons/icons';
-import './vertical-tabs.scoped.css';
-import { IxMenu, IxMenuItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxMenu>
-      <IxMenuItem home icon={iconHome}>
-        Home
-      </IxMenuItem>
-      <IxMenuItem icon={iconGlobe}>Normal tab</IxMenuItem>
-      <IxMenuItem icon={iconStar} disabled>
-        Disabled tab
-      </IxMenuItem>
-      <IxMenuItem icon={iconStar}>With other icon</IxMenuItem>
-      <IxMenuItem icon={iconGlobe} style={{ display: 'none' }}>
-        Should not be visible
-      </IxMenuItem>
-    </IxMenu>
-  );
-};
-```
-## Vue Examples
-### Example: application-advanced
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuCategory,
-  IxMenuItem,
-  IxMenuSettings,
-} from '@siemens/ix-vue';
-import {
-  iconAlarmBell,
-  iconHome,
-  iconPiechart,
-  iconPlant,
-  iconNetworkDevice,
-} from '@siemens/ix-icons/icons';
-import { ref } from 'vue';
-const activeContent = ref('home');
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader name="My Application">
-      <div class="placeholder-logo" slot="logo"></div>
-      <IxAvatar username="Example User" extra="Additional info"></IxAvatar>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem
-        home
-        :icon="iconHome"
-        :active="activeContent === 'home'"
-        @click="activeContent = 'home'"
-        >Home</IxMenuItem
-      >
-      <IxMenuItem
-        :icon="iconAlarmBell"
-        :active="activeContent === 'alarm'"
-        @click="activeContent = 'alarm'"
-        >Alarm</IxMenuItem
-      >
-      <IxMenuCategory :icon="iconPiechart" label="Analysis">
-        <IxMenuItem
-          :icon="iconPlant"
-          :active="activeContent === 'plant'"
-          @click="activeContent = 'plant'"
-          >Plant</IxMenuItem
-        >
-        <IxMenuItem
-          :icon="iconNetworkDevice"
-          :active="activeContent === 'network'"
-          @click="activeContent = 'network'"
-          >Network</IxMenuItem
-        >
-      </IxMenuCategory>
-      <IxMenuSettings></IxMenuSettings>
-      <IxMenuAbout></IxMenuAbout>
-    </IxMenu>
-    <IxContent>
-      <IxContentHeader
-        :header-title="`Example ${activeContent} content`"
-      ></IxContentHeader>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: application-app-switch
-```tsx
-<script setup lang="ts">
-import { AppSwitchConfiguration } from '@siemens/ix';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-const appSwitchConfig: AppSwitchConfiguration = {
-  i18nAppSwitch: 'Switch to Application',
-  currentAppId: 'demo-app-2',
-  apps: [
-    {
-      id: 'demo-app-1',
-      name: 'Floor App',
-      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-      url: 'https://ix.siemens.io/',
-      description: 'Example description for Floor app',
-      target: '_self',
-    },
-    {
-      id: 'demo-app-2',
-      name: 'Calculator App',
-      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-      url: 'https://ix.siemens.io/',
-      description: 'Example description for Calculator app',
-      target: '_self',
-    },
-  ],
-};
-</script>
-<template>
-  <IxApplication :appSwitchConfig="appSwitchConfig">
-    <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>
-      <IxAvatar>
-        <IxDropdownItem label="Action 1"></IxDropdownItem>
-        <IxDropdownItem label="Action 2"></IxDropdownItem>
-        <IxDropdownItem label="Action 3"></IxDropdownItem>
-      </IxAvatar>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-    <IxContent>
-      <IxContentHeader
-        slot="header"
-        header-title="My Content Page"
-      ></IxContentHeader>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: application-breakpoints
-```tsx
-<script setup lang="ts">
-import type { Breakpoint } from '@siemens/ix';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxRadio,
-  IxRadioGroup,
-} from '@siemens/ix-vue';
-</script>
-<script lang="ts">
-const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-export default {
-  data(): {
-    breakpoints: Breakpoint[];
-  } {
-    return {
-      breakpoints: ['md'],
-    };
-  },
-  methods: {
-    setBreakpoint(value: Breakpoint) {
-      if (validBreakpoints.has(value)) {
-        this.breakpoints = [value];
-      }
-    },
-  },
-};
-</script>
-<template>
-  <IxApplication :breakpoints="breakpoints">
-    <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>
-      <IxAvatar>
-        <IxDropdownItem label="Action 1"></IxDropdownItem>
-        <IxDropdownItem label="Action 2"></IxDropdownItem>
-        <IxDropdownItem label="Action 3"></IxDropdownItem>
-      </IxAvatar>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-    <IxContent>
-      <IxContentHeader
-        slot="header"
-        header-title="Choose breakpoint"
-      ></IxContentHeader>
-      <IxRadioGroup :value="breakpoints[0]">
-        <IxRadio
-          value="sm"
-          label="Small"
-          @click="setBreakpoint('sm')"
-        ></IxRadio>
-        <IxRadio
-          value="md"
-          label="Medium"
-          @click="setBreakpoint('md')"
-        ></IxRadio>
-        <IxRadio
-          value="lg"
-          label="Large"
-          @click="setBreakpoint('lg')"
-        ></IxRadio>
-      </IxRadioGroup>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: application
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader name="My Application">
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-    <IxContent>
-      <IxContentHeader
-        slot="header"
-        header-title="My Content Page"
-      ></IxContentHeader>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: basic-navigation-migration
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-</script>
-<style scoped src="./basic-navigation-migration.css"></style>
-<template>
-  <IxApplication>
-    <IxApplicationHeader name="My Application">
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-### Example: basic-navigation-without-header
-```tsx
-<script setup lang="ts">
-import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxBasicNavigation hideHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-  </IxBasicNavigation>
-</template>
-```
-### Example: basic-navigation
-```tsx
-<script setup lang="ts">
-import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-vue';
-</script>
-<style scoped src="./basic-navigation.css"></style>
-<template>
-  <IxBasicNavigation applicationName="Application name">
-    <div className="placeholder-logo" slot="logo"></div>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-  </IxBasicNavigation>
-</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: map-navigation
-```tsx
-<script setup lang="ts">
-import {
-  IxContent,
-  IxContentHeader,
-  IxMapNavigation,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-</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>
-    </IxContent>
-  </IxMapNavigation>
-</template>
-```
-### Example: menu-category
-```tsx
-<script setup lang="ts">
-import { iconGlobe, iconHome, iconRocket } from '@siemens/ix-icons/icons';
-import {
-  IxApplication,
-  IxMenu,
-  IxMenuCategory,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-</script>
-<template>
-  <IxApplication>
-    <IxMenu>
-      <IxMenuItem home :icon="iconHome"> Home </IxMenuItem>
-      <IxMenuItem :icon="iconGlobe">Normal Tab</IxMenuItem>
-      <IxMenuCategory label="Top level Category" :icon="iconRocket">
-        <IxMenuItem :icon="iconGlobe">Nested Tab</IxMenuItem>
-        <IxMenuItem :icon="iconGlobe">Nested Tab</IxMenuItem>
-      </IxMenuCategory>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-### Example: menu-with-bottom-tabs
-```tsx
-<script setup lang="ts">
-import { iconGlobe, iconHome } from '@siemens/ix-icons/icons';
-import { IxMenu, IxMenuItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxMenu>
-    <IxMenuItem home-tab :icon="iconHome">Home</IxMenuItem>
-    <IxMenuItem :icon="iconGlobe" slot="bottom">Bottom Tab</IxMenuItem>
-  </IxMenu>
-</template>
-```
-### Example: vertical-tabs-with-avatar
-```tsx
-<script setup lang="ts">
-import {
-  iconGlobe,
-  iconHome,
-  iconStar,
-  iconUserProfile,
-} from '@siemens/ix-icons/icons';
-import {
-  IxMenu,
-  IxMenuAvatar,
-  IxMenuAvatarItem,
-  IxMenuItem,
-} from '@siemens/ix-vue';
-</script>
-<style scoped src="./vertical-tabs-with-avatar.css"></style>
-<template>
-  <IxMenu>
-    <IxMenuAvatar top="john.doe@company.com" bottom="Administrator">
-      <IxMenuAvatarItem
-        :icon="iconUserProfile"
-        label="User profile..."
-      ></IxMenuAvatarItem>
-    </IxMenuAvatar>
-    <IxMenuItem home-tab :icon="iconHome">Home</IxMenuItem>
-    <IxMenuItem :icon="iconGlobe">Normal tab</IxMenuItem>
-    <IxMenuItem :icon="iconStar" disabled>Disabled tab</IxMenuItem>
-    <IxMenuItem :icon="iconStar">With other icon</IxMenuItem>
-    <IxMenuItem :icon="iconStar" style="display: none"
-      >Should not be visible</IxMenuItem
-    >
-  </IxMenu>
-</template>
-```
-### Example: vertical-tabs
-```tsx
-<script setup lang="ts">
-import { iconGlobe, iconHome, iconStar } from '@siemens/ix-icons/icons';
-import { IxMenu, IxMenuItem } from '@siemens/ix-vue';
-</script>
-<style scoped src="./vertical-tabs.css"></style>
-<template>
-  <IxMenu>
-    <IxMenuItem home-tab :icon="iconHome">Home</IxMenuItem>
-    <IxMenuItem :icon="iconGlobe">Normal tab</IxMenuItem>
-    <IxMenuItem :icon="iconStar" disabled>Disabled tab</IxMenuItem>
-    <IxMenuItem :icon="iconStar">With other icon</IxMenuItem>
-    <IxMenuItem :icon="iconGlobe" style="display: none">
-      Should not be visible
-    </IxMenuItem>
-  </IxMenu>
-</template>
-```
-## Angular Examples
-### Example: application-advanced
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  selector: 'app-example',
-  templateUrl: './application-advanced.html',
-  standalone: false,
-})
-export default class ApplicationAdvancedExample {
-  activeContent: string = 'home';
-  updateContent(contentKey: string) {
-    this.activeContent = contentKey;
-  }
-}
-```
-#### 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>
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item
-      home
-      icon="home"
-      (click)="updateContent('home')"
-      [active]="activeContent === 'home'"
-      >Home</ix-menu-item
-    >
-    <ix-menu-item
-      icon="alarm-bell"
-      (click)="updateContent('alarm')"
-      [active]="activeContent === 'alarm'"
-      >Alarm</ix-menu-item
-    >
-    <ix-menu-category icon="piechart" label="Analysis">
-      <ix-menu-item
-        icon="plant"
-        (click)="updateContent('plant')"
-        [active]="activeContent === 'plant'"
-        >Plant</ix-menu-item
-      >
-      <ix-menu-item
-        icon="network-device"
-        (click)="updateContent('network')"
-        [active]="activeContent === 'network'"
-        >Network</ix-menu-item
-      >
-    </ix-menu-category>
-    <ix-menu-settings></ix-menu-settings>
-    <ix-menu-about></ix-menu-about>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header headerTitle="Example {{ activeContent }} content"></ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: application-app-switch
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { AppSwitchConfiguration } from '@siemens/ix';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './application-app-switch.html',
-})
-export default class ApplicationAppSwitchExample {
-  appSwitchConfig: AppSwitchConfiguration = {
-    i18nAppSwitch: 'Switch to Application',
-    currentAppId: 'demo-app-2',
-    apps: [
-      {
-        id: 'demo-app-1',
-        name: 'Floor App',
-        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-        url: 'https://ix.siemens.io/',
-        description: 'Example description for Floor app',
-        target: '_self',
-      },
-      {
-        id: 'demo-app-2',
-        name: 'Calculator App',
-        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-        url: 'https://ix.siemens.io/',
-        description: 'Example description for Calculator app',
-        target: '_self',
-      },
-    ],
-  };
-}
-```
-#### 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-application [appSwitchConfig]="appSwitchConfig">
-  <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-avatar>
-      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-    </ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="My Content Page">
-    </ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: application-breakpoints
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { Breakpoint } from '@siemens/ix';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './application-breakpoints.html',
-})
-export default class ApplicationBreakpointExample {
-  breakpoints: Breakpoint[] = ['md'];
-  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-  onCheckedChange(value: string) {
-    const breakpoint = value as Breakpoint;
-    if (this.validBreakpoints.has(breakpoint)) {
-      this.breakpoints = [breakpoint];
-    }
-  }
-}
-```
-#### 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-application application-name="Application name" [breakpoints]="breakpoints">
-  <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-avatar>
-      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-    </ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="Choose breakpoint">
-    </ix-content-header>
-    <ix-radio-group
-      [value]="breakpoints[0]"
-      (valueChange)="onCheckedChange($event.detail)"
-    >
-      <ix-radio value="sm" label="Small"></ix-radio>
-      <ix-radio value="md" label="Medium"></ix-radio>
-      <ix-radio value="lg" label="Large"></ix-radio>
-    </ix-radio-group>
-  </ix-content>
-</ix-application>
-```
-### Example: application
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './application.html',
-})
-export default class ApplicationExample {}
-```
-#### 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-application>
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="My Content Page">
-    </ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: basic-navigation-migration
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './basic-navigation-migration.html',
-  styleUrls: ['./basic-navigation-migration.css'],
-})
-export default class BasicNavigationMigration {}
-```
-#### 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-application>
-  <!--{KEEP} Compare hideHeader property -->
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-</ix-application>
-```
-### Example: basic-navigation-without-header
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-basic-navigation hideHeader>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-    </ix-basic-navigation>
-  `,
-})
-export default class BasicNavigationWithOutHeader {}
-```
-### Example: basic-navigation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-basic-navigation applicationName="Application name">
-      <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-basic-navigation>
-  `,
-  styleUrls: ['./basic-navigation.css'],
-})
-export default class BasicNavigation {}
-```
-### 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;
-}
-```
-### Example: map-navigation
-#### 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-content>
-    </ix-map-navigation>
-  `,
-})
-export default class MapNavigation {}
-```
-### Example: menu-category
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './menu-category.html',
-})
-export default class MenuCategory {}
-```
-#### Component template
-```html
-<ix-application>
-  <ix-menu>
-    <ix-menu-item home icon="home">Home</ix-menu-item>
-    <ix-menu-item icon="globe">Normal Tab</ix-menu-item>
-    <ix-menu-category label="Top level Category" icon="rocket">
-      <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
-      <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
-    </ix-menu-category>
-  </ix-menu>
-</ix-application>
-```
-### Example: menu-with-bottom-tabs
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-menu>
-      <ix-menu-item home-tab icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="info" slot="bottom">Bottom tab</ix-menu-item>
-    </ix-menu>
-  `,
-})
-export default class VerticalTabs {}
-```
-### Example: vertical-tabs-with-avatar
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-menu>
-      <ix-menu-avatar
-        top="john.doe@company.com"
-        bottom="Administrator"
-        image="https://ui-avatars.com/api/?name=John+Doe"
-      >
-        <ix-menu-avatar-item
-          icon="user-profile"
-          label="User profile..."
-        ></ix-menu-avatar-item>
-      </ix-menu-avatar>
-      <ix-menu-item home-tab icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="globe">Normal tab</ix-menu-item>
-      <ix-menu-item icon="star" disabled>Disabled tab</ix-menu-item>
-      <ix-menu-item icon="star">With other icon</ix-menu-item>
-      <ix-menu-item icon="globe" style="display: none">
-        Should not be visible
-      </ix-menu-item>
-    </ix-menu>
-  `,
-  styleUrls: ['./vertical-tabs-with-avatar.css'],
-})
-export default class VerticalTabsWithAvatar {}
-```
-### Example: vertical-tabs
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-menu>
-      <ix-menu-item home-tab icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="globe">Normal tab</ix-menu-item>
-      <ix-menu-item icon="star" disabled>Disabled tab</ix-menu-item>
-      <ix-menu-item icon="star">With other icon</ix-menu-item>
-      <ix-menu-item icon="globe" style="display: none">
-        Should not be visible
-      </ix-menu-item>
-    </ix-menu>
-  `,
-  styleUrls: ['./vertical-tabs.css'],
-})
-export default class VerticalTabs {}
-```
-## Angular Standalone Examples
-### Example: application-advanced
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuCategory,
-  IxMenuItem,
-  IxMenuSettings,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxAvatar,
-    IxContent,
-    IxContentHeader,
-    IxMenu,
-    IxMenuAbout,
-    IxMenuCategory,
-    IxMenuItem,
-    IxMenuSettings,
-  ],
-  templateUrl: './application-advanced.html',
-})
-export default class ApplicationAdvancedExample {
-  activeContent: string = 'home';
-  updateContent(contentKey: string) {
-    this.activeContent = contentKey;
-  }
-}
-```
-#### 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>
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item
-      home
-      icon="home"
-      (click)="updateContent('home')"
-      [active]="activeContent === 'home'"
-      >Home</ix-menu-item
-    >
-    <ix-menu-item
-      icon="alarm-bell"
-      (click)="updateContent('alarm')"
-      [active]="activeContent === 'alarm'"
-      >Alarm</ix-menu-item
-    >
-    <ix-menu-category icon="piechart" label="Analysis">
-      <ix-menu-item
-        icon="plant"
-        (click)="updateContent('plant')"
-        [active]="activeContent === 'plant'"
-        >Plant</ix-menu-item
-      >
-      <ix-menu-item
-        icon="network-device"
-        (click)="updateContent('network')"
-        [active]="activeContent === 'network'"
-        >Network</ix-menu-item
-      >
-    </ix-menu-category>
-    <ix-menu-settings></ix-menu-settings>
-    <ix-menu-about></ix-menu-about>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header headerTitle="Example {{ activeContent }} content"></ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: application-app-switch
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxAvatar,
-  IxMenu,
-  IxMenuItem,
-  IxContent,
-  IxContentHeader,
-} from '@siemens/ix-angular/standalone';
-import { AppSwitchConfiguration } from '@siemens/ix';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxDropdownButton,
-    IxDropdownItem,
-    IxAvatar,
-    IxMenu,
-    IxMenuItem,
-    IxContent,
-    IxContentHeader,
-  ],
-  templateUrl: './application-app-switch.html',
-})
-export default class ApplicationAppSwitchExample {
-  appSwitchConfig: AppSwitchConfiguration = {
-    i18nAppSwitch: 'Switch to Application',
-    currentAppId: 'demo-app-2',
-    apps: [
-      {
-        id: 'demo-app-1',
-        name: 'Floor App',
-        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-        url: 'https://ix.siemens.io/',
-        description: 'Example description for Floor app',
-        target: '_self',
-      },
-      {
-        id: 'demo-app-2',
-        name: 'Calculator App',
-        iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
-        url: 'https://ix.siemens.io/',
-        description: 'Example description for Calculator app',
-        target: '_self',
-      },
-    ],
-  };
-}
-```
-#### 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 [appSwitchConfig]="appSwitchConfig">
-  <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-avatar>
-      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-    </ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="My Content Page">
-    </ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: application-breakpoints
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxRadio,
-  IxRadioGroup,
-} from '@siemens/ix-angular/standalone';
-import { Breakpoint } from '@siemens/ix';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxDropdownButton,
-    IxDropdownItem,
-    IxAvatar,
-    IxMenu,
-    IxMenuItem,
-    IxContent,
-    IxContentHeader,
-    IxRadioGroup,
-    IxRadio,
-  ],
-  templateUrl: './application-breakpoints.html',
-})
-export default class ApplicationBreakpointExample {
-  breakpoints: Breakpoint[] = ['md'];
-  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-  onCheckedChange(value: string) {
-    const breakpoint = value as Breakpoint;
-    if (this.validBreakpoints.has(breakpoint)) {
-      this.breakpoints = [breakpoint];
-    }
-  }
-}
-```
-#### 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 application-name="Application name" [breakpoints]="breakpoints">
-  <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-avatar>
-      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-    </ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="Choose breakpoint">
-    </ix-content-header>
-    <ix-radio-group
-      [value]="breakpoints[0]"
-      (valueChange)="onCheckedChange($event.detail)"
-    >
-      <ix-radio value="sm" label="Small"></ix-radio>
-      <ix-radio value="md" label="Medium"></ix-radio>
-      <ix-radio value="lg" label="Large"></ix-radio>
-    </ix-radio-group>
-  </ix-content>
-</ix-application>
-```
-### Example: application
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxMenu,
-    IxMenuItem,
-    IxContent,
-    IxContentHeader,
-  ],
-  templateUrl: './application.html',
-})
-export default class ApplicationExample {}
-```
-#### 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>
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="My Content Page">
-    </ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: basic-navigation-migration
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxApplication, IxApplicationHeader, IxMenu, IxMenuItem],
-  templateUrl: './basic-navigation-migration.html',
-  styleUrls: ['./basic-navigation-migration.css'],
-})
-export default class BasicNavigationMigration {}
-```
-#### 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>
-  <!--{KEEP} Compare hideHeader property -->
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-</ix-application>
-```
-### Example: basic-navigation-without-header
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxBasicNavigation,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxBasicNavigation, IxMenu, IxMenuItem],
-  template: `
-    <ix-basic-navigation hideHeader>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-    </ix-basic-navigation>
-  `,
-})
-export default class BasicNavigationWithOutHeader {}
-```
-### Example: basic-navigation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxBasicNavigation,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxBasicNavigation, IxMenu, IxMenuItem],
-  template: `
-    <ix-basic-navigation applicationName="Application name">
-      <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-basic-navigation>
-  `,
-  styleUrls: ['./basic-navigation.css'],
-})
-export default class BasicNavigation {}
-```
-### 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: map-navigation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxMapNavigation,
-  IxMenu,
-  IxMenuItem,
-  IxContent,
-  IxContentHeader,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxMapNavigation, IxMenu, IxMenuItem, IxContent, IxContentHeader],
-  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-content>
-    </ix-map-navigation>
-  `,
-})
-export default class MapNavigation {}
-```
-### Example: menu-category
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxMenu,
-  IxMenuItem,
-  IxMenuCategory,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxApplication, IxMenu, IxMenuItem, IxMenuCategory],
-  templateUrl: './menu-category.html',
-})
-export default class MenuCategory {}
-```
-#### 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>
-  <ix-menu>
-    <ix-menu-item home icon="home">Home</ix-menu-item>
-    <ix-menu-item icon="globe">Normal Tab</ix-menu-item>
-    <ix-menu-category label="Top level Category" icon="rocket">
-      <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
-      <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
-    </ix-menu-category>
-  </ix-menu>
-</ix-application>
-```
-### Example: menu-with-bottom-tabs
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxMenu, IxMenuItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxMenu, IxMenuItem],
-  template: `
-    <ix-menu>
-      <ix-menu-item home-tab icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="info" slot="bottom">Bottom tab</ix-menu-item>
-    </ix-menu>
-  `,
-})
-export default class VerticalTabs {}
-```
-### Example: vertical-tabs-with-avatar
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxMenu,
-  IxMenuAvatar,
-  IxMenuAvatarItem,
-  IxMenuItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxMenu, IxMenuAvatar, IxMenuAvatarItem, IxMenuItem],
-  template: `
-    <ix-menu>
-      <ix-menu-avatar
-        top="john.doe@company.com"
-        bottom="Administrator"
-        image="https://ui-avatars.com/api/?name=John+Doe"
-      >
-        <ix-menu-avatar-item
-          icon="user-profile"
-          label="User profile..."
-        ></ix-menu-avatar-item>
-      </ix-menu-avatar>
-      <ix-menu-item home-tab icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="globe">Normal tab</ix-menu-item>
-      <ix-menu-item icon="star" disabled>Disabled tab</ix-menu-item>
-      <ix-menu-item icon="star">With other icon</ix-menu-item>
-      <ix-menu-item icon="globe" style="display: none">
-        Should not be visible
-      </ix-menu-item>
-    </ix-menu>
-  `,
-  styleUrls: ['./vertical-tabs-with-avatar.css'],
-})
-export default class VerticalTabsWithAvatar {}
-```
-### Example: vertical-tabs
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxMenu, IxMenuItem } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxMenu, IxMenuItem],
-  template: `
-    <ix-menu>
-      <ix-menu-item home-tab icon="home">Home</ix-menu-item>
-      <ix-menu-item icon="globe">Normal tab</ix-menu-item>
-      <ix-menu-item icon="star" disabled>Disabled tab</ix-menu-item>
-      <ix-menu-item icon="star">With other icon</ix-menu-item>
-      <ix-menu-item icon="globe" style="display: none">
-        Should not be visible
-      </ix-menu-item>
-    </ix-menu>
-  `,
-  styleUrls: ['./vertical-tabs.css'],
-})
-export default class VerticalTabs {}
-```
 <!-- Auto Generated Below -->