chore(components): add border to the post-popovercontainer arrow element for for HCM (#6623)

## 📄 Description

This PR adds a visible border to the `post-popovercontainer` arrow
element for High Contrast Mode to improve accessibility.
It adds a `dynamic-placement` state that exposes the computed placement
from Floating UI, allowing the arrow to be styled dynamically based on
its position.

## 🔮 Design review

- [ ] Design review done
- [ ] No design review needed

## 📝 Checklist

- ✅ My code follows the style guidelines of this project
- 🛠️ I have performed a self-review of my own code
- 📄 I have made corresponding changes to the documentation
- ⚠️ My changes generate no new warnings or errors
- ✔️ New and existing unit tests pass locally with my changes

Author: myrta2302

.changeset/some-seas-invent.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added High Contrast border around the arrow element used in tooltip and popover components.

packages/components/src/components/post-popovercontainer/post-popovercontainer.scss

@@ -1,5 +1,6 @@
 @use 'sass:meta';
 @use 'sass:math';
+
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/variables/commons';
 @use '@swisspost/design-system-styles/variables/spacing';
@@ -8,6 +9,8 @@
 @use '@swisspost/design-system-styles/variables/elevation';
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/elements';
 
 // Puts polyfilled styles in a separate layer so they are easy to override
 // Can be removed as soon as popover is supported by all major browsers
@@ -106,35 +109,61 @@
       drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15));
   }
 
+  $arrow-rotation: 45deg;
   .arrow {
     $arrow-size: 0.5825rem;
+    --arrow-size: #{$arrow-size};
     position: absolute;
     width: $arrow-size;
     height: $arrow-size;
     background-color: inherit;
-    rotate: 45deg;
+    rotate: $arrow-rotation;
     pointer-events: none;
     z-index: -1;
 
-    // Create transparent border to be styled by and for the high contrast mode
-    &.top {
-      border-block-start: 2px solid transparent;
-      border-inline-start: 2px solid transparent;
+    &[dynamic-placement='top'] {
+      border-bottom-right-radius: 2px;
     }
-
-    &.right {
-      border-block-start: 2px solid transparent;
-      border-inline-end: 2px solid transparent;
+    &[dynamic-placement='right'] {
+      border-bottom-left-radius: 2px;
     }
-
-    &.left {
-      border-block-end: 2px solid transparent;
-      border-inline-start: 2px solid transparent;
+    &[dynamic-placement='bottom'] {
+      border-top-left-radius: 2px;
+    }
+    &[dynamic-placement='left'] {
+      border-top-right-radius: 2px;
     }
 
-    &.bottom {
-      border-block-end: 2px solid transparent;
-      border-inline-end: 2px solid transparent;
+    $angle-rad: math.div($arrow-rotation, 180deg) * 3.14; // convert deg to rad
+    $border-width-rem: 0.125rem;
+
+    // the actual offset when the 2px border is rotated by 45deg
+    $offset: -(math.cos($angle-rad) * $border-width-rem) - $arrow-size / 2;
+
+    @include utilities.high-contrast-mode {
+      &[dynamic-placement='top'] {
+        border-block-end: 2px solid transparent;
+        border-inline-end: 2px solid transparent;
+        bottom: #{$offset} !important;
+      }
+
+      &[dynamic-placement='left'] {
+        border-block-start: 2px solid transparent;
+        border-inline-end: 2px solid transparent;
+        right: #{$offset} !important;
+      }
+
+      &[dynamic-placement='right'] {
+        border-block-end: 2px solid transparent;
+        border-inline-start: 2px solid transparent;
+        left: #{$offset} !important;
+      }
+
+      &[dynamic-placement='bottom'] {
+        border-block-start: 2px solid transparent;
+        border-inline-start: 2px solid transparent;
+        top: #{$offset} !important;
+      }
     }
   }
 }

packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx

@@ -8,6 +8,7 @@ import {
   Prop,
   h,
   Watch,
+  State,
 } from '@stencil/core';
 
 import { IS_BROWSER, checkEmptyOrOneOf, checkEmptyOrType } from '@/utils';
@@ -129,6 +130,7 @@ export class PostPopovercontainer {
    */
   @Prop() manualClose: boolean = false;
 
+  @State() dynamicPlacement?: string;
   /**
    * Enables a safespace through which the cursor can be moved without the popover being disabled
    */
@@ -346,21 +348,35 @@ export class PostPopovercontainer {
   private async calculatePosition() {
     const { x, y, middlewareData, placement } = await this.computeMainPosition();
     const currentPlacement = placement.split('-')[0];
-
+    this.dynamicPlacement = currentPlacement;
     // Position popover
     this.host.style.left = `${x}px`;
     this.host.style.top = `${y}px`;
 
     // Position arrow if enabled
     if (this.arrow && middlewareData.arrow) {
       const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
       const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
 
+      const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+      // Calculate dynamically the half side which provides the static side offset
+      const arrowSizeValue = getComputedStyle(this.arrowRef)
+        .getPropertyValue('--arrow-size')
+        .trim();
+
+      const arrowSizePx = arrowSizeValue.endsWith('rem')
+        ? Number.parseFloat(arrowSizeValue) * rootFontSize
+        : Number.parseFloat(arrowSizeValue);
+
+      const halfSide = -0.5 * arrowSizePx;
+
       if (staticSide) {
         Object.assign(this.arrowRef.style, {
           left: arrowX ? `${arrowX}px` : '',
           top: arrowY ? `${arrowY}px` : '',
-          [staticSide]: '-5px',
+          [staticSide]: `${halfSide}px`,
         });
       }
     }
@@ -488,6 +504,7 @@ export class PostPopovercontainer {
         <div class="popover-content">
           {this.arrow && (
             <span
+              dynamic-placement={this.dynamicPlacement}
               class="arrow"
               ref={el => {
                 this.arrowRef = el;