@swisspost/internet-header 1.7.2 → 1.7.3-beta.0

package/dist/collection/components/post-logo/post-logo.css

@@ -23,39 +23,15 @@
   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");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -66,11 +42,13 @@ svg {
 }
 
 .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;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -78,9 +56,16 @@ svg {
   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;
@@ -90,6 +75,56 @@ svg {
   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: 3px;
+  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: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -151,17 +186,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;

package/dist/collection/components/post-main-navigation/post-main-navigation.css

@@ -73,39 +73,15 @@
   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");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.main-container, .flyout-linklist, .no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -115,12 +91,14 @@ svg {
   padding: 0;
 }
 
-.main-link, .flyout-close-button, .flyout-link, .nav-link {
+.nav-link, .main-link, .flyout-close-button, .flyout-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;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -128,18 +106,75 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
-.main-link:hover, .flyout-close-button:hover, .flyout-link:hover, .nav-link:hover, .main-link:focus, .flyout-close-button:focus, .flyout-link:focus, .nav-link:focus {
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus), .main-link:is(:focus-visible, :focus-within, .pretend-focus), .flyout-close-button:is(:focus-visible, :focus-within, .pretend-focus), .flyout-link:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
+.nav-link:hover, .main-link:hover, .flyout-close-button:hover, .flyout-link:hover, .nav-link:focus, .main-link:focus, .flyout-close-button:focus, .flyout-link:focus {
   color: black;
 }
-.main-link > svg, .flyout-close-button > svg, .flyout-link > svg, .nav-link > svg {
+.nav-link:focus-visible, .main-link:focus-visible, .flyout-close-button:focus-visible, .flyout-link:focus-visible {
+  z-index: 1;
+  position: relative;
+}
+.nav-link > svg, .main-link > svg, .flyout-close-button > svg, .flyout-link > svg {
   width: 1.4em;
   height: 1.4em;
   flex-shrink: 0;
 }
-.main-link > span, .flyout-close-button > span, .flyout-link > span, .nav-link > span {
+.nav-link > span, .main-link > span, .flyout-close-button > span, .flyout-link > span {
   flex-shrink: 1;
 }
 
+.no-list, .main-container, .flyout-linklist {
+  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: 3px;
+  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: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -201,17 +236,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;
@@ -420,6 +444,7 @@ svg {
   background-color: hsl(0, 0%, 80%);
   opacity: 1;
   transform: scale(1);
+  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .main-link.active,
 .flyout-link.active {

package/dist/collection/components/post-main-navigation/post-main-navigation.js

@@ -63,30 +63,32 @@ export class PostMainNavigation {
       this.mouseLeaveTimer = null;
     }
   }
-  closeFlyout(id) {
+  closeFlyout(id, manageFocus = true) {
     var _a;
     if (id === undefined)
       return;
     const flyout = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
     if (flyout) {
       // Add flyout animation for close action
-      this.addFlyoutAnimation(flyout, 'collapse');
+      this.addFlyoutAnimation(flyout, 'collapse', manageFocus);
     }
     this.activeFlyout = null;
     this.flyoutToggled.emit();
   }
-  addFlyoutAnimation(flyout, direction) {
+  addFlyoutAnimation(flyout, direction, manageFocus = true) {
     // Check if user prefers to see animations or not
     if (!userPrefersReducedMotion()) {
       flyout.classList.add('animate');
       // Remove flyout animation after transition ended
       flyout.addEventListener('transitionend', () => {
         var _a, _b, _c;
-        if (direction === 'expand') {
-          (_a = flyout.querySelector('button.flyout-back-button')) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        else if (direction === 'collapse') {
-          (_c = (_b = flyout.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('a.main-link')) === null || _c === void 0 ? void 0 : _c.focus();
+        if (manageFocus) {
+          if (direction === 'expand') {
+            (_a = flyout.querySelector('button.flyout-back-button')) === null || _a === void 0 ? void 0 : _a.focus();
+          }
+          else if (direction === 'collapse') {
+            (_c = (_b = flyout.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('a.main-link')) === null || _c === void 0 ? void 0 : _c.focus();
+          }
         }
         flyout.classList.remove('animate');
       }, {
@@ -130,7 +132,7 @@ export class PostMainNavigation {
       // Allow the pointer to shortly leave the flyout without closing it. This
       // allows for user mistakes and makes the experience less nervous
       this.mouseLeaveTimer = window.setTimeout(() => {
-        this.closeFlyout(level.id);
+        this.closeFlyout(level.id, false);
       }, 300);
     }
   }

package/dist/collection/components/post-main-navigation/post-main-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-main-navigation.js","sourceRoot":"","sources":["../../../../src/components/post-main-navigation/post-main-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  IsFocusable,\n  NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n  tag: 'post-main-navigation',\n  styleUrl: 'post-main-navigation.scss',\n  shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n  @State() activeFlyout: string | null;\n  @State() mobileMenuOpen: boolean;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event() flyoutToggled: EventEmitter<string | null>;\n  @Element() host: DropdownElement;\n  private throttledResize: throttle<() => void>;\n  private resizeTimer: number | null = null;\n  private mouseLeaveTimer: number | null = null;\n  private mouseEnterTimer: number | null = null;\n\n  connectedCallback() {\n    this.throttledResize = throttle(300, () => this.handleResize());\n    window.addEventListener('resize', this.throttledResize, { passive: true });\n    this.setWindowHeight();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.throttledResize);\n    if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n    if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n  }\n\n  handleResize() {\n    // Suspend all animations and transitions on window resize\n    this.host.classList.add('no-animation');\n    if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n    this.resizeTimer = window.setTimeout(() => {\n      this.host.classList.remove('no-animation');\n    }, 300);\n\n    this.setWindowHeight();\n  }\n\n  // Update window height var\n  setWindowHeight() {\n    if (!this.host) {\n      return;\n    }\n    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n    // Safari might or might not show a blank bar at the bottom where the browser\n    // controls should be. This timeout waits for this bar to appear before resetting the available height\n    window.setTimeout(() => {\n      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n    }, 100);\n  }\n\n  openFlyout(id: string) {\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout && this.activeFlyout !== '') {\n      // Add flyout animation if there's no flyout open\n      this.addFlyoutAnimation(flyout, 'expand');\n    }\n\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(id);\n    this.setWindowHeight();\n\n    if (this.mouseLeaveTimer !== null) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n  }\n\n  closeFlyout(id?: string) {\n    if (id === undefined) return;\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout) {\n      // Add flyout animation for close action\n      this.addFlyoutAnimation(flyout, 'collapse');\n    }\n\n    this.activeFlyout = null;\n    this.flyoutToggled.emit();\n  }\n\n  addFlyoutAnimation(flyout: HTMLElement, direction?: 'expand' | 'collapse') {\n    // Check if user prefers to see animations or not\n    if (!userPrefersReducedMotion()) {\n      flyout.classList.add('animate');\n\n      // Remove flyout animation after transition ended\n      flyout.addEventListener(\n        'transitionend',\n        () => {\n          if (direction === 'expand') {\n            flyout.querySelector<HTMLElement>('button.flyout-back-button')?.focus();\n          } else if (direction === 'collapse') {\n            flyout.parentElement?.querySelector<HTMLElement>('a.main-link')?.focus();\n          }\n\n          flyout.classList.remove('animate');\n        },\n        {\n          once: true,\n        },\n      );\n    }\n  }\n\n  isActiveFlyout(id?: string) {\n    return id === this.activeFlyout;\n  }\n\n  handleMouseEnter(level: NavMainEntity) {\n    // Cancel opening the flyout if there already is one scheduled to open\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n      this.mouseEnterTimer = null;\n    }\n\n    // Cancel closing if we enter again\n    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n      this.mouseEnterTimer = window.setTimeout(() => {\n        this.mouseEnterTimer = null;\n        if (level.id !== undefined) this.openFlyout(level.id);\n      }, 200);\n    }\n  }\n\n  handleMouseLeave(level: NavMainEntity) {\n    // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n    }\n\n    // Don't close an open flyout if the mouseleave is from another mainnav entry\n    if (this.activeFlyout && this.activeFlyout !== level.id) {\n      return;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n      // Allow the pointer to shortly leave the flyout without closing it. This\n      // allows for user mistakes and makes the experience less nervous\n      this.mouseLeaveTimer = window.setTimeout(() => {\n        this.closeFlyout(level.id);\n      }, 300);\n    }\n  }\n\n  handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n      if (event.cancelable) event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleClick(event: MouseEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first click, always open the flyout, never the link\n      // This is relevant for desktop with active screenreader which\n      // translates an enter keypress to a click\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  /**\n   * Toggle the main navigation (only visible on mobile)\n   * @param force Force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n    if (force === false) {\n      this.closeFlyout();\n    }\n\n    this.setWindowHeight();\n\n    return this.mobileMenuOpen;\n  }\n\n  /**\n   * Focus the main navigation toggle button\n   */\n  @Method()\n  async setFocus() {\n    const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n    if (firstLink) {\n      firstLink.focus();\n    }\n  }\n\n  /**\n   * Open a specific flyout\n   * @param id Flyout ID\n   */\n  @Method()\n  async setActiveFlyout(id: string | null) {\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(this.activeFlyout);\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <nav\n          aria-label={headerConfig.translations.navMainAriaLabel}\n          id=\"post-internet-header-main-navigation\"\n          class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n          role=\"menu\"\n        >\n          <ul class=\"main-container container\">\n            {headerConfig.navMain.map(levelOne => (\n              <li\n                key={levelOne.text}\n                onMouseLeave={() => this.handleMouseLeave(levelOne)}\n                onMouseEnter={() => this.handleMouseEnter(levelOne)}\n              >\n                <LevelOneAction\n                  level={levelOne}\n                  isOpen={this.isActiveFlyout(levelOne.id)}\n                  onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n                  onKeyDown={e => this.handleKeyPress(e, levelOne)}\n                  onClick={e => this.handleClick(e, levelOne)}\n                />\n                {!levelOne.noFlyout ? renderLevelOneFlyout.bind(this)(levelOne) : null}\n              </li>\n            ))}\n          </ul>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n\n    function renderLevelOneFlyout(levelOne: NavMainEntity) {\n      return (\n        <div id={levelOne.id} class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}>\n          <div class=\"wide-container\">\n            <div class=\"flyout-nav\">\n              <button\n                class=\"nav-link flyout-back-button\"\n                onClick={() => this.closeFlyout(levelOne.id)}\n              >\n                <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n                <span>{headerConfig.translations.backButtonText}</span>\n              </button>\n              <button class=\"flyout-close-button\" onClick={() => this.closeFlyout(levelOne.id)}>\n                <span class=\"visually-hidden\">\n                  {levelOne.text}, {headerConfig.translations.mobileNavToggleClose}\n                </span>\n                <SvgIcon name=\"pi-close\" />\n              </button>\n            </div>\n            <h2 class=\"flyout-title container\">\n              <a href={levelOne.url} class=\"nav-link\">\n                {levelOne.text}\n              </a>\n            </h2>\n            <div class=\"flyout-row container\">\n              {levelOne.flyout.map((flyout, i) => (\n                <div key={flyout.title} class=\"flyout-column\">\n                  {flyout.title ? <h3 id={`${levelOne.id}-column-${i}`}>{flyout.title}</h3> : null}\n                  <ul\n                    class=\"flyout-linklist\"\n                    aria-labelledby={flyout.title ? `${levelOne.id}-column-${i}` : undefined}\n                  >\n                    {flyout.linkList.map(link => (\n                      <li key={link.url}>\n                        <a\n                          class={{\n                            'flyout-link': true,\n                            'active': !!link?.isActiveOverride,\n                          }}\n                          href={link.url}\n                          target={link.target}\n                        >\n                          {link.title}\n                          {link?.isActiveOverride ? (\n                            <span class=\"visually-hidden\">\n                              , {translate('Active navigation element')}\n                            </span>\n                          ) : null}\n                        </a>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"post-main-navigation.js","sourceRoot":"","sources":["../../../../src/components/post-main-navigation/post-main-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Method, Event, Element, EventEmitter } from '@stencil/core';\nimport { throttle } from 'throttle-debounce';\nimport { state } from '../../data/store';\nimport {\n  DropdownElement,\n  DropdownEvent,\n  HasDropdown,\n  IsFocusable,\n  NavMainEntity,\n} from '../../models/header.model';\nimport { userPrefersReducedMotion } from '../../services/ui.service';\nimport { translate } from '../../services/language.service';\nimport { SvgSprite } from '../../utils/svg-sprite.component';\nimport { SvgIcon } from '../../utils/svg-icon.component';\nimport { LevelOneAction } from './components/level-one-action.component';\n\n@Component({\n  tag: 'post-main-navigation',\n  styleUrl: 'post-main-navigation.scss',\n  shadow: true,\n})\nexport class PostMainNavigation implements HasDropdown, IsFocusable {\n  @State() activeFlyout: string | null;\n  @State() mobileMenuOpen: boolean;\n  @Event() dropdownToggled: EventEmitter<DropdownEvent>;\n  @Event() flyoutToggled: EventEmitter<string | null>;\n  @Element() host: DropdownElement;\n  private throttledResize: throttle<() => void>;\n  private resizeTimer: number | null = null;\n  private mouseLeaveTimer: number | null = null;\n  private mouseEnterTimer: number | null = null;\n\n  connectedCallback() {\n    this.throttledResize = throttle(300, () => this.handleResize());\n    window.addEventListener('resize', this.throttledResize, { passive: true });\n    this.setWindowHeight();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.throttledResize);\n    if (this.mouseEnterTimer !== null) window.clearTimeout(this.mouseEnterTimer);\n    if (this.mouseLeaveTimer !== null) window.clearTimeout(this.mouseLeaveTimer);\n  }\n\n  handleResize() {\n    // Suspend all animations and transitions on window resize\n    this.host.classList.add('no-animation');\n    if (this.resizeTimer !== null) window.clearTimeout(this.resizeTimer);\n    this.resizeTimer = window.setTimeout(() => {\n      this.host.classList.remove('no-animation');\n    }, 300);\n\n    this.setWindowHeight();\n  }\n\n  // Update window height var\n  setWindowHeight() {\n    if (!this.host) {\n      return;\n    }\n    this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n\n    // Safari might or might not show a blank bar at the bottom where the browser\n    // controls should be. This timeout waits for this bar to appear before resetting the available height\n    window.setTimeout(() => {\n      this.host.style.setProperty('--window-height', `${window.innerHeight}px`);\n    }, 100);\n  }\n\n  openFlyout(id: string) {\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout && this.activeFlyout !== '') {\n      // Add flyout animation if there's no flyout open\n      this.addFlyoutAnimation(flyout, 'expand');\n    }\n\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(id);\n    this.setWindowHeight();\n\n    if (this.mouseLeaveTimer !== null) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n  }\n\n  closeFlyout(id?: string, manageFocus = true) {\n    if (id === undefined) return;\n    const flyout = this.host.shadowRoot?.getElementById(id);\n\n    if (flyout) {\n      // Add flyout animation for close action\n      this.addFlyoutAnimation(flyout, 'collapse', manageFocus);\n    }\n\n    this.activeFlyout = null;\n    this.flyoutToggled.emit();\n  }\n\n  addFlyoutAnimation(flyout: HTMLElement, direction?: 'expand' | 'collapse', manageFocus = true) {\n    // Check if user prefers to see animations or not\n    if (!userPrefersReducedMotion()) {\n      flyout.classList.add('animate');\n\n      // Remove flyout animation after transition ended\n      flyout.addEventListener(\n        'transitionend',\n        () => {\n          if (manageFocus) {\n            if (direction === 'expand') {\n              flyout.querySelector<HTMLElement>('button.flyout-back-button')?.focus();\n            } else if (direction === 'collapse') {\n              flyout.parentElement?.querySelector<HTMLElement>('a.main-link')?.focus();\n            }\n          }\n\n          flyout.classList.remove('animate');\n        },\n        {\n          once: true,\n        },\n      );\n    }\n  }\n\n  isActiveFlyout(id?: string) {\n    return id === this.activeFlyout;\n  }\n\n  handleMouseEnter(level: NavMainEntity) {\n    // Cancel opening the flyout if there already is one scheduled to open\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n      this.mouseEnterTimer = null;\n    }\n\n    // Cancel closing if we enter again\n    if (this.mouseLeaveTimer && this.activeFlyout === level.id) {\n      window.clearTimeout(this.mouseLeaveTimer);\n      this.mouseLeaveTimer = null;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0 && this.activeFlyout !== level.id) {\n      // Delay opening the flyout for a moment to give users a chance to move the mouse over the navigation without triggering the flyout\n      this.mouseEnterTimer = window.setTimeout(() => {\n        this.mouseEnterTimer = null;\n        if (level.id !== undefined) this.openFlyout(level.id);\n      }, 200);\n    }\n  }\n\n  handleMouseLeave(level: NavMainEntity) {\n    // Cancel opening the flyout if a mouseleave event happens before the flyout opened\n    if (this.mouseEnterTimer !== null) {\n      window.clearTimeout(this.mouseEnterTimer);\n    }\n\n    // Don't close an open flyout if the mouseleave is from another mainnav entry\n    if (this.activeFlyout && this.activeFlyout !== level.id) {\n      return;\n    }\n\n    if (window.innerWidth >= 1024 && level.flyout.length > 0) {\n      // Allow the pointer to shortly leave the flyout without closing it. This\n      // allows for user mistakes and makes the experience less nervous\n      this.mouseLeaveTimer = window.setTimeout(() => {\n        this.closeFlyout(level.id, false);\n      }, 300);\n    }\n  }\n\n  handleTouchEnd(event: TouchEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first touchstart and has a flyout, prevent link activation and open the flyout\n      if (event.cancelable) event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleKeyPress(event: KeyboardEvent, level: NavMainEntity) {\n    if (event.key === 'Enter' && !this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first enter keypress and has a flyout, prevent link activation and open the flyout\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  handleClick(event: MouseEvent, level: NavMainEntity) {\n    if (!this.isActiveFlyout(level.id) && !level.noFlyout) {\n      // It's the first click, always open the flyout, never the link\n      // This is relevant for desktop with active screenreader which\n      // translates an enter keypress to a click\n      event.preventDefault();\n      if (level.id) this.openFlyout(level.id);\n    }\n  }\n\n  /**\n   * Toggle the main navigation (only visible on mobile)\n   * @param force Force a state\n   * @returns Boolean indicating new state\n   */\n  @Method()\n  async toggleDropdown(force?: boolean) {\n    this.mobileMenuOpen = force === undefined ? !this.mobileMenuOpen : force;\n    this.dropdownToggled.emit({ open: this.mobileMenuOpen, element: this.host });\n\n    if (force === false) {\n      this.closeFlyout();\n    }\n\n    this.setWindowHeight();\n\n    return this.mobileMenuOpen;\n  }\n\n  /**\n   * Focus the main navigation toggle button\n   */\n  @Method()\n  async setFocus() {\n    const firstLink = this.host.shadowRoot?.querySelector<HTMLElement>('.main-link');\n    if (firstLink) {\n      firstLink.focus();\n    }\n  }\n\n  /**\n   * Open a specific flyout\n   * @param id Flyout ID\n   */\n  @Method()\n  async setActiveFlyout(id: string | null) {\n    this.activeFlyout = id;\n    this.flyoutToggled.emit(this.activeFlyout);\n  }\n\n  render() {\n    if (state.localizedConfig?.header === undefined) return;\n    const headerConfig = state.localizedConfig.header;\n\n    return (\n      <Host>\n        <SvgSprite />\n        <nav\n          aria-label={headerConfig.translations.navMainAriaLabel}\n          id=\"post-internet-header-main-navigation\"\n          class={{ 'main-navigation': true, 'open': this.mobileMenuOpen }}\n          role=\"menu\"\n        >\n          <ul class=\"main-container container\">\n            {headerConfig.navMain.map(levelOne => (\n              <li\n                key={levelOne.text}\n                onMouseLeave={() => this.handleMouseLeave(levelOne)}\n                onMouseEnter={() => this.handleMouseEnter(levelOne)}\n              >\n                <LevelOneAction\n                  level={levelOne}\n                  isOpen={this.isActiveFlyout(levelOne.id)}\n                  onTouchEnd={e => this.handleTouchEnd(e, levelOne)}\n                  onKeyDown={e => this.handleKeyPress(e, levelOne)}\n                  onClick={e => this.handleClick(e, levelOne)}\n                />\n                {!levelOne.noFlyout ? renderLevelOneFlyout.bind(this)(levelOne) : null}\n              </li>\n            ))}\n          </ul>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n\n    function renderLevelOneFlyout(levelOne: NavMainEntity) {\n      return (\n        <div id={levelOne.id} class={{ flyout: true, open: this.isActiveFlyout(levelOne.id) }}>\n          <div class=\"wide-container\">\n            <div class=\"flyout-nav\">\n              <button\n                class=\"nav-link flyout-back-button\"\n                onClick={() => this.closeFlyout(levelOne.id)}\n              >\n                <SvgIcon name=\"pi-pointy-arrow-right\" classNames=\"mirrored\" />\n                <span>{headerConfig.translations.backButtonText}</span>\n              </button>\n              <button class=\"flyout-close-button\" onClick={() => this.closeFlyout(levelOne.id)}>\n                <span class=\"visually-hidden\">\n                  {levelOne.text}, {headerConfig.translations.mobileNavToggleClose}\n                </span>\n                <SvgIcon name=\"pi-close\" />\n              </button>\n            </div>\n            <h2 class=\"flyout-title container\">\n              <a href={levelOne.url} class=\"nav-link\">\n                {levelOne.text}\n              </a>\n            </h2>\n            <div class=\"flyout-row container\">\n              {levelOne.flyout.map((flyout, i) => (\n                <div key={flyout.title} class=\"flyout-column\">\n                  {flyout.title ? <h3 id={`${levelOne.id}-column-${i}`}>{flyout.title}</h3> : null}\n                  <ul\n                    class=\"flyout-linklist\"\n                    aria-labelledby={flyout.title ? `${levelOne.id}-column-${i}` : undefined}\n                  >\n                    {flyout.linkList.map(link => (\n                      <li key={link.url}>\n                        <a\n                          class={{\n                            'flyout-link': true,\n                            'active': !!link?.isActiveOverride,\n                          }}\n                          href={link.url}\n                          target={link.target}\n                        >\n                          {link.title}\n                          {link?.isActiveOverride ? (\n                            <span class=\"visually-hidden\">\n                              , {translate('Active navigation element')}\n                            </span>\n                          ) : null}\n                        </a>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n}\n"]}

package/dist/collection/components/post-meta-navigation/post-meta-navigation.css

@@ -23,39 +23,15 @@
   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");
 }
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  border: 0;
   padding: 0;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.meta-list, .no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 
 .btn-blank {
@@ -65,12 +41,14 @@ svg {
   padding: 0;
 }
 
-.meta-link, .nav-link {
+.nav-link, .meta-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;
-  border-radius: 0;
   box-shadow: none;
   border: 0;
   margin: 0;
@@ -78,18 +56,75 @@ svg {
   align-items: center;
   gap: 0.5rem;
 }
-.meta-link:hover, .nav-link:hover, .meta-link:focus, .nav-link:focus {
+.nav-link:is(:focus-visible, :focus-within, .pretend-focus), .meta-link:is(:focus-visible, :focus-within, .pretend-focus) {
+  outline: 2px solid var(--post-contrast-color);
+}
+.nav-link:hover, .meta-link:hover, .nav-link:focus, .meta-link:focus {
   color: black;
 }
-.meta-link > svg, .nav-link > svg {
+.nav-link:focus-visible, .meta-link:focus-visible {
+  z-index: 1;
+  position: relative;
+}
+.nav-link > svg, .meta-link > svg {
   width: 1.4em;
   height: 1.4em;
   flex-shrink: 0;
 }
-.meta-link > span, .nav-link > span {
+.nav-link > span, .meta-link > span {
   flex-shrink: 1;
 }
 
+.no-list, .meta-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: 3px;
+  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: 3px;
+  position: relative;
+  z-index: 1;
+}
+
+img,
+svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+@media (forced-colors: active) {
+  svg {
+    color: white;
+  }
+}
+
 .box > *:first-child {
   margin-top: 0;
 }
@@ -151,17 +186,6 @@ svg {
   }
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
 @media (max-width: -0.02px) {
   .hidden-xs {
     display: none;