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} 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(); */ @customElement('sbb-toast') @slotState() -export class SbbToastElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { +export class SbbToastElement extends SbbIconNameMixin(SbbHydrationMixin(SbbOpenCloseBaseElement)) { public static override styles: CSSResultGroup = style; /**