From 59671afc06e56677aacc7ae4d07b9ead2b1c135b Mon Sep 17 00:00:00 2001
From: Daniel Ritz <daniel.ritz@shellybits.ch>
Date: Wed, 25 Mar 2026 20:44:46 +0100
Subject: [PATCH] refactor(form): use container queries for automatic layout

DEPRECATED: In `si-form-container`, the input `contentContainerBreakpoints`
no longer has any effect.
---
 api-goldens/element-ng/form/index.api.md      |  1 +
 .../si-form-container.component.html          | 23 +++---------
 .../si-form-container.component.scss          |  5 +++
 .../si-form-container.component.spec.ts       | 37 -------------------
 .../si-form-container.component.ts            |  8 +---
 projects/element-ng/form/si-form.shared.scss  |  9 ++---
 6 files changed, 17 insertions(+), 66 deletions(-)

diff --git a/api-goldens/element-ng/form/index.api.md b/api-goldens/element-ng/form/index.api.md
index 12bf2d4d1a..003958ba1a 100644
--- a/api-goldens/element-ng/form/index.api.md
+++ b/api-goldens/element-ng/form/index.api.md
@@ -36,6 +36,7 @@ export const SI_FORM_ITEM_CONTROL: InjectionToken<SiFormItemControl>;
 export class SiFormContainerComponent<TControl extends {
     [K in keyof TControl]: AbstractControl;
 }> {
+    // @deprecated (undocumented)
     readonly contentContainerBreakpoints: _angular_core.InputSignal<Breakpoints | undefined>;
     readonly controlNameTranslateKeyMap: _angular_core.InputSignal<Map<string, string>>;
     readonly disableContainerBreakpoints: _angular_core.InputSignalWithTransform<boolean, unknown>;
diff --git a/projects/element-ng/form/si-form-container/si-form-container.component.html b/projects/element-ng/form/si-form-container/si-form-container.component.html
index 43a87326a9..32d5b44cc1 100644
--- a/projects/element-ng/form/si-form-container/si-form-container.component.html
+++ b/projects/element-ng/form/si-form-container/si-form-container.component.html
@@ -1,17 +1,10 @@
 <div class="d-flex flex-column align-content-stretch flex-grow-1 flex-shrink-1">
-  @if (disableContainerBreakpoints() || hasParentContainer) {
-    <div class="flex-grow-1 flex-shrink-1">
-      <ng-container *ngTemplateOutlet="contentTemplate" />
-    </div>
-  } @else {
-    <div
-      class="flex-grow-1 flex-shrink-1"
-      siResponsiveContainer
-      [breakpoints]="contentContainerBreakpoints()"
-    >
-      <ng-container *ngTemplateOutlet="contentTemplate" />
-    </div>
-  }
+  <div
+    class="flex-grow-1 flex-shrink-1"
+    [class.responsive-container]="!disableContainerBreakpoints() && !hasParentContainer"
+  >
+    <ng-content select="[si-form-container-content]" />
+  </div>
 
   @if (!readonly()) {
     <div class="d-flex flex-row flex-nowrap flex-grow-0 flex-shrink-0 py-4">
@@ -29,7 +22,3 @@
     </div>
   }
 </div>
-
-<ng-template #contentTemplate>
-  <ng-content select="[si-form-container-content]" />
-</ng-template>
diff --git a/projects/element-ng/form/si-form-container/si-form-container.component.scss b/projects/element-ng/form/si-form-container/si-form-container.component.scss
index ff626290f0..ea8bedb082 100644
--- a/projects/element-ng/form/si-form-container/si-form-container.component.scss
+++ b/projects/element-ng/form/si-form-container/si-form-container.component.scss
@@ -18,3 +18,8 @@
   text-decoration: underline;
   cursor: pointer;
 }
+
+.responsive-container {
+  container-type: inline-size;
+  container-name: si-form-container;
+}
diff --git a/projects/element-ng/form/si-form-container/si-form-container.component.spec.ts b/projects/element-ng/form/si-form-container/si-form-container.component.spec.ts
index 64d812e783..0c0d90e582 100644
--- a/projects/element-ng/form/si-form-container/si-form-container.component.spec.ts
+++ b/projects/element-ng/form/si-form-container/si-form-container.component.spec.ts
@@ -16,7 +16,6 @@ import {
   SiFormModule,
   SiFormValidationErrorMapper
 } from '@siemens/element-ng/form';
-import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
 
 interface TestForm {
   name: FormControl<string | null>;
@@ -45,20 +44,6 @@ export class TestHostComponent {
   customErrorMapper?: SiFormValidationErrorMapper | Map<string, string>;
 }
 
-@Component({
-  imports: [SiFormContainerComponent],
-  template: `
-    <si-form-container style="inline-size: 100px" [form]="form">
-      <si-form-container si-form-container-content [form]="form">
-        <div si-form-container-content style="block-size: 10px"></div>
-      </si-form-container>
-    </si-form-container>
-  `
-})
-class TestHostWithNestingComponent {
-  form = new FormGroup({});
-}
-
 describe('SiFormContainerComponent', () => {
   describe('with custom error messages', () => {
     let component: TestHostComponent;
@@ -155,26 +140,4 @@ describe('SiFormContainerComponent', () => {
       });
     });
   });
-
-  describe('with nested form containers', () => {
-    let fixture: ComponentFixture<TestHostWithNestingComponent>;
-
-    beforeEach(() => {
-      vi.useFakeTimers();
-      fixture = TestBed.createComponent(TestHostWithNestingComponent);
-      fixture.detectChanges();
-    });
-
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-
-    it('should create', async () => {
-      const spy = vi.spyOn(SiResponsiveContainerDirective.prototype as any, 'setResponsiveSize');
-      await vi.advanceTimersByTimeAsync(100);
-
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(spy).toHaveBeenCalledWith(100, 26);
-    });
-  });
 });
diff --git a/projects/element-ng/form/si-form-container/si-form-container.component.ts b/projects/element-ng/form/si-form-container/si-form-container.component.ts
index 6f843c2fea..31c13cd8a5 100644
--- a/projects/element-ng/form/si-form-container/si-form-container.component.ts
+++ b/projects/element-ng/form/si-form-container/si-form-container.component.ts
@@ -2,10 +2,9 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { NgTemplateOutlet } from '@angular/common';
 import { booleanAttribute, Component, computed, inject, input } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
-import { Breakpoints, SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
+import { Breakpoints } from '@siemens/element-ng/resize-observer';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 import { SiFormValidationErrorMapper } from '../si-form-validation-error.model';
@@ -20,7 +19,6 @@ export interface SiFormValidationError {
 
 @Component({
   selector: 'si-form-container',
-  imports: [NgTemplateOutlet, SiResponsiveContainerDirective],
   templateUrl: './si-form-container.component.html',
   styleUrl: './si-form-container.component.scss',
   host: {
@@ -44,9 +42,7 @@ export class SiFormContainerComponent<TControl extends { [K in keyof TControl]:
   readonly readonly = input(false, { transform: booleanAttribute });
 
   /**
-   * The container hosts the form within a siResizeContainer to configure the breakpoint for
-   * different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints
-   * input.
+   * @deprecated has no effect
    */
   readonly contentContainerBreakpoints = input<Breakpoints>();
 
diff --git a/projects/element-ng/form/si-form.shared.scss b/projects/element-ng/form/si-form.shared.scss
index 2d035dff8b..c6119a1da1 100644
--- a/projects/element-ng/form/si-form.shared.scss
+++ b/projects/element-ng/form/si-form.shared.scss
@@ -29,13 +29,10 @@
 }
 
 /// ACCOUNT FOR MEASURED CONTAINERS
-:host-context(.si-container-sm),
-:host-context(.si-container-md),
-:host-context(.si-container-lg),
-:host-context(.si-container-xl),
-:host-context(.si-container-xxl) {
+@container si-form-container (inline-size >= #{map.get(all-variables.$grid-breakpoints, sm)}) {
   :host.si-form-input {
-    display: flex;
+    // need !important here to override the fallback checkbox not inline style.
+    display: flex !important; // stylelint-disable-line declaration-no-important
     flex-direction: row;
     align-items: center;
   }