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

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

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

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

@@ -1,3 +1,4 @@
 # ix-content
 ## HTML Examples
@@ -312,187 +313,6 @@
 </html>
 ```
-### Example: map-navigation-migration
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map navigation migration example</title>
-    <link rel="stylesheet" href="./map-navigation-migration.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconBulb } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconBulb,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application class="application">
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-        <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-          <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-          <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-          <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-        </ix-dropdown-button>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-pane
-        id="overlay"
-        class="overlay"
-        composition="right"
-        heading="Custom overlay"
-        icon="bulb"
-        size="320px"
-        variant="floating"
-        hide-on-collapse
-        expanded="false"
-      >
-        Overlay content
-      </ix-pane>
-      <ix-pane-layout>
-        <ix-pane slot="left" heading="Navigation title" size="320px" expanded>
-          Sidebar content
-        </ix-pane>
-        <ix-content class="content">
-          <ix-content-header slot="header" header-title="My Content Page">
-          </ix-content-header>
-          <ix-button id="btn-open-overlay">Open overlay</ix-button>
-        </ix-content>
-      </ix-pane-layout>
-    </ix-application>
-    <script type="module">
-      const overlay = document.getElementById('overlay');
-      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
-      let expanded = overlay.getAttribute('expanded') === 'true';
-      overlay.addEventListener('expandedChanged', (e) => {
-        expanded = e.detail.expanded;
-      });
-      buttonOpenOverlay.addEventListener('click', () => {
-        expanded = !expanded;
-        overlay.setAttribute('expanded', expanded);
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: map-navigation-overlay
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Map navigation overlay example</title>
-  </head>
-  <body>
-    <ix-map-navigation
-      application-name="My Application"
-      navigation-title="Navigation title"
-      hide-context-menu="false"
-    >
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content slot="sidebar-content">Sidebar content</ix-content>
-      <ix-content>
-        <ix-content-header
-          slot="header"
-          header-title="My Content Page"
-        ></ix-content-header>
-        <ix-button id="btn-open-overlay">Open overlay</ix-button>
-      </ix-content>
-    </ix-map-navigation>
-    <script type="module">
-      const mapNav = document.querySelector('ix-map-navigation');
-      const buttonOpenOverlay = document.getElementById('btn-open-overlay');
-      buttonOpenOverlay.addEventListener('click', () => {
-        const overlay = document.createElement('ix-map-navigation-overlay');
-        overlay.slot = 'overlay';
-        overlay.name = 'Custom overlay';
-        overlay.icon = 'bulb';
-        const overlayContent = document.createElement('ix-content');
-        overlayContent.textContent = 'Overlay content';
-        overlay.appendChild(overlayContent);
-        mapNav.appendChild(overlay);
-        overlay.addEventListener('closeClick', (e) => {
-          overlay.parentNode.removeChild(overlay);
-        });
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: 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>
-```
 ## React Examples
 ### Example: application-advanced
@@ -780,203 +600,6 @@ export default () => {
 };
 ```
-### Example: map-navigation-migration
-```tsx
-import { iconBulb } from '@siemens/ix-icons/icons';
-import './map-navigation-migration.scoped.css';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxButton,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxPane,
-  IxPaneLayout,
-} from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [expanded, setExpanded] = useState(false);
-  const initialExpanded = true;
-  function resetExpanded(value: boolean) {
-    setExpanded(value);
-  }
-  return (
-    <IxApplication className="application">
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-        {}
-        <IxDropdownButton variant="subtle-tertiary" label="Select config">
-          <IxDropdownItem label="Config 1"></IxDropdownItem>
-          <IxDropdownItem label="Config 2"></IxDropdownItem>
-          <IxDropdownItem label="Config 3"></IxDropdownItem>
-        </IxDropdownButton>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      {}
-      <IxPane
-        className="overlay"
-        composition="right"
-        heading="Custom overlay"
-        icon={iconBulb}
-        size="320px"
-        variant="floating"
-        hideOnCollapse
-        expanded={expanded}
-        onExpandedChanged={(e) => resetExpanded(e.detail.expanded)}
-      >
-        Overlay content
-      </IxPane>
-      <IxPaneLayout>
-        {}
-        <IxPane
-          slot="left"
-          heading="Navigation title"
-          size="320px"
-          expanded={initialExpanded}
-        >
-          Sidebar content
-        </IxPane>
-        <IxContent className="content">
-          <IxContentHeader
-            slot="header"
-            headerTitle="My Content Page"
-          ></IxContentHeader>
-          <IxButton onClick={() => setExpanded(!expanded)}>
-            Open overlay
-          </IxButton>
-        </IxContent>
-      </IxPaneLayout>
-    </IxApplication>
-  );
-};
-```
-### Example: map-navigation-overlay
-```tsx
-import { iconBulb } from '@siemens/ix-icons/icons';
-import {
-  IxButton,
-  IxContent,
-  IxContentHeader,
-  IxMapNavigation,
-  IxMapNavigationOverlay,
-  IxMenu,
-  IxMenuItem,
-} from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [overlay, setOverlay] = useState(false);
-  function openOverlay() {
-    setOverlay(true);
-  }
-  function closeOverlay() {
-    setOverlay(false);
-  }
-  return (
-    <IxMapNavigation
-      applicationName="My Application"
-      navigationTitle="Navigation title"
-      hideContextMenu={false}
-    >
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      <IxContent slot="sidebar-content">Sidebar content</IxContent>
-      <IxContent>
-        <IxContentHeader
-          slot="header"
-          header-title="My Content Page"
-        ></IxContentHeader>
-        <IxButton
-          onClick={() => {
-            openOverlay();
-          }}
-        >
-          Open overlay
-        </IxButton>
-      </IxContent>
-      {overlay ? (
-        <IxMapNavigationOverlay
-          slot="overlay"
-          name="Custom overlay"
-          icon={iconBulb}
-          onCloseClick={() => closeOverlay()}
-        >
-          <IxContent>Overlay content</IxContent>
-        </IxMapNavigationOverlay>
-      ) : null}
-    </IxMapNavigation>
-  );
-};
-```
-### Example: 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>
-  );
-};
-```
 ## Vue Examples
 ### Example: application-advanced
@@ -1157,7 +780,8 @@ export default {
     };
   },
   methods: {
-    setBreakpoint(value: Breakpoint) {
+    setBreakpoint(event: CustomEvent<Breakpoint>) {
+      const value = event?.detail;
       if (validBreakpoints.has(value)) {
         this.breakpoints = [value];
       }
@@ -1194,22 +818,10 @@ export default {
         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 :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>
@@ -1275,206 +887,14 @@ import { IxContent, IxContentHeader } from '@siemens/ix-vue';
 </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>
+## Angular Examples
-<style scoped src="./map-navigation-migration.css"></style>
+### Example: application-advanced
+#### Component typescript
+```typescript
-<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>
-```
-## Angular Examples
-### Example: application-advanced
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
@@ -1786,175 +1206,6 @@ LICENSE file in the root directory of this source tree.
 ```
-### 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 {}
-```
 ## Angular Standalone Examples
 ### Example: application-advanced
@@ -2361,240 +1612,6 @@ LICENSE file in the root directory of this source tree.
 ```
-### 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 {}
-```
-<!-- Auto Generated Below -->
 ## Slots