fix: review

src/elements/core/styles/core.scss

@@ -124,6 +124,21 @@ sbb-breadcrumb-group:not(:defined) {
   pointer-events: all;
 }
 
+// Helper class for the application name and version in sbb-header.
+.sbb-header-info {
+  @include typo.text-xs--regular;
+
+  display: flex;
+  padding-inline: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-spacing-fixed-1x);
+
+  strong + * {
+    --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+
+    color: var(--sbb-color-granite);
+  }
+}
+
 // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
 // Due to margin collapsing, the wrong paragraph space wins.
 // To prevent the mistakenly large gap, we reset the paragraph space.

src/elements/header/common/header-action.scss

@@ -27,7 +27,7 @@
 
   // If expanded, move it left by left padding.
   // As result, the icon should be aligned with the left side of the page wrapper.
-  --sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-header-action-padding-inline));
+  --sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-spacing-fixed-5x));
 
   @include sbb.if-forced-colors {
     --sbb-header-action-border-color: CanvasText;
@@ -147,7 +147,10 @@
       // sbb-header-button/sbb-header-link instead of sbb-header.
       //
       // Move it left by 12px in collapsed width.
-      --sbb-header-first-item-margin-inline-start: #{sbb.px-to-rem-build(-12)};
+      --sbb-header-first-item-margin-inline-start: var(
+        --sbb-header-first-item-margin-inline-start-size-s,
+        #{sbb.px-to-rem-build(-12)}
+      );
       --sbb-header-action-padding-inline-zero: 0;
 
       .sbb-header-action__text {

src/elements/header/header/header.scss

@@ -111,6 +111,7 @@
   :host([size='s']) & {
     --sbb-header-action-min-height: var(--sbb-size-element-xs);
     --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x);
+    --sbb-header-first-item-margin-inline-start-size-s: #{sbb.px-to-rem-build(-10)};
   }
 }
 

src/elements/header/header/header.stories.ts

@@ -30,10 +30,8 @@ const LoremIpsumTemplate = (): TemplateResult => html`
 `;
 
 const appName = (): TemplateResult => html`
-  <span
-    style="padding-inline: var(--sbb-spacing-fixed-4x); font-size: var(--sbb-font-size-text-xs)"
-  >
-    <span class="sbb-text--bold">Name</span>
+  <span class="sbb-header-info">
+    <strong>Name</strong>
     V. 1.1
   </span>
 `;

src/elements/header/header/readme.md

@@ -76,7 +76,8 @@ by adding classes to `sbb-header-button`/`sbb-header-link` elements and then def
 
 To achieve this result, a `div` tag with a CSS class named `sbb-header-spacer` was added between the first
 and the second `sbb-header-button` item, then a class named `last-element` was added to the last one.
-Finally, the following custom CSS has been added(\*). The result can be seen in the home and home--logged-in stories.
+Finally, the following custom CSS has been added(\*).
+The result can be seen in the [home](/story/pages-home--home) and [home-logged-in](/story/pages-home--home-logged-in) stories.
 
 ```css
 .last-element {
@@ -96,6 +97,26 @@ Finally, the following custom CSS has been added(\*). The result can be seen in
 }
 ```
 
+The `sbb-header` can be also customized by adding the application's name and version:
+a helper class named `sbb-header-info` is provided to achieve the correct visual result.
+
+```html
+<sbb-header size="s">
+  <sbb-header-link icon-name="hamburger-menu-small" href="https://sbb.ch/somewhere">
+    Menu
+  </sbb-header-link>
+
+  <span class="sbb-header-info">
+    <strong>Application name</strong>
+    V. 1.1
+  </span>
+
+  <a slot="logo" aria-label="Homepage" href="/">
+    <sbb-signet slot="logo" protective-room="panel"></sbb-signet>
+  </a>
+</sbb-header>
+```
+
 ### Content overflow
 
 If a certain `sbb-header-button`/`sbb-header-link` should be shrunken (receive ellipsis) when there is too little space,