From f51d8da120900f841b8878e9b53cb69f69a47d1f Mon Sep 17 00:00:00 2001
From: "Bajohr, Rayk" <rayk.bajohr@siemens.com>
Date: Fri, 21 Aug 2026 12:45:32 +0200
Subject: [PATCH] feat(split)!: migrate showCollapseButton to collapsible

Closes #2596

BREAKING CHANGE: The `showCollapseButton` input on si-split-part has been removed.

The collapse button will now be rendered when the `collapsible` input is provided.

Before:

```html
<si-split>
  <si-split-part showCollapseButton="false" ... />
  <si-split-part showCollapseButton="true" ... />
</si-split>
```

After:

```html
<si-split>
  <!-- The collapse button won't be rendered when the collapsible input is not provided -->
  <si-split-part ... />
  <!-- The collapse button will be rendered when the collapsible input is provided -->
  <si-split-part collapsible="to-start" ... />
</si-split>
```
---
 api-goldens/element-ng/split/index.api.md     |   3 +-
 .../si-list-details.component.html            |   2 -
 .../si-main-detail-container.component.html   |   2 -
 .../schematics/ng-update/index.spec.ts        | 156 ++++++++++--
 .../ng-update/migrate-split-collapse.ts       | 234 +++++++++++++++---
 .../split/si-split-part.component.html        |   2 +-
 .../split/si-split-part.component.spec.ts     |  25 ++
 .../split/si-split-part.component.ts          |  12 +-
 .../split/si-split.component.spec.ts          |   3 -
 .../si-split/si-split-hide-collapse.html      |   8 +-
 .../si-split/si-split-hide-header.html        |   1 -
 src/app/examples/si-split/si-split-mixed.html |   1 -
 12 files changed, 364 insertions(+), 85 deletions(-)
 create mode 100644 projects/element-ng/split/si-split-part.component.spec.ts

diff --git a/api-goldens/element-ng/split/index.api.md b/api-goldens/element-ng/split/index.api.md
index 2d6fbd40b6..2c773e45ac 100644
--- a/api-goldens/element-ng/split/index.api.md
+++ b/api-goldens/element-ng/split/index.api.md
@@ -56,7 +56,7 @@ export class SiSplitPartComponent {
     readonly collapseLabel: _angular_core.InputSignal<TranslatableString>;
     readonly collapseOthers: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly collapseToMinSize: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly collapsible: _angular_core.InputSignal<CollapseTo>;
+    readonly collapsible: _angular_core.InputSignal<CollapseTo | undefined>;
     readonly expanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly headerTemplate: _angular_core.InputSignal<TemplateRef<{
         $implicit: SiSplitPartComponent;
@@ -65,7 +65,6 @@ export class SiSplitPartComponent {
     readonly minSize: _angular_core.InputSignalWithTransform<number, unknown>;
     readonly removeContentOnCollapse: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly scale: _angular_core.InputSignal<Scale>;
-    readonly showCollapseButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly showHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
     readonly stateChange: _angular_core.OutputEmitterRef<PartState>;
diff --git a/projects/element-ng/list-details/si-list-details.component.html b/projects/element-ng/list-details/si-list-details.component.html
index f05b6b20a1..6ab488714c 100644
--- a/projects/element-ng/list-details/si-list-details.component.html
+++ b/projects/element-ng/list-details/si-list-details.component.html
@@ -9,7 +9,6 @@
       scale="none"
       unit="fr"
       [size]="splitSizes()[0]"
-      [showCollapseButton]="false"
       [showHeader]="false"
       [minSize]="minListSize()"
       [stateId]="listStateId()"
@@ -20,7 +19,6 @@
       scale="auto"
       unit="fr"
       [size]="splitSizes()[1]"
-      [showCollapseButton]="false"
       [showHeader]="false"
       [minSize]="minDetailsSize()"
       [stateId]="detailsStateId()"
diff --git a/projects/element-ng/main-detail-container/si-main-detail-container.component.html b/projects/element-ng/main-detail-container/si-main-detail-container.component.html
index 4a278e151a..db6739a0e4 100644
--- a/projects/element-ng/main-detail-container/si-main-detail-container.component.html
+++ b/projects/element-ng/main-detail-container/si-main-detail-container.component.html
@@ -11,7 +11,6 @@
         scale="none"
         unit="fr"
         [size]="splitSizes[0]"
-        [showCollapseButton]="false"
         [showHeader]="false"
         [minSize]="minMainSize()"
         [stateId]="mainStateId()"
@@ -22,7 +21,6 @@
         scale="auto"
         unit="fr"
         [size]="splitSizes[1]"
-        [showCollapseButton]="false"
         [showHeader]="false"
         [minSize]="minDetailSize()"
         [stateId]="detailStateId()"
diff --git a/projects/element-ng/schematics/ng-update/index.spec.ts b/projects/element-ng/schematics/ng-update/index.spec.ts
index 0a406942ca..6de612544f 100644
--- a/projects/element-ng/schematics/ng-update/index.spec.ts
+++ b/projects/element-ng/schematics/ng-update/index.spec.ts
@@ -95,7 +95,7 @@ export const appConfig: ApplicationConfig = {
 
 @Component({
   selector: 'app-split',
-  template: \`<si-split [sizes]="[20, 60, 20]">
+  template: \`<si-split [sizes]="[20, 60, 30]">
   <si-split-part>Left</si-split-part>
   <si-split-part>Center</si-split-part>
   <si-split-part>Right</si-split-part>
@@ -108,9 +108,9 @@ export class SplitComponent {}`
     const modifiedContent = tree.readContent('/projects/app/src/split.component.ts');
 
     expect(modifiedContent).not.toContain('[sizes]');
-    expect(modifiedContent).toContain('<si-split-part size="20" unit="fr">Left</si-split-part>');
-    expect(modifiedContent).toContain('<si-split-part size="60" unit="fr">Center</si-split-part>');
-    expect(modifiedContent).toContain('<si-split-part size="20" unit="fr">Right</si-split-part>');
+    expect(modifiedContent).toContain('<si-split-part size="20" unit="fr"');
+    expect(modifiedContent).toContain('<si-split-part size="60" unit="fr"');
+    expect(modifiedContent).toContain('<si-split-part size="30" unit="fr"');
   });
 
   it('should move expression split sizes to external split parts', async () => {
@@ -132,12 +132,8 @@ export class SplitComponent {}`,
     const modifiedContent = tree.readContent('/projects/app/src/split.component.html');
 
     expect(modifiedContent).not.toContain('[sizes]');
-    expect(modifiedContent).toContain(
-      '<si-split-part [size]="panelSizes[0]" unit="fr">Left</si-split-part>'
-    );
-    expect(modifiedContent).toContain(
-      '<si-split-part [size]="panelSizes[1]" unit="fr">Right</si-split-part>'
-    );
+    expect(modifiedContent).toContain('<si-split-part [size]="panelSizes[0]" unit="fr"');
+    expect(modifiedContent).toContain('<si-split-part [size]="panelSizes[1]" unit="fr"');
   });
 
   it('should pass options to sub-migrations', async () => {
@@ -168,8 +164,8 @@ export class SplitComponent {}`
     const tree = await runner.runSchematic('migration-v51', {}, appTree);
     const modifiedContent = tree.readContent('/projects/app/src/split.component.ts');
 
-    expect(modifiedContent).toContain('<si-split-part size="300" unit="px">Left</si-split-part>');
-    expect(modifiedContent).toContain('<si-split-part size="200" unit="px">Right</si-split-part>');
+    expect(modifiedContent).toContain('<si-split-part size="300" unit="px"');
+    expect(modifiedContent).toContain('<si-split-part size="200" unit="px"');
   });
 
   it('should add unit="px" to a split part with a bound size but no unit (external template)', async () => {
@@ -190,12 +186,8 @@ export class SplitComponent {}`,
     const tree = await runner.runSchematic('migration-v51', {}, appTree);
     const modifiedContent = tree.readContent('/projects/app/src/split.component.html');
 
-    expect(modifiedContent).toContain(
-      '<si-split-part [size]="leftSize" unit="px">Left</si-split-part>'
-    );
-    expect(modifiedContent).toContain(
-      '<si-split-part [size]="rightSize" unit="px">Right</si-split-part>'
-    );
+    expect(modifiedContent).toContain('<si-split-part [size]="leftSize" unit="px"');
+    expect(modifiedContent).toContain('<si-split-part [size]="rightSize" unit="px"');
   });
 
   it('should not add unit="px" when unit is already present', async () => {
@@ -209,10 +201,8 @@ export class SplitComponent {}`,
     const tree = await runner.runSchematic('migration-v51', {}, appTree);
     const modifiedContent = tree.readContent('/projects/app/src/split.component.html');
 
-    expect(modifiedContent).toContain('<si-split-part size="20" unit="fr">Left</si-split-part>');
-    expect(modifiedContent).toContain(
-      '<si-split-part [size]="rightSize" [unit]="unitVal">Right</si-split-part>'
-    );
+    expect(modifiedContent).toContain('<si-split-part size="20" unit="fr"');
+    expect(modifiedContent).toContain('<si-split-part [size]="rightSize" [unit]="unitVal"');
   });
 
   it('should add unit="fr" when converting [sizes] and not duplicate with unit="px"', async () => {
@@ -234,8 +224,8 @@ export class SplitComponent {}`,
     const modifiedContent = tree.readContent('/projects/app/src/split.component.html');
 
     expect(modifiedContent).not.toContain('[sizes]');
-    expect(modifiedContent).toContain('<si-split-part size="30" unit="fr">Left</si-split-part>');
-    expect(modifiedContent).toContain('<si-split-part size="70" unit="fr">Right</si-split-part>');
+    expect(modifiedContent).toContain('<si-split-part size="30" unit="fr"');
+    expect(modifiedContent).toContain('<si-split-part size="70" unit="fr"');
     expect(modifiedContent).not.toContain('unit="px"');
   });
 
@@ -257,8 +247,8 @@ export class SplitComponent {}`,
     const tree = await runner.runSchematic('migration-v51', {}, appTree);
     const modifiedContent = tree.readContent('/projects/app/src/split.component.html');
 
-    expect(modifiedContent).toContain('<si-split-part size="400" heading="Left"  unit="px"/>');
-    expect(modifiedContent).toContain('<si-split-part size="200" heading="Right"  unit="px"/>');
+    expect(modifiedContent).toContain('<si-split-part size="400" heading="Left"  unit="px"');
+    expect(modifiedContent).toContain('<si-split-part size="200" heading="Right"  unit="px"');
   });
 
   it('should rename split collapse bindings and CollapseTo literals', async () => {
@@ -303,4 +293,118 @@ export class ExternalSplitComponent {}`,
     expect(template).toContain('<si-split-part collapsible="to-end" />');
     expect(template).toContain('<div collapseDirection="start"></div>');
   });
+
+  it('should add the former default collapse direction to collapsible split parts', async () => {
+    addTestFiles(appTree, {
+      '/projects/app/src/split.component.ts': `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-split',
+  template: \`<si-split-part />
+<si-split-part showCollapseButton />
+<si-split-part showCollapseButton="true" />
+<si-split-part [showCollapseButton]="true" />\`
+})
+export class SplitComponent {}`
+    });
+
+    const tree = await runner.runSchematic('migration-v51', {}, appTree);
+    const component = tree.readContent('/projects/app/src/split.component.ts');
+
+    expect(component).not.toContain('showCollapseButton');
+    expect(component.match(/collapsible="to-start"/g)).toHaveLength(4);
+  });
+
+  it('should remove false collapse buttons and their legacy directions', async () => {
+    addTestFiles(appTree, {
+      '/projects/app/src/split.component.ts': `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-split',
+  template: \`<si-split-part showCollapseButton="false" collapseDirection="start" />
+<si-split-part [showCollapseButton]="'false'" [collapseDirection]="'end'" />
+<si-split-part showCollapseButton="false" />\`
+})
+export class SplitComponent {}`,
+      '/projects/app/src/external-split.component.ts': `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-external-split',
+  templateUrl: './split.component.html'
+})
+export class ExternalSplitComponent {}`,
+      '/projects/app/src/split.component.html': `<si-split-part
+  heading="Details"
+  [showCollapseButton]="false"
+  [collapseDirection]="'end'"
+>
+  <p>Content</p>
+</si-split-part>`
+    });
+
+    const tree = await runner.runSchematic('migration-v51', {}, appTree);
+    const component = tree.readContent('/projects/app/src/split.component.ts');
+    const template = tree.readContent('/projects/app/src/split.component.html');
+
+    expect(component).not.toContain('showCollapseButton');
+    expect(component).not.toContain('collapseDirection');
+    expect(component).not.toContain('collapsible');
+    expect(template).toBe(`<si-split-part
+  heading="Details"
+>
+  <p>Content</p>
+</si-split-part>`);
+  });
+
+  it('should conditionally migrate dynamic collapse button bindings', async () => {
+    addTestFiles(appTree, {
+      '/projects/app/src/split.component.ts': `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-split',
+  template: \`<si-split-part [showCollapseButton]="canCollapse" />
+<si-split-part [showCollapseButton]="canCollapse" collapseDirection="end" />
+<si-split-part [showCollapseButton]="canCollapse" [collapseDirection]="direction" />
+<div [showCollapseButton]="canCollapse"></div>\`
+})
+export class SplitComponent {
+  readonly canCollapse = false;
+  readonly direction = 'end';
+}`
+    });
+
+    const tree = await runner.runSchematic('migration-v51', {}, appTree);
+    const component = tree.readContent('/projects/app/src/split.component.ts');
+
+    const condition = `![false, null, undefined, 'false'].includes($any(canCollapse))`;
+    expect(component).toContain(`[collapsible]="${condition} ? 'to-start' : undefined"`);
+    expect(component).toContain(`[collapsible]="${condition} ? 'to-end' : undefined"`);
+    expect(component).toContain(`[collapsible]="${condition} ? (direction) : undefined"`);
+    expect(component).toContain('<div [showCollapseButton]="canCollapse"></div>');
+    expect(component.match(/showCollapseButton/g)).toHaveLength(1);
+    expect(component).not.toContain('collapseDirection');
+  });
+
+  it('should preserve an explicit collapsible input when removing showCollapseButton=false', async () => {
+    addTestFiles(appTree, {
+      '/projects/app/src/split.component.ts': `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-split',
+  template: \`<si-split-part showCollapseButton="false" collapsible="to-end" />\`
+})
+export class SplitComponent {}`
+    });
+
+    const tree = await runner.runSchematic('migration-v51', {}, appTree);
+    const component = tree.readContent('/projects/app/src/split.component.ts');
+
+    expect(component).toBe(`import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-split',
+  template: \`<si-split-part collapsible="to-end" />\`
+})
+export class SplitComponent {}`);
+  });
 });
diff --git a/projects/element-ng/schematics/ng-update/migrate-split-collapse.ts b/projects/element-ng/schematics/ng-update/migrate-split-collapse.ts
index 32c11e83b0..f5dbd6c56b 100644
--- a/projects/element-ng/schematics/ng-update/migrate-split-collapse.ts
+++ b/projects/element-ng/schematics/ng-update/migrate-split-collapse.ts
@@ -4,6 +4,7 @@
  */
 
 import { Rule, SchematicContext, Tree, UpdateRecorder } from '@angular-devkit/schematics';
+import type { Attribute, Element } from '@angular/compiler';
 import { dirname, join } from 'path/posix';
 import ts from 'typescript';
 
@@ -18,6 +19,9 @@ const collapseValues = new Map([
   ['start', 'to-start'],
   ['end', 'to-end']
 ]);
+const collapseDirectionNames = ['collapseDirection', '[collapseDirection]'];
+const collapsibleNames = ['collapsible', '[collapsible]'];
+const showCollapseButtonNames = ['showCollapseButton', '[showCollapseButton]'];
 
 export const splitCollapseMigrationRule = (options: { path: string }): Rule => {
   return async (tree: Tree, context: SchematicContext) => {
@@ -64,49 +68,217 @@ const migrateSplitCollapseTemplate = (
   recorder: UpdateRecorder
 ): void => {
   findElement(template, element => element.name === 'si-split-part').forEach(element => {
-    element.attrs
-      .filter(
-        attribute =>
-          attribute.name === 'collapseDirection' || attribute.name === '[collapseDirection]'
-      )
-      .forEach(attribute => {
-        const isBound = attribute.name.startsWith('[');
-        const attributeNameOffset = attribute.sourceSpan.start.offset + offset + (isBound ? 1 : 0);
-        recorder.remove(attributeNameOffset, 'collapseDirection'.length);
-        recorder.insertLeft(attributeNameOffset, 'collapsible');
-
-        const value = isBound
-          ? getStringLiteral(attribute.value)
-          : collapseValues.get(attribute.value);
-        if (!value || !attribute.valueSpan) {
-          return;
-        }
-
-        const valueOffset = attribute.valueSpan.start.offset + offset;
-        recorder.remove(
-          valueOffset,
-          attribute.valueSpan.end.offset - attribute.valueSpan.start.offset
-        );
-        recorder.insertLeft(valueOffset, isBound ? `'${value}'` : value);
-      });
+    migrateSplitCollapseElement(template, element, offset, recorder);
   });
 };
 
+const migrateSplitCollapseElement = (
+  template: string,
+  element: Element,
+  offset: number,
+  recorder: UpdateRecorder
+): void => {
+  const showCollapseButton = element.attrs.find(attribute =>
+    showCollapseButtonNames.includes(attribute.name)
+  );
+  const collapseDirections = element.attrs.filter(attribute =>
+    collapseDirectionNames.includes(attribute.name)
+  );
+  const collapseDirection = collapseDirections[0];
+  const collapsible = element.attrs.find(attribute => collapsibleNames.includes(attribute.name));
+
+  if (showCollapseButton) {
+    const staticValue = getStaticBooleanValue(showCollapseButton);
+    if (staticValue === undefined) {
+      const target = collapsible ?? collapseDirection ?? showCollapseButton;
+      replaceAttribute(
+        target,
+        formatBoundAttribute(
+          'collapsible',
+          `${getBooleanAttributeCondition(getShowCollapseButtonExpression(showCollapseButton))} ? ${getCollapsibleExpression(collapsible ?? collapseDirection)} : undefined`
+        ),
+        offset,
+        recorder
+      );
+      if (target !== showCollapseButton) {
+        removeAttribute(template, showCollapseButton, offset, recorder);
+      }
+      collapseDirections
+        .filter(attribute => attribute !== target)
+        .forEach(attribute => removeAttribute(template, attribute, offset, recorder));
+      return;
+    }
+
+    removeAttribute(template, showCollapseButton, offset, recorder);
+    if (!staticValue && !collapsible) {
+      collapseDirections.forEach(attribute =>
+        removeAttribute(template, attribute, offset, recorder)
+      );
+      return;
+    }
+  }
+
+  if (collapsible) {
+    collapseDirections.forEach(attribute => removeAttribute(template, attribute, offset, recorder));
+    return;
+  }
+
+  if (collapseDirections.length > 0) {
+    collapseDirections.forEach(attribute => migrateCollapseDirection(attribute, offset, recorder));
+  } else {
+    insertAttribute(template, element, 'collapsible="to-start"', offset, recorder);
+  }
+};
+
+const migrateCollapseDirection = (
+  attribute: Attribute,
+  offset: number,
+  recorder: UpdateRecorder
+): void => {
+  const isBound = attribute.name.startsWith('[');
+  const attributeNameOffset = attribute.sourceSpan.start.offset + offset + (isBound ? 1 : 0);
+  recorder.remove(attributeNameOffset, 'collapseDirection'.length);
+  recorder.insertLeft(attributeNameOffset, 'collapsible');
+
+  const value = isBound ? getStringLiteral(attribute.value) : collapseValues.get(attribute.value);
+  if (!value || !attribute.valueSpan) {
+    return;
+  }
+
+  const valueOffset = attribute.valueSpan.start.offset + offset;
+  recorder.remove(valueOffset, attribute.valueSpan.end.offset - attribute.valueSpan.start.offset);
+  recorder.insertLeft(valueOffset, isBound ? `'${value}'` : value);
+};
+
+const getCollapsibleExpression = (attribute: Attribute | undefined): string => {
+  if (!attribute) {
+    return `'to-start'`;
+  }
+
+  if (attribute.name.startsWith('[')) {
+    const migratedLiteral = getStringLiteral(attribute.value);
+    return migratedLiteral ? `'${migratedLiteral}'` : `(${attribute.value})`;
+  }
+
+  return `'${collapseValues.get(attribute.value) ?? attribute.value}'`;
+};
+
+const getStaticBooleanValue = (attribute: Attribute): boolean | undefined => {
+  if (!attribute.name.startsWith('[')) {
+    if (/^\s*{{[\s\S]*}}\s*$/.test(attribute.value)) {
+      return undefined;
+    }
+    return attribute.value !== 'false';
+  }
+
+  const initializer = getExpression(attribute.value);
+  if (!initializer) {
+    return undefined;
+  }
+
+  if (initializer.kind === ts.SyntaxKind.TrueKeyword) {
+    return true;
+  }
+  if (
+    initializer.kind === ts.SyntaxKind.FalseKeyword ||
+    initializer.kind === ts.SyntaxKind.NullKeyword ||
+    (ts.isIdentifier(initializer) && initializer.text === 'undefined') ||
+    (ts.isStringLiteral(initializer) && initializer.text === 'false')
+  ) {
+    return false;
+  }
+  if (ts.isStringLiteral(initializer) || ts.isNumericLiteral(initializer)) {
+    return true;
+  }
+
+  return undefined;
+};
+
+const getShowCollapseButtonExpression = (attribute: Attribute): string => {
+  if (attribute.name.startsWith('[')) {
+    return attribute.value;
+  }
+
+  return attribute.value.replace(/^\s*{{\s*|\s*}}\s*$/g, '');
+};
+
+const getBooleanAttributeCondition = (expression: string): string =>
+  `![false, null, undefined, 'false'].includes($any(${expression}))`;
+
+const formatBoundAttribute = (name: string, expression: string): string => {
+  const quote = expression.includes('"') && !expression.includes("'") ? "'" : '"';
+  const escapedExpression =
+    quote === '"' ? expression.replaceAll('"', '&quot;') : expression.replaceAll("'", '&#39;');
+  return `[${name}]=${quote}${escapedExpression}${quote}`;
+};
+
+const replaceAttribute = (
+  attribute: Attribute,
+  replacement: string,
+  offset: number,
+  recorder: UpdateRecorder
+): void => {
+  const start = attribute.sourceSpan.start.offset + offset;
+  recorder.remove(start, attribute.sourceSpan.end.offset - attribute.sourceSpan.start.offset);
+  recorder.insertLeft(start, replacement);
+};
+
+const insertAttribute = (
+  template: string,
+  element: Element,
+  attribute: string,
+  offset: number,
+  recorder: UpdateRecorder
+): void => {
+  const selfClosing = element.startSourceSpan.toString().endsWith('/>');
+  const insertOffset = element.startSourceSpan.end.offset - (selfClosing ? 2 : 1);
+  const prefix = /\s/.test(template[insertOffset - 1]) ? '' : ' ';
+  recorder.insertLeft(insertOffset + offset, `${prefix}${attribute}${selfClosing ? ' ' : ''}`);
+};
+
+const removeAttribute = (
+  template: string,
+  attribute: { sourceSpan: { start: { offset: number }; end: { offset: number } } },
+  offset: number,
+  recorder: UpdateRecorder
+): void => {
+  const start = attribute.sourceSpan.start.offset;
+  const end = attribute.sourceSpan.end.offset;
+  const lineStart = template.lastIndexOf('\n', start - 1) + 1;
+  const lineEnd = template.indexOf('\n', end);
+  const endOfLine = lineEnd === -1 ? template.length : lineEnd;
+  if (
+    template.slice(lineStart, start).trim() === '' &&
+    template.slice(end, endOfLine).trim() === ''
+  ) {
+    const removeEnd = lineEnd === -1 ? endOfLine : lineEnd + 1;
+    recorder.remove(lineStart + offset, removeEnd - lineStart);
+    return;
+  }
+
+  const removeStart = start > 0 && /\s/.test(template[start - 1]) ? start - 1 : start;
+  recorder.remove(removeStart + offset, attribute.sourceSpan.end.offset - removeStart);
+};
+
 const getStringLiteral = (value: string): string | undefined => {
-  const expression = ts.createSourceFile(
+  const initializer = getExpression(value);
+  return initializer && ts.isStringLiteral(initializer)
+    ? collapseValues.get(initializer.text)
+    : undefined;
+};
+
+const getExpression = (value: string): ts.Expression | undefined => {
+  const statement = ts.createSourceFile(
     'template-expression.ts',
     `const value = ${value};`,
     ts.ScriptTarget.Latest,
     true
   ).statements[0];
-  if (!expression || !ts.isVariableStatement(expression)) {
+  if (!statement || !ts.isVariableStatement(statement)) {
     return undefined;
   }
 
-  const initializer = expression.declarationList.declarations[0]?.initializer;
-  return initializer && ts.isStringLiteral(initializer)
-    ? collapseValues.get(initializer.text)
-    : undefined;
+  return statement.declarationList.declarations[0]?.initializer;
 };
 
 const migrateCollapseToLiterals = (sourceFile: ts.SourceFile, recorder: UpdateRecorder): void => {
diff --git a/projects/element-ng/split/si-split-part.component.html b/projects/element-ng/split/si-split-part.component.html
index 92f34a5dc5..36557f97ba 100644
--- a/projects/element-ng/split/si-split-part.component.html
+++ b/projects/element-ng/split/si-split-part.component.html
@@ -18,7 +18,7 @@
         }
       </div>
     }
-    @if (showCollapseButton()) {
+    @if (collapsible()) {
       <div class="si-split-part-collapse-button">
         <button
           type="button"
diff --git a/projects/element-ng/split/si-split-part.component.spec.ts b/projects/element-ng/split/si-split-part.component.spec.ts
new file mode 100644
index 0000000000..0d885157aa
--- /dev/null
+++ b/projects/element-ng/split/si-split-part.component.spec.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { inputBinding } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { page } from 'vitest/browser';
+
+import { SiSplitPartComponent } from './si-split-part.component';
+
+describe('SiSplitPartComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [SiSplitPartComponent] }).compileComponents();
+  });
+
+  it('should not be collapsible by default', async () => {
+    const fixture = TestBed.createComponent(SiSplitPartComponent, {
+      bindings: [inputBinding('size', () => 1), inputBinding('unit', () => 'fr')]
+    });
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.collapsible()).toBeUndefined();
+    await expect.element(page.getByRole('button', { name: 'Collapse' })).not.toBeInTheDocument();
+  });
+});
diff --git a/projects/element-ng/split/si-split-part.component.ts b/projects/element-ng/split/si-split-part.component.ts
index 344aab2130..7a02f13429 100644
--- a/projects/element-ng/split/si-split-part.component.ts
+++ b/projects/element-ng/split/si-split-part.component.ts
@@ -52,10 +52,11 @@ export class SiSplitPartComponent {
   readonly actions = input<Action[]>([]);
   /**
    * Defines whether and in which direction the split part can collapse.
+   * When unset, the collapse button is hidden.
    *
-   * @defaultValue 'to-start'
+   * @defaultValue undefined
    */
-  readonly collapsible = input<CollapseTo>('to-start');
+  readonly collapsible = input<CollapseTo>();
 
   /**
    * Sets the icon class that is used in the buttons of split parts to
@@ -105,13 +106,6 @@ export class SiSplitPartComponent {
    */
   readonly scale = input<Scale>('auto');
 
-  /**
-   * Defines if the collapse button of a split part is displayed. Default value is true.
-   *
-   * @defaultValue true
-   */
-  readonly showCollapseButton = input(true, { transform: booleanAttribute });
-
   /**
    * Defines if the header of the split part is visible. Default is true.
    *
diff --git a/projects/element-ng/split/si-split.component.spec.ts b/projects/element-ng/split/si-split.component.spec.ts
index a4bd3bb59c..ac77c8c235 100644
--- a/projects/element-ng/split/si-split.component.spec.ts
+++ b/projects/element-ng/split/si-split.component.spec.ts
@@ -45,7 +45,6 @@ class SynchronousMockStore implements UIStateStorage {
           collapseLabel="collapse"
           heading="part 1"
           removeContentOnCollapse="false"
-          showCollapseButton="true"
           showHeader="true"
           [actions]="[]"
           [collapseToMinSize]="collapseToMinSize1()"
@@ -65,7 +64,6 @@ class SynchronousMockStore implements UIStateStorage {
           collapseLabel="collapse"
           heading="part 2"
           removeContentOnCollapse="false"
-          showCollapseButton="true"
           showHeader="true"
           [actions]="[]"
           [collapsible]="collapsible2()"
@@ -88,7 +86,6 @@ class SynchronousMockStore implements UIStateStorage {
             heading="part 3"
             removeContentOnCollapse="false"
             stateId="three"
-            showCollapseButton="true"
             showHeader="true"
             [actions]="[]"
             [collapsible]="collapsible3()"
diff --git a/src/app/examples/si-split/si-split-hide-collapse.html b/src/app/examples/si-split/si-split-hide-collapse.html
index b4650dd710..d316cc628e 100644
--- a/src/app/examples/si-split/si-split-hide-collapse.html
+++ b/src/app/examples/si-split/si-split-hide-collapse.html
@@ -11,13 +11,7 @@
     <p class="p-4 text-secondary">Split Part #1</p>
   </si-split-part>
 
-  <si-split-part
-    heading="Details"
-    class="bg-base-1"
-    size="60"
-    unit="fr"
-    [showCollapseButton]="false"
-  >
+  <si-split-part heading="Details" class="bg-base-1" size="60" unit="fr">
     <p class="p-4 text-secondary">Split Part #2</p>
   </si-split-part>
 </si-split>
diff --git a/src/app/examples/si-split/si-split-hide-header.html b/src/app/examples/si-split/si-split-hide-header.html
index c8887867d3..70a689971f 100644
--- a/src/app/examples/si-split/si-split-hide-header.html
+++ b/src/app/examples/si-split/si-split-hide-header.html
@@ -15,7 +15,6 @@
     heading="Details"
     size="70"
     unit="fr"
-    [showCollapseButton]="false"
     [actions]="[{ iconClass: 'element-edit', click: logEvent, tooltip: 'edit' }]"
   >
     <si-split orientation="vertical">
diff --git a/src/app/examples/si-split/si-split-mixed.html b/src/app/examples/si-split/si-split-mixed.html
index 3c4025e42d..dbc2f638cd 100644
--- a/src/app/examples/si-split/si-split-mixed.html
+++ b/src/app/examples/si-split/si-split-mixed.html
@@ -23,7 +23,6 @@
     class="bg-base-1"
     size="60"
     unit="fr"
-    [showCollapseButton]="false"
   >
     <si-split orientation="vertical" stateId="vertical-split">
       <si-split-part