From 7044f83848c47cb5cf21599ae814f71638696960 Mon Sep 17 00:00:00 2001
From: debraya <alize.debray@gmail.com>
Date: Tue, 7 Feb 2023 16:53:50 +0100
Subject: [PATCH 01/27] feat(components): add alert component

update alert story
---
 .changeset/sweet-singers-trade.md             |   6 +
 packages/components/src/components.d.ts       |  53 +++++++
 .../src/components/post-alert/post-alert.scss |   6 +
 .../src/components/post-alert/post-alert.tsx  | 129 ++++++++++++++++++
 .../components/src/utils/property-checkers.ts |   8 ++
 .../src/utils/tests/property-checkers.spec.ts |  47 ++++++-
 .../components/post-alert/post-alert.docs.mdx |  11 ++
 .../post-alert/post-alert.stories.tsx         |  23 ++++
 8 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sweet-singers-trade.md
 create mode 100644 packages/components/src/components/post-alert/post-alert.scss
 create mode 100644 packages/components/src/components/post-alert/post-alert.tsx
 create mode 100644 packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx

diff --git a/.changeset/sweet-singers-trade.md b/.changeset/sweet-singers-trade.md
new file mode 100644
index 0000000000..1c08e0c7fe
--- /dev/null
+++ b/.changeset/sweet-singers-trade.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Created an alert component.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 182db1cfa4..92b6038062 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -6,6 +6,28 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
+    interface PostAlert {
+        /**
+          * The label to use for the close button of a dismissible alert.
+         */
+        "dismissLabel": string;
+        /**
+          * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+         */
+        "dismissible": boolean;
+        /**
+          * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+         */
+        "fixed": boolean;
+        /**
+          * The icon to display in the alert.  If `null`, no icon will be displayed. By default, the icon depends on the alert type.
+         */
+        "icon": string;
+        /**
+          * The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
+         */
+        "type": string;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -22,6 +44,12 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLPostAlertElement extends Components.PostAlert, HTMLStencilElement {
+    }
+    var HTMLPostAlertElement: {
+        prototype: HTMLPostAlertElement;
+        new (): HTMLPostAlertElement;
+    };
     interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
     }
     var HTMLPostCollapsibleElement: {
@@ -29,10 +57,33 @@ declare global {
         new (): HTMLPostCollapsibleElement;
     };
     interface HTMLElementTagNameMap {
+        "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
     }
 }
 declare namespace LocalJSX {
+    interface PostAlert {
+        /**
+          * The label to use for the close button of a dismissible alert.
+         */
+        "dismissLabel"?: string;
+        /**
+          * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+         */
+        "dismissible"?: boolean;
+        /**
+          * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+         */
+        "fixed"?: boolean;
+        /**
+          * The icon to display in the alert.  If `null`, no icon will be displayed. By default, the icon depends on the alert type.
+         */
+        "icon"?: string;
+        /**
+          * The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
+         */
+        "type"?: string;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -44,6 +95,7 @@ declare namespace LocalJSX {
         "headingLevel"?: number;
     }
     interface IntrinsicElements {
+        "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
     }
 }
@@ -51,6 +103,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
         }
     }
diff --git a/packages/components/src/components/post-alert/post-alert.scss b/packages/components/src/components/post-alert/post-alert.scss
new file mode 100644
index 0000000000..1f47da3ae6
--- /dev/null
+++ b/packages/components/src/components/post-alert/post-alert.scss
@@ -0,0 +1,6 @@
+@use '@swisspost/design-system-styles/components/alert';
+@use '@swisspost/design-system-styles/components/icons';
+
+:host {
+  display: block;
+}
diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
new file mode 100644
index 0000000000..ed983a4717
--- /dev/null
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -0,0 +1,129 @@
+/*
+ * Copyright 2023 by Swiss Post, Information Technology
+ */
+
+import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
+import { checkBoolean, checkNonEmptyString, checkOneOf, checkPattern } from '../../utils';
+
+@Component({
+  tag: 'post-alert',
+  styleUrl: 'post-alert.scss',
+  shadow: true,
+})
+export class PostAlert {
+  /**
+   * The type of the alert.
+   *
+   * We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
+   */
+  @Prop() type = 'primary';
+
+  /**
+   * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+   */
+  @Prop() fixed = false;
+
+  /**
+   * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+   */
+  @Prop() dismissible = false;
+
+  /**
+   * The label to use for the close button of a dismissible alert.
+   */
+  @Prop() dismissLabel: string;
+
+  /**
+   * The icon to display in the alert.
+   *
+   * If `null`, no icon will be displayed.
+   * By default, the icon depends on the alert type.
+   */
+  @Prop() icon: string;
+
+  @State() alertClasses: string[] = ['alert'];
+  @State() hasHeading: boolean;
+
+  @Element() host: HTMLElement;
+
+  @Watch('type')
+  validateType(alertType = this.type) {
+    const alertTypes = ['primary', 'success', 'danger', 'warning', 'info'];
+    checkOneOf(alertType, alertTypes, 'The post-alert requires a type.');
+
+    alertTypes.forEach(type => this.toggleAlertClass(`alert-${type}`, type === alertType));
+  }
+
+  @Watch('fixed')
+  validateFixed(isFixed = this.fixed) {
+    checkBoolean(isFixed, 'The post-alert "fixed" prop should be a boolean.');
+
+    if (isFixed) {
+      this.toggleAlertClass('alert-fixed-bottom', isFixed);
+    }
+  }
+
+  @Watch('dismissible')
+  validateDismissible(isDismissible = this.dismissible) {
+    checkBoolean(isDismissible, 'The post-alert "dismissible" prop should be a boolean.');
+
+    if (isDismissible) {
+      checkNonEmptyString(this.dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
+    }
+  }
+
+  @Watch('icon')
+  validateIcon(newValue = this.icon) {
+    const alertIcon = JSON.parse(newValue);
+
+    this.toggleAlertClass('no-icon', alertIcon === null);
+    this.removeAlertClass(/^pi-/);
+
+    if (alertIcon) {
+      const iconNamePattern = /success|warn|info|error-(black|red)|\d{4}/;
+      checkPattern(alertIcon, iconNamePattern, 'The post-alert "icon" prop should be a 4-digits string.');
+
+      this.addAlertClass(`pi-${alertIcon}`);
+    }
+  }
+
+  componentWillLoad() {
+    this.validateType();
+    this.validateFixed();
+    this.validateDismissible();
+    this.validateIcon();
+
+    this.hasHeading = this.host.querySelectorAll('[slot="heading"]').length > 0;
+  }
+
+  private toggleAlertClass(className: string, force: boolean) {
+    const classInList = this.alertClasses.includes(className);
+
+    if (classInList && !force) {
+      this.removeAlertClass(className);
+    } else if (!classInList && force) {
+      this.addAlertClass(className);
+    }
+  }
+
+  private removeAlertClass(className: string | RegExp) {
+    this.alertClasses = this.alertClasses.filter(c => {
+      return typeof className === 'string' ? c === className : !className.test(c);
+    });
+  }
+
+  private addAlertClass(className: string) {
+    this.alertClasses = [...this.alertClasses, className];
+  }
+
+  render() {
+    return (
+      <div class={this.alertClasses.join(' ')} role="alert">
+        {this.dismissible && <button aria-label={this.dismissLabel} class="btn-close" type="button"/>}
+        {this.hasHeading && <h4 class="alert-heading"><slot name="heading"/></h4>}
+        <slot/>
+      </div>
+    );
+  }
+
+}
diff --git a/packages/components/src/utils/property-checkers.ts b/packages/components/src/utils/property-checkers.ts
index 2471b5802b..0bf439e182 100644
--- a/packages/components/src/utils/property-checkers.ts
+++ b/packages/components/src/utils/property-checkers.ts
@@ -5,3 +5,11 @@ export function checkOneOf<T>(value: T, possibleValues: T[], errorMessage: strin
 export function checkBoolean(value: unknown, errorMessage: string) {
   if (typeof value !== 'boolean') throw new Error(errorMessage);
 }
+
+export function checkNonEmptyString(value: unknown, errorMessage: string) {
+  if (typeof value !== 'string' || !value.trim().length) throw new Error(errorMessage);
+}
+
+export function checkPattern(value: string, pattern: RegExp, errorMessage: string) {
+  if (!pattern.test(value)) throw new Error(errorMessage);
+}
diff --git a/packages/components/src/utils/tests/property-checkers.spec.ts b/packages/components/src/utils/tests/property-checkers.spec.ts
index 120aab4fe2..902e2d2545 100644
--- a/packages/components/src/utils/tests/property-checkers.spec.ts
+++ b/packages/components/src/utils/tests/property-checkers.spec.ts
@@ -2,7 +2,7 @@
  * Copyright 2022 by Swiss Post, Information Technology
  */
 
-import { checkBoolean, checkOneOf } from '../property-checkers';
+import { checkBoolean, checkNonEmptyString, checkOneOf, checkPattern } from '../property-checkers';
 
 describe('property-checkers', () => {
   let errorMessage: string;
@@ -51,4 +51,49 @@ describe('property-checkers', () => {
       });
     });
   });
+
+  describe('nonEmptyStringChecker', () => {
+    beforeEach(() => {
+      checker = checkNonEmptyString;
+      errorMessage = 'Is an empty string.';
+    });
+
+    it('should not throw an error if the value is a non-empty string', () => {
+      expect(runCheckerWithValue('I am a non-empty string.')).not.toThrow();
+    });
+
+    it('should throw the provided error if the value is not a string', () => {
+      [undefined, null, NaN, 1, true, {}, [], () => {}].forEach((notString) => {
+        expect(runCheckerWithValue(notString)).toThrow(errorMessage);
+      });
+    });
+
+    it('should throw the provided error if the value is an empty string', () => {
+      ['', '   '].forEach((emptyString) => {
+        expect(runCheckerWithValue(emptyString)).toThrow(errorMessage);
+      });
+    });
+  });
+
+  describe('patternChecker', () => {
+    beforeEach(() => {
+      checker = checkPattern;
+      checkerParameters = [/[a-z]{5}/];
+      errorMessage = 'Is an empty string.';
+    });
+
+    it('should not throw an error if the value matches the provided pattern', () => {
+      expect(runCheckerWithValue('hello')).not.toThrow();
+    });
+
+    it('should throw the provided error if the value is not a string', () => {
+      [undefined, null, NaN, 1, true, {}, [], () => {}].forEach((notString) => {
+        expect(runCheckerWithValue(notString)).toThrow(errorMessage);
+      });
+    });
+
+    it('should throw the provided error if the value does not match the provided pattern', () => {
+      expect(runCheckerWithValue('WORLD')).toThrow(errorMessage);
+    });
+  });
 });
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx b/packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx
new file mode 100644
index 0000000000..6751d3cf71
--- /dev/null
+++ b/packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx
@@ -0,0 +1,11 @@
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+
+<Meta title="Components/post-alert" />
+
+# Alert
+
+<Canvas>
+  <Story id="components-post-alert--default" />
+</Canvas>
+
+<ArgsTable story="^" />
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx b/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx
new file mode 100644
index 0000000000..da7d6cd1da
--- /dev/null
+++ b/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx
@@ -0,0 +1,23 @@
+import { StoryFn } from '@storybook/react';
+import { PostAlert } from '@swisspost/design-system-components-react';
+import { ComponentProps } from 'react';
+import React from 'react';
+import { definedProperties } from '../../../utils';
+
+type PostAlertArgs = ComponentProps<typeof PostAlert> & { content: string };
+
+export default {
+  title: 'Components/post-alert',
+  component: PostAlert.displayName,
+};
+
+const Template: StoryFn<PostAlertArgs> = args => (
+  <PostAlert {...args}>
+    <h4 className="alert-heading">Well done!</h4>
+    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
+      that you can see how spacing within an alert works with this kind of content.</p>
+    <hr/>
+    <p className="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+  </PostAlert>
+);
+export const Default = Template.bind({});

From b79b33f79287cf29f21f18b0e07fa0597a434d5d Mon Sep 17 00:00:00 2001
From: debraya <alize.debray@gmail.com>
Date: Wed, 8 Feb 2023 14:50:19 +0100
Subject: [PATCH 02/27] feat(components): add alert close method

---
 packages/components/src/components.d.ts       |  4 ++
 .../src/components/post-alert/post-alert.scss |  1 +
 .../src/components/post-alert/post-alert.tsx  | 49 ++++++++++++++++---
 .../post-alert/post-alert.stories.tsx         |  1 -
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 92b6038062..746982fc14 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -7,6 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface PostAlert {
+        /**
+          * Triggers alert closing programmatically (same as clicking on the close button (×)).
+         */
+        "close": () => Promise<void>;
         /**
           * The label to use for the close button of a dismissible alert.
          */
diff --git a/packages/components/src/components/post-alert/post-alert.scss b/packages/components/src/components/post-alert/post-alert.scss
index 1f47da3ae6..e5ad0e91d3 100644
--- a/packages/components/src/components/post-alert/post-alert.scss
+++ b/packages/components/src/components/post-alert/post-alert.scss
@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/components/alert';
 @use '@swisspost/design-system-styles/components/icons';
+@use '@swisspost/design-system-styles/components/transitions';
 
 :host {
   display: block;
diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index ed983a4717..58fbee620d 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -2,8 +2,8 @@
  * Copyright 2023 by Swiss Post, Information Technology
  */
 
-import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
-import { checkBoolean, checkNonEmptyString, checkOneOf, checkPattern } from '../../utils';
+import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
+import { checkBoolean, checkNonEmptyString, checkOneOf, checkPattern, onTransitionEnd } from '../../utils';
 
 @Component({
   tag: 'post-alert',
@@ -41,14 +41,16 @@ export class PostAlert {
    */
   @Prop() icon: string;
 
-  @State() alertClasses: string[] = ['alert'];
+  @State() alertClasses: string[] = [ 'alert' ];
   @State() hasHeading: boolean;
 
   @Element() host: HTMLElement;
 
+  alertElement: HTMLElement;
+
   @Watch('type')
   validateType(alertType = this.type) {
-    const alertTypes = ['primary', 'success', 'danger', 'warning', 'info'];
+    const alertTypes = [ 'primary', 'success', 'danger', 'warning', 'info' ];
     checkOneOf(alertType, alertTypes, 'The post-alert requires a type.');
 
     alertTypes.forEach(type => this.toggleAlertClass(`alert-${type}`, type === alertType));
@@ -67,6 +69,9 @@ export class PostAlert {
   validateDismissible(isDismissible = this.dismissible) {
     checkBoolean(isDismissible, 'The post-alert "dismissible" prop should be a boolean.');
 
+    const dismissibleClasses = 'alert-dismissible fade show';
+    dismissibleClasses.split(' ').forEach(dismissibleClass => this.toggleAlertClass(dismissibleClass, isDismissible));
+
     if (isDismissible) {
       checkNonEmptyString(this.dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
     }
@@ -96,6 +101,21 @@ export class PostAlert {
     this.hasHeading = this.host.querySelectorAll('[slot="heading"]').length > 0;
   }
 
+  componentDidLoad() {
+    this.alertElement = this.host.shadowRoot.querySelector('.alert');
+  }
+
+  /**
+   * Triggers alert closing programmatically (same as clicking on the close button (×)).
+   */
+  @Method()
+  async close() {
+    this.removeAlertClass('show');
+    await onTransitionEnd(this.alertElement).then(() => {
+      this.host.remove();
+    });
+  }
+
   private toggleAlertClass(className: string, force: boolean) {
     const classInList = this.alertClasses.includes(className);
 
@@ -108,19 +128,32 @@ export class PostAlert {
 
   private removeAlertClass(className: string | RegExp) {
     this.alertClasses = this.alertClasses.filter(c => {
-      return typeof className === 'string' ? c === className : !className.test(c);
+      return (typeof className === 'string') ? c !== className : !className.test(c);
     });
   }
 
   private addAlertClass(className: string) {
-    this.alertClasses = [...this.alertClasses, className];
+    this.alertClasses = [ ...this.alertClasses, className ];
   }
 
   render() {
     return (
       <div class={this.alertClasses.join(' ')} role="alert">
-        {this.dismissible && <button aria-label={this.dismissLabel} class="btn-close" type="button"/>}
-        {this.hasHeading && <h4 class="alert-heading"><slot name="heading"/></h4>}
+        {this.dismissible && (
+          <button
+            aria-label={this.dismissLabel}
+            class="btn-close"
+            onClick={() => this.close()}
+            type="button"
+          />
+        )}
+
+        {this.hasHeading && (
+          <h4 class="alert-heading">
+            <slot name="heading"/>
+          </h4>
+        )}
+
         <slot/>
       </div>
     );
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx b/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx
index da7d6cd1da..15ab789454 100644
--- a/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx
+++ b/packages/documentation/src/stories/components/post-alert/post-alert.stories.tsx
@@ -2,7 +2,6 @@ import { StoryFn } from '@storybook/react';
 import { PostAlert } from '@swisspost/design-system-components-react';
 import { ComponentProps } from 'react';
 import React from 'react';
-import { definedProperties } from '../../../utils';
 
 type PostAlertArgs = ComponentProps<typeof PostAlert> & { content: string };
 

From 07160b16046d8938f27d0497f7492baa19d1b0f1 Mon Sep 17 00:00:00 2001
From: debraya <alize.debray@gmail.com>
Date: Wed, 8 Feb 2023 15:36:06 +0100
Subject: [PATCH 03/27] feat(components): fix pattern checker and corresponding
 tests

---
 packages/components/src/utils/property-checkers.ts            | 2 +-
 packages/components/src/utils/tests/property-checkers.spec.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/utils/property-checkers.ts b/packages/components/src/utils/property-checkers.ts
index 0bf439e182..9aa2aa25a5 100644
--- a/packages/components/src/utils/property-checkers.ts
+++ b/packages/components/src/utils/property-checkers.ts
@@ -11,5 +11,5 @@ export function checkNonEmptyString(value: unknown, errorMessage: string) {
 }
 
 export function checkPattern(value: string, pattern: RegExp, errorMessage: string) {
-  if (!pattern.test(value)) throw new Error(errorMessage);
+  if (typeof value !== 'string' || !pattern.test(value)) throw new Error(errorMessage);
 }
diff --git a/packages/components/src/utils/tests/property-checkers.spec.ts b/packages/components/src/utils/tests/property-checkers.spec.ts
index 902e2d2545..a23f4eb2f1 100644
--- a/packages/components/src/utils/tests/property-checkers.spec.ts
+++ b/packages/components/src/utils/tests/property-checkers.spec.ts
@@ -79,7 +79,7 @@ describe('property-checkers', () => {
     beforeEach(() => {
       checker = checkPattern;
       checkerParameters = [/[a-z]{5}/];
-      errorMessage = 'Is an empty string.';
+      errorMessage = 'Does not match pattern.';
     });
 
     it('should not throw an error if the value matches the provided pattern', () => {

From f89d58758f0579df327cc95c367ed93fa966b54b Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <philipp.gfeller@post.ch>
Date: Mon, 20 Feb 2023 11:50:33 +0100
Subject: [PATCH 04/27] chore: update lockfile and add generated docs file

---
 .../src/components/post-alert/readme.md       | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 packages/components/src/components/post-alert/readme.md

diff --git a/packages/components/src/components/post-alert/readme.md b/packages/components/src/components/post-alert/readme.md
new file mode 100644
index 0000000000..83c57eaa95
--- /dev/null
+++ b/packages/components/src/components/post-alert/readme.md
@@ -0,0 +1,34 @@
+# post-alert
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description                                                                                                                     | Type      | Default     |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `dismissLabel` | `dismiss-label` | The label to use for the close button of a dismissible alert.                                                                   | `string`  | `undefined` |
+| `dismissible`  | `dismissible`   | If `true`, a close button (×) is displayed and the alert can be dismissed by the user.                                          | `boolean` | `false`     |
+| `fixed`        | `fixed`         | If `true`, the alert is positioned at the bottom of the window, from edge to edge.                                              | `boolean` | `false`     |
+| `icon`         | `icon`          | The icon to display in the alert.  If `null`, no icon will be displayed. By default, the icon depends on the alert type.        | `string`  | `undefined` |
+| `type`         | `type`          | The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`. | `string`  | `'primary'` |
+
+
+## Methods
+
+### `close() => Promise<void>`
+
+Triggers alert closing programmatically (same as clicking on the close button (×)).
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

From d0e4a3b134951ce3c083e104bf2e8ac502750960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Mon, 11 Sep 2023 15:04:59 +0200
Subject: [PATCH 05/27] fix alert height

---
 packages/styles/src/mixins/_notification.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index 32770e6ffe..5e474b7146 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -17,6 +17,7 @@
   $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
 
   position: relative;
+  box-sizing: border-box;
   min-height: 2 * $padding-y + $icon-size;
   box-shadow: notification.$notification-box-shadow;
   border-radius: notification.$notification-border-radius;

From 13a13ec70af445d7bc742dddace9c8b028939fd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Mon, 11 Sep 2023 15:39:12 +0200
Subject: [PATCH 06/27] add host element

---
 .../src/components/post-alert/post-alert.tsx  | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index 63ebfd314f..d43b82b266 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -1,4 +1,5 @@
-import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { version } from '../../../package.json';
 import { checkNonEmpty, checkOneOf, checkPattern, checkType, onTransitionEnd } from '../../utils';
 
 @Component({
@@ -135,24 +136,26 @@ export class PostAlert {
 
   render() {
     return (
-      <div class={this.alertClasses.join(' ')} role="alert">
-        {this.dismissible && (
-          <button
-            aria-label={this.dismissLabel}
-            class="btn-close"
-            onClick={() => this.close()}
-            type="button"
-          />
-        )}
-
-        {this.hasHeading && (
-          <h4 class="alert-heading">
-            <slot name="heading"/>
-          </h4>
-        )}
-
-        <slot/>
-      </div>
+      <Host data-version={version}>
+        <div class={this.alertClasses.join(' ')} role="alert">
+          {this.dismissible && (
+            <button
+              aria-label={this.dismissLabel}
+              class="btn-close"
+              onClick={() => this.close()}
+              type="button"
+            />
+          )}
+
+          {this.hasHeading && (
+            <h4 class="alert-heading">
+              <slot name="heading"/>
+            </h4>
+          )}
+
+          <slot/>
+        </div>
+      </Host>
     );
   }
 

From cf260817f9f89a7292387cd254def15c17500963 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Mon, 11 Sep 2023 16:17:33 +0200
Subject: [PATCH 07/27] update story args

---
 .../src/components/post-alert/post-alert.tsx  |  2 +-
 .../post-alert/post-alert.stories.ts          | 36 +++++++++++++++++--
 .../documentation/src/utils/get-attributes.ts | 16 +++++++++
 packages/documentation/src/utils/index.ts     |  1 +
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 packages/documentation/src/utils/get-attributes.ts

diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index d43b82b266..7d7b7d22cf 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -77,7 +77,7 @@ export class PostAlert {
 
   @Watch('icon')
   validateIcon(newValue = this.icon) {
-    const alertIcon = JSON.parse(newValue);
+    const alertIcon = newValue === 'null' ? null : newValue;
 
     this.toggleAlertClass('no-icon', alertIcon === null);
     this.removeAlertClass(/^pi-/);
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
index 0340f93e07..ac18361e0f 100644
--- a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
@@ -1,6 +1,8 @@
 import { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { BADGE } from '../../../../.storybook/constants';
+import { spread } from '@open-wc/lit-helpers';
+import { definedProperties, getAttributes } from '../../../utils';
 
 const meta: Meta<HTMLPostAlertElement> = {
   title: 'Components/Post Alert',
@@ -9,14 +11,44 @@ const meta: Meta<HTMLPostAlertElement> = {
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
   },
+  args: {
+    dismissLabel: 'Dismiss'
+  },
+  argTypes: {
+    dismissLabel: {
+      if: {
+        arg: 'dismissible',
+      },
+    },
+    icon: {
+      control: {
+        type: 'select',
+        labels: {
+          'null': 'No Icon',
+          '1001': 'Envelope (1001)',
+          '2023': 'Cog (2023)',
+          '2025': 'Send (2025)',
+          '2035': 'Home (2035)',
+          '2101': 'Bubble (2101)',
+        },
+      },
+      options: ['null', '1001', '2023', '2025', '2035', '2101'],
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [ 'primary', 'success', 'danger', 'warning', 'info' ],
+    }
+  }
 };
 
 export default meta;
 
 // RENDERER
-function renderAlert() {
+function renderAlert(args: Partial<HTMLPostAlertElement>) {
   return html`
-    <post-alert>
+    <post-alert ${spread(getAttributes(args))}>
       <h4 slot="heading">Titulum</h4>
       Contentus momentus vero siteos et accusam iretea et justo.
     </post-alert>
diff --git a/packages/documentation/src/utils/get-attributes.ts b/packages/documentation/src/utils/get-attributes.ts
new file mode 100644
index 0000000000..bc03fb3693
--- /dev/null
+++ b/packages/documentation/src/utils/get-attributes.ts
@@ -0,0 +1,16 @@
+import { Args } from '@storybook/web-components';
+
+export function getAttributes(
+  args: Args,
+  condition: (arg: Args) => boolean = (args: Args) => !!args
+): Args {
+  return Object.fromEntries(
+    Object
+      .entries(args)
+      .filter(([_key, value]) => condition(value))
+      .map(([key, value]) => [
+        key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
+        typeof value === 'object' ? JSON.stringify(value) : value
+      ])
+  );
+}
diff --git a/packages/documentation/src/utils/index.ts b/packages/documentation/src/utils/index.ts
index 540d902d4f..72410b3996 100644
--- a/packages/documentation/src/utils/index.ts
+++ b/packages/documentation/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './component-properties';
+export * from './get-attributes';
 export * from './map-classes';

From 6fe2cdb180ad9e4c57e996ea30b925ab8cfbc944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 12 Sep 2023 09:33:13 +0200
Subject: [PATCH 08/27] use post-icons

---
 packages/components/src/components.d.ts       |  8 ++--
 .../src/components/post-alert/post-alert.tsx  | 23 +++++------
 .../src/components/post-alert/readme.md       | 27 +++++++++----
 .../src/components/post-icon/readme.md        | 13 +++++++
 .../post-alert/post-alert.stories.ts          |  4 +-
 packages/styles/src/mixins/_color.scss        |  9 ++++-
 packages/styles/src/mixins/_notification.scss | 38 +++++++++++++------
 7 files changed, 82 insertions(+), 40 deletions(-)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 913e37f629..c5a28796e7 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -24,9 +24,9 @@ export namespace Components {
          */
         "fixed": false;
         /**
-          * The icon to display in the alert.  If `null`, no icon will be displayed. By default, the icon depends on the alert type.
+          * The icon to display in the alert.  If `true`, the icon depends on the alert type. If `false`, no icon is displayed.
          */
-        "icon": string | null;
+        "icon": boolean | string;
         /**
           * The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
          */
@@ -170,9 +170,9 @@ declare namespace LocalJSX {
          */
         "fixed"?: false;
         /**
-          * The icon to display in the alert.  If `null`, no icon will be displayed. By default, the icon depends on the alert type.
+          * The icon to display in the alert.  If `true`, the icon depends on the alert type. If `false`, no icon is displayed.
          */
-        "icon"?: string | null;
+        "icon"?: boolean | string;
         /**
           * The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
          */
diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index 7d7b7d22cf..ccf3c543e2 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -14,6 +14,7 @@ export class PostAlert {
 
   @State() alertClasses: string[] = [ 'alert' ];
   @State() hasHeading: boolean;
+  @State() iconName: string | null;
 
   /**
    * The label to use for the close button of a dismissible alert.
@@ -70,23 +71,18 @@ export class PostAlert {
   /**
    * The icon to display in the alert.
    *
-   * If `null`, no icon will be displayed.
-   * By default, the icon depends on the alert type.
+   * If `true`, the icon depends on the alert type.
+   * If `false`, no icon is displayed.
    */
-  @Prop() readonly icon: string | null;
+  @Prop() readonly icon: boolean | string = true;
 
   @Watch('icon')
-  validateIcon(newValue = this.icon) {
-    const alertIcon = newValue === 'null' ? null : newValue;
+  validateIcon(alertIcon = this.icon) {
+    this.toggleAlertClass('no-icon', alertIcon === 'false');
 
-    this.toggleAlertClass('no-icon', alertIcon === null);
-    this.removeAlertClass(/^pi-/);
-
-    if (alertIcon) {
-      const iconNamePattern = /success|warn|info|error-(black|red)|\d{4}/;
-      checkPattern(alertIcon, iconNamePattern, 'The post-alert "icon" prop should be a 4-digits string.');
-
-      this.addAlertClass(`pi-${alertIcon}`);
+    this.iconName = typeof alertIcon === 'string' && !['true', 'false'].includes(alertIcon) ? alertIcon : null;
+    if (this.iconName) {
+      checkPattern(alertIcon, /true|false|\d{4}/, 'The post-alert "icon" prop should be a 4-digits string.');
     }
   }
 
@@ -138,6 +134,7 @@ export class PostAlert {
     return (
       <Host data-version={version}>
         <div class={this.alertClasses.join(' ')} role="alert">
+          {this.iconName && <post-icon name={this.iconName} class="alert-icon"></post-icon>}
           {this.dismissible && (
             <button
               aria-label={this.dismissLabel}
diff --git a/packages/components/src/components/post-alert/readme.md b/packages/components/src/components/post-alert/readme.md
index 83c57eaa95..fe47b0e8ca 100644
--- a/packages/components/src/components/post-alert/readme.md
+++ b/packages/components/src/components/post-alert/readme.md
@@ -7,13 +7,13 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                                     | Type      | Default     |
-| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| `dismissLabel` | `dismiss-label` | The label to use for the close button of a dismissible alert.                                                                   | `string`  | `undefined` |
-| `dismissible`  | `dismissible`   | If `true`, a close button (×) is displayed and the alert can be dismissed by the user.                                          | `boolean` | `false`     |
-| `fixed`        | `fixed`         | If `true`, the alert is positioned at the bottom of the window, from edge to edge.                                              | `boolean` | `false`     |
-| `icon`         | `icon`          | The icon to display in the alert.  If `null`, no icon will be displayed. By default, the icon depends on the alert type.        | `string`  | `undefined` |
-| `type`         | `type`          | The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`. | `string`  | `'primary'` |
+| Property       | Attribute       | Description                                                                                                                     | Type                | Default     |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
+| `dismissLabel` | `dismiss-label` | The label to use for the close button of a dismissible alert.                                                                   | `string`            | `undefined` |
+| `dismissible`  | `dismissible`   | If `true`, a close button (×) is displayed and the alert can be dismissed by the user.                                          | `boolean`           | `false`     |
+| `fixed`        | `fixed`         | If `true`, the alert is positioned at the bottom of the window, from edge to edge.                                              | `boolean`           | `false`     |
+| `icon`         | `icon`          | The icon to display in the alert.  If `true`, the icon depends on the alert type. If `false`, no icon is displayed.             | `boolean \| string` | `true`      |
+| `type`         | `type`          | The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`. | `string`            | `'primary'` |
 
 
 ## Methods
@@ -29,6 +29,19 @@ Type: `Promise<void>`
 
 
 
+## Dependencies
+
+### Depends on
+
+- [post-icon](../post-icon)
+
+### Graph
+```mermaid
+graph TD;
+  post-alert --> post-icon
+  style post-alert fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index 843af50fb2..48f295e9c8 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -18,6 +18,19 @@ some content
 | `scale`             | `scale`     | The number for the css scale transformation.                                                                              | `number`                                                                       | `null`      |
 
 
+## Dependencies
+
+### Used by
+
+ - [post-alert](../post-alert)
+
+### Graph
+```mermaid
+graph TD;
+  post-alert --> post-icon
+  style post-icon fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
index ac18361e0f..f62fb29d7b 100644
--- a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
@@ -24,7 +24,7 @@ const meta: Meta<HTMLPostAlertElement> = {
       control: {
         type: 'select',
         labels: {
-          'null': 'No Icon',
+          'false': 'No Icon',
           '1001': 'Envelope (1001)',
           '2023': 'Cog (2023)',
           '2025': 'Send (2025)',
@@ -32,7 +32,7 @@ const meta: Meta<HTMLPostAlertElement> = {
           '2101': 'Bubble (2101)',
         },
       },
-      options: ['null', '1001', '2023', '2025', '2035', '2101'],
+      options: ['false', '1001', '2023', '2025', '2035', '2101'],
     },
     type: {
       control: {
diff --git a/packages/styles/src/mixins/_color.scss b/packages/styles/src/mixins/_color.scss
index 4ada87e0e6..f7e3a7d2dc 100644
--- a/packages/styles/src/mixins/_color.scss
+++ b/packages/styles/src/mixins/_color.scss
@@ -5,9 +5,14 @@
 @use './../variables/color';
 
 // mixin to correctly set CSS variables for any colored background
-@mixin colored-background($color) {
+@mixin colored-background($color, $allow-alpha: true) {
   --post-bg-rgb: #{color-fn.rgb-values($color)};
-  @extend %color-background-rgba;
+
+  @if ($allow-alpha) {
+    @extend %color-background-rgba;
+  } @else {
+    @extend %color-background-rgb;
+  }
 
   @if (contrast-fn.light-or-dark($color) == 'dark') {
     @extend %color-background-dark-variables;
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index 5e474b7146..2d74712f56 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -27,16 +27,6 @@
   font-size: $font-size;
   font-weight: notification.$notification-font-weight;
 
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    height: $icon-size;
-    width: $icon-size;
-    left: $padding-x;
-    top: $padding-y;
-  }
-
   &.no-icon {
     min-height: 2 * $padding-y + close.$close-size;
     padding-inline-start: $padding-x;
@@ -54,7 +44,21 @@
     }
   }
 
-  // for notifications with mask-image icons
+  // for notifications with mask-image icons and post-icon override
+  &::before {
+    content: '';
+    display: block;
+  }
+
+  &::before,
+  & > .alert-icon {
+    position: absolute;
+    height: $icon-size;
+    width: $icon-size;
+    left: $padding-x;
+    top: $padding-y;
+  }
+
   &.no-icon,
   &[class^='pi-'],
   &[class*=' pi-'] {
@@ -63,6 +67,10 @@
     }
   }
 
+  &.no-icon > .alert-icon {
+    display: none;
+  }
+
   a {
     font-weight: notification.$notification-link-font-weight;
   }
@@ -83,11 +91,17 @@
 }
 
 @mixin notification-variant($color, $icon) {
-  @include color-mx.colored-background($color);
+  @include color-mx.colored-background($color, $allow-alpha: false);
 
+  // default icon (mask-image)
   &:not(.no-icon, [class^='pi-'], [class*=' pi-'])::before {
     @include icons-mx.icon($icon);
   }
+
+  // icon override (post-icon)
+  & > .alert-icon {
+    background-color: $color;
+  }
 }
 
 @mixin notification-dismissible($size, $close: 'btn-close') {

From 7b742c61d50e5a51848864e8609c71919dbd5cb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Fri, 22 Sep 2023 15:30:35 +0200
Subject: [PATCH 09/27] refactor the post-alert component

---
 packages/components/src/components.d.ts       |  22 ++-
 .../src/components/post-alert/alert-types.ts  |   3 +
 .../src/components/post-alert/post-alert.scss |  16 +-
 .../src/components/post-alert/post-alert.tsx  | 176 ++++++++----------
 .../src/components/post-alert/readme.md       |  18 +-
 .../utils/property-checkers/check-one-of.ts   |   2 +-
 .../post-alert/post-alert.stories.ts          |  77 ++++++--
 packages/styles/src/components/alert.scss     |   5 +-
 .../variables/components/_notification.scss   |   5 +-
 9 files changed, 184 insertions(+), 140 deletions(-)
 create mode 100644 packages/components/src/components/post-alert/alert-types.ts

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index c5a28796e7..1839899ba6 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -5,12 +5,14 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { AlertType } from "./components/post-alert/alert-types";
+export { AlertType } from "./components/post-alert/alert-types";
 export namespace Components {
     interface PostAlert {
         /**
-          * Triggers alert closing programmatically (same as clicking on the close button (×)).
+          * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
          */
-        "close": () => Promise<void>;
+        "dismiss": () => Promise<void>;
         /**
           * The label to use for the close button of a dismissible alert.
          */
@@ -24,13 +26,13 @@ export namespace Components {
          */
         "fixed": false;
         /**
-          * The icon to display in the alert.  If `true`, the icon depends on the alert type. If `false`, no icon is displayed.
+          * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
          */
-        "icon": boolean | string;
+        "icon": string;
         /**
-          * The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
+          * The type of the alert.
          */
-        "type": string;
+        "type": AlertType;
     }
     interface PostCollapsible {
         /**
@@ -170,13 +172,13 @@ declare namespace LocalJSX {
          */
         "fixed"?: false;
         /**
-          * The icon to display in the alert.  If `true`, the icon depends on the alert type. If `false`, no icon is displayed.
+          * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
          */
-        "icon"?: boolean | string;
+        "icon"?: string;
         /**
-          * The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
+          * The type of the alert.
          */
-        "type"?: string;
+        "type"?: AlertType;
     }
     interface PostCollapsible {
         /**
diff --git a/packages/components/src/components/post-alert/alert-types.ts b/packages/components/src/components/post-alert/alert-types.ts
new file mode 100644
index 0000000000..11e8309f67
--- /dev/null
+++ b/packages/components/src/components/post-alert/alert-types.ts
@@ -0,0 +1,3 @@
+export const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'] as const;
+
+export type AlertType = typeof ALERT_TYPES[number];
diff --git a/packages/components/src/components/post-alert/post-alert.scss b/packages/components/src/components/post-alert/post-alert.scss
index e5ad0e91d3..aa9a9a9de5 100644
--- a/packages/components/src/components/post-alert/post-alert.scss
+++ b/packages/components/src/components/post-alert/post-alert.scss
@@ -1,7 +1,19 @@
 @use '@swisspost/design-system-styles/components/alert';
-@use '@swisspost/design-system-styles/components/icons';
-@use '@swisspost/design-system-styles/components/transitions';
+@use '@swisspost/design-system-styles/components/close';
+@use '@swisspost/design-system-styles/core' as post;
 
 :host {
   display: block;
 }
+
+.btn-close > .visually-hidden {
+  @include post.visually-hidden();
+}
+
+@for $i from 1 through 6 {
+  .alert-heading > ::slotted(h#{$i}) {
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    margin: 0 !important;
+  }
+}
diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index ccf3c543e2..20aec97fc0 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -1,6 +1,8 @@
 import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { version } from '../../../package.json';
-import { checkNonEmpty, checkOneOf, checkPattern, checkType, onTransitionEnd } from '../../utils';
+import { fadeOut } from '../../animations';
+import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';
+import { ALERT_TYPES, AlertType } from './alert-types';
 
 @Component({
   tag: 'post-alert',
@@ -8,149 +10,131 @@ import { checkNonEmpty, checkOneOf, checkPattern, checkType, onTransitionEnd } f
   shadow: true,
 })
 export class PostAlert {
-  private alertElement: HTMLElement;
-
   @Element() host: HTMLPostAlertElement;
 
-  @State() alertClasses: string[] = [ 'alert' ];
+  @State() classes: string;
+  @State() hasActions: boolean;
   @State() hasHeading: boolean;
-  @State() iconName: string | null;
+  @State() onDismissButtonClick = () => this.dismiss();
 
   /**
-   * The label to use for the close button of a dismissible alert.
+   * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
    */
-  @Prop() readonly dismissLabel: string;
+  @Prop() readonly dismissible: boolean = false;
+
+  @Watch('dismissible')
+  validateDismissible(isDismissible = this.dismissible) {
+    checkType(isDismissible, 'boolean', 'The post-alert "dismissible" prop should be a boolean.');
+    setTimeout(() => this.validateDismissLabel());
+  }
 
   /**
-   * The type of the alert.
-   *
-   * We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`.
+   * The label to use for the close button of a dismissible alert.
    */
-  @Prop() readonly type: string = 'primary';
-
-  @Watch('type')
-  validateType(alertType = this.type) {
-    const alertTypes = [ 'primary', 'success', 'danger', 'warning', 'info' ];
-    checkOneOf(alertType, alertTypes, `The post-alert requires a type form: ${alertTypes.join(', ')}`);
+  @Prop() readonly dismissLabel: string;
 
-    alertTypes.forEach(type => {
-      this.toggleAlertClass(`alert-${type}`, type === alertType);
-    });
+  @Watch('dismissLabel')
+  validateDismissLabel(dismissLabel = this.dismissLabel) {
+    if (this.dismissible) {
+      checkNonEmpty(dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
+    }
   }
 
   /**
    * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
    */
-  @Prop() readonly fixed = false;
+  @Prop() readonly fixed: boolean = false;
 
   @Watch('fixed')
   validateFixed(isFixed = this.fixed) {
     checkType(isFixed, 'boolean', 'The post-alert "fixed" prop should be a boolean.');
-
-    if (isFixed) {
-      this.toggleAlertClass('alert-fixed-bottom', isFixed);
-    }
   }
 
   /**
-   * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+   * The icon to display in the alert. By default, the icon depends on the alert type.
+   *
+   * If `none`, no icon is displayed.
    */
-  @Prop() readonly dismissible = false;
+  @Prop() readonly icon: string;
 
-  @Watch('dismissible')
-  validateDismissible(isDismissible = this.dismissible) {
-    checkType(isDismissible, 'boolean', 'The post-alert "dismissible" prop should be a boolean.');
-
-    this.toggleAlertClass('alert-dismissible', isDismissible);
-
-    if (isDismissible) {
-      checkNonEmpty(this.dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
-    }
+  @Watch('icon')
+  validateIcon(icon = this.icon) {
+    checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-alert "icon" prop should be a 4-digits string.');
   }
 
   /**
-   * The icon to display in the alert.
-   *
-   * If `true`, the icon depends on the alert type.
-   * If `false`, no icon is displayed.
+   * The type of the alert.
    */
-  @Prop() readonly icon: boolean | string = true;
+  @Prop() readonly type: AlertType = 'primary';
 
-  @Watch('icon')
-  validateIcon(alertIcon = this.icon) {
-    this.toggleAlertClass('no-icon', alertIcon === 'false');
-
-    this.iconName = typeof alertIcon === 'string' && !['true', 'false'].includes(alertIcon) ? alertIcon : null;
-    if (this.iconName) {
-      checkPattern(alertIcon, /true|false|\d{4}/, 'The post-alert "icon" prop should be a 4-digits string.');
-    }
+  @Watch('type')
+  validateType(type = this.type) {
+    checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);
   }
 
-  componentWillLoad() {
-    this.validateType();
-    this.validateFixed();
+  connectedCallback() {
     this.validateDismissible();
+    this.validateFixed();
     this.validateIcon();
-
-    this.hasHeading = this.host.querySelectorAll('[slot="heading"]').length > 0;
+    this.validateType();
   }
 
-  componentDidLoad() {
-    this.alertElement = this.host.shadowRoot.querySelector('.alert');
+  componentWillRender() {
+    this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
+    this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
+
+    this.classes = `alert alert-${this.type ?? 'primary'}`;
+    if (this.dismissible) this.classes += ' alert-dismissible';
+    if (this.hasActions) this.classes += ' alert-action';
+    if (this.fixed) this.classes += ' alert-fixed-bottom';
+    if (this.icon === 'none') this.classes += ' no-icon';
   }
 
   /**
-   * Triggers alert closing programmatically (same as clicking on the close button (×)).
+   * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
    */
   @Method()
-  async close() {
-    this.removeAlertClass('show');
-    await onTransitionEnd(this.alertElement).then(() => {
-      this.host.remove();
-    });
-  }
-
-  private toggleAlertClass(className: string, force: boolean) {
-    const classInList = this.alertClasses.includes(className);
-
-    if (classInList && !force) {
-      this.removeAlertClass(className);
-    } else if (!classInList && force) {
-      this.addAlertClass(className);
-    }
-  }
-
-  private removeAlertClass(className: string | RegExp) {
-    this.alertClasses = this.alertClasses.filter(c => {
-      return (typeof className === 'string') ? c !== className : !className.test(c);
-    });
-  }
-
-  private addAlertClass(className: string) {
-    this.alertClasses = [ ...this.alertClasses, className ];
+  async dismiss() {
+    const dismissal = fadeOut(this.host);
+    dismissal.onfinish = () => this.host.remove();
+    await dismissal.finished;
   }
 
   render() {
+    const defaultAlertContent = [
+      this.icon && this.icon !== 'none' && (
+        <post-icon name={this.icon} />
+      ),
+      this.hasHeading && (
+        <div class="alert-heading">
+          <slot name="heading"/>
+        </div>
+      ),
+      <slot/>
+    ];
+
+    const actionAlertContent = [
+      <div class="alert-content">
+        {defaultAlertContent}
+      </div>,
+      <div class="alert-buttons">
+        <slot name="actions"/>
+      </div>,
+    ];
+
     return (
       <Host data-version={version}>
-        <div class={this.alertClasses.join(' ')} role="alert">
-          {this.iconName && <post-icon name={this.iconName} class="alert-icon"></post-icon>}
+        <div role="alert" class={this.classes}>
           {this.dismissible && (
-            <button
-              aria-label={this.dismissLabel}
-              class="btn-close"
-              onClick={() => this.close()}
-              type="button"
-            />
-          )}
-
-          {this.hasHeading && (
-            <h4 class="alert-heading">
-              <slot name="heading"/>
-            </h4>
+            <button class="btn-close" onClick={this.onDismissButtonClick}>
+              <span class="visually-hidden">{this.dismissLabel}</span>
+            </button>
           )}
 
-          <slot/>
+          {this.hasActions
+            ? actionAlertContent
+            : defaultAlertContent
+          }
         </div>
       </Host>
     );
diff --git a/packages/components/src/components/post-alert/readme.md b/packages/components/src/components/post-alert/readme.md
index fe47b0e8ca..fef0312e51 100644
--- a/packages/components/src/components/post-alert/readme.md
+++ b/packages/components/src/components/post-alert/readme.md
@@ -7,20 +7,20 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                                     | Type                | Default     |
-| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
-| `dismissLabel` | `dismiss-label` | The label to use for the close button of a dismissible alert.                                                                   | `string`            | `undefined` |
-| `dismissible`  | `dismissible`   | If `true`, a close button (×) is displayed and the alert can be dismissed by the user.                                          | `boolean`           | `false`     |
-| `fixed`        | `fixed`         | If `true`, the alert is positioned at the bottom of the window, from edge to edge.                                              | `boolean`           | `false`     |
-| `icon`         | `icon`          | The icon to display in the alert.  If `true`, the icon depends on the alert type. If `false`, no icon is displayed.             | `boolean \| string` | `true`      |
-| `type`         | `type`          | The type of the alert.  We provide styles for the following types: `'primary'`, `'success'`, `'danger'`, `'warning'`, `'info'`. | `string`            | `'primary'` |
+| Property       | Attribute       | Description                                                                                                         | Type                                                                  | Default     |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ----------- |
+| `dismissLabel` | `dismiss-label` | The label to use for the close button of a dismissible alert.                                                       | `string`                                                              | `undefined` |
+| `dismissible`  | `dismissible`   | If `true`, a close button (×) is displayed and the alert can be dismissed by the user.                              | `boolean`                                                             | `false`     |
+| `fixed`        | `fixed`         | If `true`, the alert is positioned at the bottom of the window, from edge to edge.                                  | `boolean`                                                             | `false`     |
+| `icon`         | `icon`          | The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed. | `string`                                                              | `undefined` |
+| `type`         | `type`          | The type of the alert.                                                                                              | `"danger" \| "gray" \| "info" \| "primary" \| "success" \| "warning"` | `'primary'` |
 
 
 ## Methods
 
-### `close() => Promise<void>`
+### `dismiss() => Promise<void>`
 
-Triggers alert closing programmatically (same as clicking on the close button (×)).
+Triggers alert dismissal programmatically (same as clicking on the close button (×)).
 
 #### Returns
 
diff --git a/packages/components/src/utils/property-checkers/check-one-of.ts b/packages/components/src/utils/property-checkers/check-one-of.ts
index b14c755cdd..68c19df699 100644
--- a/packages/components/src/utils/property-checkers/check-one-of.ts
+++ b/packages/components/src/utils/property-checkers/check-one-of.ts
@@ -1,3 +1,3 @@
-export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {
+export function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string) {
   if (!possibleValues.includes(value)) throw new Error(error);
 }
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
index f62fb29d7b..e52eeed2f4 100644
--- a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
@@ -1,13 +1,13 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { BADGE } from '../../../../.storybook/constants';
-import { spread } from '@open-wc/lit-helpers';
-import { definedProperties, getAttributes } from '../../../utils';
 
 const meta: Meta<HTMLPostAlertElement> = {
   title: 'Components/Post Alert',
   component: 'post-alert',
   render: renderAlert,
+  decorators: [externalControl],
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
   },
@@ -24,33 +24,76 @@ const meta: Meta<HTMLPostAlertElement> = {
       control: {
         type: 'select',
         labels: {
-          'false': 'No Icon',
-          '1001': 'Envelope (1001)',
-          '2023': 'Cog (2023)',
-          '2025': 'Send (2025)',
-          '2035': 'Home (2035)',
-          '2101': 'Bubble (2101)',
+          '1001': '1001 (Envelope)',
+          '2023': '2023 (Cog)',
+          '2025': '2025 (Send)',
+          '2035': '2035 (Home)',
+          '2101': '2101 (Bubble)',
         },
       },
-      options: ['false', '1001', '2023', '2025', '2035', '2101'],
+      options: ['none', '1001', '2023', '2025', '2035', '2101'],
     },
-    type: {
-      control: {
-        type: 'select',
-      },
-      options: [ 'primary', 'success', 'danger', 'warning', 'info' ],
-    }
   }
 };
 
 export default meta;
 
+// DECORATORS
+function externalControl(story: StoryFn, { args, context }: StoryContext) {
+  let alert: HTMLPostAlertElement;
+
+  const toggleButton = html`
+    <a href="#" @click='${(e: Event) => showAlert(e)}'>
+      ${args.fixed ? 'Toggle Alert' : 'Show Alert'}
+    </a>
+  `;
+
+  const showAlert = (e: Event) => {
+    e.preventDefault();
+    if (alert.parentNode) {
+      void alert.dismiss();
+    } else {
+      document.getElementById('alert-container')?.appendChild(alert);
+    }
+  }
+
+  setTimeout(() => {
+    alert = document.querySelector('post-alert') as HTMLPostAlertElement;
+  });
+
+  return args.fixed
+    ? html`
+      ${toggleButton}
+      ${story(args, context)}
+    `
+    : html`
+      <div class='position-relative' style="height: 7rem">
+        ${toggleButton}
+        <div id='alert-container' class='position-absolute top-0 start-0 end-0'>
+          ${story(args, context)}
+        </div>
+      </div>
+    `;
+}
+
 // RENDERER
 function renderAlert(args: Partial<HTMLPostAlertElement>) {
   return html`
-    <post-alert ${spread(getAttributes(args))}>
+    <post-alert
+      dismissible='${ifDefined(args.dismissible)}'
+      dismiss-label='${ifDefined(args.dismissLabel)}'
+      fixed='${ifDefined(args.fixed)}'
+      icon='${ifDefined(args.icon)}'
+      type='${ifDefined(args.type)}'
+    >
       <h4 slot="heading">Titulum</h4>
       Contentus momentus vero siteos et accusam iretea et justo.
+      <button slot="actions" class="btn btn-primary btn-animated">
+        <span>Akcepti</span>
+      </button>
+      <button slot="actions" class="btn btn-secondary btn-animated">
+        <span>Aborti</span>
+      </button>
     </post-alert>
   `;
 }
diff --git a/packages/styles/src/components/alert.scss b/packages/styles/src/components/alert.scss
index 86ae905eac..28f303fb19 100644
--- a/packages/styles/src/components/alert.scss
+++ b/packages/styles/src/components/alert.scss
@@ -45,10 +45,7 @@
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-
-    > .btn {
-      margin-inline-start: notification.$notification-buttons-margin-start;
-    }
+    gap: notification.$notification-buttons-gap;
   }
 
   @include media-breakpoint-up(md) {
diff --git a/packages/styles/src/variables/components/_notification.scss b/packages/styles/src/variables/components/_notification.scss
index 969ad320b0..8868a8e85f 100644
--- a/packages/styles/src/variables/components/_notification.scss
+++ b/packages/styles/src/variables/components/_notification.scss
@@ -11,7 +11,7 @@ $notification-body-gap: spacing.$size-micro !default;
 $notification-font-weight: type.$font-weight-light !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
 $notification-heading-font-weight: type.$headings-font-weight !default;
-$notification-buttons-margin-start: spacing.$size-mini !default;
+$notification-buttons-gap: spacing.$size-mini !default;
 
 $notification-padding-x-map: () !default;
 $notification-padding-x-map: map-merge(
@@ -82,3 +82,6 @@ $notification-variants: join(
     'error' color.$error 2104
   )
 );
+
+// deprecated
+$notification-buttons-margin-start: $notification-buttons-gap !default;

From 3bcdd5970154a81dc1802a8b99baa0dbb6327e8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Mon, 25 Sep 2023 08:45:07 +0200
Subject: [PATCH 10/27] Write post-alert docs

---
 packages/components/src/components.d.ts       |   8 +-
 .../src/components/post-alert/post-alert.scss |   5 +-
 .../stories/components/alert/alert.docs.mdx   | 118 +++++++++++----
 .../alert/alert.snapshot.stories.ts           |   4 +-
 .../{ => standard-html}/alert.stories.ts      |   2 +-
 .../{ => standard-html}/getAlertClasses.ts    |  30 ++--
 .../web-component/alert-dismiss.sample.ts     |   3 +
 .../alert/web-component/post-alert.stories.ts | 135 ++++++++++++++++++
 .../components/post-alert/post-alert.docs.mdx |   9 --
 .../post-alert/post-alert.stories.ts          | 104 --------------
 packages/documentation/src/utils/index.ts     |   1 +
 .../documentation/src/utils/spread-args.ts    |  68 +++++++++
 12 files changed, 327 insertions(+), 160 deletions(-)
 rename packages/documentation/src/stories/components/alert/{ => standard-html}/alert.stories.ts (99%)
 rename packages/documentation/src/stories/components/alert/{ => standard-html}/getAlertClasses.ts (96%)
 create mode 100644 packages/documentation/src/stories/components/alert/web-component/alert-dismiss.sample.ts
 create mode 100644 packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
 delete mode 100644 packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx
 delete mode 100644 packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
 create mode 100644 packages/documentation/src/utils/spread-args.ts

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 1839899ba6..1566173ce8 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -20,11 +20,11 @@ export namespace Components {
         /**
           * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
          */
-        "dismissible": false;
+        "dismissible": boolean;
         /**
           * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
          */
-        "fixed": false;
+        "fixed": boolean;
         /**
           * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
          */
@@ -166,11 +166,11 @@ declare namespace LocalJSX {
         /**
           * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
          */
-        "dismissible"?: false;
+        "dismissible"?: boolean;
         /**
           * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
          */
-        "fixed"?: false;
+        "fixed"?: boolean;
         /**
           * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
          */
diff --git a/packages/components/src/components/post-alert/post-alert.scss b/packages/components/src/components/post-alert/post-alert.scss
index aa9a9a9de5..205dc99a9a 100644
--- a/packages/components/src/components/post-alert/post-alert.scss
+++ b/packages/components/src/components/post-alert/post-alert.scss
@@ -4,6 +4,10 @@
 
 :host {
   display: block;
+
+  ::slotted(*) {
+    margin: 0 !important;
+  }
 }
 
 .btn-close > .visually-hidden {
@@ -14,6 +18,5 @@
   .alert-heading > ::slotted(h#{$i}) {
     font-size: inherit !important;
     font-weight: inherit !important;
-    margin: 0 !important;
   }
 }
diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index 571d0a110a..dea5b0aecd 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -1,6 +1,10 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as AlertStories from './alert.stories';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import LinkTo from '@storybook/addon-links/react';
+import { PostAlert, PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react';
 import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import * as AlertStories from './standard-html/alert.stories';
+import * as PostAlertStories from './web-component/post-alert.stories';
+import AlertDismissSample from './web-component/alert-dismiss.sample?raw';
 
 <Meta of={AlertStories} />
 
@@ -14,41 +18,107 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 Alerts are available for any length of text, as well as an optional close button.
 By default, alerts are rendered with a contextually appropriate icon.
 
-<Canvas of={AlertStories.Default} />
-<Controls of={AlertStories.Default} />
+<PostAlert type="info">
+    <p slot="heading">There are various methods to integrate this component into your project.</p>
+    <p>We advise opting for the "Standard HTML" approach for alerts that remain static on the page and using the "Web Component" method for dismissible alerts.</p>
+</PostAlert>
 
-<StylesPackageImport components={["alert"]} />
+<PostTabs active-panel="webComponent">
+    <PostTabHeader slot="tabs" panel="standardHTML">Standard HTML</PostTabHeader>
+    <PostTabPanel name="standardHTML">
+      <Canvas of={AlertStories.Default} />
+      <Controls of={AlertStories.Default} />
 
-## Specific examples of application
+      <StylesPackageImport components={["alert"]} />
 
-The following examples show some of the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
+      ## Specific examples of application
 
-### Additional Content
+      The following examples show some of the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
 
-Alerts can also contain additional HTML elements like headings, paragraphs, lists, dividers, and more.
+      ### Additional Content
 
-<Canvas of={AlertStories.AdditionalContent} />
+      Alerts can also contain additional HTML elements like headings, paragraphs, lists, dividers, and more.
 
-### Dismissible
+      <Canvas of={AlertStories.AdditionalContent} />
 
-Such an alert can be removed from the UI by the user, by clicking on a dismiss button.
-This button should normally be inside the alert (as the first child), but you can also use a button which is not included in the alert's HTML.
-In the end, it's just a button with an `onClick()` event. As this is a CSS-only component, you have to define the logic yourself.
+      ### Dismissible
 
-Dismiss buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
+      Such an alert can be removed from the UI by the user, by clicking on a dismiss button.
+      This button should normally be inside the alert (as the first child), but you can also use a button which is not included in the alert's HTML.
+      In the end, it's just a button with an `onClick()` event. As this is a CSS-only component, you have to define the logic yourself.
 
-<Canvas of={AlertStories.Dismissible} />
+      Dismiss buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
 
-### Action Buttons
+      <Canvas of={AlertStories.Dismissible} />
 
-To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
+      ### Action Buttons
 
-<Canvas of={AlertStories.ActionButtons} />
+      To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
 
-### Fixed
+      <Canvas of={AlertStories.ActionButtons} />
 
-A fixed alert (at the bottom of the viewport) is obtained by adding the class `.alert-fixed-bottom` to the alert element.
-As this is a CSS-only component, you have to define the logic to show/hide/toggle the alert yourself.
-Such an alert is normally also dismissible, so please notice the information for a dismissible alert as well.
+      ### Fixed
 
-<Canvas of={AlertStories.Fixed} />
+      A fixed alert (at the bottom of the viewport) is obtained by adding the class `.alert-fixed-bottom` to the alert element.
+      As this is a CSS-only component, you have to define the logic to show/hide/toggle the alert yourself.
+      Such an alert is normally also dismissible, so please notice the information for a dismissible alert as well.
+
+      <Canvas of={AlertStories.Fixed} />
+    </PostTabPanel>
+
+    <PostTabHeader slot="tabs" panel="webComponent">Web Component</PostTabHeader>
+    <PostTabPanel name="webComponent">
+      <Canvas of={PostAlertStories.Default} />
+      <Controls of={PostAlertStories.Default} />
+
+      ## Installation
+
+      The `<post-alert>` element is part of the `@swisspost/design-system-components` package.
+      For more information, read the <LinkTo kind="getting-started-components" story="docs">getting started with components guide</LinkTo>.
+
+      ## Examples
+
+      ### Contents
+
+      Alerts can contain various HTML elements like paragraphs, lists, icons and dividers.
+
+      By default all children of the `<post-alert>` are placed in the body.
+      Use the `heading` slot to place a child in the heading, and the `actions` slot for action buttons.
+      Learn more in <a rel="noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots#adding_flexibility_with_slots">Mozilla's slots documentation</a>.
+
+      <Canvas of={PostAlertStories.Contents} />
+
+      ### Custom Icon
+
+      Alerts come with a preassigned icon based on their type.
+      You have the option to customize this icon by assigning the desired icon's name to the `icon` property of the alert.
+      Find the icon you need with the <LinkTo kind="icons-search-for-icons" story="docs">icon search page</LinkTo>.
+
+      <Canvas of={PostAlertStories.CustomIcon} />
+
+      If you prefer not to display any icon, you can set the `icon` property to `none`.
+
+      <Canvas of={PostAlertStories.NoIcon} />
+
+      ### Dismissal
+
+      The `dismissible` property can be set to enable users to dismiss the alert.
+      When present, it specifies that the alert should contain a dismiss button,
+      and you must provide a label for this button using the `dismiss-label` property.
+      Although the label remains hidden from view, it is essential for ensuring accessibility for users of assistive technologies.
+
+      <Canvas of={PostAlertStories.Dismissible} />
+
+      Alternatively, you can use any button, including action buttons within the alert, as a trigger for dismissing the alert using the `.dismiss()` method.
+      This method operates asynchronously and returns a promise that resolves once the fade-out animation has finished.
+
+      <Source code={AlertDismissSample} language="typescript"/>
+
+      ### Banner
+
+      To present an alert as a banner anchored at the bottom of the page, simply add the `fixed` property.
+      Such alerts are typically intended to be dismissible.
+
+      <Canvas of={PostAlertStories.Fixed} />
+    </PostTabPanel>
+</PostTabs>
diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
index 9a565013f9..be97705d59 100644
--- a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -1,8 +1,8 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { bombArgs } from '../../utilities/bombArgs';
-import alertMeta from './alert.stories';
-import { getAlertClasses } from './getAlertClasses';
+import alertMeta from './standard-html/alert.stories';
+import { getAlertClasses } from './standard-html/getAlertClasses';
 
 export default {
   ...alertMeta,
diff --git a/packages/documentation/src/stories/components/alert/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
similarity index 99%
rename from packages/documentation/src/stories/components/alert/alert.stories.ts
rename to packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index 04e599b209..581210f8f8 100644
--- a/packages/documentation/src/stories/components/alert/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -4,7 +4,7 @@ import { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-comp
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getAlertClasses } from './getAlertClasses';
-import { BADGE } from '../../../../.storybook/constants';
+import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
   title: 'Components/Alert',
diff --git a/packages/documentation/src/stories/components/alert/getAlertClasses.ts b/packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts
similarity index 96%
rename from packages/documentation/src/stories/components/alert/getAlertClasses.ts
rename to packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts
index dee36d623a..44f0898cee 100644
--- a/packages/documentation/src/stories/components/alert/getAlertClasses.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts
@@ -1,15 +1,15 @@
-import { Args } from '@storybook/web-components';
-
-export const getAlertClasses = (args: Args): string =>
-  [
-    'alert',
-    args.variant,
-    args.icon !== 'null' ? `pi-${args.icon}` : '',
-    args.noIcon ? 'no-icon' : '',
-    args.dismissible ? 'alert-dismissible' : '',
-    args.fixed ? 'alert-fixed-bottom' : '',
-    args.action ? 'alert-action' : '',
-    args.show ? '' : 'd-none',
-  ]
-    .filter(c => c)
-    .join(' ');
+import { Args } from '@storybook/web-components';
+
+export const getAlertClasses = (args: Args): string =>
+  [
+    'alert',
+    args.variant,
+    args.icon !== 'null' ? `pi-${args.icon}` : '',
+    args.noIcon ? 'no-icon' : '',
+    args.dismissible ? 'alert-dismissible' : '',
+    args.fixed ? 'alert-fixed-bottom' : '',
+    args.action ? 'alert-action' : '',
+    args.show ? '' : 'd-none',
+  ]
+    .filter(c => c)
+    .join(' ');
diff --git a/packages/documentation/src/stories/components/alert/web-component/alert-dismiss.sample.ts b/packages/documentation/src/stories/components/alert/web-component/alert-dismiss.sample.ts
new file mode 100644
index 0000000000..520e575729
--- /dev/null
+++ b/packages/documentation/src/stories/components/alert/web-component/alert-dismiss.sample.ts
@@ -0,0 +1,3 @@
+const alert = document.getElementById('alertId') as HTMLPostAlertElement;
+
+alert.dismiss().then(() => {});
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
new file mode 100644
index 0000000000..b375253337
--- /dev/null
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -0,0 +1,135 @@
+import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { BADGE } from '../../../../../.storybook/constants';
+import { spreadArgs } from '../../../../utils';
+
+const meta: Meta<HTMLPostAlertElement> = {
+  title: 'Components/Post Alert',
+  component: 'post-alert',
+  render: renderAlert,
+  decorators: [externalControl],
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  args: {
+    dismissible: false,
+    dismissLabel: 'Dismiss',
+    fixed: false,
+    innerHTML: '<p>Contentus momentus vero siteos et accusam iretea et justo.</p>',
+  },
+  argTypes: {
+    dismissLabel: {
+      if: {
+        arg: 'dismissible',
+      },
+    },
+    icon: {
+      control: {
+        type: 'select',
+        labels: {
+          '1001': '1001 (Envelope)',
+          '2023': '2023 (Cog)',
+          '2025': '2025 (Send)',
+          '2035': '2035 (Home)',
+          '2101': '2101 (Bubble)',
+        },
+      },
+      options: ['none', '1001', '2023', '2025', '2035', '2101'],
+    },
+  }
+};
+
+export default meta;
+
+// DECORATORS
+function externalControl(story: StoryFn, context: StoryContext) {
+  const {args, canvasElement} = context;
+  let alert: HTMLPostAlertElement;
+
+  const toggleButton = html`
+    <a id="alert-button" href="#" @click='${(e: Event) => toggleAlert(e)}'>Show Alert</a>
+  `;
+
+  const toggleAlert = (e?: Event) => {
+    if (e) e.preventDefault();
+
+    const alertButton = canvasElement.querySelector('#alert-button') as HTMLElement;
+    const alertContainer = canvasElement.querySelector('#alert-container') as HTMLElement;
+
+    if (alert.parentNode) {
+      void alert.dismiss();
+      alertButton.textContent = 'Show Alert';
+    } else {
+      alertContainer.appendChild(alert);
+      alertButton.textContent = 'Hide Alert';
+    }
+  }
+
+  setTimeout(() => {
+    alert = canvasElement.querySelector('post-alert') as HTMLPostAlertElement;
+    if (args.fixed) void alert.remove();
+  });
+
+  return html`
+    <div class=${args.fixed ? '' : 'position-relative'} style=${args.fixed ? '' : 'height: 7rem'}>
+      ${toggleButton}
+      <div id='alert-container' class=${args.fixed ? '' : 'position-absolute top-0 start-0 end-0'}>
+        ${story(args, context)}
+      </div>
+    </div>
+  `;
+}
+
+
+
+// RENDERER
+function renderAlert(args: Partial<HTMLPostAlertElement>) {
+  return html`
+    <post-alert ${spreadArgs(args)}></post-alert>
+  `;
+}
+
+// STORIES
+type Story = StoryObj<HTMLPostAlertElement>;
+
+export const Default: Story = {};
+
+export const Contents: Story = {
+  args: {
+    innerHTML:
+      '<h4 slot="heading">Titulum</h4>' +
+      '<ul class="list-unstyled">' +
+      '<li class="d-flex gap-mini"><post-icon name="1027"></post-icon>Un orde redlis titem</li>' +
+      '<li class="d-flex gap-mini"><post-icon name="1028"></post-icon>An deven moreun orde redlis titem</li>' +
+      '</ul>' +
+      '<hr/>' +
+      '<p>Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr.</p>' +
+      '<button slot="actions" class="btn btn-secondary btn-animated"><span>Aborti</span></button>' +
+      '<button slot="actions" class="btn btn-primary btn-animated"><span>Akcepti</span></button>',
+  }
+}
+
+export const CustomIcon: Story = {
+  args: {
+    icon: '1001',
+  }
+};
+
+export const NoIcon: Story = {
+  args: {
+    icon: 'none',
+  }
+};
+
+export const Dismissible: Story = {
+  args: {
+    dismissible: true,
+  }
+};
+
+export const Fixed: Story = {
+  args: {
+    dismissible: true,
+    fixed: true,
+  }
+};
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx b/packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx
deleted file mode 100644
index 11c2708c0f..0000000000
--- a/packages/documentation/src/stories/components/post-alert/post-alert.docs.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as PostAlertStories from './post-alert.stories';
-
-<Meta of={PostAlertStories} />
-
-# Alert
-
-<Canvas of={PostAlertStories.Default} />
-<Controls of={PostAlertStories.Default} />
diff --git a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts b/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
deleted file mode 100644
index e52eeed2f4..0000000000
--- a/packages/documentation/src/stories/components/post-alert/post-alert.stories.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { BADGE } from '../../../../.storybook/constants';
-
-const meta: Meta<HTMLPostAlertElement> = {
-  title: 'Components/Post Alert',
-  component: 'post-alert',
-  render: renderAlert,
-  decorators: [externalControl],
-  parameters: {
-    badges: [BADGE.NEEDS_REVISION],
-  },
-  args: {
-    dismissLabel: 'Dismiss'
-  },
-  argTypes: {
-    dismissLabel: {
-      if: {
-        arg: 'dismissible',
-      },
-    },
-    icon: {
-      control: {
-        type: 'select',
-        labels: {
-          '1001': '1001 (Envelope)',
-          '2023': '2023 (Cog)',
-          '2025': '2025 (Send)',
-          '2035': '2035 (Home)',
-          '2101': '2101 (Bubble)',
-        },
-      },
-      options: ['none', '1001', '2023', '2025', '2035', '2101'],
-    },
-  }
-};
-
-export default meta;
-
-// DECORATORS
-function externalControl(story: StoryFn, { args, context }: StoryContext) {
-  let alert: HTMLPostAlertElement;
-
-  const toggleButton = html`
-    <a href="#" @click='${(e: Event) => showAlert(e)}'>
-      ${args.fixed ? 'Toggle Alert' : 'Show Alert'}
-    </a>
-  `;
-
-  const showAlert = (e: Event) => {
-    e.preventDefault();
-    if (alert.parentNode) {
-      void alert.dismiss();
-    } else {
-      document.getElementById('alert-container')?.appendChild(alert);
-    }
-  }
-
-  setTimeout(() => {
-    alert = document.querySelector('post-alert') as HTMLPostAlertElement;
-  });
-
-  return args.fixed
-    ? html`
-      ${toggleButton}
-      ${story(args, context)}
-    `
-    : html`
-      <div class='position-relative' style="height: 7rem">
-        ${toggleButton}
-        <div id='alert-container' class='position-absolute top-0 start-0 end-0'>
-          ${story(args, context)}
-        </div>
-      </div>
-    `;
-}
-
-// RENDERER
-function renderAlert(args: Partial<HTMLPostAlertElement>) {
-  return html`
-    <post-alert
-      dismissible='${ifDefined(args.dismissible)}'
-      dismiss-label='${ifDefined(args.dismissLabel)}'
-      fixed='${ifDefined(args.fixed)}'
-      icon='${ifDefined(args.icon)}'
-      type='${ifDefined(args.type)}'
-    >
-      <h4 slot="heading">Titulum</h4>
-      Contentus momentus vero siteos et accusam iretea et justo.
-      <button slot="actions" class="btn btn-primary btn-animated">
-        <span>Akcepti</span>
-      </button>
-      <button slot="actions" class="btn btn-secondary btn-animated">
-        <span>Aborti</span>
-      </button>
-    </post-alert>
-  `;
-}
-
-// STORIES
-type Story = StoryObj<HTMLPostAlertElement>;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/utils/index.ts b/packages/documentation/src/utils/index.ts
index 72410b3996..fc4ca0d03f 100644
--- a/packages/documentation/src/utils/index.ts
+++ b/packages/documentation/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './component-properties';
 export * from './get-attributes';
 export * from './map-classes';
+export * from './spread-args';
diff --git a/packages/documentation/src/utils/spread-args.ts b/packages/documentation/src/utils/spread-args.ts
new file mode 100644
index 0000000000..40ffa7d228
--- /dev/null
+++ b/packages/documentation/src/utils/spread-args.ts
@@ -0,0 +1,68 @@
+import { Args } from '@storybook/web-components';
+import { ElementPart, nothing } from 'lit';
+import { AsyncDirective, directive } from 'lit-html/async-directive.js';
+
+type Props = Partial<HTMLElement>;
+type Attrs = Record<string, string | null>;
+
+function formatAttrs(argKey: string, argValue: any): Attrs {
+  // key to kebab case
+  const attrKey = argKey.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+  // value to string
+  switch (typeof argValue) {
+    case 'object':
+    case 'function':
+      return { [attrKey]: JSON.stringify(argValue) };
+    case 'boolean':
+      return { [attrKey]: argValue ? '' : null };
+    default:
+      return { [attrKey]: argValue ?? '' };
+  }
+}
+
+export class SpreadArgsDirective<T extends HTMLElement> extends AsyncDirective {
+  prevAttrs: Attrs = {};
+
+  render(_args: Args) {
+    return nothing;
+  }
+
+  update(part: ElementPart, [args]: Parameters<this['render']>) {
+    const element = part.element as T;
+
+    const props: Props = {};
+    const attrs: Attrs = {};
+
+    Object
+      .entries(args)
+      .forEach(([argKey, argValue]) => {
+        if (argKey in HTMLElement.prototype) {
+          Object.assign(props, {[argKey]: argValue});
+        } else {
+          Object.assign(attrs, formatAttrs(argKey, argValue));
+        }
+      });
+
+    // remove previously set attributes
+    Object
+      .keys(this.prevAttrs)
+      .forEach(attrKey => element.removeAttribute(attrKey));
+
+    // set new attributes
+    Object
+      .entries(attrs)
+      .filter(([_key, value]) => value !== null)
+      .forEach(([attrKey, attrValue]) => element.setAttribute(attrKey, attrValue ?? ''));
+
+    // set properties
+    Object
+      .entries(args)
+      .forEach(([argKey, argValue]) => Object.assign(element, {[argKey]: argValue}));
+
+    // save attributes to be able to remove them on next run
+    this.prevAttrs = attrs;
+  }
+}
+
+export const spreadArgs = directive(SpreadArgsDirective);

From afe108b0c524e3ba358411d81ebbd2144b58b500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 11:47:41 +0200
Subject: [PATCH 11/27] Fix dismissible post-alert stories

---
 packages/components/src/components.d.ts       |  8 ++++
 .../src/components/post-alert/post-alert.tsx  | 13 ++++-
 .../src/components/post-alert/readme.md       |  7 +++
 .../alert/web-component/post-alert.stories.ts | 47 +++++++++++--------
 .../web-component/post-alert.styles.scss      |  2 +
 5 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 1566173ce8..fe5f8a1fe0 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -104,6 +104,10 @@ export namespace Components {
         "show": (panelName: string) => Promise<void>;
     }
 }
+export interface PostAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostAlertElement;
+}
 export interface PostTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostTabsElement;
@@ -175,6 +179,10 @@ declare namespace LocalJSX {
           * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
          */
         "icon"?: string;
+        /**
+          * An event emitted when the alert element is dismissed, after the transition. It has no payload and only relevant for dismissible alerts.
+         */
+        "onDismissed"?: (event: PostAlertCustomEvent<void>) => void;
         /**
           * The type of the alert.
          */
diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index 20aec97fc0..a83cd2dc2a 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { version } from '../../../package.json';
 import { fadeOut } from '../../animations';
 import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';
@@ -72,6 +72,12 @@ export class PostAlert {
     checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);
   }
 
+  /**
+   * An event emitted when the alert element is dismissed, after the transition.
+   * It has no payload and only relevant for dismissible alerts.
+   */
+  @Event() dismissed: EventEmitter<void>;
+
   connectedCallback() {
     this.validateDismissible();
     this.validateFixed();
@@ -96,8 +102,11 @@ export class PostAlert {
   @Method()
   async dismiss() {
     const dismissal = fadeOut(this.host);
-    dismissal.onfinish = () => this.host.remove();
+
     await dismissal.finished;
+
+    this.host.remove();
+    this.dismissed.emit();
   }
 
   render() {
diff --git a/packages/components/src/components/post-alert/readme.md b/packages/components/src/components/post-alert/readme.md
index fef0312e51..ac947230d1 100644
--- a/packages/components/src/components/post-alert/readme.md
+++ b/packages/components/src/components/post-alert/readme.md
@@ -16,6 +16,13 @@
 | `type`         | `type`          | The type of the alert.                                                                                              | `"danger" \| "gray" \| "info" \| "primary" \| "success" \| "warning"` | `'primary'` |
 
 
+## Events
+
+| Event       | Description                                                                                                                             | Type                |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `dismissed` | An event emitted when the alert element is dismissed, after the transition. It has no payload and only relevant for dismissible alerts. | `CustomEvent<void>` |
+
+
 ## Methods
 
 ### `dismiss() => Promise<void>`
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index b375253337..b8cb46e628 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components
 import { html } from 'lit';
 import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
+import './post-alert.styles.scss';
 
 const meta: Meta<HTMLPostAlertElement> = {
   title: 'Components/Post Alert',
@@ -43,39 +44,46 @@ export default meta;
 
 // DECORATORS
 function externalControl(story: StoryFn, context: StoryContext) {
-  const {args, canvasElement} = context;
   let alert: HTMLPostAlertElement;
+  let button: HTMLButtonElement;
+  const {args, canvasElement} = context;
 
-  const toggleButton = html`
-    <a id="alert-button" href="#" @click='${(e: Event) => toggleAlert(e)}'>Show Alert</a>
-  `;
-
-  const toggleAlert = (e?: Event) => {
-    if (e) e.preventDefault();
-
-    const alertButton = canvasElement.querySelector('#alert-button') as HTMLElement;
-    const alertContainer = canvasElement.querySelector('#alert-container') as HTMLElement;
+  const toggleAlert = async (e: Event) => {
+    e.preventDefault();
 
+    const alertContainer = canvasElement.querySelector('.alert-container') as HTMLElement;
     if (alert.parentNode) {
-      void alert.dismiss();
-      alertButton.textContent = 'Show Alert';
+      await alert.dismiss();
     } else {
+      if (!args.fixed) button.hidden = true;
       alertContainer.appendChild(alert);
-      alertButton.textContent = 'Hide Alert';
+      alert.shadowRoot?.querySelector('button')?.focus();
     }
   }
 
   setTimeout(() => {
     alert = canvasElement.querySelector('post-alert') as HTMLPostAlertElement;
-    if (args.fixed) void alert.remove();
+    button = canvasElement.querySelector('.alert-button') as HTMLButtonElement;
+
+    if (args.fixed) {
+      alert.remove();
+    } else {
+      button.hidden = true;
+      alert.addEventListener('dismissed', () => {
+        button.hidden = false;
+        button.focus();
+      });
+    }
   });
 
   return html`
-    <div class=${args.fixed ? '' : 'position-relative'} style=${args.fixed ? '' : 'height: 7rem'}>
-      ${toggleButton}
-      <div id='alert-container' class=${args.fixed ? '' : 'position-absolute top-0 start-0 end-0'}>
-        ${story(args, context)}
-      </div>
+    <a
+      class="btn btn-default btn-animated alert-button"
+      href="#"
+      @click='${(e: Event) => toggleAlert(e)}'
+    ><span>${args.fixed ? 'Toggle Fixed Alert' : 'Reset Alert'}</span></a>
+    <div class="alert-container">
+      ${story(args, context)}
     </div>
   `;
 }
@@ -129,7 +137,6 @@ export const Dismissible: Story = {
 
 export const Fixed: Story = {
   args: {
-    dismissible: true,
     fixed: true,
   }
 };
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss b/packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss
new file mode 100644
index 0000000000..4a9c272dc7
--- /dev/null
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss
@@ -0,0 +1,2 @@
+@use '@swisspost/design-system-styles/core' as post;
+

From c1d63e5c73ed08389123f95a68ecdba048565b03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 16:22:44 +0200
Subject: [PATCH 12/27] Adapt HTML alert

---
 .../stories/components/alert/alert.docs.mdx   |  47 ++---
 .../alert/standard-html/alert.stories.ts      | 185 +++++-------------
 .../alert/standard-html/getAlertClasses.ts    |   6 +-
 3 files changed, 68 insertions(+), 170 deletions(-)

diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index dea5b0aecd..d97fc33c0f 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -11,57 +11,47 @@ import AlertDismissSample from './web-component/alert-dismiss.sample?raw';
 # Alert
 
 <div className="lead">
-  Provide contextual feedback messages for typical user actions with the handful of available and flexible alert
-  messages.
+  Use alerts to communicate brief, important, and potentially time-sensitive messages to the user.
 </div>
 
-Alerts are available for any length of text, as well as an optional close button.
-By default, alerts are rendered with a contextually appropriate icon.
+Alerts are intended to attract the user's attention without interrupting their ongoing task.
 
 <PostAlert type="info">
     <p slot="heading">There are various methods to integrate this component into your project.</p>
     <p>We advise opting for the "Standard HTML" approach for alerts that remain static on the page and using the "Web Component" method for dismissible alerts.</p>
 </PostAlert>
 
-<PostTabs active-panel="webComponent">
+<PostTabs>
     <PostTabHeader slot="tabs" panel="standardHTML">Standard HTML</PostTabHeader>
     <PostTabPanel name="standardHTML">
       <Canvas of={AlertStories.Default} />
-      <Controls of={AlertStories.Default} />
 
-      <StylesPackageImport components={["alert"]} />
+      <div className="hide-col-default">
+        <Controls of={AlertStories.Default} />
+      </div>
 
-      ## Specific examples of application
+      <StylesPackageImport components={["alert"]} />
 
-      The following examples show some of the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
+      ## Examples
 
-      ### Additional Content
+      ### Contents
 
-      Alerts can also contain additional HTML elements like headings, paragraphs, lists, dividers, and more.
+      Alerts can contain various HTML elements like headings, paragraphs, lists and dividers.
 
       <Canvas of={AlertStories.AdditionalContent} />
 
-      ### Dismissible
-
-      Such an alert can be removed from the UI by the user, by clicking on a dismiss button.
-      This button should normally be inside the alert (as the first child), but you can also use a button which is not included in the alert's HTML.
-      In the end, it's just a button with an `onClick()` event. As this is a CSS-only component, you have to define the logic yourself.
-
-      Dismiss buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
-
-      <Canvas of={AlertStories.Dismissible} />
-
       ### Action Buttons
 
-      To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
+      To include action buttons within an alert, apply the `.alert-action` class to the alert element,
+      enclose the alert's content within a `.alert-content` container, and place the action buttons within a `.alert-buttons` wrapper.
 
       <Canvas of={AlertStories.ActionButtons} />
 
-      ### Fixed
+      ### Banner
+
+      To present an alert as a banner anchored at the bottom of the page, simply add the class `.alert-fixed-bottom`.
+      **These alerts are typically designed to be dismissible, therefore it is advisable to employ a web component for their implementation.**
 
-      A fixed alert (at the bottom of the viewport) is obtained by adding the class `.alert-fixed-bottom` to the alert element.
-      As this is a CSS-only component, you have to define the logic to show/hide/toggle the alert yourself.
-      Such an alert is normally also dismissible, so please notice the information for a dismissible alert as well.
 
       <Canvas of={AlertStories.Fixed} />
     </PostTabPanel>
@@ -69,11 +59,12 @@ By default, alerts are rendered with a contextually appropriate icon.
     <PostTabHeader slot="tabs" panel="webComponent">Web Component</PostTabHeader>
     <PostTabPanel name="webComponent">
       <Canvas of={PostAlertStories.Default} />
+
       <Controls of={PostAlertStories.Default} />
 
       ## Installation
 
-      The `<post-alert>` element is part of the `@swisspost/design-system-components` package.
+      The `<post-alert/>` element is part of the `@swisspost/design-system-components` package.
       For more information, read the <LinkTo kind="getting-started-components" story="docs">getting started with components guide</LinkTo>.
 
       ## Examples
@@ -82,7 +73,7 @@ By default, alerts are rendered with a contextually appropriate icon.
 
       Alerts can contain various HTML elements like paragraphs, lists, icons and dividers.
 
-      By default all children of the `<post-alert>` are placed in the body.
+      By default all children of the `<post-alert/>` are placed in the body.
       Use the `heading` slot to place a child in the heading, and the `actions` slot for action buttons.
       Learn more in <a rel="noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots#adding_flexibility_with_slots">Mozilla's slots documentation</a>.
 
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index 581210f8f8..e291f2947a 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -19,108 +19,60 @@ const meta: Meta = {
   args: {
     title: 'Titulum',
     content: '<p>Contentus momentus vero siteos et accusam iretea et justo.</p>',
-    variant: 'alert-primary',
-    noIcon: false,
-    icon: 'null',
-    dismissible: false,
-    fixed: false,
-    action: false,
     show: true,
+    action: false,
+    fixed: false,
+    icon: undefined,
+    type: 'alert-primary',
   },
   argTypes: {
     title: {
       name: 'Title',
       control: { type: 'text' },
-      table: { category: 'Content' },
     },
     content: {
       name: 'Content',
       control: { type: 'text' },
-      table: { category: 'Content' },
-    },
-    variant: {
-      name: 'Variant',
-      description: 'Defines a style variant.',
-      control: {
-        type: 'radio',
-        labels: {
-          'alert-primary': 'Primary',
-          'alert-success': 'Success',
-          'alert-danger': 'Danger',
-          'alert-warning': 'Warning',
-          'alert-info': 'Info',
-          'alert-gray': 'Gray',
-        },
-      },
-      options: ['alert-primary', 'alert-success', 'alert-danger', 'alert-warning', 'alert-info', 'alert-gray'],
-      table: {
-        category: 'General',
-      },
-    },
-    noIcon: {
-      name: 'No Icon',
-      description: 'Removes the predefined icon completely.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'General',
-      },
     },
-    icon: {
-      name: 'Icon',
-      description: 'Defines a custom icon.',
-      if: {
-        arg: 'noIcon',
-        truthy: false,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'null': 'Default',
-          '1001': 'Envelope (1001)',
-          '2023': 'Cog (2023)',
-          '2025': 'Send (2025)',
-          '2035': 'Home (2035)',
-          '2101': 'Bubble (2101)',
-        },
-      },
-      options: ['null', '1001', '2023', '2025', '2035', '2101'],
-      table: {
-        category: 'General',
-      },
-    },
-    dismissible: {
-      name: 'Dismissible',
-      description:
-        'Adds the dismissible styles.<span className="mt-mini alert alert-info alert-sm">Do not forget to add the structural adjustments!</span>',
+    show: {
+      name: 'Show',
       control: { type: 'boolean' },
-      table: {
-        category: 'Variations',
-      },
+      table: { disable: true },
     },
     action: {
       name: 'Action Buttons',
       description:
-        'Adds the action button styles.<span className="mt-mini alert alert-info alert-sm">Do not forget to add the structural adjustments!</span>',
+        'If `true`, the alert contains action buttons on its right side.<span className="mt-mini alert alert-info alert-sm">Alert content must then be wrapped in a `.alert-content` container.</span>',
       control: { type: 'boolean' },
-      table: {
-        category: 'Variations',
-      },
     },
     fixed: {
       name: 'Fixed',
       description:
-        'Adds the fixed styles.<span className="mt-mini alert alert-info alert-sm">Do not forget to add the structural adjustments!</span>',
+        'If `true`, the alert anchored at the bottom of the page, from edge to edge.',
       control: { type: 'boolean' },
-      table: {
-        category: 'Variations',
+    },
+    icon: {
+      name: 'Icon',
+      description: 'The icon to display in the alert. By default, the icon depends on the alert type.',
+      control: {
+        type: 'select',
+        labels: {
+          'pi-1001': 'pi-1001 (Envelope)',
+          'pi-2023': 'pi-2023 (Cog)',
+          'pi-2025': 'pi-2025 (Send)',
+          'pi-2035': 'pi-2035 (Home)',
+          'pi-2101': 'pi-2101 (Bubble)',
+        },
       },
+      options: ['no-icon', 'pi-1001', 'pi-2023', 'pi-2025', 'pi-2035', 'pi-2101'],
     },
-    show: {
-      name: 'Show',
-      control: { type: 'boolean' },
-      table: { disable: true },
+    type: {
+      name: 'Type',
+      description: 'The type of the alert.',
+      control: {
+        type: 'select',
+      },
+      options: ['alert-primary', 'alert-success', 'alert-danger', 'alert-warning', 'alert-info', 'alert-gray'],
     },
   },
 };
@@ -131,26 +83,31 @@ export default meta;
 function externalControl(story: StoryFn, { args, context }: StoryContext) {
   const [_, updateArgs] = useArgs();
 
+  const toggleAlert = (e: MouseEvent, args: Args, updateArgs: Function) => {
+    e.preventDefault();
+    updateArgs({ show: !args.show });
+  }
+
+  if (!args.fixed && !args.show) updateArgs({ show: true });
+
   const button = html`
-    <a href="#" @click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}">
-      ${args.fixed ? 'Toggle Alert' : 'Show Alert'}
-    </a>
+    <a
+      class="btn btn-default btn-animated"
+      href="#"
+      @click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}"
+    ><span>Toggle Fixed Alert</span></a>
   `;
 
   return html`
-    ${args.fixed || !args.show ? button : nothing} ${story(args, context)}
+    ${args.fixed ? button : nothing}
+    ${story(args, context)}
   `;
 }
 
 // RENDERER
-function toggleAlert(e: MouseEvent, args: Args, updateArgs: Function) {
-  e.preventDefault();
-  updateArgs({ show: !args.show });
-}
 
-function renderAlert(args: Args) {
-  const [_, updateArgs] = useArgs();
 
+function renderAlert(args: Args) {
   const classes = getAlertClasses(args);
 
   const content = html`
@@ -160,19 +117,6 @@ function renderAlert(args: Args) {
 
   return html`
     <div class="${classes}" role="alert">
-      ${
-        /* Dismissible Button */
-        args.dismissible
-          ? html`
-              <button
-                class="btn-close"
-                @click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}"
-              >
-                <span class="visually-hidden">Close</span>
-              </button>
-            `
-          : null
-      }
       ${
         /* Alert Content */
         args.action
@@ -186,16 +130,10 @@ function renderAlert(args: Args) {
         args.action
           ? html`
               <div class="alert-buttons">
-                <button
-                  class="btn btn-primary btn-animated"
-                  @click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}"
-                >
+                <button class="btn btn-primary btn-animated">
                   <span>Akcepti</span>
                 </button>
-                <button
-                  class="btn btn-secondary btn-animated"
-                  @click="${(e: MouseEvent) => toggleAlert(e, args, updateArgs)}"
-                >
+                <button class="btn btn-secondary btn-animated">
                   <span>Aborti</span>
                 </button>
               </div>
@@ -212,11 +150,6 @@ type Story = StoryObj;
 export const Default: Story = {};
 
 export const AdditionalContent: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Variant', 'Icon', 'No Icon', 'Dismissible', 'Fixed', 'Action Buttons', 'Show'],
-    },
-  },
   args: {
     content: `<p>Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   <ul>
@@ -226,42 +159,18 @@ export const AdditionalContent: Story = {
   </ul>
 <hr />
 <p>An deven morecon tentum no sea takimata sanctus est magna aliquyam erat.</p>`,
-    variant: 'alert-success',
-  },
-};
-
-export const Dismissible: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Variant', 'Icon', 'No Icon', 'Fixed', 'Action Buttons', 'Show'],
-    },
-  },
-  args: {
-    dismissible: true,
   },
 };
 
 export const ActionButtons: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Variant', 'Icon', 'No Icon', 'Dismissible', 'Fixed', 'Show'],
-    },
-  },
   args: {
-    variant: 'alert-info',
     action: true,
   },
 };
 
 export const Fixed: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Variant', 'Icon', 'No Icon', 'Dismissible', 'Action Buttons', 'Show'],
-    },
-  },
   args: {
     fixed: true,
-    dismissible: true,
     show: false,
   },
 };
diff --git a/packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts b/packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts
index 44f0898cee..09a4bb82e9 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/getAlertClasses.ts
@@ -3,12 +3,10 @@ import { Args } from '@storybook/web-components';
 export const getAlertClasses = (args: Args): string =>
   [
     'alert',
-    args.variant,
-    args.icon !== 'null' ? `pi-${args.icon}` : '',
-    args.noIcon ? 'no-icon' : '',
-    args.dismissible ? 'alert-dismissible' : '',
+    args.type,
     args.fixed ? 'alert-fixed-bottom' : '',
     args.action ? 'alert-action' : '',
+    args.icon,
     args.show ? '' : 'd-none',
   ]
     .filter(c => c)

From 7c7e4be7c049f0925921ff8490eb2050d2c3d364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 17:32:45 +0200
Subject: [PATCH 13/27] Update snapshot tests

---
 .../snapshots/components/alert.snapshot.ts    |  7 ++-
 .../alert/alert.snapshot.stories.ts           | 50 ++++++++++++++++---
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/packages/documentation/cypress/snapshots/components/alert.snapshot.ts b/packages/documentation/cypress/snapshots/components/alert.snapshot.ts
index 6ddad36edd..48d301eb0c 100644
--- a/packages/documentation/cypress/snapshots/components/alert.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/alert.snapshot.ts
@@ -1,6 +1,11 @@
 describe('Alert', () => {
   it('default', () => {
     cy.visit('./iframe.html?id=snapshots--alert');
-    cy.percySnapshot('Alerts', { widths: [320, 1440] });
+    cy.percySnapshot('Alerts (Standard HTML)', { widths: [320, 1440] });
+  });
+
+  it('post-alert', () => {
+    cy.visit('./iframe.html?id=snapshots--post-alert');
+    cy.percySnapshot('Alerts (Web Component)', { widths: [320, 1440] });
   });
 });
diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
index be97705d59..e533c0fc74 100644
--- a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -1,5 +1,6 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { spreadArgs } from '../../../utils';
 import { bombArgs } from '../../utilities/bombArgs';
 import alertMeta from './standard-html/alert.stories';
 import { getAlertClasses } from './standard-html/getAlertClasses';
@@ -16,15 +17,12 @@ export const Alert: Story = {
     <div class="d-flex gap-3 flex-wrap">
       ${['bg-white', 'bg-dark'].map(
     bg => html`
-          <div class=${bg + ' d-flex gap-3 flex-wrap p-3'}>
+          <div class=${bg + ' d-flex flex-column gap-3 flex-wrap p-3'}>
             ${bombArgs({
-      variant: alertMeta?.argTypes?.variant?.options,
-      noIcon: [true, false],
-      icon: ['null', '1001'],
-      dismissible: [true, false],
+      type: alertMeta?.argTypes?.type?.options,
+      icon: ['no-icon', undefined, 'pi-1001'],
       action: [true, false],
     })
-      .filter(args => !(args.noIcon && args.icon === 'null'))
       .map(args => ({ ...args, show: true } as Args))
       .map(
         args => html`
@@ -76,3 +74,43 @@ export const Alert: Story = {
     </div>
   `
 };
+
+export const PostAlert: Story = {
+  render: () => {
+    const textContent =
+      '<h4 slot="heading">post-alert</h4>' +
+      '<p>' +
+      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis' +
+      'temporibus blanditiis expedita inventore atque. Numquam velit aut' +
+      'eveniet cumque non?' +
+      '</p>';
+
+    const actionButton =
+      '<button class="btn btn-primary btn-animated" slot="actions" >' +
+      '<span>Akcepti</span>' +
+      '</button>' +
+      '<button class="btn btn-default btn-animated" slot="actions" >' +
+      '<span>Aborti</span>' +
+      '</button>';
+
+    return html`
+    <div class='d-flex gap-3 flex-wrap'>
+      ${['bg-white', 'bg-dark'].map(bg => html`
+        <div class='${bg + ' d-flex flex-column gap-3 flex-wrap p-3'}'>
+          ${bombArgs({
+      type: ['primary', 'success', 'danger', 'warning', 'info', 'gray'],
+      icon: ['none', undefined, '1001'],
+      dismissible: [true, false],
+      innerHTML: [textContent + actionButton, textContent],
+    }).map(args => html`
+            <post-alert
+              ${spreadArgs(args)}
+              dismiss-label=${args.dismissible ? 'Dismiss' : undefined}
+            ></post-alert>
+          `)}
+        </div>
+      `)}
+    </div>
+  `
+  },
+};

From 0be415e3b30017c1334d12c1953b2e8b7bdc1def Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 18:21:36 +0200
Subject: [PATCH 14/27] Add snapshot tests

---
 packages/components/cypress/e2e/alert.cy.ts   | 30 +++++++++++++++++++
 .../components/cypress/support/commands.ts    |  4 ++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/cypress/e2e/alert.cy.ts

diff --git a/packages/components/cypress/e2e/alert.cy.ts b/packages/components/cypress/e2e/alert.cy.ts
new file mode 100644
index 0000000000..80f945df5d
--- /dev/null
+++ b/packages/components/cypress/e2e/alert.cy.ts
@@ -0,0 +1,30 @@
+describe('alert', () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('post-alert');
+    });
+
+    it('should render', () => {
+      cy.get('@alert').should('exist');
+    });
+
+    it('should not have a close button', () => {
+      cy.get('@alert').find('.btn-close').should('not.exist');
+    });
+  });
+
+  describe('dismissible', () => {
+    beforeEach(() => {
+      cy.getComponent('post-alert', 'dismissible');
+    });
+
+    it('should have a close button', () => {
+      cy.get('@alert').find('.btn-close').should('be.visible');
+    });
+
+    it('should be removed after the dismiss button is clicked', () => {
+      cy.get('@alert').find('.btn-close').click();
+      cy.get('@alert').should('not.exist');
+    });
+  });
+});
diff --git a/packages/components/cypress/support/commands.ts b/packages/components/cypress/support/commands.ts
index 86c6d51182..1e8f032e41 100644
--- a/packages/components/cypress/support/commands.ts
+++ b/packages/components/cypress/support/commands.ts
@@ -50,7 +50,9 @@ chai.use(isInViewport);
 
 Cypress.Commands.add('getComponent', (component: string, story = 'default') => {
   cy.visit(`/iframe.html?id=components-${component}--${story}`);
-  cy.get(`post-${component}`).as(component);
+
+  const alias = component.replace(/^post-/, '');
+  cy.get(`post-${alias}`).as(alias);
 });
 
 Cypress.Commands.add('checkVisibility', (visibility: 'visible' | 'hidden') => {

From 5a7a161ef38666247f2507daee2eb01bc4d359ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 18:24:36 +0200
Subject: [PATCH 15/27] Remove unnecessary function

---
 .../documentation/src/utils/get-attributes.ts    | 16 ----------------
 packages/documentation/src/utils/index.ts        |  1 -
 2 files changed, 17 deletions(-)
 delete mode 100644 packages/documentation/src/utils/get-attributes.ts

diff --git a/packages/documentation/src/utils/get-attributes.ts b/packages/documentation/src/utils/get-attributes.ts
deleted file mode 100644
index bc03fb3693..0000000000
--- a/packages/documentation/src/utils/get-attributes.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Args } from '@storybook/web-components';
-
-export function getAttributes(
-  args: Args,
-  condition: (arg: Args) => boolean = (args: Args) => !!args
-): Args {
-  return Object.fromEntries(
-    Object
-      .entries(args)
-      .filter(([_key, value]) => condition(value))
-      .map(([key, value]) => [
-        key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(),
-        typeof value === 'object' ? JSON.stringify(value) : value
-      ])
-  );
-}
diff --git a/packages/documentation/src/utils/index.ts b/packages/documentation/src/utils/index.ts
index fc4ca0d03f..51b45ec187 100644
--- a/packages/documentation/src/utils/index.ts
+++ b/packages/documentation/src/utils/index.ts
@@ -1,4 +1,3 @@
 export * from './component-properties';
-export * from './get-attributes';
 export * from './map-classes';
 export * from './spread-args';

From 4513ea48dbe446531967b58a889fb3bea0dee4b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 18:28:40 +0200
Subject: [PATCH 16/27] Update components.d.ts

---
 packages/components/src/components.d.ts | 67 +++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 82d0df09c5..dafbed4386 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -5,11 +5,39 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { AlertType } from "./components/post-alert/alert-types";
 import { BackgroundColor } from "./components/post-tooltip/types";
 import { Placement } from "@floating-ui/dom";
+export { AlertType } from "./components/post-alert/alert-types";
 export { BackgroundColor } from "./components/post-tooltip/types";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
+    interface PostAlert {
+        /**
+          * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
+         */
+        "dismiss": () => Promise<void>;
+        /**
+          * The label to use for the close button of a dismissible alert.
+         */
+        "dismissLabel": string;
+        /**
+          * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+         */
+        "dismissible": boolean;
+        /**
+          * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+         */
+        "fixed": boolean;
+        /**
+          * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
+         */
+        "icon": string;
+        /**
+          * The type of the alert.
+         */
+        "type": AlertType;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -105,11 +133,21 @@ export namespace Components {
         "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
     }
 }
+export interface PostAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostAlertElement;
+}
 export interface PostTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostTabsElement;
 }
 declare global {
+    interface HTMLPostAlertElement extends Components.PostAlert, HTMLStencilElement {
+    }
+    var HTMLPostAlertElement: {
+        prototype: HTMLPostAlertElement;
+        new (): HTMLPostAlertElement;
+    };
     interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
     }
     var HTMLPostCollapsibleElement: {
@@ -150,6 +188,7 @@ declare global {
         new (): HTMLPostTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
         "post-tab-header": HTMLPostTabHeaderElement;
@@ -159,6 +198,32 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface PostAlert {
+        /**
+          * The label to use for the close button of a dismissible alert.
+         */
+        "dismissLabel"?: string;
+        /**
+          * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+         */
+        "dismissible"?: boolean;
+        /**
+          * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+         */
+        "fixed"?: boolean;
+        /**
+          * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
+         */
+        "icon"?: string;
+        /**
+          * An event emitted when the alert element is dismissed, after the transition. It has no payload and only relevant for dismissible alerts.
+         */
+        "onDismissed"?: (event: PostAlertCustomEvent<void>) => void;
+        /**
+          * The type of the alert.
+         */
+        "type"?: AlertType;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -235,6 +300,7 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface IntrinsicElements {
+        "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
         "post-tab-header": PostTabHeader;
@@ -247,6 +313,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             /**
              * @class PostIcon - representing a stencil component

From c0efa28d4983d9b175220beffaf43633f60b23f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 26 Sep 2023 18:32:42 +0200
Subject: [PATCH 17/27] Update _notification.scss

---
 packages/styles/src/mixins/_notification.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index 2d74712f56..48cbb77219 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -51,7 +51,7 @@
   }
 
   &::before,
-  & > .alert-icon {
+  > .alert-icon {
     position: absolute;
     height: $icon-size;
     width: $icon-size;
@@ -99,7 +99,7 @@
   }
 
   // icon override (post-icon)
-  & > .alert-icon {
+  > .alert-icon {
     background-color: $color;
   }
 }

From 1f8299aacd2cea109082d401e531078917acf41e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Wed, 27 Sep 2023 10:32:03 +0200
Subject: [PATCH 18/27] Update .changeset/sweet-singers-trade.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
---
 .changeset/sweet-singers-trade.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/sweet-singers-trade.md b/.changeset/sweet-singers-trade.md
index 1c08e0c7fe..a7f9d2d33f 100644
--- a/.changeset/sweet-singers-trade.md
+++ b/.changeset/sweet-singers-trade.md
@@ -3,4 +3,4 @@
 '@swisspost/design-system-components': minor
 ---
 
-Created an alert component.
+Created the web component variant for the alert component.

From 346f33becef1150c09ab5843d356a81860c20bdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Wed, 27 Sep 2023 10:33:48 +0200
Subject: [PATCH 19/27] Update
 packages/components/src/components/post-alert/post-alert.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
---
 packages/components/src/components/post-alert/post-alert.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/post-alert/post-alert.scss b/packages/components/src/components/post-alert/post-alert.scss
index 205dc99a9a..3ab0f9e05d 100644
--- a/packages/components/src/components/post-alert/post-alert.scss
+++ b/packages/components/src/components/post-alert/post-alert.scss
@@ -10,7 +10,7 @@
   }
 }
 
-.btn-close > .visually-hidden {
+.visually-hidden {
   @include post.visually-hidden();
 }
 

From 8282d834a870725afb083ccc36aea3c6a1a28112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 27 Sep 2023 10:41:39 +0200
Subject: [PATCH 20/27] Remove unnecessary styles

---
 .../components/alert/web-component/post-alert.stories.ts        | 1 -
 .../components/alert/web-component/post-alert.styles.scss       | 2 --
 2 files changed, 3 deletions(-)
 delete mode 100644 packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss

diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index b8cb46e628..830e4cbab6 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -2,7 +2,6 @@ import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components
 import { html } from 'lit';
 import { BADGE } from '../../../../../.storybook/constants';
 import { spreadArgs } from '../../../../utils';
-import './post-alert.styles.scss';
 
 const meta: Meta<HTMLPostAlertElement> = {
   title: 'Components/Post Alert',
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss b/packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss
deleted file mode 100644
index 4a9c272dc7..0000000000
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.styles.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-

From def8fd18924da23f4b44b7c9b6166859fb1df076 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 27 Sep 2023 10:45:53 +0200
Subject: [PATCH 21/27] Update MDN link label

---
 .../documentation/src/stories/components/alert/alert.docs.mdx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index d97fc33c0f..bf3fbb4e2c 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -75,7 +75,7 @@ Alerts are intended to attract the user's attention without interrupting their o
 
       By default all children of the `<post-alert/>` are placed in the body.
       Use the `heading` slot to place a child in the heading, and the `actions` slot for action buttons.
-      Learn more in <a rel="noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots#adding_flexibility_with_slots">Mozilla's slots documentation</a>.
+      Learn more about <a rel="noopener" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots#adding_flexibility_with_slots">slots in the mdn web docs</a>.
 
       <Canvas of={PostAlertStories.Contents} />
 

From 06f45b17f8e2f2f4dd18153df589eb9cf46299c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 27 Sep 2023 10:47:46 +0200
Subject: [PATCH 22/27] Add description for alert's innerHTML control

---
 .../alert/web-component/post-alert.stories.ts          | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index 830e4cbab6..da66fd31bb 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -36,6 +36,16 @@ const meta: Meta<HTMLPostAlertElement> = {
       },
       options: ['none', '1001', '2023', '2025', '2035', '2101'],
     },
+    innerHTML: {
+      description:
+        'Defines the HTML markup contained in the alert.',
+      table: {
+        category: 'content',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
   }
 };
 

From bc27af33ef6a148e2b437044ca7760d673835e2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 27 Sep 2023 10:56:12 +0200
Subject: [PATCH 23/27] Make the alert's dismissLabel control required

---
 .../components/alert/web-component/post-alert.stories.ts      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index da66fd31bb..9d411c86be 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -22,6 +22,10 @@ const meta: Meta<HTMLPostAlertElement> = {
       if: {
         arg: 'dismissible',
       },
+      type: {
+        name: 'string',
+        required: true,
+      }
     },
     icon: {
       control: {

From 6d15b462b9061b4ab3a8ebc48fe6c6417c9930c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 27 Sep 2023 11:18:27 +0200
Subject: [PATCH 24/27] Add changeset for changes in the alert's gap

---
 .changeset/fifty-apricots-film.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fifty-apricots-film.md

diff --git a/.changeset/fifty-apricots-film.md b/.changeset/fifty-apricots-film.md
new file mode 100644
index 0000000000..b821e72347
--- /dev/null
+++ b/.changeset/fifty-apricots-film.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Reduced the gap between the alert body and action buttons.

From c079ddbcd89762fbefe82db07633dae92227353a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Fri, 29 Sep 2023 09:00:47 +0200
Subject: [PATCH 25/27] Add keys to JSX arrays

---
 .../src/components/post-alert/post-alert.tsx          | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index a83cd2dc2a..587635c5c5 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -12,6 +12,7 @@ import { ALERT_TYPES, AlertType } from './alert-types';
 export class PostAlert {
   @Element() host: HTMLPostAlertElement;
 
+  @State() alertId = crypto.randomUUID();
   @State() classes: string;
   @State() hasActions: boolean;
   @State() hasHeading: boolean;
@@ -112,21 +113,21 @@ export class PostAlert {
   render() {
     const defaultAlertContent = [
       this.icon && this.icon !== 'none' && (
-        <post-icon name={this.icon} />
+        <post-icon key={`${this.alertId}-icon`} name={this.icon} />
       ),
       this.hasHeading && (
-        <div class="alert-heading">
+        <div key={`${this.alertId}-heading`} class="alert-heading">
           <slot name="heading"/>
         </div>
       ),
-      <slot/>
+      <slot key={`${this.alertId}-message`}/>
     ];
 
     const actionAlertContent = [
-      <div class="alert-content">
+      <div key={`${this.alertId}-content`} class="alert-content">
         {defaultAlertContent}
       </div>,
-      <div class="alert-buttons">
+      <div key={`${this.alertId}-buttons`} class="alert-buttons">
         <slot name="actions"/>
       </div>,
     ];

From 59b92cfef659eebef52fff46ee6b2e6376dd6be3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Fri, 29 Sep 2023 09:30:32 +0200
Subject: [PATCH 26/27] Add icon stories for HTML alerts

---
 .../stories/components/alert/alert.docs.mdx    | 12 ++++++++++++
 .../alert/standard-html/alert.stories.ts       | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index bf3fbb4e2c..e838525f04 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -40,6 +40,18 @@ Alerts are intended to attract the user's attention without interrupting their o
 
       <Canvas of={AlertStories.AdditionalContent} />
 
+      ### Custom Icon
+
+      Alerts come with a preassigned icon based on their type.
+      You have the option to customize this icon by using a `post-icon` element inside the alert.
+      For more information, read the <LinkTo kind="icons-getting-started" story="docs">getting started with icons guide</LinkTo>.
+
+      <Canvas of={AlertStories.CustomIcon} />
+
+      If you prefer not to display any icon, you can add the `.no-icon` class to the alert.
+
+      <Canvas of={AlertStories.NoIcon} />
+
       ### Action Buttons
 
       To include action buttons within an alert, apply the `.alert-action` class to the alert element,
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index c2c6bccb10..60e7649a9e 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -61,7 +61,11 @@ const meta: Meta = {
     },
     icon: {
       name: 'Icon',
-      description: 'The icon to display in the alert. By default, the icon depends on the alert type.',
+      description: 'The icon to display in the alert. By default, the icon depends on the alert type.' +
+        '<span className="mt-mini alert alert-info alert-sm">' +
+        'To use a custom icon, you must first ' +
+        '<a href="/?path=/docs/icons-getting-started--docs">set up the icons in your project</a>' +
+        '.</span>',
       if: {
         arg: 'noIcon',
         truthy: false,
@@ -182,6 +186,18 @@ export const AdditionalContent: Story = {
   },
 };
 
+export const CustomIcon: Story = {
+  args: {
+    icon: '1001',
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    noIcon: true,
+  },
+};
+
 export const ActionButtons: Story = {
   args: {
     action: true,

From 227a51174df821d3b12fa50f2c45b40a6a8a13ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Fri, 29 Sep 2023 10:13:15 +0200
Subject: [PATCH 27/27] Update alert styles

---
 .../alert/standard-html/alert.stories.ts      |  4 +--
 packages/styles/src/components/alert.scss     |  5 ++--
 packages/styles/src/components/toast.scss     |  3 +--
 packages/styles/src/mixins/_notification.scss | 27 ++++++++++++++-----
 packages/styles/src/placeholders/_index.scss  |  1 -
 .../src/placeholders/_notification.scss       | 13 ---------
 .../themes/bootstrap/_overrides-mixins.scss   |  3 +--
 .../placeholders/notifications.test.scss      |  2 --
 8 files changed, 26 insertions(+), 32 deletions(-)
 delete mode 100644 packages/styles/src/placeholders/_notification.scss

diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index 60e7649a9e..ee91c6a5f6 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -17,7 +17,6 @@ const meta: Meta = {
     },
   },
   args: {
-    title: 'Titulum',
     content: '<p>Contentus momentus vero siteos et accusam iretea et justo.</p>',
     show: true,
     action: false,
@@ -127,7 +126,7 @@ function renderAlert(args: Args) {
   const classes = getAlertClasses(args);
 
   const content = html`
-    <h4 class="alert-heading">${args.title}</h4>
+    ${args.title ? html`<h4 class="alert-heading">${args.title}</h4>` : nothing}
     ${unsafeHTML(args.content)}
   `;
 
@@ -175,6 +174,7 @@ export const Default: Story = {};
 
 export const AdditionalContent: Story = {
   args: {
+    title: 'Titulum',
     content: `<p>Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
   <ul>
     <li>Un orde redlis titem</li>
diff --git a/packages/styles/src/components/alert.scss b/packages/styles/src/components/alert.scss
index 28f303fb19..9b2a656a35 100644
--- a/packages/styles/src/components/alert.scss
+++ b/packages/styles/src/components/alert.scss
@@ -6,7 +6,6 @@
 @use './../themes/bootstrap/core' as *;
 
 @use './../mixins/notification' as notification-mx;
-@use './../placeholders/notification' as notification-ph;
 
 @use './../variables/breakpoints';
 @use './../variables/commons';
@@ -18,7 +17,7 @@
   @include notification-mx.notification-size(alert);
 
   &:not(.alert-action) {
-    @extend %notification-body;
+    @include notification-mx.notification-body(alert);
   }
 }
 
@@ -38,7 +37,7 @@
 
   > .alert-content {
     flex: 1 1 auto;
-    @extend %notification-body;
+    @include notification-mx.notification-body(alert);
   }
 
   > .alert-buttons {
diff --git a/packages/styles/src/components/toast.scss b/packages/styles/src/components/toast.scss
index 6cc76b967c..7b43983ec6 100644
--- a/packages/styles/src/components/toast.scss
+++ b/packages/styles/src/components/toast.scss
@@ -5,7 +5,6 @@
 
 @use './../mixins/notification' as notification-mx;
 @use './../placeholders/close' as close-ph;
-@use './../placeholders/notification' as notification-ph;
 
 @use './../variables/commons';
 @use './../variables/spacing';
@@ -13,8 +12,8 @@
 
 .toast {
   @include notification-mx.notification-size(toast);
+  @include notification-mx.notification-body(toast);
   @include notification-mx.notification-dismissible(toast, 'toast-close-button');
-  @extend %notification-body;
 }
 
 .toast-close-button {
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index 52bdbb03fa..c2211ea9fc 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -14,7 +14,6 @@
   $font-size: map.get(notification.$notification-font-size-map, $size);
   $padding-x: map.get(notification.$notification-padding-x-map, $size);
   $padding-y: map.get(notification.$notification-padding-y-map, $size);
-  $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
 
   position: relative;
   box-sizing: border-box;
@@ -71,6 +70,21 @@
     }
   }
 
+  @include utilities-mx.high-contrast-mode {
+    filter: none !important;
+    background-color: transparent !important;
+    border: 2px solid WindowText;
+  }
+}
+
+@mixin notification-body($size) {
+  $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: notification.$notification-body-gap;
+
   a {
     font-weight: notification.$notification-link-font-weight;
   }
@@ -79,14 +93,13 @@
     margin-block: $hr-margin-block !important;
   }
 
-  > *:only-child {
+  > :only-child,
+  > post-icon:first-child + :last-child {
     @include notification-heading($size);
   }
 
-  @include utilities-mx.high-contrast-mode {
-    filter: none !important;
-    background-color: transparent !important;
-    border: 2px solid WindowText;
+  > * {
+    margin: 0;
   }
 }
 
@@ -116,7 +129,7 @@
     inset-inline-end: $padding-x;
   }
 
-  > .#{$close}:first-child + *:last-child {
+  > .#{$close}:first-child + :last-child {
     @include notification-heading($size);
   }
 }
diff --git a/packages/styles/src/placeholders/_index.scss b/packages/styles/src/placeholders/_index.scss
index 8978d4158b..8c24290e7f 100644
--- a/packages/styles/src/placeholders/_index.scss
+++ b/packages/styles/src/placeholders/_index.scss
@@ -1,3 +1,2 @@
 @use './dropdown';
-@use './notification';
 @use './text';
diff --git a/packages/styles/src/placeholders/_notification.scss b/packages/styles/src/placeholders/_notification.scss
deleted file mode 100644
index f4f69f8b7b..0000000000
--- a/packages/styles/src/placeholders/_notification.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use './../variables/components/notification';
-@use './../variables/components/close';
-
-%notification-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: notification.$notification-body-gap;
-
-  > * {
-    margin: 0;
-  }
-}
diff --git a/packages/styles/src/themes/bootstrap/_overrides-mixins.scss b/packages/styles/src/themes/bootstrap/_overrides-mixins.scss
index 3b597dbb53..c730feab8c 100644
--- a/packages/styles/src/themes/bootstrap/_overrides-mixins.scss
+++ b/packages/styles/src/themes/bootstrap/_overrides-mixins.scss
@@ -18,7 +18,7 @@
     display: none;
     max-width: 100%; // Contain to parent when possible
     padding: tooltips.$tooltip-padding-y tooltips.$tooltip-padding-x;
-    margin-top: .1rem;
+    margin-top: 0.1rem;
     @include font-size(tooltips.$tooltip-font-size);
     color: $tooltip-color;
     background-color: $tooltip-bg-color;
@@ -31,4 +31,3 @@
     }
   }
 }
-
diff --git a/packages/styles/tests/placeholders/notifications.test.scss b/packages/styles/tests/placeholders/notifications.test.scss
index b56b0bb41d..9bb9029636 100644
--- a/packages/styles/tests/placeholders/notifications.test.scss
+++ b/packages/styles/tests/placeholders/notifications.test.scss
@@ -1,6 +1,4 @@
 @use "src/placeholders/notification";
-@use "src/variables/components/notification";
 
 .notification-container {
-  @extend %notification-body;
 }