feat(component): add anchor navigation functionality to <post-tab> component

.changeset/tabs-anchor-navigation.md

@@ -0,0 +1,52 @@
+---
+"@swisspost/design-system-components": major
+"@swisspost/design-system-components-react": major
+"@swisspost/design-system-components-angular": major
+---
+
+Refactored `<post-tabs>` component:
+- Renamed `post-tab-header` component to `post-tab-item`
+- Renamed `panel` property to `name` in `post-tab-item` component
+- Renamed `name` property to `for` in `post-tab-panel` component  
+- Renamed `activePanel` property to `activeTab` in `post-tabs` component
+- Changed slot structure: `post-tab-item` elements now use the default slot and `post-tab-panel` elements use the `panels` slot
+
+BEFORE:
+
+```html
+<post-tabs active-panel="first">
+  <post-tab-header panel="first">First tab</post-tab-header>
+  <post-tab-header panel="second">Second tab</post-tab-header>
+  <post-tab-header panel="third">Third tab</post-tab-header>
+
+  <post-tab-panel name="first">
+    This is the content of the first tab.
+  </post-tab-panel>
+  <post-tab-panel name="second">
+    This is the content of the second tab.
+  </post-tab-panel>
+  <post-tab-panel name="third">
+    This is the content of the third tab.
+  </post-tab-panel>
+</post-tabs>
+```
+
+AFTER:
+
+```html
+<post-tabs active-tab="first">
+  <post-tab-item name="first">First tab</post-tab-item>
+  <post-tab-item name="second">Second tab</post-tab-item>
+  <post-tab-item name="third">Third tab</post-tab-item>
+
+  <post-tab-panel for="first" slot="panels">
+    This is the content of the first tab.
+  </post-tab-panel>
+  <post-tab-panel for="second" slot="panels">
+    This is the content of the second tab.
+  </post-tab-panel>
+  <post-tab-panel for="third" slot="panels">
+    This is the content of the third tab.
+  </post-tab-panel>
+</post-tabs>
+```

.changeset/tabs-navigation-mode.md

@@ -0,0 +1,6 @@
+---
+"@swisspost/design-system-components": minor
+"@swisspost/design-system-documentation": minor
+---
+
+Added navigation variant to the `post-tabs` component, enabling anchor-based navigation. The component now automatically detects whether `post-tab-item` elements contain anchor links and switches between panels and navigation variants accordingly. The `aria-current="page"` attribute must be manually added to the anchor element representing the current page to ensure proper styling and accessibility.

packages/components-angular/projects/consumer-app/cypress/e2e/components.cy.ts

@@ -1,4 +1,4 @@
-import * as Components from '@swisspost/design-system-components/dist';
+import * as Components from '@swisspost/design-system-components/loader';
 
 const COMPONENT_TAG_NAMES = Object.keys(Components)
   .filter(c => /^Post([A-Z][a-z]+)+$/.test(c))

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html

@@ -111,22 +111,35 @@ <h2>Post Rating</h2>
 </div>
 
 <div class="my-24">
-  <h2>Post Tabs</h2>
+  <h2>Post Tabs - Panel Variant</h2>
   <post-tabs>
-    <post-tab-header panel="unua">Unua langeto</post-tab-header>
-    <post-tab-header panel="dua">Dua langeto</post-tab-header>
-    <post-tab-header panel="tria">Tria langeto</post-tab-header>
+    <post-tab-item name="unua">Unua langeto</post-tab-item>
+    <post-tab-item name="dua">Dua langeto</post-tab-item>
+    <post-tab-item name="tria">Tria langeto</post-tab-item>
 
-    <post-tab-panel name="unua">
+    <post-tab-panel for="unua">
       Jen la enhavo de la unua langeto. Defaŭlte ĝi montriĝas komence.
     </post-tab-panel>
-    <post-tab-panel name="dua">
+    <post-tab-panel for="dua">
       Jen la enhavo de la dua langeto. Defaŭlte ĝi estas kaŝita komence.
     </post-tab-panel>
-    <post-tab-panel name="tria">
+    <post-tab-panel for="tria">
       Jen la enhavo de la tria langeto. Defaŭlte ĝi ankaŭ estas kaŝita komence.
     </post-tab-panel>
   </post-tabs>
+
+  <h2>Post Tabs - Navigation Variant</h2>
+  <post-tabs label="Tabs navigation">
+    <post-tab-item name="nav-first">
+      <a href="#first">First</a>
+    </post-tab-item>
+    <post-tab-item name="nav-second">
+      <a href="#second">Second</a>
+    </post-tab-item>
+    <post-tab-item name="nav-third">
+      <a href="#third">Third</a>
+    </post-tab-item>
+  </post-tabs>
 </div>
 
 <div class="my-24">

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts

@@ -16,7 +16,7 @@ import {
   PostPopovercontainer,
   PostPopoverTrigger,
   PostRating,
-  PostTabHeader,
+  PostTabItem,
   PostTabPanel,
   PostTabs,
   PostTooltip,
@@ -46,7 +46,7 @@ import {
     PostPopovercontainer,
     PostPopoverTrigger,
     PostRating,
-    PostTabHeader,
+    PostTabItem,
     PostTabPanel,
     PostTabs,
     PostTooltip,