From 25cd34afdb458ab343d89e30c56c28f6007fdab8 Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Wed, 14 Sep 2022 15:07:54 +0200
Subject: [PATCH 1/6] fix(navigation): adjust mobile behaviour

---
 package-lock.json                             | 24 --------
 .../bal-list-item-accordion-head.tsx          |  5 +-
 .../bal-list/bal-list-item/bal-list-item.tsx  |  5 ++
 .../src/components/bal-logo/bal-logo.sass     |  3 +-
 .../bal-navigation-meta.tsx                   |  2 +-
 .../bal-navigation/bal-navigation.sass        | 20 ++++---
 .../bal-navigation/bal-navigation.tsx         | 55 +++++++++++++++++--
 .../stories/bal-navigation.stories.ts         |  2 +-
 .../src/components/bal-stage/bal-stage.tsx    | 17 ++++--
 .../src/components/bal-tabs/bal-tabs.tsx      |  3 -
 .../src/stories/design/css.stories.ts         |  5 --
 packages/css/scss/form/button.sass            |  1 +
 packages/css/scss/form/tools.sass             | 10 +++-
 packages/css/scss/layout/container.sass       |  2 -
 14 files changed, 94 insertions(+), 60 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aeecc498a..53eacbbbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,10 +7,6 @@
       "name": "root",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "dependencies": {
-        "@types/body-scroll-lock": "^3.1.0",
-        "body-scroll-lock": "^4.0.0-beta.0"
-      },
       "devDependencies": {
         "@angular/common": "~12.2.16",
         "@angular/compiler": "~12.2.16",
@@ -12495,11 +12491,6 @@
       "integrity": "sha512-UiWyJ6TLWoHeHZ8VUyngzCOwJDVxTsPnqfAMR/85X93rkRk5A4T2U42BCx0wCmZdtMHGHN/utJ8ft5xWu0V1bA==",
       "dev": true
     },
-    "node_modules/@types/body-scroll-lock": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz",
-      "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA=="
-    },
     "node_modules/@types/chai": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz",
@@ -15104,11 +15095,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/body-scroll-lock": {
-      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz",
-      "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ=="
-    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -50033,11 +50019,6 @@
       "integrity": "sha512-UiWyJ6TLWoHeHZ8VUyngzCOwJDVxTsPnqfAMR/85X93rkRk5A4T2U42BCx0wCmZdtMHGHN/utJ8ft5xWu0V1bA==",
       "dev": true
     },
-    "@types/body-scroll-lock": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz",
-      "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA=="
-    },
     "@types/chai": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.3.tgz",
@@ -52185,11 +52166,6 @@
         }
       }
     },
-    "body-scroll-lock": {
-      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz",
-      "integrity": "sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ=="
-    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
diff --git a/packages/components/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx b/packages/components/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx
index d7ac1f98b..93166c958 100644
--- a/packages/components/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx
+++ b/packages/components/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx
@@ -12,6 +12,7 @@ export class ListItemAccordionHead {
    * If `true` the list accordion is open
    */
   @Prop() accordionOpen = false
+
   /**
    * Icon name string with value 'plus' on default
    */
@@ -34,7 +35,7 @@ export class ListItemAccordionHead {
     return this.el.closest('bal-list-item')
   }
 
-  clickHandler() {
+  private onClick = () => {
     const listItem = this.getClosestListItem()
     if (listItem) {
       this.accordionOpen = !this.accordionOpen
@@ -49,7 +50,7 @@ export class ListItemAccordionHead {
           'bal-list-item-accordion-head bal-list-item': true,
           'is-open': this.accordionOpen,
         }}
-        onClick={() => this.clickHandler()}
+        onClick={this.onClick}
       >
         <slot></slot>
         <bal-list-item-icon right>
diff --git a/packages/components/src/components/bal-list/bal-list-item/bal-list-item.tsx b/packages/components/src/components/bal-list/bal-list-item/bal-list-item.tsx
index 155ead418..ab74410cd 100644
--- a/packages/components/src/components/bal-list/bal-list-item/bal-list-item.tsx
+++ b/packages/components/src/components/bal-list/bal-list-item/bal-list-item.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core'
+import { stopEventBubbling } from '../../../helpers/form-input.helpers'
 import { Props } from '../../../types'
 
 @Component({
@@ -139,6 +140,10 @@ export class ListItem {
             'is-disabled': this.disabled,
             'is-sub-accordion-item': this.subAccordionItem,
           }}
+          onClick={(event: MouseEvent) => {
+            stopEventBubbling(event)
+            this.balNavigate.emit(event)
+          }}
         >
           <div>
             <slot></slot>
diff --git a/packages/components/src/components/bal-logo/bal-logo.sass b/packages/components/src/components/bal-logo/bal-logo.sass
index 2db06865a..ffb3b0986 100644
--- a/packages/components/src/components/bal-logo/bal-logo.sass
+++ b/packages/components/src/components/bal-logo/bal-logo.sass
@@ -8,7 +8,8 @@
   & > div
     height: 1.25rem
   +modifier('animated')
-    margin-left: -7px
+    +desktop
+      margin-left: -7px
   +modifier('white')
     +fillSvg($white)
   +desktop
diff --git a/packages/components/src/components/bal-navigation/bal-navigation-meta/bal-navigation-meta.tsx b/packages/components/src/components/bal-navigation/bal-navigation-meta/bal-navigation-meta.tsx
index ab213b01c..60bc11cc9 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation-meta/bal-navigation-meta.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation-meta/bal-navigation-meta.tsx
@@ -19,7 +19,7 @@ export class NavigationMeta implements ComponentInterface {
           ...metaEl.class(),
         }}
       >
-        <nav class="container is-wide" role="navigation" aria-label={this.ariaLabelMeta}>
+        <nav class="container" role="navigation" aria-label={this.ariaLabelMeta}>
           <slot></slot>
         </nav>
       </Host>
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.sass b/packages/components/src/components/bal-navigation/bal-navigation.sass
index 14b667835..141626e41 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.sass
+++ b/packages/components/src/components/bal-navigation/bal-navigation.sass
@@ -215,7 +215,6 @@
     height: 4rem
     max-height: 4rem
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
-    z-index: 30
     +desktop
       display: none
     nav
@@ -224,9 +223,6 @@
       gap: .5rem
       align-items: center
       margin: 0 auto
-      padding: 0 1rem
-      +tablet
-        padding: 0 3rem
     .bal-nav__metamobile__actions
       margin-left: auto
       > div
@@ -234,12 +230,13 @@
         gap: .5rem
   .bal-nav__main-mobile
     display: block
-    padding: 1.5rem 1rem 4rem
-    z-index: 29
+    padding-top: 1.5rem
+    padding-bottom: 4rem
     height: var(--bal-nav-main-mobile-height)
     overflow-y: auto
     +tablet
-      padding: 0 3rem
+      padding-top: 0
+      padding-bottom: 0
     +desktop
       display: none
     +element(link)
@@ -297,6 +294,15 @@
     z-index: 0
 
   +element(popover)
+    .bal-popover__content
+      +tablet
+        width: 100vw
+    .bal-popover__content__inner
+      padding: 1rem
+      +tablet
+        padding: 2rem 2.5rem
+      +desktop
+        padding: 1.5rem
     .bal-navigation-popover__button
       position: relative
       z-index: 20
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.tsx b/packages/components/src/components/bal-navigation/bal-navigation.tsx
index 533da426d..e64d9a5ef 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation.tsx
@@ -4,6 +4,7 @@ import { BEM } from '../../utils/bem'
 import { isPlatform } from '../../utils/platform'
 import { Events } from '../../types'
 import { BodyScrollBlocker } from '../../utils/toggle-scrolling-body'
+import { stopEventBubbling } from '../../helpers/form-input.helpers'
 
 @Component({
   tag: 'bal-navigation',
@@ -173,6 +174,36 @@ export class Navigation implements ComponentInterface {
     }
   }
 
+  private onAccordionClick = (event: Event) => {
+    stopEventBubbling(event)
+    const target = event.target as HTMLBalListItemElement
+    const isMainAccordionItem = !target.subAccordionItem
+
+    const closeOtherAccordions = (selector: string, element: Element) => {
+      const items = element.querySelectorAll(selector)
+      items.forEach(item => {
+        if (item !== target) {
+          const accordionHeadEl = item.querySelector('bal-list-item-accordion-head')
+          if (accordionHeadEl) {
+            accordionHeadEl.accordionOpen = false
+          }
+        }
+      })
+    }
+
+    if (isMainAccordionItem) {
+      closeOtherAccordions('bal-list-item.bal-nav__main-mobile__main-accordion', this.el)
+      setTimeout(() => {
+        closeOtherAccordions('bal-list-item.is-sub-accordion-item', this.el)
+      }, 300)
+    } else {
+      const parent = target.closest('bal-list-item.bal-nav__main-mobile__main-accordion')
+      if (parent) {
+        closeOtherAccordions('bal-list-item.is-sub-accordion-item', parent)
+      }
+    }
+  }
+
   render() {
     const navigationEl = BEM.block('nav')
     const hasLevels = this.levels?.length > 0
@@ -214,7 +245,7 @@ export class Navigation implements ComponentInterface {
         <bal-navigation-main
           class={{
             'is-hidden-touch': true,
-            'container is-wide': true,
+            'container': true,
             'bal-nav__main--expanded': this.isMainBodyOpen,
           }}
           ref={el => {
@@ -237,7 +268,17 @@ export class Navigation implements ComponentInterface {
                 {hasLevels &&
                   this.levels[this.selectedMetaIndex].subLevels?.map((main, index) => {
                     return main.isTabLink ? (
-                      <bal-tab-item label={main.label} value={main.value} href={main.link} />
+                      <bal-tab-item
+                        label={main.label}
+                        value={main.value}
+                        href={main.link}
+                        onBalNavigate={ev => {
+                          main.onClick(ev.detail)
+                          this.selectedMainIndex = index
+                          this.isMainBodyOpen = false
+                          this.selectedMainValue = main.value
+                        }}
+                      />
                     ) : (
                       <bal-tab-item
                         label={main.label}
@@ -275,7 +316,7 @@ export class Navigation implements ComponentInterface {
           )}
         </bal-navigation-main>
 
-        <div class="bal-nav__metamobile">
+        <div class="bal-nav__metamobile container">
           <nav role="navigation" aria-label={this.ariaLabelMeta}>
             <a href={this.logoPath} class="bal-nav__main-mobile__logo">
               <bal-logo color="blue" animated></bal-logo>
@@ -293,7 +334,7 @@ export class Navigation implements ComponentInterface {
           </nav>
         </div>
         <div
-          class="bal-nav__main-mobile"
+          class="bal-nav__main-mobile container"
           style={{
             '--bal-nav-main-mobile-height': this.mainMobileHeight,
             'display': this.isMainBodyOpen && isPlatform('touch') ? 'block' : 'none',
@@ -301,7 +342,11 @@ export class Navigation implements ComponentInterface {
         >
           <bal-list border in-main-nav={true} size="small">
             {this.levels.map(meta => (
-              <bal-list-item accordion>
+              <bal-list-item
+                accordion
+                onBalNavigate={this.onAccordionClick}
+                class="bal-nav__main-mobile__main-accordion"
+              >
                 <bal-list-item-accordion-head icon="nav-go-down">
                   <bal-list-item-content>
                     <bal-list-item-title level="h4">{meta.label}</bal-list-item-title>
diff --git a/packages/components/src/components/bal-navigation/stories/bal-navigation.stories.ts b/packages/components/src/components/bal-navigation/stories/bal-navigation.stories.ts
index 710292e41..a00fe3494 100644
--- a/packages/components/src/components/bal-navigation/stories/bal-navigation.stories.ts
+++ b/packages/components/src/components/bal-navigation/stories/bal-navigation.stories.ts
@@ -335,7 +335,7 @@ export const Basic = args => ({
         <bal-heading class="mb-2" space="none">Small title</bal-heading>
     </bal-stage-body>
 </bal-stage>
-<div class="container is-wide">
+<div class="container">
   <h2 class="title is-2 mb-4">Heading</h2>
   <p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
diff --git a/packages/components/src/components/bal-stage/bal-stage.tsx b/packages/components/src/components/bal-stage/bal-stage.tsx
index 6aa3f1e90..a3738cc1a 100644
--- a/packages/components/src/components/bal-stage/bal-stage.tsx
+++ b/packages/components/src/components/bal-stage/bal-stage.tsx
@@ -9,7 +9,7 @@ export class Stage implements ComponentInterface {
   /**
    * Defines content width of the stage
    */
-  @Prop() containerSize: Props.BalStageContainer = 'wide'
+  @Prop() containerSize: Props.BalStageContainer = ''
 
   /**
    * Defines size of the stage
@@ -64,17 +64,21 @@ export class Stage implements ComponentInterface {
       case 'is-blog-page':
       case 'blog-page':
         return '920px'
-      case 'is-wide':
-      case 'wide':
-        return '1400px'
       case 'is-fluid':
       case 'fluid':
-      default:
         return '100vw'
+      case 'is-wide':
+      case 'wide':
+      default:
+        return '1400px'
     }
   }
 
   private get containerClass(): string {
+    if (this.containerSize.includes('wide')) {
+      return ''
+    }
+
     if (this.containerSize.startsWith('is-')) {
       return this.containerSize
     }
@@ -99,7 +103,8 @@ export class Stage implements ComponentInterface {
           class={{
             ...element.class(),
             ...element.modifier('is-inverted').class(this.inverted),
-            [`container ${this.containerClass}`]: this.containerSize !== '',
+            container: true,
+            [`${this.containerClass}`]: this.containerSize !== '',
           }}
         >
           <slot></slot>
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
index bc303066f..4c66c5457 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.tsx
+++ b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -207,9 +207,6 @@ export class Tabs {
         if (tab.value !== this.value) {
           this.balChange.emit(tab.value)
           await this.select(tab)
-        } else if (this.interface === 'navigation' && tab.value === this.value) {
-          this.value = ''
-          this.balChange.emit(this.value)
         }
       }
     }
diff --git a/packages/components/src/stories/design/css.stories.ts b/packages/components/src/stories/design/css.stories.ts
index 42a8d401f..cb025ebef 100644
--- a/packages/components/src/stories/design/css.stories.ts
+++ b/packages/components/src/stories/design/css.stories.ts
@@ -38,11 +38,6 @@ export const Container = args => ({
       <h2 class="title is-size-xx-large">container blog-page</h2>
     </div>
   </div>
-  <div class="container is-wide has-background-success">
-    <div class="has-background-grey is-flex is-justify-content-center is-align-items-center" style="height: 80px">
-      <h2 class="title is-size-xx-large">container wide</h2>
-    </div>
-  </div>
   <div class="container is-fluid has-background-success">
     <div class="has-background-grey is-flex is-justify-content-center is-align-items-center" style="height: 80px">
       <h2 class="title is-size-xx-large">container fluid</h2>
diff --git a/packages/css/scss/form/button.sass b/packages/css/scss/form/button.sass
index 4ff97448c..add591e13 100644
--- a/packages/css/scss/form/button.sass
+++ b/packages/css/scss/form/button.sass
@@ -30,6 +30,7 @@
   appearance: none
   text-decoration: none
   user-select: none
+  touch-action: manipulation
   span,
   strong
     color: inherit
diff --git a/packages/css/scss/form/tools.sass b/packages/css/scss/form/tools.sass
index 226712ea6..834b888e3 100644
--- a/packages/css/scss/form/tools.sass
+++ b/packages/css/scss/form/tools.sass
@@ -97,7 +97,6 @@
       flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
-        +ltr-property("margin", 0.75rem)
       &.is-expanded
         flex-grow: 1
         flex-shrink: 1
@@ -167,14 +166,19 @@
       top: 0.875rem
       z-index: 4
 
-.field.is-grouped .control:not(:last-child)
-  margin-right: 8px
+.field.is-grouped
+  gap: calc(var(--bal-column-gap) / 2)
 
 .field.has-direction-row.is-grouped
   flex-direction: row
 
 .field.has-direction-column.is-grouped
   flex-direction: column
+  width: fit-content
+  .button
+    width: 100%
+  .bal-button
+    margin: 0 !important
 
 +mobile()
   .field.has-direction-auto.is-grouped
diff --git a/packages/css/scss/layout/container.sass b/packages/css/scss/layout/container.sass
index 914e5f7ad..f74ee1945 100644
--- a/packages/css/scss/layout/container.sass
+++ b/packages/css/scss/layout/container.sass
@@ -17,8 +17,6 @@
     max-width: 896px !important
   &.is-blog-page
     max-width: 984px !important
-  &.is-wide
-    max-width: 1464px !important
   +tablet
     padding-left: 2.5rem
     padding-right: 2.5rem

From 75f96a71eb2bc7f700bfae85af5d4ec889c08464 Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Thu, 15 Sep 2022 09:38:20 +0200
Subject: [PATCH 2/6] fix(navigation): adjust mobile behaviour

---
 .../bal-navigation-popover.tsx                | 41 +++++++++++++++++-
 .../bal-navigation/bal-navigation.sass        |  9 ++--
 .../bal-navigation/bal-navigation.tsx         |  6 ++-
 .../components/bal-popover/bal-popover.sass   |  6 ++-
 .../src/utils/toggle-scrolling-body.ts        | 42 +++++++++++++++----
 packages/css/scss/base/_all.sass              |  2 +
 6 files changed, 90 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx b/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx
index b0f964951..9388f9de2 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx
@@ -1,6 +1,8 @@
 import { Component, h, ComponentInterface, Host, Prop, State } from '@stencil/core'
+import { stopEventBubbling } from '../../../helpers/form-input.helpers'
 import { Props } from '../../../types'
 import { BEM } from '../../../utils/bem'
+import { disableSmoothScrolling, enableSmoothScrolling } from '../../../utils/toggle-scrolling-body'
 
 @Component({
   tag: 'bal-navigation-popover',
@@ -101,6 +103,43 @@ export class NavigationPopover implements ComponentInterface {
    */
   @Prop() mobileTop = false
 
+  private scrollToTopTimer?: NodeJS.Timer
+  private setActiveTimer?: NodeJS.Timer
+
+  private clearTimeouts() {
+    if (this.scrollToTopTimer) {
+      // console.log('clearTimeout(this.scrollToTopTimer)')
+      clearTimeout(this.scrollToTopTimer)
+    }
+
+    if (this.setActiveTimer) {
+      // console.log('clearTimeout(this.setActiveTimer)')
+      clearTimeout(this.setActiveTimer)
+    }
+  }
+
+  private toggle = (event: Event) => {
+    // console.log('---> toggle', this.isActive)
+    stopEventBubbling(event)
+    this.clearTimeouts()
+
+    // this.isActive = !this.isActive
+    if (!this.isActive) {
+      disableSmoothScrolling()
+      // console.log('disableSmoothScrolling')
+      this.scrollToTopTimer = setTimeout(() => {
+        // console.log('scrollTo')
+        window.scrollTo(0, 0)
+      }, 0)
+    }
+    this.setActiveTimer = setTimeout(() => {
+      // console.log('enableSmoothScrolling')
+      enableSmoothScrolling()
+      this.isActive = !this.isActive
+      // console.log('toggle active', this.isActive)
+    }, 100)
+  }
+
   render() {
     const navPopoverEl = BEM.block('nav').element('popover')
 
@@ -127,7 +166,7 @@ export class NavigationPopover implements ComponentInterface {
             inverted={this.inverted}
             color={this.isActive ? this.activeColor : this.inactiveColor}
             square={this.square}
-            onClick={() => (this.isActive = !this.isActive)}
+            onClick={this.toggle}
             aria-haspopup="true"
             class={`bal-navigation-popover__button bal-navigation-popover__button-${
               this.isActive ? this.activeColor : this.inactiveColor
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.sass b/packages/components/src/components/bal-navigation/bal-navigation.sass
index 141626e41..2be0c72cd 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.sass
+++ b/packages/components/src/components/bal-navigation/bal-navigation.sass
@@ -37,7 +37,6 @@
       flex-grow: 1
       align-items: center
       gap: .5rem
-      // margin-left: -.75rem
     +element(end)
       position: relative
       z-index: 20
@@ -230,13 +229,13 @@
         gap: .5rem
   .bal-nav__main-mobile
     display: block
-    padding-top: 1.5rem
-    padding-bottom: 4rem
+    padding-top: 1rem
+    padding-bottom: 5rem
     height: var(--bal-nav-main-mobile-height)
     overflow-y: auto
     +tablet
-      padding-top: 0
-      padding-bottom: 0
+      padding-top: 2rem
+      padding-bottom: 6rem
     +desktop
       display: none
     +element(link)
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.tsx b/packages/components/src/components/bal-navigation/bal-navigation.tsx
index e64d9a5ef..bd890f2f6 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation.tsx
@@ -174,8 +174,12 @@ export class Navigation implements ComponentInterface {
     }
   }
 
+  private closeOtherAccordionsTimer?: NodeJS.Timer
+
   private onAccordionClick = (event: Event) => {
     stopEventBubbling(event)
+    clearTimeout(this.closeOtherAccordionsTimer)
+
     const target = event.target as HTMLBalListItemElement
     const isMainAccordionItem = !target.subAccordionItem
 
@@ -193,7 +197,7 @@ export class Navigation implements ComponentInterface {
 
     if (isMainAccordionItem) {
       closeOtherAccordions('bal-list-item.bal-nav__main-mobile__main-accordion', this.el)
-      setTimeout(() => {
+      this.closeOtherAccordionsTimer = setTimeout(() => {
         closeOtherAccordions('bal-list-item.is-sub-accordion-item', this.el)
       }, 300)
     } else {
diff --git a/packages/components/src/components/bal-popover/bal-popover.sass b/packages/components/src/components/bal-popover/bal-popover.sass
index 1b4da865d..3fadc8464 100644
--- a/packages/components/src/components/bal-popover/bal-popover.sass
+++ b/packages/components/src/components/bal-popover/bal-popover.sass
@@ -35,7 +35,7 @@
 
   +element(content)
     display: none
-    z-index: 20
+    z-index: 25
     box-shadow: var(--bal-shadow)
     background: var(--bal-color-white)
     min-width: 16.25rem
@@ -74,10 +74,12 @@
     +modifier(color-grey)
       background: var(--bal-color-grey-2)
     +element(inner)
-      max-height: calc(100vh - 8rem)
+      max-height: calc(100vh - 4.5rem)
       overflow: auto
       +tablet
         padding: 1.5rem
+      +desktop
+        max-height: calc(100vh - 8rem)
     +modifier(spaceless)
       .bal-popover__content__inner
         padding: 0
diff --git a/packages/components/src/utils/toggle-scrolling-body.ts b/packages/components/src/utils/toggle-scrolling-body.ts
index fd02e4076..9301f467e 100644
--- a/packages/components/src/utils/toggle-scrolling-body.ts
+++ b/packages/components/src/utils/toggle-scrolling-body.ts
@@ -3,11 +3,37 @@ const getBodyTopOffset = () => {
   return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
 }
 
+const getBody = () => document.body
+const getHtml = () => document.firstChild?.nextSibling as HTMLElement
+
+const getHtmlStyles = () => getComputedStyle(getHtml())
+
+const hasScrollSmoothOnHtml = () => getHtmlStyles().scrollBehavior === 'smooth'
+
+export const disableSmoothScrolling = () => {
+  const body = getBody()
+
+  body.style.scrollBehavior = 'auto'
+  if (hasScrollSmoothOnHtml()) {
+    const html = getHtml()
+    html.style.scrollBehavior = 'auto'
+  }
+}
+
+export const enableSmoothScrolling = () => {
+  const body = getBody()
+
+  body.style.scrollBehavior = 'smooth'
+  if (hasScrollSmoothOnHtml()) {
+    const html = getHtml()
+    html.style.scrollBehavior = 'smooth'
+  }
+}
+
 export const BodyScrollBlocker = () => {
-  const body = document.body
-  const html = document.firstChild?.nextSibling as HTMLElement
-  const htmlStyle = getComputedStyle(html)
-  const hasScrollSmoothOnHtml = htmlStyle.scrollBehavior === 'smooth'
+  const body = getBody()
+  const html = getHtml()
+  let timer: NodeJS.Timer | undefined = undefined
 
   let isBlocked = false
   let bodyTopOffset = getBodyTopOffset()
@@ -15,10 +41,11 @@ export const BodyScrollBlocker = () => {
   return {
     isBlocked: () => isBlocked,
     block: () => {
+      clearTimeout(timer)
       isBlocked = true
       bodyTopOffset = getBodyTopOffset()
       body.style.scrollBehavior = 'auto'
-      if (hasScrollSmoothOnHtml) {
+      if (hasScrollSmoothOnHtml()) {
         html.style.scrollBehavior = 'auto'
       }
       body.style.position = 'fixed'
@@ -26,14 +53,15 @@ export const BodyScrollBlocker = () => {
       body.style.top = `-${bodyTopOffset}px`
     },
     allow: () => {
+      clearTimeout(timer)
       body.style.position = 'static'
       body.style.width = 'inherit'
       body.style.top = `inherit`
       document.documentElement.scrollTop = bodyTopOffset
-      setTimeout(() => {
+      timer = setTimeout(() => {
         isBlocked = false
         body.style.scrollBehavior = 'smooth'
-        if (hasScrollSmoothOnHtml) {
+        if (hasScrollSmoothOnHtml()) {
           html.style.scrollBehavior = 'smooth'
         }
       }, 0)
diff --git a/packages/css/scss/base/_all.sass b/packages/css/scss/base/_all.sass
index 47ea5a2a4..359570271 100644
--- a/packages/css/scss/base/_all.sass
+++ b/packages/css/scss/base/_all.sass
@@ -13,6 +13,7 @@ html
   text-rendering: $body-rendering
   text-size-adjust: 100%
   -webkit-tap-highlight-color: transparent
+  -webkit-overflow-scrolling: auto
   overflow: scroll
   overflow-x: hidden
   overflow-y: overlay
@@ -45,6 +46,7 @@ body
   font-size: $body-font-size
   font-weight: $body-weight
   line-height: $body-line-height
+  -webkit-overflow-scrolling: auto
 
 // Inline
 

From 81592a0040e433fc2ad612abe6dfc596d1bbf847 Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Thu, 15 Sep 2022 09:45:23 +0200
Subject: [PATCH 3/6] fix(fonts): extract font import from base file to a
 single file

---
 packages/components/src/styles/global.fonts.sass   | 1 +
 packages/components/src/styles/global.sass         | 1 +
 packages/css/scss/baloise-design-system.base.sass  | 1 -
 packages/css/scss/baloise-design-system.fonts.sass | 6 ++++++
 packages/css/scss/baloise-design-system.sass       | 1 +
 5 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/styles/global.fonts.sass
 create mode 100644 packages/css/scss/baloise-design-system.fonts.sass

diff --git a/packages/components/src/styles/global.fonts.sass b/packages/components/src/styles/global.fonts.sass
new file mode 100644
index 000000000..62f9053d1
--- /dev/null
+++ b/packages/components/src/styles/global.fonts.sass
@@ -0,0 +1 @@
+@import '~@baloise/design-system-next-css/scss/baloise-design-system.fonts.sass'
diff --git a/packages/components/src/styles/global.sass b/packages/components/src/styles/global.sass
index 99e1550a7..be944cfad 100644
--- a/packages/components/src/styles/global.sass
+++ b/packages/components/src/styles/global.sass
@@ -1,6 +1,7 @@
 @charset "utf-8"
 
 @import 'global.utilities'
+@import 'global.fonts'
 @import 'global.base'
 @import 'global.core'
 @import 'global.helpers'
diff --git a/packages/css/scss/baloise-design-system.base.sass b/packages/css/scss/baloise-design-system.base.sass
index f6561acb5..601366280 100644
--- a/packages/css/scss/baloise-design-system.base.sass
+++ b/packages/css/scss/baloise-design-system.base.sass
@@ -3,6 +3,5 @@
 // ----------------------------------------------
 // BASE
 // ----------------------------------------------
-@import '~@baloise/design-system-next-fonts/scss/fonts.sass'
 @import '~@baloise/design-system-next-tokens/dist/tokens.css.sass'
 @import 'base/_all'
diff --git a/packages/css/scss/baloise-design-system.fonts.sass b/packages/css/scss/baloise-design-system.fonts.sass
new file mode 100644
index 000000000..9625fd3c8
--- /dev/null
+++ b/packages/css/scss/baloise-design-system.fonts.sass
@@ -0,0 +1,6 @@
+@charset "utf-8"
+
+// ----------------------------------------------
+// CUSTOM FONTS
+// ----------------------------------------------
+@import '~@baloise/design-system-next-fonts/scss/fonts.sass'
diff --git a/packages/css/scss/baloise-design-system.sass b/packages/css/scss/baloise-design-system.sass
index 20cca0c90..8f429b00d 100644
--- a/packages/css/scss/baloise-design-system.sass
+++ b/packages/css/scss/baloise-design-system.sass
@@ -1,6 +1,7 @@
 @charset "utf-8"
 
 @import 'baloise-design-system.utilities'
+@import 'baloise-design-system.fonts'
 @import 'baloise-design-system.base'
 @import 'baloise-design-system.layout'
 @import 'baloise-design-system.helpers'

From 0c07aa1cb669772f31687ae3f32ebf0242ecf73e Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Thu, 15 Sep 2022 16:02:46 +0200
Subject: [PATCH 4/6] fix(navigation): adjust mobile behaviour

---
 .github/PULL_REQUEST_TEMPLATE.md              | 16 +------
 packages/components/src/components.d.ts       |  4 +-
 .../bal-navigation/bal-navigation.sass        | 16 +++++--
 .../bal-navigation/bal-navigation.tsx         |  4 +-
 .../src/components/bal-stage/bal-stage.sass   |  5 --
 .../src/components/bal-tabs/bal-tabs.sass     | 46 ++++++++++---------
 .../src/components/bal-tabs/bal-tabs.tsx      |  3 +-
 .../components/bal-tabs/components/tabs.tsx   |  1 +
 .../stories/design/05-breakpoints.stories.mdx |  1 +
 .../10-migration-from-10x-to-11x.stories.mdx  |  6 +++
 packages/components/src/utils/platform.ts     |  7 +++
 packages/css/scss/form/button.sass            |  2 +-
 packages/css/scss/helpers/grid.helper.sass    |  6 +++
 .../css/scss/helpers/visibility.helper.sass   | 22 +++++++++
 .../css/scss/mixins/breakpoint.mixin.sass     | 14 +++++-
 packages/css/scss/mixins/extends.sass         |  6 +++
 packages/css/scss/mixins/general.mixin.sass   |  6 +++
 packages/tokens/src/index.ts                  |  9 ++--
 packages/tokens/src/tokens.ts                 |  1 +
 19 files changed, 118 insertions(+), 57 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 6435b3086..ecba91bb2 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,24 +2,12 @@ Closes #
 
 {{short description}}
 
-## Changelog
-
-**New**
-
-- {{new thing}}
-
-**Changed**
-
-- {{change thing}}
-
-**Removed**
-
-- {{removed thing}}
-
 ## Acceptance Criteria
 
 - [ ] Design Review by @Gagne87, @clastzoo
 - [ ] Technical Review by @hirsch88, @mladenplaninicic, @nobilo
+- [ ] Visual test done by @hirsch88, @nobilo, @mladenplaninicic, @Gagne87, @clastzoo
+- [ ] Functional test done by @hirsch88, @nobilo, @mladenplaninicic
 - Browser Testing by @hirsch88, @nobilo, @mladenplaninicic, @Gagne87, @clastzoo
     - Desktop
         - [ ] Chrome
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index 63bfd98b4..f626568dc 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -2191,7 +2191,7 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Defines the layout of the tabs.
+          * Defines the layout of the tabs. Right only works from the breakpoint high-definition and beyond.
          */
         "float": Props.BalTabsFloat;
         /**
@@ -5688,7 +5688,7 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * Defines the layout of the tabs.
+          * Defines the layout of the tabs. Right only works from the breakpoint high-definition and beyond.
          */
         "float"?: Props.BalTabsFloat;
         /**
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.sass b/packages/components/src/components/bal-navigation/bal-navigation.sass
index 2be0c72cd..0f55880a4 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.sass
+++ b/packages/components/src/components/bal-navigation/bal-navigation.sass
@@ -55,7 +55,6 @@
     height: auto
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
     background: var(--bal-color-white)
-    transition: border-radius .3s ease-in-out
     +until-widescreen
       width: 100%
       +modifier(expanded)
@@ -78,9 +77,17 @@
         padding-right: 3rem
       > div
         display: flex
-        gap: 1rem
+        gap: .5rem
+        flex-direction: column
         justify-content: flex-start
-        align-items: center
+        align-items: flex-start
+        padding-top: 1rem
+        +high-definition
+          gap: 1rem
+          padding-top: 0
+          flex-direction: row
+          justify-content: flex-start
+          align-items: center
         .bal-tabs--context-navigation
           flex: 1
           overflow: hidden
@@ -120,7 +127,6 @@
       display: block
       max-height: calc(100vh - 160px)
       overflow-y: auto
-      background: var(--bal-color-white)
       padding-left: 1rem
       padding-right: 1rem
       +tablet
@@ -138,7 +144,7 @@
     display: block
     +desktop
       padding-top: 2.5rem
-      padding-bottom: .5rem
+      padding-bottom: 2.5rem
     .bal-nav__menu__wrapper.columns
       margin-bottom: 0
       margin-top: 0
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.tsx b/packages/components/src/components/bal-navigation/bal-navigation.tsx
index bd890f2f6..85bcac622 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation.tsx
@@ -265,7 +265,7 @@ export class Navigation implements ComponentInterface {
             }}
           >
             <div>
-              <a href={this.logoPath} class="bal-nav__main-head-logo">
+              <a href={this.logoPath} class="bal-nav__main-head-logo" tabindex={-1}>
                 <bal-logo color="blue" animated></bal-logo>
               </a>
               <bal-tabs interface="navigation" float="right" fullwidth spaceless value={this.selectedMainValue}>
@@ -322,7 +322,7 @@ export class Navigation implements ComponentInterface {
 
         <div class="bal-nav__metamobile container">
           <nav role="navigation" aria-label={this.ariaLabelMeta}>
-            <a href={this.logoPath} class="bal-nav__main-mobile__logo">
+            <a href={this.logoPath} class="bal-nav__main-mobile__logo" tabindex={-1}>
               <bal-logo color="blue" animated></bal-logo>
             </a>
             <div class="bal-nav__metamobile__actions">
diff --git a/packages/components/src/components/bal-stage/bal-stage.sass b/packages/components/src/components/bal-stage/bal-stage.sass
index b01d0d2a4..56d918750 100644
--- a/packages/components/src/components/bal-stage/bal-stage.sass
+++ b/packages/components/src/components/bal-stage/bal-stage.sass
@@ -55,11 +55,6 @@
             text-decoration: underline
           &:active
             text-decoration: underline
-          &:focus-visible
-            outline: none
-            border: 2px solid transparent
-            border-radius: 5px
-            outline: 3px solid var(--bal-color-purple-dark)
 
     +modifier(is-inverted)
       +block(stage-body)
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.sass b/packages/components/src/components/bal-tabs/bal-tabs.sass
index f0f6c870d..ac150a650 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.sass
+++ b/packages/components/src/components/bal-tabs/bal-tabs.sass
@@ -38,8 +38,6 @@
   +element(tabs)
     +overflow-touch
     +unselectable
-    overflow: hidden
-    overflow-x: auto
     position: relative
     align-items: stretch
     display: flex
@@ -52,9 +50,13 @@
       flex-grow: 1
       flex-shrink: 0
       justify-content: flex-start
-    +modifier(float-right)
+    +modifier(spaceless)
       ul
-        justify-content: flex-end
+        margin-left: -0.75rem
+    +modifier(float-right)
+      +high-definition
+        ul
+          justify-content: flex-end
     +modifier(vertical)
       ul
         flex-direction: column
@@ -108,7 +110,7 @@
         align-items: center
         font-family: var(--bal-font-family-title)
         font-weight: 700
-        gap: .25rem
+        gap: .5rem
         padding: 1rem .75rem
         flex-grow: 1
         flex-basis: 0
@@ -116,9 +118,19 @@
         outline: none !important
         border-radius: var(--bal-radius-small)
         z-index: 1
+        -webkit-user-select: none
+        -khtml-user-select: none
+        -moz-user-select: none
+        -o-user-select: none
+        user-select: none
+        -webkit-user-drag: none
+        -khtml-user-drag: none
+        -moz-user-drag: none
+        -o-user-drag: none
+        user-drag: none
         &:focus-visible
           &:not(:active)
-            @extend %focus-shadow
+            @extend %focus-inset-shadow
         span
           display: flex
           position: relative
@@ -147,7 +159,7 @@
             +fillSvg(var(--bal-color-info-3))
           &:focus-visible
             &:not(:active)
-              @extend %focus-inverted-shadow
+              @extend %focus-inverted-inset-shadow
         +modifier(context-navbar)
           +touch
             color: var(--bal-color-primary)
@@ -197,30 +209,20 @@
           +desktop
             height: 80px
         +modifier(context-navigation)
-          height: 64px
           flex-direction: row-reverse
+          height: 3rem
+          +high-definition
+            height: 4rem
           +widescreen
-            height: 80px
+            height: 5rem
         +modifier(context-meta)
-          height: 48px
+          height: 3rem
           font-size: var(--bal-size-small)
           font-family: var(--bal-font-family-text)
           font-weight: var(--bal-weight-regular)
           &.bal-tabs__tabs__item__button--active
             font-weight: var(--bal-weight-bold)
 
-    .bal-tabs__tabs__item--spaceless:first-child:not(.bal-tabs__tabs__item__button--vertical-on-tablet):not(.bal-tabs__tabs__item__button--vertical-on-mobile)
-      & > .bal-tabs__tabs__item__button--context-tabs,
-      & > .bal-tabs__tabs__item__button--context-meta,
-      & > .bal-tabs__tabs__item__button--context-navigation
-        padding-left: 0
-
-    .bal-tabs__tabs__item--spaceless:last-child:not(.bal-tabs__tabs__item__button--vertical-on-tablet):not(.bal-tabs__tabs__item__button--vertical-on-mobile)
-      & > .bal-tabs__tabs__item__button--context-tabs,
-      & > .bal-tabs__tabs__item__button--context-meta,
-      & > .bal-tabs__tabs__item__button--context-navigation
-        padding-right: 0
-
     +element(border)
       position: absolute
       background: var(--bal-color-border-normal)
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
index 4c66c5457..a64dd5de1 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.tsx
+++ b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -38,7 +38,8 @@ export class Tabs {
   @Prop() iconPosition: Props.BalTabsIconPosition = 'horizontal'
 
   /**
-   * Defines the layout of the tabs.
+   * Defines the layout of the tabs. Right only works from the breakpoint
+   * high-definition and beyond.
    */
   @Prop() float: Props.BalTabsFloat = 'left'
 
diff --git a/packages/components/src/components/bal-tabs/components/tabs.tsx b/packages/components/src/components/bal-tabs/components/tabs.tsx
index 1b8e4a98a..7ff5fe88f 100644
--- a/packages/components/src/components/bal-tabs/components/tabs.tsx
+++ b/packages/components/src/components/bal-tabs/components/tabs.tsx
@@ -50,6 +50,7 @@ export const TabList: FunctionalComponent<TabProps> = ({
         ...tabsEl.class(),
         ...tabsEl.modifier(`float-${float}`).class(),
         ...tabsEl.modifier('vertical').class(vertical === true),
+        ...tabsEl.modifier('spaceless').class(spaceless && !vertical),
         ...tabsEl.modifier('vertical-on-mobile').class(vertical === 'mobile'),
         ...tabsEl.modifier('vertical-on-tablet').class(vertical === 'tablet'),
       }}
diff --git a/packages/components/src/stories/design/05-breakpoints.stories.mdx b/packages/components/src/stories/design/05-breakpoints.stories.mdx
index 8f5b69cd8..c9da04f99 100644
--- a/packages/components/src/stories/design/05-breakpoints.stories.mdx
+++ b/packages/components/src/stories/design/05-breakpoints.stories.mdx
@@ -19,6 +19,7 @@ import { isPlatform } from '@baloise/design-system-next-components'
 isPlatform(window, 'mobile')
 isPlatform(window, 'tablet')
 isPlatform(window, 'desktop')
+isPlatform(window, 'high-definition')
 isPlatform(window, 'widescreen')
 isPlatform(window, 'fullhd')
 ```
diff --git a/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx b/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx
index f9a472be0..77ed887d9 100644
--- a/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx
+++ b/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx
@@ -48,4 +48,10 @@ to the defineConfig function.
   },
 ```
 
+## New breakpoint high-definition
+
+The high-definition breakpoint gets introduced in the new version. It starts at 1280px and is added between desktop and widescreen.
+
+The only breaking change is that the range of the sass mixin desktop-only is changed.
+
 <bal-doc-github link="/stories/migration/10-migration-from-10x-to-11x.stories.mdx"></bal-doc-github>
diff --git a/packages/components/src/utils/platform.ts b/packages/components/src/utils/platform.ts
index ba3800558..4add48a97 100644
--- a/packages/components/src/utils/platform.ts
+++ b/packages/components/src/utils/platform.ts
@@ -10,6 +10,7 @@ export interface PlatformSrcSet {
   tablet?: string
   touch?: string
   desktop?: string
+  highDefinition?: string
   widescreen?: string
   fullhd?: string
 }
@@ -55,6 +56,11 @@ const isTouch = (win: Window) => isMobile(win) || isTablet(win)
 
 const isDesktop = (win: Window) => !isTouch(win)
 
+const isHighDefinition = (win: Window) => {
+  const width = win.innerWidth
+  return width > 1280 && width < 1440
+}
+
 const isWideScreen = (win: Window) => {
   const width = win.innerWidth
   return width > 1439 && width < 1920
@@ -70,6 +76,7 @@ const PLATFORMS_MAP = {
   tablet: isTablet,
   touch: isTouch,
   desktop: isDesktop,
+  highDefinition: isHighDefinition,
   widescreen: isWideScreen,
   fullhd: isFullHD,
 }
diff --git a/packages/css/scss/form/button.sass b/packages/css/scss/form/button.sass
index add591e13..eb2cf7509 100644
--- a/packages/css/scss/form/button.sass
+++ b/packages/css/scss/form/button.sass
@@ -330,7 +330,7 @@
       &:focus-visible,
       &.is-focused
         &:not(:active)
-          @extend %focus-shadow
+          @extend %focus-inverted-shadow
       &:active,
       &.is-active
         background: var(--bal-color-white)
diff --git a/packages/css/scss/helpers/grid.helper.sass b/packages/css/scss/helpers/grid.helper.sass
index dc7a5218e..d2462ee79 100644
--- a/packages/css/scss/helpers/grid.helper.sass
+++ b/packages/css/scss/helpers/grid.helper.sass
@@ -505,6 +505,12 @@
       +desktop-only
         &.is-#{$i}-desktop-only
           --columnGap: #{$i * 0.25rem}
+      +high-definition
+        &.is-#{$i}-high-definition
+          --columnGap: #{$i * 0.25rem}
+      +high-definition-only
+        &.is-#{$i}-high-definition-only
+          --columnGap: #{$i * 0.25rem}
       +widescreen
         &.is-#{$i}-widescreen
           --columnGap: #{$i * 0.25rem}
diff --git a/packages/css/scss/helpers/visibility.helper.sass b/packages/css/scss/helpers/visibility.helper.sass
index 9c388b6d8..34936aa2a 100644
--- a/packages/css/scss/helpers/visibility.helper.sass
+++ b/packages/css/scss/helpers/visibility.helper.sass
@@ -21,6 +21,12 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   +desktop-only
     .is-#{$display}-desktop-only
       display: #{$display} !important
+  +high-definition
+    .is-#{$display}-high-definition
+      display: #{$display} !important
+  +high-definition-only
+    .is-#{$display}-high-definition-only
+      display: #{$display} !important
   +widescreen
     .is-#{$display}-widescreen
       display: #{$display} !important
@@ -68,6 +74,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   .is-hidden-desktop-only
     display: none !important
 
++high-definition
+  .is-hidden-high-definition
+    display: none !important
+
++high-definition-only
+  .is-hidden-high-definition-only
+    display: none !important
+
 +widescreen
   .is-hidden-widescreen
     display: none !important
@@ -107,6 +121,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   .is-invisible-desktop-only
     visibility: hidden !important
 
++high-definition
+  .is-invisible-high-definition
+    visibility: hidden !important
+
++high-definition-only
+  .is-invisible-high-definition-only
+    visibility: hidden !important
+
 +widescreen
   .is-invisible-widescreen
     visibility: hidden !important
diff --git a/packages/css/scss/mixins/breakpoint.mixin.sass b/packages/css/scss/mixins/breakpoint.mixin.sass
index 4cebcb46d..edc06b656 100644
--- a/packages/css/scss/mixins/breakpoint.mixin.sass
+++ b/packages/css/scss/mixins/breakpoint.mixin.sass
@@ -27,7 +27,19 @@
     @content
 
 =desktop-only
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+  @media screen and (min-width: $desktop) and (max-width: $high-definition - 1px)
+    @content
+
+=high-definition
+  @media screen and (min-width: $high-definition)
+    @content
+
+=high-definition-only
+  @media screen and (min-width: $high-definition) and (max-width: $widescreen - 1px)
+    @content
+
+=until-high-definition
+  @media screen and (max-width: $high-definition - 1px)
     @content
 
 =until-widescreen
diff --git a/packages/css/scss/mixins/extends.sass b/packages/css/scss/mixins/extends.sass
index 29069c42e..8f07258ad 100644
--- a/packages/css/scss/mixins/extends.sass
+++ b/packages/css/scss/mixins/extends.sass
@@ -13,6 +13,12 @@
 %focus-inverted-shadow
   +focus-inverted-shadow
 
+%focus-inset-shadow
+  +focus-inset-shadow
+
+%focus-inverted-inset-shadow
+  +focus-inverted-inset-shadow
+
 %arrow
   +arrow
 
diff --git a/packages/css/scss/mixins/general.mixin.sass b/packages/css/scss/mixins/general.mixin.sass
index 8e90d362a..7ecc83dd9 100644
--- a/packages/css/scss/mixins/general.mixin.sass
+++ b/packages/css/scss/mixins/general.mixin.sass
@@ -12,9 +12,15 @@
 =focus-shadow
   box-shadow: var(--bal-color-white) 0 0 0 2px, var(--bal-color-purple-dark) 0 0 0 5px !important
 
+=focus-inset-shadow
+  box-shadow: inset var(--bal-color-purple-dark) 0 0 0 3px, inset var(--bal-color-white) 0 0 0 5px !important
+
 =focus-inverted-shadow
   box-shadow: var(--bal-color-white) 0 0 0 2px, var(--bal-color-yellow) 0 0 0 5px !important
 
+=focus-inverted-inset-shadow
+  box-shadow: inset var(--bal-color-yellow) 0 0 0 3px, inset var(--bal-color-white) 0 0 0 5px !important
+
 =placeholder
   $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
   @each $placeholder in $placeholders
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
index 505552b93..ecb7fe5d7 100644
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -119,10 +119,11 @@ const tokens = {
     'danger-6': { hex: '#a01100', inverted: 'white', description: descriptions.color.alert },
   },
   breakpoint: {
-    tablet: '769px',
-    desktop: '1024px',
-    widescreen: '1440px',
-    fullhd: '1920px',
+    'tablet': '769px',
+    'desktop': '1024px',
+    'high-definition': '1280px',
+    'widescreen': '1440px',
+    'fullhd': '1920px',
   },
   radius: {
     none: { value: '0' },
diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts
index 763b47452..6dd3ad6f9 100644
--- a/packages/tokens/src/tokens.ts
+++ b/packages/tokens/src/tokens.ts
@@ -268,6 +268,7 @@ export const BaloiseDesignToken = {
   balColorBackgroundLightInverted: '#000d6e',
   balTablet: '769px',
   balDesktop: '1024px',
+  balHighDefinition: '1280px',
   balWidescreen: '1440px',
   balFullhd: '1920px',
   balColumnGap: '1rem',

From 68b615c7aeb68c538bbdd2d4099052a1d90ce1bb Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Thu, 15 Sep 2022 16:09:00 +0200
Subject: [PATCH 5/6] chore: remove comments

---
 .../bal-navigation-popover/bal-navigation-popover.tsx     | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx b/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx
index 9388f9de2..83aeee813 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation-popover/bal-navigation-popover.tsx
@@ -108,35 +108,27 @@ export class NavigationPopover implements ComponentInterface {
 
   private clearTimeouts() {
     if (this.scrollToTopTimer) {
-      // console.log('clearTimeout(this.scrollToTopTimer)')
       clearTimeout(this.scrollToTopTimer)
     }
 
     if (this.setActiveTimer) {
-      // console.log('clearTimeout(this.setActiveTimer)')
       clearTimeout(this.setActiveTimer)
     }
   }
 
   private toggle = (event: Event) => {
-    // console.log('---> toggle', this.isActive)
     stopEventBubbling(event)
     this.clearTimeouts()
 
-    // this.isActive = !this.isActive
     if (!this.isActive) {
       disableSmoothScrolling()
-      // console.log('disableSmoothScrolling')
       this.scrollToTopTimer = setTimeout(() => {
-        // console.log('scrollTo')
         window.scrollTo(0, 0)
       }, 0)
     }
     this.setActiveTimer = setTimeout(() => {
-      // console.log('enableSmoothScrolling')
       enableSmoothScrolling()
       this.isActive = !this.isActive
-      // console.log('toggle active', this.isActive)
     }, 100)
   }
 

From 11acf6333ab92f28f819bbbd728c0ec656b81f05 Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Thu, 15 Sep 2022 16:21:55 +0200
Subject: [PATCH 6/6] fix(navbar): add shadow to light version

---
 packages/components/src/components/bal-navbar/bal-navbar.sass | 1 +
 .../src/components/bal-navbar/stories/bal-navbar.stories.ts   | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/bal-navbar/bal-navbar.sass b/packages/components/src/components/bal-navbar/bal-navbar.sass
index b55226591..b888249b4 100644
--- a/packages/components/src/components/bal-navbar/bal-navbar.sass
+++ b/packages/components/src/components/bal-navbar/bal-navbar.sass
@@ -124,6 +124,7 @@
   // Styling for light (white) background
   +modifiers(is-light)
     background-color: var(--bal-color-white)
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
     .bal-navbar__brand__title
       color: var(--bal-color-primary)
     bal-logo
diff --git a/packages/components/src/components/bal-navbar/stories/bal-navbar.stories.ts b/packages/components/src/components/bal-navbar/stories/bal-navbar.stories.ts
index 2469c2174..b5d08e522 100644
--- a/packages/components/src/components/bal-navbar/stories/bal-navbar.stories.ts
+++ b/packages/components/src/components/bal-navbar/stories/bal-navbar.stories.ts
@@ -28,7 +28,7 @@ const component = BalComponentStory({
   docs,
   args: {
     expanded: false,
-    light: true,
+    light: false,
   },
 })
 
@@ -255,7 +255,7 @@ export const Light = args => ({
   <bal-navbar-menu>
     <bal-navbar-menu-end>
       <bal-popover v-model="isActive">
-        <bal-button bal-popover-trigger :square="square" color="light" icon="web" inverted @click="toggle()">
+        <bal-button bal-popover-trigger :square="square" color="light" icon="web" @click="toggle()">
           <span class="is-hidden-mobile">DE</span>
         </bal-button>
         <bal-popover-content class="p-2">