@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

package/dist/collection/components/stzh-fieldset/stzh-fieldset.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -156,163 +159,229 @@
   border: 0 !important;
 }
 
+:host ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),
 :host ::slotted(.stzh-fieldset-row > stzh-input),
 :host ::slotted(stzh-input),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-dropdown),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),
 :host ::slotted(stzh-dropdown),
 :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(.stzh-fieldset-row > stzh-upload),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),
 :host ::slotted(stzh-upload),
 :host ::slotted(.stzh-fieldset-row > stzh-checkbox),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),
 :host ::slotted(stzh-checkbox),
 :host ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),
 :host ::slotted(stzh-checkboxgroup),
 :host ::slotted(.stzh-fieldset-row > stzh-radio),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),
 :host ::slotted(stzh-radio),
 :host ::slotted(.stzh-fieldset-row > stzh-radiogroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),
 :host ::slotted(stzh-radiogroup),
 :host ::slotted(.stzh-fieldset-row > stzh-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),
 :host ::slotted(stzh-row),
 :host ::slotted(.stzh-fieldset-row > stzh-vspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),
 :host ::slotted(stzh-vspace),
 :host ::slotted(.stzh-fieldset-row > stzh-hspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),
 :host ::slotted(stzh-hspace),
 :host ::slotted(.stzh-fieldset-row > stzh-text),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),
 :host ::slotted(stzh-text) {
   margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 900px) {
-  :host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),
 :host ::slotted(.stzh-fieldset-row > stzh-input),
 :host ::slotted(stzh-input),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-dropdown),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),
 :host ::slotted(stzh-dropdown),
 :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(.stzh-fieldset-row > stzh-upload),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),
 :host ::slotted(stzh-upload),
 :host ::slotted(.stzh-fieldset-row > stzh-checkbox),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),
 :host ::slotted(stzh-checkbox),
 :host ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),
 :host ::slotted(stzh-checkboxgroup),
 :host ::slotted(.stzh-fieldset-row > stzh-radio),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),
 :host ::slotted(stzh-radio),
 :host ::slotted(.stzh-fieldset-row > stzh-radiogroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),
 :host ::slotted(stzh-radiogroup),
 :host ::slotted(.stzh-fieldset-row > stzh-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),
 :host ::slotted(stzh-row),
 :host ::slotted(.stzh-fieldset-row > stzh-vspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),
 :host ::slotted(stzh-vspace),
 :host ::slotted(.stzh-fieldset-row > stzh-hspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),
 :host ::slotted(stzh-hspace),
 :host ::slotted(.stzh-fieldset-row > stzh-text),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),
 :host ::slotted(stzh-text) {
     margin-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
-  :host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+  :host ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row),
 :host ::slotted(.stzh-fieldset-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),
 :host ::slotted(.stzh-fieldset-row > stzh-input),
 :host ::slotted(stzh-input),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-datepicker),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(.stzh-fieldset-row > stzh-dropdown),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),
 :host ::slotted(stzh-dropdown),
 :host ::slotted(.stzh-fieldset-row > stzh-fieldset),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(.stzh-fieldset-row > stzh-upload),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),
 :host ::slotted(stzh-upload),
 :host ::slotted(.stzh-fieldset-row > stzh-checkbox),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),
 :host ::slotted(stzh-checkbox),
 :host ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),
 :host ::slotted(stzh-checkboxgroup),
 :host ::slotted(.stzh-fieldset-row > stzh-radio),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),
 :host ::slotted(stzh-radio),
 :host ::slotted(.stzh-fieldset-row > stzh-radiogroup),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),
 :host ::slotted(stzh-radiogroup),
 :host ::slotted(.stzh-fieldset-row > stzh-row),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),
 :host ::slotted(stzh-row),
 :host ::slotted(.stzh-fieldset-row > stzh-vspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),
 :host ::slotted(stzh-vspace),
 :host ::slotted(.stzh-fieldset-row > stzh-hspace),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),
 :host ::slotted(stzh-hspace),
 :host ::slotted(.stzh-fieldset-row > stzh-text),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),
 :host ::slotted(stzh-text) {
     margin-bottom: var(--stzh-space-medium);
   }
 }
+:host > .section > stzh-chipgroup, :host > stzh-chipgroup, :host > .section > stzh-chipselect, :host > stzh-chipselect {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (max-width: 899px) {
+  :host ::slotted(.stzh-fieldset-row > stzh-daterange),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-daterange),
+:host ::slotted(stzh-daterange) {
+    margin-bottom: calc(var(--stzh-fieldset-description-min-height) + var(--stzh-space-xsmall));
+  }
+}
 :host ::slotted(.stzh-fieldset-row > stzh-message),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),
 :host ::slotted(stzh-message) {
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(.stzh-fieldset-row > stzh-message),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),
 :host ::slotted(stzh-message) {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(.stzh-fieldset-row > stzh-message),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),
 :host ::slotted(stzh-message) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
 :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
   margin-top: var(--stzh-space-xlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-top: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 600px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(.stzh-fieldset-row > stzh-actions),
+:host ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),
 :host ::slotted(stzh-actions) {
     margin-bottom: var(--stzh-space-xbig);
   }
 }
-:host ::slotted(*) stzh-checkbox,
-:host ::slotted(*) stzh-radio {
+:host ::slotted(*) stzh-checkboxgroup stzh-checkbox,
+:host ::slotted(*) stzh-radiogroup stzh-radio {
   --stzh-description-min-height: none;
 }
 :host ::slotted(.stzh-fieldset-row > :last-child),
+:host ::slotted(.layout_column > .stzh-fieldset-row > :last-child),
 :host ::slotted(:last-child),
+:host ::slotted(.layout_column > .stzh-fieldset-row:has(cq) > :nth-last-child(2)),
 :host ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {
   margin-bottom: 0;
 }
 
 .stzh-fieldset {
-  --stzh-description-min-height: 1.375rem;
+  --stzh-description-min-height: var(--stzh-fieldset-description-min-height);
   margin: 0;
   padding: 0;
   border: none;

package/dist/collection/components/stzh-figure/stzh-figure.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-flyingfocus/stzh-flyingfocus.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-footer/stzh-footer.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-gallery/stzh-gallery.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -343,21 +346,16 @@
   }
 }
 .stzh-ghettobox__description:not(:empty) {
-  margin-bottom: var(--stzh-space-medium);
-}
-@media screen and (min-width: 600px) {
-  .stzh-ghettobox__description:not(:empty) {
-    margin-bottom: var(--stzh-space-large);
-  }
+  margin-bottom: var(--stzh-space-small);
 }
 @media screen and (min-width: 900px) {
   .stzh-ghettobox__description:not(:empty) {
-    margin-bottom: var(--stzh-space-xlarge);
+    margin-bottom: var(--stzh-space-medium);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-ghettobox__description:not(:empty) {
-    margin-bottom: var(--stzh-space-xxlarge);
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-ghettobox__button {

package/dist/collection/components/stzh-header/stzh-header.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -208,7 +211,7 @@
   /* Has empty metabar */
   /* Metabar Stay */
   /* Fixed variant (as soon as header is passed) */
-  /* Sticky variant */
+  /* Sticky (transition) variant */
   /* Sticky disabled */
   /* Sticky always */
   /* Flyout open */
@@ -1151,11 +1154,11 @@
     transition-duration: var(--stzh-base-transition-animation-speed);
   }
 }
-.stzh-header--is-sticky .stzh-header__logobar {
+.stzh-header--is-sticky-transition .stzh-header__logobar {
   transition-property: opacity, visibility;
   transition-duration: var(--stzh-base-transition-animation-speed);
 }
-.stzh-header--is-sticky .stzh-header__inner, .stzh-header--is-sticky .stzh-header__main {
+.stzh-header--is-sticky-transition .stzh-header__inner, .stzh-header--is-sticky-transition .stzh-header__main {
   transition-property: transform, margin-top;
   transition-duration: var(--stzh-base-transition-animation-speed);
 }
@@ -1201,10 +1204,10 @@
   visibility: hidden;
   opacity: 0;
 }
-.stzh-header--sticky-always .stzh-header__inner, .stzh-header--sticky-always .stzh-header__main {
+.stzh-header--sticky-always-full .stzh-header__inner, .stzh-header--sticky-always-full .stzh-header__main {
   margin-top: 0px;
 }
-.stzh-header--sticky-always .stzh-header__logobar {
+.stzh-header--sticky-always-full .stzh-header__logobar {
   visibility: visible;
   opacity: 1;
 }

package/dist/collection/components/stzh-header/stzh-header.js

@@ -8,6 +8,8 @@ const CLASS_BODY_OPEN = "stzh-header-open";
 // for flyout a11y see also: https://www.w3.org/WAI/tutorials/menus/flyout/
 /**
  * @slot logo - Slot for brand logo
+ * @slot menu-before - Slot for custom elements before other menu elements
+ * @slot menu-after - Slot for custom elements after other menu elements
  * @slot metanav-before - Slot for custom elements before other metanav elements
  * @slot metanav-after - Slot for custom elements after other metanav elements
  */
@@ -46,12 +48,21 @@ export class StzhHeader {
       this.updatePosition();
     };
     this.handleMetanavItemClick = (event, item) => {
+      this.flyoutOpen = false;
       this.stzhMetanavItemClick.emit({
         component: "stzh-header",
         item,
         originalEvent: event,
       });
     };
+    this.handleMenuItemClick = (event, item) => {
+      this.flyoutOpen = false;
+      this.stzhMenuItemClick.emit({
+        component: "stzh-header",
+        item,
+        originalEvent: event,
+      });
+    };
     this.handleSearchInput = (event) => {
       this.searchValue = this.searchInput.value;
       this.stzhSearchChange.emit({
@@ -184,35 +195,43 @@ export class StzhHeader {
     if (this.flyoutOpen) {
       return;
     }
-    if (this.sticky === "disabled") {
+    const activateSticky = () => {
+      this.stickyActive = true;
+      document.documentElement.style.setProperty('--stzh-header-is-stuck', '1');
+      document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '0');
+    };
+    const disableSticky = () => {
       document.documentElement.style.setProperty('--stzh-header-is-stuck', '0');
       document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '1');
       this.stickyActive = false;
-      return;
+    };
+    if (this.sticky === "disabled") {
+      disableSticky();
     }
-    if (this.sticky === "always") {
-      document.documentElement.style.setProperty('--stzh-header-is-stuck', '1');
-      document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '0');
-      this.stickyActive = true;
-      return;
+    else if (this.sticky === "always-full") {
+      activateSticky();
     }
-    if (this.scrollingUp && this.belowStayStickyPoint) {
-      if (!this.stickyActive && this.belowStartStickyPoint) {
-        this.stickyActive = true;
-        document.documentElement.style.setProperty('--stzh-header-is-stuck', '1');
-        document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '0');
+    else if (this.sticky === "always") {
+      if (this.belowStayStickyPoint) {
+        activateSticky();
+      }
+      else {
+        disableSticky();
       }
     }
     else {
-      if (this.stickyActive && this.belowStayStickyPoint) {
-        document.documentElement.style.setProperty('--stzh-header-is-stuck', '0');
-        document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '1');
-        this.stickyActive = false;
+      if (this.scrollingUp && this.belowStayStickyPoint) {
+        if (!this.stickyActive && this.belowStartStickyPoint) {
+          activateSticky();
+        }
       }
       else {
-        document.documentElement.style.setProperty('--stzh-header-is-stuck', '0');
-        document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '1');
-        this.stickyActive = false;
+        if (this.stickyActive && this.belowStayStickyPoint) {
+          disableSticky();
+        }
+        else {
+          disableSticky();
+        }
       }
     }
   }
@@ -228,9 +247,10 @@ export class StzhHeader {
       this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;
       this.fixed = this.belowStartStickyPoint
         || (this.scrollingUp && this.belowStayStickyPoint && this.stickyActive)
-        || this.sticky === "always";
+        || (this.sticky === "always" && this.belowStayStickyPoint)
+        || this.sticky === "always-full";
       this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;
-      this.hideLogo = this.sticky !== "always" && this.isMedium && this.headerOverlap > 1;
+      this.hideLogo = this.sticky !== "always-full" && this.isMedium && this.headerOverlap > 1;
     });
     writeTask(() => {
       this.updatePosition();
@@ -266,10 +286,10 @@ export class StzhHeader {
     }
   }
   getSiblings() {
-    if (!this.parentElement) {
+    if (!this._parentElement) {
       return [];
     }
-    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
+    return Array.from(this._parentElement.children).filter((child) => child !== this.element);
   }
   disableSiblings() {
     this.getSiblings().forEach((sibling) => {
@@ -401,7 +421,7 @@ export class StzhHeader {
     }
   }
   connectedCallback() {
-    this.parentElement = this.element.parentElement;
+    this._parentElement = this.element.parentElement;
     this.resizeObserver = new ResizeObserver(this.handleResize);
     this.resizeObserver.observe(this.element);
   }
@@ -422,6 +442,7 @@ export class StzhHeader {
       "stzh-header--is-fixed": this.fixed,
       "stzh-header--is-fixed-transition": this.fixedTransition,
       "stzh-header--is-sticky": this.stickyActive,
+      "stzh-header--is-sticky-transition": this.stickyActive && this.fixedTransition,
       "stzh-header--hide-logo": this.hideLogo,
       "stzh-header--has-empty-metabar-mobile": !metanavBeforeUsed && !metanavAfterUsed
         && this._metanavItems.filter(item => item.stay || item.stayAndShowInMobileMenu).length === 0
@@ -449,9 +470,9 @@ export class StzhHeader {
         h("span", { class: "stzh-header__metanav-icon-wrapper" }, item.icon && h("stzh-icon", { class: `stzh-header__metanav-icon ${item.iconOpen ? 'is-close' : ''}`, name: item.icon }), item.iconOpen && h("stzh-icon", { class: "stzh-header__metanav-icon is-open", name: item.iconOpen }), (item.badge || item.badgeEmpty) &&
           h("stzh-badge", { class: "stzh-header__metanav-icon-badge", label: item.badge, type: typeof item.badgeType === "undefined" ? "error" : item.badgeType }))));
     };
-    return (h(Host, null, h("header", { class: classes }, h("div", { class: "stzh-header__header", style: { paddingTop: `${this.paddingTop}px` } }, h("div", { class: "stzh-header__inner" }, h("div", { class: "stzh-header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "stzh-header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "stzh-header__logobar-logo" }, h("a", { href: this.href, class: "stzh-header__logo-link", "s-object-id": this.logoAnalyticsId || "Header Logo" }, h("slot", { name: "logo" }))), h("div", { class: "stzh-header__logobar-decoration" })), h("div", { class: "stzh-header__metabar", ref: (el) => (this.metabarElement = el) }, h("div", { class: "stzh-header__metabar-inner" }, this._menuItems.length > 0 &&
+    return (h(Host, null, h("header", { class: classes }, h("div", { class: "stzh-header__header", style: { paddingTop: `${this.paddingTop}px` } }, h("div", { class: "stzh-header__inner" }, h("div", { class: "stzh-header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "stzh-header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "stzh-header__logobar-logo" }, h("a", { href: this.href, class: "stzh-header__logo-link", "s-object-id": this.logoAnalyticsId || "Header Logo" }, h("slot", { name: "logo" }))), h("div", { class: "stzh-header__logobar-decoration" })), h("div", { class: "stzh-header__metabar", ref: (el) => (this.metabarElement = el) }, h("div", { class: "stzh-header__metabar-inner" }, h("slot", { name: "menu-before" }), this._menuItems.length > 0 &&
       h("button", { id: this.menuId, class: `stzh-header__burger ${this.flyoutOpen && !this.flyoutOpenedByMetanavItem && "is-open"}`, onClick: this.handleBurgerClick }, h("stzh-icon", { class: "stzh-header__burger-icon is-close", name: "menu" }), h("stzh-icon", { class: "stzh-header__burger-icon is-open", name: "close" }), h("div", { class: "stzh-header__burger-text" }, this.localization.menuLabel)), this.searchAction &&
-      h("form", { class: "stzh-header__metabar-search", action: this.searchAction, role: "search" }, h("label", { class: "stzh-header__search" }, h("input", { id: this.searchId, ref: (el) => (this.searchInput = el), class: "stzh-header__search-input", type: "search", name: this.searchFieldName, onChange: this.handleSearchChange, onInput: this.handleSearchInput }), h("stzh-icon", { class: "stzh-header__search-icon", name: "search" }), h("div", { class: "stzh-header__search-text" }, this.localization.searchLabel))), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId }, h("slot", { name: "metanav-before" }), this._metanavItems.map((item) => {
+      h("form", { class: "stzh-header__metabar-search", action: this.searchAction, role: "search" }, h("label", { class: "stzh-header__search" }, h("input", { id: this.searchId, ref: (el) => (this.searchInput = el), class: "stzh-header__search-input", type: "search", name: this.searchFieldName, onChange: this.handleSearchChange, onInput: this.handleSearchInput }), h("stzh-icon", { class: "stzh-header__search-icon", name: "search" }), h("div", { class: "stzh-header__search-text" }, this.localization.searchLabel))), h("slot", { name: "menu-after" }), h("div", { class: "stzh-header__metabar-nav", id: this.metanavId }, h("slot", { name: "metanav-before" }), this._metanavItems.map((item) => {
       var _a, _b;
       return (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 || item.itemButton)
         ?
@@ -518,8 +539,8 @@ export class StzhHeader {
                 ? () => this.closeMenuItem()
                 : (e) => this.openMenuItem(e, item) }, item.label)
           :
-            h("a", { href: item.href, class: "stzh-header__menu-item is-level-1" }, item.label), ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-          h("ul", { id: item.id, class: "stzh-header__menu-list is-level-2", onFocusout: this.handleMenuListFocusout }, h("li", { class: "stzh-header__menu-list-item is-backlink" }, h("button", { class: "stzh-header__menu-item is-level-2 is-backlink", onClick: () => this.closeMenuItem() }, h("stzh-icon", { name: "angle-left" }), h("span", null, this.menuBackLabel ? this.menuBackLabel : this.localization.menuBackLabel))), h("li", { class: "stzh-header__menu-list-item" }, h("a", { href: item.href, class: "stzh-header__menu-item is-level-2 is-main" }, item.label)), item.items.map((item) => h("li", { class: "stzh-header__menu-list-item" }, h("a", { href: item.href, class: "stzh-header__menu-item is-level-2" }, item.label)))));
+            h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e, item), class: "stzh-header__menu-item is-level-1" }, item.label), ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+          h("ul", { id: item.id, class: "stzh-header__menu-list is-level-2", onFocusout: this.handleMenuListFocusout }, h("li", { class: "stzh-header__menu-list-item is-backlink" }, h("button", { class: "stzh-header__menu-item is-level-2 is-backlink", onClick: () => this.closeMenuItem() }, h("stzh-icon", { name: "angle-left" }), h("span", null, this.menuBackLabel ? this.menuBackLabel : this.localization.menuBackLabel))), h("li", { class: "stzh-header__menu-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e, item), class: "stzh-header__menu-item is-level-2 is-main" }, item.label)), item.items.map((item) => h("li", { class: "stzh-header__menu-list-item" }, h("a", { href: item.href, onClick: (e) => this.handleMenuItemClick(e, item), class: "stzh-header__menu-item is-level-2" }, item.label)))));
       }))), (((_d = this._metanavItems) === null || _d === void 0 ? void 0 : _d.length) > 0 || ((_e = this._languages) === null || _e === void 0 ? void 0 : _e.length) > 0) &&
         h("div", { class: "stzh-header__menu-metanav" }, h("nav", { class: "stzh-header__menu-metanav-nav" }, h("ul", { class: "stzh-header__menu-metanav-list is-level-1" }, this._metanavItems.map((item) => {
           var _a, _b, _c;
@@ -905,8 +926,8 @@ export class StzhHeader {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"disabled\" | \"always\"",
-          "resolved": "\"always\" | \"default\" | \"disabled\"",
+          "original": "\"default\" | \"disabled\" | \"always-full\" | \"always\"",
+          "resolved": "\"always\" | \"always-full\" | \"default\" | \"disabled\"",
           "references": {}
         },
         "required": false,
@@ -975,6 +996,27 @@ export class StzhHeader {
             }
           }
         }
+      }, {
+        "method": "stzhMenuItemClick",
+        "name": "stzhMenuItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Metanav item click event"
+        },
+        "complexType": {
+          "original": "StzhHeaderMenuItemClickEvent",
+          "resolved": "{ component: \"stzh-header\"; item: StzhHeaderMenuItem; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhHeaderMenuItemClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhHeaderMenuItemClickEvent"
+            }
+          }
+        }
       }, {
         "method": "stzhLanguageChange",
         "name": "stzhLanguageChange",