fix(sbb-form-field): ensure input element is detected during hydration (

#2894)

Closes #2877

src/elements/form-field/form-field-clear/form-field-clear.ts

@@ -5,7 +5,6 @@ import { customElement } from 'lit/decorators.js';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { SbbConnectedAbortController, SbbLanguageController } from '../../core/controllers.js';
 import { hostAttributes } from '../../core/decorators.js';
-import { hostContext } from '../../core/dom.js';
 import { i18nClearInput } from '../../core/i18n.js';
 import { SbbNegativeMixin } from '../../core/mixins.js';
 import type { SbbFormFieldElement } from '../form-field.js';
@@ -24,17 +23,15 @@ import '../../icon.js';
 export class SbbFormFieldClearElement extends SbbNegativeMixin(SbbButtonBaseElement) {
   public static override styles: CSSResultGroup = style;
 
-  private _formField?: SbbFormFieldElement;
+  private _formField?: SbbFormFieldElement | null;
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
 
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('click', () => this._handleClick(), { signal });
-    this._formField =
-      (hostContext('sbb-form-field', this) as SbbFormFieldElement) ??
-      (hostContext('[data-form-field]', this) as SbbFormFieldElement);
+    this._formField = this.closest<SbbFormFieldElement>('sbb-form-field, [data-form-field]');
 
     if (this._formField) {
       this.negative = this._formField.hasAttribute('negative');

src/elements/form-field/form-field/form-field.ts

@@ -8,7 +8,7 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c
 import { slotState } from '../../core/decorators.js';
 import { isFirefox, setOrRemoveAttribute } from '../../core/dom.js';
 import { i18nOptional } from '../../core/i18n.js';
-import { SbbNegativeMixin } from '../../core/mixins.js';
+import { SbbHydrationMixin, SbbNegativeMixin } from '../../core/mixins.js';
 import { AgnosticMutationObserver } from '../../core/observers.js';
 import type { SbbSelectElement } from '../../select.js';
 
@@ -32,7 +32,7 @@ const supportedPopupTagNames = ['sbb-autocomplete', 'sbb-select'];
  */
 @customElement('sbb-form-field')
 @slotState()
-export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
+export class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
 
   private readonly _supportedNativeInputElements = ['input', 'select', 'textarea'];