🐛 fix(bal-tabs | bal-nav): Navigation render issue

.changeset/slow-parrots-check.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**nav**: solves insert node issue with main tabs

e2e/cypress/e2e/visual/bal-nav-part-3.visual.cy.ts

@@ -46,3 +46,15 @@ describe('bal-nav - long', () => {
     })
   })
 })
+
+describe('bal-nav - tab change', () => {
+  it('should switch meta nav tab', () => {
+    cy.visit('/components/bal-nav/test/bal-nav-long.visual.html').platform('desktop').waitForDesignSystem()
+    cy.contains('Unternehmenskunden').click().waitForComponents().wait(100)
+    cy.testVisual(`nav-long-desktop-meta-change`, {
+      errorThreshold: 0.2,
+      capture: 'viewport',
+      clip: balViewport['desktop'],
+    })
+  })
+})

packages/core/src/components.d.ts

@@ -106,6 +106,10 @@ export namespace Components {
           * The color to use from your application's color palette.
          */
         "color": BalProps.BalButtonColor;
+        /**
+          * If `true` the button is aligned over the whole width
+         */
+        "expanded": boolean;
         /**
           * BalIcon of the open trigger button
          */
@@ -5128,6 +5132,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette.
          */
         "color"?: BalProps.BalButtonColor;
+        /**
+          * If `true` the button is aligned over the whole width
+         */
+        "expanded"?: boolean;
         /**
           * BalIcon of the open trigger button
          */

packages/core/src/components/bal-tabs/components/tab-nav.tsx

@@ -107,7 +107,6 @@ export const TabNav: FunctionalComponent<TabNavProps> = ({
         >
           {tabs.map((tab, index) => (
             <bal-carousel-item
-              key={tab.value}
               htmlRole={''}
               class={{
                 ...bemEl.element('carousel').element('item').class(),