From 7ff035889e0d3cb68a98d9e025c5997efaeacdd8 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 24 Nov 2023 20:57:11 +0100
Subject: [PATCH 01/65] feat: add show/hide animation for dialog header

---
 src/components/dialog/dialog.scss |  45 ++++++++++--
 src/components/dialog/dialog.ts   | 112 ++++++++++++++++++++++++------
 2 files changed, 133 insertions(+), 24 deletions(-)

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index db56e3c232..553bd2e4ab 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -25,6 +25,8 @@
   --sbb-dialog-backdrop-pointer-events: none;
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
+  --sbb-dialog-header-transition-duration: var(--sbb-animation-duration-6x);
+  --sbb-dialog-header-margin-block-start: 0;
   --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
 
   position: fixed;
@@ -59,6 +61,30 @@
   }
 }
 
+:host([data-hide-header]) {
+  --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
+
+  // Hide transition
+  --sbb-dialog-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(:not([data-hide-header])) {
+  // Show transition
+  --sbb-dialog-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host([data-hide-header]) {
+  --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
+
+  // Hide transition
+  --sbb-dialog-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);
+}
+
+:host(:not([data-hide-header])) {
+  // Show transition
+  --sbb-dialog-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);
+}
+
 :host([data-fullscreen]) {
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-max-width: 100%;
@@ -198,6 +224,16 @@
     pointer-events: all;
   }
 
+  // Apply show/hide animation unless it has a visible focus within.
+  &:not([data-has-visible-focus]:focus-within) {
+    margin-block-start: var(--sbb-dialog-header-margin-block-start);
+    transition: {
+      property: margin, box-shadow;
+      duration: var(--sbb-dialog-header-transition-duration);
+      timing-function: var(--sbb-dialog-header-transition-timing);
+    }
+  }
+
   :host([data-fullscreen]) & {
     position: fixed;
     width: var(--sbb-dialog-width);
@@ -206,6 +242,11 @@
     padding-block-start: var(--sbb-spacing-responsive-xs);
   }
 
+  &[data-has-visible-focus]:focus-within,
+  :host([data-overflows]:not([data-fullscreen], [negative], [data-hide-header])) & {
+    @include sbb.shadow-level-9-soft;
+  }
+
   @include sbb.mq($from: medium) {
     border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;
   }
@@ -253,15 +294,11 @@
   :host(:not([data-slot-names~='action-group'])) & {
     display: none;
   }
-}
 
-// stylelint-disable selector-not-notation
-:is(.sbb-dialog__header, .sbb-dialog__footer) {
   :host([data-overflows]:not([data-fullscreen], [negative])) & {
     @include sbb.shadow-level-9-soft;
   }
 }
-// stylelint-enable selector-not-notation
 
 // It is necessary to use animations with keyframes instead of transitions in order not to alter
 // the default `display: block` of the modal otherwise it causes several problems,
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 84f946c608..a44d876552 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -4,7 +4,12 @@ import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbFocusHandler, IS_FOCUSABLE_QUERY, setModalityOnNextFocus } from '../core/a11y';
+import {
+  SbbFocusHandler,
+  IS_FOCUSABLE_QUERY,
+  setModalityOnNextFocus,
+  sbbInputModalityDetector,
+} from '../core/a11y';
 import { SbbLanguageController, SbbSlotStateController } from '../core/controllers';
 import { hostContext, isValidAttribute, SbbScrollHandler, setAttribute } from '../core/dom';
 import { EventEmitter } from '../core/eventing';
@@ -137,15 +142,17 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   );
 
   private _dialog!: HTMLDivElement;
-  private _dialogWrapperElement!: HTMLElement;
+  private _dialogHeaderElement!: HTMLElement;
   private _dialogContentElement!: HTMLElement;
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
-  private _windowEventsController!: AbortController;
+  private _openDialogController!: AbortController;
   private _focusHandler = new SbbFocusHandler();
   private _scrollHandler = new SbbScrollHandler();
   private _returnValue: any;
   private _isPointerDownEventOnDialog: boolean = false;
+  private _overflows: boolean;
+  private _lastScroll = 0;
   private _dialogId = `sbb-dialog-${nextId++}`;
 
   // Last element which had focus before the dialog was opened.
@@ -212,6 +219,42 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     }
   }
 
+  private _onContentScroll(): void {
+    const hasVisibleHeader = this.dataset.hideHeader === undefined;
+    const dialogHeaderHeight = this._dialogHeaderElement.clientHeight;
+
+    // Check whether hiding the header would make the scrollbar disappear
+    // and prevent the hiding animation if so.
+    if (
+      hasVisibleHeader &&
+      this._dialogContentElement.clientHeight + dialogHeaderHeight >=
+        this._dialogContentElement.scrollHeight
+    ) {
+      return;
+    }
+
+    const currentScroll = this._dialogContentElement.scrollTop;
+    if (
+      Math.round(currentScroll + this._dialogContentElement.clientHeight) >=
+      this._dialogContentElement.scrollHeight
+    ) {
+      return;
+    }
+    // Check whether is scrolling down or up.
+    if (currentScroll > 0 && this._lastScroll < currentScroll) {
+      // Scrolling down
+      if (hasVisibleHeader) {
+        this.style.setProperty('--sbb-dialog-header-height', `${dialogHeaderHeight}px`);
+      }
+      toggleDatasetEntry(this, 'hideHeader', true);
+    } else {
+      // Scrolling up
+      toggleDatasetEntry(this, 'hideHeader', false);
+    }
+    // `currentScroll` can be negative, e.g. on mobile; this is not allowed.
+    this._lastScroll = currentScroll <= 0 ? 0 : currentScroll;
+  }
+
   public override connectedCallback(): void {
     super.connectedCallback();
     this._state = this._state || 'closed';
@@ -234,7 +277,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._dialogController?.abort();
-    this._windowEventsController?.abort();
+    this._openDialogController?.abort();
     this._focusHandler.disconnect();
     this._dialogContentResizeObserver.disconnect();
     this._removeInstanceFromGlobalCollection();
@@ -245,8 +288,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     dialogRefs.splice(dialogRefs.indexOf(this as SbbDialogElement), 1);
   }
 
-  private _attachWindowEvents(): void {
-    this._windowEventsController = new AbortController();
+  private _attachOpenDialogEvents(): void {
+    this._openDialogController = new AbortController();
     // Remove dialog label as soon as it is not needed anymore to prevent accessing it with browse mode.
     window.addEventListener(
       'keydown',
@@ -255,12 +298,39 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
         await this._onKeydownEvent(event);
       },
       {
-        signal: this._windowEventsController.signal,
+        signal: this._openDialogController.signal,
       },
     );
     window.addEventListener('click', () => this._removeAriaLiveRefContent(), {
-      signal: this._windowEventsController.signal,
+      signal: this._openDialogController.signal,
     });
+    // If the content overflows, apply the header animation on scroll.
+    if (this._overflows) {
+      this._dialogContentElement?.addEventListener('scroll', () => this._onContentScroll(), {
+        passive: true,
+        signal: this._openDialogController.signal,
+      });
+      Array.from(this._dialogHeaderElement.querySelectorAll('sbb-button'))?.forEach((el) => {
+        el.addEventListener(
+          'focusin',
+          () => {
+            toggleDatasetEntry(
+              this._dialogHeaderElement,
+              'hasVisibleFocus',
+              sbbInputModalityDetector.mostRecentModality === 'keyboard',
+            );
+          },
+          { signal: this._openDialogController.signal },
+        );
+        el.addEventListener(
+          'blur',
+          () => {
+            toggleDatasetEntry(this._dialogHeaderElement, 'hasVisibleFocus', false);
+          },
+          { signal: this._openDialogController.signal },
+        );
+      });
+    }
   }
 
   // Check if the pointerdown event target is triggered on the dialog.
@@ -319,10 +389,11 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       setTimeout(() => this._setAriaLiveRefContent());
       this._focusHandler.trap(this);
       this._dialogContentResizeObserver.observe(this._dialogContentElement);
-      this._attachWindowEvents();
+      this._attachOpenDialogEvents();
     } else if (event.animationName === 'close' && this._state === 'closing') {
+      toggleDatasetEntry(this, 'hideHeader', false);
+      this._dialogContentElement.scrollTo(0, 0);
       this._state = 'closed';
-      this._dialogWrapperElement.querySelector('.sbb-dialog__content')?.scrollTo(0, 0);
       removeInertMechanism();
       setModalityOnNextFocus(this._lastFocusedElement);
       // Manually focus last focused element
@@ -331,7 +402,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
         returnValue: this._returnValue,
         closeTarget: this._dialogCloseElement,
       });
-      this._windowEventsController?.abort();
+      this._openDialogController?.abort();
       this._focusHandler.disconnect();
       this._dialogContentResizeObserver.disconnect();
       this._removeInstanceFromGlobalCollection();
@@ -367,10 +438,12 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   }
 
   private _setOverflowAttribute(): void {
-    this.toggleAttribute(
-      'data-overflows',
-      this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight,
-    );
+    this._overflows =
+      this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight;
+    if (!this._overflows && this.dataset.hideHeader === '') {
+      this.toggleAttribute('data-hide-header', false);
+    }
+    this.toggleAttribute('data-overflows', this._overflows);
   }
 
   protected override render(): TemplateResult {
@@ -403,7 +476,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     /* eslint-enable lit/binding-positions */
 
     const dialogHeader = html`
-      <div class="sbb-dialog__header">
+      <div
+        class="sbb-dialog__header"
+        ${ref((dialogHeaderrRef) => (this._dialogHeaderElement = dialogHeaderrRef as HTMLElement))}
+      >
         ${this.titleBackButton ? backButton : nothing}
         <sbb-title
           class="sbb-dialog__title"
@@ -431,10 +507,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           <div
             @click=${(event: Event) => this._closeOnSbbDialogCloseClick(event)}
             class="sbb-dialog__wrapper"
-            ${ref(
-              (dialogWrapperRef?: Element) =>
-                (this._dialogWrapperElement = dialogWrapperRef as HTMLElement),
-            )}
           >
             ${dialogHeader}
             <div

From e18c5f5fc4631d52de4969754e4970573ccaaac7 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Sat, 25 Nov 2023 21:41:36 +0100
Subject: [PATCH 02/65] feat: make mobile animation smoother

---
 src/components/dialog/dialog.scss | 39 +++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 553bd2e4ab..88024534fe 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -27,6 +27,8 @@
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
   --sbb-dialog-header-transition-duration: var(--sbb-animation-duration-6x);
   --sbb-dialog-header-margin-block-start: 0;
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+    var(--sbb-dialog-animation-easing);
   --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
 
   position: fixed;
@@ -74,15 +76,31 @@
 }
 
 :host([data-hide-header]) {
+  // Hide transition
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+    var(--sbb-dialog-animation-easing);
   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
+}
 
+:host(:not([data-hide-header])) {
+  // Show transition
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+      var(--sbb-dialog-animation-easing),
+    margin 0s var(--sbb-dialog-header-transition-duration);
+}
+
+:host([data-hide-header]) {
   // Hide transition
-  --sbb-dialog-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+    var(--sbb-dialog-animation-easing);
+  --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
 }
 
 :host(:not([data-hide-header])) {
   // Show transition
-  --sbb-dialog-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+      var(--sbb-dialog-animation-easing),
+    margin 0s var(--sbb-dialog-header-transition-duration);
 }
 
 :host([data-fullscreen]) {
@@ -226,11 +244,11 @@
 
   // Apply show/hide animation unless it has a visible focus within.
   &:not([data-has-visible-focus]:focus-within) {
-    margin-block-start: var(--sbb-dialog-header-margin-block-start);
+    transform: translateY(var(--sbb-dialog-header-margin-block-start));
     transition: {
-      property: margin, box-shadow;
+      property: box-shadow, transform;
       duration: var(--sbb-dialog-header-transition-duration);
-      timing-function: var(--sbb-dialog-header-transition-timing);
+      timing-function: var(--sbb-dialog-animation-easing);
     }
   }
 
@@ -275,12 +293,23 @@
   padding-inline: var(--sbb-dialog-padding-inline);
   padding-block: var(--sbb-dialog-padding-block);
   overflow: auto;
+  transform: translateY(var(--sbb-dialog-header-margin-block-start));
+  margin-block: 0 var(--sbb-dialog-header-margin-block-start);
+  transition: var(--sbb-dialog-content-transition);
+  z-index: -1;
 
   :host([data-fullscreen]) & {
     padding-block-start: var(--sbb-spacing-fixed-20x);
     padding-inline: var(--sbb-layout-base-offset-responsive);
     height: 100vh;
   }
+
+  @include sbb.mq($from: medium) {
+    transform: unset;
+    margin-block: var(--sbb-dialog-header-margin-block-start) 0;
+    transition: margin var(--sbb-dialog-header-transition-duration)
+      var(--sbb-dialog-animation-easing);
+  }
 }
 
 .sbb-dialog__footer {

From a1c4e28ff7f068910e350cb4ec56082eedd49e87 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Sat, 25 Nov 2023 22:51:51 +0100
Subject: [PATCH 03/65] fix: stabilize dialog header animation

---
 src/components/dialog/dialog.ts | 57 +++++++++++++++++----------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index a44d876552..b8b43cad07 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -304,33 +304,11 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     window.addEventListener('click', () => this._removeAriaLiveRefContent(), {
       signal: this._openDialogController.signal,
     });
-    // If the content overflows, apply the header animation on scroll.
-    if (this._overflows) {
-      this._dialogContentElement?.addEventListener('scroll', () => this._onContentScroll(), {
-        passive: true,
-        signal: this._openDialogController.signal,
-      });
-      Array.from(this._dialogHeaderElement.querySelectorAll('sbb-button'))?.forEach((el) => {
-        el.addEventListener(
-          'focusin',
-          () => {
-            toggleDatasetEntry(
-              this._dialogHeaderElement,
-              'hasVisibleFocus',
-              sbbInputModalityDetector.mostRecentModality === 'keyboard',
-            );
-          },
-          { signal: this._openDialogController.signal },
-        );
-        el.addEventListener(
-          'blur',
-          () => {
-            toggleDatasetEntry(this._dialogHeaderElement, 'hasVisibleFocus', false);
-          },
-          { signal: this._openDialogController.signal },
-        );
-      });
-    }
+    // If the content overflows, show/hide the dialog header on scroll.
+    this._dialogContentElement?.addEventListener('scroll', () => this._onContentScroll(), {
+      passive: true,
+      signal: this._openDialogController.signal,
+    });
   }
 
   // Check if the pointerdown event target is triggered on the dialog.
@@ -384,12 +362,12 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       this._state = 'opened';
       this._didOpen.emit();
       applyInertMechanism(this);
+      this._attachOpenDialogEvents();
       this._setDialogFocus();
       // Use timeout to read label after focused element
       setTimeout(() => this._setAriaLiveRefContent());
       this._focusHandler.trap(this);
       this._dialogContentResizeObserver.observe(this._dialogContentElement);
-      this._attachOpenDialogEvents();
     } else if (event.animationName === 'close' && this._state === 'closing') {
       toggleDatasetEntry(this, 'hideHeader', false);
       this._dialogContentElement.scrollTo(0, 0);
@@ -432,6 +410,29 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   // Set focus on the first focusable element.
   private _setDialogFocus(): void {
+    // Determine whether the dialog header has a visible focus within.
+    Array.from(this._dialogHeaderElement.querySelectorAll('sbb-button'))?.forEach((el) => {
+      el.addEventListener(
+        'focusin',
+        () => {
+          if (this._overflows) {
+            toggleDatasetEntry(
+              this._dialogHeaderElement,
+              'hasVisibleFocus',
+              sbbInputModalityDetector.mostRecentModality === 'keyboard',
+            );
+          }
+        },
+        { signal: this._openDialogController.signal },
+      );
+      el.addEventListener(
+        'blur',
+        () => {
+          toggleDatasetEntry(this._dialogHeaderElement, 'hasVisibleFocus', false);
+        },
+        { signal: this._openDialogController.signal },
+      );
+    });
     const firstFocusable = this.shadowRoot!.querySelector(IS_FOCUSABLE_QUERY) as HTMLElement;
     setModalityOnNextFocus(firstFocusable);
     firstFocusable.focus();

From 206249b403fe346b06a2fada37ad8324d8ae97ff Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 27 Nov 2023 12:39:34 +0100
Subject: [PATCH 04/65] feat: improve header animation

---
 src/components/dialog/dialog.scss | 22 +++++++---------------
 src/components/dialog/dialog.ts   | 29 +++++++++++++++++------------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 88024534fe..5463af0c83 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -25,9 +25,8 @@
   --sbb-dialog-backdrop-pointer-events: none;
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
-  --sbb-dialog-header-transition-duration: var(--sbb-animation-duration-6x);
   --sbb-dialog-header-margin-block-start: 0;
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
+  --sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration)
     var(--sbb-dialog-animation-easing);
   --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
 
@@ -91,18 +90,9 @@
 
 :host([data-hide-header]) {
   // Hide transition
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
-    var(--sbb-dialog-animation-easing);
   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
 }
 
-:host(:not([data-hide-header])) {
-  // Show transition
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
-      var(--sbb-dialog-animation-easing),
-    margin 0s var(--sbb-dialog-header-transition-duration);
-}
-
 :host([data-fullscreen]) {
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-max-width: 100%;
@@ -247,7 +237,7 @@
     transform: translateY(var(--sbb-dialog-header-margin-block-start));
     transition: {
       property: box-shadow, transform;
-      duration: var(--sbb-dialog-header-transition-duration);
+      duration: var(--sbb-dialog-animation-duration);
       timing-function: var(--sbb-dialog-animation-easing);
     }
   }
@@ -294,7 +284,7 @@
   padding-block: var(--sbb-dialog-padding-block);
   overflow: auto;
   transform: translateY(var(--sbb-dialog-header-margin-block-start));
-  margin-block: 0 var(--sbb-dialog-header-margin-block-start);
+  margin-block: 0 calc(var(--sbb-dialog-header-height) * -1);
   transition: var(--sbb-dialog-content-transition);
   z-index: -1;
 
@@ -304,11 +294,13 @@
     height: 100vh;
   }
 
+  // In order to improve the header transition on mobile (especially iOS) we use
+  // a combination of the transform and margin properties on the smaller breakpoints,
+  // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
   @include sbb.mq($from: medium) {
     transform: unset;
     margin-block: var(--sbb-dialog-header-margin-block-start) 0;
-    transition: margin var(--sbb-dialog-header-transition-duration)
-      var(--sbb-dialog-animation-easing);
+    transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);
   }
 }
 
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index b8b43cad07..75438313a7 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -111,15 +111,12 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private get _state(): SbbOverlayState {
     return this.dataset?.state as SbbOverlayState;
   }
-
+  
   private get _hasTitle(): boolean {
     return !!this.titleContent || this._namedSlots.slots.has('title');
   }
 
-  private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
-    this._setOverflowAttribute(),
-  );
-
+  private _dialogContentResizeObserver = new AgnosticResizeObserver(() => this._onContentResize());
   private _ariaLiveRef!: HTMLElement;
   private _ariaLiveRefToggle = false;
 
@@ -143,6 +140,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   private _dialog!: HTMLDivElement;
   private _dialogHeaderElement!: HTMLElement;
+  private _dialogHeaderHeight!: number;
   private _dialogContentElement!: HTMLElement;
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
@@ -179,7 +177,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
     // Add this dialog to the global collection
     dialogRefs.push(this as SbbDialogElement);
-    this._setOverflowAttribute();
+    this._onContentResize();
 
     // Disable scrolling for content below the dialog
     this._scrollHandler.disableScroll();
@@ -221,13 +219,12 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   private _onContentScroll(): void {
     const hasVisibleHeader = this.dataset.hideHeader === undefined;
-    const dialogHeaderHeight = this._dialogHeaderElement.clientHeight;
 
     // Check whether hiding the header would make the scrollbar disappear
     // and prevent the hiding animation if so.
     if (
       hasVisibleHeader &&
-      this._dialogContentElement.clientHeight + dialogHeaderHeight >=
+      this._dialogContentElement.clientHeight + this._dialogHeaderHeight >=
         this._dialogContentElement.scrollHeight
     ) {
       return;
@@ -243,9 +240,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     // Check whether is scrolling down or up.
     if (currentScroll > 0 && this._lastScroll < currentScroll) {
       // Scrolling down
-      if (hasVisibleHeader) {
-        this.style.setProperty('--sbb-dialog-header-height', `${dialogHeaderHeight}px`);
-      }
       toggleDatasetEntry(this, 'hideHeader', true);
     } else {
       // Scrolling up
@@ -438,9 +432,20 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     firstFocusable.focus();
   }
 
-  private _setOverflowAttribute(): void {
+  private _setDialogHeaderHeight(): void {
+    this._dialogHeaderHeight = this._dialogHeaderElement.clientHeight;
+    this.style.setProperty(
+      '--sbb-dialog-header-height',
+      `${this._dialogHeaderElement.clientHeight}px`,
+    );
+  }
+
+  private _onContentResize(): void {
+    this._setDialogHeaderHeight();
+    // Check whether the content overflows and set the `overflows` attribute.
     this._overflows =
       this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight;
+    // If the content doesn't overflow anymore after resizing and the header is currently hidden, shows the header again.
     if (!this._overflows && this.dataset.hideHeader === '') {
       this.toggleAttribute('data-hide-header', false);
     }

From bfa914b88a7caf0d39ea6c46a612cc4b0c8d5a0c Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 27 Nov 2023 12:45:10 +0100
Subject: [PATCH 05/65] test: add e2e tests

---
 src/components/dialog/dialog.e2e.ts     | 56 +++++++++++++++++++++++++
 src/components/dialog/dialog.stories.ts | 40 +++++++++++++++++-
 2 files changed, 95 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts
index 4052e253d9..30e924f423 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog.e2e.ts
@@ -429,3 +429,59 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
     expect(ariaLiveRef.textContent!.trim()).to.be.equal(`${i18nDialog.en}, Special Dialog`);
   });
 });
+
+describe('sbb-dialog with long content', () => {
+  let element: SbbDialog;
+
+  beforeEach(async () => {
+    await setViewport({ width: 900, height: 300 });
+    element = await fixture(html`
+      <sbb-dialog id="my-dialog-1" title-content="Title" disable-animation>
+        Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
+        face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
+        saw that Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad
+        in elven-mail, and a star shone on his breast. They spoke together, and then suddenly it
+        seemed to Frodo that Arwen turned towards him, and the light of her eyes fell on him from
+        afar and pierced his heart. He stood still enchanted, while the sweet syllables of the
+        elvish song fell like clear jewels of blended word and melody. 'It is a song to Elbereth,''
+        said Bilbo. 'They will sing that, and other songs of the Blessed Realm, many times tonight.
+        Come on!’ —J.R.R. Tolkien, The Lord of the Rings: The Fellowship of the Ring, “Many
+        Meetings” J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on
+        January 3, 1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy
+        literature. Tolkien's linguistic brilliance and mythic passion converge in a literary legacy
+        that continues to transport readers to magical realms.
+        <div slot="action-group">Action group</div>
+      </sbb-dialog>
+    `);
+  });
+
+  it('renders', () => {
+    assert.instanceOf(element, SbbDialog);
+  });
+
+  it('sets the data-overflows attribute', async () => {
+    await openDialog(element);
+
+    expect(element).to.have.attribute('data-state', 'opened');
+    expect(element).to.have.attribute('data-overflows', '');
+  });
+
+  it('shows/hides the dialog header on scroll', async () => {
+    await openDialog(element);
+    expect(element).not.to.have.attribute('data-hide-header');
+
+    const content = element.shadowRoot.querySelector('.sbb-dialog__content');
+
+    // Scroll down.
+    content.scrollTo(0, 50);
+    await waitForCondition(() => element.hasAttribute('data-hide-header'));
+
+    expect(element).to.have.attribute('data-hide-header');
+
+    // Scroll up.
+    content.scrollTo(0, 0);
+    await waitForCondition(() => !element.hasAttribute('data-hide-header'));
+
+    expect(element).not.to.have.attribute('data-hide-header');
+  });
+});
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 49a66c2fda..fa3e1f3839 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -190,6 +190,44 @@ const formStyle: Args = {
   gap: 'var(--sbb-spacing-fixed-4x)',
 };
 
+const textBlockStyle: Args = {
+  position: 'relative',
+  marginBlockStart: '1rem',
+  padding: '1rem',
+  backgroundColor: 'var(--sbb-color-milk-default)',
+  border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
+  borderRadius: 'var(--sbb-border-radius-4x)',
+  zIndex: '100',
+};
+
+const textBlock = (): TemplateResult => html`
+  <div style=${styleMap(textBlockStyle)}>
+    J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,
+    1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy literature. Tolkien's
+    linguistic brilliance and mythic passion converge in a literary legacy that continues to
+    transport readers to magical realms.
+  </div>
+`;
+
+const textBlockStyle: Args = {
+  position: 'relative',
+  marginBlockStart: '1rem',
+  padding: '1rem',
+  backgroundColor: 'var(--sbb-color-milk-default)',
+  border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
+  borderRadius: 'var(--sbb-border-radius-4x)',
+  zIndex: '100',
+};
+
+const textBlock = (): TemplateResult => html`
+  <div style=${styleMap(textBlockStyle)}>
+    J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,
+    1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy literature. Tolkien's
+    linguistic brilliance and mythic passion converge in a literary legacy that continues to
+    transport readers to magical realms.
+  </div>
+`;
+
 const DefaultTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
@@ -233,7 +271,7 @@ const LongContentTemplate = (args: Args): TemplateResult => html`
     He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels of
     blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
     other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the
-    Rings: The Fellowship of the Ring, “Many Meetings” ${actionGroup(args.negative)}
+    Rings: The Fellowship of the Ring, “Many Meetings” ${actionGroup(args.negative)} ${textBlock()}
   </sbb-dialog>
 `;
 

From 497209fc23486f0468baa0083402d8ebcdc6328d Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 28 Nov 2023 12:56:40 +0100
Subject: [PATCH 06/65] refactor: rename data attr

---
 src/components/dialog/dialog.scss | 4 ++--
 src/components/dialog/dialog.ts   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 5463af0c83..5f4fe4434b 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -233,7 +233,7 @@
   }
 
   // Apply show/hide animation unless it has a visible focus within.
-  &:not([data-has-visible-focus]:focus-within) {
+  &:not([data-has-visible-focus-within]:focus-within) {
     transform: translateY(var(--sbb-dialog-header-margin-block-start));
     transition: {
       property: box-shadow, transform;
@@ -250,7 +250,7 @@
     padding-block-start: var(--sbb-spacing-responsive-xs);
   }
 
-  &[data-has-visible-focus]:focus-within,
+  &[data-has-visible-focus-within]:focus-within,
   :host([data-overflows]:not([data-fullscreen], [negative], [data-hide-header])) & {
     @include sbb.shadow-level-9-soft;
   }
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 75438313a7..5ee015d844 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -412,7 +412,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           if (this._overflows) {
             toggleDatasetEntry(
               this._dialogHeaderElement,
-              'hasVisibleFocus',
+              'hasVisibleFocusWithin',
               sbbInputModalityDetector.mostRecentModality === 'keyboard',
             );
           }
@@ -422,7 +422,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       el.addEventListener(
         'blur',
         () => {
-          toggleDatasetEntry(this._dialogHeaderElement, 'hasVisibleFocus', false);
+          toggleDatasetEntry(this._dialogHeaderElement, 'hasVisibleFocusWithin', false);
         },
         { signal: this._openDialogController.signal },
       );

From bfa410775e60d78bc8fc68a2e45e2e7fb6e2e99c Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 12 Dec 2023 16:47:45 +0100
Subject: [PATCH 07/65] fix: review

---
 src/components/dialog/dialog.e2e.ts     | 4 ++--
 src/components/dialog/dialog.scss       | 4 ++--
 src/components/dialog/dialog.stories.ts | 1 -
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts
index 30e924f423..8bd860819b 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog.e2e.ts
@@ -431,7 +431,7 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
 });
 
 describe('sbb-dialog with long content', () => {
-  let element: SbbDialog;
+  let element: SbbDialogElement;
 
   beforeEach(async () => {
     await setViewport({ width: 900, height: 300 });
@@ -456,7 +456,7 @@ describe('sbb-dialog with long content', () => {
   });
 
   it('renders', () => {
-    assert.instanceOf(element, SbbDialog);
+    assert.instanceOf(element, SbbDialogElement);
   });
 
   it('sets the data-overflows attribute', async () => {
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 5f4fe4434b..c29bb6ecff 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -295,9 +295,9 @@
   }
 
   // In order to improve the header transition on mobile (especially iOS) we use
-  // a combination of the transform and margin properties on the smaller breakpoints,
+  // a combination of the transform and margin properties on touch devices,
   // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
-  @include sbb.mq($from: medium) {
+  @include sbb.hover-mq($hover: true) {
     transform: unset;
     margin-block: var(--sbb-dialog-header-margin-block-start) 0;
     transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index fa3e1f3839..3a898e6722 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -197,7 +197,6 @@ const textBlockStyle: Args = {
   backgroundColor: 'var(--sbb-color-milk-default)',
   border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
   borderRadius: 'var(--sbb-border-radius-4x)',
-  zIndex: '100',
 };
 
 const textBlock = (): TemplateResult => html`

From 31098627d3bc3fd220d3d8bb8495e86fa42c0203 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 13 Dec 2023 13:30:51 +0100
Subject: [PATCH 08/65] fix: attr ref remove

---
 src/components/dialog/dialog.ts | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 5ee015d844..6361a5f952 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,7 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import { LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import {
@@ -138,7 +137,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     SbbDialogElement.events.backClick,
   );
 
-  private _dialog!: HTMLDivElement;
   private _dialogHeaderElement!: HTMLElement;
   private _dialogHeaderHeight!: number;
   private _dialogContentElement!: HTMLElement;
@@ -165,11 +163,15 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
    * Opens the dialog element.
    */
   public open(): void {
-    if (this._state !== 'closed' || !this._dialog) {
+    if (this._state !== 'closed') {
       return;
     }
     this._lastFocusedElement = document.activeElement as HTMLElement;
 
+    // Initialize dialog elements
+    this._dialogHeaderElement = this.shadowRoot.querySelector('.sbb-dialog__header');
+    this._dialogContentElement = this.shadowRoot.querySelector('.sbb-dialog__content');
+
     if (!this._willOpen.emit()) {
       return;
     }
@@ -482,10 +484,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     /* eslint-enable lit/binding-positions */
 
     const dialogHeader = html`
-      <div
-        class="sbb-dialog__header"
-        ${ref((dialogHeaderrRef) => (this._dialogHeaderElement = dialogHeaderrRef as HTMLElement))}
-      >
+      <div class="sbb-dialog__header">
         ${this.titleBackButton ? backButton : nothing}
         <sbb-title
           class="sbb-dialog__title"
@@ -508,20 +507,13 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           @animationend=${(event: AnimationEvent) => this._onDialogAnimationEnd(event)}
           class="sbb-dialog"
           id=${this._dialogId}
-          ${ref((dialogRef?: Element) => (this._dialog = dialogRef as HTMLDivElement))}
         >
           <div
             @click=${(event: Event) => this._closeOnSbbDialogCloseClick(event)}
             class="sbb-dialog__wrapper"
           >
             ${dialogHeader}
-            <div
-              class="sbb-dialog__content"
-              ${ref(
-                (dialogContent?: Element) =>
-                  (this._dialogContentElement = dialogContent as HTMLElement),
-              )}
-            >
+            <div class="sbb-dialog__content">
               <slot></slot>
             </div>
             <div class="sbb-dialog__footer">

From 5e0cd7e031de20353fbe180b202afec89bcc03f8 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Sat, 16 Dec 2023 00:38:22 +0100
Subject: [PATCH 09/65] fix: temp tests fix

---
 src/components/dialog/dialog.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 6361a5f952..950f7dd631 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -11,7 +11,7 @@ import {
 } from '../core/a11y';
 import { SbbLanguageController, SbbSlotStateController } from '../core/controllers';
 import { hostContext, isValidAttribute, SbbScrollHandler, setAttribute } from '../core/dom';
-import { EventEmitter } from '../core/eventing';
+import { EventEmitter, throttle} from '../core/eventing';
 import { i18nCloseDialog, i18nDialog, i18nGoBack } from '../core/i18n';
 import { SbbNegativeMixin } from '../core/mixins';
 import { AgnosticResizeObserver } from '../core/observers';
@@ -115,7 +115,9 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     return !!this.titleContent || this._namedSlots.slots.has('title');
   }
 
-  private _dialogContentResizeObserver = new AgnosticResizeObserver(() => this._onContentResize());
+  private _dialogContentResizeObserver = new AgnosticResizeObserver(
+    throttle(() => this._onContentResize(), 150),
+  );
   private _ariaLiveRef!: HTMLElement;
   private _ariaLiveRefToggle = false;
 
@@ -179,7 +181,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
     // Add this dialog to the global collection
     dialogRefs.push(this as SbbDialogElement);
-    this._onContentResize();
+    this._dialogContentResizeObserver.observe(this._dialogContentElement);
 
     // Disable scrolling for content below the dialog
     this._scrollHandler.disableScroll();
@@ -363,7 +365,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       // Use timeout to read label after focused element
       setTimeout(() => this._setAriaLiveRefContent());
       this._focusHandler.trap(this);
-      this._dialogContentResizeObserver.observe(this._dialogContentElement);
     } else if (event.animationName === 'close' && this._state === 'closing') {
       toggleDatasetEntry(this, 'hideHeader', false);
       this._dialogContentElement.scrollTo(0, 0);

From b1dec9e136b3e6b7071442d31c92f2229dd6a521 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 18 Dec 2023 16:10:02 +0100
Subject: [PATCH 10/65] fix: use setTimeout for RO callback

---
 src/components/dialog/dialog.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 950f7dd631..b5cf000471 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -115,8 +115,12 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     return !!this.titleContent || this._namedSlots.slots.has('title');
   }
 
-  private _dialogContentResizeObserver = new AgnosticResizeObserver(
-    throttle(() => this._onContentResize(), 150),
+  // We use a timeout as a workaround to the "ResizeObserver loop completed with undelivered notifications" error.
+  // For more details:
+  // - https://github.com/WICG/resize-observer/issues/38#issuecomment-422126006
+  // - https://github.com/juggle/resize-observer/issues/103#issuecomment-1711148285
+  private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
+    setTimeout(() => this._onContentResize()),
   );
   private _ariaLiveRef!: HTMLElement;
   private _ariaLiveRefToggle = false;

From e9ef23f78a5e05d52ea74020a1c8cccf3493c1f5 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 20 Dec 2023 09:52:37 +0100
Subject: [PATCH 11/65] fix: chromatic

---
 src/components/dialog/dialog.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index c29bb6ecff..b6fdadf34e 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -297,7 +297,7 @@
   // In order to improve the header transition on mobile (especially iOS) we use
   // a combination of the transform and margin properties on touch devices,
   // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
-  @include sbb.hover-mq($hover: true) {
+  @include sbb.mq($from: medium) {
     transform: unset;
     margin-block: var(--sbb-dialog-header-margin-block-start) 0;
     transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);

From 34e865d99366ab7c75a23704b6483d08fab3a80b Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 17 Jan 2024 10:02:29 +0100
Subject: [PATCH 12/65] fix: rebase

---
 src/components/dialog/dialog.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index b5cf000471..d2062ba9a5 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -11,7 +11,7 @@ import {
 } from '../core/a11y';
 import { SbbLanguageController, SbbSlotStateController } from '../core/controllers';
 import { hostContext, isValidAttribute, SbbScrollHandler, setAttribute } from '../core/dom';
-import { EventEmitter, throttle} from '../core/eventing';
+import { EventEmitter } from '../core/eventing';
 import { i18nCloseDialog, i18nDialog, i18nGoBack } from '../core/i18n';
 import { SbbNegativeMixin } from '../core/mixins';
 import { AgnosticResizeObserver } from '../core/observers';
@@ -110,7 +110,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private get _state(): SbbOverlayState {
     return this.dataset?.state as SbbOverlayState;
   }
-  
+
   private get _hasTitle(): boolean {
     return !!this.titleContent || this._namedSlots.slots.has('title');
   }

From 81e7398bd5483876711f267258ff7b6aa0558f37 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 31 Jan 2024 09:03:38 +0100
Subject: [PATCH 13/65] refactor: dialog initial refactoring

---
 src/components/core/dom/breakpoint.ts         |  14 +-
 .../dialog-content/dialog-content.e2e.ts      |  25 ++
 .../dialog-content/dialog-content.scss        |  36 +++
 .../dialog-content/dialog-content.spec.ts     |  17 ++
 .../dialog-content/dialog-content.stories.ts  |  53 +++++
 .../dialog-content/dialog-content.ts          |  60 +++++
 src/components/dialog-content/index.ts        |   1 +
 src/components/dialog-content/readme.md       |  44 ++++
 .../dialog-title/dialog-title.e2e.ts          |  25 ++
 src/components/dialog-title/dialog-title.scss |  78 +++++++
 .../dialog-title/dialog-title.spec.ts         |  17 ++
 .../dialog-title/dialog-title.stories.ts      |  51 +++++
 src/components/dialog-title/dialog-title.ts   | 126 +++++++++++
 src/components/dialog-title/index.ts          |   1 +
 src/components/dialog-title/readme.md         |  68 ++++++
 src/components/dialog/dialog.scss             |  94 --------
 src/components/dialog/dialog.stories.ts       |  78 +++++--
 src/components/dialog/dialog.ts               | 214 +++++-------------
 src/components/dialog/readme.md               |  18 +-
 19 files changed, 740 insertions(+), 280 deletions(-)
 create mode 100644 src/components/dialog-content/dialog-content.e2e.ts
 create mode 100644 src/components/dialog-content/dialog-content.scss
 create mode 100644 src/components/dialog-content/dialog-content.spec.ts
 create mode 100644 src/components/dialog-content/dialog-content.stories.ts
 create mode 100644 src/components/dialog-content/dialog-content.ts
 create mode 100644 src/components/dialog-content/index.ts
 create mode 100644 src/components/dialog-content/readme.md
 create mode 100644 src/components/dialog-title/dialog-title.e2e.ts
 create mode 100644 src/components/dialog-title/dialog-title.scss
 create mode 100644 src/components/dialog-title/dialog-title.spec.ts
 create mode 100644 src/components/dialog-title/dialog-title.stories.ts
 create mode 100644 src/components/dialog-title/dialog-title.ts
 create mode 100644 src/components/dialog-title/index.ts
 create mode 100644 src/components/dialog-title/readme.md

diff --git a/src/components/core/dom/breakpoint.ts b/src/components/core/dom/breakpoint.ts
index 7f0d4d35e2..1b4160a746 100644
--- a/src/components/core/dom/breakpoint.ts
+++ b/src/components/core/dom/breakpoint.ts
@@ -10,7 +10,11 @@ export type Breakpoint = 'zero' | 'micro' | 'small' | 'medium' | 'wide' | 'large
  * @param to The breakpoint corresponding to the `max-width` value of the media query (optional).
  * @returns A boolean indicating whether the window matches the breakpoint.
  */
-export function isBreakpoint(from?: Breakpoint, to?: Breakpoint): boolean {
+export function isBreakpoint(
+  from?: Breakpoint,
+  to?: Breakpoint,
+  properties?: { includeMaxBreakpoint: boolean },
+): boolean {
   if (!isBrowser()) {
     // TODO: Remove and decide case by case what should be done on consuming end
     return false;
@@ -19,7 +23,13 @@ export function isBreakpoint(from?: Breakpoint, to?: Breakpoint): boolean {
   const computedStyle = getComputedStyle(document.documentElement);
   const breakpointMin = from ? computedStyle.getPropertyValue(`--sbb-breakpoint-${from}-min`) : '';
   const breakpointMax = to
-    ? `${parseFloat(computedStyle.getPropertyValue(`--sbb-breakpoint-${to}-min`)) - 0.0625}rem`
+    ? `${
+        parseFloat(
+          computedStyle.getPropertyValue(
+            `--sbb-breakpoint-${to}-${properties?.includeMaxBreakpoint ? 'max' : 'min'}`,
+          ),
+        ) - (properties?.includeMaxBreakpoint ? 0 : 0.0625)
+      }rem`
     : ''; // subtract 1px (0.0625rem) from the max-width breakpoint
 
   const minWidth = breakpointMin && `(min-width: ${breakpointMin})`;
diff --git a/src/components/dialog-content/dialog-content.e2e.ts b/src/components/dialog-content/dialog-content.e2e.ts
new file mode 100644
index 0000000000..d140c69f6b
--- /dev/null
+++ b/src/components/dialog-content/dialog-content.e2e.ts
@@ -0,0 +1,25 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { EventSpy, waitForLitRender } from '../core/testing';
+
+import { SbbDialogContentElement } from './dialog-content';
+
+describe('sbb-dialog-content', () => {
+  let element: SbbDialogContentElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-dialog-content></sbb-dialog-content>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbDialogContentElement);
+  });
+
+  it('emits on click', async () => {
+    const myEventNameSpy = new EventSpy(SbbDialogContentElement.events.myEventName);
+    element.click();
+    await waitForLitRender(element);
+    expect(myEventNameSpy.count).to.be.equal(1);
+  });
+});
diff --git a/src/components/dialog-content/dialog-content.scss b/src/components/dialog-content/dialog-content.scss
new file mode 100644
index 0000000000..2ce126ca72
--- /dev/null
+++ b/src/components/dialog-content/dialog-content.scss
@@ -0,0 +1,36 @@
+@use '../core/styles' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+:host {
+  display: contents;
+}
+
+.sbb-dialog__content {
+  @include sbb.scrollbar-rules;
+
+  padding-inline: var(--sbb-dialog-padding-inline);
+  padding-block: var(--sbb-dialog-padding-block);
+  overflow: auto;
+  transform: translateY(var(--sbb-dialog-header-margin-block-start));
+  margin-block: 0 calc(var(--sbb-dialog-header-height) * -1);
+  transition: var(--sbb-dialog-content-transition);
+  z-index: -1;
+
+  :host([data-fullscreen]) & {
+    padding-block-start: var(--sbb-spacing-fixed-20x);
+    padding-inline: var(--sbb-layout-base-offset-responsive);
+    height: 100vh;
+  }
+
+  // In order to improve the header transition on mobile (especially iOS) we use
+  // a combination of the transform and margin properties on touch devices,
+  // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
+  @include sbb.mq($from: medium) {
+    transform: unset;
+    margin-block: var(--sbb-dialog-header-margin-block-start) 0;
+    transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);
+  }
+}
diff --git a/src/components/dialog-content/dialog-content.spec.ts b/src/components/dialog-content/dialog-content.spec.ts
new file mode 100644
index 0000000000..4fbab390af
--- /dev/null
+++ b/src/components/dialog-content/dialog-content.spec.ts
@@ -0,0 +1,17 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './dialog-content';
+
+describe('sbb-dialog-content', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-dialog-content my-prop="Label"></sbb-dialog-content>`);
+
+    expect(root).dom.to.be.equal(`<sbb-dialog-content my-prop="Label"></sbb-dialog-content>`);
+
+    expect(root).shadowDom.to.be.equal(`
+      <div class="sbb-dialog-content">
+        Label
+      </div>
+    `);
+  });
+});
diff --git a/src/components/dialog-content/dialog-content.stories.ts b/src/components/dialog-content/dialog-content.stories.ts
new file mode 100644
index 0000000000..4a1b06e9bd
--- /dev/null
+++ b/src/components/dialog-content/dialog-content.stories.ts
@@ -0,0 +1,53 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { InputType } from '@storybook/types';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import { html, TemplateResult } from 'lit';
+
+import { sbbSpread } from '../core/dom';
+
+import { SbbDialogContentElement } from './dialog-content';
+import readme from './readme.md?raw';
+
+const myProp: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  'my-prop': myProp,
+};
+
+const defaultArgs: Args = {
+  'my-prop': 'Label',
+};
+
+const Template = (args: Args): TemplateResult =>
+  html`<sbb-dialog-content ${sbbSpread(args)}></sbb-dialog-content>`;
+
+export const Default: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+const meta: Meta = {
+  decorators: [
+    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
+    withActions as Decorator,
+  ],
+  parameters: {
+    actions: {
+      handles: [SbbDialogContentElement.events.myEventName],
+    },
+    backgrounds: {
+      disable: true,
+    },
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-dialog/sbb-dialog-content',
+};
+
+export default meta;
diff --git a/src/components/dialog-content/dialog-content.ts b/src/components/dialog-content/dialog-content.ts
new file mode 100644
index 0000000000..447830eb87
--- /dev/null
+++ b/src/components/dialog-content/dialog-content.ts
@@ -0,0 +1,60 @@
+import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { setAttribute } from '../core/dom';
+import { ConnectedAbortController, EventEmitter } from '../core/eventing';
+
+import style from './dialog-content.scss?lit&inline';
+
+/**
+ * Describe the purpose of the component with a single short sentence.
+ *
+ * @slot - Use the unnamed slot to add `sbb-TODO` elements.
+ * @event {CustomEvent<any>} myEventName - TODO: Document this event
+ */
+@customElement('sbb-dialog-content')
+export class SbbDialogContentElement extends LitElement {
+  public static override styles: CSSResultGroup = style;
+  public static readonly events: Record<string, string> = {
+    myEventName: 'myEventName',
+  } as const;
+
+  private _abort = new ConnectedAbortController(this);
+  private _myEvent: EventEmitter<any> = new EventEmitter(
+    this,
+    SbbDialogContentElement.events.myEventName,
+  );
+
+  private _onClickFn(): void {
+    this._myEvent.emit();
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener('click', () => this._onClickFn(), { signal });
+    // do stuff
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // do stuff
+  }
+
+  protected override render(): TemplateResult {
+    setAttribute(this, 'slot', 'content');
+
+    return html`
+      <div class="sbb-dialog__content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog-content': SbbDialogContentElement;
+  }
+}
diff --git a/src/components/dialog-content/index.ts b/src/components/dialog-content/index.ts
new file mode 100644
index 0000000000..982cb866e9
--- /dev/null
+++ b/src/components/dialog-content/index.ts
@@ -0,0 +1 @@
+export * from './dialog-content';
diff --git a/src/components/dialog-content/readme.md b/src/components/dialog-content/readme.md
new file mode 100644
index 0000000000..6af6578481
--- /dev/null
+++ b/src/components/dialog-content/readme.md
@@ -0,0 +1,44 @@
+> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.<br>
+> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).<br>
+> For the examples, use triple backticks with file extension (` ```html <code here>``` `).<br>
+> The following list of paragraphs is only suggested; remove, create and adapt as needed.
+
+The `sbb-dialog-content` is a component . . .
+
+```html
+<sbb-dialog-content></sbb-dialog-content>
+```
+
+## Slots
+
+> Describe slot naming and usage and provide an example of slotted content.
+
+## States
+
+> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
+
+## Style
+
+> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
+
+## Interactions
+
+> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
+
+## Events
+
+> Describe events triggered by the component and possibly how to get information from the payload.
+
+## Keyboard interaction
+
+> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
+
+| Keyboard       | Action        |
+| -------------- | ------------- |
+| <kbd>Key</kbd> | What it does. |
+
+## Accessibility
+
+> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+
+<!-- Auto Generated Below -->
diff --git a/src/components/dialog-title/dialog-title.e2e.ts b/src/components/dialog-title/dialog-title.e2e.ts
new file mode 100644
index 0000000000..b53d94ce11
--- /dev/null
+++ b/src/components/dialog-title/dialog-title.e2e.ts
@@ -0,0 +1,25 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { EventSpy, waitForLitRender } from '../core/testing';
+
+import { SbbDialogTitleElement } from './dialog-title';
+
+describe('sbb-dialog-title', () => {
+  let element: SbbDialogTitleElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-dialog-title></sbb-dialog-title>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbDialogTitleElement);
+  });
+
+  it('emits on click', async () => {
+    const myEventNameSpy = new EventSpy(SbbDialogTitleElement.events.myEventName);
+    element.click();
+    await waitForLitRender(element);
+    expect(myEventNameSpy.count).to.be.equal(1);
+  });
+});
diff --git a/src/components/dialog-title/dialog-title.scss b/src/components/dialog-title/dialog-title.scss
new file mode 100644
index 0000000000..cbdd2be7ed
--- /dev/null
+++ b/src/components/dialog-title/dialog-title.scss
@@ -0,0 +1,78 @@
+@use '../core/styles' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+:host {
+  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
+
+  // --sbb-dialog-header-margin-block-start: 0;
+
+  display: contents;
+}
+
+// :host([data-hide-header]) {
+//   // Hide transition
+//   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
+// }
+
+:host([data-overflows]:not([data-fullscreen])) {
+  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s);
+}
+
+.sbb-title {
+  flex: 1;
+  overflow: hidden;
+  align-self: center;
+
+  // Overwrite sbb-title default margin
+  margin: 0;
+}
+
+.sbb-dialog__header {
+  display: flex;
+  pointer-events: none;
+  gap: var(--sbb-spacing-fixed-6x);
+  align-items: start;
+  justify-content: space-between;
+  padding-inline: var(--sbb-dialog-padding-inline);
+  padding-block: var(--sbb-dialog-header-padding-block);
+  background-color: var(--sbb-dialog-background-color);
+  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
+
+  * {
+    pointer-events: all;
+  }
+
+  // Apply show/hide animation unless it has a visible focus within.
+  &:not([data-has-visible-focus-within]:focus-within) {
+    transform: translateY(var(--sbb-dialog-header-margin-block-start));
+    transition: {
+      property: box-shadow, transform;
+      duration: var(--sbb-dialog-animation-duration);
+      timing-function: var(--sbb-dialog-animation-easing);
+    }
+  }
+
+  :host([data-fullscreen]) & {
+    position: fixed;
+    width: var(--sbb-dialog-width);
+    background-color: transparent;
+    padding-inline: var(--sbb-spacing-responsive-xs);
+    padding-block-start: var(--sbb-spacing-responsive-xs);
+  }
+
+  &[data-has-visible-focus-within]:focus-within,
+  :host([data-overflows]:not([data-fullscreen], [negative], [data-hide-header])) & {
+    @include sbb.shadow-level-9-soft;
+  }
+
+  @include sbb.mq($from: medium) {
+    border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;
+  }
+}
+
+.sbb-dialog__close {
+  margin-inline-start: auto;
+}
diff --git a/src/components/dialog-title/dialog-title.spec.ts b/src/components/dialog-title/dialog-title.spec.ts
new file mode 100644
index 0000000000..5ceba501ce
--- /dev/null
+++ b/src/components/dialog-title/dialog-title.spec.ts
@@ -0,0 +1,17 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './dialog-title';
+
+describe('sbb-dialog-title', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-dialog-title my-prop="Label"></sbb-dialog-title>`);
+
+    expect(root).dom.to.be.equal(`<sbb-dialog-title my-prop="Label"></sbb-dialog-title>`);
+
+    expect(root).shadowDom.to.be.equal(`
+      <div class="sbb-dialog-title">
+        Label
+      </div>
+    `);
+  });
+});
diff --git a/src/components/dialog-title/dialog-title.stories.ts b/src/components/dialog-title/dialog-title.stories.ts
new file mode 100644
index 0000000000..92cb5f3965
--- /dev/null
+++ b/src/components/dialog-title/dialog-title.stories.ts
@@ -0,0 +1,51 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { InputType } from '@storybook/types';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import { html, TemplateResult } from 'lit';
+
+import { sbbSpread } from '../core/dom';
+
+import readme from './readme.md?raw';
+
+import './dialog-title';
+
+const titleContent: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  'title-content': titleContent,
+};
+
+const defaultArgs: Args = {
+  'title-content': 'Title content',
+};
+
+const Template = (args: Args): TemplateResult =>
+  html`<sbb-dialog-title ${sbbSpread(args)}>Dialog title</sbb-dialog-title>`;
+
+export const Default: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+const meta: Meta = {
+  decorators: [
+    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
+    withActions as Decorator,
+  ],
+  parameters: {
+    backgrounds: {
+      disable: true,
+    },
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-dialog/sbb-dialog-title',
+};
+
+export default meta;
diff --git a/src/components/dialog-title/dialog-title.ts b/src/components/dialog-title/dialog-title.ts
new file mode 100644
index 0000000000..eab82b061a
--- /dev/null
+++ b/src/components/dialog-title/dialog-title.ts
@@ -0,0 +1,126 @@
+import { CSSResultGroup, html, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { LanguageController } from '../core/common-behaviors';
+import { Breakpoint, setAttribute } from '../core/dom';
+import { ConnectedAbortController, EventEmitter } from '../core/eventing';
+import { i18nCloseDialog, i18nGoBack } from '../core/i18n';
+import { SbbTitleElement, TitleLevel } from '../title';
+import '../button';
+
+import style from './dialog-title.scss?lit&inline';
+
+/**
+ * It displays a title inside a dialog header.
+ * @event {CustomEvent<any>} requestBackAction - TODO: Document this event
+ */
+@customElement('sbb-dialog-title')
+export class SbbDialogTitleElement extends SbbTitleElement {
+  public static override styles: CSSResultGroup = [SbbTitleElement.styles, style];
+  public static readonly events: Record<string, string> = {
+    backClick: 'requestBackAction',
+  } as const;
+
+  /**
+   * Visual level for the title. Optional, if not set, the value of level will be used.
+   */
+  @property({ attribute: 'visual-level', reflect: true }) public override visualLevel?: TitleLevel =
+    '3';
+
+  /**
+   * Whether a back button is displayed next to the title.
+   */
+  @property({ attribute: 'title-back-button', type: Boolean }) public titleBackButton = false;
+
+  /**
+   * This will be forwarded as aria-label to the close button element.
+   */
+  @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
+    | string
+    | undefined;
+
+  /**
+   * This will be forwarded as aria-label to the back button element.
+   */
+  @property({ attribute: 'accessibility-back-label' }) public accessibilityBackLabel:
+    | string
+    | undefined;
+
+  /**
+   * Whether to hide the title up to a certain breakpoint.
+   */
+  @property({ attribute: 'hide-on-scroll' })
+  public set hideOnScroll(value: false | '' | Breakpoint) {
+    this._hideOnScroll = value === '' ? 'ultra' : value;
+  }
+  public get hideOnScroll(): false | '' | Breakpoint {
+    return this._hideOnScroll;
+  }
+  private _hideOnScroll: false | '' | Breakpoint = false;
+
+  private _abort = new ConnectedAbortController(this);
+  private _backClick: EventEmitter<any> = new EventEmitter(
+    this,
+    SbbDialogTitleElement.events.backClick,
+  );
+  private _language = new LanguageController(this);
+
+  private _onClickFn(): void {
+    this._backClick.emit();
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener('click', () => this._onClickFn(), { signal });
+    // do stuff
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // do stuff
+  }
+
+  protected override render(): TemplateResult {
+    setAttribute(this, 'slot', 'title');
+
+    const closeButton = html`
+      <sbb-button
+        class="sbb-dialog__close"
+        aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
+        variant=${this.negative ? 'transparent' : 'secondary'}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="cross-small"
+        sbb-dialog-close
+      ></sbb-button>
+    `;
+
+    const backButton = html`
+      <sbb-button
+        class="sbb-dialog__back"
+        aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
+        variant=${this.negative ? 'transparent' : 'secondary'}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="chevron-small-left-small"
+        @click=${() => this._backClick.emit()}
+      ></sbb-button>
+    `;
+
+    return html`
+      <div class="sbb-dialog__header">
+        ${this.titleBackButton ? backButton : nothing} ${super.render()} ${closeButton}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog-title': SbbDialogTitleElement;
+  }
+}
diff --git a/src/components/dialog-title/index.ts b/src/components/dialog-title/index.ts
new file mode 100644
index 0000000000..10f637b04f
--- /dev/null
+++ b/src/components/dialog-title/index.ts
@@ -0,0 +1 @@
+export * from './dialog-title';
diff --git a/src/components/dialog-title/readme.md b/src/components/dialog-title/readme.md
new file mode 100644
index 0000000000..bf7a2d7e0e
--- /dev/null
+++ b/src/components/dialog-title/readme.md
@@ -0,0 +1,68 @@
+> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.<br>
+> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).<br>
+> For the examples, use triple backticks with file extension (` ```html <code here>``` `).<br>
+> The following list of paragraphs is only suggested; remove, create and adapt as needed.
+
+The `sbb-dialog-title` is a component . . .
+
+```html
+<sbb-dialog-title></sbb-dialog-title>
+```
+
+## Slots
+
+> Describe slot naming and usage and provide an example of slotted content.
+
+## States
+
+> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
+
+## Style
+
+> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
+
+## Interactions
+
+> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
+
+## Events
+
+> Describe events triggered by the component and possibly how to get information from the payload.
+
+## Keyboard interaction
+
+> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
+
+| Keyboard       | Action        |
+| -------------- | ------------- |
+| <kbd>Key</kbd> | What it does. |
+
+## Accessibility
+
+> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Name                      | Attribute                   | Privacy | Type                         | Default | Description                                                                                                                                                                                    |
+| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`    | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
+| `titleBackButton`         | `title-back-button`         | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
+| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
+| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
+| `level`                   | `level`                     | public  | `TitleLevel \| undefined`    | `'1'`   | Title level                                                                                                                                                                                    |
+| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
+| `negative`                | `negative`                  | public  | `boolean \| undefined`       | `false` | Choose negative variant                                                                                                                                                                        |
+
+## Methods
+
+| Name                    | Privacy | Description | Parameters       | Return | Inherited From |
+| ----------------------- | ------- | ----------- | ---------------- | ------ | -------------- |
+| `setOverflowsAttribute` | public  |             | `value: boolean` | `void` |                |
+
+## Events
+
+| Name                | Type               | Description               | Inherited From |
+| ------------------- | ------------------ | ------------------------- | -------------- |
+| `requestBackAction` | `CustomEvent<any>` | TODO: Document this event |                |
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index b6fdadf34e..fd4e76874e 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -24,8 +24,6 @@
   --sbb-dialog-backdrop-visibility: hidden;
   --sbb-dialog-backdrop-pointer-events: none;
   --sbb-dialog-backdrop-color: transparent;
-  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
-  --sbb-dialog-header-margin-block-start: 0;
   --sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration)
     var(--sbb-dialog-animation-easing);
   --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
@@ -116,10 +114,6 @@
   --sbb-dialog-background-color: var(--sbb-color-milk);
 }
 
-:host([data-overflows]:not([data-fullscreen])) {
-  --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s);
-}
-
 :host([data-overflows]:not([data-fullscreen], [negative])) {
   --sbb-dialog-footer-border: none;
 }
@@ -217,93 +211,6 @@
   }
 }
 
-.sbb-dialog__header {
-  display: flex;
-  pointer-events: none;
-  gap: var(--sbb-spacing-fixed-6x);
-  align-items: start;
-  justify-content: space-between;
-  padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-dialog-header-padding-block);
-  background-color: var(--sbb-dialog-background-color);
-  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));
-
-  * {
-    pointer-events: all;
-  }
-
-  // Apply show/hide animation unless it has a visible focus within.
-  &:not([data-has-visible-focus-within]:focus-within) {
-    transform: translateY(var(--sbb-dialog-header-margin-block-start));
-    transition: {
-      property: box-shadow, transform;
-      duration: var(--sbb-dialog-animation-duration);
-      timing-function: var(--sbb-dialog-animation-easing);
-    }
-  }
-
-  :host([data-fullscreen]) & {
-    position: fixed;
-    width: var(--sbb-dialog-width);
-    background-color: transparent;
-    padding-inline: var(--sbb-spacing-responsive-xs);
-    padding-block-start: var(--sbb-spacing-responsive-xs);
-  }
-
-  &[data-has-visible-focus-within]:focus-within,
-  :host([data-overflows]:not([data-fullscreen], [negative], [data-hide-header])) & {
-    @include sbb.shadow-level-9-soft;
-  }
-
-  @include sbb.mq($from: medium) {
-    border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;
-  }
-}
-
-.sbb-dialog__title {
-  flex: 1;
-  overflow: hidden;
-  align-self: center;
-
-  // Overwrite sbb-title default margin
-  margin: 0;
-
-  :host(:not([data-slot-names~='title'], [title-content])) & {
-    display: none;
-  }
-}
-
-.sbb-dialog__close {
-  margin-inline-start: auto;
-}
-
-.sbb-dialog__content {
-  @include sbb.scrollbar-rules;
-
-  padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-dialog-padding-block);
-  overflow: auto;
-  transform: translateY(var(--sbb-dialog-header-margin-block-start));
-  margin-block: 0 calc(var(--sbb-dialog-header-height) * -1);
-  transition: var(--sbb-dialog-content-transition);
-  z-index: -1;
-
-  :host([data-fullscreen]) & {
-    padding-block-start: var(--sbb-spacing-fixed-20x);
-    padding-inline: var(--sbb-layout-base-offset-responsive);
-    height: 100vh;
-  }
-
-  // In order to improve the header transition on mobile (especially iOS) we use
-  // a combination of the transform and margin properties on touch devices,
-  // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
-  @include sbb.mq($from: medium) {
-    transform: unset;
-    margin-block: var(--sbb-dialog-header-margin-block-start) 0;
-    transition: margin var(--sbb-dialog-animation-duration) var(--sbb-dialog-animation-easing);
-  }
-}
-
 .sbb-dialog__footer {
   padding-inline: var(--sbb-dialog-padding-inline);
   padding-block: var(--sbb-spacing-responsive-s);
@@ -311,7 +218,6 @@
   background-color: var(--sbb-dialog-background-color);
   border-block-start: var(--sbb-dialog-footer-border);
 
-  :host(:not([data-slot-names~='title'], [title-content])) &,
   :host(:not([data-slot-names~='action-group'])) & {
     display: none;
   }
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 3a898e6722..30e11fbdcc 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -29,6 +29,8 @@ import '../title';
 import '../form-field';
 import '../image';
 import '../action-group';
+import '../dialog-title';
+import '../dialog-content';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
@@ -48,6 +50,9 @@ const titleContent: InputType = {
   control: {
     type: 'text',
   },
+  table: {
+    category: 'Header',
+  },
 };
 
 const titleLevel: InputType = {
@@ -55,12 +60,18 @@ const titleLevel: InputType = {
     type: 'inline-radio',
   },
   options: [1, 2, 3, 4, 5, 6],
+  table: {
+    category: 'Header',
+  },
 };
 
 const titleBackButton: InputType = {
   control: {
     type: 'boolean',
   },
+  table: {
+    category: 'Header',
+  },
 };
 
 const negative: InputType = {
@@ -208,6 +219,30 @@ const textBlock = (): TemplateResult => html`
   </div>
 `;
 
+const dialogHeader = (args): TemplateResult => html`
+  <sbb-dialog-title
+    title-level=${args.titleLevel}
+    ?title-back-button=${args.titleBackButton}
+    accessibility-close-label=${args.accessibilityCloseLabel}
+    accessibility-back-label=${args.accessibilityBackLabel}
+    ?negative=${args.negative}
+    hide-on-scroll="small"
+    >Title</sbb-dialog-title
+  >
+`;
+
+const dialogHeader = (args: Args): TemplateResult => html`
+  <sbb-dialog-title
+    title-level=${args.titleLevel}
+    ?title-back-button=${args.titleBackButton}
+    accessibility-close-label=${args.accessibilityCloseLabel}
+    accessibility-back-label=${args.accessibilityBackLabel}
+    ?negative=${args.negative}
+    hide-on-scroll="small"
+    >Title</sbb-dialog-title
+  >
+`;
+
 const textBlockStyle: Args = {
   position: 'relative',
   marginBlockStart: '1rem',
@@ -230,7 +265,10 @@ const textBlock = (): TemplateResult => html`
 const DefaultTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
-    <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
+    ${dialogHeader(args)}
+    <sbb-dialog-content>
+      <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
+    </sbb-dialog-content>
     ${actionGroup(args.negative)}
   </sbb-dialog>
 `;
@@ -255,22 +293,26 @@ const SlottedTitleTemplate = (args: Args): TemplateResult => html`
 const LongContentTemplate = (args: Args): TemplateResult => html`
   ${triggerButton('my-dialog-3')}
   <sbb-dialog data-testid="dialog" id="my-dialog-3" ${sbbSpread(args)}>
-    Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
-    like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
-    Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
-    elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed to
-    Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and pierced
-    his heart.
-    <sbb-image
-      style=${styleMap({ 'margin-block': '1rem' })}
-      image-src=${sampleImages[1]}
-      alt="Natural landscape"
-      data-chromatic="ignore"
-    ></sbb-image>
-    He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels of
-    blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
-    other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the
-    Rings: The Fellowship of the Ring, “Many Meetings” ${actionGroup(args.negative)} ${textBlock()}
+    ${dialogHeader(args)}
+    <sbb-dialog-content>
+      Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
+      like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
+      Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
+      elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed
+      to Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and
+      pierced his heart.
+      <sbb-image
+        style=${styleMap({ 'margin-block': '1rem' })}
+        image-src=${sampleImages[1]}
+        alt="Natural landscape"
+        data-chromatic="ignore"
+      ></sbb-image>
+      He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels
+      of blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
+      other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of
+      the Rings: The Fellowship of the Ring, “Many Meetings” ${textBlock()}
+    </sbb-dialog-content>
+    ${actionGroup(args.negative)}
   </sbb-dialog>
 `;
 
@@ -454,7 +496,7 @@ const meta: Meta = {
     },
     layout: 'fullscreen',
   },
-  title: 'components/sbb-dialog',
+  title: 'components/sbb-dialog/sbb-dialog',
 };
 
 export default meta;
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index d2062ba9a5..b8dfdb28c6 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,23 +1,18 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
-import { LitElement, nothing } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import {
-  SbbFocusHandler,
-  IS_FOCUSABLE_QUERY,
-  setModalityOnNextFocus,
-  sbbInputModalityDetector,
-} from '../core/a11y';
+import { SbbFocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../core/a11y';
 import { SbbLanguageController, SbbSlotStateController } from '../core/controllers';
-import { hostContext, isValidAttribute, SbbScrollHandler, setAttribute } from '../core/dom';
+import { hostContext, isValidAttribute, SbbScrollHandler, isBreakpoint } from '../core/dom';
 import { EventEmitter } from '../core/eventing';
-import { i18nCloseDialog, i18nDialog, i18nGoBack } from '../core/i18n';
+import { i18nDialog } from '../core/i18n';
 import { SbbNegativeMixin } from '../core/mixins';
 import { AgnosticResizeObserver } from '../core/observers';
 import type { SbbOverlayState } from '../core/overlay';
 import { applyInertMechanism, removeInertMechanism } from '../core/overlay';
-import type { SbbTitleLevel } from '../title';
+import type { SbbSbbDialogTitleElement } from '../dialog-title';
 
 import style from './dialog.scss?lit&inline';
 
@@ -56,21 +51,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     backClick: 'requestBackAction',
   } as const;
 
-  /**
-   * Dialog title.
-   */
-  @property({ attribute: 'title-content', reflect: true }) public titleContent?: string;
-
-  /**
-   * Level of title, will be rendered as heading tag (e.g. h1). Defaults to level 1.
-   */
-  @property({ attribute: 'title-level' }) public titleLevel: SbbTitleLevel = '1';
-
-  /**
-   * Whether a back button is displayed next to the title.
-   */
-  @property({ attribute: 'title-back-button', type: Boolean }) public titleBackButton = false;
-
   /**
    * Backdrop click action.
    */
@@ -81,20 +61,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
    */
   @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
 
-  /**
-   * This will be forwarded as aria-label to the close button element.
-   */
-  @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
-    | string
-    | undefined;
-
-  /**
-   * This will be forwarded as aria-label to the back button element.
-   */
-  @property({ attribute: 'accessibility-back-label' }) public accessibilityBackLabel:
-    | string
-    | undefined;
-
   /**
    * Whether the animation is enabled.
    */
@@ -111,10 +77,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     return this.dataset?.state as SbbOverlayState;
   }
 
-  private get _hasTitle(): boolean {
-    return !!this.titleContent || this._namedSlots.slots.has('title');
-  }
-
   // We use a timeout as a workaround to the "ResizeObserver loop completed with undelivered notifications" error.
   // For more details:
   // - https://github.com/WICG/resize-observer/issues/38#issuecomment-422126006
@@ -137,14 +99,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   /** Emits whenever the `sbb-dialog` is closed. */
   private _didClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.didClose);
 
-  /** Emits whenever the back button is clicked. */
-  private _backClick: EventEmitter<void> = new EventEmitter(
-    this,
-    SbbDialogElement.events.backClick,
-  );
-
-  private _dialogHeaderElement!: HTMLElement;
-  private _dialogHeaderHeight!: number;
+  private _dialogTitleElement!: SbbDialogTitleElement;
+  private _dialogTitleHeight!: number;
   private _dialogContentElement!: HTMLElement;
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
@@ -153,17 +109,14 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _scrollHandler = new SbbScrollHandler();
   private _returnValue: any;
   private _isPointerDownEventOnDialog: boolean = false;
-  private _overflows: boolean;
+  private _overflows: boolean = false;
   private _lastScroll = 0;
   private _dialogId = `sbb-dialog-${nextId++}`;
 
   // Last element which had focus before the dialog was opened.
   private _lastFocusedElement?: HTMLElement;
 
-  private _language = new SbbLanguageController(this);
-  private _namedSlots = new SbbSlotStateController(this, () =>
-    setAttribute(this, 'data-fullscreen', !this._hasTitle),
-  );
+  private _language = new LanguageController(this);
 
   /**
    * Opens the dialog element.
@@ -175,8 +128,9 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     this._lastFocusedElement = document.activeElement as HTMLElement;
 
     // Initialize dialog elements
-    this._dialogHeaderElement = this.shadowRoot.querySelector('.sbb-dialog__header');
-    this._dialogContentElement = this.shadowRoot.querySelector('.sbb-dialog__content');
+    this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
+    this._dialogContentElement = this.querySelector('sbb-dialog-content')!.shadowRoot!
+      .firstElementChild as HTMLElement;
 
     if (!this._willOpen.emit()) {
       return;
@@ -232,7 +186,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     // and prevent the hiding animation if so.
     if (
       hasVisibleHeader &&
-      this._dialogContentElement.clientHeight + this._dialogHeaderHeight >=
+      this._dialogContentElement.clientHeight + this._dialogTitleHeight >=
         this._dialogContentElement.scrollHeight
     ) {
       return;
@@ -248,10 +202,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     // Check whether is scrolling down or up.
     if (currentScroll > 0 && this._lastScroll < currentScroll) {
       // Scrolling down
-      toggleDatasetEntry(this, 'hideHeader', true);
+      this._setHideHeaderDataAttribute(true);
     } else {
       // Scrolling up
-      toggleDatasetEntry(this, 'hideHeader', false);
+      this._setHideHeaderDataAttribute(false);
     }
     // `currentScroll` can be negative, e.g. on mobile; this is not allowed.
     this._lastScroll = currentScroll <= 0 ? 0 : currentScroll;
@@ -259,6 +213,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   public override connectedCallback(): void {
     super.connectedCallback();
+    new NamedSlotStateController(this);
+
     this._state = this._state || 'closed';
     this._dialogController?.abort();
     this._dialogController = new AbortController();
@@ -311,6 +267,9 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       passive: true,
       signal: this._openDialogController.signal,
     });
+    window.addEventListener('resize', () => this._setHideHeaderDataAttribute(false), {
+      signal: this._openDialogController.signal,
+    });
   }
 
   // Check if the pointerdown event target is triggered on the dialog.
@@ -344,16 +303,24 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   // Close the dialog on click of any element that has the 'sbb-dialog-close' attribute.
   private _closeOnSbbDialogCloseClick(event: Event): void {
-    const target = event.target as HTMLElement;
-
-    if (target.hasAttribute('sbb-dialog-close') && !isValidAttribute(target, 'disabled')) {
-      // Check if the target is a submission element within a form and return the form, if present
-      const closestForm =
-        target.getAttribute('type') === 'submit'
-          ? (hostContext('form', target) as HTMLFormElement)
-          : undefined;
-      this.close(closestForm, target);
+    const dialogCloseElement = event
+      .composedPath()
+      .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
+      .find(
+        (target) =>
+          target.hasAttribute('sbb-dialog-close') && !isValidAttribute(target, 'disabled'),
+      );
+
+    if (!dialogCloseElement) {
+      return;
     }
+
+    // Check if the target is a submission element within a form and return the form, if present
+    const closestForm =
+      dialogCloseElement.getAttribute('type') === 'submit'
+        ? (hostContext('form', dialogCloseElement) as HTMLFormElement)
+        : undefined;
+    this.close(closestForm, dialogCloseElement);
   }
 
   // Wait for dialog transition to complete.
@@ -370,7 +337,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       setTimeout(() => this._setAriaLiveRefContent());
       this._focusHandler.trap(this);
     } else if (event.animationName === 'close' && this._state === 'closing') {
-      toggleDatasetEntry(this, 'hideHeader', false);
+      this._setHideHeaderDataAttribute(false);
       this._dialogContentElement.scrollTo(0, 0);
       this._state = 'closed';
       removeInertMechanism();
@@ -411,40 +378,16 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   // Set focus on the first focusable element.
   private _setDialogFocus(): void {
-    // Determine whether the dialog header has a visible focus within.
-    Array.from(this._dialogHeaderElement.querySelectorAll('sbb-button'))?.forEach((el) => {
-      el.addEventListener(
-        'focusin',
-        () => {
-          if (this._overflows) {
-            toggleDatasetEntry(
-              this._dialogHeaderElement,
-              'hasVisibleFocusWithin',
-              sbbInputModalityDetector.mostRecentModality === 'keyboard',
-            );
-          }
-        },
-        { signal: this._openDialogController.signal },
-      );
-      el.addEventListener(
-        'blur',
-        () => {
-          toggleDatasetEntry(this._dialogHeaderElement, 'hasVisibleFocusWithin', false);
-        },
-        { signal: this._openDialogController.signal },
-      );
-    });
-    const firstFocusable = this.shadowRoot!.querySelector(IS_FOCUSABLE_QUERY) as HTMLElement;
+    const firstFocusable = getFirstFocusableElement(
+      Array.from(this.children).filter((e): e is HTMLElement => e instanceof window.HTMLElement),
+    );
     setModalityOnNextFocus(firstFocusable);
-    firstFocusable.focus();
+    firstFocusable?.focus();
   }
 
   private _setDialogHeaderHeight(): void {
-    this._dialogHeaderHeight = this._dialogHeaderElement.clientHeight;
-    this.style.setProperty(
-      '--sbb-dialog-header-height',
-      `${this._dialogHeaderElement.clientHeight}px`,
-    );
+    this._dialogTitleHeight = this._dialogTitleElement.shadowRoot!.firstElementChild!.clientHeight;
+    this.style.setProperty('--sbb-dialog-header-height', `${this._dialogTitleHeight}px`);
   }
 
   private _onContentResize(): void {
@@ -452,60 +395,23 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     // Check whether the content overflows and set the `overflows` attribute.
     this._overflows =
       this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight;
-    // If the content doesn't overflow anymore after resizing and the header is currently hidden, shows the header again.
-    if (!this._overflows && this.dataset.hideHeader === '') {
-      this.toggleAttribute('data-hide-header', false);
-    }
-    this.toggleAttribute('data-overflows', this._overflows);
+    this._setOverflowsDataAttribute();
   }
 
-  protected override render(): TemplateResult {
-    const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
-
-    /* eslint-disable lit/binding-positions */
-    const closeButton = html`
-      <${unsafeStatic(TAG_NAME)}
-        class="sbb-dialog__close"
-        aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="cross-small"
-        sbb-dialog-close
-      ></${unsafeStatic(TAG_NAME)}>
-    `;
-
-    const backButton = html`
-      <${unsafeStatic(TAG_NAME)}
-        class="sbb-dialog__back"
-        aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
-        ?negative=${this.negative}
-        size="m"
-        type="button"
-        icon-name="chevron-small-left-small"
-        @click=${() => this._backClick.emit()}
-      ></${unsafeStatic(TAG_NAME)}>
-    `;
-    /* eslint-enable lit/binding-positions */
-
-    const dialogHeader = html`
-      <div class="sbb-dialog__header">
-        ${this.titleBackButton ? backButton : nothing}
-        <sbb-title
-          class="sbb-dialog__title"
-          level=${this.titleLevel}
-          visual-level="3"
-          ?negative=${this.negative}
-          id="title"
-        >
-          <slot name="title">${this.titleContent}</slot>
-        </sbb-title>
-        ${closeButton}
-      </div>
-    `;
+  private _setHideHeaderDataAttribute(value: boolean): void {
+    const hideOnScroll = this._dialogTitleElement.hideOnScroll;
+    const hideHeader =
+      !!hideOnScroll && isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
+    this.toggleAtribute('data-hide-header', !hideHeader ? false : value);
+    this._dialogTitleElement.toggleAtribute('data-hide-header', !hideHeader ? false : value);
+  }
 
-    setAttribute(this, 'data-fullscreen', !this._hasTitle);
+  private _setOverflowsDataAttribute(): void {
+    this.toggleAtribute('data-overflows', this._overflows);
+    this._dialogTitleElement.toggleAtribute('data-overflows', this._overflows);
+  }
 
+  protected override render(): TemplateResult {
     return html`
       <div class="sbb-dialog__container">
         <div
@@ -517,10 +423,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
             @click=${(event: Event) => this._closeOnSbbDialogCloseClick(event)}
             class="sbb-dialog__wrapper"
           >
-            ${dialogHeader}
-            <div class="sbb-dialog__content">
-              <slot></slot>
-            </div>
+            <slot name="title"></slot>
+            <slot name="content"></slot>
             <div class="sbb-dialog__footer">
               <slot name="action-group"></slot>
             </div>
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index 98e4732711..eb123c4064 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -78,17 +78,13 @@ It's possible to display the component in `negative` variant using the self-name
 
 ## Properties
 
-| Name                      | Attribute                   | Privacy | Type                         | Default   | Description                                                                     |
-| ------------------------- | --------------------------- | ------- | ---------------------------- | --------- | ------------------------------------------------------------------------------- |
-| `titleContent`            | `title-content`             | public  | `string \| undefined`        |           | Dialog title.                                                                   |
-| `titleLevel`              | `title-level`               | public  | `SbbTitleLevel`              | `'1'`     | Level of title, will be rendered as heading tag (e.g. h1). Defaults to level 1. |
-| `titleBackButton`         | `title-back-button`         | public  | `boolean`                    | `false`   | Whether a back button is displayed next to the title.                           |
-| `backdropAction`          | `backdrop-action`           | public  | `'close' \| 'none'`          | `'close'` | Backdrop click action.                                                          |
-| `accessibilityLabel`      | `accessibility-label`       | public  | `string \| undefined`        |           | This will be forwarded as aria-label to the relevant nested element.            |
-| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |           | This will be forwarded as aria-label to the close button element.               |
-| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |           | This will be forwarded as aria-label to the back button element.                |
-| `disableAnimation`        | `disable-animation`         | public  | `boolean`                    | `false`   | Whether the animation is enabled.                                               |
-| `negative`                | `negative`                  | public  | `boolean`                    | `false`   | Negative coloring variant flag.                                                 |
+| Name                 | Attribute             | Privacy | Type                  | Default   | Description                                                          |
+| -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- |
+| `titleContent`       | `title-content`       | public  | `string`              |           | Dialog title.                                                        |
+| `backdropAction`     | `backdrop-action`     | public  | `'close' \| 'none'`   | `'close'` | Backdrop click action.                                               |
+| `negative`           | `negative`            | public  | `boolean`             | `false`   | Negative coloring variant flag.                                      |
+| `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined` |           | This will be forwarded as aria-label to the relevant nested element. |
+| `disableAnimation`   | `disable-animation`   | public  | `boolean`             | `false`   | Whether the animation is enabled.                                    |
 
 ## Methods
 

From 2b230eb31994b5b4e00fce57e08281fd714009b2 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 2 Feb 2024 11:06:02 +0100
Subject: [PATCH 14/65] feat: add dialog actions

---
 .../dialog-actions/dialog-actions.e2e.ts      | 25 +++++++++
 .../dialog-actions/dialog-actions.scss        | 21 +++++++
 .../dialog-actions/dialog-actions.spec.ts     | 17 ++++++
 .../dialog-actions/dialog-actions.stories.ts  | 55 +++++++++++++++++++
 .../dialog-actions/dialog-actions.ts          | 40 ++++++++++++++
 src/components/dialog-actions/index.ts        |  1 +
 src/components/dialog-actions/readme.md       | 44 +++++++++++++++
 src/components/dialog/dialog.scss             | 22 +-------
 src/components/dialog/dialog.stories.ts       | 16 ++----
 src/components/dialog/dialog.ts               | 18 +++---
 10 files changed, 222 insertions(+), 37 deletions(-)
 create mode 100644 src/components/dialog-actions/dialog-actions.e2e.ts
 create mode 100644 src/components/dialog-actions/dialog-actions.scss
 create mode 100644 src/components/dialog-actions/dialog-actions.spec.ts
 create mode 100644 src/components/dialog-actions/dialog-actions.stories.ts
 create mode 100644 src/components/dialog-actions/dialog-actions.ts
 create mode 100644 src/components/dialog-actions/index.ts
 create mode 100644 src/components/dialog-actions/readme.md

diff --git a/src/components/dialog-actions/dialog-actions.e2e.ts b/src/components/dialog-actions/dialog-actions.e2e.ts
new file mode 100644
index 0000000000..cc7294bbc7
--- /dev/null
+++ b/src/components/dialog-actions/dialog-actions.e2e.ts
@@ -0,0 +1,25 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { EventSpy, waitForLitRender } from '../core/testing';
+
+import { SbbDialogActionsElement } from './dialog-actions';
+
+describe('sbb-dialog-actions', () => {
+  let element: SbbDialogActionsElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbDialogActionsElement);
+  });
+
+  it('emits on click', async () => {
+    const myEventNameSpy = new EventSpy(SbbDialogActionsElement.events.myEventName);
+    element.click();
+    await waitForLitRender(element);
+    expect(myEventNameSpy.count).to.be.equal(1);
+  });
+});
diff --git a/src/components/dialog-actions/dialog-actions.scss b/src/components/dialog-actions/dialog-actions.scss
new file mode 100644
index 0000000000..7fbac4492e
--- /dev/null
+++ b/src/components/dialog-actions/dialog-actions.scss
@@ -0,0 +1,21 @@
+@use '../core/styles' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+:host {
+  display: contents;
+}
+
+.sbb-dialog-actions {
+  padding-inline: var(--sbb-dialog-padding-inline);
+  padding-block: var(--sbb-spacing-responsive-s);
+  margin-block-start: auto;
+  background-color: var(--sbb-dialog-background-color);
+  border-block-start: var(--sbb-dialog-actions-border);
+
+  :host([data-overflows]:not([negative])) & {
+    @include sbb.shadow-level-9-soft;
+  }
+}
diff --git a/src/components/dialog-actions/dialog-actions.spec.ts b/src/components/dialog-actions/dialog-actions.spec.ts
new file mode 100644
index 0000000000..ce5a424d76
--- /dev/null
+++ b/src/components/dialog-actions/dialog-actions.spec.ts
@@ -0,0 +1,17 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './dialog-actions';
+
+describe('sbb-dialog-actions', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-dialog-actions my-prop="Label"></sbb-dialog-actions>`);
+
+    expect(root).dom.to.be.equal(`<sbb-dialog-actions my-prop="Label"></sbb-dialog-actions>`);
+
+    expect(root).shadowDom.to.be.equal(`
+      <div class="sbb-dialog-actions">
+        Label
+      </div>
+    `);
+  });
+});
diff --git a/src/components/dialog-actions/dialog-actions.stories.ts b/src/components/dialog-actions/dialog-actions.stories.ts
new file mode 100644
index 0000000000..d0f6a3cbf1
--- /dev/null
+++ b/src/components/dialog-actions/dialog-actions.stories.ts
@@ -0,0 +1,55 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { InputType } from '@storybook/types';
+import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import { html, TemplateResult } from 'lit';
+
+import { sbbSpread } from '../core/dom';
+
+import type { SbbDialogActionsElement } from './dialog-actions';
+import readme from './readme.md?raw';
+
+import './dialog-actions';
+
+const myProp: InputType = {
+  control: {
+    type: 'text',
+  },
+};
+
+const defaultArgTypes: ArgTypes = {
+  'my-prop': myProp,
+};
+
+const defaultArgs: Args = {
+  'my-prop': 'Label',
+};
+
+const Template = (args: Args): TemplateResult =>
+  html`<sbb-dialog-actions ${sbbSpread(args)}></sbb-dialog-actions>`;
+
+export const Default: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+const meta: Meta = {
+  decorators: [
+    (story) => html` <div style="padding: 2rem;">${story()}</div> `,
+    withActions as Decorator,
+  ],
+  parameters: {
+    actions: {
+      handles: [SbbDialogActionsElement.events.myEventName],
+    },
+    backgrounds: {
+      disable: true,
+    },
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+  },
+  title: 'components/sbb-dialog-actions',
+};
+
+export default meta;
diff --git a/src/components/dialog-actions/dialog-actions.ts b/src/components/dialog-actions/dialog-actions.ts
new file mode 100644
index 0000000000..a69e17cec6
--- /dev/null
+++ b/src/components/dialog-actions/dialog-actions.ts
@@ -0,0 +1,40 @@
+import { CSSResultGroup, html, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { SbbActionGroupElement } from '../action-group';
+import { setAttribute } from '../core/dom';
+
+import style from './dialog-actions.scss?lit&inline';
+
+/**
+ * Describe the purpose of the component with a single short sentence.
+ *
+ * @slot - Use the unnamed slot to add `sbb-TODO` elements.
+ * @event {CustomEvent<any>} myEventName - TODO: Document this event
+ */
+@customElement('sbb-dialog-actions')
+export class SbbDialogActionsElement extends SbbActionGroupElement {
+  public static override styles: CSSResultGroup = [SbbActionGroupElement.styles, style];
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // do stuff
+  }
+
+  protected override render(): TemplateResult {
+    setAttribute(this, 'slot', 'actions');
+
+    return html` <div class="sbb-dialog-actions">${super.render()}</div> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-dialog-actions': SbbDialogActionsElement;
+  }
+}
diff --git a/src/components/dialog-actions/index.ts b/src/components/dialog-actions/index.ts
new file mode 100644
index 0000000000..39621636d6
--- /dev/null
+++ b/src/components/dialog-actions/index.ts
@@ -0,0 +1 @@
+export * from './dialog-actions';
diff --git a/src/components/dialog-actions/readme.md b/src/components/dialog-actions/readme.md
new file mode 100644
index 0000000000..0a4bd342cc
--- /dev/null
+++ b/src/components/dialog-actions/readme.md
@@ -0,0 +1,44 @@
+> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.<br>
+> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).<br>
+> For the examples, use triple backticks with file extension (` ```html <code here>``` `).<br>
+> The following list of paragraphs is only suggested; remove, create and adapt as needed.
+
+The `sbb-dialog-actions` is a component . . .
+
+```html
+<sbb-dialog-actions></sbb-dialog-actions>
+```
+
+## Slots
+
+> Describe slot naming and usage and provide an example of slotted content.
+
+## States
+
+> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
+
+## Style
+
+> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
+
+## Interactions
+
+> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
+
+## Events
+
+> Describe events triggered by the component and possibly how to get information from the payload.
+
+## Keyboard interaction
+
+> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
+
+| Keyboard       | Action        |
+| -------------- | ------------- |
+| <kbd>Key</kbd> | What it does. |
+
+## Accessibility
+
+> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+
+<!-- Auto Generated Below -->
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index fd4e76874e..92e521f2a1 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -26,7 +26,7 @@
   --sbb-dialog-backdrop-color: transparent;
   --sbb-dialog-content-transition: transform var(--sbb-dialog-animation-duration)
     var(--sbb-dialog-animation-easing);
-  --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
+  --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud);
 
   position: fixed;
   inset: var(--sbb-dialog-inset);
@@ -103,7 +103,7 @@
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
   --sbb-dialog-color: var(--sbb-color-white);
   --sbb-dialog-background-color: var(--sbb-color-midnight);
-  --sbb-dialog-footer-border: none;
+  --sbb-dialog-actions-border: none;
 }
 
 :host([disable-animation]) {
@@ -115,7 +115,7 @@
 }
 
 :host([data-overflows]:not([data-fullscreen], [negative])) {
-  --sbb-dialog-footer-border: none;
+  --sbb-dialog-actions-border: none;
 }
 
 :host(:not([data-state='closed'])) {
@@ -211,22 +211,6 @@
   }
 }
 
-.sbb-dialog__footer {
-  padding-inline: var(--sbb-dialog-padding-inline);
-  padding-block: var(--sbb-spacing-responsive-s);
-  margin-block-start: auto;
-  background-color: var(--sbb-dialog-background-color);
-  border-block-start: var(--sbb-dialog-footer-border);
-
-  :host(:not([data-slot-names~='action-group'])) & {
-    display: none;
-  }
-
-  :host([data-overflows]:not([data-fullscreen], [negative])) & {
-    @include sbb.shadow-level-9-soft;
-  }
-}
-
 // It is necessary to use animations with keyframes instead of transitions in order not to alter
 // the default `display: block` of the modal otherwise it causes several problems,
 // especially for accessibility.
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 30e11fbdcc..9c29ece973 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -31,6 +31,7 @@ import '../image';
 import '../action-group';
 import '../dialog-title';
 import '../dialog-content';
+import '../dialog-actions';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
@@ -160,13 +161,8 @@ const triggerButton = (dialogId: string): TemplateResult => html`
   </sbb-button>
 `;
 
-const actionGroup = (negative: boolean): TemplateResult => html`
-  <sbb-action-group
-    slot="action-group"
-    align-group="stretch"
-    orientation="vertical"
-    horizontal-from="medium"
-  >
+const actionGroup = (negative: unknown): TemplateResult => html`
+  <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
     <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
@@ -178,7 +174,7 @@ const actionGroup = (negative: boolean): TemplateResult => html`
     </sbb-block-link>
     <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
     <sbb-button sbb-dialog-close> Confirm </sbb-button>
-  </sbb-action-group>
+  </sbb-dialog-actions>
 `;
 
 const codeStyle: Args = {
@@ -226,7 +222,7 @@ const dialogHeader = (args): TemplateResult => html`
     accessibility-close-label=${args.accessibilityCloseLabel}
     accessibility-back-label=${args.accessibilityBackLabel}
     ?negative=${args.negative}
-    hide-on-scroll="small"
+    hide-on-scroll
     >Title</sbb-dialog-title
   >
 `;
@@ -238,7 +234,7 @@ const dialogHeader = (args: Args): TemplateResult => html`
     accessibility-close-label=${args.accessibilityCloseLabel}
     accessibility-back-label=${args.accessibilityBackLabel}
     ?negative=${args.negative}
-    hide-on-scroll="small"
+    hide-on-scroll
     >Title</sbb-dialog-title
   >
 `;
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index b8dfdb28c6..d95f4b3f56 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -12,7 +12,8 @@ import { SbbNegativeMixin } from '../core/mixins';
 import { AgnosticResizeObserver } from '../core/observers';
 import type { SbbOverlayState } from '../core/overlay';
 import { applyInertMechanism, removeInertMechanism } from '../core/overlay';
-import type { SbbSbbDialogTitleElement } from '../dialog-title';
+import type { SbbDialogActionsElement } from '../dialog-actions';
+import type { SbbDialogTitleElement } from '../dialog-title';
 
 import style from './dialog.scss?lit&inline';
 
@@ -102,6 +103,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _dialogTitleElement!: SbbDialogTitleElement;
   private _dialogTitleHeight!: number;
   private _dialogContentElement!: HTMLElement;
+  private _dialogActionsElement?: SbbDialogActionsElement;
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
   private _openDialogController!: AbortController;
@@ -131,6 +133,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
     this._dialogContentElement = this.querySelector('sbb-dialog-content')!.shadowRoot!
       .firstElementChild as HTMLElement;
+    this._dialogActionsElement = this.querySelector('sbb-dialog-actions') || undefined;
 
     if (!this._willOpen.emit()) {
       return;
@@ -402,13 +405,14 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     const hideOnScroll = this._dialogTitleElement.hideOnScroll;
     const hideHeader =
       !!hideOnScroll && isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
-    this.toggleAtribute('data-hide-header', !hideHeader ? false : value);
-    this._dialogTitleElement.toggleAtribute('data-hide-header', !hideHeader ? false : value);
+    this.toggleAttribute('data-hide-header', !hideHeader ? false : value);
+    this._dialogTitleElement.toggleAttribute('data-hide-header', !hideHeader ? false : value);
   }
 
   private _setOverflowsDataAttribute(): void {
-    this.toggleAtribute('data-overflows', this._overflows);
-    this._dialogTitleElement.toggleAtribute('data-overflows', this._overflows);
+    this.toggleAttribute('data-overflows', this._overflows);
+    this._dialogTitleElement.toggleAttribute('data-overflows', this._overflows);
+    this._dialogActionsElement ?? this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
   }
 
   protected override render(): TemplateResult {
@@ -425,9 +429,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           >
             <slot name="title"></slot>
             <slot name="content"></slot>
-            <div class="sbb-dialog__footer">
-              <slot name="action-group"></slot>
-            </div>
+            <slot name="actions"></slot>
           </div>
         </div>
       </div>

From 6de6568854472550b7c26d630b29676924385deb Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Fri, 2 Feb 2024 11:41:59 +0100
Subject: [PATCH 15/65] fix: rebase

---
 .../dialog-actions/dialog-actions.ts          |  3 +-
 .../dialog-content/dialog-content.ts          |  3 +-
 src/components/dialog-title/dialog-title.ts   |  9 +++--
 src/components/dialog/dialog.stories.ts       | 35 ++-----------------
 4 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/src/components/dialog-actions/dialog-actions.ts b/src/components/dialog-actions/dialog-actions.ts
index a69e17cec6..e1e6c4d1bc 100644
--- a/src/components/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog-actions/dialog-actions.ts
@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionGroupElement } from '../action-group';
diff --git a/src/components/dialog-content/dialog-content.ts b/src/components/dialog-content/dialog-content.ts
index 447830eb87..4b785b1fd8 100644
--- a/src/components/dialog-content/dialog-content.ts
+++ b/src/components/dialog-content/dialog-content.ts
@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { setAttribute } from '../core/dom';
diff --git a/src/components/dialog-title/dialog-title.ts b/src/components/dialog-title/dialog-title.ts
index eab82b061a..01f301716a 100644
--- a/src/components/dialog-title/dialog-title.ts
+++ b/src/components/dialog-title/dialog-title.ts
@@ -1,11 +1,14 @@
-import { CSSResultGroup, html, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { LanguageController } from '../core/common-behaviors';
-import { Breakpoint, setAttribute } from '../core/dom';
+import type { Breakpoint } from '../core/dom';
+import { setAttribute } from '../core/dom';
 import { ConnectedAbortController, EventEmitter } from '../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../core/i18n';
-import { SbbTitleElement, TitleLevel } from '../title';
+import type { TitleLevel } from '../title';
+import { SbbTitleElement } from '../title';
 import '../button';
 
 import style from './dialog-title.scss?lit&inline';
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 9c29ece973..05ce54ca90 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -161,7 +161,7 @@ const triggerButton = (dialogId: string): TemplateResult => html`
   </sbb-button>
 `;
 
-const actionGroup = (negative: unknown): TemplateResult => html`
+const actionGroup = (negative: boolean): TemplateResult => html`
   <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
     <sbb-block-link
       align-self="start"
@@ -206,27 +206,6 @@ const textBlockStyle: Args = {
   borderRadius: 'var(--sbb-border-radius-4x)',
 };
 
-const textBlock = (): TemplateResult => html`
-  <div style=${styleMap(textBlockStyle)}>
-    J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,
-    1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy literature. Tolkien's
-    linguistic brilliance and mythic passion converge in a literary legacy that continues to
-    transport readers to magical realms.
-  </div>
-`;
-
-const dialogHeader = (args): TemplateResult => html`
-  <sbb-dialog-title
-    title-level=${args.titleLevel}
-    ?title-back-button=${args.titleBackButton}
-    accessibility-close-label=${args.accessibilityCloseLabel}
-    accessibility-back-label=${args.accessibilityBackLabel}
-    ?negative=${args.negative}
-    hide-on-scroll
-    >Title</sbb-dialog-title
-  >
-`;
-
 const dialogHeader = (args: Args): TemplateResult => html`
   <sbb-dialog-title
     title-level=${args.titleLevel}
@@ -234,21 +213,11 @@ const dialogHeader = (args: Args): TemplateResult => html`
     accessibility-close-label=${args.accessibilityCloseLabel}
     accessibility-back-label=${args.accessibilityBackLabel}
     ?negative=${args.negative}
-    hide-on-scroll
+    hide-on-scroll=""
     >Title</sbb-dialog-title
   >
 `;
 
-const textBlockStyle: Args = {
-  position: 'relative',
-  marginBlockStart: '1rem',
-  padding: '1rem',
-  backgroundColor: 'var(--sbb-color-milk-default)',
-  border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
-  borderRadius: 'var(--sbb-border-radius-4x)',
-  zIndex: '100',
-};
-
 const textBlock = (): TemplateResult => html`
   <div style=${styleMap(textBlockStyle)}>
     J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,

From ac2e2ad4a9079476202029e0918672b003bed771 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 5 Feb 2024 09:36:46 +0100
Subject: [PATCH 16/65] fix: integrity

---
 src/components/dialog-actions/readme.md | 22 ++++++++++++++++++++++
 src/components/dialog-content/readme.md | 12 ++++++++++++
 src/components/dialog-title/readme.md   |  7 +------
 src/components/dialog/dialog.ts         |  3 ++-
 src/components/dialog/readme.md         |  1 -
 5 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/dialog-actions/readme.md b/src/components/dialog-actions/readme.md
index 0a4bd342cc..6244ffc55f 100644
--- a/src/components/dialog-actions/readme.md
+++ b/src/components/dialog-actions/readme.md
@@ -42,3 +42,25 @@ The `sbb-dialog-actions` is a component . . .
 > Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
 
 <!-- Auto Generated Below -->
+
+## Properties
+
+| Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                     |
+| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
+| `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                      |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                              |
+| `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                    |
+| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
+| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
+
+## Events
+
+| Name          | Type               | Description               | Inherited From |
+| ------------- | ------------------ | ------------------------- | -------------- |
+| `myEventName` | `CustomEvent<any>` | TODO: Document this event |                |
+
+## Slots
+
+| Name | Description                                      |
+| ---- | ------------------------------------------------ |
+|      | Use the unnamed slot to add `sbb-TODO` elements. |
diff --git a/src/components/dialog-content/readme.md b/src/components/dialog-content/readme.md
index 6af6578481..7993f094b5 100644
--- a/src/components/dialog-content/readme.md
+++ b/src/components/dialog-content/readme.md
@@ -42,3 +42,15 @@ The `sbb-dialog-content` is a component . . .
 > Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
 
 <!-- Auto Generated Below -->
+
+## Events
+
+| Name          | Type               | Description               | Inherited From |
+| ------------- | ------------------ | ------------------------- | -------------- |
+| `myEventName` | `CustomEvent<any>` | TODO: Document this event |                |
+
+## Slots
+
+| Name | Description                                      |
+| ---- | ------------------------------------------------ |
+|      | Use the unnamed slot to add `sbb-TODO` elements. |
diff --git a/src/components/dialog-title/readme.md b/src/components/dialog-title/readme.md
index bf7a2d7e0e..5cfe4f12cd 100644
--- a/src/components/dialog-title/readme.md
+++ b/src/components/dialog-title/readme.md
@@ -51,16 +51,11 @@ The `sbb-dialog-title` is a component . . .
 | `titleBackButton`         | `title-back-button`         | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
 | `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
+| `hideOnScroll`            | `hide-on-scroll`            | public  | `false \| '' \| Breakpoint`  | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
 | `level`                   | `level`                     | public  | `TitleLevel \| undefined`    | `'1'`   | Title level                                                                                                                                                                                    |
 | `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
 | `negative`                | `negative`                  | public  | `boolean \| undefined`       | `false` | Choose negative variant                                                                                                                                                                        |
 
-## Methods
-
-| Name                    | Privacy | Description | Parameters       | Return | Inherited From |
-| ----------------------- | ------- | ----------- | ---------------- | ------ | -------------- |
-| `setOverflowsAttribute` | public  |             | `value: boolean` | `void` |                |
-
 ## Events
 
 | Name                | Type               | Description               | Inherited From |
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index d95f4b3f56..fcf4d1a9b2 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -412,7 +412,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _setOverflowsDataAttribute(): void {
     this.toggleAttribute('data-overflows', this._overflows);
     this._dialogTitleElement.toggleAttribute('data-overflows', this._overflows);
-    this._dialogActionsElement ?? this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
+    this._dialogActionsElement ??
+      this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index eb123c4064..5b3127dd5e 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -80,7 +80,6 @@ It's possible to display the component in `negative` variant using the self-name
 
 | Name                 | Attribute             | Privacy | Type                  | Default   | Description                                                          |
 | -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- |
-| `titleContent`       | `title-content`       | public  | `string`              |           | Dialog title.                                                        |
 | `backdropAction`     | `backdrop-action`     | public  | `'close' \| 'none'`   | `'close'` | Backdrop click action.                                               |
 | `negative`           | `negative`            | public  | `boolean`             | `false`   | Negative coloring variant flag.                                      |
 | `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined` |           | This will be forwarded as aria-label to the relevant nested element. |

From bb721ade394d6b34bbeda56f4b6a520635baf9c5 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 5 Feb 2024 09:43:46 +0100
Subject: [PATCH 17/65] fix: lint

---
 src/components/dialog-actions/dialog-actions.e2e.ts   | 11 +----------
 .../dialog-actions/dialog-actions.stories.ts          |  8 ++------
 .../dialog-content/dialog-content.stories.ts          |  3 ++-
 src/components/dialog-title/dialog-title.stories.ts   |  3 ++-
 src/components/dialog/dialog.e2e.ts                   |  2 +-
 5 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/dialog-actions/dialog-actions.e2e.ts b/src/components/dialog-actions/dialog-actions.e2e.ts
index cc7294bbc7..b7ed049612 100644
--- a/src/components/dialog-actions/dialog-actions.e2e.ts
+++ b/src/components/dialog-actions/dialog-actions.e2e.ts
@@ -1,8 +1,6 @@
-import { assert, expect, fixture } from '@open-wc/testing';
+import { assert, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../core/testing';
-
 import { SbbDialogActionsElement } from './dialog-actions';
 
 describe('sbb-dialog-actions', () => {
@@ -15,11 +13,4 @@ describe('sbb-dialog-actions', () => {
   it('renders', async () => {
     assert.instanceOf(element, SbbDialogActionsElement);
   });
-
-  it('emits on click', async () => {
-    const myEventNameSpy = new EventSpy(SbbDialogActionsElement.events.myEventName);
-    element.click();
-    await waitForLitRender(element);
-    expect(myEventNameSpy.count).to.be.equal(1);
-  });
 });
diff --git a/src/components/dialog-actions/dialog-actions.stories.ts b/src/components/dialog-actions/dialog-actions.stories.ts
index d0f6a3cbf1..88e36fe4bc 100644
--- a/src/components/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog-actions/dialog-actions.stories.ts
@@ -1,13 +1,12 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 
 import { sbbSpread } from '../core/dom';
 
-import type { SbbDialogActionsElement } from './dialog-actions';
 import readme from './readme.md?raw';
-
 import './dialog-actions';
 
 const myProp: InputType = {
@@ -39,9 +38,6 @@ const meta: Meta = {
     withActions as Decorator,
   ],
   parameters: {
-    actions: {
-      handles: [SbbDialogActionsElement.events.myEventName],
-    },
     backgrounds: {
       disable: true,
     },
diff --git a/src/components/dialog-content/dialog-content.stories.ts b/src/components/dialog-content/dialog-content.stories.ts
index 4a1b06e9bd..8dd9cbae0c 100644
--- a/src/components/dialog-content/dialog-content.stories.ts
+++ b/src/components/dialog-content/dialog-content.stories.ts
@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 
 import { sbbSpread } from '../core/dom';
 
diff --git a/src/components/dialog-title/dialog-title.stories.ts b/src/components/dialog-title/dialog-title.stories.ts
index 92cb5f3965..d4065dc1c8 100644
--- a/src/components/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog-title/dialog-title.stories.ts
@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 
 import { sbbSpread } from '../core/dom';
 
diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts
index 8bd860819b..fa6dcabfec 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog.e2e.ts
@@ -470,7 +470,7 @@ describe('sbb-dialog with long content', () => {
     await openDialog(element);
     expect(element).not.to.have.attribute('data-hide-header');
 
-    const content = element.shadowRoot.querySelector('.sbb-dialog__content');
+    const content = element.shadowRoot!.querySelector('.sbb-dialog__content')!;
 
     // Scroll down.
     content.scrollTo(0, 50);

From 3901c356ca147dca745862476b4534834c0589dc Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 10:23:21 +0100
Subject: [PATCH 18/65] feat: handle negative state

---
 .../dialog-actions/dialog-actions.scss        |  2 +-
 src/components/dialog-title/dialog-title.ts   | 21 +---
 src/components/dialog/dialog.stories.ts       | 97 ++++++++++++-------
 src/components/dialog/dialog.ts               | 25 ++++-
 4 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/src/components/dialog-actions/dialog-actions.scss b/src/components/dialog-actions/dialog-actions.scss
index 7fbac4492e..e80846c081 100644
--- a/src/components/dialog-actions/dialog-actions.scss
+++ b/src/components/dialog-actions/dialog-actions.scss
@@ -15,7 +15,7 @@
   background-color: var(--sbb-dialog-background-color);
   border-block-start: var(--sbb-dialog-actions-border);
 
-  :host([data-overflows]:not([negative])) & {
+  :host([data-overflows]:not([data-negative])) & {
     @include sbb.shadow-level-9-soft;
   }
 }
diff --git a/src/components/dialog-title/dialog-title.ts b/src/components/dialog-title/dialog-title.ts
index 01f301716a..9472400dd1 100644
--- a/src/components/dialog-title/dialog-title.ts
+++ b/src/components/dialog-title/dialog-title.ts
@@ -5,7 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { LanguageController } from '../core/common-behaviors';
 import type { Breakpoint } from '../core/dom';
 import { setAttribute } from '../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../core/eventing';
+import { EventEmitter } from '../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../core/i18n';
 import type { TitleLevel } from '../title';
 import { SbbTitleElement } from '../title';
@@ -15,7 +15,7 @@ import style from './dialog-title.scss?lit&inline';
 
 /**
  * It displays a title inside a dialog header.
- * @event {CustomEvent<any>} requestBackAction - TODO: Document this event
+ * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
  */
 @customElement('sbb-dialog-title')
 export class SbbDialogTitleElement extends SbbTitleElement {
@@ -61,29 +61,12 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   }
   private _hideOnScroll: false | '' | Breakpoint = false;
 
-  private _abort = new ConnectedAbortController(this);
   private _backClick: EventEmitter<any> = new EventEmitter(
     this,
     SbbDialogTitleElement.events.backClick,
   );
   private _language = new LanguageController(this);
 
-  private _onClickFn(): void {
-    this._backClick.emit();
-  }
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    const signal = this._abort.signal;
-    this.addEventListener('click', () => this._onClickFn(), { signal });
-    // do stuff
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    // do stuff
-  }
-
   protected override render(): TemplateResult {
     setAttribute(this, 'slot', 'title');
 
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 05ce54ca90..1fe826a29b 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -18,6 +18,7 @@ import { sbbSpread } from '../../storybook/helpers/spread';
 import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
 import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position';
 import sampleImages from '../core/images';
+import { SbbDialogTitleElement } from '../dialog-title';
 
 import { SbbDialogElement } from './dialog';
 import readme from './readme.md?raw';
@@ -29,7 +30,6 @@ import '../title';
 import '../form-field';
 import '../image';
 import '../action-group';
-import '../dialog-title';
 import '../dialog-content';
 import '../dialog-actions';
 
@@ -47,29 +47,30 @@ const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
   await userEvent.click(button);
 };
 
-const titleContent: InputType = {
+const titleLevel: InputType = {
   control: {
-    type: 'text',
+    type: 'inline-radio',
   },
+  options: [1, 2, 3, 4, 5, 6],
   table: {
     category: 'Header',
   },
 };
 
-const titleLevel: InputType = {
+const titleBackButton: InputType = {
   control: {
-    type: 'inline-radio',
+    type: 'boolean',
   },
-  options: [1, 2, 3, 4, 5, 6],
   table: {
     category: 'Header',
   },
 };
 
-const titleBackButton: InputType = {
+const hideOnScroll: InputType = {
   control: {
-    type: 'boolean',
+    type: 'select',
   },
+  options: [false, '', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
   table: {
     category: 'Header',
   },
@@ -122,25 +123,25 @@ const backdropAction: InputType = {
 };
 
 const basicArgTypes: ArgTypes = {
-  'title-content': titleContent,
-  'title-level': titleLevel,
-  'title-back-button': titleBackButton,
+  titleLevel,
+  titleBackButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
   negative,
   'accessibility-label': accessibilityLabel,
-  'accessibility-close-label': accessibilityCloseLabel,
-  'accessibility-back-label': accessibilityBackLabel,
   'disable-animation': disableAnimation,
   'backdrop-action': backdropAction,
 };
 
 const basicArgs: Args = {
-  'title-content': 'A describing title of the dialog',
-  'title-level': undefined,
-  'title-back-button': true,
+  titleLevel: undefined,
+  titleBackButton: true,
+  hideOnScroll: hideOnScroll.options[1],
+  accessibilityCloseLabel: 'Close dialog',
+  accessibilityBackLabel: 'Go back',
   negative: false,
-  'accessibility-label': undefined,
-  'accessibility-close-label': undefined,
-  'accessibility-back-label': undefined,
+  'accessibility-label': 'Dialog aria-label',
   'disable-animation': isChromatic(),
   'backdrop-action': backdropAction.options[0],
 };
@@ -206,15 +207,20 @@ const textBlockStyle: Args = {
   borderRadius: 'var(--sbb-border-radius-4x)',
 };
 
-const dialogHeader = (args: Args): TemplateResult => html`
+const dialogHeader = (
+  titleLevel: number,
+  titleBackButton: boolean,
+  hideOnScroll: any,
+  accessibilityCloseLabel: string,
+  accessibilityBackLabel: string,
+): TemplateResult => html`
   <sbb-dialog-title
-    title-level=${args.titleLevel}
-    ?title-back-button=${args.titleBackButton}
-    accessibility-close-label=${args.accessibilityCloseLabel}
-    accessibility-back-label=${args.accessibilityBackLabel}
-    ?negative=${args.negative}
-    hide-on-scroll=""
-    >Title</sbb-dialog-title
+    title-level=${titleLevel}
+    ?title-back-button=${titleBackButton}
+    hide-on-scroll=${hideOnScroll}
+    accessibility-close-label=${accessibilityCloseLabel}
+    accessibility-back-label=${accessibilityBackLabel}
+    >A describing title of the dialog</sbb-dialog-title
   >
 `;
 
@@ -227,10 +233,23 @@ const textBlock = (): TemplateResult => html`
   </div>
 `;
 
-const DefaultTemplate = (args: Args): TemplateResult => html`
+const DefaultTemplate = ({
+  titleLevel,
+  titleBackButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
-    ${dialogHeader(args)}
+    ${dialogHeader(
+      titleLevel,
+      titleBackButton,
+      hideOnScroll,
+      accessibilityCloseLabel,
+      accessibilityBackLabel,
+    )}
     <sbb-dialog-content>
       <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
     </sbb-dialog-content>
@@ -255,10 +274,23 @@ const SlottedTitleTemplate = (args: Args): TemplateResult => html`
   </sbb-dialog>
 `;
 
-const LongContentTemplate = (args: Args): TemplateResult => html`
+const LongContentTemplate = ({
+  titleLevel,
+  titleBackButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
   ${triggerButton('my-dialog-3')}
   <sbb-dialog data-testid="dialog" id="my-dialog-3" ${sbbSpread(args)}>
-    ${dialogHeader(args)}
+    ${dialogHeader(
+      titleLevel,
+      titleBackButton,
+      hideOnScroll,
+      accessibilityCloseLabel,
+      accessibilityBackLabel,
+    )}
     <sbb-dialog-content>
       Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
       like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
@@ -396,7 +428,6 @@ export const SlottedTitle: StoryObj = {
   argTypes: basicArgTypes,
   args: {
     ...basicArgs,
-    'title-content': undefined,
     'title-back-button': false,
   },
   play: isChromatic() ? playStory : undefined,
@@ -449,7 +480,7 @@ const meta: Meta = {
         SbbDialogElement.events.didOpen,
         SbbDialogElement.events.willClose,
         SbbDialogElement.events.didClose,
-        SbbDialogElement.events.backClick,
+        SbbDialogTitleElement.events.backClick,
       ],
     },
     backgrounds: {
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index fcf4d1a9b2..465306da7e 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
@@ -36,7 +36,6 @@ let nextId = 0;
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-dialog` is closed.
- * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
  * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
@@ -49,7 +48,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     didOpen: 'didOpen',
     willClose: 'willClose',
     didClose: 'didClose',
-    backClick: 'requestBackAction',
   } as const;
 
   /**
@@ -135,6 +133,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       .firstElementChild as HTMLElement;
     this._dialogActionsElement = this.querySelector('sbb-dialog-actions') || undefined;
 
+    this._syncNegative();
+
     if (!this._willOpen.emit()) {
       return;
     }
@@ -235,6 +235,22 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     }
   }
 
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('negative')) {
+      this._syncNegative();
+    }
+  }
+
+  private _syncNegative(): void {
+    if (this._dialogTitleElement) {
+      this._dialogTitleElement.negative = this.negative;
+    }
+
+    if (this._dialogActionsElement) {
+      toggleDatasetEntry(this._dialogActionsElement!, 'negative', this.negative);
+    }
+  }
+
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._dialogController?.abort();
@@ -412,8 +428,9 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _setOverflowsDataAttribute(): void {
     this.toggleAttribute('data-overflows', this._overflows);
     this._dialogTitleElement.toggleAttribute('data-overflows', this._overflows);
-    this._dialogActionsElement ??
+    if (this._dialogActionsElement) {
       this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
+    }
   }
 
   protected override render(): TemplateResult {

From 4f78ca97012a1d8c1bc57340284a7434b574eb9b Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 15:20:15 +0100
Subject: [PATCH 19/65] fix: dialog stories

---
 src/components/dialog/dialog.stories.ts | 175 ++++++++++--------------
 1 file changed, 72 insertions(+), 103 deletions(-)

diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index 1fe826a29b..f03b156aae 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -47,13 +47,13 @@ const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
   await userEvent.click(button);
 };
 
-const titleLevel: InputType = {
+const level: InputType = {
   control: {
     type: 'inline-radio',
   },
   options: [1, 2, 3, 4, 5, 6],
   table: {
-    category: 'Header',
+    category: 'Title',
   },
 };
 
@@ -62,7 +62,7 @@ const titleBackButton: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Header',
+    category: 'Title',
   },
 };
 
@@ -72,7 +72,7 @@ const hideOnScroll: InputType = {
   },
   options: [false, '', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
   table: {
-    category: 'Header',
+    category: 'Title',
   },
 };
 
@@ -123,7 +123,7 @@ const backdropAction: InputType = {
 };
 
 const basicArgTypes: ArgTypes = {
-  titleLevel,
+  level,
   titleBackButton,
   hideOnScroll,
   accessibilityCloseLabel,
@@ -135,7 +135,7 @@ const basicArgTypes: ArgTypes = {
 };
 
 const basicArgs: Args = {
-  titleLevel: undefined,
+  level: level.options[0],
   titleBackButton: true,
   hideOnScroll: hideOnScroll.options[1],
   accessibilityCloseLabel: 'Close dialog',
@@ -208,14 +208,14 @@ const textBlockStyle: Args = {
 };
 
 const dialogHeader = (
-  titleLevel: number,
+  level: number,
   titleBackButton: boolean,
   hideOnScroll: any,
   accessibilityCloseLabel: string,
   accessibilityBackLabel: string,
 ): TemplateResult => html`
   <sbb-dialog-title
-    title-level=${titleLevel}
+    level=${level}
     ?title-back-button=${titleBackButton}
     hide-on-scroll=${hideOnScroll}
     accessibility-close-label=${accessibilityCloseLabel}
@@ -234,7 +234,7 @@ const textBlock = (): TemplateResult => html`
 `;
 
 const DefaultTemplate = ({
-  titleLevel,
+  level,
   titleBackButton,
   hideOnScroll,
   accessibilityCloseLabel,
@@ -244,7 +244,7 @@ const DefaultTemplate = ({
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
     ${dialogHeader(
-      titleLevel,
+      level,
       titleBackButton,
       hideOnScroll,
       accessibilityCloseLabel,
@@ -257,25 +257,8 @@ const DefaultTemplate = ({
   </sbb-dialog>
 `;
 
-const SlottedTitleTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-2')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
-    <span slot="title">
-      <sbb-icon name="book-medium" style=${styleMap({ 'vertical-align': 'sub' })}></sbb-icon>
-      The Catcher in the Rye
-    </span>
-    <p id="dialog-content-2" style=${styleMap({ margin: '0' })}>
-      “What really knocks me out is a book that, when you're all done reading it, you wish the
-      author that wrote it was a terrific friend of yours and you could call him up on the phone
-      whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher in
-      the Rye
-    </p>
-    ${actionGroup(args.negative)}
-  </sbb-dialog>
-`;
-
 const LongContentTemplate = ({
-  titleLevel,
+  level,
   titleBackButton,
   hideOnScroll,
   accessibilityCloseLabel,
@@ -285,7 +268,7 @@ const LongContentTemplate = ({
   ${triggerButton('my-dialog-3')}
   <sbb-dialog data-testid="dialog" id="my-dialog-3" ${sbbSpread(args)}>
     ${dialogHeader(
-      titleLevel,
+      level,
       titleBackButton,
       hideOnScroll,
       accessibilityCloseLabel,
@@ -313,7 +296,14 @@ const LongContentTemplate = ({
   </sbb-dialog>
 `;
 
-const FormTemplate = (args: Args): TemplateResult => html`
+const FormTemplate = ({
+  level,
+  titleBackButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
   ${triggerButton('my-dialog-4')}
   <div id="returned-value">
     <div style=${styleMap(formDetailsStyle)}>
@@ -325,7 +315,7 @@ const FormTemplate = (args: Args): TemplateResult => html`
     data-testid="dialog"
     id="my-dialog-4"
     @willClose=${(event: CustomEvent) => {
-      if (event.detail) {
+      if (event.detail.returnValue) {
         document.getElementById('returned-value-message')!.innerHTML =
           `${event.detail.returnValue.message?.value}`;
         document.getElementById('returned-value-animal')!.innerHTML =
@@ -334,68 +324,64 @@ const FormTemplate = (args: Args): TemplateResult => html`
     }}
     ${sbbSpread(args)}
   >
-    <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
-      Submit the form below to close the dialog box using the
-      <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
-      method and returning the form values to update the details.
-    </div>
-    <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-      <sbb-form-field error-space="none" size="m">
-        <label>Message</label>
+    ${dialogHeader(
+      level,
+      titleBackButton,
+      hideOnScroll,
+      accessibilityCloseLabel,
+      accessibilityBackLabel,
+    )}
+    <sbb-dialog-content>
+      <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
+        Submit the form below to close the dialog box using the
+        <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
+        method and returning the form values to update the details.
+      </div>
+      <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
         <input placeholder="Your custom massage" value="Hello 👋" name="message" />
-      </sbb-form-field>
-      <sbb-form-field error-space="none" size="m">
+        </sbb-form-field>
+        <sbb-form-field error-space="none" size="m">
         <label>Favorite animal</label>
-        <select name="animal">
-          <option>Red Panda</option>
-          <option>Cheetah</option>
-          <option>Polar Bear</option>
-          <option>Elephant</option>
-        </select>
-      </sbb-form-field>
-      <sbb-button type="submit" size="m" sbb-dialog-close> Update details </sbb-button>
-    </form>
+          <select name="animal">
+            <option>Red Panda</option>
+            <option>Cheetah</option>
+            <option>Polar Bear</option>
+            <option>Elephant</option>
+          </select>
+        </sbb-form-field>
+        <sbb-button type="submit" size="m" sbb-dialog-close> Update details </sbb-button>
+      </form>
+    </sbb-dialog-content>
   </sbb-dialog>
 `;
 
-const NoFooterTemplate = (args: Args): TemplateResult => html`
+const NoFooterTemplate = ({
+  level,
+  titleBackButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
   ${triggerButton('my-dialog-5')}
   <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
-    <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
-      “What really knocks me out is a book that, when you're all done reading it, you wish the
-      author that wrote it was a terrific friend of yours and you could call him up on the phone
-      whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher in
-      the Rye
-    </p>
-  </sbb-dialog>
-`;
-
-const FullScreenTemplate = (args: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-6')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-6" ${sbbSpread(args)}>
-    <sbb-title
-      visual-level="2"
-      ?negative=${args.negative}
-      style=${styleMap({ 'margin-block-start': '0' })}
-    >
-      Many Meetings
-    </sbb-title>
-    Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
-    like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
-    Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
-    elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed to
-    Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and pierced
-    his heart.
-    <sbb-image
-      style=${styleMap({ 'margin-block': '1rem' })}
-      image-src=${sampleImages[1]}
-      alt="Natural landscape"
-      data-chromatic="ignore"
-    ></sbb-image>
-    He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels of
-    blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
-    other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the
-    Rings: The Fellowship of the Ring, “Many Meetings” ${actionGroup(args.negative)}
+    ${dialogHeader(
+      level,
+      titleBackButton,
+      hideOnScroll,
+      accessibilityCloseLabel,
+      accessibilityBackLabel,
+    )}
+    <sbb-dialog-content>
+      <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
+        “What really knocks me out is a book that, when you're all done reading it, you wish the
+        author that wrote it was a terrific friend of yours and you could call him up on the phone
+        whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher
+        in the Rye
+      </p>
+    </sbb-dialog-content>
   </sbb-dialog>
 `;
 
@@ -423,16 +409,6 @@ export const AllowBackdropClick: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
-export const SlottedTitle: StoryObj = {
-  render: SlottedTitleTemplate,
-  argTypes: basicArgTypes,
-  args: {
-    ...basicArgs,
-    'title-back-button': false,
-  },
-  play: isChromatic() ? playStory : undefined,
-};
-
 export const LongContent: StoryObj = {
   render: LongContentTemplate,
   argTypes: basicArgTypes,
@@ -454,13 +430,6 @@ export const NoFooter: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
-export const FullScreen: StoryObj = {
-  render: FullScreenTemplate,
-  argTypes: basicArgTypes,
-  args: { ...basicArgs, 'title-content': undefined },
-  play: isChromatic() ? playStory : undefined,
-};
-
 const meta: Meta = {
   decorators: [
     (story) => html`

From e05e98c51ae523f84d341d7f26c361c05ee740cb Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 15:40:12 +0100
Subject: [PATCH 20/65] fix: dialog title stories

---
 src/components/dialog-title/dialog-title.scss |  7 ---
 .../dialog-title/dialog-title.stories.ts      | 50 +++++++++++++++++--
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/dialog-title/dialog-title.scss b/src/components/dialog-title/dialog-title.scss
index cbdd2be7ed..0c6d9f8cbd 100644
--- a/src/components/dialog-title/dialog-title.scss
+++ b/src/components/dialog-title/dialog-title.scss
@@ -7,16 +7,9 @@
 :host {
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
 
-  // --sbb-dialog-header-margin-block-start: 0;
-
   display: contents;
 }
 
-// :host([data-hide-header]) {
-//   // Hide transition
-//   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
-// }
-
 :host([data-overflows]:not([data-fullscreen])) {
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s);
 }
diff --git a/src/components/dialog-title/dialog-title.stories.ts b/src/components/dialog-title/dialog-title.stories.ts
index d4065dc1c8..c61ed91d58 100644
--- a/src/components/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog-title/dialog-title.stories.ts
@@ -6,22 +6,61 @@ import { html } from 'lit';
 
 import { sbbSpread } from '../core/dom';
 
+import { SbbDialogTitleElement } from './dialog-title';
 import readme from './readme.md?raw';
 
-import './dialog-title';
+const level: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: [1, 2, 3, 4, 5, 6],
+};
+
+const titleBackButton: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
 
-const titleContent: InputType = {
+const hideOnScroll: InputType = {
+  control: {
+    type: 'select',
+  },
+  options: [false, '', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+};
+
+const accessibilityCloseLabel: InputType = {
   control: {
     type: 'text',
   },
+  table: {
+    category: 'Accessibility',
+  },
+};
+
+const accessibilityBackLabel: InputType = {
+  control: {
+    type: 'text',
+  },
+  table: {
+    category: 'Accessibility',
+  },
 };
 
 const defaultArgTypes: ArgTypes = {
-  'title-content': titleContent,
+  level,
+  'title-back-button': titleBackButton,
+  'hide-on-scroll': hideOnScroll,
+  'accessibility-close-label': accessibilityCloseLabel,
+  'accessibility-back-label': accessibilityBackLabel,
 };
 
 const defaultArgs: Args = {
-  'title-content': 'Title content',
+  level: level.options[0],
+  'title-back-button': true,
+  'hide-on-scroll': hideOnScroll.options[0],
+  'accessibility-close-label': 'Close dialog',
+  'accessibility-back-label': 'Go back',
 };
 
 const Template = (args: Args): TemplateResult =>
@@ -39,6 +78,9 @@ const meta: Meta = {
     withActions as Decorator,
   ],
   parameters: {
+    actions: {
+      handles: [SbbDialogTitleElement.events.backClick],
+    },
     backgrounds: {
       disable: true,
     },

From 1972457cb72b325bba695a99c2d35f934479054f Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 15:47:31 +0100
Subject: [PATCH 21/65] fix: dialog content stories

---
 .../dialog-content/dialog-content.stories.ts  | 34 +++----------------
 .../dialog-content/dialog-content.ts          | 31 ++---------------
 src/components/dialog-title/dialog-title.ts   |  1 +
 src/components/dialog/dialog.ts               |  5 +--
 4 files changed, 11 insertions(+), 60 deletions(-)

diff --git a/src/components/dialog-content/dialog-content.stories.ts b/src/components/dialog-content/dialog-content.stories.ts
index 8dd9cbae0c..411760755f 100644
--- a/src/components/dialog-content/dialog-content.stories.ts
+++ b/src/components/dialog-content/dialog-content.stories.ts
@@ -1,36 +1,15 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-
-import { SbbDialogContentElement } from './dialog-content';
+import './dialog-content';
 import readme from './readme.md?raw';
 
-const myProp: InputType = {
-  control: {
-    type: 'text',
-  },
-};
-
-const defaultArgTypes: ArgTypes = {
-  'my-prop': myProp,
-};
-
-const defaultArgs: Args = {
-  'my-prop': 'Label',
-};
+const Template = (): TemplateResult =>
+  html`<sbb-dialog-content>This is a dialog content.</sbb-dialog-content>`;
 
-const Template = (args: Args): TemplateResult =>
-  html`<sbb-dialog-content ${sbbSpread(args)}></sbb-dialog-content>`;
-
-export const Default: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs },
-};
+export const Default: StoryObj = { render: Template };
 
 const meta: Meta = {
   decorators: [
@@ -38,9 +17,6 @@ const meta: Meta = {
     withActions as Decorator,
   ],
   parameters: {
-    actions: {
-      handles: [SbbDialogContentElement.events.myEventName],
-    },
     backgrounds: {
       disable: true,
     },
diff --git a/src/components/dialog-content/dialog-content.ts b/src/components/dialog-content/dialog-content.ts
index 4b785b1fd8..a6ddf12ac3 100644
--- a/src/components/dialog-content/dialog-content.ts
+++ b/src/components/dialog-content/dialog-content.ts
@@ -3,44 +3,17 @@ import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { setAttribute } from '../core/dom';
-import { ConnectedAbortController, EventEmitter } from '../core/eventing';
 
 import style from './dialog-content.scss?lit&inline';
 
 /**
- * Describe the purpose of the component with a single short sentence.
+ * Use this component to provide a content for an `sbb-dialog`.
  *
- * @slot - Use the unnamed slot to add `sbb-TODO` elements.
- * @event {CustomEvent<any>} myEventName - TODO: Document this event
+ * @slot - Use the unnamed slot to provide a dialog content.
  */
 @customElement('sbb-dialog-content')
 export class SbbDialogContentElement extends LitElement {
   public static override styles: CSSResultGroup = style;
-  public static readonly events: Record<string, string> = {
-    myEventName: 'myEventName',
-  } as const;
-
-  private _abort = new ConnectedAbortController(this);
-  private _myEvent: EventEmitter<any> = new EventEmitter(
-    this,
-    SbbDialogContentElement.events.myEventName,
-  );
-
-  private _onClickFn(): void {
-    this._myEvent.emit();
-  }
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    const signal = this._abort.signal;
-    this.addEventListener('click', () => this._onClickFn(), { signal });
-    // do stuff
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    // do stuff
-  }
 
   protected override render(): TemplateResult {
     setAttribute(this, 'slot', 'content');
diff --git a/src/components/dialog-title/dialog-title.ts b/src/components/dialog-title/dialog-title.ts
index 9472400dd1..56176a0aed 100644
--- a/src/components/dialog-title/dialog-title.ts
+++ b/src/components/dialog-title/dialog-title.ts
@@ -15,6 +15,7 @@ import style from './dialog-title.scss?lit&inline';
 
 /**
  * It displays a title inside a dialog header.
+ *
  * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
  */
 @customElement('sbb-dialog-title')
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 465306da7e..82c0b839de 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -30,8 +30,9 @@ let nextId = 0;
  * It displays an interactive overlay element.
  *
  * @slot - Use the unnamed slot to add content to the `sbb-dialog`.
- * @slot title - Use this slot to provide a title.
- * @slot action-group - Use this slot to display a `sbb-action-group` in the footer.
+ * @slot title - Use this slot to provide a `sbb-dialog-title`.
+ * @slot title - Use this slot to provide a `sbb-dialog-content`.
+ * @slot actions - Use this slot to provide a `sbb-dialog-actions`.
  * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.

From ccb52847587c66ff4e980c2f32aead332e8e5e0b Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 15:53:30 +0100
Subject: [PATCH 22/65] fix: dialog actions stories

---
 .../dialog-actions/dialog-actions.stories.ts  | 49 ++++++++-----------
 .../dialog-actions/dialog-actions.ts          | 14 +-----
 2 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/src/components/dialog-actions/dialog-actions.stories.ts b/src/components/dialog-actions/dialog-actions.stories.ts
index 88e36fe4bc..b9ad481de5 100644
--- a/src/components/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog-actions/dialog-actions.stories.ts
@@ -1,36 +1,29 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import type { InputType } from '@storybook/types';
-import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components';
+import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
-
-import readme from './readme.md?raw';
 import './dialog-actions';
+import readme from './readme.md?raw';
 
-const myProp: InputType = {
-  control: {
-    type: 'text',
-  },
-};
-
-const defaultArgTypes: ArgTypes = {
-  'my-prop': myProp,
-};
-
-const defaultArgs: Args = {
-  'my-prop': 'Label',
-};
-
-const Template = (args: Args): TemplateResult =>
-  html`<sbb-dialog-actions ${sbbSpread(args)}></sbb-dialog-actions>`;
-
-export const Default: StoryObj = {
-  render: Template,
-  argTypes: defaultArgTypes,
-  args: { ...defaultArgs },
-};
+import '../button';
+import '../link';
+
+const Template = (): TemplateResult =>
+  html`<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
+    <sbb-link
+      align-self="start"
+      icon-name="chevron-small-left-small"
+      href="https://www.sbb.ch/en/"
+      sbb-dialog-close
+    >
+      Link
+    </sbb-link>
+    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
+    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+  </sbb-dialog-actions>`;
+
+export const Default: StoryObj = { render: Template };
 
 const meta: Meta = {
   decorators: [
@@ -45,7 +38,7 @@ const meta: Meta = {
       extractComponentDescription: () => readme,
     },
   },
-  title: 'components/sbb-dialog-actions',
+  title: 'components/sbb-dialog/sbb-dialog-actions',
 };
 
 export default meta;
diff --git a/src/components/dialog-actions/dialog-actions.ts b/src/components/dialog-actions/dialog-actions.ts
index e1e6c4d1bc..bd73e53698 100644
--- a/src/components/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog-actions/dialog-actions.ts
@@ -8,24 +8,12 @@ import { setAttribute } from '../core/dom';
 import style from './dialog-actions.scss?lit&inline';
 
 /**
- * Describe the purpose of the component with a single short sentence.
- *
- * @slot - Use the unnamed slot to add `sbb-TODO` elements.
- * @event {CustomEvent<any>} myEventName - TODO: Document this event
+ * Use this component to display a footer into an `sbb-dialog` with an action group.
  */
 @customElement('sbb-dialog-actions')
 export class SbbDialogActionsElement extends SbbActionGroupElement {
   public static override styles: CSSResultGroup = [SbbActionGroupElement.styles, style];
 
-  public override connectedCallback(): void {
-    super.connectedCallback();
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    // do stuff
-  }
-
   protected override render(): TemplateResult {
     setAttribute(this, 'slot', 'actions');
 

From 6da8a9dfea571cb309faad422b4a6b9b28685139 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 15:54:33 +0100
Subject: [PATCH 23/65] fix: integrity

---
 src/components/dialog-actions/readme.md | 12 ------------
 src/components/dialog-content/readme.md | 12 +++---------
 src/components/dialog-title/readme.md   |  6 +++---
 src/components/dialog/readme.md         | 24 ++++++++++++------------
 4 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/src/components/dialog-actions/readme.md b/src/components/dialog-actions/readme.md
index 6244ffc55f..2b78fce9ef 100644
--- a/src/components/dialog-actions/readme.md
+++ b/src/components/dialog-actions/readme.md
@@ -52,15 +52,3 @@ The `sbb-dialog-actions` is a component . . .
 | `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                    |
 | `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
 | `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
-
-## Events
-
-| Name          | Type               | Description               | Inherited From |
-| ------------- | ------------------ | ------------------------- | -------------- |
-| `myEventName` | `CustomEvent<any>` | TODO: Document this event |                |
-
-## Slots
-
-| Name | Description                                      |
-| ---- | ------------------------------------------------ |
-|      | Use the unnamed slot to add `sbb-TODO` elements. |
diff --git a/src/components/dialog-content/readme.md b/src/components/dialog-content/readme.md
index 7993f094b5..e962207d0e 100644
--- a/src/components/dialog-content/readme.md
+++ b/src/components/dialog-content/readme.md
@@ -43,14 +43,8 @@ The `sbb-dialog-content` is a component . . .
 
 <!-- Auto Generated Below -->
 
-## Events
-
-| Name          | Type               | Description               | Inherited From |
-| ------------- | ------------------ | ------------------------- | -------------- |
-| `myEventName` | `CustomEvent<any>` | TODO: Document this event |                |
-
 ## Slots
 
-| Name | Description                                      |
-| ---- | ------------------------------------------------ |
-|      | Use the unnamed slot to add `sbb-TODO` elements. |
+| Name | Description                                       |
+| ---- | ------------------------------------------------- |
+|      | Use the unnamed slot to provide a dialog content. |
diff --git a/src/components/dialog-title/readme.md b/src/components/dialog-title/readme.md
index 5cfe4f12cd..78a41f64a6 100644
--- a/src/components/dialog-title/readme.md
+++ b/src/components/dialog-title/readme.md
@@ -58,6 +58,6 @@ The `sbb-dialog-title` is a component . . .
 
 ## Events
 
-| Name                | Type               | Description               | Inherited From |
-| ------------------- | ------------------ | ------------------------- | -------------- |
-| `requestBackAction` | `CustomEvent<any>` | TODO: Document this event |                |
+| Name                | Type                | Description                                | Inherited From |
+| ------------------- | ------------------- | ------------------------------------------ | -------------- |
+| `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked. |                |
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index 5b3127dd5e..6e20da6873 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -94,13 +94,12 @@ It's possible to display the component in `negative` variant using the self-name
 
 ## Events
 
-| Name                | Type                | Description                                                                     | Inherited From |
-| ------------------- | ------------------- | ------------------------------------------------------------------------------- | -------------- |
-| `willOpen`          | `CustomEvent<void>` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
-| `didOpen`           | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is opened.                                      |                |
-| `willClose`         | `CustomEvent<void>` | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
-| `didClose`          | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
-| `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked.                                      |                |
+| Name        | Type                | Description                                                                     | Inherited From |
+| ----------- | ------------------- | ------------------------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
+| `didOpen`   | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is opened.                                      |                |
+| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
+| `didClose`  | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
 
 ## CSS Properties
 
@@ -110,8 +109,9 @@ It's possible to display the component in `negative` variant using the self-name
 
 ## Slots
 
-| Name           | Description                                                  |
-| -------------- | ------------------------------------------------------------ |
-|                | Use the unnamed slot to add content to the `sbb-dialog`.     |
-| `title`        | Use this slot to provide a title.                            |
-| `action-group` | Use this slot to display a `sbb-action-group` in the footer. |
+| Name      | Description                                              |
+| --------- | -------------------------------------------------------- |
+|           | Use the unnamed slot to add content to the `sbb-dialog`. |
+| `title`   | Use this slot to provide a `sbb-dialog-title`.           |
+| `title`   | Use this slot to provide a `sbb-dialog-content`.         |
+| `actions` | Use this slot to provide a `sbb-dialog-actions`.         |

From 0adc70be5062c242339c1b4ea6993ac7d1d8404c Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 7 Feb 2024 16:00:06 +0100
Subject: [PATCH 24/65] fix: remove fullscreen mode

---
 .../dialog-content/dialog-content.scss        |  6 -----
 src/components/dialog-title/dialog-title.scss | 12 ++-------
 src/components/dialog/dialog.e2e.ts           | 25 -------------------
 src/components/dialog/dialog.scss             | 21 ++--------------
 src/components/dialog/dialog.spec.ts          |  5 ++--
 5 files changed, 6 insertions(+), 63 deletions(-)

diff --git a/src/components/dialog-content/dialog-content.scss b/src/components/dialog-content/dialog-content.scss
index 2ce126ca72..1f7db3e8f0 100644
--- a/src/components/dialog-content/dialog-content.scss
+++ b/src/components/dialog-content/dialog-content.scss
@@ -19,12 +19,6 @@
   transition: var(--sbb-dialog-content-transition);
   z-index: -1;
 
-  :host([data-fullscreen]) & {
-    padding-block-start: var(--sbb-spacing-fixed-20x);
-    padding-inline: var(--sbb-layout-base-offset-responsive);
-    height: 100vh;
-  }
-
   // In order to improve the header transition on mobile (especially iOS) we use
   // a combination of the transform and margin properties on touch devices,
   // while on desktop we use just the margin-block for a better transition of the visible scrollbar.
diff --git a/src/components/dialog-title/dialog-title.scss b/src/components/dialog-title/dialog-title.scss
index 0c6d9f8cbd..13ef930935 100644
--- a/src/components/dialog-title/dialog-title.scss
+++ b/src/components/dialog-title/dialog-title.scss
@@ -10,7 +10,7 @@
   display: contents;
 }
 
-:host([data-overflows]:not([data-fullscreen])) {
+:host([data-overflows]) {
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s);
 }
 
@@ -48,16 +48,8 @@
     }
   }
 
-  :host([data-fullscreen]) & {
-    position: fixed;
-    width: var(--sbb-dialog-width);
-    background-color: transparent;
-    padding-inline: var(--sbb-spacing-responsive-xs);
-    padding-block-start: var(--sbb-spacing-responsive-xs);
-  }
-
   &[data-has-visible-focus-within]:focus-within,
-  :host([data-overflows]:not([data-fullscreen], [negative], [data-hide-header])) & {
+  :host([data-overflows]:not([negative], [data-hide-header])) & {
     @include sbb.shadow-level-9-soft;
   }
 
diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts
index fa6dcabfec..743e972244 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog.e2e.ts
@@ -244,31 +244,6 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
     expect(element).to.have.attribute('data-state', 'closed');
   });
 
-  it('does not have the fullscreen attribute', async () => {
-    await openDialog(element);
-
-    expect(element).not.to.have.attribute('data-fullscreen');
-  });
-
-  it('renders in fullscreen mode if no title is provided', async () => {
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-2" disable-animation>
-          Dialog content.
-          <div slot="action-group">Action group</div>
-        </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
-    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
-
-    await openDialog(element);
-
-    await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}`);
-
-    expect(element).to.have.attribute('data-fullscreen');
-  });
-
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
     element = await fixture(
       html`
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 92e521f2a1..d0932845f1 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -91,12 +91,6 @@
   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
 }
 
-:host([data-fullscreen]) {
-  --sbb-dialog-backdrop-color: transparent;
-  --sbb-dialog-max-width: 100%;
-  --sbb-dialog-max-height: 100%;
-}
-
 :host([negative]) {
   @include sbb.scrollbar-variables--color-negative;
 
@@ -110,11 +104,7 @@
   --sbb-dialog-animation-duration: 0.1ms;
 }
 
-:host([data-fullscreen]:not([negative])) {
-  --sbb-dialog-background-color: var(--sbb-color-milk);
-}
-
-:host([data-overflows]:not([data-fullscreen], [negative])) {
+:host([data-overflows]:not([negative])) {
   --sbb-dialog-actions-border: none;
 }
 
@@ -160,10 +150,6 @@
   color: var(--sbb-dialog-color);
   background-color: var(--sbb-dialog-background-color);
 
-  :host([data-fullscreen]) & {
-    border-radius: 0;
-  }
-
   :host([data-state]:not([data-state='closed'])) & {
     display: block;
 
@@ -186,10 +172,7 @@
   @include sbb.mq($from: medium) {
     border-radius: var(--sbb-dialog-border-radius);
     overflow: hidden;
-
-    :host(:not([data-fullscreen])) & {
-      height: fit-content;
-    }
+    height: fit-content;
   }
 }
 
diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog.spec.ts
index b3895e5293..058c56364d 100644
--- a/src/components/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog.spec.ts
@@ -9,9 +9,8 @@ describe(`sbb-dialog`, () => {
   it('renders', async () => {
     const root = await fixture(html`<sbb-dialog></sbb-dialog>`);
 
-    expect(root).dom.to.be.equal(`<sbb-dialog data-state="closed" data-fullscreen></sbb-dialog>`);
-
-    await expect(root).shadowDom.to.be.equalSnapshot();
+    expect(root).dom.to.be.equal(`<sbb-dialog data-state="closed"></sbb-dialog>`);
+    expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   testA11yTreeSnapshot(html`<sbb-dialog></sbb-dialog>`);

From fd7b95661ffa0c6b58bc75d5c6f8c2dd5a82b687 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 11:06:10 +0100
Subject: [PATCH 25/65] fix: tests

---
 .../dialog-actions/dialog-actions.spec.ts     | 18 +++-
 .../dialog-content/dialog-content.e2e.ts      | 11 +--
 .../dialog-content/dialog-content.scss        |  2 +-
 .../dialog-content/dialog-content.spec.ts     |  6 +-
 .../dialog-content/dialog-content.ts          |  2 +-
 .../dialog-title/dialog-title.e2e.ts          |  8 +-
 .../dialog-title/dialog-title.spec.ts         | 29 ++++++-
 src/components/dialog/dialog.e2e.ts           | 85 +++++++++++--------
 src/components/dialog/dialog.stories.ts       | 55 ++++++++++--
 src/components/dialog/dialog.ts               |  8 +-
 src/components/dialog/readme.md               | 11 ++-
 11 files changed, 156 insertions(+), 79 deletions(-)

diff --git a/src/components/dialog-actions/dialog-actions.spec.ts b/src/components/dialog-actions/dialog-actions.spec.ts
index ce5a424d76..bd2a5261b3 100644
--- a/src/components/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog-actions/dialog-actions.spec.ts
@@ -4,13 +4,25 @@ import './dialog-actions';
 
 describe('sbb-dialog-actions', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-actions my-prop="Label"></sbb-dialog-actions>`);
+    const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
 
-    expect(root).dom.to.be.equal(`<sbb-dialog-actions my-prop="Label"></sbb-dialog-actions>`);
+    expect(root).dom.to.be.equal(`
+      <sbb-dialog-actions
+        align-group="start"
+        button-size="l"
+        horizontal-from="medium"
+        link-size="m"
+        orientation="horizontal"
+        slot="actions"
+      ></sbb-dialog-actions>
+    `);
 
     expect(root).shadowDom.to.be.equal(`
       <div class="sbb-dialog-actions">
-        Label
+        <div class="sbb-action-group">
+          <slot>
+          </slot>
+        </div>
       </div>
     `);
   });
diff --git a/src/components/dialog-content/dialog-content.e2e.ts b/src/components/dialog-content/dialog-content.e2e.ts
index d140c69f6b..e138e117b9 100644
--- a/src/components/dialog-content/dialog-content.e2e.ts
+++ b/src/components/dialog-content/dialog-content.e2e.ts
@@ -1,8 +1,6 @@
-import { assert, expect, fixture } from '@open-wc/testing';
+import { assert, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../core/testing';
-
 import { SbbDialogContentElement } from './dialog-content';
 
 describe('sbb-dialog-content', () => {
@@ -15,11 +13,4 @@ describe('sbb-dialog-content', () => {
   it('renders', async () => {
     assert.instanceOf(element, SbbDialogContentElement);
   });
-
-  it('emits on click', async () => {
-    const myEventNameSpy = new EventSpy(SbbDialogContentElement.events.myEventName);
-    element.click();
-    await waitForLitRender(element);
-    expect(myEventNameSpy.count).to.be.equal(1);
-  });
 });
diff --git a/src/components/dialog-content/dialog-content.scss b/src/components/dialog-content/dialog-content.scss
index 1f7db3e8f0..9e9e70b57e 100644
--- a/src/components/dialog-content/dialog-content.scss
+++ b/src/components/dialog-content/dialog-content.scss
@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.sbb-dialog__content {
+.sbb-dialog-content {
   @include sbb.scrollbar-rules;
 
   padding-inline: var(--sbb-dialog-padding-inline);
diff --git a/src/components/dialog-content/dialog-content.spec.ts b/src/components/dialog-content/dialog-content.spec.ts
index 4fbab390af..8d8684cacb 100644
--- a/src/components/dialog-content/dialog-content.spec.ts
+++ b/src/components/dialog-content/dialog-content.spec.ts
@@ -4,13 +4,13 @@ import './dialog-content';
 
 describe('sbb-dialog-content', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-content my-prop="Label"></sbb-dialog-content>`);
+    const root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
 
-    expect(root).dom.to.be.equal(`<sbb-dialog-content my-prop="Label"></sbb-dialog-content>`);
+    expect(root).dom.to.be.equal(`<sbb-dialog-content slot="content">Content</sbb-dialog-content>`);
 
     expect(root).shadowDom.to.be.equal(`
       <div class="sbb-dialog-content">
-        Label
+        <slot></slot>
       </div>
     `);
   });
diff --git a/src/components/dialog-content/dialog-content.ts b/src/components/dialog-content/dialog-content.ts
index a6ddf12ac3..580ecf7c83 100644
--- a/src/components/dialog-content/dialog-content.ts
+++ b/src/components/dialog-content/dialog-content.ts
@@ -19,7 +19,7 @@ export class SbbDialogContentElement extends LitElement {
     setAttribute(this, 'slot', 'content');
 
     return html`
-      <div class="sbb-dialog__content">
+      <div class="sbb-dialog-content">
         <slot></slot>
       </div>
     `;
diff --git a/src/components/dialog-title/dialog-title.e2e.ts b/src/components/dialog-title/dialog-title.e2e.ts
index b53d94ce11..44144785e8 100644
--- a/src/components/dialog-title/dialog-title.e2e.ts
+++ b/src/components/dialog-title/dialog-title.e2e.ts
@@ -9,16 +9,16 @@ describe('sbb-dialog-title', () => {
   let element: SbbDialogTitleElement;
 
   beforeEach(async () => {
-    element = await fixture(html`<sbb-dialog-title></sbb-dialog-title>`);
+    element = await fixture(html`<sbb-dialog-title title-back-button>Title</sbb-dialog-title>`);
   });
 
   it('renders', async () => {
     assert.instanceOf(element, SbbDialogTitleElement);
   });
 
-  it('emits on click', async () => {
-    const myEventNameSpy = new EventSpy(SbbDialogTitleElement.events.myEventName);
-    element.click();
+  it('emits requestBackAction on back button click', async () => {
+    const myEventNameSpy = new EventSpy(SbbDialogTitleElement.events.backClick);
+    (element.shadowRoot!.querySelector('.sbb-dialog__back')! as HTMLElement).click();
     await waitForLitRender(element);
     expect(myEventNameSpy.count).to.be.equal(1);
   });
diff --git a/src/components/dialog-title/dialog-title.spec.ts b/src/components/dialog-title/dialog-title.spec.ts
index 5ceba501ce..0517d6af6f 100644
--- a/src/components/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog-title/dialog-title.spec.ts
@@ -4,13 +4,34 @@ import './dialog-title';
 
 describe('sbb-dialog-title', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-title my-prop="Label"></sbb-dialog-title>`);
+    const root = await fixture(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
 
-    expect(root).dom.to.be.equal(`<sbb-dialog-title my-prop="Label"></sbb-dialog-title>`);
+    expect(root).dom.to.be.equal(`
+      <sbb-dialog-title
+       aria-level="1"
+       level="1"
+       role="heading"
+       slot="title"
+       visual-level="3">Title</sbb-dialog-title>
+    `);
 
     expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-dialog-title">
-        Label
+      <div class="sbb-dialog__header">
+        <h1 class="sbb-title" role="presentation">
+          <slot></slot>
+        </h1>
+        <sbb-button
+          aria-label="Close secondary window"
+          class="sbb-dialog__close"
+          dir="ltr"
+          icon-name="cross-small"
+          role="button"
+          sbb-dialog-close=""
+          size="m"
+          tabindex="0"
+          type="button"
+          variant="secondary"
+        ></sbb-button>
       </div>
     `);
   });
diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts
index 743e972244..27bfa85330 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog.e2e.ts
@@ -7,7 +7,9 @@ import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
 import { fixture } from '../core/testing/private';
 
 import { SbbDialogElement } from './dialog';
-import '../title';
+import '../dialog-title';
+import '../dialog-content';
+import '../dialog-actions';
 
 async function openDialog(element: SbbDialogElement): Promise<void> {
   const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
@@ -34,9 +36,10 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(
       html`
-        <sbb-dialog id="my-dialog-1" title-content="Title" disable-animation>
-          Dialog content.
-          <div slot="action-group">Action group</div>
+        <sbb-dialog id="my-dialog-1" disable-animation>
+          <sbb-dialog-title>Title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+          <sbb-dialog-actions>Action group</sbb-dialog-actions>
         </sbb-dialog>
       `,
       { modules: ['./dialog.ts'] },
@@ -201,7 +204,9 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
   });
 
   it('closes the dialog on close button click', async () => {
-    const closeButton = element.shadowRoot!.querySelector('[sbb-dialog-close]') as HTMLElement;
+    const closeButton = element
+      .querySelector('sbb-dialog-title')!
+      .shadowRoot!.querySelector('[sbb-dialog-close]') as HTMLElement;
     const willClose = new EventSpy(SbbDialogElement.events.willClose);
     const didClose = new EventSpy(SbbDialogElement.events.didClose);
 
@@ -247,13 +252,16 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
     element = await fixture(
       html`
-        <sbb-dialog id="my-dialog-3" title-content="Title" disable-animation>
-          Dialog content.
-          <div slot="action-group">Action group</div>
+        <sbb-dialog id="my-dialog-3" disable-animation>
+          <sbb-dialog-title>Title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+          <sbb-dialog-actions>Action group</sbb-dialog-actions>
         </sbb-dialog>
 
-        <sbb-dialog id="stacked-dialog" disable-animation title-content="Stacked title">
-          Stacked dialog.
+        <sbb-dialog id="stacked-dialog" disable-animation>
+        <sbb-dialog-title>Stacked title</sbb-dialog-title>
+          <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
         </sbb-dialog>
       `,
       { modules: ['./dialog.ts'] },
@@ -319,18 +327,18 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
 
   it('does not close the dialog on other overlay click', async () => {
     await setViewport({ width: 900, height: 600 });
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-4" title-content="Title" disable-animation>
-          Dialog content.
-          <div slot="action-group">Action group</div>
-          <sbb-dialog id="inner-dialog" title-content="Inner Dialog title" disable-animation>
-            Dialog content.
-            <div slot="action-group">Action group</div>
-          </sbb-dialog>
+    element = await fixture(html`
+      <sbb-dialog id="my-dialog-4" disable-animation>
+        <sbb-dialog-title>Title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+
+        <sbb-dialog id="inner-dialog" disable-animation>
+          <sbb-dialog-title>Inner Dialog title</sbb-dialog-title>
+          <sbb-dialog-content>Dialog content</sbb-dialog-content>
         </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
+      </sbb-dialog>
+    `,
+    { modules: ['./dialog.ts'] },
     );
     const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
     const didOpen = new EventSpy(SbbDialogElement.events.didOpen);
@@ -411,21 +419,24 @@ describe('sbb-dialog with long content', () => {
   beforeEach(async () => {
     await setViewport({ width: 900, height: 300 });
     element = await fixture(html`
-      <sbb-dialog id="my-dialog-1" title-content="Title" disable-animation>
-        Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
-        face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
-        saw that Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad
-        in elven-mail, and a star shone on his breast. They spoke together, and then suddenly it
-        seemed to Frodo that Arwen turned towards him, and the light of her eyes fell on him from
-        afar and pierced his heart. He stood still enchanted, while the sweet syllables of the
-        elvish song fell like clear jewels of blended word and melody. 'It is a song to Elbereth,''
-        said Bilbo. 'They will sing that, and other songs of the Blessed Realm, many times tonight.
-        Come on!’ —J.R.R. Tolkien, The Lord of the Rings: The Fellowship of the Ring, “Many
-        Meetings” J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on
-        January 3, 1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy
-        literature. Tolkien's linguistic brilliance and mythic passion converge in a literary legacy
-        that continues to transport readers to magical realms.
-        <div slot="action-group">Action group</div>
+      <sbb-dialog id="my-dialog-1" disable-animation>
+        <sbb-dialog-title hide-on-scroll>Title</sbb-dialog-title>
+        <sbb-dialog-content>
+          Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
+          face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
+          saw that Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be
+          clad in elven-mail, and a star shone on his breast. They spoke together, and then suddenly
+          it seemed to Frodo that Arwen turned towards him, and the light of her eyes fell on him
+          from afar and pierced his heart. He stood still enchanted, while the sweet syllables of
+          the elvish song fell like clear jewels of blended word and melody. 'It is a song to
+          Elbereth,'' said Bilbo. 'They will sing that, and other songs of the Blessed Realm, many
+          times tonight. Come on!’ —J.R.R. Tolkien, The Lord of the Rings: The Fellowship of the
+          Ring, “Many Meetings” J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting
+          world, was born on January 3, 1892. With "The Hobbit" and "The Lord of the Rings", he
+          pioneered fantasy literature. Tolkien's linguistic brilliance and mythic passion converge
+          in a literary legacy that continues to transport readers to magical realms.
+        </sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
   });
@@ -445,7 +456,7 @@ describe('sbb-dialog with long content', () => {
     await openDialog(element);
     expect(element).not.to.have.attribute('data-hide-header');
 
-    const content = element.shadowRoot!.querySelector('.sbb-dialog__content')!;
+    const content = element.querySelector('sbb-dialog-content')!.shadowRoot!.firstElementChild!;
 
     // Scroll down.
     content.scrollTo(0, 50);
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
index f03b156aae..51111cc2d3 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog.stories.ts
@@ -141,7 +141,7 @@ const basicArgs: Args = {
   accessibilityCloseLabel: 'Close dialog',
   accessibilityBackLabel: 'Go back',
   negative: false,
-  'accessibility-label': 'Dialog aria-label',
+  'accessibility-label': undefined,
   'disable-animation': isChromatic(),
   'backdrop-action': backdropAction.options[0],
 };
@@ -265,8 +265,8 @@ const LongContentTemplate = ({
   accessibilityBackLabel,
   ...args
 }: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-3')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-3" ${sbbSpread(args)}>
+  ${triggerButton('my-dialog-2')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
     ${dialogHeader(
       level,
       titleBackButton,
@@ -304,7 +304,7 @@ const FormTemplate = ({
   accessibilityBackLabel,
   ...args
 }: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-4')}
+  ${triggerButton('my-dialog-3')}
   <div id="returned-value">
     <div style=${styleMap(formDetailsStyle)}>
       <div>Your message: <span id="returned-value-message">Hello 👋</span></div>
@@ -313,7 +313,7 @@ const FormTemplate = ({
   </div>
   <sbb-dialog
     data-testid="dialog"
-    id="my-dialog-4"
+    id="my-dialog-3"
     @willClose=${(event: CustomEvent) => {
       if (event.detail.returnValue) {
         document.getElementById('returned-value-message')!.innerHTML =
@@ -365,8 +365,8 @@ const NoFooterTemplate = ({
   accessibilityBackLabel,
   ...args
 }: Args): TemplateResult => html`
-  ${triggerButton('my-dialog-5')}
-  <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
+  ${triggerButton('my-dialog-4')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-4" ${sbbSpread(args)}>
     ${dialogHeader(
       level,
       titleBackButton,
@@ -385,6 +385,40 @@ const NoFooterTemplate = ({
   </sbb-dialog>
 `;
 
+const NestedTemplate = ({
+  level,
+  titleBackButton,
+  hideOnScroll,
+  accessibilityCloseLabel,
+  accessibilityBackLabel,
+  ...args
+}: Args): TemplateResult => html`
+  ${triggerButton('my-dialog-5')}
+  <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
+    ${dialogHeader(
+      level,
+      titleBackButton,
+      hideOnScroll,
+      accessibilityCloseLabel,
+      accessibilityBackLabel,
+    )}
+    <sbb-dialog-content
+      >Click the button to open a nested
+      dialog.&nbsp;${triggerButton('my-dialog-6')}</sbb-dialog-content
+    >
+    <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" ${sbbSpread(args)}>
+      ${dialogHeader(
+        level,
+        titleBackButton,
+        hideOnScroll,
+        accessibilityCloseLabel,
+        accessibilityBackLabel,
+      )}
+      <sbb-dialog-content>Nested dialog content.</sbb-dialog-content>
+    </sbb-dialog>
+  </sbb-dialog>
+`;
+
 export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,
@@ -430,6 +464,13 @@ export const NoFooter: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const Nested: StoryObj = {
+  render: NestedTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? playStory : undefined,
+};
+
 const meta: Meta = {
   decorators: [
     (story) => html`
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 82c0b839de..a7d850a489 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -29,9 +29,8 @@ let nextId = 0;
 /**
  * It displays an interactive overlay element.
  *
- * @slot - Use the unnamed slot to add content to the `sbb-dialog`.
  * @slot title - Use this slot to provide a `sbb-dialog-title`.
- * @slot title - Use this slot to provide a `sbb-dialog-content`.
+ * @slot content - Use this slot to provide a `sbb-dialog-content`.
  * @slot actions - Use this slot to provide a `sbb-dialog-actions`.
  * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
@@ -347,6 +346,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   // In rare cases it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
   private _onDialogAnimationEnd(event: AnimationEvent): void {
+    console.log('Animation');
+
     if (event.animationName === 'open' && this._state === 'opening') {
       this._state = 'opened';
       this._didOpen.emit();
@@ -383,7 +384,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     // Take accessibility label or current string in title section
     const label =
       this.accessibilityLabel ||
-      (this.shadowRoot!.querySelector('.sbb-dialog__title') as HTMLElement)?.innerText.trim();
+      (this.querySelector('sbb-dialog-title') as HTMLElement)!.innerText.trim();
 
     // If the text content remains the same, on VoiceOver the aria-live region is not announced a second time.
     // In order to support reading on every opening, we toggle an invisible space.
@@ -449,6 +450,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
             <slot name="title"></slot>
             <slot name="content"></slot>
             <slot name="actions"></slot>
+            <slot></slot>
           </div>
         </div>
       </div>
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index 6e20da6873..83e3329432 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -109,9 +109,8 @@ It's possible to display the component in `negative` variant using the self-name
 
 ## Slots
 
-| Name      | Description                                              |
-| --------- | -------------------------------------------------------- |
-|           | Use the unnamed slot to add content to the `sbb-dialog`. |
-| `title`   | Use this slot to provide a `sbb-dialog-title`.           |
-| `title`   | Use this slot to provide a `sbb-dialog-content`.         |
-| `actions` | Use this slot to provide a `sbb-dialog-actions`.         |
+| Name      | Description                                      |
+| --------- | ------------------------------------------------ |
+| `title`   | Use this slot to provide a `sbb-dialog-title`.   |
+| `content` | Use this slot to provide a `sbb-dialog-content`. |
+| `actions` | Use this slot to provide a `sbb-dialog-actions`. |

From 29b32853f1e77ba5a5c5049bdcc09b0a39cc53be Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 11:27:33 +0100
Subject: [PATCH 26/65] refactor: re-organize folders

---
 .../dialog-actions/dialog-actions.e2e.ts      |  0
 .../dialog-actions/dialog-actions.scss        |  2 +-
 .../dialog-actions/dialog-actions.spec.ts     |  0
 .../dialog-actions/dialog-actions.stories.ts  |  4 +-
 .../dialog-actions/dialog-actions.ts          |  4 +-
 .../{ => dialog}/dialog-actions/index.ts      |  0
 .../{ => dialog}/dialog-actions/readme.md     |  0
 .../dialog-content/dialog-content.e2e.ts      |  0
 .../dialog-content/dialog-content.scss        |  2 +-
 .../dialog-content/dialog-content.spec.ts     |  0
 .../dialog-content/dialog-content.stories.ts  |  0
 .../dialog-content/dialog-content.ts          |  2 +-
 .../{ => dialog}/dialog-content/index.ts      |  0
 .../{ => dialog}/dialog-content/readme.md     |  0
 .../dialog-title/dialog-title.e2e.ts          |  2 +-
 .../dialog-title/dialog-title.scss            |  2 +-
 .../dialog-title/dialog-title.spec.ts         |  0
 .../dialog-title/dialog-title.stories.ts      |  2 +-
 .../{ => dialog}/dialog-title/dialog-title.ts | 16 +++---
 .../{ => dialog}/dialog-title/index.ts        |  0
 .../{ => dialog}/dialog-title/readme.md       |  0
 .../__snapshots__/dialog.spec.snap.js         |  0
 .../dialog/{ => dialog}/dialog.e2e.ts         | 56 ++++++++-----------
 .../dialog/{ => dialog}/dialog.scss           |  2 +-
 .../dialog/{ => dialog}/dialog.spec.ts        |  0
 .../dialog/{ => dialog}/dialog.stories.ts     | 39 ++++++-------
 src/components/dialog/{ => dialog}/dialog.ts  | 54 ++++++++++--------
 src/components/dialog/dialog/index.ts         |  1 +
 src/components/dialog/{ => dialog}/readme.md  |  0
 src/components/dialog/index.ts                |  3 +
 30 files changed, 97 insertions(+), 94 deletions(-)
 rename src/components/{ => dialog}/dialog-actions/dialog-actions.e2e.ts (100%)
 rename src/components/{ => dialog}/dialog-actions/dialog-actions.scss (94%)
 rename src/components/{ => dialog}/dialog-actions/dialog-actions.spec.ts (100%)
 rename src/components/{ => dialog}/dialog-actions/dialog-actions.stories.ts (96%)
 rename src/components/{ => dialog}/dialog-actions/dialog-actions.ts (88%)
 rename src/components/{ => dialog}/dialog-actions/index.ts (100%)
 rename src/components/{ => dialog}/dialog-actions/readme.md (100%)
 rename src/components/{ => dialog}/dialog-content/dialog-content.e2e.ts (100%)
 rename src/components/{ => dialog}/dialog-content/dialog-content.scss (97%)
 rename src/components/{ => dialog}/dialog-content/dialog-content.spec.ts (100%)
 rename src/components/{ => dialog}/dialog-content/dialog-content.stories.ts (100%)
 rename src/components/{ => dialog}/dialog-content/dialog-content.ts (94%)
 rename src/components/{ => dialog}/dialog-content/index.ts (100%)
 rename src/components/{ => dialog}/dialog-content/readme.md (100%)
 rename src/components/{ => dialog}/dialog-title/dialog-title.e2e.ts (92%)
 rename src/components/{ => dialog}/dialog-title/dialog-title.scss (98%)
 rename src/components/{ => dialog}/dialog-title/dialog-title.spec.ts (100%)
 rename src/components/{ => dialog}/dialog-title/dialog-title.stories.ts (97%)
 rename src/components/{ => dialog}/dialog-title/dialog-title.ts (89%)
 rename src/components/{ => dialog}/dialog-title/index.ts (100%)
 rename src/components/{ => dialog}/dialog-title/readme.md (100%)
 rename src/components/dialog/{ => dialog}/__snapshots__/dialog.spec.snap.js (100%)
 rename src/components/dialog/{ => dialog}/dialog.e2e.ts (93%)
 rename src/components/dialog/{ => dialog}/dialog.scss (99%)
 rename src/components/dialog/{ => dialog}/dialog.spec.ts (100%)
 rename src/components/dialog/{ => dialog}/dialog.stories.ts (93%)
 rename src/components/dialog/{ => dialog}/dialog.ts (91%)
 create mode 100644 src/components/dialog/dialog/index.ts
 rename src/components/dialog/{ => dialog}/readme.md (100%)

diff --git a/src/components/dialog-actions/dialog-actions.e2e.ts b/src/components/dialog/dialog-actions/dialog-actions.e2e.ts
similarity index 100%
rename from src/components/dialog-actions/dialog-actions.e2e.ts
rename to src/components/dialog/dialog-actions/dialog-actions.e2e.ts
diff --git a/src/components/dialog-actions/dialog-actions.scss b/src/components/dialog/dialog-actions/dialog-actions.scss
similarity index 94%
rename from src/components/dialog-actions/dialog-actions.scss
rename to src/components/dialog/dialog-actions/dialog-actions.scss
index e80846c081..fad2fe671b 100644
--- a/src/components/dialog-actions/dialog-actions.scss
+++ b/src/components/dialog/dialog-actions/dialog-actions.scss
@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '../../core/styles' as sbb;
 
 // Default component properties, defined for :host. Properties which can not
 // travel the shadow boundary are defined through this mixin
diff --git a/src/components/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
similarity index 100%
rename from src/components/dialog-actions/dialog-actions.spec.ts
rename to src/components/dialog/dialog-actions/dialog-actions.spec.ts
diff --git a/src/components/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
similarity index 96%
rename from src/components/dialog-actions/dialog-actions.stories.ts
rename to src/components/dialog/dialog-actions/dialog-actions.stories.ts
index b9ad481de5..b8aa87f065 100644
--- a/src/components/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -6,8 +6,8 @@ import { html } from 'lit';
 import './dialog-actions';
 import readme from './readme.md?raw';
 
-import '../button';
-import '../link';
+import '../../button';
+import '../../link';
 
 const Template = (): TemplateResult =>
   html`<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
diff --git a/src/components/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
similarity index 88%
rename from src/components/dialog-actions/dialog-actions.ts
rename to src/components/dialog/dialog-actions/dialog-actions.ts
index bd73e53698..6289650fe0 100644
--- a/src/components/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionGroupElement } from '../action-group';
-import { setAttribute } from '../core/dom';
+import { SbbActionGroupElement } from '../../action-group';
+import { setAttribute } from '../../core/dom';
 
 import style from './dialog-actions.scss?lit&inline';
 
diff --git a/src/components/dialog-actions/index.ts b/src/components/dialog/dialog-actions/index.ts
similarity index 100%
rename from src/components/dialog-actions/index.ts
rename to src/components/dialog/dialog-actions/index.ts
diff --git a/src/components/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
similarity index 100%
rename from src/components/dialog-actions/readme.md
rename to src/components/dialog/dialog-actions/readme.md
diff --git a/src/components/dialog-content/dialog-content.e2e.ts b/src/components/dialog/dialog-content/dialog-content.e2e.ts
similarity index 100%
rename from src/components/dialog-content/dialog-content.e2e.ts
rename to src/components/dialog/dialog-content/dialog-content.e2e.ts
diff --git a/src/components/dialog-content/dialog-content.scss b/src/components/dialog/dialog-content/dialog-content.scss
similarity index 97%
rename from src/components/dialog-content/dialog-content.scss
rename to src/components/dialog/dialog-content/dialog-content.scss
index 9e9e70b57e..2b49cb5c0a 100644
--- a/src/components/dialog-content/dialog-content.scss
+++ b/src/components/dialog/dialog-content/dialog-content.scss
@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '../../core/styles' as sbb;
 
 // Default component properties, defined for :host. Properties which can not
 // travel the shadow boundary are defined through this mixin
diff --git a/src/components/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
similarity index 100%
rename from src/components/dialog-content/dialog-content.spec.ts
rename to src/components/dialog/dialog-content/dialog-content.spec.ts
diff --git a/src/components/dialog-content/dialog-content.stories.ts b/src/components/dialog/dialog-content/dialog-content.stories.ts
similarity index 100%
rename from src/components/dialog-content/dialog-content.stories.ts
rename to src/components/dialog/dialog-content/dialog-content.stories.ts
diff --git a/src/components/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
similarity index 94%
rename from src/components/dialog-content/dialog-content.ts
rename to src/components/dialog/dialog-content/dialog-content.ts
index 580ecf7c83..6325b2ef10 100644
--- a/src/components/dialog-content/dialog-content.ts
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { setAttribute } from '../core/dom';
+import { setAttribute } from '../../core/dom';
 
 import style from './dialog-content.scss?lit&inline';
 
diff --git a/src/components/dialog-content/index.ts b/src/components/dialog/dialog-content/index.ts
similarity index 100%
rename from src/components/dialog-content/index.ts
rename to src/components/dialog/dialog-content/index.ts
diff --git a/src/components/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
similarity index 100%
rename from src/components/dialog-content/readme.md
rename to src/components/dialog/dialog-content/readme.md
diff --git a/src/components/dialog-title/dialog-title.e2e.ts b/src/components/dialog/dialog-title/dialog-title.e2e.ts
similarity index 92%
rename from src/components/dialog-title/dialog-title.e2e.ts
rename to src/components/dialog/dialog-title/dialog-title.e2e.ts
index 44144785e8..b2945f4610 100644
--- a/src/components/dialog-title/dialog-title.e2e.ts
+++ b/src/components/dialog/dialog-title/dialog-title.e2e.ts
@@ -1,7 +1,7 @@
 import { assert, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../core/testing';
+import { EventSpy, waitForLitRender } from '../../core/testing';
 
 import { SbbDialogTitleElement } from './dialog-title';
 
diff --git a/src/components/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
similarity index 98%
rename from src/components/dialog-title/dialog-title.scss
rename to src/components/dialog/dialog-title/dialog-title.scss
index 13ef930935..318671873d 100644
--- a/src/components/dialog-title/dialog-title.scss
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '../../core/styles' as sbb;
 
 // Default component properties, defined for :host. Properties which can not
 // travel the shadow boundary are defined through this mixin
diff --git a/src/components/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
similarity index 100%
rename from src/components/dialog-title/dialog-title.spec.ts
rename to src/components/dialog/dialog-title/dialog-title.spec.ts
diff --git a/src/components/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
similarity index 97%
rename from src/components/dialog-title/dialog-title.stories.ts
rename to src/components/dialog/dialog-title/dialog-title.stories.ts
index c61ed91d58..794df0760a 100644
--- a/src/components/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -4,7 +4,7 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../core/dom';
+import { sbbSpread } from '../../core/dom';
 
 import { SbbDialogTitleElement } from './dialog-title';
 import readme from './readme.md?raw';
diff --git a/src/components/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
similarity index 89%
rename from src/components/dialog-title/dialog-title.ts
rename to src/components/dialog/dialog-title/dialog-title.ts
index 56176a0aed..3be9998341 100644
--- a/src/components/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -2,14 +2,14 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { LanguageController } from '../core/common-behaviors';
-import type { Breakpoint } from '../core/dom';
-import { setAttribute } from '../core/dom';
-import { EventEmitter } from '../core/eventing';
-import { i18nCloseDialog, i18nGoBack } from '../core/i18n';
-import type { TitleLevel } from '../title';
-import { SbbTitleElement } from '../title';
-import '../button';
+import { LanguageController } from '../../core/common-behaviors';
+import type { Breakpoint } from '../../core/dom';
+import { setAttribute } from '../../core/dom';
+import { EventEmitter } from '../../core/eventing';
+import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
+import type { TitleLevel } from '../../title';
+import { SbbTitleElement } from '../../title';
+import '../../button';
 
 import style from './dialog-title.scss?lit&inline';
 
diff --git a/src/components/dialog-title/index.ts b/src/components/dialog/dialog-title/index.ts
similarity index 100%
rename from src/components/dialog-title/index.ts
rename to src/components/dialog/dialog-title/index.ts
diff --git a/src/components/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
similarity index 100%
rename from src/components/dialog-title/readme.md
rename to src/components/dialog/dialog-title/readme.md
diff --git a/src/components/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
similarity index 100%
rename from src/components/dialog/__snapshots__/dialog.spec.snap.js
rename to src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
similarity index 93%
rename from src/components/dialog/dialog.e2e.ts
rename to src/components/dialog/dialog/dialog.e2e.ts
index 27bfa85330..a509905d6f 100644
--- a/src/components/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -1,12 +1,13 @@
-import { assert, expect } from '@open-wc/testing';
+import { assert, expect, fixture } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { i18nDialog } from '../core/i18n';
-import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
-import { fixture } from '../core/testing/private';
+import { i18nDialog } from '../../core/i18n';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
 
 import { SbbDialogElement } from './dialog';
+import '../../button';
+import '../../icon';
 import '../dialog-title';
 import '../dialog-content';
 import '../dialog-actions';
@@ -29,22 +30,19 @@ async function openDialog(element: SbbDialogElement): Promise<void> {
   expect(element).to.have.attribute('data-state', 'opened');
 }
 
-describe(`sbb-dialog with ${fixture.name}`, () => {
+describe('sbb-dialog', () => {
   let element: SbbDialogElement, ariaLiveRef: HTMLElement;
 
   beforeEach(async () => {
     await setViewport({ width: 900, height: 600 });
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-1" disable-animation>
-          <sbb-dialog-title>Title</sbb-dialog-title>
+    element = await fixture(html`
+      <sbb-dialog id="my-dialog-1" disable-animation>
+        <sbb-dialog-title>Title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
-          <sbb-dialog-actions>Action group</sbb-dialog-actions>
-        </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
-    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+      </sbb-dialog>
+    `);
+    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!;
   });
 
   it('renders', () => {
@@ -250,22 +248,19 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
   });
 
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
-    element = await fixture(
-      html`
-        <sbb-dialog id="my-dialog-3" disable-animation>
-          <sbb-dialog-title>Title</sbb-dialog-title>
+    element = await fixture(html`
+      <sbb-dialog id="my-dialog-3" disable-animation>
+        <sbb-dialog-title>Title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
-          <sbb-dialog-actions>Action group</sbb-dialog-actions>
-        </sbb-dialog>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+      </sbb-dialog>
 
-        <sbb-dialog id="stacked-dialog" disable-animation>
+      <sbb-dialog id="stacked-dialog" disable-animation>
         <sbb-dialog-title>Stacked title</sbb-dialog-title>
-          <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
         <sbb-dialog-actions>Action group</sbb-dialog-actions>
-        </sbb-dialog>
-      `,
-      { modules: ['./dialog.ts'] },
-    );
+      </sbb-dialog>
+    `);
 
     const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
     const didOpen = new EventSpy(SbbDialogElement.events.didOpen);
@@ -274,8 +269,7 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
 
     await openDialog(element);
 
-    const stackedDialog =
-      element.parentElement!.querySelector<SbbDialogElement>('#stacked-dialog')!;
+    const stackedDialog = document.querySelector('#stacked-dialog') as SbbDialogElement;
 
     stackedDialog.open();
     await waitForLitRender(element);
@@ -337,9 +331,7 @@ describe(`sbb-dialog with ${fixture.name}`, () => {
           <sbb-dialog-content>Dialog content</sbb-dialog-content>
         </sbb-dialog>
       </sbb-dialog>
-    `,
-    { modules: ['./dialog.ts'] },
-    );
+    `);
     const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
     const didOpen = new EventSpy(SbbDialogElement.events.didOpen);
     const willClose = new EventSpy(SbbDialogElement.events.willClose);
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss
similarity index 99%
rename from src/components/dialog/dialog.scss
rename to src/components/dialog/dialog/dialog.scss
index d0932845f1..3f0cc2668c 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog/dialog.scss
@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '../../core/styles' as sbb;
 
 // Default component properties, defined for :host. Properties which can not
 // travel the shadow boundary are defined through this mixin
diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
similarity index 100%
rename from src/components/dialog/dialog.spec.ts
rename to src/components/dialog/dialog/dialog.spec.ts
diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
similarity index 93%
rename from src/components/dialog/dialog.stories.ts
rename to src/components/dialog/dialog/dialog.stories.ts
index 51111cc2d3..5a6e4e4138 100644
--- a/src/components/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -14,22 +14,21 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../storybook/helpers/spread';
-import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position';
-import sampleImages from '../core/images';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
+import { sbbSpread } from '../../core/dom';
+import sampleImages from '../../core/images';
 import { SbbDialogTitleElement } from '../dialog-title';
 
 import { SbbDialogElement } from './dialog';
 import readme from './readme.md?raw';
 
-import '../button/secondary-button';
-import '../button/button';
-import '../link/block-link';
-import '../title';
-import '../form-field';
-import '../image';
-import '../action-group';
+import '../../button';
+import '../../link';
+import '../../title';
+import '../../form-field';
+import '../../image';
+import '../../action-group';
 import '../dialog-content';
 import '../dialog-actions';
 
@@ -164,7 +163,7 @@ const triggerButton = (dialogId: string): TemplateResult => html`
 
 const actionGroup = (negative: boolean): TemplateResult => html`
   <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
-    <sbb-block-link
+    <sbb-link
       align-self="start"
       icon-name="chevron-small-left-small"
       href="https://www.sbb.ch/en/"
@@ -172,9 +171,9 @@ const actionGroup = (negative: boolean): TemplateResult => html`
       sbb-dialog-close
     >
       Link
-    </sbb-block-link>
-    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
-    <sbb-button sbb-dialog-close> Confirm </sbb-button>
+    </sbb-link>
+    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
+    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
   </sbb-dialog-actions>
 `;
 
@@ -188,7 +187,7 @@ const formDetailsStyle: Args = {
   marginTop: 'var(--sbb-spacing-fixed-4x)',
   padding: 'var(--sbb-spacing-fixed-4x)',
   borderRadius: 'var(--sbb-border-radius-8x)',
-  backgroundColor: 'var(--sbb-color-milk)',
+  backgroundColor: 'var(--sbb-color-milk-default)',
 };
 
 const formStyle: Args = {
@@ -338,12 +337,10 @@ const FormTemplate = ({
         method and returning the form values to update the details.
       </div>
       <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-        <sbb-form-field error-space="none" size="m">
-          <label>Message</label>
-        <input placeholder="Your custom massage" value="Hello 👋" name="message" />
+        <sbb-form-field error-space="none" label="Message" size="m">
+          <input placeholder="Your custom massage" value="Hello 👋" name="message" />
         </sbb-form-field>
-        <sbb-form-field error-space="none" size="m">
-        <label>Favorite animal</label>
+        <sbb-form-field error-space="none" label="Favorite animal" size="m">
           <select name="animal">
             <option>Red Panda</option>
             <option>Cheetah</option>
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
similarity index 91%
rename from src/components/dialog/dialog.ts
rename to src/components/dialog/dialog/dialog.ts
index a7d850a489..97b18c37a8 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -3,15 +3,20 @@ import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbFocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../core/a11y';
-import { SbbLanguageController, SbbSlotStateController } from '../core/controllers';
-import { hostContext, isValidAttribute, SbbScrollHandler, isBreakpoint } from '../core/dom';
-import { EventEmitter } from '../core/eventing';
-import { i18nDialog } from '../core/i18n';
-import { SbbNegativeMixin } from '../core/mixins';
-import { AgnosticResizeObserver } from '../core/observers';
-import type { SbbOverlayState } from '../core/overlay';
-import { applyInertMechanism, removeInertMechanism } from '../core/overlay';
+import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
+import { LanguageController, NamedSlotStateController } from '../../core/common-behaviors';
+import {
+  ScrollHandler,
+  toggleDatasetEntry,
+  isValidAttribute,
+  hostContext,
+  isBreakpoint,
+} from '../../core/dom';
+import { EventEmitter } from '../../core/eventing';
+import { i18nDialog } from '../../core/i18n';
+import { AgnosticResizeObserver } from '../../core/observers';
+import type { SbbOverlayState } from '../../core/overlay';
+import { applyInertMechanism, removeInertMechanism } from '../../core/overlay';
 import type { SbbDialogActionsElement } from '../dialog-actions';
 import type { SbbDialogTitleElement } from '../dialog-title';
 
@@ -19,7 +24,7 @@ import style from './dialog.scss?lit&inline';
 
 import '../button/secondary-button';
 import '../button/transparent-button';
-import '../screen-reader-only';
+import '../screenreader-only';
 import '../title';
 
 // A global collection of existing dialogs
@@ -36,12 +41,12 @@ let nextId = 0;
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
  * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-dialog` is closed.
- * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
  */
 @customElement('sbb-dialog')
-export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
+export class SbbDialogElement extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     willOpen: 'willOpen',
@@ -55,6 +60,11 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
    */
   @property({ attribute: 'backdrop-action' }) public backdropAction: 'close' | 'none' = 'close';
 
+  /**
+   * Negative coloring variant flag.
+   */
+  @property({ reflect: true, type: Boolean }) public negative = false;
+
   /**
    * This will be forwarded as aria-label to the relevant nested element.
    */
@@ -105,8 +115,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
   private _openDialogController!: AbortController;
-  private _focusHandler = new SbbFocusHandler();
-  private _scrollHandler = new SbbScrollHandler();
+  private _focusHandler = new FocusHandler();
+  private _scrollHandler = new ScrollHandler();
   private _returnValue: any;
   private _isPointerDownEventOnDialog: boolean = false;
   private _overflows: boolean = false;
@@ -423,15 +433,15 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     const hideOnScroll = this._dialogTitleElement.hideOnScroll;
     const hideHeader =
       !!hideOnScroll && isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
-    this.toggleAttribute('data-hide-header', !hideHeader ? false : value);
-    this._dialogTitleElement.toggleAttribute('data-hide-header', !hideHeader ? false : value);
+    toggleDatasetEntry(this, 'hideHeader', !hideHeader ? false : value);
+    toggleDatasetEntry(this._dialogTitleElement, 'hideHeader', !hideHeader ? false : value);
   }
 
   private _setOverflowsDataAttribute(): void {
-    this.toggleAttribute('data-overflows', this._overflows);
-    this._dialogTitleElement.toggleAttribute('data-overflows', this._overflows);
+    toggleDatasetEntry(this, 'overflows', this._overflows);
+    toggleDatasetEntry(this._dialogTitleElement, 'overflows', this._overflows);
     if (this._dialogActionsElement) {
-      this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
+      toggleDatasetEntry(this._dialogActionsElement!, 'overflows', this._overflows);
     }
   }
 
@@ -454,10 +464,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           </div>
         </div>
       </div>
-      <sbb-screen-reader-only
+      <sbb-screenreader-only
         aria-live="polite"
         ${ref((el?: Element) => (this._ariaLiveRef = el as HTMLElement))}
-      ></sbb-screen-reader-only>
+      ></sbb-screenreader-only>
     `;
   }
 }
diff --git a/src/components/dialog/dialog/index.ts b/src/components/dialog/dialog/index.ts
new file mode 100644
index 0000000000..20da8e550a
--- /dev/null
+++ b/src/components/dialog/dialog/index.ts
@@ -0,0 +1 @@
+export * from './dialog';
diff --git a/src/components/dialog/readme.md b/src/components/dialog/dialog/readme.md
similarity index 100%
rename from src/components/dialog/readme.md
rename to src/components/dialog/dialog/readme.md
diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts
index 20da8e550a..87640addb8 100644
--- a/src/components/dialog/index.ts
+++ b/src/components/dialog/index.ts
@@ -1 +1,4 @@
 export * from './dialog';
+export * from './dialog-title';
+export * from './dialog-content';
+export * from './dialog-actions';

From 3168915b4e638fd02a1ac25d9d0d6bc2b09ffb45 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 12:06:20 +0100
Subject: [PATCH 27/65] fix: dialog snapshot

---
 .../dialog/__snapshots__/dialog.spec.snap.js  | 44 ++++---------------
 src/components/dialog/dialog/dialog.spec.ts   |  2 +-
 2 files changed, 9 insertions(+), 37 deletions(-)

diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index 612377223f..8eb4910ace 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -8,42 +8,14 @@ snapshots["sbb-dialog renders"] =
     id="sbb-dialog-0"
   >
     <div class="sbb-dialog__wrapper">
-      <div class="sbb-dialog__header">
-        <sbb-title
-          aria-level="1"
-          class="sbb-dialog__title"
-          id="title"
-          level="1"
-          role="heading"
-          visual-level="3"
-        >
-          <slot name="title">
-          </slot>
-        </sbb-title>
-        <sbb-secondary-button
-          aria-label="Close secondary window"
-          class="sbb-dialog__close"
-          data-action=""
-          data-button=""
-          data-sbb-button=""
-          dir="ltr"
-          icon-name="cross-small"
-          role="button"
-          sbb-dialog-close=""
-          size="m"
-          tabindex="0"
-          type="button"
-        >
-        </sbb-secondary-button>
-      </div>
-      <div class="sbb-dialog__content">
-        <slot>
-        </slot>
-      </div>
-      <div class="sbb-dialog__footer">
-        <slot name="action-group">
-        </slot>
-      </div>
+      <slot name="title">
+      </slot>
+      <slot name="content">
+      </slot>
+      <slot name="actions">
+      </slot>
+      <slot>
+      </slot>
     </div>
   </div>
 </div>
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index 058c56364d..e2621a7b65 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -10,7 +10,7 @@ describe(`sbb-dialog`, () => {
     const root = await fixture(html`<sbb-dialog></sbb-dialog>`);
 
     expect(root).dom.to.be.equal(`<sbb-dialog data-state="closed"></sbb-dialog>`);
-    expect(root).shadowDom.to.be.equalSnapshot();
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 
   testA11yTreeSnapshot(html`<sbb-dialog></sbb-dialog>`);

From fd40340fded26e855859244efafee0e2c9e7ce08 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 12:22:19 +0100
Subject: [PATCH 28/65] fix: nested dialogs closing

---
 .../dialog/dialog/__snapshots__/dialog.spec.snap.js   |  2 --
 src/components/dialog/dialog/dialog.e2e.ts            |  2 +-
 src/components/dialog/dialog/dialog.stories.ts        | 11 +++++++++--
 src/components/dialog/dialog/dialog.ts                |  3 +--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index 8eb4910ace..92e6acfec6 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -14,8 +14,6 @@ snapshots["sbb-dialog renders"] =
       </slot>
       <slot name="actions">
       </slot>
-      <slot>
-      </slot>
     </div>
   </div>
 </div>
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index a509905d6f..d7d3a7d630 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -326,7 +326,7 @@ describe('sbb-dialog', () => {
         <sbb-dialog-title>Title</sbb-dialog-title>
         <sbb-dialog-content>Dialog content</sbb-dialog-content>
 
-        <sbb-dialog id="inner-dialog" disable-animation>
+        <sbb-dialog id="inner-dialog" slot="content" disable-animation>
           <sbb-dialog-title>Inner Dialog title</sbb-dialog-title>
           <sbb-dialog-content>Dialog content</sbb-dialog-content>
         </sbb-dialog>
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 5a6e4e4138..8b9441e5fc 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -403,7 +403,7 @@ const NestedTemplate = ({
       >Click the button to open a nested
       dialog.&nbsp;${triggerButton('my-dialog-6')}</sbb-dialog-content
     >
-    <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" ${sbbSpread(args)}>
+    <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" slot="content" ${sbbSpread(args)}>
       ${dialogHeader(
         level,
         titleBackButton,
@@ -411,7 +411,14 @@ const NestedTemplate = ({
         accessibilityCloseLabel,
         accessibilityBackLabel,
       )}
-      <sbb-dialog-content>Nested dialog content.</sbb-dialog-content>
+      <sbb-dialog-content
+        >Nested dialog content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+        anim id est laborum.</sbb-dialog-content
+      >
     </sbb-dialog>
   </sbb-dialog>
 `;
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 97b18c37a8..b4f54dd425 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -349,7 +349,7 @@ export class SbbDialogElement extends LitElement {
       dialogCloseElement.getAttribute('type') === 'submit'
         ? (hostContext('form', dialogCloseElement) as HTMLFormElement)
         : undefined;
-    this.close(closestForm, dialogCloseElement);
+    dialogRefs[dialogRefs.length - 1].close(closestForm, dialogCloseElement);
   }
 
   // Wait for dialog transition to complete.
@@ -460,7 +460,6 @@ export class SbbDialogElement extends LitElement {
             <slot name="title"></slot>
             <slot name="content"></slot>
             <slot name="actions"></slot>
-            <slot></slot>
           </div>
         </div>
       </div>

From f7dc8f1d61ee94ad4025779521a20b6a884ec672 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 12:23:59 +0100
Subject: [PATCH 29/65] refactor: remove e2e tests

---
 .../dialog/dialog-actions/dialog-actions.e2e.ts  | 16 ----------------
 .../dialog/dialog-content/dialog-content.e2e.ts  | 16 ----------------
 2 files changed, 32 deletions(-)
 delete mode 100644 src/components/dialog/dialog-actions/dialog-actions.e2e.ts
 delete mode 100644 src/components/dialog/dialog-content/dialog-content.e2e.ts

diff --git a/src/components/dialog/dialog-actions/dialog-actions.e2e.ts b/src/components/dialog/dialog-actions/dialog-actions.e2e.ts
deleted file mode 100644
index b7ed049612..0000000000
--- a/src/components/dialog/dialog-actions/dialog-actions.e2e.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { assert, fixture } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { SbbDialogActionsElement } from './dialog-actions';
-
-describe('sbb-dialog-actions', () => {
-  let element: SbbDialogActionsElement;
-
-  beforeEach(async () => {
-    element = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
-  });
-
-  it('renders', async () => {
-    assert.instanceOf(element, SbbDialogActionsElement);
-  });
-});
diff --git a/src/components/dialog/dialog-content/dialog-content.e2e.ts b/src/components/dialog/dialog-content/dialog-content.e2e.ts
deleted file mode 100644
index e138e117b9..0000000000
--- a/src/components/dialog/dialog-content/dialog-content.e2e.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { assert, fixture } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { SbbDialogContentElement } from './dialog-content';
-
-describe('sbb-dialog-content', () => {
-  let element: SbbDialogContentElement;
-
-  beforeEach(async () => {
-    element = await fixture(html`<sbb-dialog-content></sbb-dialog-content>`);
-  });
-
-  it('renders', async () => {
-    assert.instanceOf(element, SbbDialogContentElement);
-  });
-});

From 7c12cc57418fd9cbefeba99ec7041de6a5b702f0 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 13:01:11 +0100
Subject: [PATCH 30/65] fix: hideOnScroll setter

---
 src/components/dialog/dialog-title/dialog-title.ts | 3 ++-
 src/components/dialog/dialog/dialog.stories.ts     | 2 +-
 src/components/dialog/dialog/dialog.ts             | 2 --
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 3be9998341..ca827bdfa8 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -55,7 +55,8 @@ export class SbbDialogTitleElement extends SbbTitleElement {
    */
   @property({ attribute: 'hide-on-scroll' })
   public set hideOnScroll(value: false | '' | Breakpoint) {
-    this._hideOnScroll = value === '' ? 'ultra' : value;
+    this._hideOnScroll =
+      value === '' || value === 'true' ? 'ultra' : value === 'false' ? false : value;
   }
   public get hideOnScroll(): false | '' | Breakpoint {
     return this._hideOnScroll;
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 8b9441e5fc..7829f18a3a 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -69,7 +69,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: [false, '', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+  options: [false, true, 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
   table: {
     category: 'Title',
   },
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index b4f54dd425..21daa34eda 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -356,8 +356,6 @@ export class SbbDialogElement extends LitElement {
   // In rare cases it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
   private _onDialogAnimationEnd(event: AnimationEvent): void {
-    console.log('Animation');
-
     if (event.animationName === 'open' && this._state === 'opening') {
       this._state = 'opened';
       this._didOpen.emit();

From 6d71170d56fecf3bbb453676cb0a1f6eb542920c Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 15:30:05 +0100
Subject: [PATCH 31/65] feat: implement type converter for hideOnScroll

---
 src/components/core/dom/breakpoint.ts         |  3 +-
 .../dialog/dialog-title/dialog-title.ts       | 32 +++++++++++++------
 src/components/dialog/dialog-title/readme.md  |  2 +-
 .../dialog/dialog/dialog.stories.ts           |  6 ++--
 4 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/core/dom/breakpoint.ts b/src/components/core/dom/breakpoint.ts
index 1b4160a746..901e44051d 100644
--- a/src/components/core/dom/breakpoint.ts
+++ b/src/components/core/dom/breakpoint.ts
@@ -1,6 +1,7 @@
 import { isBrowser } from './platform';
 
-export type Breakpoint = 'zero' | 'micro' | 'small' | 'medium' | 'wide' | 'large' | 'ultra';
+export const breakpoints = ['zero', 'micro', 'small', 'medium', 'wide', 'large', 'ultra'] as const;
+export type Breakpoint = (typeof breakpoints)[number];
 
 /**
  * Checks whether the document matches a particular media query.
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index ca827bdfa8..f7141580fb 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 import { LanguageController } from '../../core/common-behaviors';
 import type { Breakpoint } from '../../core/dom';
-import { setAttribute } from '../../core/dom';
+import { breakpoints, setAttribute } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
 import type { TitleLevel } from '../../title';
@@ -53,15 +53,27 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   /**
    * Whether to hide the title up to a certain breakpoint.
    */
-  @property({ attribute: 'hide-on-scroll' })
-  public set hideOnScroll(value: false | '' | Breakpoint) {
-    this._hideOnScroll =
-      value === '' || value === 'true' ? 'ultra' : value === 'false' ? false : value;
-  }
-  public get hideOnScroll(): false | '' | Breakpoint {
-    return this._hideOnScroll;
-  }
-  private _hideOnScroll: false | '' | Breakpoint = false;
+  @property({
+    attribute: 'hide-on-scroll',
+    converter: (value) => {
+      if (value === 'true' || value == '') {
+        return 'ultra';
+      }
+
+      if (value === 'false') {
+        return false;
+      }
+
+      const isBreakpointValue = (x: any): x is Breakpoint => breakpoints.includes(x);
+
+      if (isBreakpointValue(value)) {
+        return value;
+      } else {
+        return false;
+      }
+    },
+  })
+  public hideOnScroll: false | Breakpoint = false;
 
   private _backClick: EventEmitter<any> = new EventEmitter(
     this,
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 78a41f64a6..e42cfc0d48 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -51,7 +51,7 @@ The `sbb-dialog-title` is a component . . .
 | `titleBackButton`         | `title-back-button`         | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
 | `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
-| `hideOnScroll`            | `hide-on-scroll`            | public  | `false \| '' \| Breakpoint`  | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
+| `hideOnScroll`            | `hide-on-scroll`            | public  | `false \| Breakpoint`        | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
 | `level`                   | `level`                     | public  | `TitleLevel \| undefined`    | `'1'`   | Title level                                                                                                                                                                                    |
 | `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
 | `negative`                | `negative`                  | public  | `boolean \| undefined`       | `false` | Choose negative variant                                                                                                                                                                        |
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 7829f18a3a..e60b028f58 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -16,7 +16,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread, type Breakpoint } from '../../core/dom';
 import sampleImages from '../../core/images';
 import { SbbDialogTitleElement } from '../dialog-title';
 
@@ -69,7 +69,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: [false, true, 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+  options: [false, 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
   table: {
     category: 'Title',
   },
@@ -209,7 +209,7 @@ const textBlockStyle: Args = {
 const dialogHeader = (
   level: number,
   titleBackButton: boolean,
-  hideOnScroll: any,
+  hideOnScroll: false | Breakpoint,
   accessibilityCloseLabel: string,
   accessibilityBackLabel: string,
 ): TemplateResult => html`

From 37716d12d616a6cb761179c409f6f4892ecfc114 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 17:00:29 +0100
Subject: [PATCH 32/65] feat: show dialog title with focus visible within

---
 src/components/dialog/dialog-title/dialog-title.scss | 4 ++--
 src/components/dialog/dialog-title/dialog-title.ts   | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
index 318671873d..365fa6b20e 100644
--- a/src/components/dialog/dialog-title/dialog-title.scss
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -39,7 +39,7 @@
   }
 
   // Apply show/hide animation unless it has a visible focus within.
-  &:not([data-has-visible-focus-within]:focus-within) {
+  :host(:not([data-has-visible-focus-within])) & {
     transform: translateY(var(--sbb-dialog-header-margin-block-start));
     transition: {
       property: box-shadow, transform;
@@ -48,7 +48,7 @@
     }
   }
 
-  &[data-has-visible-focus-within]:focus-within,
+  :host([data-overflows][data-has-visible-focus-within]) &,
   :host([data-overflows]:not([negative], [data-hide-header])) & {
     @include sbb.shadow-level-9-soft;
   }
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index f7141580fb..ea63a5aebd 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -2,6 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import { FocusVisibleWithinController } from '../../core/a11y';
 import { LanguageController } from '../../core/common-behaviors';
 import type { Breakpoint } from '../../core/dom';
 import { breakpoints, setAttribute } from '../../core/dom';
@@ -81,6 +82,11 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   );
   private _language = new LanguageController(this);
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    new FocusVisibleWithinController(this);
+  }
+
   protected override render(): TemplateResult {
     setAttribute(this, 'slot', 'title');
 

From 504fe07f45e1ebdd6b0891ef5612ad640e4e206e Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 17:07:25 +0100
Subject: [PATCH 33/65] fix: sync negative state earlier

---
 src/components/dialog/dialog/dialog.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 21daa34eda..20d5390dc4 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -245,6 +245,11 @@ export class SbbDialogElement extends LitElement {
     }
   }
 
+  protected override firstUpdated(): void {
+    this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
+    this._syncNegative();
+  }
+
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('negative')) {
       this._syncNegative();

From aa0fc550b7f0c393ee492bba9ec69754b9fb269a Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 8 Feb 2024 18:19:39 +0100
Subject: [PATCH 34/65] docs: add documentation

---
 .../dialog/dialog-actions/readme.md           | 45 +++---------------
 .../dialog/dialog-content/readme.md           | 41 ++--------------
 src/components/dialog/dialog-title/readme.md  | 41 +++++-----------
 .../dialog/dialog/dialog.stories.ts           | 22 ++++-----
 src/components/dialog/dialog/readme.md        | 44 ++++++++---------
 .../pages/home/home--logged-in.stories.ts     | 47 +++++++++++--------
 6 files changed, 80 insertions(+), 160 deletions(-)

diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index 2b78fce9ef..da03cf27f0 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -1,45 +1,14 @@
-> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.<br>
-> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).<br>
-> For the examples, use triple backticks with file extension (` ```html <code here>``` `).<br>
-> The following list of paragraphs is only suggested; remove, create and adapt as needed.
-
-The `sbb-dialog-actions` is a component . . .
+The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/components-sbb-action-group--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a footer with an action group.
 
 ```html
-<sbb-dialog-actions></sbb-dialog-actions>
+<sbb-dialog-action>
+    <sbb-link sbb-dialog-close>Link</sbb-link>
+    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
+    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+</sbb-dialog-actions>
 ```
 
-## Slots
-
-> Describe slot naming and usage and provide an example of slotted content.
-
-## States
-
-> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
-
-## Style
-
-> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
-
-## Interactions
-
-> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
-
-## Events
-
-> Describe events triggered by the component and possibly how to get information from the payload.
-
-## Keyboard interaction
-
-> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
-
-| Keyboard       | Action        |
-| -------------- | ------------- |
-| <kbd>Key</kbd> | What it does. |
-
-## Accessibility
-
-> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+It has an implicit slot name: `actions`.
 
 <!-- Auto Generated Below -->
 
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
index e962207d0e..bce6de40fa 100644
--- a/src/components/dialog/dialog-content/readme.md
+++ b/src/components/dialog/dialog-content/readme.md
@@ -1,45 +1,10 @@
-> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.<br>
-> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).<br>
-> For the examples, use triple backticks with file extension (` ```html <code here>``` `).<br>
-> The following list of paragraphs is only suggested; remove, create and adapt as needed.
-
-The `sbb-dialog-content` is a component . . .
+Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a content inside the dialog.
 
 ```html
-<sbb-dialog-content></sbb-dialog-content>
+<sbb-dialog-content>Dialog content.</sbb-dialog-content>
 ```
 
-## Slots
-
-> Describe slot naming and usage and provide an example of slotted content.
-
-## States
-
-> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
-
-## Style
-
-> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
-
-## Interactions
-
-> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
-
-## Events
-
-> Describe events triggered by the component and possibly how to get information from the payload.
-
-## Keyboard interaction
-
-> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
-
-| Keyboard       | Action        |
-| -------------- | ------------- |
-| <kbd>Key</kbd> | What it does. |
-
-## Accessibility
-
-> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+It has an implicit slot name: `content`.
 
 <!-- Auto Generated Below -->
 
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index e42cfc0d48..c09df2ab22 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -1,45 +1,28 @@
-> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.<br>
-> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).<br>
-> For the examples, use triple backticks with file extension (` ```html <code here>``` `).<br>
-> The following list of paragraphs is only suggested; remove, create and adapt as needed.
-
-The `sbb-dialog-title` is a component . . .
+The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-title--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a header in the dialog with a title, a close button and an optional back button.
 
 ```html
-<sbb-dialog-title></sbb-dialog-title>
+<sbb-dialog-title
+  title-back-button
+  hide-on-scroll="small"
+  accessibility-close-label="Close button"
+  accessibility-back-label="Back button"
+  >A describing title of the dialog</sbb-dialog-title
+>
 ```
 
-## Slots
-
-> Describe slot naming and usage and provide an example of slotted content.
+It has an implicit slot name: `title`.
 
 ## States
 
-> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
-
-## Style
-
-> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
+The title can have a `negative` state which is automatically synchronised with the negative state of the dialog. In addition, the title can be hidden when scrolling down the content, to provide more space for reading the content itself; this can be done thanks to the `hide-on-scroll` property, which can determine whether to hide the title and up to which breakpoint.
 
 ## Interactions
 
-> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
+A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `title-back-button` (default is `false`).
 
 ## Events
 
-> Describe events triggered by the component and possibly how to get information from the payload.
-
-## Keyboard interaction
-
-> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
-
-| Keyboard       | Action        |
-| -------------- | ------------- |
-| <kbd>Key</kbd> | What it does. |
-
-## Accessibility
-
-> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+If a back button is displayd it emits a `requestBackAction` event on click.
 
 <!-- Auto Generated Below -->
 
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index e60b028f58..434f937df2 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -136,7 +136,7 @@ const basicArgTypes: ArgTypes = {
 const basicArgs: Args = {
   level: level.options[0],
   titleBackButton: true,
-  hideOnScroll: hideOnScroll.options[1],
+  hideOnScroll: hideOnScroll.options[7],
   accessibilityCloseLabel: 'Close dialog',
   accessibilityBackLabel: 'Go back',
   negative: false,
@@ -161,7 +161,7 @@ const triggerButton = (dialogId: string): TemplateResult => html`
   </sbb-button>
 `;
 
-const actionGroup = (negative: boolean): TemplateResult => html`
+const dialogActions = (negative: boolean): TemplateResult => html`
   <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
     <sbb-link
       align-self="start"
@@ -206,7 +206,7 @@ const textBlockStyle: Args = {
   borderRadius: 'var(--sbb-border-radius-4x)',
 };
 
-const dialogHeader = (
+const dialogTitle = (
   level: number,
   titleBackButton: boolean,
   hideOnScroll: false | Breakpoint,
@@ -242,7 +242,7 @@ const DefaultTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
-    ${dialogHeader(
+    ${dialogTitle(
       level,
       titleBackButton,
       hideOnScroll,
@@ -252,7 +252,7 @@ const DefaultTemplate = ({
     <sbb-dialog-content>
       <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
     </sbb-dialog-content>
-    ${actionGroup(args.negative)}
+    ${dialogActions(args.negative)}
   </sbb-dialog>
 `;
 
@@ -266,7 +266,7 @@ const LongContentTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-2')}
   <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
-    ${dialogHeader(
+    ${dialogTitle(
       level,
       titleBackButton,
       hideOnScroll,
@@ -291,7 +291,7 @@ const LongContentTemplate = ({
       other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of
       the Rings: The Fellowship of the Ring, “Many Meetings” ${textBlock()}
     </sbb-dialog-content>
-    ${actionGroup(args.negative)}
+    ${dialogActions(args.negative)}
   </sbb-dialog>
 `;
 
@@ -323,7 +323,7 @@ const FormTemplate = ({
     }}
     ${sbbSpread(args)}
   >
-    ${dialogHeader(
+    ${dialogTitle(
       level,
       titleBackButton,
       hideOnScroll,
@@ -364,7 +364,7 @@ const NoFooterTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-4')}
   <sbb-dialog data-testid="dialog" id="my-dialog-4" ${sbbSpread(args)}>
-    ${dialogHeader(
+    ${dialogTitle(
       level,
       titleBackButton,
       hideOnScroll,
@@ -392,7 +392,7 @@ const NestedTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-5')}
   <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
-    ${dialogHeader(
+    ${dialogTitle(
       level,
       titleBackButton,
       hideOnScroll,
@@ -404,7 +404,7 @@ const NestedTemplate = ({
       dialog.&nbsp;${triggerButton('my-dialog-6')}</sbb-dialog-content
     >
     <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" slot="content" ${sbbSpread(args)}>
-      ${dialogHeader(
+      ${dialogTitle(
         level,
         titleBackButton,
         hideOnScroll,
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 83e3329432..822c4cafa3 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -4,38 +4,34 @@ It offers the following features:
 - creates a backdrop for disabling interaction below the modal;
 - disables scrolling of the page content while open;
 - manages focus properly by setting it on the first focusable element;
-- can have a header and a footer, both of which are optional;
-- can host a [sbb-action-group](/docs/components-sbb-action-group--docs) component in the footer;
+- can host a [sbb-dialog-actions](/docs/components-sbb-dialog-actions--docs) component in the footer;
 - has a close button, which is always visible;
 - can display a back button next to the title;
 - adds the appropriate ARIA roles automatically.
 
 ```html
-<sbb-dialog> Dialog content. </sbb-dialog>
+<sbb-dialog>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
 ```
 
 ## Slots
 
-The content is projected in an unnamed slot, while the dialog's title can be provided via the `titleContent` property or via slot `name="title"`.
-It's also possible to display buttons in the component's footer using the `action-group` slot with the `sbb-action-group` component.
-
-**NOTE**:
+There are three slots: `title`, `content` and `actions`, which can respectively be used to provide an `sbb-dialog-title`, `sbb-dialog-content` and an `sbb-dialog-actions`.
 
-- The component will automatically set size `m` on slotted `sbb-action-group`;
-- If the title is not present, the footer will not be displayed even if provided;
-- If the title is not present, the dialog will be displayed in fullscreen mode with the close button in the content section along with the back button
-  (if visible, see [next paragraph](#interactions)).
+**NOTE:**
+It's not necessary to set the slots explicitly on the dialog's inner components, as they already have an implicit slot name.
 
 ```html
-<sbb-dialog title-content="Title"> Dialog content. </sbb-dialog>
-
 <sbb-dialog>
-  <span slot="title"> My dialog title </span>
-  Dialog content.
-  <sbb-action-group slot="action-group">
-    <sbb-button sbb-dialog-close>Abort</sbb-button>
-    <sbb-button>Confirm</sbb-button>
-  </sbb-action-group>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-action>
+    <sbb-link sbb-dialog-close>Link</sbb-link>
+    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
+    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+  </sbb-dialog-actions>
 </sbb-dialog>
 ```
 
@@ -47,9 +43,10 @@ whether it has been opened by click or keyboard, so that the focus can be better
 
 ```html
 <sbb-button label="Open dialog" click="openDialog(event, 'my-dialog')"></sbb-button>
-<sbb-dialog id="my-dialog" title-content="Title" title-back-button="true">
-  Dialog content.
-  <div slot="action-group">...</div>
+
+<sbb-dialog id="my-dialog">
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 
 <script>
@@ -67,8 +64,7 @@ emit a close event with an optional result as a payload.
 The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the `Esc` key,
 or, if an element within the `sbb-dialog` has the `sbb-dialog-close` attribute, by clicking on it.
 
-You can also set the property `titleBackButton` to display the back button in the title section
-(or content section, if title is omitted) which will emit the event `requestBackAction` when clicked.
+You can also set the property `titleBackButton` on the `sbb-dialog-title` component to display the back button in the title section which will emit the event `requestBackAction` when clicked.
 
 ## Style
 
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index f8e825c8e0..53081978a6 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -189,24 +189,28 @@ const Template = (args: Args): TemplateResult => html`
             All purchased tickets
           </sbb-secondary-button>
 
-          <sbb-dialog id="my-dialog" title-content="My Dialog" title-back-button>
-            <p style="margin-top: 0;">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </p>
+          <sbb-dialog id="my-dialog" title-content="My Dialog">
+            <sbb-dialog-title title-back-button>My Dialog</sbb-dialog-title>
 
-            <sbb-secondary-button
-              size="m"
-              @click=${() =>
-                (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()}
-            >
-              Open stacked dialog
-            </sbb-secondary-button>
+            <sbb-dialog-content>
+              <p style="margin-top: 0;">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                pariatur.
+              </p>
+              <sbb-button
+                variant="secondary"
+                size="m"
+                @click=${() =>
+                  (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()}
+              >
+                Open stacked dialog
+              </sbb-button>
+            </sbb-dialog-content>
 
-            <sbb-action-group
-              slot="action-group"
+            <sbb-dialog-actions
               align-group="stretch"
               orientation="vertical"
               horizontal-from="medium"
@@ -222,12 +226,15 @@ const Template = (args: Args): TemplateResult => html`
               </sbb-block-link>
               <sbb-secondary-button size="m" sbb-dialog-close> Cancel </sbb-secondary-button>
               <sbb-button size="m" sbb-dialog-close> Button </sbb-button>
-            </sbb-action-group>
+            </sbb-dialog-actions>
           </sbb-dialog>
 
-          <sbb-dialog id="my-stacked-dialog" title-content="Stacked Dialog" title-back-button>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua.
+          <sbb-dialog id="my-stacked-dialog">
+            <sbb-dialog-title title-back-button>Stacked Dialog</sbb-dialog-title>
+            <sbb-dialog-content>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </sbb-dialog-content>
           </sbb-dialog>
         </div>
       </div>

From 49ee57901275efd1be5a2f8b753dd1c5bd46ad82 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 20 Feb 2024 05:21:43 +0100
Subject: [PATCH 35/65] fix: review

---
 .../__snapshots__/dialog-actions.spec.snap.js | 16 +++++
 .../dialog-actions/dialog-actions.spec.ts     | 11 +--
 .../__snapshots__/dialog-title.spec.snap.js   | 29 ++++++++
 .../dialog/dialog-title/dialog-title.e2e.ts   |  2 +-
 .../dialog/dialog-title/dialog-title.scss     |  5 --
 .../dialog/dialog-title/dialog-title.spec.ts  | 20 +-----
 .../dialog-title/dialog-title.stories.ts      |  8 +--
 .../dialog/dialog-title/dialog-title.ts       | 35 +++------
 src/components/dialog/dialog-title/readme.md  | 24 +++----
 .../dialog/dialog/dialog.stories.ts           | 71 ++++++-------------
 src/components/dialog/dialog/dialog.ts        |  5 +-
 src/components/dialog/dialog/readme.md        |  2 +-
 .../pages/home/home--logged-in.stories.ts     |  4 +-
 13 files changed, 101 insertions(+), 131 deletions(-)
 create mode 100644 src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
 create mode 100644 src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js

diff --git a/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
new file mode 100644
index 0000000000..edd9dda0e4
--- /dev/null
+++ b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
@@ -0,0 +1,16 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog-actions renders"] = 
+`<sbb-dialog-actions
+  align-group="start"
+  button-size="l"
+  horizontal-from="medium"
+  link-size="m"
+  orientation="horizontal"
+  slot="actions"
+>
+</sbb-dialog-actions>
+`;
+/* end snapshot sbb-dialog-actions renders */
+
diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
index bd2a5261b3..bd45db065e 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -6,16 +6,7 @@ describe('sbb-dialog-actions', () => {
   it('renders', async () => {
     const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
 
-    expect(root).dom.to.be.equal(`
-      <sbb-dialog-actions
-        align-group="start"
-        button-size="l"
-        horizontal-from="medium"
-        link-size="m"
-        orientation="horizontal"
-        slot="actions"
-      ></sbb-dialog-actions>
-    `);
+    await expect(root).dom.to.equalSnapshot();
 
     expect(root).shadowDom.to.be.equal(`
       <div class="sbb-dialog-actions">
diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
new file mode 100644
index 0000000000..3bef4cc623
--- /dev/null
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -0,0 +1,29 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog-title renders"] = 
+`<div class="sbb-dialog__header">
+  <h1
+    class="sbb-title"
+    role="presentation"
+  >
+    <slot>
+    </slot>
+  </h1>
+  <sbb-button
+    aria-label="Close secondary window"
+    class="sbb-dialog__close"
+    dir="ltr"
+    icon-name="cross-small"
+    role="button"
+    sbb-dialog-close=""
+    size="m"
+    tabindex="0"
+    type="button"
+    variant="secondary"
+  >
+  </sbb-button>
+</div>
+`;
+/* end snapshot sbb-dialog-title renders */
+
diff --git a/src/components/dialog/dialog-title/dialog-title.e2e.ts b/src/components/dialog/dialog-title/dialog-title.e2e.ts
index b2945f4610..0e93721218 100644
--- a/src/components/dialog/dialog-title/dialog-title.e2e.ts
+++ b/src/components/dialog/dialog-title/dialog-title.e2e.ts
@@ -9,7 +9,7 @@ describe('sbb-dialog-title', () => {
   let element: SbbDialogTitleElement;
 
   beforeEach(async () => {
-    element = await fixture(html`<sbb-dialog-title title-back-button>Title</sbb-dialog-title>`);
+    element = await fixture(html`<sbb-dialog-title back-button>Title</sbb-dialog-title>`);
   });
 
   it('renders', async () => {
diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
index 365fa6b20e..eef7a627dc 100644
--- a/src/components/dialog/dialog-title/dialog-title.scss
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -25,7 +25,6 @@
 
 .sbb-dialog__header {
   display: flex;
-  pointer-events: none;
   gap: var(--sbb-spacing-fixed-6x);
   align-items: start;
   justify-content: space-between;
@@ -34,10 +33,6 @@
   background-color: var(--sbb-dialog-background-color);
   z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
 
-  * {
-    pointer-events: all;
-  }
-
   // Apply show/hide animation unless it has a visible focus within.
   :host(:not([data-has-visible-focus-within])) & {
     transform: translateY(var(--sbb-dialog-header-margin-block-start));
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 0517d6af6f..7f1fcb8286 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -15,24 +15,6 @@ describe('sbb-dialog-title', () => {
        visual-level="3">Title</sbb-dialog-title>
     `);
 
-    expect(root).shadowDom.to.be.equal(`
-      <div class="sbb-dialog__header">
-        <h1 class="sbb-title" role="presentation">
-          <slot></slot>
-        </h1>
-        <sbb-button
-          aria-label="Close secondary window"
-          class="sbb-dialog__close"
-          dir="ltr"
-          icon-name="cross-small"
-          role="button"
-          sbb-dialog-close=""
-          size="m"
-          tabindex="0"
-          type="button"
-          variant="secondary"
-        ></sbb-button>
-      </div>
-    `);
+    await expect(root).shadowDom.to.equalSnapshot();
   });
 });
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index 794df0760a..b09525ee5f 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -16,7 +16,7 @@ const level: InputType = {
   options: [1, 2, 3, 4, 5, 6],
 };
 
-const titleBackButton: InputType = {
+const backButton: InputType = {
   control: {
     type: 'boolean',
   },
@@ -26,7 +26,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: [false, '', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+  options: ['zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
 };
 
 const accessibilityCloseLabel: InputType = {
@@ -49,7 +49,7 @@ const accessibilityBackLabel: InputType = {
 
 const defaultArgTypes: ArgTypes = {
   level,
-  'title-back-button': titleBackButton,
+  'back-button': backButton,
   'hide-on-scroll': hideOnScroll,
   'accessibility-close-label': accessibilityCloseLabel,
   'accessibility-back-label': accessibilityBackLabel,
@@ -57,7 +57,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   level: level.options[0],
-  'title-back-button': true,
+  'back-button': true,
   'hide-on-scroll': hideOnScroll.options[0],
   'accessibility-close-label': 'Close dialog',
   'accessibility-back-label': 'Go back',
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index ea63a5aebd..43fee58175 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -5,7 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { FocusVisibleWithinController } from '../../core/a11y';
 import { LanguageController } from '../../core/common-behaviors';
 import type { Breakpoint } from '../../core/dom';
-import { breakpoints, setAttribute } from '../../core/dom';
+import { setAttribute } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
 import type { TitleLevel } from '../../title';
@@ -35,7 +35,7 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   /**
    * Whether a back button is displayed next to the title.
    */
-  @property({ attribute: 'title-back-button', type: Boolean }) public titleBackButton = false;
+  @property({ attribute: 'back-button', type: Boolean }) public backButton = false;
 
   /**
    * This will be forwarded as aria-label to the close button element.
@@ -54,27 +54,14 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   /**
    * Whether to hide the title up to a certain breakpoint.
    */
-  @property({
-    attribute: 'hide-on-scroll',
-    converter: (value) => {
-      if (value === 'true' || value == '') {
-        return 'ultra';
-      }
-
-      if (value === 'false') {
-        return false;
-      }
-
-      const isBreakpointValue = (x: any): x is Breakpoint => breakpoints.includes(x);
-
-      if (isBreakpointValue(value)) {
-        return value;
-      } else {
-        return false;
-      }
-    },
-  })
-  public hideOnScroll: false | Breakpoint = false;
+  @property({ attribute: 'hide-on-scroll' })
+  public set hideOnScroll(value: '' | Breakpoint | undefined) {
+    this._hideOnScroll = value === '' ? 'ultra' : value;
+  }
+  public get hideOnScroll(): '' | Breakpoint | undefined {
+    return this._hideOnScroll;
+  }
+  private _hideOnScroll: '' | Breakpoint | undefined;
 
   private _backClick: EventEmitter<any> = new EventEmitter(
     this,
@@ -118,7 +105,7 @@ export class SbbDialogTitleElement extends SbbTitleElement {
 
     return html`
       <div class="sbb-dialog__header">
-        ${this.titleBackButton ? backButton : nothing} ${super.render()} ${closeButton}
+        ${this.backButton ? backButton : nothing} ${super.render()} ${closeButton}
       </div>
     `;
   }
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index c09df2ab22..4f75b47dfd 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -2,7 +2,7 @@ The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-ti
 
 ```html
 <sbb-dialog-title
-  title-back-button
+  back-button
   hide-on-scroll="small"
   accessibility-close-label="Close button"
   accessibility-back-label="Back button"
@@ -18,7 +18,7 @@ The title can have a `negative` state which is automatically synchronised with t
 
 ## Interactions
 
-A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `title-back-button` (default is `false`).
+A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `back-button` (default is `false`).
 
 ## Events
 
@@ -28,16 +28,16 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 
 ## Properties
 
-| Name                      | Attribute                   | Privacy | Type                         | Default | Description                                                                                                                                                                                    |
-| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`    | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
-| `titleBackButton`         | `title-back-button`         | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
-| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
-| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
-| `hideOnScroll`            | `hide-on-scroll`            | public  | `false \| Breakpoint`        | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
-| `level`                   | `level`                     | public  | `TitleLevel \| undefined`    | `'1'`   | Title level                                                                                                                                                                                    |
-| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
-| `negative`                | `negative`                  | public  | `boolean \| undefined`       | `false` | Choose negative variant                                                                                                                                                                        |
+| Name                      | Attribute                   | Privacy | Type                            | Default | Description                                                                                                                                                                                    |
+| ------------------------- | --------------------------- | ------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`       | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
+| `backButton`              | `back-button`               | public  | `boolean`                       | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
+| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
+| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
+| `hideOnScroll`            | `hide-on-scroll`            | public  | `'' \| Breakpoint \| undefined` |         | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
+| `level`                   | `level`                     | public  | `TitleLevel \| undefined`       | `'1'`   | Title level                                                                                                                                                                                    |
+| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`          |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
+| `negative`                | `negative`                  | public  | `boolean \| undefined`          | `false` | Choose negative variant                                                                                                                                                                        |
 
 ## Events
 
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 434f937df2..3cd585016a 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -18,6 +18,7 @@ import { waitForComponentsReady } from '../../../storybook/testing/wait-for-comp
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
 import { sbbSpread, type Breakpoint } from '../../core/dom';
 import sampleImages from '../../core/images';
+import type { TitleLevel } from '../../title';
 import { SbbDialogTitleElement } from '../dialog-title';
 
 import { SbbDialogElement } from './dialog';
@@ -56,7 +57,7 @@ const level: InputType = {
   },
 };
 
-const titleBackButton: InputType = {
+const backButton: InputType = {
   control: {
     type: 'boolean',
   },
@@ -69,7 +70,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: [false, 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+  options: ['zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
   table: {
     category: 'Title',
   },
@@ -123,7 +124,7 @@ const backdropAction: InputType = {
 
 const basicArgTypes: ArgTypes = {
   level,
-  titleBackButton,
+  backButton,
   hideOnScroll,
   accessibilityCloseLabel,
   accessibilityBackLabel,
@@ -135,8 +136,8 @@ const basicArgTypes: ArgTypes = {
 
 const basicArgs: Args = {
   level: level.options[0],
-  titleBackButton: true,
-  hideOnScroll: hideOnScroll.options[7],
+  backButton: true,
+  hideOnScroll: hideOnScroll.options[6],
   accessibilityCloseLabel: 'Close dialog',
   accessibilityBackLabel: 'Go back',
   negative: false,
@@ -207,15 +208,15 @@ const textBlockStyle: Args = {
 };
 
 const dialogTitle = (
-  level: number,
-  titleBackButton: boolean,
-  hideOnScroll: false | Breakpoint,
+  level: TitleLevel,
+  backButton: boolean,
+  hideOnScroll: '' | Breakpoint,
   accessibilityCloseLabel: string,
   accessibilityBackLabel: string,
 ): TemplateResult => html`
   <sbb-dialog-title
     level=${level}
-    ?title-back-button=${titleBackButton}
+    ?back-button=${backButton}
     hide-on-scroll=${hideOnScroll}
     accessibility-close-label=${accessibilityCloseLabel}
     accessibility-back-label=${accessibilityBackLabel}
@@ -234,7 +235,7 @@ const textBlock = (): TemplateResult => html`
 
 const DefaultTemplate = ({
   level,
-  titleBackButton,
+  backButton,
   hideOnScroll,
   accessibilityCloseLabel,
   accessibilityBackLabel,
@@ -242,13 +243,7 @@ const DefaultTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
-    ${dialogTitle(
-      level,
-      titleBackButton,
-      hideOnScroll,
-      accessibilityCloseLabel,
-      accessibilityBackLabel,
-    )}
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
     <sbb-dialog-content>
       <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
     </sbb-dialog-content>
@@ -258,7 +253,7 @@ const DefaultTemplate = ({
 
 const LongContentTemplate = ({
   level,
-  titleBackButton,
+  backButton,
   hideOnScroll,
   accessibilityCloseLabel,
   accessibilityBackLabel,
@@ -266,13 +261,7 @@ const LongContentTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-2')}
   <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
-    ${dialogTitle(
-      level,
-      titleBackButton,
-      hideOnScroll,
-      accessibilityCloseLabel,
-      accessibilityBackLabel,
-    )}
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
     <sbb-dialog-content>
       Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
       like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
@@ -297,7 +286,7 @@ const LongContentTemplate = ({
 
 const FormTemplate = ({
   level,
-  titleBackButton,
+  backButton,
   hideOnScroll,
   accessibilityCloseLabel,
   accessibilityBackLabel,
@@ -323,13 +312,7 @@ const FormTemplate = ({
     }}
     ${sbbSpread(args)}
   >
-    ${dialogTitle(
-      level,
-      titleBackButton,
-      hideOnScroll,
-      accessibilityCloseLabel,
-      accessibilityBackLabel,
-    )}
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
     <sbb-dialog-content>
       <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
         Submit the form below to close the dialog box using the
@@ -356,7 +339,7 @@ const FormTemplate = ({
 
 const NoFooterTemplate = ({
   level,
-  titleBackButton,
+  backButton,
   hideOnScroll,
   accessibilityCloseLabel,
   accessibilityBackLabel,
@@ -364,13 +347,7 @@ const NoFooterTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-4')}
   <sbb-dialog data-testid="dialog" id="my-dialog-4" ${sbbSpread(args)}>
-    ${dialogTitle(
-      level,
-      titleBackButton,
-      hideOnScroll,
-      accessibilityCloseLabel,
-      accessibilityBackLabel,
-    )}
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
     <sbb-dialog-content>
       <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
         “What really knocks me out is a book that, when you're all done reading it, you wish the
@@ -384,7 +361,7 @@ const NoFooterTemplate = ({
 
 const NestedTemplate = ({
   level,
-  titleBackButton,
+  backButton,
   hideOnScroll,
   accessibilityCloseLabel,
   accessibilityBackLabel,
@@ -392,13 +369,7 @@ const NestedTemplate = ({
 }: Args): TemplateResult => html`
   ${triggerButton('my-dialog-5')}
   <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
-    ${dialogTitle(
-      level,
-      titleBackButton,
-      hideOnScroll,
-      accessibilityCloseLabel,
-      accessibilityBackLabel,
-    )}
+    ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
     <sbb-dialog-content
       >Click the button to open a nested
       dialog.&nbsp;${triggerButton('my-dialog-6')}</sbb-dialog-content
@@ -406,7 +377,7 @@ const NestedTemplate = ({
     <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" slot="content" ${sbbSpread(args)}>
       ${dialogTitle(
         level,
-        titleBackButton,
+        backButton,
         hideOnScroll,
         accessibilityCloseLabel,
         accessibilityBackLabel,
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 20d5390dc4..6e982dd7ef 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
-import { LanguageController, NamedSlotStateController } from '../../core/common-behaviors';
+import { LanguageController } from '../../core/common-behaviors';
 import {
   ScrollHandler,
   toggleDatasetEntry,
@@ -226,8 +226,6 @@ export class SbbDialogElement extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    new NamedSlotStateController(this);
-
     this._state = this._state || 'closed';
     this._dialogController?.abort();
     this._dialogController = new AbortController();
@@ -246,6 +244,7 @@ export class SbbDialogElement extends LitElement {
   }
 
   protected override firstUpdated(): void {
+    this._ariaLiveRef = this.shadowRoot!.querySelector('.sbb-screen-reader-only')!;
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
     this._syncNegative();
   }
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 822c4cafa3..8f85dde5a7 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -64,7 +64,7 @@ emit a close event with an optional result as a payload.
 The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the `Esc` key,
 or, if an element within the `sbb-dialog` has the `sbb-dialog-close` attribute, by clicking on it.
 
-You can also set the property `titleBackButton` on the `sbb-dialog-title` component to display the back button in the title section which will emit the event `requestBackAction` when clicked.
+You can also set the property `backButton` on the `sbb-dialog-title` component to display the back button in the title section which will emit the event `requestBackAction` when clicked.
 
 ## Style
 
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index 53081978a6..e50baec719 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -190,7 +190,7 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-secondary-button>
 
           <sbb-dialog id="my-dialog" title-content="My Dialog">
-            <sbb-dialog-title title-back-button>My Dialog</sbb-dialog-title>
+            <sbb-dialog-title back-button>My Dialog</sbb-dialog-title>
 
             <sbb-dialog-content>
               <p style="margin-top: 0;">
@@ -230,7 +230,7 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-dialog>
 
           <sbb-dialog id="my-stacked-dialog">
-            <sbb-dialog-title title-back-button>Stacked Dialog</sbb-dialog-title>
+            <sbb-dialog-title back-button>Stacked Dialog</sbb-dialog-title>
             <sbb-dialog-content>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua.

From 5ba4f48c8ddb7858744731a8806c69c356861c13 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 20 Feb 2024 05:35:10 +0100
Subject: [PATCH 36/65] fix: rebase

---
 src/components/dialog/dialog-title/readme.md | 2 +-
 src/components/dialog/dialog/dialog.e2e.ts   | 2 +-
 src/components/dialog/dialog/dialog.spec.ts  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 4f75b47dfd..324a851704 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -35,9 +35,9 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
 | `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
 | `hideOnScroll`            | `hide-on-scroll`            | public  | `'' \| Breakpoint \| undefined` |         | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
+| `negative`                | `negative`                  | public  | `boolean`                       | `false` | Negative coloring variant flag.                                                                                                                                                                |
 | `level`                   | `level`                     | public  | `TitleLevel \| undefined`       | `'1'`   | Title level                                                                                                                                                                                    |
 | `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`          |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
-| `negative`                | `negative`                  | public  | `boolean \| undefined`          | `false` | Choose negative variant                                                                                                                                                                        |
 
 ## Events
 
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index d7d3a7d630..b10f34a2bb 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -412,7 +412,7 @@ describe('sbb-dialog with long content', () => {
     await setViewport({ width: 900, height: 300 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-1" disable-animation>
-        <sbb-dialog-title hide-on-scroll>Title</sbb-dialog-title>
+        <sbb-dialog-title hide-on-scroll="">Title</sbb-dialog-title>
         <sbb-dialog-content>
           Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
           face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index e2621a7b65..3e903e07dd 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 
 import './dialog';
 

From a864bbc652e520fc4a0162d04b6709c3187d3d65 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 20 Feb 2024 05:46:34 +0100
Subject: [PATCH 37/65] docs: improve documentation

---
 .../dialog/dialog-actions/readme.md           | 18 +++++++---
 .../dialog/dialog-content/readme.md           |  4 ++-
 src/components/dialog/dialog-title/readme.md  | 34 ++++++++++++++-----
 src/components/dialog/dialog/readme.md        |  7 ++++
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index da03cf27f0..7d359d3500 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -1,11 +1,13 @@
 The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/components-sbb-action-group--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a footer with an action group.
 
 ```html
-<sbb-dialog-action>
-    <sbb-link sbb-dialog-close>Link</sbb-link>
-    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
-    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
-</sbb-dialog-actions>
+<sbb-dialog>
+    <sbb-dialog-action>
+        <sbb-link sbb-dialog-close>Link</sbb-link>
+        <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
+        <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+    </sbb-dialog-actions>
+</sbb-dialog>
 ```
 
 It has an implicit slot name: `actions`.
@@ -21,3 +23,9 @@ It has an implicit slot name: `actions`.
 | `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                    |
 | `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
 | `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
+
+## Slots
+
+| Name | Description                                                                                |
+| ---- | ------------------------------------------------------------------------------------------ |
+|      | Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`. |
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
index bce6de40fa..468ec6086b 100644
--- a/src/components/dialog/dialog-content/readme.md
+++ b/src/components/dialog/dialog-content/readme.md
@@ -1,7 +1,9 @@
 Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a content inside the dialog.
 
 ```html
-<sbb-dialog-content>Dialog content.</sbb-dialog-content>
+<sbb-dialog>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
 ```
 
 It has an implicit slot name: `content`.
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 324a851704..6f69c614fc 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -1,25 +1,37 @@
 The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-title--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a header in the dialog with a title, a close button and an optional back button.
 
 ```html
-<sbb-dialog-title
-  back-button
-  hide-on-scroll="small"
-  accessibility-close-label="Close button"
-  accessibility-back-label="Back button"
-  >A describing title of the dialog</sbb-dialog-title
->
+<sbb-dialog>
+  <sbb-dialog-title accessibility-close-label="Close button" accessibility-back-label="Back button">
+    A describing title of the dialog
+  </sbb-dialog-title>
+</sbb-dialog>
 ```
 
 It has an implicit slot name: `title`.
 
 ## States
 
-The title can have a `negative` state which is automatically synchronised with the negative state of the dialog. In addition, the title can be hidden when scrolling down the content, to provide more space for reading the content itself; this can be done thanks to the `hide-on-scroll` property, which can determine whether to hide the title and up to which breakpoint.
+The title can have a `negative` state which is automatically synchronised with the negative state of the dialog.
+
+In addition, the title can be hidden when scrolling down the content, to provide more space for reading the content itself; this can be done thanks to the `hide-on-scroll` property, which can determine whether to hide the title and up to which breakpoint.
+
+```html
+<sbb-dialog>
+  <sbb-dialog-title hide-on-scroll="small"> A describing title of the dialog </sbb-dialog-title>
+</sbb-dialog>
+```
 
 ## Interactions
 
 A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `back-button` (default is `false`).
 
+```html
+<sbb-dialog>
+  <sbb-dialog-title back-button> A describing title of the dialog </sbb-dialog-title>
+</sbb-dialog>
+```
+
 ## Events
 
 If a back button is displayd it emits a `requestBackAction` event on click.
@@ -44,3 +56,9 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 | Name                | Type                | Description                                | Inherited From |
 | ------------------- | ------------------- | ------------------------------------------ | -------------- |
 | `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked. |                |
+
+## Slots
+
+| Name | Description                                |
+| ---- | ------------------------------------------ |
+|      | Use the unnamed slot to display the title. |
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 8f85dde5a7..c2a87e20e7 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -70,6 +70,13 @@ You can also set the property `backButton` on the `sbb-dialog-title` component t
 
 It's possible to display the component in `negative` variant using the self-named property.
 
+```html
+<sbb-dialog negative>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+</sbb-dialog>
+```
+
 <!-- Auto Generated Below -->
 
 ## Properties

From ca63fb341fae7862559a399e774b09a4b005adbd Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 20 Feb 2024 14:24:03 +0100
Subject: [PATCH 38/65] fix: chromatic interactions

---
 src/components/dialog/dialog/dialog.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 3cd585016a..db3e0d4610 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -151,9 +151,9 @@ const openDialog = (_event: PointerEvent, id: string): void => {
   dialog.open();
 };
 
-const triggerButton = (dialogId: string): TemplateResult => html`
+const triggerButton = (dialogId: string, triggerId?: string): TemplateResult => html`
   <sbb-button
-    data-testid="dialog-trigger"
+    data-testid=${triggerId || 'dialog-trigger'}
     size="m"
     type="button"
     @click=${(event: PointerEvent) => openDialog(event, dialogId)}
@@ -372,7 +372,7 @@ const NestedTemplate = ({
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
     <sbb-dialog-content
       >Click the button to open a nested
-      dialog.&nbsp;${triggerButton('my-dialog-6')}</sbb-dialog-content
+      dialog.&nbsp;${triggerButton('my-dialog-6', 'nested-trigger-id')}</sbb-dialog-content
     >
     <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" slot="content" ${sbbSpread(args)}>
       ${dialogTitle(

From 43e8ec4a7147093277c72ad67ea4eafbf7efa706 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 28 Feb 2024 11:21:59 +0100
Subject: [PATCH 39/65] fix: review

---
 .../dialog/dialog-actions/dialog-actions.scss |  4 --
 .../dialog/dialog-actions/dialog-actions.ts   |  8 +--
 .../dialog/dialog-actions/readme.md           | 10 ++--
 .../dialog/dialog-content/dialog-content.scss |  4 --
 .../dialog/dialog-content/dialog-content.ts   |  9 ++--
 .../__snapshots__/dialog-title.spec.snap.js   |  4 +-
 .../dialog/dialog-title/dialog-title.scss     |  4 --
 .../dialog/dialog-title/dialog-title.spec.ts  |  4 +-
 .../dialog-title/dialog-title.stories.ts      |  5 +-
 .../dialog/dialog-title/dialog-title.ts       | 21 ++++----
 src/components/dialog/dialog-title/readme.md  |  6 +--
 .../dialog/dialog/dialog.stories.ts           | 36 +++++++++----
 src/components/dialog/dialog/dialog.ts        | 52 ++++++++++---------
 src/components/dialog/dialog/readme.md        |  2 +-
 14 files changed, 89 insertions(+), 80 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.scss b/src/components/dialog/dialog-actions/dialog-actions.scss
index fad2fe671b..08077cc0fb 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.scss
+++ b/src/components/dialog/dialog-actions/dialog-actions.scss
@@ -1,9 +1,5 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
-
 :host {
   display: contents;
 }
diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
index 6289650fe0..fc0d733bbe 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -3,7 +3,6 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionGroupElement } from '../../action-group';
-import { setAttribute } from '../../core/dom';
 
 import style from './dialog-actions.scss?lit&inline';
 
@@ -14,9 +13,12 @@ import style from './dialog-actions.scss?lit&inline';
 export class SbbDialogActionsElement extends SbbActionGroupElement {
   public static override styles: CSSResultGroup = [SbbActionGroupElement.styles, style];
 
-  protected override render(): TemplateResult {
-    setAttribute(this, 'slot', 'actions');
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    this.setAttribute('slot', 'actions');
+    return super.createRenderRoot();
+  }
 
+  protected override render(): TemplateResult {
     return html` <div class="sbb-dialog-actions">${super.render()}</div> `;
   }
 }
diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index 7d359d3500..62c943bfc1 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -2,11 +2,11 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/componen
 
 ```html
 <sbb-dialog>
-    <sbb-dialog-action>
-        <sbb-link sbb-dialog-close>Link</sbb-link>
-        <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
-        <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
-    </sbb-dialog-actions>
+  <sbb-dialog-action>
+    <sbb-link sbb-dialog-close>Link</sbb-link>
+    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
+    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+  </sbb-dialog-actions>
 </sbb-dialog>
 ```
 
diff --git a/src/components/dialog/dialog-content/dialog-content.scss b/src/components/dialog/dialog-content/dialog-content.scss
index 2b49cb5c0a..e2d6459b94 100644
--- a/src/components/dialog/dialog-content/dialog-content.scss
+++ b/src/components/dialog/dialog-content/dialog-content.scss
@@ -1,9 +1,5 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
-
 :host {
   display: contents;
 }
diff --git a/src/components/dialog/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
index 6325b2ef10..0cd0e3e455 100644
--- a/src/components/dialog/dialog-content/dialog-content.ts
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -2,8 +2,6 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { setAttribute } from '../../core/dom';
-
 import style from './dialog-content.scss?lit&inline';
 
 /**
@@ -15,9 +13,12 @@ import style from './dialog-content.scss?lit&inline';
 export class SbbDialogContentElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
-  protected override render(): TemplateResult {
-    setAttribute(this, 'slot', 'content');
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    this.setAttribute('slot', 'content');
+    return super.createRenderRoot();
+  }
 
+  protected override render(): TemplateResult {
     return html`
       <div class="sbb-dialog-content">
         <slot></slot>
diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
index 3bef4cc623..7da52d8d4a 100644
--- a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -3,13 +3,13 @@ export const snapshots = {};
 
 snapshots["sbb-dialog-title renders"] = 
 `<div class="sbb-dialog__header">
-  <h1
+  <h2
     class="sbb-title"
     role="presentation"
   >
     <slot>
     </slot>
-  </h1>
+  </h2>
   <sbb-button
     aria-label="Close secondary window"
     class="sbb-dialog__close"
diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
index eef7a627dc..6ae9924199 100644
--- a/src/components/dialog/dialog-title/dialog-title.scss
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -1,9 +1,5 @@
 @use '../../core/styles' as sbb;
 
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
-
 :host {
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
 
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 7f1fcb8286..ff8c3fcb33 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -8,8 +8,8 @@ describe('sbb-dialog-title', () => {
 
     expect(root).dom.to.be.equal(`
       <sbb-dialog-title
-       aria-level="1"
-       level="1"
+       aria-level="2"
+       level="2"
        role="heading"
        slot="title"
        visual-level="3">Title</sbb-dialog-title>
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index b09525ee5f..7c973dfec8 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -4,7 +4,7 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../core/dom';
+import { breakpoints, sbbSpread } from '../../core/dom';
 
 import { SbbDialogTitleElement } from './dialog-title';
 import readme from './readme.md?raw';
@@ -26,7 +26,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: ['zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+  options: breakpoints,
 };
 
 const accessibilityCloseLabel: InputType = {
@@ -56,7 +56,6 @@ const defaultArgTypes: ArgTypes = {
 };
 
 const defaultArgs: Args = {
-  level: level.options[0],
   'back-button': true,
   'hide-on-scroll': hideOnScroll.options[0],
   'accessibility-close-label': 'Close dialog',
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 43fee58175..cf7915155d 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -5,10 +5,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { FocusVisibleWithinController } from '../../core/a11y';
 import { LanguageController } from '../../core/common-behaviors';
 import type { Breakpoint } from '../../core/dom';
-import { setAttribute } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
-import type { TitleLevel } from '../../title';
 import { SbbTitleElement } from '../../title';
 import '../../button';
 
@@ -26,12 +24,6 @@ export class SbbDialogTitleElement extends SbbTitleElement {
     backClick: 'requestBackAction',
   } as const;
 
-  /**
-   * Visual level for the title. Optional, if not set, the value of level will be used.
-   */
-  @property({ attribute: 'visual-level', reflect: true }) public override visualLevel?: TitleLevel =
-    '3';
-
   /**
    * Whether a back button is displayed next to the title.
    */
@@ -69,14 +61,23 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   );
   private _language = new LanguageController(this);
 
+  public constructor() {
+    super();
+    this.level = '2';
+    this.visualLevel = '3';
+  }
+
   public override connectedCallback(): void {
     super.connectedCallback();
     new FocusVisibleWithinController(this);
   }
 
-  protected override render(): TemplateResult {
-    setAttribute(this, 'slot', 'title');
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    this.setAttribute('slot', 'title');
+    return super.createRenderRoot();
+  }
 
+  protected override render(): TemplateResult {
     const closeButton = html`
       <sbb-button
         class="sbb-dialog__close"
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 6f69c614fc..1f9913d89c 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -12,7 +12,7 @@ It has an implicit slot name: `title`.
 
 ## States
 
-The title can have a `negative` state which is automatically synchronised with the negative state of the dialog.
+The title can have a `negative` state which is automatically synchronized with the negative state of the dialog.
 
 In addition, the title can be hidden when scrolling down the content, to provide more space for reading the content itself; this can be done thanks to the `hide-on-scroll` property, which can determine whether to hide the title and up to which breakpoint.
 
@@ -42,13 +42,13 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 
 | Name                      | Attribute                   | Privacy | Type                            | Default | Description                                                                                                                                                                                    |
 | ------------------------- | --------------------------- | ------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`       | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
 | `backButton`              | `back-button`               | public  | `boolean`                       | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
 | `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
 | `hideOnScroll`            | `hide-on-scroll`            | public  | `'' \| Breakpoint \| undefined` |         | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
+| `level`                   | `level`                     | public  | `TitleLevel \| undefined`       | `'2'`   | Title level                                                                                                                                                                                    |
+| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`       | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
 | `negative`                | `negative`                  | public  | `boolean`                       | `false` | Negative coloring variant flag.                                                                                                                                                                |
-| `level`                   | `level`                     | public  | `TitleLevel \| undefined`       | `'1'`   | Title level                                                                                                                                                                                    |
 | `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`          |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
 
 ## Events
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index db3e0d4610..5b1856aef4 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -11,12 +11,12 @@ import type {
 } from '@storybook/web-components';
 import isChromatic from 'chromatic';
 import type { TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread, type Breakpoint } from '../../core/dom';
+import { sbbSpread, type Breakpoint, breakpoints } from '../../core/dom';
 import sampleImages from '../../core/images';
 import type { TitleLevel } from '../../title';
 import { SbbDialogTitleElement } from '../dialog-title';
@@ -26,10 +26,8 @@ import readme from './readme.md?raw';
 
 import '../../button';
 import '../../link';
-import '../../title';
 import '../../form-field';
 import '../../image';
-import '../../action-group';
 import '../dialog-content';
 import '../dialog-actions';
 
@@ -47,6 +45,17 @@ const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
   await userEvent.click(button);
 };
 
+const hideHeader = async ({ canvasElement }: StoryContext): Promise<void> => {
+  const canvas = within(canvasElement);
+
+  await playStory({ canvasElement } as StoryContext);
+
+  // Scroll the content to hide the title.
+  setTimeout(() => {
+    canvas.getByTestId('content').shadowRoot?.firstElementChild?.scroll(0, 50);
+  }, 250);
+};
+
 const level: InputType = {
   control: {
     type: 'inline-radio',
@@ -70,7 +79,7 @@ const hideOnScroll: InputType = {
   control: {
     type: 'select',
   },
-  options: ['zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
+  options: ['Deactivate hide on scroll', ...breakpoints],
   table: {
     category: 'Title',
   },
@@ -135,9 +144,9 @@ const basicArgTypes: ArgTypes = {
 };
 
 const basicArgs: Args = {
-  level: level.options[0],
+  level: level.options[1],
   backButton: true,
-  hideOnScroll: hideOnScroll.options[6],
+  hideOnScroll: hideOnScroll.options[7],
   accessibilityCloseLabel: 'Close dialog',
   accessibilityBackLabel: 'Go back',
   negative: false,
@@ -210,14 +219,14 @@ const textBlockStyle: Args = {
 const dialogTitle = (
   level: TitleLevel,
   backButton: boolean,
-  hideOnScroll: '' | Breakpoint,
+  hideOnScroll: 'Deactivate hide on scroll' | '' | Breakpoint,
   accessibilityCloseLabel: string,
   accessibilityBackLabel: string,
 ): TemplateResult => html`
   <sbb-dialog-title
     level=${level}
     ?back-button=${backButton}
-    hide-on-scroll=${hideOnScroll}
+    hide-on-scroll=${hideOnScroll === 'Deactivate hide on scroll' ? nothing : hideOnScroll}
     accessibility-close-label=${accessibilityCloseLabel}
     accessibility-back-label=${accessibilityBackLabel}
     >A describing title of the dialog</sbb-dialog-title
@@ -262,7 +271,7 @@ const LongContentTemplate = ({
   ${triggerButton('my-dialog-2')}
   <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content>
+    <sbb-dialog-content data-testid="content">
       Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
       like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
       Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
@@ -425,6 +434,13 @@ export const LongContent: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const HiddenTitle: StoryObj = {
+  render: LongContentTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs },
+  play: isChromatic() ? hideHeader : undefined,
+};
+
 export const Form: StoryObj = {
   render: FormTemplate,
   argTypes: basicArgTypes,
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 6e982dd7ef..6443d9909e 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
-import { LanguageController } from '../../core/common-behaviors';
+import { LanguageController, SbbNegativeMixin } from '../../core/common-behaviors';
 import {
   ScrollHandler,
   toggleDatasetEntry,
@@ -46,7 +46,7 @@ let nextId = 0;
  * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
  */
 @customElement('sbb-dialog')
-export class SbbDialogElement extends LitElement {
+export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
     willOpen: 'willOpen',
@@ -60,11 +60,6 @@ export class SbbDialogElement extends LitElement {
    */
   @property({ attribute: 'backdrop-action' }) public backdropAction: 'close' | 'none' = 'close';
 
-  /**
-   * Negative coloring variant flag.
-   */
-  @property({ reflect: true, type: Boolean }) public negative = false;
-
   /**
    * This will be forwarded as aria-label to the relevant nested element.
    */
@@ -108,10 +103,10 @@ export class SbbDialogElement extends LitElement {
   /** Emits whenever the `sbb-dialog` is closed. */
   private _didClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.didClose);
 
-  private _dialogTitleElement!: SbbDialogTitleElement;
-  private _dialogTitleHeight!: number;
-  private _dialogContentElement!: HTMLElement;
-  private _dialogActionsElement?: SbbDialogActionsElement;
+  private _dialogTitleElement: SbbDialogTitleElement | null = null;
+  private _dialogTitleHeight?: number;
+  private _dialogContentElement: HTMLElement | null = null;
+  private _dialogActionsElement: SbbDialogActionsElement | null = null;
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
   private _openDialogController!: AbortController;
@@ -138,10 +133,10 @@ export class SbbDialogElement extends LitElement {
     this._lastFocusedElement = document.activeElement as HTMLElement;
 
     // Initialize dialog elements
-    this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
-    this._dialogContentElement = this.querySelector('sbb-dialog-content')!.shadowRoot!
+    this._dialogTitleElement = this.querySelector('sbb-dialog-title');
+    this._dialogContentElement = this.querySelector('sbb-dialog-content')?.shadowRoot!
       .firstElementChild as HTMLElement;
-    this._dialogActionsElement = this.querySelector('sbb-dialog-actions') || undefined;
+    this._dialogActionsElement = this.querySelector('sbb-dialog-actions');
 
     this._syncNegative();
 
@@ -193,13 +188,17 @@ export class SbbDialogElement extends LitElement {
   }
 
   private _onContentScroll(): void {
+    if (!this._dialogContentElement) {
+      return;
+    }
+
     const hasVisibleHeader = this.dataset.hideHeader === undefined;
 
     // Check whether hiding the header would make the scrollbar disappear
     // and prevent the hiding animation if so.
     if (
       hasVisibleHeader &&
-      this._dialogContentElement.clientHeight + this._dialogTitleHeight >=
+      this._dialogContentElement.clientHeight + this._dialogTitleHeight! >=
         this._dialogContentElement.scrollHeight
     ) {
       return;
@@ -245,6 +244,8 @@ export class SbbDialogElement extends LitElement {
 
   protected override firstUpdated(): void {
     this._ariaLiveRef = this.shadowRoot!.querySelector('.sbb-screen-reader-only')!;
+
+    // Synchronize the negative state before the first opening to avoid a possible color flash if it is negative.
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
     this._syncNegative();
   }
@@ -371,7 +372,7 @@ export class SbbDialogElement extends LitElement {
       this._focusHandler.trap(this);
     } else if (event.animationName === 'close' && this._state === 'closing') {
       this._setHideHeaderDataAttribute(false);
-      this._dialogContentElement.scrollTo(0, 0);
+      this._dialogContentElement?.scrollTo(0, 0);
       this._state = 'closed';
       removeInertMechanism();
       setModalityOnNextFocus(this._lastFocusedElement);
@@ -394,9 +395,7 @@ export class SbbDialogElement extends LitElement {
     this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
 
     // Take accessibility label or current string in title section
-    const label =
-      this.accessibilityLabel ||
-      (this.querySelector('sbb-dialog-title') as HTMLElement)!.innerText.trim();
+    const label = this.accessibilityLabel || this._dialogTitleElement?.innerText.trim();
 
     // If the text content remains the same, on VoiceOver the aria-live region is not announced a second time.
     // In order to support reading on every opening, we toggle an invisible space.
@@ -419,29 +418,32 @@ export class SbbDialogElement extends LitElement {
   }
 
   private _setDialogHeaderHeight(): void {
-    this._dialogTitleHeight = this._dialogTitleElement.shadowRoot!.firstElementChild!.clientHeight;
+    this._dialogTitleHeight = this._dialogTitleElement?.shadowRoot!.firstElementChild!.clientHeight;
     this.style.setProperty('--sbb-dialog-header-height', `${this._dialogTitleHeight}px`);
   }
 
   private _onContentResize(): void {
     this._setDialogHeaderHeight();
     // Check whether the content overflows and set the `overflows` attribute.
-    this._overflows =
-      this._dialogContentElement.scrollHeight > this._dialogContentElement.clientHeight;
+    this._overflows = this._dialogContentElement
+      ? this._dialogContentElement?.scrollHeight > this._dialogContentElement?.clientHeight
+      : false;
     this._setOverflowsDataAttribute();
   }
 
   private _setHideHeaderDataAttribute(value: boolean): void {
-    const hideOnScroll = this._dialogTitleElement.hideOnScroll;
+    const hideOnScroll = this._dialogTitleElement?.hideOnScroll;
     const hideHeader =
       !!hideOnScroll && isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
     toggleDatasetEntry(this, 'hideHeader', !hideHeader ? false : value);
-    toggleDatasetEntry(this._dialogTitleElement, 'hideHeader', !hideHeader ? false : value);
+    this._dialogTitleElement &&
+      toggleDatasetEntry(this._dialogTitleElement, 'hideHeader', !hideHeader ? false : value);
   }
 
   private _setOverflowsDataAttribute(): void {
     toggleDatasetEntry(this, 'overflows', this._overflows);
-    toggleDatasetEntry(this._dialogTitleElement, 'overflows', this._overflows);
+    this._dialogTitleElement &&
+      toggleDatasetEntry(this._dialogTitleElement, 'overflows', this._overflows);
     if (this._dialogActionsElement) {
       toggleDatasetEntry(this._dialogActionsElement!, 'overflows', this._overflows);
     }
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index c2a87e20e7..72a6bee7b3 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -84,9 +84,9 @@ It's possible to display the component in `negative` variant using the self-name
 | Name                 | Attribute             | Privacy | Type                  | Default   | Description                                                          |
 | -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- |
 | `backdropAction`     | `backdrop-action`     | public  | `'close' \| 'none'`   | `'close'` | Backdrop click action.                                               |
-| `negative`           | `negative`            | public  | `boolean`             | `false`   | Negative coloring variant flag.                                      |
 | `accessibilityLabel` | `accessibility-label` | public  | `string \| undefined` |           | This will be forwarded as aria-label to the relevant nested element. |
 | `disableAnimation`   | `disable-animation`   | public  | `boolean`             | `false`   | Whether the animation is enabled.                                    |
+| `negative`           | `negative`            | public  | `boolean`             | `false`   | Negative coloring variant flag.                                      |
 
 ## Methods
 

From cf7b291ba055b5817f74b56ea44c504d983d39b2 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 28 Feb 2024 12:25:22 +0100
Subject: [PATCH 40/65] fix: use sbb-screenreader-only component

---
 src/components/dialog/dialog/dialog.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 6443d9909e..033cb3bb44 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -243,7 +243,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   }
 
   protected override firstUpdated(): void {
-    this._ariaLiveRef = this.shadowRoot!.querySelector('.sbb-screen-reader-only')!;
+    this._ariaLiveRef = this.shadowRoot!.querySelector('sbb-screenreader-only')!;
 
     // Synchronize the negative state before the first opening to avoid a possible color flash if it is negative.
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;

From d82e33f877887f063ed7539829f6e462bcb283de Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 28 Feb 2024 12:38:46 +0100
Subject: [PATCH 41/65] docs: improve documentation

---
 src/components/dialog/dialog/dialog.stories.ts |  2 ++
 src/components/dialog/dialog/readme.md         | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 5b1856aef4..be103a9a96 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -163,6 +163,8 @@ const openDialog = (_event: PointerEvent, id: string): void => {
 const triggerButton = (dialogId: string, triggerId?: string): TemplateResult => html`
   <sbb-button
     data-testid=${triggerId || 'dialog-trigger'}
+    aria-haspopup="dialog"
+    aria-controls=${dialogId}
     size="m"
     type="button"
     @click=${(event: PointerEvent) => openDialog(event, dialogId)}
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 72a6bee7b3..bf19a9d63b 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -42,7 +42,12 @@ It is necessary to pass the event object to the `open()` method to allow the dia
 whether it has been opened by click or keyboard, so that the focus can be better handled.
 
 ```html
-<sbb-button label="Open dialog" click="openDialog(event, 'my-dialog')"></sbb-button>
+<sbb-button
+  label="Open dialog"
+  click="openDialog(event, 'my-dialog')"
+  aria-haspopup="dialog"
+  aria-controls="my-dialog"
+></sbb-button>
 
 <sbb-dialog id="my-dialog">
   <sbb-dialog-title>Title</sbb-dialog-title>
@@ -77,6 +82,16 @@ It's possible to display the component in `negative` variant using the self-name
 </sbb-dialog>
 ```
 
+The default `z-index` of the component is set to `1000`; to specify a custom stack order, the
+`z-index` can be changed by defining the CSS variable `--sbb-dialog-z-index`.
+
+## Accessibility
+
+When using a button to trigger the dialog, ensure to manage the appropriate ARIA attributes on the button element itself. This includes: `aria-haspopup="dialog"` that signals to assistive technologies that the button controls a dialog element,
+`aria-controls="dialog-id"` that connects the button to the dialog by referencing the dialog's ID. Consider using `aria-expanded` to indicate the dialog's current state (open or closed).
+
+The `sbb-dialog` component may visually hide the title thanks to the `hideOnScroll` property of the [sbb-dialog-title](/docs/components-sbb-dialog-title--docs) to create more space for content, this is useful especially on smaller screens. Screen readers and other assistive technologies will still have access to the title information for context.
+
 <!-- Auto Generated Below -->
 
 ## Properties

From b39742025a6b5915d62fe7537b0b0be790789063 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 28 Feb 2024 12:57:06 +0100
Subject: [PATCH 42/65] fix: include testA11yTreeSnapshot

---
 .../__snapshots__/dialog-actions.spec.snap.js | 30 ++++++++++++
 .../dialog-actions/dialog-actions.spec.ts     |  4 ++
 .../__snapshots__/dialog-content.spec.snap.js | 32 +++++++++++++
 .../dialog-content/dialog-content.spec.ts     |  4 ++
 .../__snapshots__/dialog-title.spec.snap.js   | 48 +++++++++++++++++++
 .../dialog/dialog-title/dialog-title.spec.ts  |  4 ++
 6 files changed, 122 insertions(+)
 create mode 100644 src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js

diff --git a/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
index edd9dda0e4..459123b68c 100644
--- a/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
+++ b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
@@ -14,3 +14,33 @@ snapshots["sbb-dialog-actions renders"] =
 `;
 /* end snapshot sbb-dialog-actions renders */
 
+snapshots["sbb-dialog-actions A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Chrome */
+
+snapshots["sbb-dialog-actions A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Firefox */
+
+snapshots["sbb-dialog-actions A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Safari */
+
diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
index bd45db065e..97493b1e16 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -1,5 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import './dialog-actions';
 
 describe('sbb-dialog-actions', () => {
@@ -17,4 +19,6 @@ describe('sbb-dialog-actions', () => {
       </div>
     `);
   });
+
+  testA11yTreeSnapshot(html`<sbb-dialog-actions></sbb-dialog-actions>`);
 });
diff --git a/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js b/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
new file mode 100644
index 0000000000..3270ba6d55
--- /dev/null
+++ b/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
@@ -0,0 +1,32 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-dialog-content A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-content A11y tree Chrome */
+
+snapshots["sbb-dialog-actions A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Firefox */
+
+snapshots["sbb-dialog-actions A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-dialog-actions A11y tree Safari */
\ No newline at end of file
diff --git a/src/components/dialog/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
index 8d8684cacb..c271134382 100644
--- a/src/components/dialog/dialog-content/dialog-content.spec.ts
+++ b/src/components/dialog/dialog-content/dialog-content.spec.ts
@@ -1,5 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import './dialog-content';
 
 describe('sbb-dialog-content', () => {
@@ -14,4 +16,6 @@ describe('sbb-dialog-content', () => {
       </div>
     `);
   });
+
+  testA11yTreeSnapshot(html`<sbb-dialog-content></sbb-dialog-content>`);
 });
diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
index 7da52d8d4a..1a21cd7593 100644
--- a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -27,3 +27,51 @@ snapshots["sbb-dialog-title renders"] =
 `;
 /* end snapshot sbb-dialog-title renders */
 
+snapshots["sbb-dialog-title A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Close secondary window"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-title A11y tree Chrome */
+
+snapshots["sbb-dialog-title A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Close secondary window"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-title A11y tree Firefox */
+
+snapshots["sbb-dialog-title A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "Close secondary window"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog-title A11y tree Safari */
+
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index ff8c3fcb33..45e84d08a0 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -1,5 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import './dialog-title';
 
 describe('sbb-dialog-title', () => {
@@ -17,4 +19,6 @@ describe('sbb-dialog-title', () => {
 
     await expect(root).shadowDom.to.equalSnapshot();
   });
+
+  testA11yTreeSnapshot(html`<sbb-dialog-title></sbb-dialog-title>`);
 });

From e11bab8b71bdfdcc2a8104baabc53bdb3dec5678 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 28 Feb 2024 13:27:20 +0100
Subject: [PATCH 43/65] fix: testA11yTreeSnapshot

---
 .../__snapshots__/dialog-content.spec.snap.js            | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js b/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
index 3270ba6d55..138d01bd62 100644
--- a/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
+++ b/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
@@ -11,7 +11,7 @@ snapshots["sbb-dialog-content A11y tree Chrome"] =
 `;
 /* end snapshot sbb-dialog-content A11y tree Chrome */
 
-snapshots["sbb-dialog-actions A11y tree Firefox"] = 
+snapshots["sbb-dialog-content A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -19,9 +19,9 @@ snapshots["sbb-dialog-actions A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-dialog-actions A11y tree Firefox */
+/* end snapshot sbb-dialog-content A11y tree Firefox */
 
-snapshots["sbb-dialog-actions A11y tree Safari"] = 
+snapshots["sbb-dialog-content A11y tree Safari"] = 
 `<p>
   {
   "role": "WebArea",
@@ -29,4 +29,5 @@ snapshots["sbb-dialog-actions A11y tree Safari"] =
 }
 </p>
 `;
-/* end snapshot sbb-dialog-actions A11y tree Safari */
\ No newline at end of file
+/* end snapshot sbb-dialog-content A11y tree Safari */
+

From 9ae7c226250e809b706c41fc288c7d31e030a79f Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 28 Feb 2024 13:56:12 +0100
Subject: [PATCH 44/65] fix: dialog hide title story

---
 src/components/dialog/dialog/dialog.stories.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index be103a9a96..d98b006f21 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -16,7 +16,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread, type Breakpoint, breakpoints } from '../../core/dom';
+import { sbbSpread, breakpoints } from '../../core/dom';
 import sampleImages from '../../core/images';
 import type { TitleLevel } from '../../title';
 import { SbbDialogTitleElement } from '../dialog-title';
@@ -53,7 +53,7 @@ const hideHeader = async ({ canvasElement }: StoryContext): Promise<void> => {
   // Scroll the content to hide the title.
   setTimeout(() => {
     canvas.getByTestId('content').shadowRoot?.firstElementChild?.scroll(0, 50);
-  }, 250);
+  }, 500);
 };
 
 const level: InputType = {
@@ -221,7 +221,7 @@ const textBlockStyle: Args = {
 const dialogTitle = (
   level: TitleLevel,
   backButton: boolean,
-  hideOnScroll: 'Deactivate hide on scroll' | '' | Breakpoint,
+  hideOnScroll: any,
   accessibilityCloseLabel: string,
   accessibilityBackLabel: string,
 ): TemplateResult => html`

From 93b33b611b6e17b1d50f667164f134cbb589b409 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 29 Feb 2024 09:51:01 +0100
Subject: [PATCH 45/65] feat: improve hideOnScroll

---
 .../dialog/dialog-title/dialog-title.ts       |  8 ++++----
 src/components/dialog/dialog-title/readme.md  | 20 +++++++++----------
 .../dialog/dialog/dialog.stories.ts           |  9 ++++-----
 src/components/dialog/dialog/dialog.ts        |  6 ++++--
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index cf7915155d..85a56fa3da 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -47,13 +47,13 @@ export class SbbDialogTitleElement extends SbbTitleElement {
    * Whether to hide the title up to a certain breakpoint.
    */
   @property({ attribute: 'hide-on-scroll' })
-  public set hideOnScroll(value: '' | Breakpoint | undefined) {
-    this._hideOnScroll = value === '' ? 'ultra' : value;
+  public set hideOnScroll(value: '' | Breakpoint | boolean) {
+    this._hideOnScroll = value === '' ? true : value;
   }
-  public get hideOnScroll(): '' | Breakpoint | undefined {
+  public get hideOnScroll(): Breakpoint | boolean {
     return this._hideOnScroll;
   }
-  private _hideOnScroll: '' | Breakpoint | undefined;
+  private _hideOnScroll: Breakpoint | boolean = false;
 
   private _backClick: EventEmitter<any> = new EventEmitter(
     this,
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 1f9913d89c..d1107970a4 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -40,16 +40,16 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 
 ## Properties
 
-| Name                      | Attribute                   | Privacy | Type                            | Default | Description                                                                                                                                                                                    |
-| ------------------------- | --------------------------- | ------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `backButton`              | `back-button`               | public  | `boolean`                       | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
-| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
-| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined`    |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
-| `hideOnScroll`            | `hide-on-scroll`            | public  | `'' \| Breakpoint \| undefined` |         | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
-| `level`                   | `level`                     | public  | `TitleLevel \| undefined`       | `'2'`   | Title level                                                                                                                                                                                    |
-| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`       | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
-| `negative`                | `negative`                  | public  | `boolean`                       | `false` | Negative coloring variant flag.                                                                                                                                                                |
-| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`          |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
+| Name                      | Attribute                   | Privacy | Type                         | Default | Description                                                                                                                                                                                    |
+| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `backButton`              | `back-button`               | public  | `boolean`                    | `false` | Whether a back button is displayed next to the title.                                                                                                                                          |
+| `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
+| `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
+| `hideOnScroll`            | `hide-on-scroll`            | public  | `Breakpoint \| boolean`      | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
+| `level`                   | `level`                     | public  | `TitleLevel \| undefined`    | `'2'`   | Title level                                                                                                                                                                                    |
+| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`    | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
+| `negative`                | `negative`                  | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                                                                                                |
+| `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
 
 ## Events
 
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index d98b006f21..a39b5f8a47 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -51,9 +51,8 @@ const hideHeader = async ({ canvasElement }: StoryContext): Promise<void> => {
   await playStory({ canvasElement } as StoryContext);
 
   // Scroll the content to hide the title.
-  setTimeout(() => {
-    canvas.getByTestId('content').shadowRoot?.firstElementChild?.scroll(0, 50);
-  }, 500);
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  canvas.getByTestId('content').shadowRoot?.firstElementChild?.scroll(0, 50);
 };
 
 const level: InputType = {
@@ -146,7 +145,7 @@ const basicArgTypes: ArgTypes = {
 const basicArgs: Args = {
   level: level.options[1],
   backButton: true,
-  hideOnScroll: hideOnScroll.options[7],
+  hideOnScroll: hideOnScroll.options[0],
   accessibilityCloseLabel: 'Close dialog',
   accessibilityBackLabel: 'Go back',
   negative: false,
@@ -439,7 +438,7 @@ export const LongContent: StoryObj = {
 export const HiddenTitle: StoryObj = {
   render: LongContentTemplate,
   argTypes: basicArgTypes,
-  args: { ...basicArgs },
+  args: { ...basicArgs, hideOnScroll: hideOnScroll.options[7] },
   play: isChromatic() ? hideHeader : undefined,
 };
 
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 033cb3bb44..7b1eaf7fa9 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -432,9 +432,11 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   }
 
   private _setHideHeaderDataAttribute(value: boolean): void {
-    const hideOnScroll = this._dialogTitleElement?.hideOnScroll;
+    const hideOnScroll = this._dialogTitleElement?.hideOnScroll ?? false;
     const hideHeader =
-      !!hideOnScroll && isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
+      typeof hideOnScroll === 'boolean'
+        ? hideOnScroll
+        : isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
     toggleDatasetEntry(this, 'hideHeader', !hideHeader ? false : value);
     this._dialogTitleElement &&
       toggleDatasetEntry(this._dialogTitleElement, 'hideHeader', !hideHeader ? false : value);

From 21847f551ecbc575608526edc21289c389d12b0e Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 5 Mar 2024 11:13:06 +0100
Subject: [PATCH 46/65] fix: rebase

---
 .../dialog/dialog-actions/readme.md           | 20 +++++++++----------
 src/components/dialog/dialog-title/readme.md  |  4 ++--
 .../dialog/dialog/dialog.stories.ts           |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index 62c943bfc1..4b2ae5d825 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -16,16 +16,16 @@ It has an implicit slot name: `actions`.
 
 ## Properties
 
-| Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                     |
-| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- |
-| `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                      |
-| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                              |
-| `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                    |
-| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. |
-| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances.     |
+| Name             | Attribute         | Privacy | Type                                        | Default        | Description                                                                                                             |
+| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `alignGroup`     | `align-group`     | public  | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'`      | Set the slotted `<sbb-action-group>` children's alignment.                                                              |
+| `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom`                         | `'medium'`     | Overrides the behaviour of `orientation` property.                                                                      |
+| `orientation`    | `orientation`     | public  | `SbbOrientation`                            | `'horizontal'` | Indicates the orientation of the components inside the `<sbb-action-group>`.                                            |
+| `buttonSize`     | `button-size`     | public  | `SbbButtonSize`                             | `'l'`          | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.         |
+| `linkSize`       | `link-size`       | public  | `SbbLinkSize`                               | `'m'`          | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. |
 
 ## Slots
 
-| Name | Description                                                                                |
-| ---- | ------------------------------------------------------------------------------------------ |
-|      | Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`. |
+| Name | Description                                                                                      |
+| ---- | ------------------------------------------------------------------------------------------------ |
+|      | Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`. |
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index d1107970a4..a192aa138e 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -46,8 +46,8 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 | `accessibilityCloseLabel` | `accessibility-close-label` | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the close button element.                                                                                                                              |
 | `accessibilityBackLabel`  | `accessibility-back-label`  | public  | `\| string     \| undefined` |         | This will be forwarded as aria-label to the back button element.                                                                                                                               |
 | `hideOnScroll`            | `hide-on-scroll`            | public  | `Breakpoint \| boolean`      | `false` | Whether to hide the title up to a certain breakpoint.                                                                                                                                          |
-| `level`                   | `level`                     | public  | `TitleLevel \| undefined`    | `'2'`   | Title level                                                                                                                                                                                    |
-| `visualLevel`             | `visual-level`              | public  | `TitleLevel \| undefined`    | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
+| `level`                   | `level`                     | public  | `SbbTitleLevel`              | `'2'`   | Title level                                                                                                                                                                                    |
+| `visualLevel`             | `visual-level`              | public  | `SbbTitleLevel \| undefined` | `'3'`   | Visual level for the title. Optional, if not set, the value of level will be used.                                                                                                             |
 | `negative`                | `negative`                  | public  | `boolean`                    | `false` | Negative coloring variant flag.                                                                                                                                                                |
 | `visuallyHidden`          | `visually-hidden`           | public  | `boolean \| undefined`       |         | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true |
 
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index a39b5f8a47..fafd4db4af 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -18,7 +18,7 @@ import { waitForComponentsReady } from '../../../storybook/testing/wait-for-comp
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
 import { sbbSpread, breakpoints } from '../../core/dom';
 import sampleImages from '../../core/images';
-import type { TitleLevel } from '../../title';
+import type { SbbTitleLevel } from '../../title';
 import { SbbDialogTitleElement } from '../dialog-title';
 
 import { SbbDialogElement } from './dialog';
@@ -218,7 +218,7 @@ const textBlockStyle: Args = {
 };
 
 const dialogTitle = (
-  level: TitleLevel,
+  level: SbbTitleLevel,
   backButton: boolean,
   hideOnScroll: any,
   accessibilityCloseLabel: string,

From 602e565a5f3e7e5c90dc2e06f9ffd47e05f9b7f4 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 11 Mar 2024 12:22:48 +0100
Subject: [PATCH 47/65] fix: rebase

---
 .../dialog-actions/dialog-actions.stories.ts  |  8 +++---
 .../dialog/dialog-actions/readme.md           |  6 ++---
 .../__snapshots__/dialog-title.spec.snap.js   |  8 +++---
 .../dialog/dialog-title/dialog-title.ts       | 17 +++++++-----
 src/components/dialog/dialog-title/readme.md  |  7 +++++
 src/components/dialog/dialog/dialog.scss      | 26 -------------------
 .../dialog/dialog/dialog.stories.ts           | 14 +++++-----
 src/components/dialog/dialog/dialog.ts        |  2 +-
 src/components/dialog/dialog/readme.md        |  6 ++---
 9 files changed, 40 insertions(+), 54 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
index b8aa87f065..78392c43fd 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -11,16 +11,16 @@ import '../../link';
 
 const Template = (): TemplateResult =>
   html`<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
-    <sbb-link
+    <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
       href="https://www.sbb.ch/en/"
       sbb-dialog-close
     >
       Link
-    </sbb-link>
-    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
-    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+    </sbb-block-link>
+    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
+    <sbb-button sbb-dialog-close> Confirm </sbb-button>
   </sbb-dialog-actions>`;
 
 export const Default: StoryObj = { render: Template };
diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index 4b2ae5d825..efde287acf 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -3,9 +3,9 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/componen
 ```html
 <sbb-dialog>
   <sbb-dialog-action>
-    <sbb-link sbb-dialog-close>Link</sbb-link>
-    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
-    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+    <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
+    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
+    <sbb-button sbb-dialog-close> Confirm </sbb-button>
   </sbb-dialog-actions>
 </sbb-dialog>
 ```
diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
index 1a21cd7593..4c2f8642e5 100644
--- a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -10,9 +10,12 @@ snapshots["sbb-dialog-title renders"] =
     <slot>
     </slot>
   </h2>
-  <sbb-button
+  <sbb-secondary-button
     aria-label="Close secondary window"
     class="sbb-dialog__close"
+    data-action=""
+    data-button=""
+    data-sbb-button=""
     dir="ltr"
     icon-name="cross-small"
     role="button"
@@ -20,9 +23,8 @@ snapshots["sbb-dialog-title renders"] =
     size="m"
     tabindex="0"
     type="button"
-    variant="secondary"
   >
-  </sbb-button>
+  </sbb-secondary-button>
 </div>
 `;
 /* end snapshot sbb-dialog-title renders */
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 85a56fa3da..b0aceb3db6 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, TemplateResult } from 'lit';
-import { html, nothing } from 'lit';
+import { nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { FocusVisibleWithinController } from '../../core/a11y';
 import { LanguageController } from '../../core/common-behaviors';
@@ -78,31 +79,33 @@ export class SbbDialogTitleElement extends SbbTitleElement {
   }
 
   protected override render(): TemplateResult {
+    const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
+
+    /* eslint-disable lit/binding-positions */
     const closeButton = html`
-      <sbb-button
+      <${unsafeStatic(TAG_NAME)}
         class="sbb-dialog__close"
         aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
-        variant=${this.negative ? 'transparent' : 'secondary'}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="cross-small"
         sbb-dialog-close
-      ></sbb-button>
+      ></${unsafeStatic(TAG_NAME)}>
     `;
 
     const backButton = html`
-      <sbb-button
+      <${unsafeStatic(TAG_NAME)}
         class="sbb-dialog__back"
         aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
-        variant=${this.negative ? 'transparent' : 'secondary'}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="chevron-small-left-small"
         @click=${() => this._backClick.emit()}
-      ></sbb-button>
+      ></${unsafeStatic(TAG_NAME)}>
     `;
+    /* eslint-enable lit/binding-positions */
 
     return html`
       <div class="sbb-dialog__header">
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index a192aa138e..35c6a9edb9 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -57,6 +57,13 @@ If a back button is displayd it emits a `requestBackAction` event on click.
 | ------------------- | ------------------- | ------------------------------------------ | -------------- |
 | `requestBackAction` | `CustomEvent<void>` | Emits whenever the back button is clicked. |                |
 
+## CSS Properties
+
+| Name                             | Default                           | Description                      |
+| -------------------------------- | --------------------------------- | -------------------------------- |
+| `--sbb-title-margin-block-start` | `var(--sbb-spacing-responsive-m)` | Margin block start of the title. |
+| `--sbb-title-margin-block-end`   | `var(--sbb-spacing-responsive-s)` | Margin block end of the title.   |
+
 ## Slots
 
 | Name | Description                                |
diff --git a/src/components/dialog/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss
index 3f0cc2668c..1f276fa9d7 100644
--- a/src/components/dialog/dialog/dialog.scss
+++ b/src/components/dialog/dialog/dialog.scss
@@ -60,32 +60,6 @@
   }
 }
 
-:host([data-hide-header]) {
-  --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
-
-  // Hide transition
-  --sbb-dialog-header-transition-timing: cubic-bezier(0.4, 0, 1, 1);
-}
-
-:host(:not([data-hide-header])) {
-  // Show transition
-  --sbb-dialog-header-transition-timing: cubic-bezier(0, 0, 0.2, 1);
-}
-
-:host([data-hide-header]) {
-  // Hide transition
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
-    var(--sbb-dialog-animation-easing);
-  --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
-}
-
-:host(:not([data-hide-header])) {
-  // Show transition
-  --sbb-dialog-content-transition: transform var(--sbb-dialog-header-transition-duration)
-      var(--sbb-dialog-animation-easing),
-    margin 0s var(--sbb-dialog-header-transition-duration);
-}
-
 :host([data-hide-header]) {
   // Hide transition
   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index fafd4db4af..f687fbe47c 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -174,7 +174,7 @@ const triggerButton = (dialogId: string, triggerId?: string): TemplateResult =>
 
 const dialogActions = (negative: boolean): TemplateResult => html`
   <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
-    <sbb-link
+    <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
       href="https://www.sbb.ch/en/"
@@ -182,9 +182,9 @@ const dialogActions = (negative: boolean): TemplateResult => html`
       sbb-dialog-close
     >
       Link
-    </sbb-link>
-    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
-    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+    </sbb-block-link>
+    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
+    <sbb-button sbb-dialog-close> Confirm </sbb-button>
   </sbb-dialog-actions>
 `;
 
@@ -198,7 +198,7 @@ const formDetailsStyle: Args = {
   marginTop: 'var(--sbb-spacing-fixed-4x)',
   padding: 'var(--sbb-spacing-fixed-4x)',
   borderRadius: 'var(--sbb-border-radius-8x)',
-  backgroundColor: 'var(--sbb-color-milk-default)',
+  backgroundColor: 'var(--sbb-color-milk)',
 };
 
 const formStyle: Args = {
@@ -212,8 +212,8 @@ const textBlockStyle: Args = {
   position: 'relative',
   marginBlockStart: '1rem',
   padding: '1rem',
-  backgroundColor: 'var(--sbb-color-milk-default)',
-  border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
+  backgroundColor: 'var(--sbb-color-milk)',
+  border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud)',
   borderRadius: 'var(--sbb-border-radius-4x)',
 };
 
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 7b1eaf7fa9..4058942bab 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -1,7 +1,7 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { html, unsafeStatic } from 'lit/static-html.js';
+import { html } from 'lit/static-html.js';
 
 import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
 import { LanguageController, SbbNegativeMixin } from '../../core/common-behaviors';
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index bf19a9d63b..f82e8943dd 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -28,9 +28,9 @@ It's not necessary to set the slots explicitly on the dialog's inner components,
   <sbb-dialog-title>Title</sbb-dialog-title>
   <sbb-dialog-content>Dialog content.</sbb-dialog-content>
   <sbb-dialog-action>
-    <sbb-link sbb-dialog-close>Link</sbb-link>
-    <sbb-button variant="secondary" sbb-dialog-close> Cancel </sbb-button>
-    <sbb-button variant="primary" sbb-dialog-close> Confirm </sbb-button>
+    <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
+    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
+    <sbb-button sbb-dialog-close> Confirm </sbb-button>
   </sbb-dialog-actions>
 </sbb-dialog>
 ```

From dd58c3ca7cd93c64d55c5fbffc6b6ad505388a37 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 11 Mar 2024 15:03:28 +0100
Subject: [PATCH 48/65] fix: remove useless tests

---
 .../__snapshots__/dialog-content.spec.snap.js | 33 -------------------
 .../dialog-content/dialog-content.spec.ts     |  4 ---
 2 files changed, 37 deletions(-)
 delete mode 100644 src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js

diff --git a/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js b/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
deleted file mode 100644
index 138d01bd62..0000000000
--- a/src/components/dialog/dialog-content/__snapshots__/dialog-content.spec.snap.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/* @web/test-runner snapshot v1 */
-export const snapshots = {};
-
-snapshots["sbb-dialog-content A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-dialog-content A11y tree Chrome */
-
-snapshots["sbb-dialog-content A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-dialog-content A11y tree Firefox */
-
-snapshots["sbb-dialog-content A11y tree Safari"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": ""
-}
-</p>
-`;
-/* end snapshot sbb-dialog-content A11y tree Safari */
-
diff --git a/src/components/dialog/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
index c271134382..8d8684cacb 100644
--- a/src/components/dialog/dialog-content/dialog-content.spec.ts
+++ b/src/components/dialog/dialog-content/dialog-content.spec.ts
@@ -1,7 +1,5 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
 import './dialog-content';
 
 describe('sbb-dialog-content', () => {
@@ -16,6 +14,4 @@ describe('sbb-dialog-content', () => {
       </div>
     `);
   });
-
-  testA11yTreeSnapshot(html`<sbb-dialog-content></sbb-dialog-content>`);
 });

From 944fd54b884f1d2170a0259666d4478be3306750 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 13 Mar 2024 09:06:40 +0100
Subject: [PATCH 49/65] fix: optimize high contrast mode

---
 src/components/dialog/dialog/dialog.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/dialog/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss
index 1f276fa9d7..6a680b302f 100644
--- a/src/components/dialog/dialog/dialog.scss
+++ b/src/components/dialog/dialog/dialog.scss
@@ -72,6 +72,10 @@
   --sbb-dialog-color: var(--sbb-color-white);
   --sbb-dialog-background-color: var(--sbb-color-midnight);
   --sbb-dialog-actions-border: none;
+
+  @include sbb.if-forced-colors {
+    --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid Highlight;
+  }
 }
 
 :host([disable-animation]) {
@@ -80,6 +84,10 @@
 
 :host([data-overflows]:not([negative])) {
   --sbb-dialog-actions-border: none;
+
+  @include sbb.if-forced-colors {
+    --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid Highlight;
+  }
 }
 
 :host(:not([data-state='closed'])) {

From a641c071bd7c0187213edb97568521239cfe7391 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Sat, 16 Mar 2024 23:35:49 +0100
Subject: [PATCH 50/65] fix: use hostAttributes

---
 .../dialog/dialog-actions/dialog-actions.ts   |  9 ++++-----
 .../dialog/dialog-content/dialog-content.ts   | 10 +++++-----
 .../dialog/dialog-title/dialog-title.ts       | 10 ++++------
 src/components/dialog/dialog/dialog.ts        | 20 +++++++------------
 4 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
index fc0d733bbe..df055d07d6 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionGroupElement } from '../../action-group';
+import { hostAttributes } from '../../core/common-behaviors';
 
 import style from './dialog-actions.scss?lit&inline';
 
@@ -10,14 +11,12 @@ import style from './dialog-actions.scss?lit&inline';
  * Use this component to display a footer into an `sbb-dialog` with an action group.
  */
 @customElement('sbb-dialog-actions')
+@hostAttributes({
+  slot: 'actions',
+})
 export class SbbDialogActionsElement extends SbbActionGroupElement {
   public static override styles: CSSResultGroup = [SbbActionGroupElement.styles, style];
 
-  protected override createRenderRoot(): HTMLElement | DocumentFragment {
-    this.setAttribute('slot', 'actions');
-    return super.createRenderRoot();
-  }
-
   protected override render(): TemplateResult {
     return html` <div class="sbb-dialog-actions">${super.render()}</div> `;
   }
diff --git a/src/components/dialog/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
index 0cd0e3e455..0692f98436 100644
--- a/src/components/dialog/dialog-content/dialog-content.ts
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -2,6 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { hostAttributes } from '../../core/common-behaviors';
+
 import style from './dialog-content.scss?lit&inline';
 
 /**
@@ -10,14 +12,12 @@ import style from './dialog-content.scss?lit&inline';
  * @slot - Use the unnamed slot to provide a dialog content.
  */
 @customElement('sbb-dialog-content')
+@hostAttributes({
+  slot: 'content',
+})
 export class SbbDialogContentElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
-  protected override createRenderRoot(): HTMLElement | DocumentFragment {
-    this.setAttribute('slot', 'content');
-    return super.createRenderRoot();
-  }
-
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-dialog-content">
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index b0aceb3db6..3a121c3e56 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { FocusVisibleWithinController } from '../../core/a11y';
-import { LanguageController } from '../../core/common-behaviors';
+import { LanguageController, hostAttributes } from '../../core/common-behaviors';
 import type { Breakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
@@ -19,6 +19,9 @@ import style from './dialog-title.scss?lit&inline';
  * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
  */
 @customElement('sbb-dialog-title')
+@hostAttributes({
+  slot: 'title',
+})
 export class SbbDialogTitleElement extends SbbTitleElement {
   public static override styles: CSSResultGroup = [SbbTitleElement.styles, style];
   public static readonly events: Record<string, string> = {
@@ -73,11 +76,6 @@ export class SbbDialogTitleElement extends SbbTitleElement {
     new FocusVisibleWithinController(this);
   }
 
-  protected override createRenderRoot(): HTMLElement | DocumentFragment {
-    this.setAttribute('slot', 'title');
-    return super.createRenderRoot();
-  }
-
   protected override render(): TemplateResult {
     const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
 
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 4058942bab..b4bf3ec870 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -5,13 +5,7 @@ import { html } from 'lit/static-html.js';
 
 import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
 import { LanguageController, SbbNegativeMixin } from '../../core/common-behaviors';
-import {
-  ScrollHandler,
-  toggleDatasetEntry,
-  isValidAttribute,
-  hostContext,
-  isBreakpoint,
-} from '../../core/dom';
+import { ScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nDialog } from '../../core/i18n';
 import { AgnosticResizeObserver } from '../../core/observers';
@@ -262,7 +256,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     }
 
     if (this._dialogActionsElement) {
-      toggleDatasetEntry(this._dialogActionsElement!, 'negative', this.negative);
+      this._dialogActionsElement.toggleAttribute('data-negative', this.negative);
     }
   }
 
@@ -437,17 +431,17 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       typeof hideOnScroll === 'boolean'
         ? hideOnScroll
         : isBreakpoint('zero', hideOnScroll, { includeMaxBreakpoint: true });
-    toggleDatasetEntry(this, 'hideHeader', !hideHeader ? false : value);
+    this.toggleAttribute('data-hide-header', !hideHeader ? false : value);
     this._dialogTitleElement &&
-      toggleDatasetEntry(this._dialogTitleElement, 'hideHeader', !hideHeader ? false : value);
+      this._dialogTitleElement.toggleAttribute('data-hide-header', !hideHeader ? false : value);
   }
 
   private _setOverflowsDataAttribute(): void {
-    toggleDatasetEntry(this, 'overflows', this._overflows);
+    this.toggleAttribute('data-overflows', this._overflows);
     this._dialogTitleElement &&
-      toggleDatasetEntry(this._dialogTitleElement, 'overflows', this._overflows);
+      this._dialogTitleElement.toggleAttribute('data-overflows', this._overflows);
     if (this._dialogActionsElement) {
-      toggleDatasetEntry(this._dialogActionsElement!, 'overflows', this._overflows);
+      this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
     }
   }
 

From 7fcbc29015f7935f85c87efec91702c640e7e27b Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Sun, 17 Mar 2024 12:11:19 +0100
Subject: [PATCH 51/65] fix: high contrast mode

---
 src/components/dialog/dialog-actions/dialog-actions.scss | 4 ++++
 src/components/dialog/dialog-title/dialog-title.scss     | 5 +++++
 src/components/dialog/dialog/dialog.scss                 | 8 --------
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.scss b/src/components/dialog/dialog-actions/dialog-actions.scss
index 08077cc0fb..d2a90cf00a 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.scss
+++ b/src/components/dialog/dialog-actions/dialog-actions.scss
@@ -2,6 +2,10 @@
 
 :host {
   display: contents;
+
+  @include sbb.if-forced-colors {
+    --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid CanvasText;
+  }
 }
 
 .sbb-dialog-actions {
diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss
index 6ae9924199..af5764bacb 100644
--- a/src/components/dialog/dialog-title/dialog-title.scss
+++ b/src/components/dialog/dialog-title/dialog-title.scss
@@ -27,6 +27,7 @@
   padding-inline: var(--sbb-dialog-padding-inline);
   padding-block: var(--sbb-dialog-header-padding-block);
   background-color: var(--sbb-dialog-background-color);
+  border-block-end: var(--sbb-dialog-title-border);
   z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
 
   // Apply show/hide animation unless it has a visible focus within.
@@ -42,6 +43,10 @@
   :host([data-overflows][data-has-visible-focus-within]) &,
   :host([data-overflows]:not([negative], [data-hide-header])) & {
     @include sbb.shadow-level-9-soft;
+
+    @include sbb.if-forced-colors {
+      --sbb-dialog-title-border: var(--sbb-border-width-1x) solid CanvasText;
+    }
   }
 
   @include sbb.mq($from: medium) {
diff --git a/src/components/dialog/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss
index 6a680b302f..1f276fa9d7 100644
--- a/src/components/dialog/dialog/dialog.scss
+++ b/src/components/dialog/dialog/dialog.scss
@@ -72,10 +72,6 @@
   --sbb-dialog-color: var(--sbb-color-white);
   --sbb-dialog-background-color: var(--sbb-color-midnight);
   --sbb-dialog-actions-border: none;
-
-  @include sbb.if-forced-colors {
-    --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid Highlight;
-  }
 }
 
 :host([disable-animation]) {
@@ -84,10 +80,6 @@
 
 :host([data-overflows]:not([negative])) {
   --sbb-dialog-actions-border: none;
-
-  @include sbb.if-forced-colors {
-    --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid Highlight;
-  }
 }
 
 :host(:not([data-state='closed'])) {

From 90b83c82b2e10030e2fe3b2a8a29c5aca9a3e13c Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Sun, 17 Mar 2024 15:16:31 +0100
Subject: [PATCH 52/65] fix: review

---
 .../dialog-actions/dialog-actions.stories.ts  |   3 +-
 .../dialog/dialog-actions/dialog-actions.ts   |   2 +
 .../dialog/dialog-actions/readme.md           |   6 +-
 .../__snapshots__/dialog-title.spec.snap.js   |  13 +++
 .../dialog/dialog-title/dialog-title.spec.ts  |   2 +-
 src/components/dialog/dialog-title/readme.md  |   2 +-
 .../dialog/__snapshots__/dialog.spec.snap.js  | 107 ++++++++++++++++--
 src/components/dialog/dialog/dialog.spec.ts   |  30 +++--
 .../dialog/dialog/dialog.stories.ts           |   2 +-
 src/components/dialog/dialog/readme.md        |   3 -
 10 files changed, 144 insertions(+), 26 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
index 78392c43fd..8a1dbd3173 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -6,7 +6,8 @@ import { html } from 'lit';
 import './dialog-actions';
 import readme from './readme.md?raw';
 
-import '../../button';
+import '../../button/button';
+import '../../button/secondary-button';
 import '../../link';
 
 const Template = (): TemplateResult =>
diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
index df055d07d6..a4d37292e9 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -9,6 +9,8 @@ import style from './dialog-actions.scss?lit&inline';
 
 /**
  * Use this component to display a footer into an `sbb-dialog` with an action group.
+ *
+ * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`.
  */
 @customElement('sbb-dialog-actions')
 @hostAttributes({
diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index efde287acf..7c30f51310 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -26,6 +26,6 @@ It has an implicit slot name: `actions`.
 
 ## Slots
 
-| Name | Description                                                                                      |
-| ---- | ------------------------------------------------------------------------------------------------ |
-|      | Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`. |
+| Name | Description                                                                                        |
+| ---- | -------------------------------------------------------------------------------------------------- |
+|      | Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`. |
diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
index 4c2f8642e5..12db993586 100644
--- a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -35,6 +35,10 @@ snapshots["sbb-dialog-title A11y tree Chrome"] =
   "role": "WebArea",
   "name": "",
   "children": [
+    {
+      "role": "text",
+      "name": "Title"
+    },
     {
       "role": "button",
       "name": "Close secondary window"
@@ -51,6 +55,10 @@ snapshots["sbb-dialog-title A11y tree Firefox"] =
   "role": "document",
   "name": "",
   "children": [
+    {
+      "role": "text leaf",
+      "name": "Title"
+    },
     {
       "role": "button",
       "name": "Close secondary window"
@@ -67,6 +75,11 @@ snapshots["sbb-dialog-title A11y tree Safari"] =
   "role": "WebArea",
   "name": "",
   "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 2
+    },
     {
       "role": "button",
       "name": "Close secondary window"
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 45e84d08a0..76c91b5dc6 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -20,5 +20,5 @@ describe('sbb-dialog-title', () => {
     await expect(root).shadowDom.to.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-title></sbb-dialog-title>`);
+  testA11yTreeSnapshot(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
 });
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 35c6a9edb9..104cfeb89b 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -34,7 +34,7 @@ A close button is always displayed and can be used to close the dialog. Optional
 
 ## Events
 
-If a back button is displayd it emits a `requestBackAction` event on click.
+If a back button is displayed it emits a `requestBackAction` event on click.
 
 <!-- Auto Generated Below -->
 
diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index 92e6acfec6..51725ff684 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -1,11 +1,32 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-dialog renders"] = 
+snapshots["sbb-dialog renders an open dialog Dom"] = 
+`<sbb-dialog
+  data-state="opening"
+  disable-animation=""
+>
+  <sbb-dialog-title
+    aria-level="2"
+    level="2"
+    role="heading"
+    slot="title"
+    visual-level="3"
+  >
+    Title
+  </sbb-dialog-title>
+  <sbb-dialog-content slot="content">
+    Content
+  </sbb-dialog-content>
+</sbb-dialog>
+`;
+/* end snapshot sbb-dialog renders an open dialog Dom */
+
+snapshots["sbb-dialog renders an open dialog ShadowDom"] = 
 `<div class="sbb-dialog__container">
   <div
     class="sbb-dialog"
-    id="sbb-dialog-0"
+    id="sbb-dialog-1"
   >
     <div class="sbb-dialog__wrapper">
       <slot name="title">
@@ -20,25 +41,93 @@ snapshots["sbb-dialog renders"] =
 <sbb-screen-reader-only aria-live="polite">
 </sbb-screen-reader-only>
 `;
-/* end snapshot sbb-dialog renders */
+/* end snapshot sbb-dialog renders an open dialog ShadowDom */
 
-snapshots["sbb-dialog A11y tree Chrome"] = 
+snapshots["sbb-dialog renders an open dialog A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
-  "name": ""
+  "name": "",
+  "children": [
+    {
+      "role": "text",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text",
+      "name": "Content"
+    },
+    {
+      "role": "text",
+      "name": "Dialog, Title "
+    }
+  ]
 }
 </p>
 `;
-/* end snapshot sbb-dialog A11y tree Chrome */
+/* end snapshot sbb-dialog renders an open dialog A11y tree Chrome */
 
-snapshots["sbb-dialog A11y tree Firefox"] = 
+snapshots["sbb-dialog renders an open dialog A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
-  "name": ""
+  "name": "",
+  "children": [
+    {
+      "role": "text leaf",
+      "name": "Title"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text leaf",
+      "name": "Content"
+    },
+    {
+      "role": "text leaf",
+      "name": "Dialog, Title "
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-dialog renders an open dialog A11y tree Firefox */
+
+snapshots["sbb-dialog renders an open dialog A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Title",
+      "level": 2
+    },
+    {
+      "role": "text",
+      "name": "Content"
+    },
+    {
+      "role": "button",
+      "name": "Close secondary window",
+      "focused": true
+    },
+    {
+      "role": "text",
+      "name": "Dialog, Title "
+    }
+  ]
 }
 </p>
 `;
-/* end snapshot sbb-dialog A11y tree Firefox */
+/* end snapshot sbb-dialog renders an open dialog A11y tree Safari */
 
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index 3e903e07dd..da6d399878 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -1,17 +1,33 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
 import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 
+import type { SbbDialogElement } from './dialog';
 import './dialog';
+import '../dialog-title';
+import '../dialog-content/dialog';
 
 describe(`sbb-dialog`, () => {
-  it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog></sbb-dialog>`);
-
-    expect(root).dom.to.be.equal(`<sbb-dialog data-state="closed"></sbb-dialog>`);
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders an open dialog', async () => {
+    let root: SbbDialogElement;
+    beforeEach(async () => {
+      root = await fixture(
+        html` <sbb-dialog disable-animation>
+          <sbb-dialog-title>Title</sbb-dialog-title>
+          <sbb-dialog-content>Content</sbb-dialog-content>
+        </sbb-dialog>`,
+      );
+      root.open();
+      await waitForLitRender(root);
+    });
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+    testA11yTreeSnapshot();
   });
-
-  testA11yTreeSnapshot(html`<sbb-dialog></sbb-dialog>`);
 });
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index f687fbe47c..f0212133d6 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -51,8 +51,8 @@ const hideHeader = async ({ canvasElement }: StoryContext): Promise<void> => {
   await playStory({ canvasElement } as StoryContext);
 
   // Scroll the content to hide the title.
-  await new Promise((resolve) => setTimeout(resolve, 500));
   canvas.getByTestId('content').shadowRoot?.firstElementChild?.scroll(0, 50);
+  await new Promise((resolve) => setTimeout(resolve, 500));
 };
 
 const level: InputType = {
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index f82e8943dd..f50fe9dcd4 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -82,9 +82,6 @@ It's possible to display the component in `negative` variant using the self-name
 </sbb-dialog>
 ```
 
-The default `z-index` of the component is set to `1000`; to specify a custom stack order, the
-`z-index` can be changed by defining the CSS variable `--sbb-dialog-z-index`.
-
 ## Accessibility
 
 When using a button to trigger the dialog, ensure to manage the appropriate ARIA attributes on the button element itself. This includes: `aria-haspopup="dialog"` that signals to assistive technologies that the button controls a dialog element,

From a8e0f375c35004124b8f6005e1043683a74bbc2d Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 18 Mar 2024 10:00:54 +0100
Subject: [PATCH 53/65] fix: add didClose event details type

---
 src/components/dialog/dialog/dialog.ts | 20 ++++++++++++++------
 src/components/dialog/dialog/readme.md | 12 ++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index b4bf3ec870..a181278e19 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -25,6 +25,11 @@ import '../title';
 const dialogRefs: SbbDialogElement[] = [];
 let nextId = 0;
 
+type CloseEventDetails = {
+  returnValue?: any;
+  closeTarget?: HTMLElement;
+};
+
 /**
  * It displays an interactive overlay element.
  *
@@ -34,7 +39,7 @@ let nextId = 0;
  * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
- * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-dialog` is closed.
+ * @event {CustomEvent<CloseEventDetails>} didClose - Emits whenever the `sbb-dialog` is closed.
  * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
@@ -95,7 +100,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _willClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.willClose);
 
   /** Emits whenever the `sbb-dialog` is closed. */
-  private _didClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.didClose);
+  private _didClose: EventEmitter<CloseEventDetails> = new EventEmitter(
+    this,
+    SbbDialogElement.events.didClose,
+  );
 
   private _dialogTitleElement: SbbDialogTitleElement | null = null;
   private _dialogTitleHeight?: number;
@@ -372,16 +380,16 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       setModalityOnNextFocus(this._lastFocusedElement);
       // Manually focus last focused element
       this._lastFocusedElement?.focus();
-      this._didClose.emit({
-        returnValue: this._returnValue,
-        closeTarget: this._dialogCloseElement,
-      });
       this._openDialogController?.abort();
       this._focusHandler.disconnect();
       this._dialogContentResizeObserver.disconnect();
       this._removeInstanceFromGlobalCollection();
       // Enable scrolling for content below the dialog if no dialog is open
       !dialogRefs.length && this._scrollHandler.enableScroll();
+      this._didClose.emit({
+        returnValue: this._returnValue,
+        closeTarget: this._dialogCloseElement,
+      });
     }
   }
 
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index f50fe9dcd4..e48869ccf8 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -109,12 +109,12 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro
 
 ## Events
 
-| Name        | Type                | Description                                                                     | Inherited From |
-| ----------- | ------------------- | ------------------------------------------------------------------------------- | -------------- |
-| `willOpen`  | `CustomEvent<void>` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
-| `didOpen`   | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is opened.                                      |                |
-| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
-| `didClose`  | `CustomEvent<void>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
+| Name        | Type                             | Description                                                                     | Inherited From |
+| ----------- | -------------------------------- | ------------------------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>`              | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
+| `didOpen`   | `CustomEvent<void>`              | Emits whenever the `sbb-dialog` is opened.                                      |                |
+| `willClose` | `CustomEvent<void>`              | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
+| `didClose`  | `CustomEvent<CloseEventDetails>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
 
 ## CSS Properties
 

From 98ef7b40ccbe48bfdaae51ef5910077c9ee5b6ae Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 18 Mar 2024 13:44:45 +0100
Subject: [PATCH 54/65] feat: show back button if an accessibilityBackLabel is
 provided

---
 .../dialog/dialog-title/dialog-title.spec.ts          |  1 -
 .../dialog/dialog-title/dialog-title.stories.ts       |  6 ++++++
 src/components/dialog/dialog-title/dialog-title.ts    |  8 +++++++-
 src/components/dialog/dialog-title/readme.md          |  2 +-
 .../dialog/dialog/__snapshots__/dialog.spec.snap.js   |  1 -
 src/components/dialog/dialog/dialog.stories.ts        | 11 +++++++++++
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 76c91b5dc6..043afdb68a 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -10,7 +10,6 @@ describe('sbb-dialog-title', () => {
 
     expect(root).dom.to.be.equal(`
       <sbb-dialog-title
-       aria-level="2"
        level="2"
        role="heading"
        slot="title"
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index 7c973dfec8..1db1561159 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -71,6 +71,12 @@ export const Default: StoryObj = {
   args: { ...defaultArgs },
 };
 
+export const NoBackButton: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, 'back-button': false, 'accessibility-back-label': undefined },
+};
+
 const meta: Meta = {
   decorators: [
     (story) => html` <div style="padding: 2rem;">${story()}</div> `,
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 3a121c3e56..1190d4e799 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
@@ -76,6 +76,12 @@ export class SbbDialogTitleElement extends SbbTitleElement {
     new FocusVisibleWithinController(this);
   }
 
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('backButton') || changedProperties.has('accessibilityBackLabel')) {
+      this.backButton = !this.backButton && !!this.accessibilityBackLabel ? true : this.backButton;
+    }
+  }
+
   protected override render(): TemplateResult {
     const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
 
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 104cfeb89b..6fcc3b02fc 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -24,7 +24,7 @@ In addition, the title can be hidden when scrolling down the content, to provide
 
 ## Interactions
 
-A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `back-button` (default is `false`).
+A close button is always displayed and can be used to close the dialog. Optionally, a back button can be shown with the property `back-button` (default is `false`). Note that setting an `accessibilityBackLabel` will also display a back button.
 
 ```html
 <sbb-dialog>
diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index 51725ff684..93e1ec9cbf 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -7,7 +7,6 @@ snapshots["sbb-dialog renders an open dialog Dom"] =
   disable-animation=""
 >
   <sbb-dialog-title
-    aria-level="2"
     level="2"
     role="heading"
     slot="title"
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index f0212133d6..637e7d9d95 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -449,6 +449,17 @@ export const Form: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const NoBackButton: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    backButton: false,
+    accessibilityBackLabel: undefined,
+  },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const NoFooter: StoryObj = {
   render: NoFooterTemplate,
   argTypes: basicArgTypes,

From db9eb94f5c07872f80e56dd340beabb28c62fc13 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 18 Mar 2024 14:32:10 +0100
Subject: [PATCH 55/65] fix: tests

---
 .../dialog-title/__snapshots__/dialog-title.spec.snap.js       | 3 +--
 src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
index 12db993586..03fb644d4f 100644
--- a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
+++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js
@@ -77,8 +77,7 @@ snapshots["sbb-dialog-title A11y tree Safari"] =
   "children": [
     {
       "role": "heading",
-      "name": "Title",
-      "level": 2
+      "name": "Title"
     },
     {
       "role": "button",
diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index 93e1ec9cbf..c42eb73a8f 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -108,8 +108,7 @@ snapshots["sbb-dialog renders an open dialog A11y tree Safari"] =
   "children": [
     {
       "role": "heading",
-      "name": "Title",
-      "level": 2
+      "name": "Title"
     },
     {
       "role": "text",

From 3c628e2b59d0dd036013d2d75abfa17b302e417b Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 19 Mar 2024 18:24:16 +0100
Subject: [PATCH 56/65] fix: rebase

---
 src/components/dialog/dialog/dialog.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index a181278e19..4ee8a4d937 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
 import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
@@ -16,10 +17,10 @@ import type { SbbDialogTitleElement } from '../dialog-title';
 
 import style from './dialog.scss?lit&inline';
 
-import '../button/secondary-button';
-import '../button/transparent-button';
-import '../screenreader-only';
-import '../title';
+import '../../button/secondary-button';
+import '../../button/transparent-button';
+import '../../screenreader-only';
+import '../../title';
 
 // A global collection of existing dialogs
 const dialogRefs: SbbDialogElement[] = [];
@@ -245,8 +246,6 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   }
 
   protected override firstUpdated(): void {
-    this._ariaLiveRef = this.shadowRoot!.querySelector('sbb-screenreader-only')!;
-
     // Synchronize the negative state before the first opening to avoid a possible color flash if it is negative.
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
     this._syncNegative();

From bd7a960144aefb8aa9bd7d2b6de8721d0d22253c Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Tue, 19 Mar 2024 20:38:06 +0100
Subject: [PATCH 57/65] fix: chromatic scroll

---
 src/components/dialog/dialog/dialog.stories.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 637e7d9d95..4cd4a66319 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -51,8 +51,8 @@ const hideHeader = async ({ canvasElement }: StoryContext): Promise<void> => {
   await playStory({ canvasElement } as StoryContext);
 
   // Scroll the content to hide the title.
-  canvas.getByTestId('content').shadowRoot?.firstElementChild?.scroll(0, 50);
-  await new Promise((resolve) => setTimeout(resolve, 500));
+  await new Promise((resolve) => setTimeout(resolve, 250));
+  setTimeout(() => canvas.getByTestId('image').scrollIntoView(), 250);
 };
 
 const level: InputType = {
@@ -283,6 +283,7 @@ const LongContentTemplate = ({
         style=${styleMap({ 'margin-block': '1rem' })}
         image-src=${sampleImages[1]}
         alt="Natural landscape"
+        data-testid="image"
         data-chromatic="ignore"
       ></sbb-image>
       He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels

From e37dea046dbb04035b991eae7a239f8a4738f370 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 4 Apr 2024 10:38:18 +0200
Subject: [PATCH 58/65] fix: rebase

---
 .../dialog-actions/dialog-actions.spec.ts     |  4 +--
 .../dialog/dialog-actions/dialog-actions.ts   |  2 +-
 .../dialog/dialog-content/dialog-content.ts   |  2 +-
 .../dialog/dialog-title/dialog-title.spec.ts  |  4 +--
 .../dialog/dialog-title/dialog-title.ts       |  9 +++---
 src/components/dialog/dialog/dialog.e2e.ts    |  2 +-
 src/components/dialog/dialog/dialog.spec.ts   |  2 +-
 .../dialog/dialog/dialog.stories.ts           |  9 ++++--
 src/components/dialog/dialog/dialog.ts        | 30 ++++++++++---------
 src/components/overlay/overlay.stories.ts     |  6 ++--
 10 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
index 97493b1e16..f5b88d23d7 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -1,7 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import './dialog-actions';
 
 describe('sbb-dialog-actions', () => {
diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
index a4d37292e9..207193734f 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -3,7 +3,7 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionGroupElement } from '../../action-group';
-import { hostAttributes } from '../../core/common-behaviors';
+import { hostAttributes } from '../../core/decorators';
 
 import style from './dialog-actions.scss?lit&inline';
 
diff --git a/src/components/dialog/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
index 0692f98436..aa14037fce 100644
--- a/src/components/dialog/dialog-content/dialog-content.ts
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/common-behaviors';
+import { hostAttributes } from '../../core/decorators';
 
 import style from './dialog-content.scss?lit&inline';
 
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 043afdb68a..78f3db9608 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -1,7 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import './dialog-title';
 
 describe('sbb-dialog-title', () => {
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 1190d4e799..6035f71b87 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -3,8 +3,9 @@ import { nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { FocusVisibleWithinController } from '../../core/a11y';
-import { LanguageController, hostAttributes } from '../../core/common-behaviors';
+import { SbbFocusVisibleWithinController } from '../../core/a11y';
+import { SbbLanguageController } from '../../core/controllers';
+import { hostAttributes } from '../../core/decorators';
 import type { Breakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
@@ -63,7 +64,7 @@ export class SbbDialogTitleElement extends SbbTitleElement {
     this,
     SbbDialogTitleElement.events.backClick,
   );
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   public constructor() {
     super();
@@ -73,7 +74,7 @@ export class SbbDialogTitleElement extends SbbTitleElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    new FocusVisibleWithinController(this);
+    new SbbFocusVisibleWithinController(this);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index b10f34a2bb..57d09543ab 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -42,7 +42,7 @@ describe('sbb-dialog', () => {
         <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
-    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screenreader-only')!;
+    ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
   });
 
   it('renders', () => {
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index da6d399878..f85a75bf1c 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -7,7 +7,7 @@ import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
 import type { SbbDialogElement } from './dialog';
 import './dialog';
 import '../dialog-title';
-import '../dialog-content/dialog';
+import '../dialog-content';
 
 describe(`sbb-dialog`, () => {
   describe('renders an open dialog', async () => {
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 4cd4a66319..1b2ecc65ef 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -14,9 +14,10 @@ import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { sbbSpread } from '../../../storybook/helpers/spread';
 import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
 import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { sbbSpread, breakpoints } from '../../core/dom';
+import { breakpoints } from '../../core/dom/breakpoint';
 import sampleImages from '../../core/images';
 import type { SbbTitleLevel } from '../../title';
 import { SbbDialogTitleElement } from '../dialog-title';
@@ -331,10 +332,12 @@ const FormTemplate = ({
         method and returning the form values to update the details.
       </div>
       <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-        <sbb-form-field error-space="none" label="Message" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
           <input placeholder="Your custom massage" value="Hello 👋" name="message" />
         </sbb-form-field>
-        <sbb-form-field error-space="none" label="Favorite animal" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Favorite animal</label>
           <select name="animal">
             <option>Red Panda</option>
             <option>Cheetah</option>
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 4ee8a4d937..6fd4ddc0cd 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -1,17 +1,18 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit/static-html.js';
 
-import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
-import { LanguageController, SbbNegativeMixin } from '../../core/common-behaviors';
-import { ScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
+import { SbbFocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
+import { SbbLanguageController } from '../../core/controllers';
+import { SbbScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nDialog } from '../../core/i18n';
+import { SbbNegativeMixin } from '../../core/mixins';
 import { AgnosticResizeObserver } from '../../core/observers';
 import type { SbbOverlayState } from '../../core/overlay';
 import { applyInertMechanism, removeInertMechanism } from '../../core/overlay';
+import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only';
 import type { SbbDialogActionsElement } from '../dialog-actions';
 import type { SbbDialogTitleElement } from '../dialog-title';
 
@@ -19,7 +20,7 @@ import style from './dialog.scss?lit&inline';
 
 import '../../button/secondary-button';
 import '../../button/transparent-button';
-import '../../screenreader-only';
+import '../../screen-reader-only';
 import '../../title';
 
 // A global collection of existing dialogs
@@ -88,7 +89,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _dialogContentResizeObserver = new AgnosticResizeObserver(() =>
     setTimeout(() => this._onContentResize()),
   );
-  private _ariaLiveRef!: HTMLElement;
+  private _ariaLiveRef!: SbbScreenReaderOnlyElement;
   private _ariaLiveRefToggle = false;
 
   /** Emits whenever the `sbb-dialog` starts the opening transition. */
@@ -113,8 +114,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _dialogCloseElement?: HTMLElement;
   private _dialogController!: AbortController;
   private _openDialogController!: AbortController;
-  private _focusHandler = new FocusHandler();
-  private _scrollHandler = new ScrollHandler();
+  private _focusHandler = new SbbFocusHandler();
+  private _scrollHandler = new SbbScrollHandler();
   private _returnValue: any;
   private _isPointerDownEventOnDialog: boolean = false;
   private _overflows: boolean = false;
@@ -124,7 +125,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   // Last element which had focus before the dialog was opened.
   private _lastFocusedElement?: HTMLElement;
 
-  private _language = new LanguageController(this);
+  private _language = new SbbLanguageController(this);
 
   /**
    * Opens the dialog element.
@@ -245,10 +246,14 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
     }
   }
 
-  protected override firstUpdated(): void {
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    this._ariaLiveRef =
+      this.shadowRoot!.querySelector<SbbScreenReaderOnlyElement>('sbb-screen-reader-only')!;
+
     // Synchronize the negative state before the first opening to avoid a possible color flash if it is negative.
     this._dialogTitleElement = this.querySelector('sbb-dialog-title')!;
     this._syncNegative();
+    super.firstUpdated(_changedProperties);
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
@@ -470,10 +475,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
           </div>
         </div>
       </div>
-      <sbb-screenreader-only
-        aria-live="polite"
-        ${ref((el?: Element) => (this._ariaLiveRef = el as HTMLElement))}
-      ></sbb-screenreader-only>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
   }
 }
diff --git a/src/components/overlay/overlay.stories.ts b/src/components/overlay/overlay.stories.ts
index ccfb4f5a13..f2313bf24b 100644
--- a/src/components/overlay/overlay.stories.ts
+++ b/src/components/overlay/overlay.stories.ts
@@ -225,10 +225,12 @@ const FormTemplate = (args: Args): TemplateResult => html`
         method and returning the form values to update the details.
       </div>
       <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-        <sbb-form-field error-space="none" label="Message" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Message</label>
           <input placeholder="Your custom massage" value="Hello 👋" name="message" />
         </sbb-form-field>
-        <sbb-form-field error-space="none" label="Favorite animal" size="m">
+        <sbb-form-field error-space="none" size="m">
+          <label>Favorite animal</label>
           <select name="animal">
             <option>Red Panda</option>
             <option>Cheetah</option>

From bff75f28a27d5a146257921cc674a09675837eb4 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Thu, 4 Apr 2024 11:06:07 +0200
Subject: [PATCH 59/65] fix: integrity

---
 .../dialog-title/dialog-title.stories.ts       |  3 ++-
 src/components/dialog/dialog/dialog.ts         |  6 +++---
 src/components/dialog/dialog/readme.md         | 18 +++++++++---------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index 1db1561159..32de1aa990 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -4,7 +4,8 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { breakpoints, sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
+import { breakpoints } from '../../core/dom';
 
 import { SbbDialogTitleElement } from './dialog-title';
 import readme from './readme.md?raw';
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 6fd4ddc0cd..29374d7d5e 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -27,7 +27,7 @@ import '../../title';
 const dialogRefs: SbbDialogElement[] = [];
 let nextId = 0;
 
-type CloseEventDetails = {
+export type SbbDialogCloseEventDetails = {
   returnValue?: any;
   closeTarget?: HTMLElement;
 };
@@ -41,7 +41,7 @@ type CloseEventDetails = {
  * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
- * @event {CustomEvent<CloseEventDetails>} didClose - Emits whenever the `sbb-dialog` is closed.
+ * @event {CustomEvent<SbbDialogCloseEventDetails>} didClose - Emits whenever the `sbb-dialog` is closed.
  * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
@@ -102,7 +102,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   private _willClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.willClose);
 
   /** Emits whenever the `sbb-dialog` is closed. */
-  private _didClose: EventEmitter<CloseEventDetails> = new EventEmitter(
+  private _didClose: EventEmitter<SbbDialogCloseEventDetails> = new EventEmitter(
     this,
     SbbDialogElement.events.didClose,
   );
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index e48869ccf8..999f39e3e8 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -109,18 +109,18 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro
 
 ## Events
 
-| Name        | Type                             | Description                                                                     | Inherited From |
-| ----------- | -------------------------------- | ------------------------------------------------------------------------------- | -------------- |
-| `willOpen`  | `CustomEvent<void>`              | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
-| `didOpen`   | `CustomEvent<void>`              | Emits whenever the `sbb-dialog` is opened.                                      |                |
-| `willClose` | `CustomEvent<void>`              | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
-| `didClose`  | `CustomEvent<CloseEventDetails>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
+| Name        | Type                                      | Description                                                                     | Inherited From |
+| ----------- | ----------------------------------------- | ------------------------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>`                       | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. |                |
+| `didOpen`   | `CustomEvent<void>`                       | Emits whenever the `sbb-dialog` is opened.                                      |                |
+| `willClose` | `CustomEvent<void>`                       | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. |                |
+| `didClose`  | `CustomEvent<SbbDialogCloseEventDetails>` | Emits whenever the `sbb-dialog` is closed.                                      |                |
 
 ## CSS Properties
 
-| Name                   | Default                              | Description                                                                                                                                                                                                   |
-| ---------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-dialog-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
+| Name                   | Default                      | Description                                                                                                                                                                                           |
+| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-dialog-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
 
 ## Slots
 

From 93fabd48f40343b1309d5bdbc79e07cfc0fe6b9e Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Mon, 8 Apr 2024 13:56:28 +0200
Subject: [PATCH 60/65] fix: lint

---
 .../dialog-actions/dialog-actions.spec.ts     |  4 +--
 .../dialog-actions/dialog-actions.stories.ts  |  7 +++-
 .../dialog-content/dialog-content.spec.ts     |  8 +++--
 .../dialog-content/dialog-content.stories.ts  |  2 +-
 .../dialog/dialog-content/readme.md           |  2 +-
 .../dialog/dialog-title/dialog-title.e2e.ts   |  4 ++-
 .../dialog/dialog-title/dialog-title.spec.ts  |  6 ++--
 .../dialog-title/dialog-title.stories.ts      |  2 +-
 src/components/dialog/dialog-title/readme.md  | 12 +++++--
 src/components/dialog/dialog/dialog.e2e.ts    | 32 +++++++++----------
 src/components/dialog/dialog/dialog.spec.ts   |  4 +--
 .../dialog/dialog/dialog.stories.ts           | 20 ++++++++----
 src/components/dialog/dialog/dialog.ts        |  8 ++---
 src/components/dialog/dialog/readme.md        | 16 +++++-----
 src/components/overlay/overlay.stories.ts     |  2 --
 .../pages/home/home--logged-in.stories.ts     |  9 +++---
 16 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
index f5b88d23d7..fba4e0c8db 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -6,7 +6,7 @@ import './dialog-actions';
 
 describe('sbb-dialog-actions', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+    const root = await fixture(html`<sbb-dialog-actions slot="actions"></sbb-dialog-actions>`);
 
     await expect(root).dom.to.equalSnapshot();
 
@@ -20,5 +20,5 @@ describe('sbb-dialog-actions', () => {
     `);
   });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-actions></sbb-dialog-actions>`);
+  testA11yTreeSnapshot(html`<sbb-dialog-actions slot="actions"></sbb-dialog-actions>`);
 });
diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
index 8a1dbd3173..1985a469db 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -11,7 +11,12 @@ import '../../button/secondary-button';
 import '../../link';
 
 const Template = (): TemplateResult =>
-  html`<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
+  html`<sbb-dialog-actions
+    slot="actions"
+    align-group="stretch"
+    orientation="vertical"
+    horizontal-from="medium"
+  >
     <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
diff --git a/src/components/dialog/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
index 8d8684cacb..2d907f1e7c 100644
--- a/src/components/dialog/dialog-content/dialog-content.spec.ts
+++ b/src/components/dialog/dialog-content/dialog-content.spec.ts
@@ -4,9 +4,13 @@ import './dialog-content';
 
 describe('sbb-dialog-content', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
+    const root = await fixture(
+      html`<sbb-dialog-content slot="content">Content</sbb-dialog-content>`,
+    );
 
-    expect(root).dom.to.be.equal(`<sbb-dialog-content slot="content">Content</sbb-dialog-content>`);
+    expect(root).dom.to.be.equal(
+      `<sbb-dialog-content slot="content" slot="content">Content</sbb-dialog-content>`,
+    );
 
     expect(root).shadowDom.to.be.equal(`
       <div class="sbb-dialog-content">
diff --git a/src/components/dialog/dialog-content/dialog-content.stories.ts b/src/components/dialog/dialog-content/dialog-content.stories.ts
index 411760755f..0ae7ae87e7 100644
--- a/src/components/dialog/dialog-content/dialog-content.stories.ts
+++ b/src/components/dialog/dialog-content/dialog-content.stories.ts
@@ -7,7 +7,7 @@ import './dialog-content';
 import readme from './readme.md?raw';
 
 const Template = (): TemplateResult =>
-  html`<sbb-dialog-content>This is a dialog content.</sbb-dialog-content>`;
+  html`<sbb-dialog-content slot="content">This is a dialog content.</sbb-dialog-content>`;
 
 export const Default: StoryObj = { render: Template };
 
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
index 468ec6086b..0b948bcd86 100644
--- a/src/components/dialog/dialog-content/readme.md
+++ b/src/components/dialog/dialog-content/readme.md
@@ -2,7 +2,7 @@ Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/componen
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 ```
 
diff --git a/src/components/dialog/dialog-title/dialog-title.e2e.ts b/src/components/dialog/dialog-title/dialog-title.e2e.ts
index 0e93721218..99f97a6fb9 100644
--- a/src/components/dialog/dialog-title/dialog-title.e2e.ts
+++ b/src/components/dialog/dialog-title/dialog-title.e2e.ts
@@ -9,7 +9,9 @@ describe('sbb-dialog-title', () => {
   let element: SbbDialogTitleElement;
 
   beforeEach(async () => {
-    element = await fixture(html`<sbb-dialog-title back-button>Title</sbb-dialog-title>`);
+    element = await fixture(
+      html`<sbb-dialog-title slot="title" back-button>Title</sbb-dialog-title>`,
+    );
   });
 
   it('renders', async () => {
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 78f3db9608..6e0200b8e6 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -6,10 +6,10 @@ import './dialog-title';
 
 describe('sbb-dialog-title', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+    const root = await fixture(html`<sbb-dialog-title slot="title">Title</sbb-dialog-title>`);
 
     expect(root).dom.to.be.equal(`
-      <sbb-dialog-title
+      <sbb-dialog-title slot="title"
        level="2"
        role="heading"
        slot="title"
@@ -19,5 +19,5 @@ describe('sbb-dialog-title', () => {
     await expect(root).shadowDom.to.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
+  testA11yTreeSnapshot(html`<sbb-dialog-title slot="title">Title</sbb-dialog-title>`);
 });
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index 32de1aa990..8b5cc37835 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -64,7 +64,7 @@ const defaultArgs: Args = {
 };
 
 const Template = (args: Args): TemplateResult =>
-  html`<sbb-dialog-title ${sbbSpread(args)}>Dialog title</sbb-dialog-title>`;
+  html`<sbb-dialog-title slot="title" ${sbbSpread(args)}>Dialog title</sbb-dialog-title>`;
 
 export const Default: StoryObj = {
   render: Template,
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 6fcc3b02fc..310ebd7a94 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -2,7 +2,11 @@ The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-ti
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title accessibility-close-label="Close button" accessibility-back-label="Back button">
+  <sbb-dialog-title
+    slot="title"
+    accessibility-close-label="Close button"
+    accessibility-back-label="Back button"
+  >
     A describing title of the dialog
   </sbb-dialog-title>
 </sbb-dialog>
@@ -18,7 +22,9 @@ In addition, the title can be hidden when scrolling down the content, to provide
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title hide-on-scroll="small"> A describing title of the dialog </sbb-dialog-title>
+  <sbb-dialog-title slot="title" hide-on-scroll="small">
+    A describing title of the dialog
+  </sbb-dialog-title>
 </sbb-dialog>
 ```
 
@@ -28,7 +34,7 @@ A close button is always displayed and can be used to close the dialog. Optional
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title back-button> A describing title of the dialog </sbb-dialog-title>
+  <sbb-dialog-title slot="title" back-button> A describing title of the dialog </sbb-dialog-title>
 </sbb-dialog>
 ```
 
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index 57d09543ab..5916445492 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -37,9 +37,9 @@ describe('sbb-dialog', () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-1" disable-animation>
-        <sbb-dialog-title>Title</sbb-dialog-title>
-        <sbb-dialog-content>Dialog content</sbb-dialog-content>
-        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+        <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
     ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
@@ -250,15 +250,15 @@ describe('sbb-dialog', () => {
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
     element = await fixture(html`
       <sbb-dialog id="my-dialog-3" disable-animation>
-        <sbb-dialog-title>Title</sbb-dialog-title>
-        <sbb-dialog-content>Dialog content</sbb-dialog-content>
-        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+        <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
       </sbb-dialog>
 
       <sbb-dialog id="stacked-dialog" disable-animation>
-        <sbb-dialog-title>Stacked title</sbb-dialog-title>
-        <sbb-dialog-content>Dialog content</sbb-dialog-content>
-        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+        <sbb-dialog-title slot="title">Stacked title</sbb-dialog-title>
+        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
 
@@ -323,12 +323,12 @@ describe('sbb-dialog', () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-4" disable-animation>
-        <sbb-dialog-title>Title</sbb-dialog-title>
-        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
 
         <sbb-dialog id="inner-dialog" slot="content" disable-animation>
-          <sbb-dialog-title>Inner Dialog title</sbb-dialog-title>
-          <sbb-dialog-content>Dialog content</sbb-dialog-content>
+          <sbb-dialog-title slot="title">Inner Dialog title</sbb-dialog-title>
+          <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
         </sbb-dialog>
       </sbb-dialog>
     `);
@@ -412,8 +412,8 @@ describe('sbb-dialog with long content', () => {
     await setViewport({ width: 900, height: 300 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-1" disable-animation>
-        <sbb-dialog-title hide-on-scroll="">Title</sbb-dialog-title>
-        <sbb-dialog-content>
+        <sbb-dialog-title slot="title" hide-on-scroll="">Title</sbb-dialog-title>
+        <sbb-dialog-content slot="content">
           Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
           face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
           saw that Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be
@@ -428,7 +428,7 @@ describe('sbb-dialog with long content', () => {
           pioneered fantasy literature. Tolkien's linguistic brilliance and mythic passion converge
           in a literary legacy that continues to transport readers to magical realms.
         </sbb-dialog-content>
-        <sbb-dialog-actions>Action group</sbb-dialog-actions>
+        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
   });
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index f85a75bf1c..68438ba067 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -15,8 +15,8 @@ describe(`sbb-dialog`, () => {
     beforeEach(async () => {
       root = await fixture(
         html` <sbb-dialog disable-animation>
-          <sbb-dialog-title>Title</sbb-dialog-title>
-          <sbb-dialog-content>Content</sbb-dialog-content>
+          <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+          <sbb-dialog-content slot="content">Content</sbb-dialog-content>
         </sbb-dialog>`,
       );
       root.open();
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 1b2ecc65ef..16b9329f1e 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -174,7 +174,12 @@ const triggerButton = (dialogId: string, triggerId?: string): TemplateResult =>
 `;
 
 const dialogActions = (negative: boolean): TemplateResult => html`
-  <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
+  <sbb-dialog-actions
+    slot="actions"
+    align-group="stretch"
+    orientation="vertical"
+    horizontal-from="medium"
+  >
     <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
@@ -226,6 +231,7 @@ const dialogTitle = (
   accessibilityBackLabel: string,
 ): TemplateResult => html`
   <sbb-dialog-title
+    slot="title"
     level=${level}
     ?back-button=${backButton}
     hide-on-scroll=${hideOnScroll === 'Deactivate hide on scroll' ? nothing : hideOnScroll}
@@ -255,7 +261,7 @@ const DefaultTemplate = ({
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content>
+    <sbb-dialog-content slot="content">
       <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
     </sbb-dialog-content>
     ${dialogActions(args.negative)}
@@ -273,7 +279,7 @@ const LongContentTemplate = ({
   ${triggerButton('my-dialog-2')}
   <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content data-testid="content">
+    <sbb-dialog-content slot="content" data-testid="content">
       Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
       like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
       Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
@@ -325,7 +331,7 @@ const FormTemplate = ({
     ${sbbSpread(args)}
   >
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content>
+    <sbb-dialog-content slot="content">
       <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
         Submit the form below to close the dialog box using the
         <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
@@ -362,7 +368,7 @@ const NoFooterTemplate = ({
   ${triggerButton('my-dialog-4')}
   <sbb-dialog data-testid="dialog" id="my-dialog-4" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content>
+    <sbb-dialog-content slot="content">
       <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
         “What really knocks me out is a book that, when you're all done reading it, you wish the
         author that wrote it was a terrific friend of yours and you could call him up on the phone
@@ -384,7 +390,7 @@ const NestedTemplate = ({
   ${triggerButton('my-dialog-5')}
   <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content
+    <sbb-dialog-content slot="content"
       >Click the button to open a nested
       dialog.&nbsp;${triggerButton('my-dialog-6', 'nested-trigger-id')}</sbb-dialog-content
     >
@@ -396,7 +402,7 @@ const NestedTemplate = ({
         accessibilityCloseLabel,
         accessibilityBackLabel,
       )}
-      <sbb-dialog-content
+      <sbb-dialog-content slot="content"
         >Nested dialog content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
         nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 29374d7d5e..aec8997165 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -8,9 +8,9 @@ import { SbbLanguageController } from '../../core/controllers';
 import { SbbScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
 import { EventEmitter } from '../../core/eventing';
 import { i18nDialog } from '../../core/i18n';
+import type { SbbOpenedClosedState } from '../../core/interfaces';
 import { SbbNegativeMixin } from '../../core/mixins';
 import { AgnosticResizeObserver } from '../../core/observers';
-import type { SbbOverlayState } from '../../core/overlay';
 import { applyInertMechanism, removeInertMechanism } from '../../core/overlay';
 import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only';
 import type { SbbDialogActionsElement } from '../dialog-actions';
@@ -75,11 +75,11 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
   /*
    * The state of the dialog.
    */
-  private set _state(state: SbbOverlayState) {
+  private set _state(state: SbbOpenedClosedState) {
     this.dataset.state = state;
   }
-  private get _state(): SbbOverlayState {
-    return this.dataset?.state as SbbOverlayState;
+  private get _state(): SbbOpenedClosedState {
+    return this.dataset?.state as SbbOpenedClosedState;
   }
 
   // We use a timeout as a workaround to the "ResizeObserver loop completed with undelivered notifications" error.
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 999f39e3e8..4ff46a423e 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -11,8 +11,8 @@ It offers the following features:
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title>Title</sbb-dialog-title>
-  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 ```
 
@@ -25,8 +25,8 @@ It's not necessary to set the slots explicitly on the dialog's inner components,
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title>Title</sbb-dialog-title>
-  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
   <sbb-dialog-action>
     <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
     <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
@@ -50,8 +50,8 @@ whether it has been opened by click or keyboard, so that the focus can be better
 ></sbb-button>
 
 <sbb-dialog id="my-dialog">
-  <sbb-dialog-title>Title</sbb-dialog-title>
-  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 
 <script>
@@ -77,8 +77,8 @@ It's possible to display the component in `negative` variant using the self-name
 
 ```html
 <sbb-dialog negative>
-  <sbb-dialog-title>Title</sbb-dialog-title>
-  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
+  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 ```
 
diff --git a/src/components/overlay/overlay.stories.ts b/src/components/overlay/overlay.stories.ts
index 3ab6ad28cf..599402a4ba 100644
--- a/src/components/overlay/overlay.stories.ts
+++ b/src/components/overlay/overlay.stories.ts
@@ -225,8 +225,6 @@ const FormTemplate = (args: Args): TemplateResult => html`
         method and returning the form values to update the details.
       </div>
       <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-        <sbb-form-field error-space="none" size="m">
-          <label>Message</label>
         <sbb-form-field error-space="none" size="m">
           <label>Message</label>
           <input placeholder="Your custom massage" value="Hello 👋" name="message" />
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index e50baec719..3b18ff5129 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -190,9 +190,9 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-secondary-button>
 
           <sbb-dialog id="my-dialog" title-content="My Dialog">
-            <sbb-dialog-title back-button>My Dialog</sbb-dialog-title>
+            <sbb-dialog-title slot="title" back-button>My Dialog</sbb-dialog-title>
 
-            <sbb-dialog-content>
+            <sbb-dialog-content slot="content">
               <p style="margin-top: 0;">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -211,6 +211,7 @@ const Template = (args: Args): TemplateResult => html`
             </sbb-dialog-content>
 
             <sbb-dialog-actions
+              slot="actions"
               align-group="stretch"
               orientation="vertical"
               horizontal-from="medium"
@@ -230,8 +231,8 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-dialog>
 
           <sbb-dialog id="my-stacked-dialog">
-            <sbb-dialog-title back-button>Stacked Dialog</sbb-dialog-title>
-            <sbb-dialog-content>
+            <sbb-dialog-title slot="title" back-button>Stacked Dialog</sbb-dialog-title>
+            <sbb-dialog-content slot="content">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua.
             </sbb-dialog-content>

From d9fb43bf132edd9f54d8ff91d0337a1fd54327ac Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 10 Apr 2024 09:44:42 +0200
Subject: [PATCH 61/65] fix: lint

---
 .../dialog-actions/dialog-actions.spec.ts     |  4 +-
 .../dialog-actions/dialog-actions.stories.ts  |  8 ++--
 .../dialog/dialog-actions/dialog-actions.ts   |  4 +-
 src/components/dialog/dialog-actions/index.ts |  2 +-
 .../dialog-content/dialog-content.spec.ts     |  2 +-
 .../dialog-content/dialog-content.stories.ts  |  2 +-
 .../dialog/dialog-content/dialog-content.ts   |  2 +-
 src/components/dialog/dialog-content/index.ts |  2 +-
 .../dialog/dialog-title/dialog-title.e2e.ts   |  4 +-
 .../dialog/dialog-title/dialog-title.spec.ts  |  4 +-
 .../dialog-title/dialog-title.stories.ts      |  6 +--
 .../dialog/dialog-title/dialog-title.ts       | 16 ++++----
 src/components/dialog/dialog-title/index.ts   |  2 +-
 src/components/dialog/dialog/dialog.e2e.ts    | 18 ++++-----
 src/components/dialog/dialog/dialog.spec.ts   | 12 +++---
 .../dialog/dialog/dialog.stories.ts           | 30 +++++++-------
 src/components/dialog/dialog/dialog.ts        | 39 ++++++++++---------
 src/components/dialog/dialog/index.ts         |  2 +-
 src/components/dialog/index.ts                |  8 ++--
 19 files changed, 85 insertions(+), 82 deletions(-)

diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
index fba4e0c8db..21b49e481c 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import './dialog-actions';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import './dialog-actions.js';
 
 describe('sbb-dialog-actions', () => {
   it('renders', async () => {
diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
index 1985a469db..b4653e66e9 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -3,12 +3,12 @@ import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import './dialog-actions';
+import './dialog-actions.js';
 import readme from './readme.md?raw';
 
-import '../../button/button';
-import '../../button/secondary-button';
-import '../../link';
+import '../../button/button/index.js';
+import '../../button/secondary-button/index.js';
+import '../../link/index.js';
 
 const Template = (): TemplateResult =>
   html`<sbb-dialog-actions
diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
index 207193734f..71151c7ee4 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -2,8 +2,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbActionGroupElement } from '../../action-group';
-import { hostAttributes } from '../../core/decorators';
+import { SbbActionGroupElement } from '../../action-group/index.js';
+import { hostAttributes } from '../../core/decorators/index.js';
 
 import style from './dialog-actions.scss?lit&inline';
 
diff --git a/src/components/dialog/dialog-actions/index.ts b/src/components/dialog/dialog-actions/index.ts
index 39621636d6..12fa6f2f6a 100644
--- a/src/components/dialog/dialog-actions/index.ts
+++ b/src/components/dialog/dialog-actions/index.ts
@@ -1 +1 @@
-export * from './dialog-actions';
+export * from './dialog-actions.js';
diff --git a/src/components/dialog/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
index 2d907f1e7c..7b2fe6df1b 100644
--- a/src/components/dialog/dialog-content/dialog-content.spec.ts
+++ b/src/components/dialog/dialog-content/dialog-content.spec.ts
@@ -1,6 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
-import './dialog-content';
+import './dialog-content.js';
 
 describe('sbb-dialog-content', () => {
   it('renders', async () => {
diff --git a/src/components/dialog/dialog-content/dialog-content.stories.ts b/src/components/dialog/dialog-content/dialog-content.stories.ts
index 0ae7ae87e7..18d39340f7 100644
--- a/src/components/dialog/dialog-content/dialog-content.stories.ts
+++ b/src/components/dialog/dialog-content/dialog-content.stories.ts
@@ -3,7 +3,7 @@ import type { Decorator, Meta, StoryObj } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import './dialog-content';
+import './dialog-content.js';
 import readme from './readme.md?raw';
 
 const Template = (): TemplateResult =>
diff --git a/src/components/dialog/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
index aa14037fce..b2a6601cbf 100644
--- a/src/components/dialog/dialog-content/dialog-content.ts
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -2,7 +2,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/decorators';
+import { hostAttributes } from '../../core/decorators/index.js';
 
 import style from './dialog-content.scss?lit&inline';
 
diff --git a/src/components/dialog/dialog-content/index.ts b/src/components/dialog/dialog-content/index.ts
index 982cb866e9..a3b11d2fd3 100644
--- a/src/components/dialog/dialog-content/index.ts
+++ b/src/components/dialog/dialog-content/index.ts
@@ -1 +1 @@
-export * from './dialog-content';
+export * from './dialog-content.js';
diff --git a/src/components/dialog/dialog-title/dialog-title.e2e.ts b/src/components/dialog/dialog-title/dialog-title.e2e.ts
index 99f97a6fb9..b77805070f 100644
--- a/src/components/dialog/dialog-title/dialog-title.e2e.ts
+++ b/src/components/dialog/dialog-title/dialog-title.e2e.ts
@@ -1,9 +1,9 @@
 import { assert, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { EventSpy, waitForLitRender } from '../../core/testing';
+import { EventSpy, waitForLitRender } from '../../core/testing/index.js';
 
-import { SbbDialogTitleElement } from './dialog-title';
+import { SbbDialogTitleElement } from './dialog-title.js';
 
 describe('sbb-dialog-title', () => {
   let element: SbbDialogTitleElement;
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index 6e0200b8e6..ccec1056c2 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -1,8 +1,8 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-import './dialog-title';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import './dialog-title.js';
 
 describe('sbb-dialog-title', () => {
   it('renders', async () => {
diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index 8b5cc37835..0a95a59aea 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -4,10 +4,10 @@ import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-c
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { sbbSpread } from '../../../storybook/helpers/spread';
-import { breakpoints } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { breakpoints } from '../../core/dom/index.js';
 
-import { SbbDialogTitleElement } from './dialog-title';
+import { SbbDialogTitleElement } from './dialog-title.js';
 import readme from './readme.md?raw';
 
 const level: InputType = {
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 6035f71b87..de0ed42b77 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -3,14 +3,14 @@ import { nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbFocusVisibleWithinController } from '../../core/a11y';
-import { SbbLanguageController } from '../../core/controllers';
-import { hostAttributes } from '../../core/decorators';
-import type { Breakpoint } from '../../core/dom';
-import { EventEmitter } from '../../core/eventing';
-import { i18nCloseDialog, i18nGoBack } from '../../core/i18n';
-import { SbbTitleElement } from '../../title';
-import '../../button';
+import { SbbFocusVisibleWithinController } from '../../core/a11y/index.js';
+import { SbbLanguageController } from '../../core/controllers/index.js';
+import { hostAttributes } from '../../core/decorators/index.js';
+import type { Breakpoint } from '../../core/dom/index.js';
+import { EventEmitter } from '../../core/eventing/index.js';
+import { i18nCloseDialog, i18nGoBack } from '../../core/i18n/index.js';
+import { SbbTitleElement } from '../../title/index.js';
+import '../../button/index.js';
 
 import style from './dialog-title.scss?lit&inline';
 
diff --git a/src/components/dialog/dialog-title/index.ts b/src/components/dialog/dialog-title/index.ts
index 10f637b04f..9522560630 100644
--- a/src/components/dialog/dialog-title/index.ts
+++ b/src/components/dialog/dialog-title/index.ts
@@ -1 +1 @@
-export * from './dialog-title';
+export * from './dialog-title.js';
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index 5916445492..53e44026c3 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -2,15 +2,15 @@ import { assert, expect, fixture } from '@open-wc/testing';
 import { sendKeys, setViewport } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { i18nDialog } from '../../core/i18n';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-
-import { SbbDialogElement } from './dialog';
-import '../../button';
-import '../../icon';
-import '../dialog-title';
-import '../dialog-content';
-import '../dialog-actions';
+import { i18nDialog } from '../../core/i18n/index.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing/index.js';
+
+import { SbbDialogElement } from './dialog.js';
+import '../../button/index.js';
+import '../../icon/index.js';
+import '../dialog-title/index.js';
+import '../dialog-content/index.js';
+import '../dialog-actions/index.js';
 
 async function openDialog(element: SbbDialogElement): Promise<void> {
   const willOpen = new EventSpy(SbbDialogElement.events.willOpen);
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index 68438ba067..c316aa4bb8 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForLitRender } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { waitForLitRender } from '../../core/testing/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
 
-import type { SbbDialogElement } from './dialog';
-import './dialog';
-import '../dialog-title';
-import '../dialog-content';
+import type { SbbDialogElement } from './dialog.js';
+import './dialog.js';
+import '../dialog-title/index.js';
+import '../dialog-content/index.js';
 
 describe(`sbb-dialog`, () => {
   describe('renders an open dialog', async () => {
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 16b9329f1e..43e87cd271 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -9,28 +9,28 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { sbbSpread } from '../../../storybook/helpers/spread';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import { breakpoints } from '../../core/dom/breakpoint';
-import sampleImages from '../../core/images';
-import type { SbbTitleLevel } from '../../title';
-import { SbbDialogTitleElement } from '../dialog-title';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
+import { breakpoints } from '../../core/dom/breakpoint.js';
+import sampleImages from '../../core/images.js';
+import type { SbbTitleLevel } from '../../title/index.js';
+import { SbbDialogTitleElement } from '../dialog-title/index.js';
 
-import { SbbDialogElement } from './dialog';
+import { SbbDialogElement } from './dialog.js';
 import readme from './readme.md?raw';
 
-import '../../button';
-import '../../link';
-import '../../form-field';
-import '../../image';
-import '../dialog-content';
-import '../dialog-actions';
+import '../../button/index.js';
+import '../../link/index.js';
+import '../../form-field/index.js';
+import '../../image/index.js';
+import '../dialog-content/index.js';
+import '../dialog-actions/index.js';
 
 // Story interaction executed after the story renders
 const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index aec8997165..f6bf09e608 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -3,25 +3,29 @@ import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { SbbFocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../../core/a11y';
-import { SbbLanguageController } from '../../core/controllers';
-import { SbbScrollHandler, isValidAttribute, hostContext, isBreakpoint } from '../../core/dom';
-import { EventEmitter } from '../../core/eventing';
-import { i18nDialog } from '../../core/i18n';
-import type { SbbOpenedClosedState } from '../../core/interfaces';
-import { SbbNegativeMixin } from '../../core/mixins';
-import { AgnosticResizeObserver } from '../../core/observers';
-import { applyInertMechanism, removeInertMechanism } from '../../core/overlay';
-import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only';
-import type { SbbDialogActionsElement } from '../dialog-actions';
-import type { SbbDialogTitleElement } from '../dialog-title';
+import {
+  SbbFocusHandler,
+  getFirstFocusableElement,
+  setModalityOnNextFocus,
+} from '../../core/a11y/index.js';
+import { SbbLanguageController } from '../../core/controllers/index.js';
+import { SbbScrollHandler, hostContext, isBreakpoint } from '../../core/dom/index.js';
+import { EventEmitter } from '../../core/eventing/index.js';
+import { i18nDialog } from '../../core/i18n/index.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces/index.js';
+import { SbbNegativeMixin } from '../../core/mixins/index.js';
+import { AgnosticResizeObserver } from '../../core/observers/index.js';
+import { applyInertMechanism, removeInertMechanism } from '../../core/overlay/index.js';
+import type { SbbScreenReaderOnlyElement } from '../../screen-reader-only/index.js';
+import type { SbbDialogActionsElement } from '../dialog-actions/index.js';
+import type { SbbDialogTitleElement } from '../dialog-title/index.js';
 
 import style from './dialog.scss?lit&inline';
 
-import '../../button/secondary-button';
-import '../../button/transparent-button';
-import '../../screen-reader-only';
-import '../../title';
+import '../../button/secondary-button/index.js';
+import '../../button/transparent-button/index.js';
+import '../../screen-reader-only/index.js';
+import '../../title/index.js';
 
 // A global collection of existing dialogs
 const dialogRefs: SbbDialogElement[] = [];
@@ -347,8 +351,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
       .composedPath()
       .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
       .find(
-        (target) =>
-          target.hasAttribute('sbb-dialog-close') && !isValidAttribute(target, 'disabled'),
+        (target) => target.hasAttribute('sbb-dialog-close') && !target.hasAttribute('disabled'),
       );
 
     if (!dialogCloseElement) {
diff --git a/src/components/dialog/dialog/index.ts b/src/components/dialog/dialog/index.ts
index 20da8e550a..04aed2f9ab 100644
--- a/src/components/dialog/dialog/index.ts
+++ b/src/components/dialog/dialog/index.ts
@@ -1 +1 @@
-export * from './dialog';
+export * from './dialog.js';
diff --git a/src/components/dialog/index.ts b/src/components/dialog/index.ts
index 87640addb8..c281d3c0f6 100644
--- a/src/components/dialog/index.ts
+++ b/src/components/dialog/index.ts
@@ -1,4 +1,4 @@
-export * from './dialog';
-export * from './dialog-title';
-export * from './dialog-content';
-export * from './dialog-actions';
+export * from './dialog/index.js';
+export * from './dialog-title/index.js';
+export * from './dialog-content/index.js';
+export * from './dialog-actions/index.js';

From d841ff9fb05e1868c88b8e589bf9d1d1a3801892 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 10 Apr 2024 10:04:46 +0200
Subject: [PATCH 62/65] fix: review

---
 .../dialog-content/dialog-content.stories.ts     |  2 +-
 src/components/dialog/dialog-content/readme.md   |  2 +-
 .../dialog/dialog-title/dialog-title.ts          |  4 +++-
 src/components/dialog/dialog-title/readme.md     |  1 +
 src/components/dialog/dialog/dialog.ts           | 16 +++++-----------
 src/components/dialog/dialog/readme.md           | 16 ++++++++--------
 .../pages/home/home--logged-in.stories.ts        |  9 ++++-----
 7 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/dialog/dialog-content/dialog-content.stories.ts b/src/components/dialog/dialog-content/dialog-content.stories.ts
index 18d39340f7..7a25eb0a47 100644
--- a/src/components/dialog/dialog-content/dialog-content.stories.ts
+++ b/src/components/dialog/dialog-content/dialog-content.stories.ts
@@ -7,7 +7,7 @@ import './dialog-content.js';
 import readme from './readme.md?raw';
 
 const Template = (): TemplateResult =>
-  html`<sbb-dialog-content slot="content">This is a dialog content.</sbb-dialog-content>`;
+  html`<sbb-dialog-content>This is a dialog content.</sbb-dialog-content>`;
 
 export const Default: StoryObj = { render: Template };
 
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
index 0b948bcd86..468ec6086b 100644
--- a/src/components/dialog/dialog-content/readme.md
+++ b/src/components/dialog/dialog-content/readme.md
@@ -2,7 +2,7 @@ Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/componen
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 ```
 
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index de0ed42b77..7ef308b8d0 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -10,10 +10,12 @@ import type { Breakpoint } from '../../core/dom/index.js';
 import { EventEmitter } from '../../core/eventing/index.js';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n/index.js';
 import { SbbTitleElement } from '../../title/index.js';
-import '../../button/index.js';
 
 import style from './dialog-title.scss?lit&inline';
 
+import '../../button/secondary-button/index.js';
+import '../../button/transparent-button/index.js';
+
 /**
  * It displays a title inside a dialog header.
  *
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 310ebd7a94..edf9e537fb 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -4,6 +4,7 @@ The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-ti
 <sbb-dialog>
   <sbb-dialog-title
     slot="title"
+    back-button
     accessibility-close-label="Close button"
     accessibility-back-label="Back button"
   >
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index f6bf09e608..2378f2146b 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -22,10 +22,7 @@ import type { SbbDialogTitleElement } from '../dialog-title/index.js';
 
 import style from './dialog.scss?lit&inline';
 
-import '../../button/secondary-button/index.js';
-import '../../button/transparent-button/index.js';
 import '../../screen-reader-only/index.js';
-import '../../title/index.js';
 
 // A global collection of existing dialogs
 const dialogRefs: SbbDialogElement[] = [];
@@ -80,10 +77,10 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
    * The state of the dialog.
    */
   private set _state(state: SbbOpenedClosedState) {
-    this.dataset.state = state;
+    this.setAttribute('data-state', state);
   }
   private get _state(): SbbOpenedClosedState {
-    return this.dataset?.state as SbbOpenedClosedState;
+    return this.getAttribute('data-state') as SbbOpenedClosedState;
   }
 
   // We use a timeout as a workaround to the "ResizeObserver loop completed with undelivered notifications" error.
@@ -233,7 +230,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    this._state = this._state || 'closed';
+    this._state ||= 'closed';
     this._dialogController?.abort();
     this._dialogController = new AbortController();
 
@@ -453,11 +450,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
 
   private _setOverflowsDataAttribute(): void {
     this.toggleAttribute('data-overflows', this._overflows);
-    this._dialogTitleElement &&
-      this._dialogTitleElement.toggleAttribute('data-overflows', this._overflows);
-    if (this._dialogActionsElement) {
-      this._dialogActionsElement.toggleAttribute('data-overflows', this._overflows);
-    }
+    this._dialogTitleElement?.toggleAttribute('data-overflows', this._overflows);
+    this._dialogActionsElement?.toggleAttribute('data-overflows', this._overflows);
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 4ff46a423e..999f39e3e8 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -11,8 +11,8 @@ It offers the following features:
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 ```
 
@@ -25,8 +25,8 @@ It's not necessary to set the slots explicitly on the dialog's inner components,
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
   <sbb-dialog-action>
     <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
     <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
@@ -50,8 +50,8 @@ whether it has been opened by click or keyboard, so that the focus can be better
 ></sbb-button>
 
 <sbb-dialog id="my-dialog">
-  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 
 <script>
@@ -77,8 +77,8 @@ It's possible to display the component in `negative` variant using the self-name
 
 ```html
 <sbb-dialog negative>
-  <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-  <sbb-dialog-content slot="content">Dialog content.</sbb-dialog-content>
+  <sbb-dialog-title>Title</sbb-dialog-title>
+  <sbb-dialog-content>Dialog content.</sbb-dialog-content>
 </sbb-dialog>
 ```
 
diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts
index 34a7637399..fca4a43c9a 100644
--- a/src/storybook/pages/home/home--logged-in.stories.ts
+++ b/src/storybook/pages/home/home--logged-in.stories.ts
@@ -190,9 +190,9 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-secondary-button>
 
           <sbb-dialog id="my-dialog" title-content="My Dialog">
-            <sbb-dialog-title slot="title" back-button>My Dialog</sbb-dialog-title>
+            <sbb-dialog-title back-button>My Dialog</sbb-dialog-title>
 
-            <sbb-dialog-content slot="content">
+            <sbb-dialog-content>
               <p style="margin-top: 0;">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
@@ -211,7 +211,6 @@ const Template = (args: Args): TemplateResult => html`
             </sbb-dialog-content>
 
             <sbb-dialog-actions
-              slot="actions"
               align-group="stretch"
               orientation="vertical"
               horizontal-from="medium"
@@ -231,8 +230,8 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-dialog>
 
           <sbb-dialog id="my-stacked-dialog">
-            <sbb-dialog-title slot="title" back-button>Stacked Dialog</sbb-dialog-title>
-            <sbb-dialog-content slot="content">
+            <sbb-dialog-title back-button>Stacked Dialog</sbb-dialog-title>
+            <sbb-dialog-content>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
               incididunt ut labore et dolore magna aliqua.
             </sbb-dialog-content>

From 07750470a758846d2812383556f03b9dd561c419 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 10 Apr 2024 10:53:32 +0200
Subject: [PATCH 63/65] fix: cssprop documentation

---
 src/components/dialog/dialog-title/dialog-title.ts | 4 ++++
 src/components/dialog/dialog-title/readme.md       | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 7ef308b8d0..3335fda8a7 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -20,6 +20,10 @@ import '../../button/transparent-button/index.js';
  * It displays a title inside a dialog header.
  *
  * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
+ * @cssprop --sbb-title-margin-block-start - This property is inherited from `SbbTitleElement`
+ * and is not relevant to dialog title margin customization.
+ * @cssprop --sbb-title-margin-block-end - This property is inherited from `SbbTitleElement`
+ * and is not relevant to dialog title margin customization.
  */
 @customElement('sbb-dialog-title')
 @hostAttributes({
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index edf9e537fb..9266199509 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -66,10 +66,10 @@ If a back button is displayed it emits a `requestBackAction` event on click.
 
 ## CSS Properties
 
-| Name                             | Default                           | Description                      |
-| -------------------------------- | --------------------------------- | -------------------------------- |
-| `--sbb-title-margin-block-start` | `var(--sbb-spacing-responsive-m)` | Margin block start of the title. |
-| `--sbb-title-margin-block-end`   | `var(--sbb-spacing-responsive-s)` | Margin block end of the title.   |
+| Name                             | Default                           | Description                                                                                                 |
+| -------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `--sbb-title-margin-block-start` | `var(--sbb-spacing-responsive-m)` | This property is inherited from `SbbTitleElement` and is not relevant to dialog title margin customization. |
+| `--sbb-title-margin-block-end`   | `var(--sbb-spacing-responsive-s)` | This property is inherited from `SbbTitleElement` and is not relevant to dialog title margin customization. |
 
 ## Slots
 

From a88d2f8a0fa719d1db2f12dd3ddb788ba26bce80 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 10 Apr 2024 12:38:49 +0200
Subject: [PATCH 64/65] fix: remove hideHeader play story

---
 .../dialog/dialog-title/dialog-title.stories.ts       |  2 +-
 src/components/dialog/dialog-title/readme.md          |  6 ++----
 src/components/dialog/dialog/dialog.stories.ts        | 11 -----------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/components/dialog/dialog-title/dialog-title.stories.ts b/src/components/dialog/dialog-title/dialog-title.stories.ts
index 0a95a59aea..4bfccfd387 100644
--- a/src/components/dialog/dialog-title/dialog-title.stories.ts
+++ b/src/components/dialog/dialog-title/dialog-title.stories.ts
@@ -64,7 +64,7 @@ const defaultArgs: Args = {
 };
 
 const Template = (args: Args): TemplateResult =>
-  html`<sbb-dialog-title slot="title" ${sbbSpread(args)}>Dialog title</sbb-dialog-title>`;
+  html`<sbb-dialog-title ${sbbSpread(args)}>Dialog title</sbb-dialog-title>`;
 
 export const Default: StoryObj = {
   render: Template,
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 9266199509..0adc518539 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -23,9 +23,7 @@ In addition, the title can be hidden when scrolling down the content, to provide
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title slot="title" hide-on-scroll="small">
-    A describing title of the dialog
-  </sbb-dialog-title>
+  <sbb-dialog-title hide-on-scroll="small"> A describing title of the dialog </sbb-dialog-title>
 </sbb-dialog>
 ```
 
@@ -35,7 +33,7 @@ A close button is always displayed and can be used to close the dialog. Optional
 
 ```html
 <sbb-dialog>
-  <sbb-dialog-title slot="title" back-button> A describing title of the dialog </sbb-dialog-title>
+  <sbb-dialog-title back-button> A describing title of the dialog </sbb-dialog-title>
 </sbb-dialog>
 ```
 
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 43e87cd271..1df309dc5e 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -46,16 +46,6 @@ const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
   await userEvent.click(button);
 };
 
-const hideHeader = async ({ canvasElement }: StoryContext): Promise<void> => {
-  const canvas = within(canvasElement);
-
-  await playStory({ canvasElement } as StoryContext);
-
-  // Scroll the content to hide the title.
-  await new Promise((resolve) => setTimeout(resolve, 250));
-  setTimeout(() => canvas.getByTestId('image').scrollIntoView(), 250);
-};
-
 const level: InputType = {
   control: {
     type: 'inline-radio',
@@ -449,7 +439,6 @@ export const HiddenTitle: StoryObj = {
   render: LongContentTemplate,
   argTypes: basicArgTypes,
   args: { ...basicArgs, hideOnScroll: hideOnScroll.options[7] },
-  play: isChromatic() ? hideHeader : undefined,
 };
 
 export const Form: StoryObj = {

From 20c76043b4c3654ad3263da9919d280e91c28517 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@finconsgroup.com>
Date: Wed, 10 Apr 2024 13:18:16 +0200
Subject: [PATCH 65/65] fix: remove named slots

---
 .../__snapshots__/dialog-actions.spec.snap.js |  1 -
 .../dialog-actions/dialog-actions.spec.ts     |  4 +--
 .../dialog-actions/dialog-actions.stories.ts  |  7 +---
 .../dialog/dialog-actions/dialog-actions.ts   |  4 ---
 .../dialog/dialog-actions/readme.md           |  2 --
 .../dialog-content/dialog-content.spec.ts     |  8 ++---
 .../dialog/dialog-content/dialog-content.ts   |  5 ---
 .../dialog/dialog-content/readme.md           |  2 --
 .../dialog/dialog-title/dialog-title.e2e.ts   |  4 +--
 .../dialog/dialog-title/dialog-title.spec.ts  |  7 ++--
 .../dialog/dialog-title/dialog-title.ts       |  4 ---
 src/components/dialog/dialog-title/readme.md  |  3 --
 .../dialog/__snapshots__/dialog.spec.snap.js  |  9 ++---
 src/components/dialog/dialog/dialog.e2e.ts    | 34 +++++++++----------
 src/components/dialog/dialog/dialog.spec.ts   |  4 +--
 .../dialog/dialog/dialog.stories.ts           | 22 +++++-------
 src/components/dialog/dialog/dialog.ts        |  8 ++---
 src/components/dialog/dialog/readme.md        | 11 ++----
 18 files changed, 43 insertions(+), 96 deletions(-)

diff --git a/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
index 459123b68c..f5251b9307 100644
--- a/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
+++ b/src/components/dialog/dialog-actions/__snapshots__/dialog-actions.spec.snap.js
@@ -8,7 +8,6 @@ snapshots["sbb-dialog-actions renders"] =
   horizontal-from="medium"
   link-size="m"
   orientation="horizontal"
-  slot="actions"
 >
 </sbb-dialog-actions>
 `;
diff --git a/src/components/dialog/dialog-actions/dialog-actions.spec.ts b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
index 21b49e481c..cd325bb842 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.spec.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.spec.ts
@@ -6,7 +6,7 @@ import './dialog-actions.js';
 
 describe('sbb-dialog-actions', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-actions slot="actions"></sbb-dialog-actions>`);
+    const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
 
     await expect(root).dom.to.equalSnapshot();
 
@@ -20,5 +20,5 @@ describe('sbb-dialog-actions', () => {
     `);
   });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-actions slot="actions"></sbb-dialog-actions>`);
+  testA11yTreeSnapshot(html`<sbb-dialog-actions></sbb-dialog-actions>`);
 });
diff --git a/src/components/dialog/dialog-actions/dialog-actions.stories.ts b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
index b4653e66e9..b578e94cba 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.stories.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.stories.ts
@@ -11,12 +11,7 @@ import '../../button/secondary-button/index.js';
 import '../../link/index.js';
 
 const Template = (): TemplateResult =>
-  html`<sbb-dialog-actions
-    slot="actions"
-    align-group="stretch"
-    orientation="vertical"
-    horizontal-from="medium"
-  >
+  html`<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
     <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
diff --git a/src/components/dialog/dialog-actions/dialog-actions.ts b/src/components/dialog/dialog-actions/dialog-actions.ts
index 71151c7ee4..46eeafc270 100644
--- a/src/components/dialog/dialog-actions/dialog-actions.ts
+++ b/src/components/dialog/dialog-actions/dialog-actions.ts
@@ -3,7 +3,6 @@ import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import { SbbActionGroupElement } from '../../action-group/index.js';
-import { hostAttributes } from '../../core/decorators/index.js';
 
 import style from './dialog-actions.scss?lit&inline';
 
@@ -13,9 +12,6 @@ import style from './dialog-actions.scss?lit&inline';
  * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`.
  */
 @customElement('sbb-dialog-actions')
-@hostAttributes({
-  slot: 'actions',
-})
 export class SbbDialogActionsElement extends SbbActionGroupElement {
   public static override styles: CSSResultGroup = [SbbActionGroupElement.styles, style];
 
diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md
index 7c30f51310..003ab3a96a 100644
--- a/src/components/dialog/dialog-actions/readme.md
+++ b/src/components/dialog/dialog-actions/readme.md
@@ -10,8 +10,6 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/componen
 </sbb-dialog>
 ```
 
-It has an implicit slot name: `actions`.
-
 <!-- Auto Generated Below -->
 
 ## Properties
diff --git a/src/components/dialog/dialog-content/dialog-content.spec.ts b/src/components/dialog/dialog-content/dialog-content.spec.ts
index 7b2fe6df1b..5c4dbda497 100644
--- a/src/components/dialog/dialog-content/dialog-content.spec.ts
+++ b/src/components/dialog/dialog-content/dialog-content.spec.ts
@@ -4,13 +4,9 @@ import './dialog-content.js';
 
 describe('sbb-dialog-content', () => {
   it('renders', async () => {
-    const root = await fixture(
-      html`<sbb-dialog-content slot="content">Content</sbb-dialog-content>`,
-    );
+    const root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
 
-    expect(root).dom.to.be.equal(
-      `<sbb-dialog-content slot="content" slot="content">Content</sbb-dialog-content>`,
-    );
+    expect(root).dom.to.be.equal(`<sbb-dialog-content>Content</sbb-dialog-content>`);
 
     expect(root).shadowDom.to.be.equal(`
       <div class="sbb-dialog-content">
diff --git a/src/components/dialog/dialog-content/dialog-content.ts b/src/components/dialog/dialog-content/dialog-content.ts
index b2a6601cbf..b1143f6308 100644
--- a/src/components/dialog/dialog-content/dialog-content.ts
+++ b/src/components/dialog/dialog-content/dialog-content.ts
@@ -2,8 +2,6 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/decorators/index.js';
-
 import style from './dialog-content.scss?lit&inline';
 
 /**
@@ -12,9 +10,6 @@ import style from './dialog-content.scss?lit&inline';
  * @slot - Use the unnamed slot to provide a dialog content.
  */
 @customElement('sbb-dialog-content')
-@hostAttributes({
-  slot: 'content',
-})
 export class SbbDialogContentElement extends LitElement {
   public static override styles: CSSResultGroup = style;
 
diff --git a/src/components/dialog/dialog-content/readme.md b/src/components/dialog/dialog-content/readme.md
index 468ec6086b..a5edbba220 100644
--- a/src/components/dialog/dialog-content/readme.md
+++ b/src/components/dialog/dialog-content/readme.md
@@ -6,8 +6,6 @@ Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/componen
 </sbb-dialog>
 ```
 
-It has an implicit slot name: `content`.
-
 <!-- Auto Generated Below -->
 
 ## Slots
diff --git a/src/components/dialog/dialog-title/dialog-title.e2e.ts b/src/components/dialog/dialog-title/dialog-title.e2e.ts
index b77805070f..0028d7f3de 100644
--- a/src/components/dialog/dialog-title/dialog-title.e2e.ts
+++ b/src/components/dialog/dialog-title/dialog-title.e2e.ts
@@ -9,9 +9,7 @@ describe('sbb-dialog-title', () => {
   let element: SbbDialogTitleElement;
 
   beforeEach(async () => {
-    element = await fixture(
-      html`<sbb-dialog-title slot="title" back-button>Title</sbb-dialog-title>`,
-    );
+    element = await fixture(html`<sbb-dialog-title back-button>Title</sbb-dialog-title>`);
   });
 
   it('renders', async () => {
diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts
index ccec1056c2..d62478a02b 100644
--- a/src/components/dialog/dialog-title/dialog-title.spec.ts
+++ b/src/components/dialog/dialog-title/dialog-title.spec.ts
@@ -6,18 +6,17 @@ import './dialog-title.js';
 
 describe('sbb-dialog-title', () => {
   it('renders', async () => {
-    const root = await fixture(html`<sbb-dialog-title slot="title">Title</sbb-dialog-title>`);
+    const root = await fixture(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
 
     expect(root).dom.to.be.equal(`
-      <sbb-dialog-title slot="title"
+      <sbb-dialog-title
        level="2"
        role="heading"
-       slot="title"
        visual-level="3">Title</sbb-dialog-title>
     `);
 
     await expect(root).shadowDom.to.equalSnapshot();
   });
 
-  testA11yTreeSnapshot(html`<sbb-dialog-title slot="title">Title</sbb-dialog-title>`);
+  testA11yTreeSnapshot(html`<sbb-dialog-title>Title</sbb-dialog-title>`);
 });
diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts
index 3335fda8a7..8d31659839 100644
--- a/src/components/dialog/dialog-title/dialog-title.ts
+++ b/src/components/dialog/dialog-title/dialog-title.ts
@@ -5,7 +5,6 @@ import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { SbbFocusVisibleWithinController } from '../../core/a11y/index.js';
 import { SbbLanguageController } from '../../core/controllers/index.js';
-import { hostAttributes } from '../../core/decorators/index.js';
 import type { Breakpoint } from '../../core/dom/index.js';
 import { EventEmitter } from '../../core/eventing/index.js';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n/index.js';
@@ -26,9 +25,6 @@ import '../../button/transparent-button/index.js';
  * and is not relevant to dialog title margin customization.
  */
 @customElement('sbb-dialog-title')
-@hostAttributes({
-  slot: 'title',
-})
 export class SbbDialogTitleElement extends SbbTitleElement {
   public static override styles: CSSResultGroup = [SbbTitleElement.styles, style];
   public static readonly events: Record<string, string> = {
diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md
index 0adc518539..d4997773e8 100644
--- a/src/components/dialog/dialog-title/readme.md
+++ b/src/components/dialog/dialog-title/readme.md
@@ -3,7 +3,6 @@ The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-ti
 ```html
 <sbb-dialog>
   <sbb-dialog-title
-    slot="title"
     back-button
     accessibility-close-label="Close button"
     accessibility-back-label="Back button"
@@ -13,8 +12,6 @@ The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-ti
 </sbb-dialog>
 ```
 
-It has an implicit slot name: `title`.
-
 ## States
 
 The title can have a `negative` state which is automatically synchronized with the negative state of the dialog.
diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
index c42eb73a8f..82ba9ac94a 100644
--- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
+++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js
@@ -9,12 +9,11 @@ snapshots["sbb-dialog renders an open dialog Dom"] =
   <sbb-dialog-title
     level="2"
     role="heading"
-    slot="title"
     visual-level="3"
   >
     Title
   </sbb-dialog-title>
-  <sbb-dialog-content slot="content">
+  <sbb-dialog-content>
     Content
   </sbb-dialog-content>
 </sbb-dialog>
@@ -28,11 +27,7 @@ snapshots["sbb-dialog renders an open dialog ShadowDom"] =
     id="sbb-dialog-1"
   >
     <div class="sbb-dialog__wrapper">
-      <slot name="title">
-      </slot>
-      <slot name="content">
-      </slot>
-      <slot name="actions">
+      <slot>
       </slot>
     </div>
   </div>
diff --git a/src/components/dialog/dialog/dialog.e2e.ts b/src/components/dialog/dialog/dialog.e2e.ts
index 53e44026c3..cdcbbdf683 100644
--- a/src/components/dialog/dialog/dialog.e2e.ts
+++ b/src/components/dialog/dialog/dialog.e2e.ts
@@ -37,9 +37,9 @@ describe('sbb-dialog', () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-1" disable-animation>
-        <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
-        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
+        <sbb-dialog-title>Title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
     ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
@@ -250,15 +250,15 @@ describe('sbb-dialog', () => {
   it('closes stacked dialogs one by one on ESC key pressed', async () => {
     element = await fixture(html`
       <sbb-dialog id="my-dialog-3" disable-animation>
-        <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
-        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
+        <sbb-dialog-title>Title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
 
       <sbb-dialog id="stacked-dialog" disable-animation>
-        <sbb-dialog-title slot="title">Stacked title</sbb-dialog-title>
-        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
-        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
+        <sbb-dialog-title>Stacked title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
 
@@ -323,12 +323,12 @@ describe('sbb-dialog', () => {
     await setViewport({ width: 900, height: 600 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-4" disable-animation>
-        <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-        <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
+        <sbb-dialog-title>Title</sbb-dialog-title>
+        <sbb-dialog-content>Dialog content</sbb-dialog-content>
 
-        <sbb-dialog id="inner-dialog" slot="content" disable-animation>
-          <sbb-dialog-title slot="title">Inner Dialog title</sbb-dialog-title>
-          <sbb-dialog-content slot="content">Dialog content</sbb-dialog-content>
+        <sbb-dialog id="inner-dialog" disable-animation>
+          <sbb-dialog-title>Inner Dialog title</sbb-dialog-title>
+          <sbb-dialog-content>Dialog content</sbb-dialog-content>
         </sbb-dialog>
       </sbb-dialog>
     `);
@@ -412,8 +412,8 @@ describe('sbb-dialog with long content', () => {
     await setViewport({ width: 900, height: 300 });
     element = await fixture(html`
       <sbb-dialog id="my-dialog-1" disable-animation>
-        <sbb-dialog-title slot="title" hide-on-scroll="">Title</sbb-dialog-title>
-        <sbb-dialog-content slot="content">
+        <sbb-dialog-title hide-on-scroll="">Title</sbb-dialog-title>
+        <sbb-dialog-content>
           Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his
           face like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo
           saw that Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be
@@ -428,7 +428,7 @@ describe('sbb-dialog with long content', () => {
           pioneered fantasy literature. Tolkien's linguistic brilliance and mythic passion converge
           in a literary legacy that continues to transport readers to magical realms.
         </sbb-dialog-content>
-        <sbb-dialog-actions slot="actions">Action group</sbb-dialog-actions>
+        <sbb-dialog-actions>Action group</sbb-dialog-actions>
       </sbb-dialog>
     `);
   });
diff --git a/src/components/dialog/dialog/dialog.spec.ts b/src/components/dialog/dialog/dialog.spec.ts
index c316aa4bb8..eb128b2445 100644
--- a/src/components/dialog/dialog/dialog.spec.ts
+++ b/src/components/dialog/dialog/dialog.spec.ts
@@ -15,8 +15,8 @@ describe(`sbb-dialog`, () => {
     beforeEach(async () => {
       root = await fixture(
         html` <sbb-dialog disable-animation>
-          <sbb-dialog-title slot="title">Title</sbb-dialog-title>
-          <sbb-dialog-content slot="content">Content</sbb-dialog-content>
+          <sbb-dialog-title>Title</sbb-dialog-title>
+          <sbb-dialog-content>Content</sbb-dialog-content>
         </sbb-dialog>`,
       );
       root.open();
diff --git a/src/components/dialog/dialog/dialog.stories.ts b/src/components/dialog/dialog/dialog.stories.ts
index 1df309dc5e..68663e9dda 100644
--- a/src/components/dialog/dialog/dialog.stories.ts
+++ b/src/components/dialog/dialog/dialog.stories.ts
@@ -164,12 +164,7 @@ const triggerButton = (dialogId: string, triggerId?: string): TemplateResult =>
 `;
 
 const dialogActions = (negative: boolean): TemplateResult => html`
-  <sbb-dialog-actions
-    slot="actions"
-    align-group="stretch"
-    orientation="vertical"
-    horizontal-from="medium"
-  >
+  <sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
     <sbb-block-link
       align-self="start"
       icon-name="chevron-small-left-small"
@@ -221,7 +216,6 @@ const dialogTitle = (
   accessibilityBackLabel: string,
 ): TemplateResult => html`
   <sbb-dialog-title
-    slot="title"
     level=${level}
     ?back-button=${backButton}
     hide-on-scroll=${hideOnScroll === 'Deactivate hide on scroll' ? nothing : hideOnScroll}
@@ -251,7 +245,7 @@ const DefaultTemplate = ({
   ${triggerButton('my-dialog-1')}
   <sbb-dialog data-testid="dialog" id="my-dialog-1" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content slot="content">
+    <sbb-dialog-content>
       <p id="dialog-content-1" style=${styleMap({ margin: '0' })}>Dialog content</p>
     </sbb-dialog-content>
     ${dialogActions(args.negative)}
@@ -269,7 +263,7 @@ const LongContentTemplate = ({
   ${triggerButton('my-dialog-2')}
   <sbb-dialog data-testid="dialog" id="my-dialog-2" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content slot="content" data-testid="content">
+    <sbb-dialog-content data-testid="content">
       Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
       like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
       Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
@@ -321,7 +315,7 @@ const FormTemplate = ({
     ${sbbSpread(args)}
   >
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content slot="content">
+    <sbb-dialog-content>
       <div style=${styleMap({ 'margin-block-end': 'var(--sbb-spacing-fixed-4x)' })}>
         Submit the form below to close the dialog box using the
         <code style=${styleMap(codeStyle)}>close(result?: any, target?: HTMLElement)</code>
@@ -358,7 +352,7 @@ const NoFooterTemplate = ({
   ${triggerButton('my-dialog-4')}
   <sbb-dialog data-testid="dialog" id="my-dialog-4" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content slot="content">
+    <sbb-dialog-content>
       <p id="dialog-content-5" style=${styleMap({ margin: '0' })}>
         “What really knocks me out is a book that, when you're all done reading it, you wish the
         author that wrote it was a terrific friend of yours and you could call him up on the phone
@@ -380,11 +374,11 @@ const NestedTemplate = ({
   ${triggerButton('my-dialog-5')}
   <sbb-dialog data-testid="dialog" id="my-dialog-5" ${sbbSpread(args)}>
     ${dialogTitle(level, backButton, hideOnScroll, accessibilityCloseLabel, accessibilityBackLabel)}
-    <sbb-dialog-content slot="content"
+    <sbb-dialog-content
       >Click the button to open a nested
       dialog.&nbsp;${triggerButton('my-dialog-6', 'nested-trigger-id')}</sbb-dialog-content
     >
-    <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" slot="content" ${sbbSpread(args)}>
+    <sbb-dialog data-testid="nested-dialog" id="my-dialog-6" ${sbbSpread(args)}>
       ${dialogTitle(
         level,
         backButton,
@@ -392,7 +386,7 @@ const NestedTemplate = ({
         accessibilityCloseLabel,
         accessibilityBackLabel,
       )}
-      <sbb-dialog-content slot="content"
+      <sbb-dialog-content
         >Nested dialog content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
         nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
diff --git a/src/components/dialog/dialog/dialog.ts b/src/components/dialog/dialog/dialog.ts
index 2378f2146b..5f71c7940f 100644
--- a/src/components/dialog/dialog/dialog.ts
+++ b/src/components/dialog/dialog/dialog.ts
@@ -36,9 +36,7 @@ export type SbbDialogCloseEventDetails = {
 /**
  * It displays an interactive overlay element.
  *
- * @slot title - Use this slot to provide a `sbb-dialog-title`.
- * @slot content - Use this slot to provide a `sbb-dialog-content`.
- * @slot actions - Use this slot to provide a `sbb-dialog-actions`.
+ * @slot - Use the unnamed slot to provide a `sbb-dialog-title`, `sbb-dialog-content` and an optional `sbb-dialog-actions`.
  * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled.
  * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-dialog` is opened.
  * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
@@ -466,9 +464,7 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
             @click=${(event: Event) => this._closeOnSbbDialogCloseClick(event)}
             class="sbb-dialog__wrapper"
           >
-            <slot name="title"></slot>
-            <slot name="content"></slot>
-            <slot name="actions"></slot>
+            <slot></slot>
           </div>
         </div>
       </div>
diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md
index 999f39e3e8..e5d7d64233 100644
--- a/src/components/dialog/dialog/readme.md
+++ b/src/components/dialog/dialog/readme.md
@@ -20,9 +20,6 @@ It offers the following features:
 
 There are three slots: `title`, `content` and `actions`, which can respectively be used to provide an `sbb-dialog-title`, `sbb-dialog-content` and an `sbb-dialog-actions`.
 
-**NOTE:**
-It's not necessary to set the slots explicitly on the dialog's inner components, as they already have an implicit slot name.
-
 ```html
 <sbb-dialog>
   <sbb-dialog-title>Title</sbb-dialog-title>
@@ -124,8 +121,6 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro
 
 ## Slots
 
-| Name      | Description                                      |
-| --------- | ------------------------------------------------ |
-| `title`   | Use this slot to provide a `sbb-dialog-title`.   |
-| `content` | Use this slot to provide a `sbb-dialog-content`. |
-| `actions` | Use this slot to provide a `sbb-dialog-actions`. |
+| Name | Description                                                                                                      |
+| ---- | ---------------------------------------------------------------------------------------------------------------- |
+|      | Use the unnamed slot to provide a `sbb-dialog-title`, `sbb-dialog-content` and an optional `sbb-dialog-actions`. |