From 38d44c975eb14f43624ccfd9c6f714fc81b33745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 5 Feb 2024 06:28:23 +0100
Subject: [PATCH 1/6] chore(demo): Try to clarify how spinner should be used
 (#2594)

---
 .../spinner-demo-page.component.ts            | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
index d095b00980..7aaaa87aba 100644
--- a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
+++ b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
@@ -2,19 +2,17 @@ import { Component } from '@angular/core';
 
 const codeTemplate =
   require('!!raw-loader!../spinner-mini-demo/spinner-mini-demo.component.html').default;
-const spinner = `<div class="position-relative">
-    <div class="spinner-bg">
-        <div class="loading-modal">
-            <div class="loader m-auto"></div>
-        </div>
+const spinner = `<!-- my-parent-element class="position-relative" -->
+<div class="spinner-bg">
+    <div class="loading-modal">
+        <div class="loader m-auto"></div>
     </div>
 </div>`;
-const spinnerSmall = `<div class="position-relative">
-  <div class="spinner-bg">
-      <div class="loading-modal">
-          <div class="loader loader-sm m-auto"></div>
-      </div>
-  </div>
+const spinnerSmall = `<!-- my-parent-element class="position-relative" -->
+<div class="spinner-bg">
+    <div class="loading-modal">
+        <div class="loader loader-sm m-auto"></div>
+    </div>
 </div>`;
 
 @Component({

From dbc840875962a283ae63b3cd189a7f5956f3a722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 5 Feb 2024 08:18:42 +0100
Subject: [PATCH 2/6] fix(documentation): Context.name might be undefined
 (#2604)

---
 .../components/forms/radio/radio.stories.ts    | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index e947e62f6e..834d03ae4a 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -123,22 +123,12 @@ function render(args: Args, context: StoryContext) {
 
   const useAriaLabel = args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html`
-        <label for="${id}" class="form-check-label">${args.label}</label>
-      `
+    ? html` <label for="${id}" class="form-check-label">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid'
-      ? html`
-          <p class="valid-feedback">Ggranda sukceso!</p>
-        `
-      : null,
-    args.validation === 'is-invalid'
-      ? html`
-          <p class="invalid-feedback">Eraro okazis!</p>
-        `
-      : null,
+    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
+    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
   ];
 
   const control = html`
@@ -168,7 +158,7 @@ export const Default: Story = {};
 
 export function renderInline(args: Args, context: Partial<StoryContext>) {
   const [_, updateArgs] = useArgs();
-  const baseId = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
+  const baseId = `${context.viewMode}_${context.name?.replace(/\s/g, '-')}_ExampleRadio`;
   const id1 = baseId + '1';
   const id2 = baseId + '2';
   const id3 = baseId + '3';

From 9657a0265b41d992af4ccf5adb26258ebdc1fa42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 5 Feb 2024 08:28:10 +0100
Subject: [PATCH 3/6] feat(documentation): Add example and explanation for grid
 gutters and remove unneeded page (#2589)

### What

- Add Gutters example
- Rework how we style the column in the documentation, I'm not sure if
it's the best way.
The Bootstrap documentation is confusing:

There is a gutter by default to 24px (check `.row` CSS rule.
--bs-gutter-x: equals 1.5rem;). But if you look at [the examples on the
column page](https://getbootstrap.com/docs/5.2/layout/columns/). The
gutter is not displayed (nor removed with `.g-0`). The gutter is not
visible because the applied style (background, padding, border) is on
the `.col`.
Meanwhile, if you look at the [examples on the gutters
page](https://getbootstrap.com/docs/5.2/layout/gutters/), the styles are
applied on a child element of the column (try to remove `.gx-5` from the
first example, and you still get a gutter, the default one).

So I decided to remove gutters with the `.g-0` class in our examples to
match the previous documentation (except for the first example to
highlight the default gutter). And to highlight how nesting works, I
made an exception on the style to match the column instead of the child
element.
---
 .../foundation/layout/grid/grid.blocks.tsx    |   4 +-
 .../foundation/layout/grid/grid.docs.mdx      |  12 +-
 .../foundation/layout/grid/grid.stories.ts    | 306 +++++++++++++-----
 .../foundation/layout/grid/grid.styles.scss   |   5 +-
 .../layout/gutters/gutters.docs.mdx           |  15 -
 .../layout/gutters/gutters.stories.ts         |  15 -
 6 files changed, 241 insertions(+), 116 deletions(-)
 delete mode 100644 packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx
 delete mode 100644 packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts

diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
index 0eeacc165d..a33a97a009 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
@@ -34,7 +34,9 @@ export const GridTable = () => (
     <tr>
       <th>Custom gutters</th>
       <td colSpan={SCSS_VARIABLES['breakpoint-count']}>
-        <a href="/?path=/docs/foundations-layout-gutters--docs">yes</a>
+        <a href="#gutters" target="_self">
+          yes
+        </a>
       </td>
     </tr>
     <tr>
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
index 883790de95..a616412af9 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import { formatAsMap } from '../../../../utils/sass-export';
 import { GridTable, SCSS_VARIABLES } from './grid.blocks';
 import * as GridStories from './grid.stories';
@@ -41,7 +41,7 @@ Breaking it down, here’s how the grid system comes together:
   <Source language="html" dark code={SampleContainer}></Source>
 - **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
 - **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `.col-4` spans four). Widths are set in percentages so you always have the same relative sizing.
-- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-\*` classes. `.g-0` is also available to remove gutters.
+- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 - **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 ## Grid options
@@ -103,10 +103,18 @@ Use these row columns classes to quickly create basic grid layouts or to control
 
 <Canvas of={GridStories.RowColumns} />
 
+## Gutters
+
+To control the space between your columns, add either `.g-*` (horizontal and vertical) `.gx-*` (horizontal) or `.gy-*` (vertical) classes on the element containing the `.row` class.
+
+<Canvas of={GridStories.Gutters} />
+
 ## Nesting
 
 To nest your content with the default grid, add a new `.row` and set of `.col-*` columns within an existing `.col-*` column. Nested rows should include a set of columns that add up to 12 or fewer.
 
+Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
+
 <Canvas of={GridStories.Nested} />
 
 ## CSS
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index 34585ac825..c10ab175b0 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryFn, StoryObj, StoryContext } from '@storybook/web-components';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../.storybook/constants';
 import { html } from 'lit';
 
@@ -9,7 +9,9 @@ const meta: Meta = {
   },
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="grid-example text-center">${story(args, context)}</div>
+      <div class="grid-example text-center ${args?.additionalDecoratorsClasses}">
+        ${story(args, context)}
+      </div>
     `,
   ],
 };
@@ -22,9 +24,15 @@ export const Basis: Story = {
   render: () => html`
     <div class="container">
       <div class="row">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
     </div>
   `,
@@ -34,11 +42,15 @@ export const SingleColumnOnly: Story = {
   render: () => html`
     <div class="container">
       <div class="row">
-        <div class="col">Don't do this!</div>
+        <div class="col">
+          <div class="my-col-content-style">Don't do this!</div>
+        </div>
       </div>
       <br />
       <div class="row">
-        <div class="col-12">Nor this!</div>
+        <div class="col">
+          <div class="my-col-content-style">Nor this!</div>
+        </div>
       </div>
       <br />
       <p>Instead, your content should go here!</p>
@@ -49,14 +61,24 @@ export const SingleColumnOnly: Story = {
 export const EqualWidth: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col">1 of 2</div>
-        <div class="col">2 of 2</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 2</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">2 of 2</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col">2 of 3</div>
-        <div class="col">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">2 of 3</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
     </div>
   `,
@@ -65,15 +87,27 @@ export const EqualWidth: Story = {
 export const SettingOneColumnWidth: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col-6">2 of 3 (wider)</div>
-        <div class="col">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">2 of 3 (wider)</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col-5">2 of 3 (wider)</div>
-        <div class="col">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-5">
+          <div class="my-col-content-style">2 of 3 (wider)</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
     </div>
   `,
@@ -82,15 +116,27 @@ export const SettingOneColumnWidth: Story = {
 export const VariableWidthContent: Story = {
   render: () => html`
     <div class="container">
-      <div class="row justify-content-md-center">
-        <div class="col col-lg-2">1 of 3</div>
-        <div class="col-md-auto">Variable width content</div>
-        <div class="col col-lg-2">3 of 3</div>
+      <div class="row g-0 justify-content-md-center">
+        <div class="col col-lg-2">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-md-auto">
+          <div class="my-col-content-style">Variable width content</div>
+        </div>
+        <div class="col col-lg-2">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col">1 of 3</div>
-        <div class="col-md-auto">Variable width content</div>
-        <div class="col col-lg-2">3 of 3</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">1 of 3</div>
+        </div>
+        <div class="col-md-auto">
+          <div class="my-col-content-style">Variable width content</div>
+        </div>
+        <div class="col col-lg-2">
+          <div class="my-col-content-style">3 of 3</div>
+        </div>
       </div>
     </div>
   `,
@@ -99,15 +145,27 @@ export const VariableWidthContent: Story = {
 export const AllBreakpoints: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col">col</div>
-        <div class="col">col</div>
-        <div class="col">col</div>
-        <div class="col">col</div>
+      <div class="row g-0">
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">col</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col-8">col-8</div>
-        <div class="col-4">col-4</div>
+      <div class="row g-0">
+        <div class="col-8">
+          <div class="my-col-content-style">col-8</div>
+        </div>
+        <div class="col-4">
+          <div class="my-col-content-style">col-4</div>
+        </div>
       </div>
     </div>
   `,
@@ -116,14 +174,24 @@ export const AllBreakpoints: Story = {
 export const StackedToHorizontal: Story = {
   render: () => html`
     <div class="container">
-      <div class="row">
-        <div class="col-md-8">col-md-8</div>
-        <div class="col-md-4">col-md-4</div>
+      <div class="row g-0">
+        <div class="col-md-8">
+          <div class="my-col-content-style">col-md-8</div>
+        </div>
+        <div class="col-md-4">
+          <div class="my-col-content-style">col-md-4</div>
+        </div>
       </div>
-      <div class="row">
-        <div class="col-md">col-md</div>
-        <div class="col-md">col-md</div>
-        <div class="col-md">col-md</div>
+      <div class="row g-0">
+        <div class="col-md">
+          <div class="my-col-content-style">col-md</div>
+        </div>
+        <div class="col-md">
+          <div class="my-col-content-style">col-md</div>
+        </div>
+        <div class="col-md">
+          <div class="my-col-content-style">col-md</div>
+        </div>
       </div>
     </div>
   `,
@@ -133,22 +201,36 @@ export const MixAndMatch: Story = {
   render: () => html`
     <div class="container">
       <!-- Stack the columns on mobile by making one full-width and the other half-width -->
-      <div class="row">
-        <div class="col-md-8">.col-md-8</div>
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+      <div class="row g-0">
+        <div class="col-md-8">
+          <div class="my-col-content-style">.col-md-8</div>
+        </div>
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
       </div>
 
       <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
-      <div class="row">
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
-        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+      <div class="row g-0">
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
+        <div class="col-6 col-md-4">
+          <div class="my-col-content-style">.col-6 .col-md-4</div>
+        </div>
       </div>
 
       <!-- Columns width is always fix, on mobile and desktop -->
-      <div class="row">
-        <div class="col-4">.col-4</div>
-        <div class="col-8">.col-8</div>
+      <div class="row g-0">
+        <div class="col-4">
+          <div class="my-col-content-style">.col-4</div>
+        </div>
+        <div class="col-8">
+          <div class="my-col-content-style">.col-8</div>
+        </div>
       </div>
     </div>
   `,
@@ -157,51 +239,113 @@ export const MixAndMatch: Story = {
 export const RowColumns: Story = {
   render: () => html`
     <div class="container">
-      <div class="row row-cols-2">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-2">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-3">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-3">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-auto">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-auto">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-4">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-4">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
         <div class="col-6">Column</div>
-        <div class="col">Column</div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
       <br />
-      <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
-        <div class="col">Column</div>
+      <div class="row g-0 row-cols-1 row-cols-md-2 row-cols-lg-4">
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col">
+          <div class="my-col-content-style">Column</div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+export const Gutters: Story = {
+  render: () => html`
+    <div class="container">
+      <div class="row gx-5 gy-1">
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
+        <div class="col-6">
+          <div class="my-col-content-style">Column</div>
+        </div>
       </div>
     </div>
   `,
 };
 
 export const Nested: Story = {
+  args: {
+    additionalDecoratorsClasses: 'grid-nested-example',
+  },
   render: () => html`
     <div class="container">
-      <div class="row">
+      <div class="row g-0">
         <div class="col-md-3">Level 1: .col-md-3</div>
         <div class="col-md-9">
-          <div class="row">
+          <div class="row g-0">
             <div class="col-8 col-md-6">Level 2: .col-8 .col-md-6</div>
             <div class="col-4 col-md-6">Level 2: .col-4 .col-md-6</div>
           </div>
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
index 8d2a063355..8f1ef67556 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss
@@ -3,8 +3,9 @@
 .grid-example {
   font-size: post.$font-size-sm;
 
-  .row > * {
-    padding-block: 0.75rem;
+  &.grid-nested-example [class^="col"],
+  &:not(.grid-nested-example) .my-col-content-style {
+    padding: 0.75rem;
     background-color: lighten(post.$nightblue-bright, 60%);
     border: 1px solid lighten(post.$nightblue-dark, 60%);
   }
diff --git a/packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx b/packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx
deleted file mode 100644
index a442ba4410..0000000000
--- a/packages/documentation/src/stories/foundation/layout/gutters/gutters.docs.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import * as GuttersStories from './gutters.stories';
-
-<Meta of={GuttersStories} />
-
-# Gutters
-
-<div className="alert alert-info">
-  <h2 className="alert-heading">TODO</h2>
-
-Document differences and link over to bootstrap for the rest
-
-Refer to the Figma Design as well: <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=0%3A1&t=6hjgJzjzxjBbh0AU-1">Figma</a>
-
-</div>
diff --git a/packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts b/packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts
deleted file mode 100644
index c17defa932..0000000000
--- a/packages/documentation/src/stories/foundation/layout/gutters/gutters.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-import { BADGE } from '../../../../../.storybook/constants';
-
-const meta: Meta = {
-  title: 'Foundations/Layout/Gutters',
-  parameters: {
-    badges: [BADGE.TODO],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};

From a5c990ca173310747541832837bf41355fb208ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 5 Feb 2024 09:03:13 +0100
Subject: [PATCH 4/6] fix(documentation): Code smells nested template literals
 (#2605)

---
 .../button-group/button-group.stories.ts      | 24 ++++++-------
 .../forms/textarea/textarea.stories.ts        | 35 ++++---------------
 .../background/background.stories.ts          |  4 +--
 3 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index 778f06bb1b..8a9c49f69f 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -23,13 +23,13 @@ const meta: Meta = {
       control: {
         type: 'select',
         labels: {
-          ' btn-sm': 'Small',
-          ' btn-rg': 'Regular',
-          ' btn-md': 'Medium',
-          ' btn-lg': 'Large',
+          'btn-sm': 'Small',
+          'btn-rg': 'Regular',
+          'btn-md': 'Medium',
+          'btn-lg': 'Large',
         },
       },
-      options: [' btn-sm', ' btn-rg', ' btn-md', ' btn-lg'],
+      options: ['btn-sm', 'btn-rg', 'btn-md', 'btn-lg'],
       table: {
         category: 'General',
       },
@@ -173,7 +173,7 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
             updateArgs({ selected: isChecked });
           }}"
         />
-        <label class="${`btn ${args.size} btn-secondary`}" for="${id}">${label}</label>
+        <label class="btn ${args.size} btn-secondary" for="${id}">${label}</label>
       `;
     }
     case 'radio': {
@@ -191,18 +191,14 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
             updateArgs({ checked: position });
           }}"
         />
-        <label class="${`btn ${args.size} btn-secondary`}" for="${id}">${label}</label>
+        <label class="btn ${args.size} btn-secondary" for="${id}">${label}</label>
       `;
     }
     case 'link':
-      return html`
-        <a href="#" class="${`btn ${args.size} btn-secondary`}">${label}</a>
-      `;
+      return html` <a href="#" class="btn ${args.size} btn-secondary">${label}</a> `;
     case 'button':
     default:
-      return html`
-        <button type="button" class="${`btn ${args.size} btn-secondary`}">${label}</button>
-      `;
+      return html` <button type="button" class="btn ${args.size} btn-secondary">${label}</button> `;
   }
 }
 
@@ -230,7 +226,7 @@ export const Sizing: Story = {
     },
   },
   args: {
-    size: ' btn-sm',
+    size: 'btn-sm',
   },
 };
 
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 389f96d498..31e3423710 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -160,34 +160,16 @@ function renderTextarea(args: Args, context: StoryContext) {
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
-    ? html`
-        <label for=${id} class="form-label">
-          ${html`
-            ${args.label}
-          `}
-        </label>
-      `
+    ? html` <label for=${id} class="form-label">${args.label}</label> `
     : null;
-  const contextuals = [
+  const contextual = [
     args.validation === 'is-valid'
-      ? html`
-          <div class="valid-feedback">Ggranda sukceso!</div>
-        `
+      ? html` <div class="valid-feedback">Ggranda sukceso!</div> `
       : null,
     args.validation === 'is-invalid'
-      ? html`
-          <div class="invalid-feedback">Eraro okazis!</div>
-        `
-      : null,
-    args.hint !== ''
-      ? html`
-          <div class="form-text">
-            ${html`
-              ${args.hint}
-            `}
-          </div>
-        `
+      ? html` <div class="invalid-feedback">Eraro okazis!</div> `
       : null,
+    args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
   ];
   const control = html`
     <textarea
@@ -206,12 +188,9 @@ ${args.textInside ?? nothing}</textarea
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextuals].filter(el => el !== null)}</div>
-    `;
-  } else
-    return html`
-      ${[label, control, ...contextuals].filter(el => el !== null)}
+      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
     `;
+  } else return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
 }
 
 export const Default: Story = {};
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index 9a29e55d45..c78f405c3d 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -14,9 +14,7 @@ export default meta;
 type Story = StoryObj;
 
 export const ColoredBackground: Story = {
-  render: () => html`
-    <div class="bg-yellow p-3">Content</div>
-  `,
+  render: () => html` <div class="bg-yellow p-3">Content</div> `,
 };
 
 export const NestedBackgrounds: Story = {

From 41d46b20245243cdb7844dcf238bb8461b5753d0 Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 5 Feb 2024 11:07:19 +0100
Subject: [PATCH 5/6] chore(test): update logout test (#2600)

No need to acutally click on the logout link, just ensure it's there.
---
 .../internet-header/cypress/e2e/logout.cy.ts    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/internet-header/cypress/e2e/logout.cy.ts b/packages/internet-header/cypress/e2e/logout.cy.ts
index 15c36524a2..4f403c8953 100644
--- a/packages/internet-header/cypress/e2e/logout.cy.ts
+++ b/packages/internet-header/cypress/e2e/logout.cy.ts
@@ -6,25 +6,24 @@ describe('logout', () => {
       it('logout with url from config', () => {
         prepare('Components/Internet Header/Header', 'Default', { loggedIn: true });
         logoutFromMenu();
-
-        const origin = 'https://www.post.ch';
-        // Get redirected location. (Requires cy.origin as it's a cross-domain request)
-        cy.origin(origin, () => {
-          cy.location('pathname').should('eq', '/logout');
-        });
       });
 
       it(`overrides logout url from config`, () => {
         prepare('Components/Internet Header/Header', 'Default', { loggedIn: true });
         cy.changeArg('logoutUrl', 'about:blank');
         logoutFromMenu();
-        cy.location('pathname').should('eq', 'blank');
       });
     });
   });
 });
 
 function logoutFromMenu() {
-  cy.get('post-klp-login-widget').shadow().get('.klp-widget-authenticated-session-link').click();
-  cy.get('post-klp-login-widget').shadow().get('#klp-widget-authenticated-menu-logout').click();
+  cy.get('post-klp-login-widget')
+    .shadow()
+    .get('.klp-widget-authenticated-session-link', { timeout: 10000 })
+    .click();
+  cy.get('post-klp-login-widget')
+    .shadow()
+    .get('#klp-widget-authenticated-menu-logout')
+    .should('be.visible');
 }

From acd17dd882b3a6a29a813ef3fcd1df3546ec3033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 5 Feb 2024 13:17:45 +0100
Subject: [PATCH 6/6] fix(documentation): Missing svg favicon file (#2607)

Firefox seems to prefer the SVG variant of the favicon, but we do not
provide one and it fallbacks to storybook one:


![firefox_93tEjSJ55m](https://github.com/swisspost/design-system/assets/12294151/c8c1617c-01ba-4f29-8431-34f01b148e6d)

https://next.design-system.post.ch/favicon.svg
---
 packages/documentation/public/favicon.svg | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 packages/documentation/public/favicon.svg

diff --git a/packages/documentation/public/favicon.svg b/packages/documentation/public/favicon.svg
new file mode 100644
index 0000000000..f4f0328a6b
--- /dev/null
+++ b/packages/documentation/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+	<g id="Logo">
+		<rect fill="#ffcc00" x="0" y="0" width="72" height="72"/>
+		<polygon fill="#ff0000" points="34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3"/>
+		<path d="M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511
+			C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666
+			c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z"/>
+	</g>
+</svg>