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

@@ -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. */

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',

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;
 
   /**