@swisspost/internet-header 1.9.1 → 1.11.0

package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js

@@ -1,6 +1,8 @@
 import { debounce } from 'throttle-debounce';
 import { state } from '../../../data/store';
+import { getScrollParent } from '../../../utils/scrollparent';
 export const registerLogoAnimationObserver = (target, headerRef) => {
+  const scrollParent = getScrollParent(headerRef);
   /**
    * Set intersection ratio as CSS custom property
    */
@@ -9,7 +11,8 @@ export const registerLogoAnimationObserver = (target, headerRef) => {
     let scale = 1;
     // Minus 1px border at the bottom that the logo is not covering
     const adjustedHeaderHeight = headerRef.clientHeight - 1;
-    const scrollY = fullStickyness ? 0 : window.scrollY;
+    const scrollDistance = scrollParent instanceof Element ? scrollParent.scrollTop : scrollParent.documentElement.scrollTop;
+    const scrollY = fullStickyness ? 0 : scrollDistance;
     // If meta navigation is not visible (mobile, not configured), scale should just be 1
     if (target.clientHeight > 0) {
       scale = Math.max((adjustedHeaderHeight - Math.max(scrollY, 0)) /
@@ -25,13 +28,13 @@ export const registerLogoAnimationObserver = (target, headerRef) => {
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting && entry.intersectionRatio > 0) {
-        window.addEventListener('scroll', handleScroll, { passive: true });
+        scrollParent.addEventListener('scroll', handleScroll, { passive: true });
         window.addEventListener('resize', debounced);
         // Ensure callback is called at least once in case main thread is too busy while scrolling up
         window.requestAnimationFrame(handleScroll);
       }
       else {
-        window.removeEventListener('scroll', handleScroll);
+        scrollParent.removeEventListener('scroll', handleScroll);
         window.removeEventListener('resize', debounced);
         window.requestAnimationFrame(handleScroll);
       }

package/dist/collection/components/post-internet-header/logo-animation/logo-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo-animation.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-header/logo-animation/logo-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,MAAmB,EACnB,SAA6C,EAC7C,EAAE;EACF;;KAEG;EACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;IACnD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,+DAA+D;IAC/D,MAAM,oBAAoB,GAAG,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAEpD,qFAAqF;IACrF,IAAI,MAAM,CAAC,YAAY,GAAG,CAAC,EAAE;MAC3B,KAAK,GAAG,IAAI,CAAC,GAAG,CACd,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,EAC9C,CAAC,CACF,CAAC;KACH;IACD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;EAE9C;;;KAGG;EACH,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACvD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACnE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAE7C,6FAA6F;QAC7F,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;WAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACnD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;IACH,CAAC,CAAC,CAAC;EACL,CAAC,EACD;IACE,kFAAkF;IAClF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;GACtB,CACF,CAAC;EACF,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAEzB,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC","sourcesContent":["import { debounce } from 'throttle-debounce';\nimport { state } from '../../../data/store';\n\nexport const registerLogoAnimationObserver = (\n  target: HTMLElement,\n  headerRef: HTMLSwisspostInternetHeaderElement,\n) => {\n  /**\n   * Set intersection ratio as CSS custom property\n   */\n  const handleScroll = () => {\n    const fullStickyness = state.stickyness === 'full';\n    let scale = 1;\n    // Minus 1px border at the bottom that the logo is not covering\n    const adjustedHeaderHeight = headerRef.clientHeight - 1;\n    const scrollY = fullStickyness ? 0 : window.scrollY;\n\n    // If meta navigation is not visible (mobile, not configured), scale should just be 1\n    if (target.clientHeight > 0) {\n      scale = Math.max(\n        (adjustedHeaderHeight - Math.max(scrollY, 0)) /\n          (adjustedHeaderHeight - target.clientHeight),\n        1,\n      );\n    }\n    headerRef.style.setProperty('--logo-scale', scale.toString());\n  };\n\n  const debounced = debounce(150, handleScroll);\n\n  /**\n   * Observe the meta navigation in order to not track scroll events throughout the whole page.\n   * This ensures that the scroll listener is only active while the meta navigation is visible.\n   */\n  const observer = new IntersectionObserver(\n    entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && entry.intersectionRatio > 0) {\n          window.addEventListener('scroll', handleScroll, { passive: true });\n          window.addEventListener('resize', debounced);\n\n          // Ensure callback is called at least once in case main thread is too busy while scrolling up\n          window.requestAnimationFrame(handleScroll);\n        } else {\n          window.removeEventListener('scroll', handleScroll);\n          window.removeEventListener('resize', debounced);\n          window.requestAnimationFrame(handleScroll);\n        }\n      });\n    },\n    {\n      // Fires when element leaves viewport (0) and when it just about enters it (0.001)\n      threshold: [0, 0.001],\n    },\n  );\n  observer.observe(target);\n\n  return handleScroll;\n};\n"]}
+{"version":3,"file":"logo-animation.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-header/logo-animation/logo-animation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,MAAmB,EACnB,SAA6C,EAC7C,EAAE;EACF,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;EAEhD;;KAEG;EACH,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,KAAK,MAAM,CAAC;IACnD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,+DAA+D;IAC/D,MAAM,oBAAoB,GAAG,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC;IACxD,MAAM,cAAc,GAAG,YAAY,YAAY,OAAO,CAAE,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,SAAS,CAAC;IAC1H,MAAM,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IAEpD,qFAAqF;IACrF,IAAI,MAAM,CAAC,YAAY,GAAG,CAAC,EAAE;MAC3B,KAAK,GAAG,IAAI,CAAC,GAAG,CACd,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,oBAAoB,GAAG,MAAM,CAAC,YAAY,CAAC,EAC9C,CAAC,CACF,CAAC;KACH;IACD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;EAChE,CAAC,CAAC;EAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;EAE9C;;;KAGG;EACH,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;MACtB,IAAI,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACvD,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAE7C,6FAA6F;QAC7F,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;WAAM;QACL,YAAY,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;OAC5C;IACH,CAAC,CAAC,CAAC;EACL,CAAC,EACD;IACE,kFAAkF;IAClF,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;GACtB,CACF,CAAC;EACF,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;EAEzB,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC","sourcesContent":["import { debounce } from 'throttle-debounce';\nimport { state } from '../../../data/store';\nimport { getScrollParent } from '../../../utils/scrollparent';\n\nexport const registerLogoAnimationObserver = (\n  target: HTMLElement,\n  headerRef: HTMLSwisspostInternetHeaderElement,\n) => {\n  const scrollParent = getScrollParent(headerRef);\n\n  /**\n   * Set intersection ratio as CSS custom property\n   */\n  const handleScroll = () => {\n    const fullStickyness = state.stickyness === 'full';\n    let scale = 1;\n    // Minus 1px border at the bottom that the logo is not covering\n    const adjustedHeaderHeight = headerRef.clientHeight - 1;\n    const scrollDistance = scrollParent instanceof Element  ? scrollParent.scrollTop : scrollParent.documentElement.scrollTop;\n    const scrollY = fullStickyness ? 0 : scrollDistance;\n\n    // If meta navigation is not visible (mobile, not configured), scale should just be 1\n    if (target.clientHeight > 0) {\n      scale = Math.max(\n        (adjustedHeaderHeight - Math.max(scrollY, 0)) /\n          (adjustedHeaderHeight - target.clientHeight),\n        1,\n      );\n    }\n    headerRef.style.setProperty('--logo-scale', scale.toString());\n  };\n\n  const debounced = debounce(150, handleScroll);\n\n  /**\n   * Observe the meta navigation in order to not track scroll events throughout the whole page.\n   * This ensures that the scroll listener is only active while the meta navigation is visible.\n   */\n  const observer = new IntersectionObserver(\n    entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && entry.intersectionRatio > 0) {\n          scrollParent.addEventListener('scroll', handleScroll, { passive: true });\n          window.addEventListener('resize', debounced);\n\n          // Ensure callback is called at least once in case main thread is too busy while scrolling up\n          window.requestAnimationFrame(handleScroll);\n        } else {\n          scrollParent.removeEventListener('scroll', handleScroll);\n          window.removeEventListener('resize', debounced);\n          window.requestAnimationFrame(handleScroll);\n        }\n      });\n    },\n    {\n      // Fires when element leaves viewport (0) and when it just about enters it (0.001)\n      threshold: [0, 0.001],\n    },\n  );\n  observer.observe(target);\n\n  return handleScroll;\n};\n"]}

package/dist/collection/components/post-internet-header/post-internet-header.css

@@ -1,403 +1 @@
-/**
- * Colors used by the post style guide
- */
-/**
- * Maps. Allow maps to have custom colors from the project
- * by always merging into a default empty map
- */
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 700;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 700;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 400;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 400;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 300;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 300;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff");
-}
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
-.btn-blank {
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-}
-
-.nav-link {
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.8);
-  transition: color 200ms;
-  background-color: transparent;
-  box-shadow: none;
-  border: 0;
-  margin: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.nav-link:is(:focus-visible, :focus-within, .pretend-focus) {
-  outline: 2px solid var(--post-contrast-color);
-}
-.nav-link:hover, .nav-link:focus {
-  color: black;
-}
-.nav-link:focus-visible {
-  z-index: 1;
-  position: relative;
-}
-.nav-link > svg {
-  width: 1.4em;
-  height: 1.4em;
-  flex-shrink: 0;
-}
-.nav-link > span {
-  flex-shrink: 1;
-}
-
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
-  padding: 0;
-}
-
-a,
-button {
-  border-radius: 4px;
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-}
-a:is(:focus-visible, :focus-within, .pretend-focus),
-button:is(:focus-visible, :focus-within, .pretend-focus) {
-  outline: 2px solid var(--post-contrast-color);
-  border-radius: 4px;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.box > *:first-child {
-  margin-top: 0;
-}
-.box > *:last-child {
-  margin-bottom: 0;
-}
-
-.mirrored {
-  transform: scaleX(-1);
-}
-
-.rotate-270 {
-  transform: rotate(270deg);
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.d-inline-flex {
-  display: inline-flex;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-@media (min-width: 1441px) {
-  .wide-container {
-    margin: 0 auto;
-    max-width: 1440px;
-  }
-}
-
-@media (max-width: 599.98px) {
-  .container {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023.98px) {
-  .container {
-    padding-right: 32px;
-    padding-left: 32px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    padding-right: 40px;
-    padding-left: 40px;
-  }
-}
-
-@media (max-width: -0.02px) {
-  .hidden-xs {
-    display: none;
-  }
-}
-
-@media (max-width: 399.98px) {
-  .hidden-sm {
-    display: none;
-  }
-}
-
-@media (max-width: 599.98px) {
-  .hidden-rg {
-    display: none;
-  }
-}
-
-@media (max-width: 779.98px) {
-  .hidden-md {
-    display: none;
-  }
-}
-
-@media (max-width: 1023.98px) {
-  .hidden-lg {
-    display: none;
-  }
-}
-
-@media (max-width: 1279.98px) {
-  .hidden-xl {
-    display: none;
-  }
-}
-
-@media (max-width: 1440.98px) {
-  .hidden-xxl {
-    display: none;
-  }
-}
-
-/**
- * Default position: scrolled
- * Logo is being scaled up for the initial view (scrollY = 0). This enables media queries to override
- * mobile behaviour without re-calculation
-*/
-:host {
-  --logo-scale: 1;
-}
-@media (max-width: 1023.98px) {
-  :host {
-    --logo-scale: 1 !important;
-  }
-}
-
-post-logo {
-  height: var(--header-height);
-  transform-origin: bottom left;
-  transform: scale(var(--logo-scale));
-}
-
-post-main-navigation {
-  margin-left: calc(var(--header-height) * var(--logo-scale) - var(--header-height));
-}
-
-:host {
-  display: block;
-  position: relative;
-  font-size: 1rem;
-  font-weight: 300;
-  z-index: var(--header-z-index, 10);
-  --header-height: 3.5rem;
-  --meta-header-height: 0px;
-  --language-dropdown-margin-top: 0px;
-}
-@media (min-width: 1024px) {
-  :host {
-    --meta-header-height: 3rem;
-    --header-height: 4rem;
-  }
-}
-@media (min-width: 1280px) {
-  :host {
-    --header-height: 4.5rem;
-  }
-}
-
-:host([meta=false]) {
-  --meta-header-height: 0px;
-  --language-dropdown-margin-top: 1px;
-}
-
-@supports (position: sticky) {
-  :host(:not(.stickyness-none)) {
-    position: sticky;
-  }
-  :host(.stickyness-full) {
-    top: 0;
-  }
-  :host(.stickyness-main) {
-    top: calc(var(--meta-header-height, 0px) * -1);
-  }
-  :host(.stickyness-minimal) {
-    top: calc((var(--header-height, 0px) + var(--meta-header-height, 0px) + 1px) * -1);
-    transition: top 200ms ease-in;
-  }
-  :host(.stickyness-minimal.scrolling-up),
-  :host(.stickyness-minimal.dropdown-open) {
-    top: calc(var(--meta-header-height, 0px) * -1);
-    transition: top 200ms ease-out;
-  }
-}
-.post-internet-header {
-  border-bottom: 1px solid hsl(0, 0%, 90%);
-  background-color: white;
-}
-
-.main-navigation-container {
-  display: flex;
-}
-.main-navigation-container > .main-navigation-controls {
-  flex: 0 0 auto;
-}
-
-.main-navigation {
-  display: flex;
-}
-
-.sub-navigation-container {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  display: flex;
-  background: white;
-  visibility: hidden;
-}
-
-.main-navigation-item:hover .sub-navigation-container {
-  visibility: visible;
-}
-
-.main-navigation-controls {
-  display: flex;
-  margin-left: auto;
-}
-@media (max-width: 1023.98px) {
-  .main-navigation-controls {
-    font-weight: 400;
-  }
-}
-@media (min-width: 1024px) {
-  .main-navigation-controls {
-    font-size: 1.0625rem;
-  }
-}
-.main-navigation-controls > * {
-  border-left: 1px solid hsl(0, 0%, 90%);
-}
-
-.menu-button {
-  display: flex;
-  align-items: center;
-  padding: 0 calc(1rem - 1px);
-  font-weight: 300;
-  cursor: pointer;
-  border-left: 1px solid hsl(0, 0%, 90%);
-  order: 1; /* Display on the far right because of tab order */
-}
-@media (min-width: 1024px) {
-  .menu-button {
-    display: none;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023.98px) {
-  .menu-button .visually-hidden {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: auto;
-    overflow: visible;
-    clip: auto;
-    visibility: visible;
-    margin-right: 0.5rem;
-  }
-}
-.menu-button svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.full-width .wide-container {
-  max-width: none;
-}
+@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);transition:color 200ms;background-color:rgba(0,0,0,0);box-shadow:none;border:0;margin:0;cursor:pointer;display:flex;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.nav-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg{width:1.4em;height:1.4em;flex-shrink:0}.nav-link>span{flex-shrink:1}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{box-sizing:border-box}:host{font-family:"Frutiger Neue For Post",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media(forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{transform:scaleX(-1)}.rotate-270{transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.align-items-center{align-items:center}@media(min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media(max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media(min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media(min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media(max-width: -0.02px){.hidden-xs{display:none}}@media(max-width: 399.98px){.hidden-sm{display:none}}@media(max-width: 599.98px){.hidden-rg{display:none}}@media(max-width: 779.98px){.hidden-md{display:none}}@media(max-width: 1023.98px){.hidden-lg{display:none}}@media(max-width: 1279.98px){.hidden-xl{display:none}}@media(max-width: 1440.98px){.hidden-xxl{display:none}}:host{--logo-scale: 1}@media(max-width: 1023.98px){:host{--logo-scale: 1 !important}}post-logo{height:var(--header-height);transform-origin:bottom left;transform:scale(var(--logo-scale))}post-main-navigation{margin-left:calc(var(--header-height)*var(--logo-scale) - var(--header-height))}:host{display:block;position:relative;font-size:1rem;font-weight:300;z-index:var(--header-z-index, 10);--header-height: 3.5rem;--meta-header-height: 0px;--language-dropdown-margin-top: 0px}@media(min-width: 1024px){:host{--meta-header-height: 3rem;--header-height: 4rem}}@media(min-width: 1280px){:host{--header-height: 4.5rem}}:host([meta=false]){--meta-header-height: 0px;--language-dropdown-margin-top: 1px}@supports(position: sticky){:host(:not(.stickyness-none)){position:sticky}:host(.stickyness-full){top:0}:host(.stickyness-main){top:calc(var(--meta-header-height, 0px)*-1)}:host(.stickyness-minimal){top:calc((var(--header-height, 0px) + var(--meta-header-height, 0px) + 1px)*-1);transition:top 200ms ease-in}:host(.stickyness-minimal.scrolling-up),:host(.stickyness-minimal.dropdown-open){top:calc(var(--meta-header-height, 0px)*-1);transition:top 200ms ease-out}}.post-internet-header{border-bottom:1px solid #e6e6e6;background-color:#fff}.main-navigation-container{display:flex}.main-navigation-container>.main-navigation-controls{flex:0 0 auto}.main-navigation{display:flex}.sub-navigation-container{position:absolute;top:100%;left:0;width:100%;display:flex;background:#fff;visibility:hidden}.main-navigation-item:hover .sub-navigation-container{visibility:visible}.main-navigation-controls{display:flex;margin-left:auto}@media(max-width: 1023.98px){.main-navigation-controls{font-weight:400}}@media(min-width: 1024px){.main-navigation-controls{font-size:1.0625rem}}.main-navigation-controls>*{border-left:1px solid #e6e6e6}.menu-button{display:flex;align-items:center;padding:0 calc(1rem - 1px);font-weight:300;cursor:pointer;border-left:1px solid #e6e6e6;order:1}@media(min-width: 1024px){.menu-button{display:none}}@media(min-width: 600px)and (max-width: 1023.98px){.menu-button .visually-hidden{position:static;width:auto;height:auto;margin:auto;overflow:visible;clip:auto;visibility:visible;margin-right:.5rem}}.menu-button svg{width:1.5rem;height:1.5rem}.full-width .wide-container{max-width:none}

package/dist/collection/components/post-internet-header/post-internet-header.js

@@ -1,13 +1,14 @@
-import { Host, h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { debounce, throttle } from 'throttle-debounce';
 import { getLocalizedConfig, getLocalizedCustomConfig, isValidProjectId, } from '../../services/config.service';
-import { state, dispose } from '../../data/store';
+import { dispose, state } from '../../data/store';
 import { SvgSprite } from '../../utils/svg-sprite.component';
 import { SvgIcon } from '../../utils/svg-icon.component';
-import { translate } from '../../services/language.service';
+import { getUserLang, translate } from '../../services/language.service';
 import { If } from '../../utils/if.component';
 import packageJson from '../../../package.json';
 import { registerLogoAnimationObserver } from './logo-animation/logo-animation';
+import { getScrollParent } from '../../utils/scrollparent';
 export class PostInternetHeader {
   /**
    * Get the currently set language as a two letter string ("de", "fr" "it" or "en")
@@ -46,16 +47,17 @@ export class PostInternetHeader {
   connectedCallback() {
     this.throttledScroll = throttle(300, () => this.handleScrollEvent());
     this.debouncedResize = debounce(200, () => this.handleResize());
-    window.addEventListener('scroll', this.throttledScroll, { passive: true });
-    window.addEventListener('resize', this.debouncedResize, { passive: true });
   }
   disconnectedCallback() {
-    window.removeEventListener('scroll', this.throttledScroll);
-    window.removeEventListener('resize', this.debouncedResize);
+    this.scrollParent.removeEventListener('scroll', this.throttledScroll);
+    this.scrollParent.removeEventListener('resize', this.debouncedResize);
     // Reset the store to its original state
     dispose();
   }
   async componentWillLoad() {
+    this.scrollParent = getScrollParent(this.host);
+    this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+    this.scrollParent.addEventListener('resize', this.debouncedResize, { passive: true });
     // Wait for the config to arrive, then render the header
     try {
       state.projectId = this.project;
@@ -71,8 +73,10 @@ export class PostInternetHeader {
         typeof this.osFlyoutOverrides === 'string'
           ? JSON.parse(this.osFlyoutOverrides)
           : this.osFlyoutOverrides;
-      if (this.customConfig !== undefined && state.currentLanguage !== null) {
-        state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, state.currentLanguage);
+      if (this.customConfig !== undefined) {
+        const langs = Object.keys(typeof this.customConfig === 'string' ? JSON.parse(this.customConfig) : this.customConfig);
+        const lang = state.currentLanguage || getUserLang(langs, this.language);
+        state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, lang);
       }
       state.localizedConfig = await getLocalizedConfig({
         projectId: this.project,
@@ -116,7 +120,7 @@ export class PostInternetHeader {
     if (this.customConfig)
       state.localizedCustomConfig = getLocalizedCustomConfig(this.customConfig, newValue);
   }
-  handleAvailableLanguagesChage(newValue) {
+  handleAvailableLanguagesChange(newValue) {
     state.languageSwitchOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
   }
   async handleOsFlyoutOverrides(newValue) {
@@ -170,31 +174,34 @@ export class PostInternetHeader {
     state.meta = newValue;
   }
   handleLanguageChangeEvent(event) {
-    this.handleLanguageChange(event.detail);
+    void this.handleLanguageChange(event.detail);
   }
   handleStickynessChange(newValue) {
     state.stickyness = newValue;
-    this.updateLogoAnimation();
+    if (typeof this.updateLogoAnimation === 'function')
+      this.updateLogoAnimation();
   }
   handleClickOutside(event) {
     // Close active dropdown element on click outside of it
     if (this.activeDropdownElement && !event.composedPath().includes(this.activeDropdownElement)) {
-      this.activeDropdownElement.toggleDropdown(false);
+      void this.activeDropdownElement.toggleDropdown(false);
     }
   }
   handleKeyUp(event) {
     if (event.key === 'Escape') {
       if (this.activeDropdownElement) {
-        this.activeDropdownElement.toggleDropdown(false);
+        void this.activeDropdownElement.toggleDropdown(false);
       }
       if (this.activeFlyout !== null && this.mainNav) {
-        this.mainNav.toggleDropdown(false);
+        void this.mainNav.toggleDropdown(false);
       }
     }
   }
   handleScrollEvent() {
     // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-    const st = window.scrollY || document.documentElement.scrollTop;
+    const st = this.scrollParent instanceof Document
+      ? this.scrollParent.documentElement.scrollTop
+      : this.scrollParent.scrollTop;
     // Toggle class without re-rendering the component if stickyness is minimal
     // the other stickyness modes do not need the class
     if (this.stickyness === 'minimal') {
@@ -223,13 +230,13 @@ export class PostInternetHeader {
       // a circle or an outdated state, we'll not handle this event
       return;
     }
-    if (event.detail.open === true) {
+    if (event.detail.open) {
       if (this.activeDropdownElement) {
-        this.activeDropdownElement.toggleDropdown(false);
+        void this.activeDropdownElement.toggleDropdown(false);
       }
       this.activeDropdownElement = event.detail.element;
       if (window.innerWidth >= 1024) {
-        // Add event listener to close active dropdown element on click outsite of it
+        // Add event listener to close active dropdown element on click outside of it
         // Also adds 10ms delay in case of an external interaction:
         //    Some button on the page calls toggleDropdown() -> dropdown opens
         //    Click event bubbles to the window, this.handleClickOutsideBound closes dropdown again
@@ -238,7 +245,7 @@ export class PostInternetHeader {
         }, 10);
       }
       if (this.activeFlyout !== null && this.mainNav) {
-        this.mainNav.setActiveFlyout(null);
+        void this.mainNav.setActiveFlyout(null);
       }
     }
     else {
@@ -254,7 +261,7 @@ export class PostInternetHeader {
   handleFlyoutToggled(event) {
     this.activeFlyout = event.detail;
     if (this.activeDropdownElement && event.detail && !this.isMainNavOpen()) {
-      this.activeDropdownElement.toggleDropdown(false);
+      void this.activeDropdownElement.toggleDropdown(false);
     }
   }
   toggleMobileDropdown() {
@@ -276,7 +283,7 @@ export class PostInternetHeader {
       ((_b = config.header.navMeta) === null || _b === void 0 ? void 0 : _b.filter(meta => !meta.isHomeLink).length) > 0;
     const renderLogin = ((_c = this.login) !== null && _c !== void 0 ? _c : !config.header.isLoginWidgetHidden) && config.header.loginWidgetOptions;
     const renderLanguageSwitch = config.header.navLang.length > 1;
-    return (h(Host, { class: `stickyness-${this.stickyness} ${this.activeDropdownElement || this.activeFlyout ? 'dropdown-open' : ''}`, "data-version": packageJson.version, onKeyup: (e) => this.handleKeyUp(e) }, h("header", { class: `post-internet-header${this.fullWidth ? ' full-width' : ''}` }, h(SvgSprite, null), h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h(If, { condition: this.skiplinks === true }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation === true }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth, ref: el => (this.metaNav = el) }, h(If, { condition: renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-desktop", mode: "dropdown", onDropdownToggled: e => this.handleDropdownToggled(e) })))), h("div", { class: "main-navigation-container wide-container" }, h("post-logo", null), h("button", { class: "menu-button nav-link", onClick: () => this.toggleMobileDropdown(), "aria-haspopup": "menu", "aria-controls": "post-internet-header-main-navigation", "aria-expanded": this.activeDropdownElement ? 'true' : 'false' }, h("span", { class: "menu-button-text visually-hidden" }, config.header.mobileMenu.text), h(SvgIcon, { name: this.isMainNavOpen() ? 'pi-close' : 'pi-menu' })), h("post-main-navigation", { onDropdownToggled: e => this.handleDropdownToggled(e), onFlyoutToggled: e => this.handleFlyoutToggled(e), ref: el => (this.mainNav = el) }, h(If, { condition: renderMetaNavigation === true }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h(If, { condition: this.search !== false }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", null, h("slot", { name: "login-widget" }))), h(If, { condition: renderMetaNavigation === false && renderLanguageSwitch === true }, h("post-language-switch", { id: "post-language-switch-no-meta", onDropdownToggled: e => this.handleDropdownToggled(e), mode: "dropdown" })), h("slot", { name: "main" }))))));
+    return (h(Host, { class: `stickyness-${this.stickyness} ${Boolean(this.activeDropdownElement) || Boolean(this.activeFlyout) ? 'dropdown-open' : ''}`, "data-version": packageJson.version, onKeyup: (e) => this.handleKeyUp(e) }, h("header", { class: `post-internet-header${this.fullWidth ? ' full-width' : ''}` }, h(SvgSprite, null), h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h(If, { condition: this.skiplinks }, h("post-skiplinks", null)), h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "horizontal", class: "hidden-lg", "full-width": this.fullWidth, ref: el => (this.metaNav = el) }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-desktop", mode: "dropdown", onDropdownToggled: e => this.handleDropdownToggled(e) })))), h("div", { class: "main-navigation-container wide-container" }, h("post-logo", null), h("button", { class: "menu-button nav-link", onClick: () => this.toggleMobileDropdown(), "aria-haspopup": "menu", "aria-controls": "post-internet-header-main-navigation", "aria-expanded": this.activeDropdownElement ? 'true' : 'false' }, h("span", { class: "menu-button-text visually-hidden" }, config.header.mobileMenu.text), h(SvgIcon, { name: this.isMainNavOpen() ? 'pi-close' : 'pi-menu' })), h("post-main-navigation", { onDropdownToggled: e => this.handleDropdownToggled(e), onFlyoutToggled: e => this.handleFlyoutToggled(e), ref: el => (this.mainNav = el) }, h(If, { condition: renderMetaNavigation }, h("post-meta-navigation", { orientation: "vertical" }, h(If, { condition: renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-mobile", mode: "list" }))))), h("div", { class: "main-navigation-controls" }, h(If, { condition: this.search }, h("post-search", { onDropdownToggled: e => this.handleDropdownToggled(e) })), h(If, { condition: !!renderLogin }, h("post-klp-login-widget", null, h("slot", { name: "login-widget" }))), h(If, { condition: !renderMetaNavigation && renderLanguageSwitch }, h("post-language-switch", { id: "post-language-switch-no-meta", onDropdownToggled: e => this.handleDropdownToggled(e), mode: "dropdown" })), h("slot", { name: "main" }))))));
   }
   static get is() { return "swisspost-internet-header"; }
   static get encapsulation() { return "shadow"; }
@@ -336,8 +343,8 @@ export class PostInternetHeader {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "'de' | 'fr' | 'it' | 'en'",
+          "resolved": "\"de\" | \"en\" | \"fr\" | \"it\" | undefined",
           "references": {}
         },
         "required": false,
@@ -478,7 +485,7 @@ export class PostInternetHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Override the language switch links with custom URLs. Helpful when your application contains sub-pages and you\nwould like to stay on subpages when the user changes language."
+          "text": "Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you\nwould like to stay on subpages when the user changes language."
         },
         "attribute": "language-switch-overrides",
         "reflect": false
@@ -654,7 +661,7 @@ export class PostInternetHeader {
         "methodName": "handleLanguageChange"
       }, {
         "propName": "languageSwitchOverrides",
-        "methodName": "handleAvailableLanguagesChage"
+        "methodName": "handleAvailableLanguagesChange"
       }, {
         "propName": "osFlyoutOverrides",
         "methodName": "handleOsFlyoutOverrides"