refactor(selection-panel): now only reacts to main input changes

src/components/checkbox/checkbox/checkbox.ts

@@ -111,7 +111,13 @@ export class SbbCheckboxElement extends UpdateScheduler(LitElement) {
   }
   private _size: SbbCheckboxSize = 'm';
 
-  /** Whether the input is the main input of a selection panel. */
+  /**
+   * Whether the input is the main input of a selection panel.
+   * @internal
+   */
+  public get isSelectionPanelInput(): boolean {
+    return this._isSelectionPanelInput;
+  }
   @state() private _isSelectionPanelInput = false;
 
   /** The label describing whether the selection panel is expanded (for screen readers only). */

src/components/radio-button/radio-button/radio-button.ts

@@ -115,7 +115,11 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
 
   /**
    * Whether the input is the main input of a selection panel.
+   * @internal
    */
+  public get isSelectionPanelInput(): boolean {
+    return this._isSelectionPanelInput;
+  }
   @state() private _isSelectionPanelInput = false;
 
   /**
@@ -150,6 +154,7 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
 
   private _handleCheckedChange(currentValue: boolean, previousValue: boolean): void {
     if (currentValue !== previousValue) {
+      console.log('checked change');
       this._stateChange.emit({ type: 'checked', checked: currentValue });
       this._isSelectionPanelInput && this._updateExpandedLabel();
     }

src/components/selection-panel/selection-panel.ts

@@ -146,6 +146,11 @@ export class SbbSelectionPanelElement extends LitElement {
 
   private _initFromInput(event: Event): void {
     const input = event.target as SbbCheckboxElement | SbbRadioButtonElement;
+
+    if (!input.isSelectionPanelInput) {
+      return;
+    }
+
     this._checked = input.checked;
     this._disabled = input.disabled;
     this._updateState();
@@ -154,6 +159,12 @@ export class SbbSelectionPanelElement extends LitElement {
   private _onInputStateChange(
     event: CustomEvent<SbbRadioButtonStateChange | SbbCheckboxStateChange>,
   ): void {
+    const input = event.target as SbbCheckboxElement | SbbRadioButtonElement;
+
+    if (!input.isSelectionPanelInput) {
+      return;
+    }
+
     if (event.detail.type === 'disabled') {
       this._disabled = event.detail.disabled;
       return;
@@ -191,7 +202,7 @@ export class SbbSelectionPanelElement extends LitElement {
         </div>
         <div
           class="sbb-selection-panel__content--wrapper"
-          .inert="${!this._checked && !this.forceOpen};"
+          .inert=${this._state !== 'opened'}
           @animationend=${(event: AnimationEvent) => this._onAnimationEnd(event)}
         >
           <div class="sbb-selection-panel__content">