@asante-org/leybold-design-system 1.3.0 → 1.3.2

package/dist/index.esm.scss

@@ -565,7 +565,6 @@
 .Button-module__button--disabled___IuOY8 {
   opacity: 0.5;
   cursor: not-allowed;
-  pointer-events: none;
 }
 .Button-module__button__icon___hlcHo {
   display: inline-flex;
@@ -580,6 +579,236 @@
 .Button-module__button__icon--right___-pGHl {
   order: 1;
 }
+.Image-module__imageContainer___iD5Kd {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 0.25rem;
+}
+.Image-module__imageContainer___iD5Kd.Image-module__loading___Sh1zO .Image-module__image___1pa50 {
+  opacity: 0;
+}
+.Image-module__imageContainer___iD5Kd.Image-module__error___0LGZ2 .Image-module__image___1pa50 {
+  display: none;
+}
+
+.Image-module__image___1pa50 {
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.Image-module__skeleton___0bGS6 {
+  position: absolute;
+  inset: 0;
+  background-color: #e5e7eb;
+  overflow: hidden;
+}
+
+.Image-module__shimmer___aanrl {
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: Image-module__shimmer___aanrl 1.5s infinite;
+}
+
+@keyframes Image-module__shimmer___aanrl {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.Image-module__errorState___TjV-8 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: #f9fafb;
+  color: #9ca3af;
+}
+
+.Image-module__errorIcon___QCKvj {
+  width: 2rem;
+  height: 2rem;
+  opacity: 0.6;
+}
+
+.Image-module__errorText___Q8pnb {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.Image-module__imageContainer___iD5Kd[style*="aspect-ratio: 1"] {
+  aspect-ratio: 1/1;
+}
+.Image-module__imageContainer___iD5Kd[style*="aspect-ratio: 16"] {
+  aspect-ratio: 16/9;
+}
+.Image-module__imageContainer___iD5Kd[style*="aspect-ratio: 4"] {
+  aspect-ratio: 4/3;
+}
+
+.Image-module__imageContainer___iD5Kd:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+:root {
+  --leybold-red: #e2001a;
+  --leybold-black: #000000;
+  --leybold-white: #ffffff;
+  --leybold-blue-grey: #546672;
+  --leybold-white-aluminium: #dae0e3;
+  --leybold-window-gray: #99a1ab;
+  --leybold-light-grey: #c5c7c4;
+  --leybold-very-light-grey: #f5f5f5;
+  --leybold-slate-gray: #4a4e54;
+  --leybold-anthracite-gray: #383e42;
+  --leybold-orange: #d18e56;
+  --leybold-yellow: #edd163;
+  --leybold-green: #6ea67b;
+  --leybold-purple: #732d5d;
+  --leybold-purple-gray: #945e67;
+  --leybold-blue: #2b4679;
+  --leybold-light-blue: #3f6a98;
+  --leybold-blue-green: #39788e;
+  --leybold-green-gray: #6d8f9f;
+  --color-primary: #e2001a;
+  --color-secondary: #546672;
+  --color-success: #6ea67b;
+  --color-danger: #e2001a;
+  --color-warning: #d18e56;
+  --color-info: #3f6a98;
+  --text-primary: #000000;
+  --text-secondary: #4a4e54;
+  --text-muted: #99a1ab;
+  --text-inverse: #ffffff;
+  --bg-primary: #ffffff;
+  --bg-secondary: #dae0e3;
+  --bg-dark: #383e42;
+  --border-color: #c5c7c4;
+  --border-color-dark: #4a4e54;
+  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --h1-mobile-size: 32px;
+  --h1-mobile-line-height: 1.2;
+  --h2-mobile-size: 24px;
+  --h2-mobile-line-height: 1.2;
+  --h3-mobile-size: 18px;
+  --h3-mobile-line-height: 1.6;
+  --h4-mobile-size: 16px;
+  --h4-mobile-line-height: 1.55;
+  --h5-mobile-size: 14px;
+  --h5-mobile-line-height: 1.5;
+  --body-mobile-size: 14px;
+  --body-mobile-line-height: 1.5;
+  --h1-desktop-size: 55px;
+  --h1-desktop-line-height: 1.15;
+  --h1-desktop-letter-spacing: -0.02em;
+  --h2-desktop-size: 40px;
+  --h2-desktop-line-height: 1.2;
+  --h2-desktop-letter-spacing: -0.01em;
+  --h3-desktop-size: 32px;
+  --h3-desktop-line-height: 1.2;
+  --h4-desktop-size: 24px;
+  --h4-desktop-line-height: 1.2;
+  --h5-desktop-size: 18px;
+  --h5-desktop-line-height: 1.6;
+  --body-desktop-size: 18px;
+  --body-desktop-line-height: 1.6;
+  --text-lg-size: 27px;
+  --text-lg-line-height: 1.4;
+  --text-xl-size: 36px;
+  --text-xl-line-height: 1.4;
+  --text-xxl-size: 64px;
+  --text-xxl-line-height: 1;
+}
+
+.CarouselCard-module__carouselCard___7SltX {
+  display: block;
+  position: relative;
+  text-decoration: none;
+  height: 341px;
+  overflow: visible;
+}
+@media (min-width: 768px) {
+  .CarouselCard-module__carouselCard___7SltX {
+    height: 297px;
+  }
+}
+.CarouselCard-module__carouselCard___7SltX:focus-visible {
+  outline: 2px solid #000000;
+  outline-offset: 2px;
+}
+.CarouselCard-module__carouselCard___7SltX:hover .CarouselCard-module__carouselCard__content___SEDzm {
+  box-shadow: 3px 6px 12px -3px rgba(0, 0, 0, 0.4);
+}
+.CarouselCard-module__carouselCard___7SltX:hover .CarouselCard-module__carouselCard__linkText___fe3NV {
+  text-decoration: underline;
+}
+.CarouselCard-module__carouselCard___7SltX:hover .CarouselCard-module__carouselCard__icon___sQ26Z {
+  transform: translateX(16px);
+}
+.CarouselCard-module__carouselCard___7SltX:focus-visible .CarouselCard-module__carouselCard__icon___sQ26Z {
+  transform: translateX(16px);
+}
+
+.CarouselCard-module__carouselCard__imageWrapper___i-uYe {
+  position: relative;
+  width: 100%;
+  height: 245px;
+  overflow: hidden;
+}
+@media (min-width: 768px) {
+  .CarouselCard-module__carouselCard__imageWrapper___i-uYe {
+    height: 216px;
+  }
+}
+
+.CarouselCard-module__carouselCard__content___SEDzm {
+  position: absolute;
+  left: 20px;
+  bottom: 0;
+  width: calc(100% - 40px);
+  max-width: 300px;
+  background-color: #ffffff;
+  padding: 24px;
+  box-shadow: 3px 6px 8px -5px rgba(0, 0, 0, 0.3);
+  transition: box-shadow 0.2s ease-in-out;
+}
+@media (min-width: 768px) {
+  .CarouselCard-module__carouselCard__content___SEDzm {
+    padding-left: 20px;
+    max-width: 382px;
+  }
+}
+
+.CarouselCard-module__carouselCard__title___PN7o3 {
+  font-family: var(--font-family-base);
+  font-weight: 700;
+  font-size: var(--h5-desktop-size);
+  line-height: 1.6;
+  color: #4a4e54;
+  margin: 0 0 8px;
+}
+
+.CarouselCard-module__carouselCard__linkText___fe3NV {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 44px;
+  color: #e2001a;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.CarouselCard-module__carouselCard__icon___sQ26Z {
+  display: inline-flex;
+  transition: transform 0.2s ease-in-out;
+}
 :root {
   --leybold-red: #e2001a;
   --leybold-black: #000000;
@@ -918,7 +1147,7 @@
   font-size: var(--h4-mobile-size);
   font-weight: 400;
   line-height: 1.5;
-  color: #99a1ab;
+  color: var(--leybold-white-aluminium);
   text-decoration: none;
 }
 .Footer-module__footer__link___G5HPW:hover, .Footer-module__footer__link--hover___5PxzS {
@@ -1421,6 +1650,13 @@
   outline: 1px solid black;
   outline-offset: 1px;
 }
+.ProductCardHorizontal-module__productCard___Nl4jK {
+  /* When the card is rendered inside instant-search results, it also receives a global
+     `search-result` (or `search-results`) class. Remove the wrapper shadow in that case. */
+}
+.ProductCardHorizontal-module__productCard___Nl4jK.search-result > div, .ProductCardHorizontal-module__productCard___Nl4jK.search-results > div {
+  box-shadow: none !important;
+}
 
 .ProductCardHorizontal-module__productWrapper___gs8fn {
   display: flex;
@@ -1565,84 +1801,6 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   color: #e2001a;
   flex-shrink: 0;
 }
-.Image-module__imageContainer___iD5Kd {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  border-radius: 0.25rem;
-}
-.Image-module__imageContainer___iD5Kd.Image-module__loading___Sh1zO .Image-module__image___1pa50 {
-  opacity: 0;
-}
-.Image-module__imageContainer___iD5Kd.Image-module__error___0LGZ2 .Image-module__image___1pa50 {
-  display: none;
-}
-
-.Image-module__image___1pa50 {
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.Image-module__skeleton___0bGS6 {
-  position: absolute;
-  inset: 0;
-  background-color: #e5e7eb;
-  overflow: hidden;
-}
-
-.Image-module__shimmer___aanrl {
-  position: absolute;
-  inset: 0;
-  transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-  animation: Image-module__shimmer___aanrl 1.5s infinite;
-}
-
-@keyframes Image-module__shimmer___aanrl {
-  100% {
-    transform: translateX(100%);
-  }
-}
-.Image-module__errorState___TjV-8 {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  background-color: #f9fafb;
-  color: #9ca3af;
-}
-
-.Image-module__errorIcon___QCKvj {
-  width: 2rem;
-  height: 2rem;
-  opacity: 0.6;
-}
-
-.Image-module__errorText___Q8pnb {
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.Image-module__imageContainer___iD5Kd[style*="aspect-ratio: 1"] {
-  aspect-ratio: 1/1;
-}
-.Image-module__imageContainer___iD5Kd[style*="aspect-ratio: 16"] {
-  aspect-ratio: 16/9;
-}
-.Image-module__imageContainer___iD5Kd[style*="aspect-ratio: 4"] {
-  aspect-ratio: 4/3;
-}
-
-.Image-module__imageContainer___iD5Kd:focus-visible {
-  outline: 2px solid #0066cc;
-  outline-offset: 2px;
-}
 :root {
   --leybold-red: #e2001a;
   --leybold-black: #000000;
@@ -3106,28 +3264,84 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   --text-xxl-line-height: 1;
 }
 
+@keyframes SearchModal-module__overlayFadeIn___jG6GU {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes SearchModal-module__overlayFadeOut___kZjiG {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes SearchModal-module__modalEnterFromBottom___-5BH4 {
+  from {
+    opacity: 0;
+    transform: translateY(52px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes SearchModal-module__modalExitToBottom___cOVuu {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(52px);
+  }
+}
 .SearchModal-module__overlay___Vbvg9 {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: transparent;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 2rem 1rem;
   z-index: 1000;
   overflow-y: auto;
+  isolation: isolate;
+}
+.SearchModal-module__overlay___Vbvg9::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.SearchModal-module__overlayOpen___Ipajg::before {
+  animation: SearchModal-module__overlayFadeIn___jG6GU 300ms ease-out forwards;
+}
+
+.SearchModal-module__overlayClosing___yXsw3::before {
+  opacity: 1;
+  animation: SearchModal-module__overlayFadeOut___kZjiG 250ms ease-in forwards;
+  animation-delay: 350ms;
 }
 
 .SearchModal-module__modal___1k5gO {
   position: relative;
+  z-index: 1;
   background-color: #ffffff;
   border-radius: 0;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   width: 100%;
-  max-width: 1200px;
   max-height: calc(100vh - 4rem);
   display: flex;
   flex-direction: column;
@@ -3137,6 +3351,34 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
+.SearchModal-module__modalOpen___t3hpr {
+  opacity: 0;
+  transform: translateY(52px);
+  animation: SearchModal-module__modalEnterFromBottom___-5BH4 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  animation-delay: 120ms;
+}
+
+.SearchModal-module__modalClosing___W3m8i {
+  opacity: 1;
+  transform: translateY(0);
+  animation: SearchModal-module__modalExitToBottom___cOVuu 350ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .SearchModal-module__overlay___Vbvg9::before {
+    animation: none;
+    opacity: 1;
+  }
+  .SearchModal-module__modal___1k5gO {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .SearchModal-module__overlayClosing___yXsw3::before {
+    animation: none;
+    opacity: 0;
+  }
+}
 .SearchModal-module__header___I79uH {
   display: flex;
   align-items: center;
@@ -3237,6 +3479,28 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   }
 }
 
+.SearchModal-module__closeButtonMobileWrapper___LSynI {
+  display: contents;
+}
+@media (max-width: 768px) {
+  .SearchModal-module__closeButtonMobileWrapper___LSynI {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    overflow: hidden;
+    max-height: 48px;
+    opacity: 1;
+    transform: translateY(0);
+    transition: max-height 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out;
+  }
+  .SearchModal-module__closeButtonMobileWrapperHidden___O9nRE {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-12px);
+    pointer-events: none;
+  }
+}
+
 .SearchModal-module__stickyHeader___wp-gA {
   display: none;
 }
@@ -3251,6 +3515,10 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
     padding: 18px;
     gap: 18px;
     flex-shrink: 0;
+    transition: gap 0.3s ease-out;
+  }
+  .SearchModal-module__stickyHeaderHidden___-UI7O {
+    gap: 0;
   }
 }
 
@@ -3260,6 +3528,8 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  margin: 0 auto;
 }
 @media (max-width: 768px) {
   .SearchModal-module__scrollableContent___lrZP3 {
@@ -3378,7 +3648,8 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   .SearchBar-module__inputWrapper___-4wrM {
     border: 1px solid rgba(0, 0, 0, 0.16);
     border-radius: 0;
-    padding: 12px;
+    padding: 13px;
+    height: 100%;
   }
 }
 
@@ -3609,6 +3880,10 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .ContentCardHorizontal-module__contentCard--results-view___oBP2u:hover {
   border-left-color: #e2001a;
 }
+.ContentCardHorizontal-module__contentCard--results-view___oBP2u:hover h3 {
+  text-decoration: underline;
+  text-underline-offset: 6px;
+}
 .ContentCardHorizontal-module__contentCard--results-view___oBP2u:focus-visible {
   outline: 1px solid #000000;
   outline-offset: 2px;
@@ -3638,10 +3913,9 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
     font-size: 9px;
   }
 }
-.ContentCardHorizontal-module__contentCategory___NssVD::after {
-  content: "|";
-  color: #99a1ab;
-  font-weight: 400;
+.ContentCardHorizontal-module__contentCategory___NssVD.separator {
+  position: relative;
+  color: var(--leybold-light-grey);
 }
 
 .ContentCardHorizontal-module__contentMetaText___muYBN {
@@ -4241,6 +4515,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 }
 
 .Filters-module__filterItem___lA2rv {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -4263,9 +4538,20 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .Filters-module__filterCheckboxInput___NAcGz {
   position: absolute;
   opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.Filters-module__filterCheckboxInput___NAcGz:focus-visible + .Filters-module__filterCheckbox___9In3q {
+  outline: 1px solid #000000;
+  outline-offset: 2px;
 }
 
 .Filters-module__filterCheckbox___9In3q {
@@ -4611,6 +4897,13 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
      object-fit: contain;
 }
 
+.ProductCardVertical-module__productCardVertical__placeholderImage___w0sd0 {
+  padding: 0 5px;
+  box-sizing: border-box;
+  border-radius: 0 !important;
+  background-color: var(--leybold-white-aluminium);
+}
+
 .ProductCardVertical-module__productCardVertical__content___sZdOs {
   display: flex;
   flex-direction: column;
@@ -4881,6 +5174,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 38px;
+  align-items: start;
 }
 @media (max-width: 768px) {
   .ResultsView-module__resultsContainer___J4URa {
@@ -4893,7 +5187,12 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   display: flex;
   flex-direction: column;
   gap: 36px;
-  padding-bottom: 4rem;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  padding-bottom: 1.5rem;
 }
 @media (max-width: 768px) {
   .ResultsView-module__sidebar___nQq5J {
@@ -4915,7 +5214,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   gap: 18px;
   align-items: stretch;
 }
-@media (max-width: 768px) {
+@media (max-width: 992px) {
   .ResultsView-module__productsGrid___gnAQ- {
     grid-template-columns: repeat(2, 1fr);
     gap: 9px;
@@ -5162,6 +5461,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .TabButton-module__tabButton--desktop___fbAaC:not(.TabButton-module__tabButton--active___gj6Jp) {
   background: #99a1ab;
   color: #ffffff;
+  border-radius: 0;
   height: 44px;
 }
 .TabButton-module__tabButton--desktop___fbAaC:not(.TabButton-module__tabButton--active___gj6Jp):hover {
@@ -5444,10 +5744,17 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease-out;
+  transition-delay: 0s;
 }
 .FilterDrawer-module__drawerOverlay--open___blJZo {
   opacity: 1;
   pointer-events: auto;
+  transition-delay: 0s;
+}
+.FilterDrawer-module__drawerOverlay--closing___diQr0 {
+  opacity: 0;
+  pointer-events: none;
+  transition-delay: 0.3s;
 }
 
 .FilterDrawer-module__drawerPanel___35h-U {
@@ -5459,6 +5766,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   background: #f5f5f5;
   transform: translateX(-100%);
   transition: transform 0.3s ease-out;
+  transition-delay: 0s;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -5466,6 +5774,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 }
 .FilterDrawer-module__drawerPanel--open___Fw1SY {
   transform: translateX(0);
+  transition-delay: 0.3s;
 }
 .FilterDrawer-module__drawerPanel___35h-U:focus-visible {
   outline: none;
@@ -5484,6 +5793,9 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   display: flex;
   align-items: center;
   justify-content: center;
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
 }
 .FilterDrawer-module__drawerCloseButton___cfMmf svg {
   stroke: #ffffff;
@@ -5587,7 +5899,9 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 }
 
 .FederatedSearchExperience-module__searchExperience___gug9X {
+  max-width: 1280px;
   width: 100%;
+  margin: 0 auto;
   min-height: 400px;
 }