npm - @inera/ids-design - Versions diffs - 5.4.1 → 5.5.0 - Mend

@inera/ids-design 5.4.1 → 5.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/components/header-1177-pro/header-1177-pro-region-picker.css CHANGED Viewed

@@ -22,6 +22,230 @@
   }
 }
+.ids-header-1177-pro__items {
+  display: block;
+  margin-left: auto;
+}
+header.ids-header-1177-pro {
+  background: var(--IDS-COLOR-NEUTRAL-100);
+  position: relative;
+  z-index: 1;
+  border-top: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container {
+  padding: 0;
+  position: relative;
+  z-index: 2;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container {
+    box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+  max-width: var(--IDS__MAX-WIDTH);
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  min-height: 7.25rem;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+    padding: 0 1.25rem;
+    min-height: 3rem;
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
+  display: flex;
+  align-items: center;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
+  width: 6.438rem;
+  min-height: 2.5rem;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  margin-left: 1.25rem;
+  margin-right: 1.5rem;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
+    width: 2.563rem;
+    margin-left: 0;
+    margin-right: 0.75rem;
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a {
+  display: block;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus) {
+  display: block;
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
+  color: var(--IDS-COLOR-ACCENT-30);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  font-weight: 700;
+  font-size: 1.25rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  position: relative;
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+    min-height: 2rem;
+  }
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+    font-size: 0.875rem;
+  }
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+    min-height: 2rem;
+    left: -0.75rem;
+    content: "";
+    position: absolute;
+    display: block;
+    min-height: 4rem;
+    width: 0.063rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--IDS-COLOR-ACCENT-30);
+  }
+}
+@media (max-width: 1024px) and (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+    min-height: 2rem;
+  }
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
+    display: none;
+  }
+}
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
+  padding-right: 1.25rem;
+  gap: 2.5rem;
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner:not(.ids-header-1177-pro__items__item--mobile) {
+    gap: 0;
+    margin-right: 0;
+    padding-right: 0;
+  }
+}
+@media (max-width: 1024px) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) {
+    border-top: 0.25rem solid var(--IDS-COLOR-ACCENT-40);
+    box-shadow: none;
+  }
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container {
+  padding: 0;
+  position: relative;
+  z-index: 2;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+  max-width: var(--IDS__MAX-WIDTH);
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  min-height: 7.25rem;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
+  display: flex;
+  align-items: center;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
+  width: 6.438rem;
+  min-height: 2.5rem;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  margin-left: 1.25rem;
+  margin-right: 1.5rem;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a {
+  display: block;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo a:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo ::slotted([slot=logo]:focus) {
+  display: block;
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text {
+  color: var(--IDS-COLOR-ACCENT-30);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  font-weight: 700;
+  font-size: 1.25rem;
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+  position: relative;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
+  padding-right: 1.25rem;
+  gap: 2.5rem;
+}
+header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__container .ids-header-1177-pro__inner {
+  max-width: 100% !important;
+}
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker {
   background: none;
   color: inherit;
@@ -33,18 +257,32 @@
   font-size: 0.85rem !important;
   font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 2.5rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
 }
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
   display: none;
 }
+.ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
 .ids-header-1177-pro--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
   font-size: 0.875rem;
   display: flex;
@@ -74,18 +312,37 @@
   font-size: 0.85rem !important;
   font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 2.5rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker::before {
+    min-height: 2rem;
+  }
 }
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
   display: none;
 }
+.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
 .ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
   font-size: 0.875rem;
   display: flex;
@@ -129,18 +386,37 @@
   font-size: 0.85rem !important;
   font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 2.5rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
+}
+@media (max-width: 1024px) {
+  :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker::before {
+    min-height: 2rem;
+  }
 }
 :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
   display: none;
 }
+:host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
 :host .ids-header-1177-pro__nav:not(.ids-header-1177-pro__nav--unresponsive) button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
   font-size: 0.875rem;
   display: flex;
@@ -183,18 +459,32 @@
   font-size: 0.85rem !important;
   font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   color: var(--IDS-COLOR-ACCENT-40) !important;
-  max-height: 2.5rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding: 0 0.5rem;
+}
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker::before {
+  left: -1.5rem;
+  content: "";
+  position: absolute;
+  display: block;
+  min-height: 4rem;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--IDS-COLOR-ACCENT-30);
 }
 :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile {
   display: none;
 }
+:host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile::before {
+  display: none;
+}
 :host .ids-header-1177-pro__nav.ids-header-1177-pro__nav--unresponsive button.ids-header-1177-pro__region-picker.ids-header-1177-pro__region-picker--mobile .ids-header-1177-pro__region-picker__text {
   font-size: 0.875rem;
   display: flex;

package/components/header-1177-pro/header-1177-pro.css CHANGED Viewed

@@ -22,6 +22,11 @@
   }
 }
+.ids-header-1177-pro__items {
+  display: block;
+  margin-left: auto;
+}
 header.ids-header-1177-pro {
   background: var(--IDS-COLOR-NEUTRAL-100);
   position: relative;
@@ -44,32 +49,28 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
   margin-left: auto;
   margin-right: auto;
   width: 100%;
-  height: 7.25rem;
+  min-height: 7.25rem;
   position: relative;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  display: grid;
-  grid-template-columns: auto auto 1fr;
+  justify-content: space-between;
 }
 @media (max-width: 1024px) {
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner {
     padding: 0 1.25rem;
-    grid-template-columns: auto 1fr;
-    height: 3rem;
-  }
-  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner:has(.ids-header-1177-pro__items) {
-    grid-template-columns: auto 1fr;
+    min-height: 3rem;
   }
 }
 header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
-  display: grid;
+  display: flex;
   align-items: center;
-  grid-template-columns: auto auto;
 }
 header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
   width: 6.438rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -110,7 +111,7 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
   content: "";
   position: absolute;
   display: block;
-  height: 4rem;
+  min-height: 4rem;
   width: 0.063rem;
   top: 50%;
   transform: translateY(-50%);
@@ -118,23 +119,7 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
 }
 @media (max-width: 1024px) {
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
-    height: 2rem;
-  }
-}
-header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
-  right: -1.5rem;
-  content: "";
-  position: absolute;
-  display: block;
-  height: 4rem;
-  width: 0.063rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--IDS-COLOR-ACCENT-30);
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
-    height: 2rem;
+    min-height: 2rem;
   }
 }
 @media (max-width: 1024px) {
@@ -144,12 +129,12 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
     font-size: 0.875rem;
   }
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
-    height: 2rem;
+    min-height: 2rem;
     left: -0.75rem;
     content: "";
     position: absolute;
     display: block;
-    height: 4rem;
+    min-height: 4rem;
     width: 0.063rem;
     top: 50%;
     transform: translateY(-50%);
@@ -158,7 +143,7 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
 }
 @media (max-width: 1024px) and (max-width: 1024px) {
   header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::before {
-    height: 2rem;
+    min-height: 2rem;
   }
 }
 @media (max-width: 1024px) {
@@ -166,16 +151,14 @@ header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1
     display: none;
   }
 }
-header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items {
-  justify-self: end;
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  gap: 2.5rem;
+header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
   padding-right: 1.25rem;
+  gap: 2.5rem;
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items:not(.ids-header-1177-pro__items__item--mobile) {
+  header.ids-header-1177-pro:not(.ids-header-1177-pro--unresponsive) .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner:not(.ids-header-1177-pro__items__item--mobile) {
     gap: 0;
     margin-right: 0;
     padding-right: 0;
@@ -198,22 +181,22 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
   margin-left: auto;
   margin-right: auto;
   width: 100%;
-  height: 7.25rem;
+  min-height: 7.25rem;
   position: relative;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  display: grid;
-  grid-template-columns: auto auto 1fr;
+  justify-content: space-between;
 }
 header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col {
-  display: grid;
+  display: flex;
   align-items: center;
-  grid-template-columns: auto auto;
 }
 header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-col .ids-header-1177-pro__logo {
   width: 6.438rem;
-  height: 2.5rem;
+  min-height: 2.5rem;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -247,30 +230,17 @@ header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pr
   content: "";
   position: absolute;
   display: block;
-  height: 4rem;
-  width: 0.063rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--IDS-COLOR-ACCENT-30);
-}
-header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__logo-text::after {
-  right: -1.5rem;
-  content: "";
-  position: absolute;
-  display: block;
-  height: 4rem;
+  min-height: 4rem;
   width: 0.063rem;
   top: 50%;
   transform: translateY(-50%);
   background: var(--IDS-COLOR-ACCENT-30);
 }
-header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items {
-  justify-self: end;
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  gap: 2.5rem;
+header.ids-header-1177-pro.ids-header-1177-pro--unresponsive .ids-header-1177-pro__container .ids-header-1177-pro__inner .ids-header-1177-pro__items-inner {
+  align-self: center;
+  display: flex;
   padding-right: 1.25rem;
+  gap: 2.5rem;
 }
 header.ids-header-1177-pro.ids-header-1177-pro--fluid .ids-header-1177-pro__container .ids-header-1177-pro__inner {
   max-width: 100% !important;

package/components/header-inera/header-inera-nav-mobile-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button{background-color:transparent;border:0;height:1.563rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger{cursor:pointer;position:relative;transition:.2s;user-select:none}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines{background-color:var(--IDS-COLOR-PRIMARY-40);border-radius:.125rem;display:block;height:.188rem;position:relative;transition:.2s;width:1.3125rem;width:1.25rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:after,.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-PRIMARY-40);border-radius:.125rem;content:\"\";display:inline-block;height:.188rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:.2s;width:1.3125rem;width:1.25rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:before{top:.5rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:after{top:-.5rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.313rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:2rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__menu-items{box-shadow:0 .125rem .313rem #c5c5c5;left:0;position:absolute;right:0;top:100%;z-index:10}@media only screen and (min-width:1024px){.ids-header-inera-nav-mobile{display:none}}@media only screen and (max-width:1024px){.ids-header-inera-nav-mobile{display:block}.ids-header-inera-nav-mobile.ids-header-inera-nav-mobile--unresponsive{display:none}}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button{background-color:transparent;border:0;height:2rem;margin-top:.25rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger{cursor:pointer;position:relative;transition:all .2s;user-select:none}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines{background-color:var(--IDS-COLOR-PRIMARY-40);border-radius:.125rem;display:block;height:.188rem;position:relative;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:after,.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:before{background-color:var(--IDS-COLOR-PRIMARY-40);border-radius:.125rem;content:\"\";display:inline-block;height:.188rem;left:0;position:absolute;-webkit-transform-origin:.09375rem center;transform-origin:.09375rem center;-webkit-transform-origin:.13393rem center;transform-origin:.13393rem center;transition:all .2s;width:1.3125rem;width:1.25rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:before{top:.5rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:after{top:-.5rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines{background:transparent}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after,.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{left:-.1rem;top:0;-ms-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;width:1.5rem}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after{-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__menu-items{box-shadow:0 .125rem .313rem #c5c5c5;left:0;position:absolute;right:0;top:100%;z-index:10}@media only screen and (min-width:1024px){.ids-header-inera-nav-mobile{display:none}}@media only screen and (max-width:1024px){.ids-header-inera-nav-mobile{display:block}.ids-header-inera-nav-mobile.ids-header-inera-nav-mobile--unresponsive{display:none}}";
 var headerIneraNavMobileLit = css`${unsafeCSS(css_248z)}`;

package/components/header-inera/header-inera-nav-mobile.css CHANGED Viewed

@@ -25,14 +25,15 @@
 .ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button {
   border: 0;
   background-color: transparent;
-  height: 1.563rem;
+  height: 2rem;
+  margin-top: 0.25rem;
 }
 .ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger {
-  transition: 0.2s;
+  transition: all 0.2s;
   cursor: pointer;
   user-select: none;
   position: relative;
@@ -41,7 +42,7 @@
   display: block;
   width: 1.3125rem;
   border-radius: 0.125rem;
-  transition: 0.2s;
+  transition: all 0.2s;
   background-color: var(--IDS-COLOR-PRIMARY-40);
   position: relative;
   height: 0.188rem;
@@ -52,7 +53,7 @@
   display: inline-block;
   width: 1.3125rem;
   border-radius: 0.125rem;
-  transition: 0.2s;
+  transition: all 0.2s;
   background-color: var(--IDS-COLOR-PRIMARY-40);
   position: absolute;
   left: 0;
@@ -76,10 +77,6 @@
 .ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button .ids-hamburger__lines:after {
   top: -0.5rem;
 }
-.ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger {
-  -webkit-transform: scale3d(0.8, 0.8, 0.8);
-  transform: scale3d(0.8, 0.8, 0.8);
-}
 .ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
   background: transparent;
 }
@@ -88,8 +85,8 @@
   -webkit-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   top: 0;
-  width: 2rem;
-  left: -0.313rem;
+  width: 1.5rem;
+  left: -0.1rem;
 }
 .ids-header-inera-nav-mobile .ids-header-inera-nav-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
   -ms-transform: rotate(45deg);