Merge branch 'refs/heads/main' into build-visual-regression-container…

…-setup

package.json

@@ -75,15 +75,15 @@
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
     "@sbb-esta/lyne-design-tokens": "0.8.0",
-    "@storybook/addon-a11y": "8.0.10",
-    "@storybook/addon-actions": "8.0.10",
-    "@storybook/addon-essentials": "8.0.10",
-    "@storybook/addon-interactions": "8.0.10",
-    "@storybook/addon-links": "8.0.10",
-    "@storybook/blocks": "8.0.10",
-    "@storybook/test": "8.0.10",
-    "@storybook/web-components": "8.0.10",
-    "@storybook/web-components-vite": "8.0.10",
+    "@storybook/addon-a11y": "8.1.0",
+    "@storybook/addon-actions": "8.1.0",
+    "@storybook/addon-essentials": "8.1.0",
+    "@storybook/addon-interactions": "8.1.0",
+    "@storybook/addon-links": "8.1.0",
+    "@storybook/blocks": "8.1.0",
+    "@storybook/test": "8.1.0",
+    "@storybook/web-components": "8.1.0",
+    "@storybook/web-components-vite": "8.1.0",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.6",
     "@types/node": "20.12.12",
@@ -123,7 +123,7 @@
     "rollup-plugin-postcss-lit": "2.1.0",
     "sass": "1.77.1",
     "sinon": "17.0.2",
-    "storybook": "8.0.10",
+    "storybook": "8.1.0",
     "stylelint": "16.5.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",

src/components/alert/alert-group/alert-group.ts

@@ -5,6 +5,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { SbbConnectedAbortController } from '../../core/controllers.js';
 import { EventEmitter } from '../../core/eventing.js';
+import { SbbHydrationMixin } from '../../core/mixins.js';
 import type { SbbTitleLevel } from '../../title.js';
 import { SbbAlertElement } from '../alert.js';
 
@@ -19,7 +20,7 @@ import style from './alert-group.scss?lit&inline';
  * @event {CustomEvent<void>} empty - Emits when `sbb-alert-group` becomes empty.
  */
 @customElement('sbb-alert-group')
-export class SbbAlertGroupElement extends LitElement {
+export class SbbAlertGroupElement extends SbbHydrationMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     didDismissAlert: 'didDismissAlert',

src/components/core/mixins/hydration-mixin.ts

@@ -120,6 +120,7 @@ export const SbbHydrationMixin = <T extends AbstractConstructor<LitElement>>(
       // When hydration is needed, we wait the hydration process to finish, which is patched
       // into the update method of the LitElement base class.
       super.update(changedProperties);
+
       if (this._hydrationRequired) {
         this._hydrationRequired = false;
         this._resolveHydration(true);