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

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

@@ -0,0 +1,8 @@
+---
+'@siemens/ix': minor
+'@siemens/ix-angular': minor
+'@siemens/ix-react': minor
+'@siemens/ix-vue': minor
+---
+
+Add responsive wrapping for `ix-content-header` titles and subtitles and a `textOverflow="ellipsis"` option for compact single-line ellipsis behavior with native tooltips for both values.

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

@@ -128,6 +128,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-truncate': () =>
+    import('../preview-examples/content-header-truncate').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-truncate.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 available from the native tooltip"
+  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-truncate.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-truncate.html',
+})
+export default class ContentHeaderTruncate {}

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

@@ -9,8 +9,8 @@
 
 <ix-content-header
   hasBackButton
-  headerTitle="Content title"
-  headerSubtitle="Subtitle"
+  headerTitle="Content title that remains compact when horizontal space is limited"
+  headerSubtitle="Supporting context is available from the native tooltip"
 >
   <ix-button variant="tertiary">Button1</ix-button>
   <ix-button variant="tertiary">Button2</ix-button>

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

@@ -62,6 +62,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 ContentHeaderTruncate from '../preview-examples/content-header-truncate';
 import ContentHeaderWithSlot from '../preview-examples/content-header-with-slot';
 import CustomField from '../preview-examples/custom-field';
 import CustomFieldValidation from '../preview-examples/custom-field-validation';
@@ -547,6 +548,10 @@ const routes: Routes = [
         path: 'content-header',
         component: ContentHeader,
       },
+      {
+        path: 'content-header-truncate',
+        component: ContentHeaderTruncate,
+      },
       {
         path: 'content-header-with-slot',
         component: ContentHeaderWithSlot,

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

@@ -71,6 +71,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 ContentHeaderTruncate from '../preview-examples/content-header-truncate';
 import ContentHeaderWithSlot from '../preview-examples/content-header-with-slot';
 import CustomField from '../preview-examples/custom-field';
 import CustomFieldValidation from '../preview-examples/custom-field-validation';
@@ -348,6 +349,7 @@ import WorkflowVertical from '../preview-examples/workflow-vertical';
     ContentExample,
     ContentHeader,
     ContentHeaderNoBack,
+    ContentHeaderTruncate,
     ContentHeaderWithSlot,
     DatepickerRange,
     Datepicker,

packages/angular-test-app/src/preview-examples/content-header-truncate.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 available from the native tooltip"
+  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-truncate.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-truncate.html',
+})
+export default class ContentHeaderTruncate {}

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

@@ -9,8 +9,8 @@
 
 <ix-content-header
   hasBackButton
-  headerTitle="Content title"
-  headerSubtitle="Subtitle"
+  headerTitle="Content title that remains compact when horizontal space is limited"
+  headerSubtitle="Supporting context is available from the native tooltip"
 >
   <ix-button variant="tertiary">Button1</ix-button>
   <ix-button variant="tertiary">Button2</ix-button>

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 {

packages/core/component-api.json

@@ -2254,6 +2254,17 @@
           "required": false,
           "deprecated": false
         },
+        {
+          "name": "textOverflow",
+          "attribute": "text-overflow",
+          "type": "\"ellipsis\" | \"wrap\"",
+          "mutable": false,
+          "reflectToAttribute": true,
+          "default": "'wrap'",
+          "optional": false,
+          "required": false,
+          "deprecated": false
+        },
         {
           "name": "variant",
           "attribute": "variant",

packages/core/src/components.d.ts

@@ -22,7 +22,7 @@ import { InputState } from "./components/category-filter/input-state";
 import { ChatAttachmentStatus } from "./components/chat-attachment/chat-attachment.types";
 import { ChipVariant } from "./components/chip/chip.types";
 import { ColumnSize } from "./components/col/col.types";
-import { ContentHeaderVariant } from "./components/content-header/content-header.types";
+import { ContentHeaderTextOverflow, ContentHeaderVariant } from "./components/content-header/content-header.types";
 import { CssGridTemplateType } from "./components/css-grid/css-grid.types";
 import { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 import { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown.types";
@@ -79,7 +79,7 @@ export { InputState } from "./components/category-filter/input-state";
 export { ChatAttachmentStatus } from "./components/chat-attachment/chat-attachment.types";
 export { ChipVariant } from "./components/chip/chip.types";
 export { ColumnSize } from "./components/col/col.types";
-export { ContentHeaderVariant } from "./components/content-header/content-header.types";
+export { ContentHeaderTextOverflow, ContentHeaderVariant } from "./components/content-header/content-header.types";
 export { CssGridTemplateType } from "./components/css-grid/css-grid.types";
 export { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 export { DateDropdownOption, DateRangeChangeEvent } from "./components/date-dropdown/date-dropdown.types";
@@ -1051,6 +1051,12 @@ export namespace Components {
           * Title of Header
          */
         "headerTitle"?: string;
+        /**
+          * Controls how the title and subtitle handle limited horizontal space.
+          * @since 5.2.0
+          * @default 'wrap'
+         */
+        "textOverflow": ContentHeaderTextOverflow;
         /**
           * Variant of content header
           * @default 'primary'
@@ -8020,6 +8026,12 @@ declare namespace LocalJSX {
           * Triggered when back button is clicked
          */
         "onBackButtonClick"?: (event: IxContentHeaderCustomEvent<void>) => void;
+        /**
+          * Controls how the title and subtitle handle limited horizontal space.
+          * @since 5.2.0
+          * @default 'wrap'
+         */
+        "textOverflow"?: ContentHeaderTextOverflow;
         /**
           * Variant of content header
           * @default 'primary'
@@ -12383,6 +12395,7 @@ declare namespace LocalJSX {
         "variant": ContentHeaderVariant;
         "headerTitle": string;
         "headerSubtitle": string | undefined;
+        "textOverflow": ContentHeaderTextOverflow;
         "hasBackButton": boolean;
     }
     interface IxCssGridItemAttributes {

packages/core/src/components/content-header/content-header.scss

@@ -18,19 +18,30 @@
     flex-direction: column;
     flex: 1 1 0;
     min-width: 0;
-    white-space: nowrap;
     margin-right: 0.5rem;
 
-    .titleOverflow {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .headerText {
+      min-width: 0;
+      overflow-wrap: anywhere;
+
+      &.truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
 
     .headerTitleRow {
       display: flex;
 
+      .headerText {
+        flex: 0 1 auto;
+      }
+
       .headerSlot {
         display: inline-flex;
+        flex: 0 0 auto;
+        align-self: flex-start;
         margin-left: 0.5rem;
       }
     }

packages/core/src/components/content-header/content-header.tsx

@@ -9,7 +9,10 @@
 
 import { iconArrowLeft } from '@siemens/ix-icons/icons';
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
-import type { ContentHeaderVariant } from './content-header.types';
+import type {
+  ContentHeaderTextOverflow,
+  ContentHeaderVariant,
+} from './content-header.types';
 
 /**
  * @slot header - Content to be placed in the header area next to the title
@@ -36,6 +39,13 @@ export class ContentHeader {
    */
   @Prop() headerSubtitle: string | undefined = undefined;
 
+  /**
+   * Controls how the title and subtitle handle limited horizontal space.
+   *
+   * @since 5.2.0
+   */
+  @Prop({ reflect: true }) textOverflow: ContentHeaderTextOverflow = 'wrap';
+
   /**
    * Display a back button
    */
@@ -64,8 +74,12 @@ export class ContentHeader {
               format={this.variant === 'secondary' ? 'h4' : 'h3'}
               class={{
                 secondary: this.variant === 'secondary',
-                titleOverflow: true,
+                headerText: true,
+                truncate: this.textOverflow === 'ellipsis',
               }}
+              title={
+                this.textOverflow === 'ellipsis' ? this.headerTitle : undefined
+              }
             >
               {this.headerTitle}
             </ix-typography>
@@ -79,9 +93,14 @@ export class ContentHeader {
               text-color={'soft'}
               class={{
                 subtitle: this.variant === 'secondary',
-                titleOverflow: true,
+                headerText: true,
+                truncate: this.textOverflow === 'ellipsis',
               }}
-              title={this.headerSubtitle}
+              title={
+                this.textOverflow === 'ellipsis'
+                  ? this.headerSubtitle
+                  : undefined
+              }
             >
               {this.headerSubtitle}
             </ix-typography>

packages/core/src/components/content-header/content-header.types.ts

@@ -7,3 +7,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 export type ContentHeaderVariant = 'primary' | 'secondary';
+
+export type ContentHeaderTextOverflow = 'wrap' | 'ellipsis';