fix: initial loading should not contain animation

src/elements/checkbox/checkbox-panel/checkbox-panel.ts

@@ -43,10 +43,11 @@ export class SbbCheckboxPanelElement extends SbbPanelMixin(
 ) {
   public static override styles: CSSResultGroup = [checkboxCommonStyle, panelCommonStyle];
 
+  // FIXME using ...super.events requires: https://github.com/sbb-design-systems/lyne-components/issues/2600
   public static readonly events = {
     didChange: 'didChange',
     stateChange: 'stateChange',
-    checkboxLoaded: 'checkboxLoaded',
+    panelConnected: 'panelConnected',
   } as const;
 
   /**
@@ -60,26 +61,11 @@ export class SbbCheckboxPanelElement extends SbbPanelMixin(
     { bubbles: true },
   );
 
-  /**
-   * @internal
-   * Internal event that emits when the checkbox is loaded.
-   */
-  private _checkboxLoaded: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbCheckboxPanelElement.events.checkboxLoaded,
-    { bubbles: true },
-  );
-
   public constructor() {
     super();
     new SbbSlotStateController(this);
   }
 
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    this._checkboxLoaded.emit();
-  }
-
   protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
     super.willUpdate(changedProperties);
 

src/elements/core/mixins/panel-mixin.ts

@@ -1,6 +1,8 @@
 import type { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
+import { EventEmitter } from '../eventing.js';
+
 import type { AbstractConstructor } from './constructor.js';
 
 export declare class SbbPanelMixinType {
@@ -17,6 +19,10 @@ export const SbbPanelMixin = <T extends AbstractConstructor<LitElement>>(
   superClass: T,
 ): AbstractConstructor<SbbPanelMixinType> & T => {
   abstract class SbbPanelElement extends superClass implements SbbPanelMixinType {
+    public static readonly events = {
+      panelConnected: 'panelConnected',
+    } as const;
+
     /** The background color of the panel. */
     @property() public color: 'white' | 'milk' = 'white';
 
@@ -25,6 +31,22 @@ export const SbbPanelMixin = <T extends AbstractConstructor<LitElement>>(
 
     /** @internal used for accessibility label when in expansion panel */
     @property() public expansionState?: string;
+
+    /**
+     * @internal
+     * Internal event that emits when the checkbox is loaded.
+     */
+    private _panelConnected: EventEmitter<void> = new EventEmitter(
+      this,
+      SbbPanelElement.events.panelConnected,
+      { bubbles: true },
+    );
+
+    public override connectedCallback(): void {
+      super.connectedCallback();
+
+      this._panelConnected.emit();
+    }
   }
 
   return SbbPanelElement as AbstractConstructor<SbbPanelMixinType> & T;

src/elements/radio-button/radio-button-panel/radio-button-panel.ts

@@ -1,17 +1,16 @@
 import {
-  LitElement,
+  type CSSResultGroup,
   html,
+  LitElement,
   nothing,
-  type CSSResultGroup,
   type PropertyValues,
   type TemplateResult,
 } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbSlotStateController } from '../../core/controllers.js';
-import { EventEmitter } from '../../core/eventing.js';
-import { SbbPanelMixin, SbbUpdateSchedulerMixin, panelCommonStyle } from '../../core/mixins.js';
-import { SbbRadioButtonCommonElementMixin, radioButtonCommonStyle } from '../common.js';
+import { panelCommonStyle, SbbPanelMixin, SbbUpdateSchedulerMixin } from '../../core/mixins.js';
+import { radioButtonCommonStyle, SbbRadioButtonCommonElementMixin } from '../common.js';
 
 import '../../screen-reader-only.js';
 
@@ -29,32 +28,18 @@ export class SbbRadioButtonPanelElement extends SbbPanelMixin(
   SbbRadioButtonCommonElementMixin(SbbUpdateSchedulerMixin(LitElement)),
 ) {
   public static override styles: CSSResultGroup = [radioButtonCommonStyle, panelCommonStyle];
+
+  // FIXME using ...super.events requires: https://github.com/sbb-design-systems/lyne-components/issues/2600
   public static readonly events = {
     stateChange: 'stateChange',
-    radioButtonLoaded: 'radioButtonLoaded',
+    panelConnected: 'panelConnected',
   } as const;
 
-  /**
-   * @internal
-   * Internal event that emits when the radio button is loaded.
-   */
-  private _radioButtonLoaded: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbRadioButtonPanelElement.events.radioButtonLoaded,
-    { bubbles: true },
-  );
-
   public constructor() {
     super();
     new SbbSlotStateController(this);
   }
 
-  public override connectedCallback(): void {
-    super.connectedCallback();
-
-    this._radioButtonLoaded.emit();
-  }
-
   protected override async willUpdate(changedProperties: PropertyValues<this>): Promise<void> {
     super.willUpdate(changedProperties);
 

src/elements/selection-expansion-panel/selection-expansion-panel.ts

@@ -3,17 +3,21 @@ import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import type { SbbCheckboxPanelElement } from '../checkbox.js';
-import { SbbLanguageController, SbbSlotStateController } from '../core/controllers.js';
+import {
+  SbbConnectedAbortController,
+  SbbLanguageController,
+  SbbSlotStateController,
+} from '../core/controllers.js';
 import { EventEmitter } from '../core/eventing.js';
 import { i18nCollapsed, i18nExpanded } from '../core/i18n.js';
 import type { SbbOpenedClosedState, SbbStateChange } from '../core/interfaces.js';
 import { SbbHydrationMixin } from '../core/mixins.js';
 import type { SbbRadioButtonPanelElement } from '../radio-button.js';
 
-import '../divider.js';
-
 import style from './selection-expansion-panel.scss?lit&inline';
 
+import '../divider.js';
+
 /**
  * It displays an expandable panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.
  *
@@ -91,6 +95,7 @@ export class SbbSelectionExpansionPanelElement extends SbbHydrationMixin(LitElem
   );
 
   private _language = new SbbLanguageController(this);
+  private _abort = new SbbConnectedAbortController(this);
   private _initialized: boolean = false;
 
   /**
@@ -109,6 +114,11 @@ export class SbbSelectionExpansionPanelElement extends SbbHydrationMixin(LitElem
 
   public override connectedCallback(): void {
     super.connectedCallback();
+
+    this.addEventListener('panelConnected', this._initFromInput.bind(this), {
+      signal: this._abort.signal,
+    });
+
     this._state ||= 'closed';
   }
 
@@ -198,7 +208,7 @@ export class SbbSelectionExpansionPanelElement extends SbbHydrationMixin(LitElem
       return;
     }
 
-    if (!(this.querySelectorAll?.('[slot="content"]').length > 0)) {
+    if (!this.hasContent) {
       panelElement.expansionState = '';
       return;
     }
@@ -211,12 +221,7 @@ export class SbbSelectionExpansionPanelElement extends SbbHydrationMixin(LitElem
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-selection-expansion-panel">
-        <div
-          class="sbb-selection-expansion-panel__input"
-          @stateChange=${this._onInputStateChange}
-          @checkboxLoaded=${this._initFromInput}
-          @radioButtonLoaded=${this._initFromInput}
-        >
+        <div class="sbb-selection-expansion-panel__input" @stateChange=${this._onInputStateChange}>
           <slot></slot>
         </div>
         <div