From 9b5f4980ccd35c922b8acdce4a640d67f0fd0522 Mon Sep 17 00:00:00 2001
From: Lukas Spirig <lukas.spirig@sbb.ch>
Date: Mon, 8 Jul 2024 08:01:05 +0200
Subject: [PATCH] fix(various): ensure slotchange event is handled properly in
 hydration (#2897)

In components that have a `slotchange` event handler for an initialization and no fallback, we need to use the `SbbHydrationMixin` to ensure the `slotchange` event is fired even with declarative Shadow DOM.
---
 src/elements/stepper/stepper/stepper.ts  | 3 ++-
 src/elements/tabs/tab-group/tab-group.ts | 3 ++-
 src/elements/toast/toast.ts              | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts
index 865b1f21d8..771cd12aff 100644
--- a/src/elements/stepper/stepper/stepper.ts
+++ b/src/elements/stepper/stepper/stepper.ts
@@ -11,6 +11,7 @@ import { getNextElementIndex, isArrowKeyPressed } from '../../core/a11y.js';
 import { SbbConnectedAbortController } from '../../core/controllers.js';
 import { breakpoints, isBreakpoint } from '../../core/dom.js';
 import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
+import { SbbHydrationMixin } from '../../core/mixins.js';
 import type { SbbStepElement, SbbStepValidateEventDetails } from '../step.js';
 
 import style from './stepper.scss?lit&inline';
@@ -24,7 +25,7 @@ const DEBOUNCE_TIME = 150;
  * @slot step - Use this slot to provide an `sbb-step`.
  */
 @customElement('sbb-stepper')
-export class SbbStepperElement extends LitElement {
+export class SbbStepperElement extends SbbHydrationMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
 
   /** If set to true, only the current and previous labels can be clicked and selected. */
diff --git a/src/elements/tabs/tab-group/tab-group.ts b/src/elements/tabs/tab-group/tab-group.ts
index f277034c6c..156e00f755 100644
--- a/src/elements/tabs/tab-group/tab-group.ts
+++ b/src/elements/tabs/tab-group/tab-group.ts
@@ -6,6 +6,7 @@ import { ref } from 'lit/directives/ref.js';
 import { getNextElementIndex, isArrowKeyPressed } from '../../core/a11y.js';
 import { SbbConnectedAbortController } from '../../core/controllers.js';
 import { EventEmitter, throttle } from '../../core/eventing.js';
+import { SbbHydrationMixin } from '../../core/mixins.js';
 import { AgnosticMutationObserver, AgnosticResizeObserver } from '../../core/observers.js';
 import type { SbbTabLabelElement } from '../tab-label.js';
 import { SbbTabElement } from '../tab.js';
@@ -52,7 +53,7 @@ let nextId = 0;
  * @event {CustomEvent<SbbTabChangedEventDetails>} didChange - Emits an event on selected tab change.
  */
 @customElement('sbb-tab-group')
-export class SbbTabGroupElement extends LitElement {
+export class SbbTabGroupElement extends SbbHydrationMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     didChange: 'didChange',
diff --git a/src/elements/toast/toast.ts b/src/elements/toast/toast.ts
index a045670848..261113ea3d 100644
--- a/src/elements/toast/toast.ts
+++ b/src/elements/toast/toast.ts
@@ -9,6 +9,7 @@ import { slotState } from '../core/decorators.js';
 import { isFirefox } from '../core/dom.js';
 import { composedPathHasAttribute } from '../core/eventing.js';
 import { i18nCloseAlert } from '../core/i18n.js';
+import { SbbHydrationMixin } from '../core/mixins.js';
 import { SbbIconNameMixin } from '../icon.js';
 import type { SbbLinkButtonElement, SbbLinkElement, SbbLinkStaticElement } from '../link.js';
 
@@ -39,7 +40,7 @@ const toastRefs = new Set<SbbToastElement>();
  */
 @customElement('sbb-toast')
 @slotState()
-export class SbbToastElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) {
+export class SbbToastElement extends SbbIconNameMixin(SbbHydrationMixin(SbbOpenCloseBaseElement)) {
   public static override styles: CSSResultGroup = style;
 
   /**