swisspost · myrta2302 · Nov 3, 2025 · Nov 3, 2025 · Nov 3, 2025 · Nov 3, 2025
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Enabled the open animation for the `<post-tooltip>` component.
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Enabled pop-in animations for the concatenated `post-breadcrumbs`, the `post-language-menu`, and the header's user menu components.
@@ -445,11 +445,6 @@ export namespace Components {
         "for"?: string;
     }
     interface PostPopovercontainer {
-        /**
-          * Animation style
-          * @default null
-         */
-        "animation"?: 'pop-in' | null;
         /**
           * Whether or not to display a little pointer arrow
           * @default false
@@ -475,7 +470,7 @@ export namespace Components {
         "safeSpace"?: 'triangle' | 'trapezoid';
         /**
           * Programmatically display the popovercontainer
-          * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+          * @param target A focusable element inside the trigger component that controls the popover
          */
         "show": (target: HTMLElement) => Promise<void>;
         /**
@@ -566,10 +561,6 @@ export namespace Components {
         "toggled": boolean;
     }
     interface PostTooltip {
-        /**
-          * Choose a tooltip animation
-         */
-        "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
           * @default false
@@ -1431,11 +1422,6 @@ declare namespace LocalJSX {
         "for"?: string;
     }
     interface PostPopovercontainer {
-        /**
-          * Animation style
-          * @default null
-         */
-        "animation"?: 'pop-in' | null;
         /**
           * Whether or not to display a little pointer arrow
           * @default false
@@ -1565,10 +1551,6 @@ declare namespace LocalJSX {
         "toggled"?: boolean;
     }
     interface PostTooltip {
-        /**
-          * Choose a tooltip animation
-         */
-        "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
           * @default false

@@ -149,7 +149,7 @@ export class PostMenu {
 
   @EventFrom('post-popovercontainer')
   private readonly handlePostShown = (event: CustomEvent<{ first?: boolean }>) => {
-      // Only for the first open
+    // Only for the first open
       if (event.detail.first) {
         // Add "menu" and "menuitem" aria roles and aria-label
         this.host.setAttribute('role', 'menu');
@@ -164,10 +164,9 @@ export class PostMenu {
     };
 
   @EventFrom('post-popovercontainer')
-  private readonly handlePostToggled = (event: CustomEvent<{ isOpen: boolean }>) => {
-      this.isVisible = event.detail.isOpen;
+  private readonly handlePostBeforeToggle = (event: CustomEvent<{ willOpen: boolean }>) => {
+      this.isVisible = event.detail.willOpen;
       this.toggleMenu.emit(this.isVisible);
-
       if (this.isVisible) {
         this.lastFocusedElement = this.root?.activeElement as HTMLElement;
         requestAnimationFrame(() => {
@@ -249,7 +248,7 @@ export class PostMenu {
       <Host data-version={version}>
         <post-popovercontainer
           onPostShow={this.handlePostShown}
-          onPostToggle={this.handlePostToggled}
+          onPostBeforeToggle={this.handlePostBeforeToggle}
           placement={this.placement}
           ref={e => (this.popoverRef = e)}
         >

@@ -56,7 +56,8 @@ export class PostPopover {
    */
   @Method()
   async show(target: HTMLElement) {
-    this.popoverRef.show(target);
+    await this.popoverRef.show(target);
+    this.focusFirstEl();
   }
 
   /**
@@ -75,10 +76,13 @@ export class PostPopover {
   @Method()
   async toggle(target: HTMLElement, force?: boolean) {
     await this.popoverRef.toggle(target, force);
+    this.focusFirstEl();
+  }
 
+  private focusFirstEl() {
     const focusableChildren = getDeepFocusableChildren(this.host);
 
-    // find first focusable element
+    // Find first focusable element
     const firstFocusable = focusableChildren[0];
 
     if (firstFocusable) {

@@ -38,6 +38,12 @@ interface PopoverElement {
   togglePopover: (force?: boolean) => boolean;
 }
 
+const ANIMATIONS = {
+  'pop-in': popIn,
+} as const;
+
+export type AnimationName = keyof typeof ANIMATIONS;
+
 export type PostPopoverElement = HTMLElement & PopoverElement;
 
 /**
@@ -115,11 +121,6 @@ export class PostPopovercontainer {
    */
   @Prop() readonly edgeGap?: number = 8;
 
-  /**
-   * Animation style
-   */
-  @Prop() readonly animation?: 'pop-in' | null = null;
-
   /**
    * Whether or not to display a little pointer arrow
    */
@@ -130,6 +131,7 @@ export class PostPopovercontainer {
    * Enables a safespace through which the cursor can be moved without the popover being disabled
    */
   @Prop({ reflect: true }) readonly safeSpace?: 'triangle' | 'trapezoid';
+
   @Watch('placement')
   validatePlacement() {
     checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
@@ -145,6 +147,11 @@ export class PostPopovercontainer {
     checkEmptyOrOneOf(this, 'safeSpace', ['triangle', 'trapezoid']);
   }
 
+  /**
+   * Animation style
+   */
+  private readonly animation: AnimationName = 'pop-in';
+
   /**
    * Updates cursor position for safe space feature when popover is open.
    * Sets CSS custom properties for dynamic styling of safe area.
@@ -164,6 +171,9 @@ export class PostPopovercontainer {
   }
 
   componentDidLoad() {
+    this.validatePlacement();
+    this.validateEdgeGap();
+    this.validateSafeSpace();
     this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
   }
 
@@ -176,7 +186,7 @@ export class PostPopovercontainer {
 
   /**
    * Programmatically display the popovercontainer
-   * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+   * @param target A focusable element inside the trigger component that controls the popover
    */
   @Method()
   async show(target: HTMLElement) {
@@ -224,16 +234,18 @@ export class PostPopovercontainer {
     this.startAutoupdates();
 
     if (content) {
-      // Only run animation and emit related events if animation is defined
-      if (this.animation === null) {
+      const animationFn = ANIMATIONS[this.animation];
+
+      // Only run the animation if it corresponds to a valid, registered animation function
+      if (typeof animationFn === 'function') {
+        this.runOpenAnimation(animationFn, content);
+      } else {
         // No animation case
         this.postBeforeToggle.emit({ willOpen: true });
         this.postBeforeShow.emit({ first: this.hasOpenedOnce });
         this.postToggle.emit({ isOpen: true });
         this.postShow.emit({ first: this.hasOpenedOnce });
         if (this.hasOpenedOnce) this.hasOpenedOnce = false;
-      } else {
-        this.runOpenAnimation(content);
       }
     }
 
@@ -254,12 +266,6 @@ export class PostPopovercontainer {
       window.removeEventListener('mousemove', this.mouseTrackingHandler.bind(this));
     }
 
-    // Cancel any running animation
-    if (this.animation !== null && this.currentAnimation) {
-      this.currentAnimation.cancel();
-      this.currentAnimation = null;
-    }
-
     this.postBeforeToggle.emit({ willOpen: false });
     this.postToggle.emit({ isOpen: false });
     this.postHide.emit();
@@ -269,11 +275,23 @@ export class PostPopovercontainer {
    * Runs the animation and emits the toggle/show/hide events in the correct timing
    */
 
-  private async runOpenAnimation(element: HTMLElement) {
+  private async runOpenAnimation(
+    animationFn: (el: HTMLElement) => Animation | undefined,
+    element: HTMLElement,
+  ) {
     let animation: Animation | undefined;
 
     try {
-      animation = popIn(element);
+      animation = animationFn(element);
+      if (!animation) {
+        // Fallback: no animation, just emit open events directly
+        this.postBeforeToggle.emit({ willOpen: true });
+        this.postBeforeShow.emit({ first: this.hasOpenedOnce });
+        this.postToggle.emit({ isOpen: true });
+        this.postShow.emit({ first: this.hasOpenedOnce });
+
+        return;
+      }
 
       this.currentAnimation = animation;
 
@@ -323,6 +341,7 @@ export class PostPopovercontainer {
    * an influence on popovercontainer positioning
    */
   private startAutoupdates() {
+    if (!this.eventTarget || !this.host) return;
     this.clearAutoUpdate = autoUpdate(
       this.eventTarget,
       this.host,

@@ -7,7 +7,6 @@
 
 | Property    | Attribute    | Description                                                                                                                                                                                                                                                                                                                                 | Type                                                                                                                                                                 | Default     |
 | ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `animation` | `animation`  | Animation style                                                                                                                                                                                                                                                                                                                             | `"pop-in"`                                                                                                                                                           | `null`      |
 | `arrow`     | `arrow`      | Whether or not to display a little pointer arrow                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                            | `false`     |
 | `edgeGap`   | `edge-gap`   | Gap between the edge of the page and the popovercontainer                                                                                                                                                                                                                                                                                   | `number`                                                                                                                                                             | `8`         |
 | `placement` | `placement`  | Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'`     |
@@ -43,9 +42,9 @@ Programmatically display the popovercontainer
 
 #### Parameters
 
-| Name     | Type          | Description                                                                               |
-| -------- | ------------- | ----------------------------------------------------------------------------------------- |
-| `target` | `HTMLElement` | A focusable element inside the <post-popover-trigger> component that controls the popover |
+| Name     | Type          | Description                                                                |
+| -------- | ------------- | -------------------------------------------------------------------------- |
+| `target` | `HTMLElement` | A focusable element inside the trigger component that controls the popover |
 
 #### Returns
 

@@ -31,10 +31,7 @@ export class PostTooltip {
    * Whether or not to display a little pointer arrow
    */
   @Prop() readonly arrow?: boolean = false;
-  /**
-   * Choose a tooltip animation
-   */
-  @Prop() readonly animation?: 'pop-in';
+
   /**
    * Indicates the open state of the tooltip
    */
@@ -60,7 +57,7 @@ export class PostTooltip {
   @Method()
   async show(target: HTMLElement) {
     if (this.open) return;
-    this.popoverRef.show(target);
+    await this.popoverRef.show(target);
   }
 
   /**
@@ -85,8 +82,10 @@ export class PostTooltip {
    * Set the open state based on the toggle event.
    * @param e Popovercontainer toggle event
    */
-  private handleToggle(e: PostPopovercontainerCustomEvent<{ isOpen: boolean; first?: boolean }>) {
-    this.open = e.detail.isOpen;
+  private handleBeforeToggle(
+    e: PostPopovercontainerCustomEvent<{ willOpen: boolean; first?: boolean }>,
+  ) {
+    this.open = e.detail.willOpen;
   }
 
   render() {
@@ -98,9 +97,8 @@ export class PostTooltip {
           class={popoverClass}
           role="tooltip"
           arrow={this.arrow}
-          animation={this.animation}
           placement={this.placement}
-          onPostToggle={e => this.handleToggle(e)}
+          onPostBeforeToggle={e => this.handleBeforeToggle(e)}
           ref={(el: HTMLPostPopovercontainerElement) => (this.popoverRef = el)}
         >
           <slot></slot>