@progressive-development/pd-page 0.9.1 → 1.0.0

package/dist/pd-menu/PdMenu.js

@@ -1,21 +1,22 @@
-import { LitElement, css, html } from 'lit';
+import { css, LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
-import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import { classMap } from 'lit/directives/class-map.js';
+import { localized, msg } from '@lit/localize';
 import { pdIcons } from '@progressive-development/pd-icon';
 import '@progressive-development/pd-icon/pd-icon';
+import '@progressive-development/pd-forms/pd-button-select-group';
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-const _PdMenu = class _PdMenu extends LitElement {
+let PdMenu = class extends LitElement {
   constructor() {
     super(...arguments);
     this.activeRoute = "";
@@ -24,24 +25,308 @@ const _PdMenu = class _PdMenu extends LitElement {
     this.menuItems = [];
     this.topMenuItems = [];
     this.noBurgerMenu = false;
-    this.headerSize = 0;
     this._activeSecIndex = 0;
     this._activeBurgerMenu = false;
-    this._activeLocaleMenu = false;
     this._smallScreen = false;
+    /** @ignore */
+    this._boundScrollHandler = this._handleScroll.bind(this);
+    /** @ignore */
+    this._boundMediaQueryHandler = this._handleMediaQuery.bind(this);
+    this._ticking = false;
   }
-  static {
-    this.styles = [
-      PdColorStyles,
-      PdFontStyles,
-      css`
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("scroll", this._boundScrollHandler);
+    this._mediaQueryList = window.matchMedia("(max-width: 767px)");
+    this._mediaQueryList.addEventListener(
+      "change",
+      this._boundMediaQueryHandler
+    );
+    this._smallScreen = this._mediaQueryList.matches && !this.noBurgerMenu;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("scroll", this._boundScrollHandler);
+    if (this._mediaQueryList) {
+      this._mediaQueryList.removeEventListener(
+        "change",
+        this._boundMediaQueryHandler
+      );
+    }
+  }
+  _handleScroll() {
+    const scrollY = window.scrollY;
+    if (!this._ticking) {
+      window.requestAnimationFrame(() => {
+        this._updateActiveSection(scrollY);
+        this._ticking = false;
+      });
+      this._ticking = true;
+    }
+  }
+  _handleMediaQuery(e) {
+    this._smallScreen = e.matches && !this.noBurgerMenu;
+  }
+  _updateActiveSection(_scrollPos) {
+    let activeIndex = -1;
+    let closestDistance = Infinity;
+    let lastVisibleIndex = -1;
+    this.menuItems.forEach((item, index) => {
+      if (item.ref) {
+        const rect = item.ref.getBoundingClientRect();
+        if (rect.top < window.innerHeight && rect.bottom > 0) {
+          lastVisibleIndex = index;
+        }
+        if (rect.top <= 150 && rect.bottom > 0) {
+          const distance = Math.abs(rect.top);
+          if (distance < closestDistance) {
+            activeIndex = index;
+            closestDistance = distance;
+          }
+        }
+      }
+    });
+    if (lastVisibleIndex >= 0) {
+      const atBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 50;
+      if (atBottom && lastVisibleIndex > activeIndex) {
+        activeIndex = lastVisibleIndex;
+      }
+    }
+    const newActiveIndex = activeIndex >= 0 ? activeIndex + 1 : 0;
+    if (newActiveIndex !== this._activeSecIndex && newActiveIndex > 0) {
+      const activeItem = this.menuItems[newActiveIndex - 1];
+      if (activeItem?.sec) {
+        this.dispatchEvent(
+          new CustomEvent("section-activated", {
+            detail: { sectionId: activeItem.sec },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    }
+    this._activeSecIndex = newActiveIndex;
+  }
+  render() {
+    return html`
+      <nav
+        class="menu-container"
+        aria-label="${msg("Hauptnavigation", { id: "pd.menu.nav.aria" })}"
+      >
+        <slot name="slotLogo" @click="${this._logoClicked}"></slot>
+
+        <ul
+          id="${this._smallScreen ? "burger-menu-list" : ""}"
+          class="${classMap({
+      "menu-ul": true,
+      "burger-ul": this._smallScreen,
+      "burger-open": this._activeBurgerMenu
+    })}"
+          role="menubar"
+        >
+          ${this._renderItems(
+      this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems,
+      true
+    )}
+        </ul>
+
+        ${!this._smallScreen ? html`
+              <ul class="menu-ul topMenu" role="menubar">
+                ${this._renderItems(this.topMenuItems, false)}
+                ${this.locales.length > 1 ? html`
+                      <pd-button-select-group
+                        class="locale-selector"
+                        .options="${this.locales}"
+                        .initValue="${this._getSelectedLocaleIndex()}"
+                        group-label="${msg("Sprache auswählen", {
+      id: "pd.menu.locale.aria"
+    })}"
+                        @pd-button-selection-changed="${this._handleLocaleChange}"
+                      ></pd-button-select-group>
+                    ` : ""}
+              </ul>
+            ` : html`
+              <div class="menu-wrapper">
+                ${this.locales.length > 1 ? html`
+                      <pd-button-select-group
+                        class="locale-selector"
+                        .options="${this._getCompactLocales()}"
+                        .initValue="${this._getSelectedLocaleIndex()}"
+                        group-label="${msg("Sprache auswählen", {
+      id: "pd.menu.locale.aria"
+    })}"
+                        @pd-button-selection-changed="${this._handleLocaleChange}"
+                      ></pd-button-select-group>
+                    ` : ""}
+                <div
+                  class="burger-menu"
+                  role="button"
+                  tabindex="0"
+                  aria-expanded="${this._activeBurgerMenu}"
+                  aria-controls="burger-menu-list"
+                  aria-label="${msg("Menü öffnen", {
+      id: "pd.menu.burger.aria"
+    })}"
+                  @click="${this._toggleBurgerMenu}"
+                  @keydown="${this._handleBurgerKeydown}"
+                >
+                  <pd-icon
+                    class="burgerLogo"
+                    icon="${pdIcons.ICON_BURGER_MENU}"
+                    ?activeIcon="${!this._activeBurgerMenu}"
+                  ></pd-icon>
+                </div>
+              </div>
+            `}
+      </nav>
+    `;
+  }
+  _renderItems(items, highlight) {
+    return html`
+      ${items.map(
+      (item, index) => html`
+          <li
+            class="item menu-li ${this._smallScreen ? "burger-li burger-item" : ""}
+            ${highlight && (this._activeSecIndex === index + 1 || item.route === this.activeRoute) ? "active" : ""}"
+            role="menuitem"
+            tabindex="0"
+            data-key="${item.key}"
+            @click="${this._menuItemClicked}"
+            @keydown="${this._handleMenuItemKeydown}"
+          >
+            ${item.icon ? html`<pd-icon
+                  class="topItemLogo"
+                  icon="${item.icon}"
+                ></pd-icon>` : ""}
+            ${item.name}
+          </li>
+        `
+    )}
+    `;
+  }
+  /**
+   * Handles keyboard events on menu items.
+   */
+  _handleMenuItemKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._menuItemClicked(e);
+    }
+  }
+  /**
+   * Handles keyboard events on burger menu toggle.
+   */
+  _handleBurgerKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._toggleBurgerMenu();
+    } else if (e.key === "Escape" && this._activeBurgerMenu) {
+      e.preventDefault();
+      this._activeBurgerMenu = false;
+    }
+  }
+  _toggleBurgerMenu() {
+    this._activeBurgerMenu = !this._activeBurgerMenu;
+  }
+  /**
+   * Returns the index of the currently selected locale in the locales array.
+   */
+  _getSelectedLocaleIndex() {
+    return this.locales.findIndex((l) => l.value === this.selectedLocale);
+  }
+  /**
+   * Returns compact locale options for mobile display.
+   * Uses shortText if available, otherwise falls back to text.
+   */
+  _getCompactLocales() {
+    return this.locales.map((l) => ({
+      ...l,
+      text: l.shortText ?? l.text
+    }));
+  }
+  /**
+   * Handles locale selection change from PdButtonSelectGroup.
+   */
+  _handleLocaleChange(e) {
+    const index = e.detail.selected;
+    const localeValue = this.locales[index]?.value;
+    if (localeValue && localeValue !== this.selectedLocale) {
+      this.dispatchEvent(
+        new CustomEvent("locale-change", {
+          detail: localeValue,
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  _menuItemClicked(e) {
+    const key = e.target.dataset.key;
+    const item = [...this.menuItems, ...this.topMenuItems].find(
+      (i) => i.key === key
+    );
+    if (!item) return;
+    if (item.sec && item.ref) {
+      this.dispatchEvent(
+        new CustomEvent("route-event", {
+          detail: { el: item.ref },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } else if (item.route && item.sec) {
+      this.dispatchEvent(
+        new CustomEvent("route-event", {
+          detail: {
+            route: item.route,
+            sectionId: item.sec
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } else if (item.route) {
+      this.dispatchEvent(
+        new CustomEvent("route-event", {
+          detail: { route: item.route },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } else if (item.action) {
+      item.action();
+    }
+    if (this._activeBurgerMenu) {
+      this._activeBurgerMenu = false;
+    }
+  }
+  _logoClicked() {
+    PdMenu._scrollToTop();
+    if (this.logoRoute) {
+      this.dispatchEvent(
+        new CustomEvent("route-event", {
+          detail: {
+            route: this.logoRoute
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  static _scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+};
+PdMenu.styles = [
+  css`
       :host {
         display: block;
         position: relative;
         height: var(--pd-menu-height, 100px);
         background-color: var(--pd-menu-bg-col, var(--pd-default-col));
-        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
-
+        box-shadow: var(--pd-menu-shadow, var(--pd-shadow-lg));
+        border-radius: var(--pd-menu-border-radius, 0);
         /*
         Add into component, before styled from outside by using element
         removed fixed again => not fit for the teaser, custom properties possible, but now handle this in SPAHelper header element
@@ -51,15 +336,24 @@ const _PdMenu = class _PdMenu extends LitElement {
         */
       }
 
+      /* Remove border-radius, shadow when burger menu is expanded */
+      :host([burger-open]) {
+        box-shadow: none;
+        border-radius: 0;
+      }
+
       .menu-container {
         height: 100%;
-        padding-left: 10px;
-        padding-right: 10px;
+        padding-left: var(--pd-spacing-md, 1rem);
+        padding-right: var(--pd-spacing-md, 1rem);
         display: flex;
         justify-content: space-between;
         align-items: center;
         white-space: nowrap;
-        max-width: var(--pd-menu-wax-width, 1170px);
+        max-width: var(
+          --pd-menu-max-width,
+          var(--pd-content-max-width, 1170px)
+        );
         margin: 0 auto;
       }
 
@@ -77,44 +371,19 @@ const _PdMenu = class _PdMenu extends LitElement {
         z-index: -1;
         position: absolute;
         flex-direction: column;
+        align-items: stretch; /* Override .menu-ul center, stretch children to full width */
         top: calc(var(--pd-menu-height, 100px) * -1);
-        right: 0px;
-        background-color: var(
-          --pd-menu-burger-bg-col,
-          var(--pd-default-light-col)
-        );
-
-        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
-        border-bottom: var(--pd-menu-burger-bottomborder);
-        padding: var(--pd-menu-burger-padding, 0);
-        width: 100%;
-        -moz-border-radius: var(--pd-border-radius);
-        border-radius: var(--pd-border-radius);
-
-        transition: 0.5s;
-        transition-timing-function: ease-out;
-
-        transform: translateY(0);
-        opacity: 0;
-      }
-
-      .locale-ul {
-        visibility: hidden;
-        position: absolute;
-        flex-direction: column;
-        top: 10px;
-        right: 15px;
-        z-index: 100;
+        left: 0;
+        right: 0;
         background-color: var(
           --pd-menu-burger-bg-col,
-          var(--pd-default-light-col)
+          var(--pd-default-bg-col)
         );
 
-        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
+        box-shadow: var(--pd-shadow-xl);
         border-bottom: var(--pd-menu-burger-bottomborder);
-        padding: var(--pd-menu-burger-padding, 0);
-        -moz-border-radius: var(--pd-border-radius);
-        border-radius: var(--pd-border-radius);
+        padding: var(--pd-spacing-sm, 0.5rem) 0;
+        border-radius: 0 0 var(--pd-radius-lg) var(--pd-radius-lg);
 
         transition: 0.5s;
         transition-timing-function: ease-out;
@@ -123,41 +392,34 @@ const _PdMenu = class _PdMenu extends LitElement {
         opacity: 0;
       }
 
-      :host([_activeBurgerMenu]) .burger-ul {
+      .burger-ul.burger-open {
         visibility: visible;
         opacity: 1;
         top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
         transition-timing-function: ease-in;
       }
 
-      :host([_activeLocaleMenu]) .locale-ul {
-        visibility: visible;
-        opacity: 1;
-        top: 40px;
-        transition-timing-function: ease-in;
-      }
-
       .menu-li {
         display: flex;
         align-items: center;
         cursor: pointer;
-        border-radius: var(--pd-border-radius);
+        border-radius: var(--pd-radius-md);
       }
 
       .burger-li {
-        border-radius: var(--pd-border-radius);
-        align-self: justify;
-        width: 80%;
-        font-size: 90% !important;
-        height: 1rem;
+        border-radius: 0;
+        margin: 0;
+        border-bottom: 1px solid var(--pd-default-lightest-col);
+        transition: background-color 0.2s ease;
       }
 
-      .locale-li {
-        position: relative;
+      .burger-li:last-child {
+        border-bottom: none;
       }
 
       .burger-li:hover {
-        background-color: var(--pd-default-dark-col);
+        background-color: var(--pd-default-bg-light-col);
+        box-shadow: inset 4px 0 0 var(--pd-default-col);
       }
 
       .item {
@@ -172,11 +434,16 @@ const _PdMenu = class _PdMenu extends LitElement {
       }
 
       .burger-item {
-        color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
+        color: var(--pd-menu-burger-font-col, var(--pd-default-font-link-col));
+        font-size: var(--pd-default-font-content-size, 1rem);
+        font-weight: 500;
+        /* Override .item padding */
+        padding: 1.25rem var(--pd-spacing-lg, 2rem) 1.25rem 0.75rem;
       }
 
-      .locale-item {
-        padding-left: 1.5em;
+      .burger-item.active,
+      .burger-item:hover {
+        color: var(--pd-default-col);
       }
 
       .item.active,
@@ -205,8 +472,18 @@ const _PdMenu = class _PdMenu extends LitElement {
         pointer-events: none;
       }
 
+      .burger-li .topItemLogo {
+        --pd-icon-col: var(
+          --pd-menu-burger-font-col,
+          var(--pd-default-font-link-col)
+        );
+        --pd-icon-size: 1.2rem;
+        margin-right: 0.5rem;
+      }
+
       .burgerLogo {
-        --pd-icon-size: 2rem;
+        /* Match height of locale-selector button (min-height 44px) */
+        --pd-icon-size: 2.5rem;
         --pd-icon-bg-col: transparent;
         pointer-events: none;
       }
@@ -226,7 +503,7 @@ const _PdMenu = class _PdMenu extends LitElement {
         cursor: pointer;
 
         --pd-icon-col: var(--pd-default-hover-col);
-        --pd-icon-col-active: lightgrey;
+        --pd-icon-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
       }
 
       .burger-menu:hover {
@@ -234,239 +511,70 @@ const _PdMenu = class _PdMenu extends LitElement {
         --pd-icon-col-active: var(--pd-default-hover-col);
       }
 
-      .burger-menu .item {
-        padding: 0;
-        font-size: 1.5em;
-        transition: color ease 0.5s;
-      }
-
-      .burger-menu:hover .item {
-        color: var(--pd-default-hover-col);
-      }
-
       /* Doppelt zum logo-container, pd-logo sonst nicht mehr funktional
         */
       ::slotted(.logo) {
         width: 100%;
         max-width: var(--pd-menu-logo-maxwidth, 8rem);
         padding: var(--pd-menu-logo-padding, 2em);
-        width: 100%;
         fill: var(--pd-menu-logo-color, #067394);
         cursor: pointer;
       }
 
-      .locale-selection-logo {
-        --pd-icon-size: 0.8rem;
-        --pd-icon-bg-col: transparent;
-        --pd-icon-col: var(--pd-default-hover-col);
-        --pd-icon-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
-        margin-top: 2px;
-        pointer-events: none;
-      }
-    `
-    ];
-  }
-  firstUpdated() {
-    const updateActiveSection = (scrollPos) => {
-      let activeIndex = -1;
-      let closestDistance = scrollPos > 300 ? 5e3 : 300;
-      this.menuItems.forEach((item, index) => {
-        if (item.ref) {
-          const dist = Math.abs(item.ref.getBoundingClientRect().top);
-          if (dist < closestDistance) {
-            activeIndex = index;
-            closestDistance = dist;
-          }
-        }
-      });
-      this._activeSecIndex = activeIndex >= 0 ? activeIndex + 1 : 0;
-    };
-    let ticking = false;
-    document.addEventListener("scroll", () => {
-      const scrollY = window.scrollY;
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          updateActiveSection(scrollY);
-          ticking = false;
-        });
-        ticking = true;
+      /* Locale selector styling */
+      .locale-selector {
+        --pd-button-border-col: transparent;
+        --pd-button-bg-col: transparent;
+        --pd-button-font-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-button-bg-col-hover: var(--pd-menu-item-bg-hover-col);
+        --pd-button-scale: 0.8;
       }
-    });
-    installMediaQueryWatcher(`(max-width: 700px)`, (matches) => {
-      this._smallScreen = matches && !this.noBurgerMenu;
-    });
-  }
-  render() {
-    return html`
-      <div class="menu-container">
-        <slot name="slotLogo" @click="${this._logoClicked}"></slot>
 
-        <ul class="menu-ul ${this._smallScreen ? "burger-ul" : ""}">
-          ${this._renderItems(
-      this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems,
-      true,
-      this._smallScreen
-    )}
-        </ul>
+      /* Focus-visible styles for accessibility */
+      .menu-li:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-hover-col));
+        outline-offset: 2px;
+      }
 
-        ${!this._smallScreen ? html`
-              <ul class="menu-ul topMenu">
-                ${this._renderItems(this.topMenuItems, false)}
-                ${this.locales.length > 1 ? html`
-                      <li
-                        class="item menu-li locale-li"
-                        @click="${this._toggleLocaleSelection}"
-                      >
-                        ${this.selectedLocale}
-                        <pd-icon
-                          class="locale-selection-logo"
-                          icon="${pdIcons.ICON_TOOGLE_ARROW}"
-                          ?activeIcon="${!this._activeLocaleMenu}"
-                        ></pd-icon>
-                        <ul class="menu-ul locale-ul">
-                          ${this.locales.filter((l) => l !== this.selectedLocale).map(
-      (locale) => html`
-                                <li
-                                  class="item menu-li burger-li burger-item locale-item"
-                                  data-key="${locale}"
-                                  @click="${this._localeClicked}"
-                                >
-                                  ${locale}
-                                </li>
-                              `
-    )}
-                        </ul>
-                      </li>
-                    ` : ""}
-              </ul>
-            ` : html`
-              <div class="menu-wrapper">
-                <div class="burger-menu" @click="${this._toggleBurgerMenu}">
-                  <pd-icon
-                    class="burgerLogo"
-                    icon="${pdIcons.ICON_BURGER_MENU}"
-                    ?activeIcon="${!this._activeBurgerMenu}"
-                  ></pd-icon>
-                  <span class="item ${this._activeBurgerMenu ? "active" : ""}"
-                    >${msg("Menü", { id: "pd.menu.label" })}</span
-                  >
-                </div>
-              </div>
-            `}
-      </div>
-    `;
-  }
-  _renderItems(items, highlight, disableIcons = false) {
-    return html`
-      ${items.map(
-      (item, index) => html`
-          <li
-            class="item menu-li ${this._smallScreen ? "burger-li burger-item" : ""}
-            ${highlight && (this._activeSecIndex === index + 1 || item.route === this.activeRoute) ? "active" : ""}"
-            data-key="${item.key}"
-            @click="${this._menuItemClicked}"
-          >
-            ${item.icon && !disableIcons ? html`<pd-icon
-                  class="topItemLogo"
-                  icon="${item.icon}"
-                ></pd-icon>` : ""}
-            ${item.name}
-          </li>
-        `
-    )}
-    `;
-  }
-  _toggleBurgerMenu() {
-    this._activeBurgerMenu = !this._activeBurgerMenu;
-  }
-  _toggleLocaleSelection() {
-    this._activeLocaleMenu = !this._activeLocaleMenu;
-  }
-  _localeClicked(e) {
-    const locale = e.target.dataset.key;
-    this.dispatchEvent(new CustomEvent("locale-change", { detail: locale }));
-  }
-  _menuItemClicked(e) {
-    const key = e.target.dataset.key;
-    const item = [...this.menuItems, ...this.topMenuItems].find(
-      (i) => i.key === key
-    );
-    if (!item) return;
-    if (item.sec && item.ref) {
-      const rect = item.ref.getBoundingClientRect();
-      window.scrollBy({
-        top: rect.top - this.headerSize,
-        behavior: "smooth"
-      });
-    } else if (item.route) {
-      this.dispatchEvent(
-        new CustomEvent("route-event", {
-          detail: { route: item.route === "back" ? "" : item.route },
-          bubbles: true,
-          composed: true
-        })
-      );
-    } else if (item.action) {
-      item.action();
-    }
-    if (this._activeBurgerMenu) {
-      this._activeBurgerMenu = false;
-    }
-  }
-  _logoClicked() {
-    _PdMenu._scrollToTop();
-    if (this.logoRoute) {
-      this.dispatchEvent(
-        new CustomEvent("route-event", {
-          detail: {
-            route: this.logoRoute
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-  static _scrollToTop() {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
-};
+      .burger-menu:focus-visible {
+        outline: 2px solid var(--pd-focus-ring-col, var(--pd-default-hover-col));
+        outline-offset: 2px;
+        border-radius: var(--pd-radius-md);
+      }
+    `
+];
 __decorateClass([
   property({ type: String })
-], _PdMenu.prototype, "activeRoute");
+], PdMenu.prototype, "activeRoute", 2);
 __decorateClass([
   property({ type: String })
-], _PdMenu.prototype, "selectedLocale");
+], PdMenu.prototype, "selectedLocale", 2);
 __decorateClass([
   property({ type: String })
-], _PdMenu.prototype, "logoRoute");
+], PdMenu.prototype, "logoRoute", 2);
 __decorateClass([
   property({ type: Array })
-], _PdMenu.prototype, "locales");
+], PdMenu.prototype, "locales", 2);
 __decorateClass([
   property({ type: Array })
-], _PdMenu.prototype, "menuItems");
+], PdMenu.prototype, "menuItems", 2);
 __decorateClass([
   property({ type: Array })
-], _PdMenu.prototype, "topMenuItems");
+], PdMenu.prototype, "topMenuItems", 2);
 __decorateClass([
   property({ type: Boolean })
-], _PdMenu.prototype, "noBurgerMenu");
-__decorateClass([
-  property({ type: Number })
-], _PdMenu.prototype, "headerSize");
-__decorateClass([
-  state()
-], _PdMenu.prototype, "_activeSecIndex");
+], PdMenu.prototype, "noBurgerMenu", 2);
 __decorateClass([
   state()
-], _PdMenu.prototype, "_activeBurgerMenu");
+], PdMenu.prototype, "_activeSecIndex", 2);
 __decorateClass([
-  state()
-], _PdMenu.prototype, "_activeLocaleMenu");
+  property({ type: Boolean, reflect: true, attribute: "burger-open" })
+], PdMenu.prototype, "_activeBurgerMenu", 2);
 __decorateClass([
   state()
-], _PdMenu.prototype, "_smallScreen");
-let PdMenu = _PdMenu;
+], PdMenu.prototype, "_smallScreen", 2);
+PdMenu = __decorateClass([
+  localized()
+], PdMenu);
 
 export { PdMenu };