fix(core/content-header): Fix responsive content-header behavior

.changeset/content-header-responsive-text.md

@@ -0,0 +1,8 @@
+---
+'@siemens/ix': major
+'@siemens/ix-angular': major
+'@siemens/ix-react': major
+'@siemens/ix-vue': major
+---
+
+**Breaking change:** `ix-content-header` titles and subtitles now wrap by default. Set `textOverflow="ellipsis"` to preserve the previous single-line ellipsis behavior without native tooltips.

BREAKING_CHANGES.md

@@ -7,6 +7,7 @@ This document aims to provide a clear and detailed overview of all significant m
 
 Please select your target version
 
+- [Version v6.0.0](./BREAKING_CHANGES/v6.md)
 - [Version v5.0.0](./BREAKING_CHANGES/v5.md)
 - [Version v4.0.0](./BREAKING_CHANGES/v4.md)
 - [Version v3.0.0](./BREAKING_CHANGES/v3.md)

BREAKING_CHANGES/v5.md

@@ -79,7 +79,7 @@ The following previously deprecated components, properties, and overloads are re
 | Removed                 | Replacement                              |
 | ----------------------- | ---------------------------------------- |
 | `ix-input-group`        | `ix-input` (or another form-ready input) |
-| `ix-validation-tooltip` | `ix-input` / `ix-select` validation text   |
+| `ix-validation-tooltip` | `ix-input` / `ix-select` validation text |
 | `ix-drawer`             | `ix-pane`                                |
 
 ### Migrate from `ix-input-group`
@@ -188,12 +188,12 @@ Invalid messages are rendered through `ix-field-wrapper` (icon + message below t
 
 ### Removed properties
 
-| Component               | Removed property                 | Replacement                                                               |
-| ----------------------- | -------------------------------- | ------------------------------------------------------------------------- |
-| `ix-application-header` | `ariaLabelMenuExpandIconButton`  | Not needed (menu expand control is not exposed to assistive technologies) |
-| `ix-avatar`             | `a11yLabel`                      | Host `aria-label`                                                         |
-| `ix-breadcrumb-item`    | `ariaLabelButton`                | Host `aria-label`                                                         |
-| `ix-select`             | `ariaLabelChevronDownIconButton` | Not needed (chevron control is not in the accessibility tree)             |
+| Component               | Removed property                 | Replacement                                                                          |
+| ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------ |
+| `ix-application-header` | `ariaLabelMenuExpandIconButton`  | Not needed (menu expand control is not exposed to assistive technologies)            |
+| `ix-avatar`             | `a11yLabel`                      | Host `aria-label`                                                                    |
+| `ix-breadcrumb-item`    | `ariaLabelButton`                | Host `aria-label`                                                                    |
+| `ix-select`             | `ariaLabelChevronDownIconButton` | Not needed (chevron control is not in the accessibility tree)                        |
 | `ix-slider`             | `error`                          | `class="ix-invalid"` and `invalid-text` (invalid message uses field-wrapper styling) |
 
 ### Removed util overload
@@ -220,7 +220,7 @@ Breadcrumb items now require a stable `breadcrumbKey`. Breadcrumb click events u
 | `nextItems = ['Next item']`           | `nextItems = [{ label: 'Next item', breadcrumbKey: 'next-item' }]` |
 | Click events emitted a label string   | Click events emit `{ breadcrumbKey, label }`                       |
 
-### Before
+### `ix-breadcrumb` before
 
 ```html
 <ix-breadcrumb>
@@ -233,7 +233,7 @@ Breadcrumb items now require a stable `breadcrumbKey`. Breadcrumb click events u
 breadcrumb.nextItems = ['Next item'];
 ```
 
-### After
+### `ix-breadcrumb` after
 
 ```html
 <ix-breadcrumb>
@@ -249,7 +249,7 @@ breadcrumb.nextItems = [{ label: 'Next item', breadcrumbKey: 'next-item' }];
 TypeScript consumers can use the exported `BreadcrumbClick` type for breadcrumb
 click payloads and `nextItems` entries.
 
-### Migration rules
+### `ix-breadcrumb` migration rules
 
 1. Add a unique `breadcrumbKey`/`breadcrumb-key` value to every `ix-breadcrumb-item`.
 2. Replace every string entry in `nextItems` with an object containing `label` and `breadcrumbKey`.
@@ -261,15 +261,15 @@ The show-all button and show-more card now reveal all hidden cards by default in
 
 If your application handled `showAllClick` or `showMoreCardClick` to implement custom behavior and expects IX to leave card visibility unchanged, call `preventDefault()` on the event.
 
-### Before
+### `ix-card-list` before
 
 ```ts
 cardList.addEventListener('showAllClick', (event) => {
   openCustomListView(event.detail.nativeEvent);
 });
 ```
 
-### After
+### `ix-card-list` after
 
 ```ts
 cardList.addEventListener('showAllClick', (event) => {
@@ -317,9 +317,9 @@ Use this section as the single source of truth for all V5 theming updates.
 1. Remove all theme classes in the form `theme-<theme>-<schema>` from `<html>` and `<body>`.
 2. Convert each legacy class `theme-<theme>-<schema>` to:
 
-```html
-<html data-ix-theme="<theme>" data-ix-color-schema="<schema>"></html>
-```
+   ```html
+   <html data-ix-theme="<theme>" data-ix-color-schema="<schema>"></html>
+   ```
 
 3. Never set only one of `data-ix-theme` or `data-ix-color-schema`. Set both together.
 4. Treat `theme`, `colorSchema`, and `mode` as separate concepts:
@@ -487,7 +487,7 @@ The JavaScript **`showModal(config)`** API (and framework helpers built on it) u
 | `keyboard`    | Remove from config. Escape / dismiss behavior is not controlled by this flag; use **`beforeDismiss`** on **`ix-modal`** / config when you need to veto dismissal. |
 | `title`       | Remove from config. Set a title in your modal **content** (e.g. **`ix-modal-header`** and slotted markup) instead.                                                |
 
-### Before
+### `ModalConfig` before
 
 ```ts
 import { showModal } from '@siemens/ix';
@@ -500,7 +500,7 @@ await showModal({
 });
 ```
 
-### After
+### `ModalConfig` after
 
 ```ts
 import { showModal } from '@siemens/ix';
@@ -510,7 +510,7 @@ await showModal({
 });
 ```
 
-### Migration rules
+### `ModalConfig` migration rules
 
 1. Delete **`container`**, **`keyboard`**, and **`title`** from every **`showModal`** / **`ModalConfig`** object.
 2. Rely on modal **content** (and **`ix-modal-header`**) for titles.
@@ -522,7 +522,7 @@ await showModal({
 
 For Angular consumers only, `LoadingService.showModalLoading()` has the same return type change.
 
-### Before
+### `showModalLoading()` before
 
 ```ts
 const loading = showModalLoading({ message: 'Loading...' });
@@ -531,7 +531,7 @@ loading.update('Still loading...');
 loading.finish('Done');
 ```
 
-### After
+### `showModalLoading()` after
 
 ```ts
 const loading = await showModalLoading({ message: 'Loading...' });
@@ -546,7 +546,7 @@ The same migration applies to `showModalLoading()` from `@siemens/ix-react` and
 
 `@siemens/ix-aggrid` now declares `@siemens/ix` as a peer dependency instead of installing it transitively. Applications that use the AG Grid theme must add `@siemens/ix` to their own dependencies so IX CSS imports and related assets resolve explicitly from the app.
 
-### Before
+### `ix-aggrid` before
 
 ```json
 {
@@ -556,7 +556,7 @@ The same migration applies to `showModalLoading()` from `@siemens/ix-react` and
 }
 ```
 
-### After
+### `ix-aggrid` after
 
 ```json
 {
@@ -567,7 +567,7 @@ The same migration applies to `showModalLoading()` from `@siemens/ix-react` and
 }
 ```
 
-### Migration rules
+### `ix-aggrid` migration rules
 
 1. Add `@siemens/ix` to the application package that consumes `@siemens/ix-aggrid`.
 2. Keep the installed `@siemens/ix` version within the peer dependency range required by `@siemens/ix-aggrid`.
@@ -670,7 +670,7 @@ tabs.addEventListener('selectedChange', (e) => handleTab(e.detail)); // index: 0
 tabs.addEventListener('tabChange', (e) => handleTab(e.detail)); // key: 'tab-1', 'tab-2'
 ```
 
-### Validation checklist
+### `ix-tabs` validation checklist
 
 1. No remaining `selected` prop usage on `ix-tabs`.
 2. Every `ix-tab-item` has a unique `tab-key` attribute.
@@ -694,7 +694,7 @@ tabs.addEventListener('tabChange', (e) => handleTab(e.detail)); // key: 'tab-1',
 | `ix-menu-about`    | `suppressLegacyTabs` | Opts into the slotted `ix-tabs` integration path |
 | `ix-menu-settings` | `suppressLegacyTabs` | Opts into the slotted `ix-tabs` integration path |
 
-### New required props
+### New required menu props
 
 | Component               | Prop     | Description                           |
 | ----------------------- | -------- | ------------------------------------- |
@@ -711,7 +711,7 @@ tabs.addEventListener('tabChange', (e) => handleTab(e.detail)); // key: 'tab-1',
 
 `ix-menu-about-item` changed from `shadow: true` to `shadow: false`. If you targeted internal elements via `::part()` or shadow DOM queries, update to plain CSS selectors.
 
-### Migration
+### Menu tabs migration
 
 ```html
 <!-- Before -->
@@ -780,7 +780,7 @@ tabs.addEventListener('tabChange', (e) => handleTab(e.detail)); // key: 'tab-1',
 <ix-menu-about-news active-about-tab-key="tab-1"> News content </ix-menu-about-news>
 ```
 
-### Validation checklist
+### Menu tabs validation checklist
 
 1. No remaining `active-tab-label` usage on `ix-menu-about` — use `active-tab-key`.
 2. Slotted `ix-tabs` integrations set `suppress-legacy-tabs` on the parent menu component.

BREAKING_CHANGES/v6.md

@@ -0,0 +1,19 @@
+# Breaking Changes V6
+
+This document lists breaking changes introduced in Siemens Industrial Experience V6.
+
+## Content header text wraps by default
+
+`ix-content-header` titles and subtitles now wrap when horizontal space is limited. Previously, they remained on a single line and used an ellipsis for overflowing text.
+
+To preserve the previous single-line behavior, set `text-overflow="ellipsis"`:
+
+```html
+<ix-content-header header-title="Content title" header-subtitle="Supporting context" text-overflow="ellipsis"></ix-content-header>
+```
+
+Ellipsis visually truncates the text without adding a tooltip. Keep the default wrapping behavior when the complete text must remain visible.
+
+### Validation checklist
+
+1. Every `ix-content-header` that must remain single-line uses `text-overflow="ellipsis"`.

packages/angular-standalone-test-app/src/app/app.routes.ts

@@ -130,6 +130,10 @@ export const routePaths: IxPreviewRoutes = {
     import('../preview-examples/content-header').then((m) => m.default),
   'preview/content-header-no-back': () =>
     import('../preview-examples/content-header-no-back').then((m) => m.default),
+  'preview/content-header-text-overflow': () =>
+    import('../preview-examples/content-header-text-overflow').then(
+      (m) => m.default
+    ),
   'preview/content-header-with-slot': () =>
     import('../preview-examples/content-header-with-slot').then(
       (m) => m.default

packages/angular-standalone-test-app/src/preview-examples/content-header-text-overflow.html

@@ -0,0 +1,19 @@
+<!--
+SPDX-FileCopyrightText: 2026 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-content-header
+  hasBackButton
+  headerTitle="Content title that remains compact when horizontal space is limited"
+  headerSubtitle="Supporting context is truncated independently when space is limited"
+  textOverflow="ellipsis"
+>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
+</ix-content-header>

packages/angular-standalone-test-app/src/preview-examples/content-header-text-overflow.ts

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2026 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.
+ */
+
+import { Component } from '@angular/core';
+import { IxButton, IxContentHeader } from '@siemens/ix-angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  imports: [IxContentHeader, IxButton],
+  templateUrl: './content-header-text-overflow.html',
+})
+export default class ContentHeaderTextOverflow {}

packages/angular-test-app/src/app/app-routing.module.ts

@@ -63,6 +63,7 @@ import Chip from '../preview-examples/chip';
 import ContentExample from '../preview-examples/content';
 import ContentHeader from '../preview-examples/content-header';
 import ContentHeaderNoBack from '../preview-examples/content-header-no-back';
+import ContentHeaderTextOverflow from '../preview-examples/content-header-text-overflow';
 import ContentHeaderWithSlot from '../preview-examples/content-header-with-slot';
 import CustomField from '../preview-examples/custom-field';
 import CustomFieldValidation from '../preview-examples/custom-field-validation';
@@ -552,6 +553,10 @@ const routes: Routes = [
         path: 'content-header',
         component: ContentHeader,
       },
+      {
+        path: 'content-header-text-overflow',
+        component: ContentHeaderTextOverflow,
+      },
       {
         path: 'content-header-with-slot',
         component: ContentHeaderWithSlot,

packages/angular-test-app/src/app/app.module.ts

@@ -72,6 +72,7 @@ import Chip from '../preview-examples/chip';
 import ContentExample from '../preview-examples/content';
 import ContentHeader from '../preview-examples/content-header';
 import ContentHeaderNoBack from '../preview-examples/content-header-no-back';
+import ContentHeaderTextOverflow from '../preview-examples/content-header-text-overflow';
 import ContentHeaderWithSlot from '../preview-examples/content-header-with-slot';
 import CustomField from '../preview-examples/custom-field';
 import CustomFieldValidation from '../preview-examples/custom-field-validation';
@@ -350,6 +351,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     ContentExample,
     ContentHeader,
     ContentHeaderNoBack,
+    ContentHeaderTextOverflow,
     ContentHeaderWithSlot,
     DatepickerRange,
     Datepicker,

packages/angular-test-app/src/preview-examples/content-header-text-overflow.html

@@ -0,0 +1,19 @@
+<!--
+SPDX-FileCopyrightText: 2026 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-content-header
+  hasBackButton
+  headerTitle="Content title that remains compact when horizontal space is limited"
+  headerSubtitle="Supporting context is truncated independently when space is limited"
+  textOverflow="ellipsis"
+>
+  <ix-button variant="tertiary">Button1</ix-button>
+  <ix-button variant="tertiary">Button2</ix-button>
+  <ix-button variant="tertiary">Button3</ix-button>
+</ix-content-header>

packages/angular-test-app/src/preview-examples/content-header-text-overflow.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2026 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.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './content-header-text-overflow.html',
+})
+export default class ContentHeaderTextOverflow {}

packages/angular/src/components.ts

@@ -712,14 +712,14 @@ export declare interface IxContent extends Components.IxContent {}
 
 
 @ProxyCmp({
-  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant']
+  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'textOverflow', 'variant']
 })
 @Component({
   selector: 'ix-content-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant'],
+  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'textOverflow', 'variant'],
   outputs: ['backButtonClick'],
   standalone: false
 })

packages/angular/standalone/src/components.ts

@@ -823,14 +823,14 @@ export declare interface IxContent extends Components.IxContent {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxContentHeader,
-  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant']
+  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'textOverflow', 'variant']
 })
 @Component({
   selector: 'ix-content-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'variant'],
+  inputs: ['hasBackButton', 'headerSubtitle', 'headerTitle', 'textOverflow', 'variant'],
   outputs: ['backButtonClick'],
 })
 export class IxContentHeader {