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

package/build/docs/autogenerated/prompt/ix-custom-field/readme.md

@@ -1,3 +1,4 @@
+
 # ix-custom-field
 
 ## HTML Examples
@@ -514,10 +515,6 @@ LICENSE file in the root directory of this source tree.
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property            | Attribute              | Description                                                           | Type                   | Default     |

package/build/docs/autogenerated/prompt/ix-date-dropdown/readme.md

@@ -1,3 +1,4 @@
+
 # ix-date-dropdown
 
 ## HTML Examples
@@ -377,10 +378,6 @@ LICENSE file in the root directory of this source tree.
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property                  | Attribute                    | Description                                                                                                                                                                                                                                                                                                                                                                                        | Type                                                                                                                                                                   | Default          |

package/build/docs/autogenerated/prompt/ix-date-input/readme.md

@@ -1,3 +1,4 @@
+
 # ix-date-input
 
 ## HTML Examples
@@ -952,10 +953,6 @@ LICENSE file in the root directory of this source tree.
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property                       | Attribute                          | Description                                                                                                                                                                                                                                                                                                                                             | Type                   | Default               |
@@ -979,6 +976,8 @@ LICENSE file in the root directory of this source tree.
 | `required`                     | `required`                         | Required attribute                                                                                                                                                                                                                                                                                                                                      | `boolean \| undefined` | `undefined`           |
 | `showTextAsTooltip`            | `show-text-as-tooltip`             | Show text as tooltip                                                                                                                                                                                                                                                                                                                                    | `boolean \| undefined` | `undefined`           |
 | `showWeekNumbers`              | `show-week-numbers`                | Shows week numbers displayed on the left side of the date picker                                                                                                                                                                                                                                                                                        | `boolean`              | `false`               |
+| `suppressSubmitOnEnter`        | `suppress-submit-on-enter`         | If false, pressing Enter will submit the form (if inside a form). Set to true to suppress submit on Enter.                                                                                                                                                                                                                                              | `boolean`              | `false`               |
+| `textAlignment`                | `text-alignment`                   | Text alignment within the date input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.                                                                                                                                                                                                                 | `"end" \| "start"`     | `'start'`             |
 | `validText`                    | `valid-text`                       | Valid text below the input field                                                                                                                                                                                                                                                                                                                        | `string \| undefined`  | `undefined`           |
 | `value`                        | `value`                            | Value of the input element                                                                                                                                                                                                                                                                                                                              | `string \| undefined`  | `''`                  |
 | `warningText`                  | `warning-text`                     | Warning text below the input field                                                                                                                                                                                                                                                                                                                      | `string \| undefined`  | `undefined`           |

package/build/docs/autogenerated/prompt/ix-date-picker/readme.md

@@ -1,3 +1,4 @@
+
 # ix-date-picker
 
 ## HTML Examples
@@ -136,7 +137,7 @@ export default () => {
 import { IxDatePicker } from '@siemens/ix-react';
 
 export default () => {
-  return <IxDatePicker range={false}/>;
+  return <IxDatePicker />;
 };
 ```
 
@@ -387,10 +388,6 @@ export default class Datepicker {}
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property                       | Attribute                          | Description                                                                                                                                                                                                                                                                                                                                             | Type                                           | Default        |

package/build/docs/autogenerated/prompt/ix-datetime-picker/readme.md

@@ -1,3 +1,4 @@
+
 # ix-datetime-picker
 
 ## HTML Examples
@@ -80,10 +81,6 @@ export default class Datetimepicker {}
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property                       | Attribute                          | Description                                                                                                                                                              | Type                        | Default        |

package/build/docs/autogenerated/prompt/ix-divider/readme.md

@@ -1,3 +1,4 @@
+
 # ix-divider
 
 ## HTML Examples
@@ -457,10 +458,6 @@ export default class Dropdown {}
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Dependencies
 
 ### Used by

package/build/docs/autogenerated/prompt/ix-drawer/readme.md

@@ -1,3 +1,4 @@
+
 # ix-drawer
 
 ## HTML Examples
@@ -262,10 +263,6 @@ export default class Drawer {
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 > **[DEPRECATED]** Will be removed with 5.0.0, use ix-pane as successor
 
 ## Properties

package/build/docs/autogenerated/prompt/ix-dropdown/readme.md

@@ -1,3 +1,4 @@
+
 # ix-dropdown
 
 ## HTML Examples
@@ -973,10 +974,6 @@ export default class GroupContextMenu {}
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property                     | Attribute                      | Description                                                                                                                                                                                                                                               | Type                                                                                                                       | Default          |

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

@@ -1,3 +1,4 @@
+
 # ix-dropdown-button
 
 ## HTML Examples
@@ -275,91 +276,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>
-```
-
 ## React Examples
 
 ### Example: application-app-switch
@@ -608,96 +524,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>
-  );
-};
-```
-
 ## Vue Examples
 
 ### Example: application-app-switch
@@ -804,7 +630,8 @@ export default {
     };
   },
   methods: {
-    setBreakpoint(value: Breakpoint) {
+    setBreakpoint(event: CustomEvent<Breakpoint>) {
+      const value = event?.detail;
       if (validBreakpoints.has(value)) {
         this.breakpoints = [value];
       }
@@ -841,22 +668,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>
@@ -961,96 +776,6 @@ import { IxDropdownButton } 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>
-
-<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>
-```
-
 ## Angular Examples
 
 ### Example: application-app-switch
@@ -1314,85 +1039,6 @@ export default class Dropdown {}
 
 ```
 
-### 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>
-
-```
-
 ## Angular Standalone Examples
 
 ### Example: application-app-switch
@@ -1734,123 +1380,6 @@ export default class Dropdown {}
 
 ```
 
-### 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>
-
-```
-
-
-
-<!-- Auto Generated Below -->
-
 
 ## Properties
 

package/build/docs/autogenerated/prompt/ix-dropdown-header/readme.md

@@ -1,3 +1,4 @@
+
 # ix-dropdown-header
 
 ## HTML Examples
@@ -154,10 +155,6 @@ export default class Dropdown {}
 ```
 
 
-
-<!-- Auto Generated Below -->
-
-
 ## Properties
 
 | Property | Attribute | Description                | Type                  | Default     |