refactor(sbb-dialog): introduce inner components and header animation

[dauriamarco]

BEGIN_COMMIT_OVERRIDE
fix(sbb-dialog): fix accessibility with option to hide the header on scroll

BREAKING CHANGE: The sbb-dialog component now needs the dedicated inner elements sbb-dialog-title, sbb-dialog-content, and sbb-dialog-actions. Use these components to respectively provide a title, a content and, optionally, a footer with an action group. Moreover, the full-screen variant (which occurred when no title was provided to the dialog) has been removed. To achieve a full-screen overlay, please use the new sbb-overlay component.
As a migration help, consider the following example. Old: <sbb-dialog title-content="Title"><p>Dialog content.</p><sbb-action-group slot="action-group">...</sbb-action-group></sbb-dialog>.
New: <sbb-dialog><sbb-dialog-title>Title</sbb-dialog-title><sbb-dialog-content><p>Dialog content</p></sbb-dialog-content><sbb-dialog-actions>...</sbb-dialog-actions></sbb-dialog>.
Previously, a full-screen dialog was displayed if no title was provided to the dialog component:
<sbb-dialog><p>Dialog content.</p></sbb-dialog>. To achieve the same, it is now mandatory to use the sbb-overlay component: <sbb-overlay><p>Overlay content.</p></sbb-overlay>.
END_COMMIT_OVERRIDE

Closes #2019

BREAKING CHANGE: The sbb-dialog component now supports the dedicated inner elements sbb-dialog-title, sbb-dialog-content, and sbb-dialog-actions. Use these components to respectively provide a title, a content and, optionally, a footer with an action group. Moreover, the full-screen variant (which occurred when no title was provided to the dialog) has been removed. To achieve a full-screen overlay, please use the sbb-overlay component.
This was the previous implementation:

<sbb-dialog title-content="Title">
  <p>Dialog content.</p>
  <sbb-action-group slot="action-group">...</sbb-action-group>
</sbb-dialog>

This is the new implementation:

<sbb-dialog>
  <sbb-dialog-title>Title</sbb-dialog-title>
  <sbb-dialog-content>Dialog content</sbb-dialog-content>
  <sbb-dialog-actions>...</sbb-dialog-actions>
</sbb-dialog>

Previously, a full-screen dialog was displayed if no title was provided to the dialog component:

<sbb-dialog>
  <p>Dialog content.</p>
</sbb-dialog>

It is now possible to use an sbb-overlay component to display the same variant:

<sbb-overlay>
  <p>Overlay content.</p>
</sbb-overlay>

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 85.71429% with 2 lines in your changes are missing coverage. Please review.

❗ No coverage uploaded for pull request base (main@6315899). Click here to learn what that means.

Files	Patch %	Lines
src/components/core/dom/breakpoint.ts	85.71%	2 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2231   +/-   ##
=======================================
  Coverage        ?   93.18%           
=======================================
  Files           ?      309           
  Lines           ?    25307           
  Branches        ?     2056           
=======================================
  Hits            ?    23582           
  Misses          ?     1693           
  Partials        ?       32           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jeripeierSBB]

Thanks for addressing this!
Code looks ok so far, but testing it in real life, the initial scrolling looks buggy for me as it forces the user to scroll down at least the height of the header. Is this really intended?

Please also wait for approval of @mcilurzo

[dauriamarco]

Thanks for addressing this! Code looks ok so far, but testing it in real life, the initial scrolling looks buggy for me as it forces the user to scroll down at least the height of the header. Is this really intended?

Please also wait for approval of @mcilurzo

@jeripeierSBB Yes, I know what you mean, but I have already shown it to Manuel and it is fine with him. But if you want we can show it to him again and discuss it, although I can't think of any other possible alternatives at the moment.

[jeripeierSBB]

From coding perspective it looks good for me :). Not sure, but if Manuel really is aware of, maybe we can accept it like it is. Maybe a second opinion of @kyubisation?

[jeripeierSBB]

We would like to discuss with @mcilurzo if there is the need of a property to opt out of the header hiding feature. potentially providing a breakpoint range from where it stops or starts... to be discussed.

[jeripeierSBB]

LGTM, thanks!!