npm - @siemens/ix-docs - Versions diffs - 4.0.0 → 4.2.0 - Mend

@siemens/ix-docs 4.0.0 → 4.2.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 (853) hide show

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

@@ -1,2258 +1,3 @@
-# ix-application-header
-## HTML Examples
-### Example: about-and-legal
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About and legal example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header>
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-about>
-          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-        </ix-menu-about>
-      </ix-menu>
-    </ix-application>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-menu');
-        const instance = document.querySelector('ix-menu');
-        await instance.toggleAbout(true);
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### 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-header
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application header example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application-header name="My Application">
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-      <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 username="John Doe" extra="Administrator">
-        <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-        <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      </ix-avatar>
-    </ix-application-header>
-    <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: popover-news
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header>
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-about>
-          <ix-menu-about-item label="Example"> </ix-menu-about-item>
-        </ix-menu-about>
-        <ix-menu-about-news label="Test" show about-item-label="Example">
-          Test
-        </ix-menu-about-news>
-      </ix-menu>
-    </ix-application>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: settings
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Settings example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header>
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-settings>
-          <ix-menu-settings-item
-            label="Example Setting 1"
-          ></ix-menu-settings-item>
-          <ix-menu-settings-item
-            label="Example Setting 2"
-          ></ix-menu-settings-item>
-        </ix-menu-settings>
-      </ix-menu>
-    </ix-application>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-menu');
-        const menu = document.querySelector('ix-menu');
-        await menu.toggleSettings(true);
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: about-and-legal
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-} from '@siemens/ix-react';
-import { useLayoutEffect, useRef } from 'react';
-export default () => {
-  const ref = useRef<HTMLIxMenuElement>(null);
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (element) {
-      element.toggleAbout(true);
-    }
-  }, []);
-  return (
-    <IxApplication>
-      <IxApplicationHeader>
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu ref={ref}>
-        <IxMenuAbout>
-          <IxMenuAboutItem label="Tab 1">Content 1</IxMenuAboutItem>
-          <IxMenuAboutItem label="Tab 2">Content 2</IxMenuAboutItem>
-        </IxMenuAbout>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-### 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-header
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import {
-  IxApplicationHeader,
-  IxAvatar,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxIconButton,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplicationHeader name="My Application">
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
-      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
-      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
-      <IxDropdownButton variant="subtle-tertiary" label="Select config">
-        <IxDropdownItem label="Config 1"></IxDropdownItem>
-        <IxDropdownItem label="Config 2"></IxDropdownItem>
-        <IxDropdownItem label="Config 3"></IxDropdownItem>
-      </IxDropdownButton>
-      <IxAvatar username="John Doe" extra="Administrator">
-        <IxDropdownItem label="Action 1"></IxDropdownItem>
-        <IxDropdownItem label="Action 2"></IxDropdownItem>
-      </IxAvatar>
-    </IxApplicationHeader>
-  );
-};
-```
-### 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: popover-news
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-  IxMenuAboutNews,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplication>
-      <IxApplicationHeader>
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuAbout>
-          <IxMenuAboutItem label="Example"> </IxMenuAboutItem>
-        </IxMenuAbout>
-        <IxMenuAboutNews label="Test" show about-item-label="Example">
-          Test
-        </IxMenuAboutNews>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-### Example: settings
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuSettings,
-  IxMenuSettingsItem,
-} from '@siemens/ix-react';
-import { useLayoutEffect, useRef } from 'react';
-export default () => {
-  const ref = useRef<HTMLIxMenuElement>(null);
-  useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.toggleSettings(true);
-    }
-  }, []);
-  return (
-    <IxApplication>
-      <IxApplicationHeader>
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu ref={ref}>
-        <IxMenuSettings>
-          <IxMenuSettingsItem label="Example Setting 1"></IxMenuSettingsItem>
-          <IxMenuSettingsItem label="Example Setting 2"></IxMenuSettingsItem>
-        </IxMenuSettings>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-## Vue Examples
-### Example: about-and-legal
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-} from '@siemens/ix-vue';
-import { useTemplateRef, onMounted } from 'vue';
-const input = useTemplateRef<HTMLIxMenuElement>('menu');
-onMounted(() => {
-  input.value?.toggleAbout(true);
-});
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader>
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu ref="menu">
-      <IxMenuAbout>
-        <IxMenuAboutItem label="Tab 1">Content 1</IxMenuAboutItem>
-        <IxMenuAboutItem label="Tab 2">Content 2</IxMenuAboutItem>
-      </IxMenuAbout>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-### 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(event: CustomEvent<Breakpoint>) {
-      const value = event?.detail;
-      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]" @valueChange="setBreakpoint">
-        <IxRadio value="sm" label="Small" aria-label="Small"></IxRadio>
-        <IxRadio value="md" label="Medium" aria-label="Medium"></IxRadio>
-        <IxRadio value="lg" label="Large" aria-label="Large"></IxRadio>
-      </IxRadioGroup>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: application-header
-```tsx
-<script setup lang="ts">
-import {
-  IxApplicationHeader,
-  IxAvatar,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxIconButton,
-} from '@siemens/ix-vue';
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-</script>
-<template>
-  <IxApplicationHeader name="My Application">
-    <div className="placeholder-logo" slot="logo"></div>
-    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
-    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
-    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
-    <IxDropdownButton variant="subtle-tertiary" label="Select config">
-      <IxDropdownItem label="Config 1"></IxDropdownItem>
-      <IxDropdownItem label="Config 2"></IxDropdownItem>
-      <IxDropdownItem label="Config 3"></IxDropdownItem>
-    </IxDropdownButton>
-    <IxAvatar username="John Doe" extra="Administrator">
-      <IxDropdownItem label="Action 1"></IxDropdownItem>
-      <IxDropdownItem label="Action 2"></IxDropdownItem>
-    </IxAvatar>
-  </IxApplicationHeader>
-</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: popover-news
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-  IxMenuAboutNews,
-} from '@siemens/ix-vue';
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader>
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuAbout>
-        <IxMenuAboutItem label="Example"> </IxMenuAboutItem>
-      </IxMenuAbout>
-      <IxMenuAboutNews label="Test" show about-item-label="Example">
-        Test
-      </IxMenuAboutNews>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-### Example: settings
-```tsx
-<script setup lang="ts">
-import {
-  HTMLRefElement,
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuSettings,
-  IxMenuSettingsItem,
-} from '@siemens/ix-vue';
-import { nextTick, onMounted, ref } from 'vue';
-const menu = ref<HTMLRefElement<HTMLIxMenuElement>>();
-onMounted(async () => {
-  await nextTick();
-  menu.value?.$el.toggleSettings(true);
-});
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader>
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu ref="menu">
-      <IxMenuSettings>
-        <IxMenuSettingsItem label="Example Setting 1"></IxMenuSettingsItem>
-        <IxMenuSettingsItem label="Example Setting 2"></IxMenuSettingsItem>
-      </IxMenuSettings>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-## Angular Examples
-### Example: about-and-legal
-#### Component typescript
-```typescript
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './about-and-legal.html',
-})
-export default class AboutAndLegal implements AfterViewInit {
-  @ViewChild('menu', { read: ElementRef })
-  menuRef!: ElementRef<HTMLIxMenuElement>;
-  ngAfterViewInit() {
-    const { nativeElement } = this.menuRef;
-    nativeElement.toggleAbout(true);
-  }
-}
-```
-#### Component template
-```html
-<ix-application>
-  <ix-application-header>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu #menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-      <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-    </ix-menu-about>
-  </ix-menu>
-</ix-application>
-```
-### 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-header
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './application-header.html',
-})
-export default class ApplicationHeaderExample {}
-```
-#### Component template
-```html
-<ix-application-header name="My Application">
-  <div class="placeholder-logo" slot="logo"></div>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <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 username="John Doe" extra="Administrator">
-    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-  </ix-avatar>
-</ix-application-header>
-```
-### 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: popover-news
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './popover-news.html',
-})
-export default class PopoverNews {}
-```
-#### Component template
-```html
-<ix-application>
-  <ix-application-header>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Example"> </ix-menu-about-item>
-    </ix-menu-about>
-    <ix-menu-about-news label="Test" show about-item-label="Example">
-      Test
-    </ix-menu-about-news>
-  </ix-menu>
-</ix-application>
-```
-### Example: settings
-#### Component typescript
-```typescript
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './settings.html',
-})
-export default class Settings implements AfterViewInit {
-  @ViewChild('menu', { read: ElementRef })
-  menuRef!: ElementRef<HTMLIxMenuElement>;
-  ngAfterViewInit() {
-    const { nativeElement } = this.menuRef;
-    nativeElement.toggleSettings(true);
-  }
-}
-```
-#### 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>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu #menu>
-    <ix-menu-settings>
-      <ix-menu-settings-item label="Example Setting 1"></ix-menu-settings-item>
-      <ix-menu-settings-item label="Example Setting 2"></ix-menu-settings-item>
-    </ix-menu-settings>
-  </ix-menu>
-</ix-application>
-```
-## Angular Standalone Examples
-### Example: about-and-legal
-#### Component typescript
-```typescript
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxMenu,
-    IxMenuAbout,
-    IxMenuAboutItem,
-  ],
-  templateUrl: './about-and-legal.html',
-})
-export default class AboutAndLegal implements AfterViewInit {
-  @ViewChild('menu', { read: ElementRef })
-  menuRef!: ElementRef<HTMLIxMenuElement>;
-  ngAfterViewInit() {
-    const { nativeElement } = this.menuRef;
-    nativeElement.toggleAbout(true);
-  }
-}
-```
-#### 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>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu #menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-      <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-    </ix-menu-about>
-  </ix-menu>
-</ix-application>
-```
-### 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-header
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplicationHeader,
-  IxIconButton,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxAvatar,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplicationHeader,
-    IxIconButton,
-    IxDropdownButton,
-    IxDropdownItem,
-    IxAvatar,
-  ],
-  templateUrl: './application-header.html',
-})
-export default class ApplicationHeaderExample {}
-```
-#### 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-header name="My Application">
-  <div class="placeholder-logo" slot="logo"></div>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <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 username="John Doe" extra="Administrator">
-    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-  </ix-avatar>
-</ix-application-header>
-```
-### 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: popover-news
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-  IxMenuAboutNews,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxMenu,
-    IxMenuAbout,
-    IxMenuAboutItem,
-    IxMenuAboutNews,
-  ],
-  templateUrl: './popover-news.html',
-})
-export default class PopoverNews {}
-```
-#### 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>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Example"> </ix-menu-about-item>
-    </ix-menu-about>
-    <ix-menu-about-news label="Test" show about-item-label="Example">
-      Test
-    </ix-menu-about-news>
-  </ix-menu>
-</ix-application>
-```
-### Example: settings
-#### Component typescript
-```typescript
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuSettings,
-  IxMenuSettingsItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxMenu,
-    IxMenuSettings,
-    IxMenuSettingsItem,
-  ],
-  templateUrl: './settings.html',
-})
-export default class Settings implements AfterViewInit {
-  @ViewChild('menu', { read: ElementRef })
-  menuRef!: ElementRef<HTMLIxMenuElement>;
-  ngAfterViewInit() {
-    const { nativeElement } = this.menuRef;
-    nativeElement.toggleSettings(true);
-  }
-}
-```
-#### 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>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu #menu>
-    <ix-menu-settings>
-      <ix-menu-settings-item label="Example Setting 1"></ix-menu-settings-item>
-      <ix-menu-settings-item label="Example Setting 2"></ix-menu-settings-item>
-    </ix-menu-settings>
-  </ix-menu>
-</ix-application>
-```
 <!-- Auto Generated Below -->