@sonic-equipment/ui 164.0.0 → 165.0.0

package/dist/styles.css

@@ -235,13 +235,14 @@
   --box-shadow-light: 0 0 8px 0 rgb(0 0 0 / 30%);
 }
 :root {
+  --top-actions-sticky-layer: 5;
   --carousel-layer: 10;
+  --loading-layer: 12;
+  --background-overlay-behind-header: 13;
   --header-layer: 15;
-  --loading-layer: 50;
-  --background-overlay-layer: 90;
+  --background-overlay-in-front: 90;
   --sidebar-layer: 100;
   --search-layer: 200;
-  --sticky-bottom-price: 1300;
   --modal-layer: 2000;
   --zoom-image-layer: 2100;
 }
@@ -1688,9 +1689,8 @@
     color: var(--color-white);
   }
 
-.background-overlay-module-mGiNQ {
+.background-overlay {
   position: fixed;
-  z-index: var(--background-overlay-layer);
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgb(0 0 0 / 52%);
@@ -1698,15 +1698,14 @@
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
-  .background-overlay-module-mGiNQ.background-overlay-module-5Uxcl {
+  .background-overlay.visible {
     opacity: 1;
-    pointer-events: auto;
-  }
-
-  .background-overlay-module-mGiNQ.background-overlay-module-GRInQ {
-    opacity: 0;
+    pointer-events: all;
   }
 
 .badge-module-X5Au9 {
@@ -2603,7 +2602,7 @@
 
   .category-card-module-4NUjH .category-card-module-oNTrK .category-card-module-RxWMW {
       position: relative;
-      z-index: 5;
+      z-index: 1;
       margin: auto;
       aspect-ratio: 1;
       mix-blend-mode: multiply;
@@ -4570,6 +4569,111 @@ button.swiper-pagination-bullet {
     line-height: 1.5;
   }
 
+.drawer-module-5ARuA {
+  --transition-timing-function: ease-in-out;
+  --transition-duration: 0.3s;
+  --transform-translate-x-from: -100%;
+  --transform-translate-x-to: 0;
+  --transform-translate-y-from: 0;
+  --transform-translate-y-to: 0;
+
+  position: fixed;
+  z-index: var(--sidebar-layer);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-gray-200);
+  background-color: var(--color-white);
+  pointer-events: all;
+}
+
+  .drawer-module-5ARuA.drawer-module-yjFdX {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    min-width: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-bZLBV {
+    --transform-translate-x-from: 100%;
+    --transform-translate-x-to: 0;
+    --transform-translate-y-from: 0;
+    --transform-translate-y-to: 0;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    min-width: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-KiviE {
+    --transform-translate-x-from: 0;
+    --transform-translate-x-to: 0;
+    --transform-translate-y-from: -100%;
+    --transform-translate-y-to: 0;
+
+    top: 0;
+    right: 0;
+    left: 0;
+    min-height: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-p-PYu {
+    right: 0;
+
+    --transform-translate-x-from: 0;
+    --transform-translate-x-to: 0;
+    --transform-translate-y-from: 100%;
+    --transform-translate-y-to: 0;
+
+    bottom: 0;
+    left: 0;
+    min-height: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-0jRBQ {
+    z-index: calc(var(--header-layer) - 1);
+  }
+
+  .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-yjFdX,
+    .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-bZLBV,
+    .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-KiviE {
+      top: var(--header-height);
+    }
+
+  .drawer-module-5ARuA.enter {
+    transform: translate(
+      var(--transform-translate-x-from),
+      var(--transform-translate-y-from)
+    );
+  }
+
+  .drawer-module-5ARuA.enter-active {
+    transform: translate(
+      var(--transform-translate-x-to),
+      var(--transform-translate-y-to)
+    );
+  }
+
+  .drawer-module-5ARuA.exit {
+    transform: translate(
+      var(--transform-translate-x-to),
+      var(--transform-translate-y-to)
+    );
+  }
+
+  .drawer-module-5ARuA.exit-active {
+    transform: translate(
+      var(--transform-translate-x-from),
+      var(--transform-translate-y-from)
+    );
+  }
+
+  .drawer-module-5ARuA.exit-active,
+  .drawer-module-5ARuA.enter-active {
+    transition: transform var(--transition-duration)
+      var(--transition-timing-function);
+  }
+
 .footer-module-YzJ68 {
   --padding-inline: var(--space-24);
 
@@ -5076,53 +5180,6 @@ button.swiper-pagination-bullet {
     }
 }
 
-.global-search-module-T0bEf {
-  z-index: calc(var(--header-layer) - 1);
-}
-
-.global-search-module-d2g2F {
-  position: relative;
-  z-index: -1;
-  font-family: var(--font-family-sonic);
-}
-
-.global-search-module-Sx8Lx {
-  position: relative;
-}
-
-.global-search-module-Sx8Lx .global-search-module--orCF {
-    position: absolute;
-    z-index: var(--search-layer);
-    top: 0;
-    right: 0;
-    left: 0;
-    box-sizing: border-box;
-    transition: transform 0.3s ease-in-out;
-  }
-
-.global-search-module-Sx8Lx .global-search-module--orCF .global-search-module-vXnL6 {
-      position: relative;
-      z-index: calc(var(--search-layer) + 1);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-MYwlp {
-      transform: translateY(0);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-Jmt3c {
-      transform: translateY(0);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-gQQfY {
-      transform: translateY(-100%);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-AABcw {
-      opacity: 0;
-      pointer-events: none;
-      transform: translateY(-100%);
-    }
-
 .search-input-module-xCCzd {
   box-sizing: border-box;
 }
@@ -5478,6 +5535,49 @@ button.swiper-pagination-bullet {
     transform: translateY(-100%);
   }
 
+.global-search-module-d2g2F {
+  position: relative;
+  z-index: -1;
+  font-family: var(--font-family-sonic);
+}
+
+.global-search-module-Sx8Lx {
+  position: relative;
+}
+
+.global-search-module-Sx8Lx .global-search-module--orCF {
+    position: absolute;
+    z-index: var(--search-layer);
+    top: 0;
+    right: 0;
+    left: 0;
+    box-sizing: border-box;
+    transition: transform 0.3s ease-in-out;
+  }
+
+.global-search-module-Sx8Lx .global-search-module--orCF .global-search-module-vXnL6 {
+      position: relative;
+      z-index: calc(var(--search-layer) + 1);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-MYwlp {
+      transform: translateY(0);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-Jmt3c {
+      transform: translateY(0);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-gQQfY {
+      transform: translateY(-100%);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-AABcw {
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(-100%);
+    }
+
 .hamburger-button-module-xER52 {
   --width: 24px;
   --padding-inline: 2px;
@@ -5658,6 +5758,15 @@ button.swiper-pagination-bullet {
       fill: var(--color-brand-red);
     }
 
+.center-module-Cr7hx {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  align-items: center;
+  place-content: center center;
+}
+
 .feature-list-module-cxc8U {
   display: grid;
   grid-template-columns: auto minmax(50%, 1fr);
@@ -5764,7 +5873,7 @@ button.swiper-pagination-bullet {
 
   /* scroll area */
 
-  .menu-list-module-TloB9 .menu-list-module-x3D-V {
+  .menu-list-module-TloB9.menu-list-module-AiDgG .menu-list-module-x3D-V {
     grid-area: scroll-area;
     overflow-y: auto;
     scrollbar-width: thin;
@@ -5816,7 +5925,6 @@ button.swiper-pagination-bullet {
   align-items: center;
   padding: var(--space-8) var(--ml-item-outer-spacing, 0);
   margin: 0 0 -2px;
-  background: var(--color-white);
   color: var(--color-brand-dark-gray);
   font-size: var(--text-heading-xxxs-size);
   font-style: italic;
@@ -5857,6 +5965,10 @@ button.swiper-pagination-bullet {
     box-shadow: inset var(--shadow-focus-outline);
   }
 
+.menu-list-module-S08LI:has(:focus-visible) [href] {
+      box-shadow: none;
+    }
+
 /* menu list item */
 
 .menu-list-module-4QhF4 {
@@ -5995,10 +6107,14 @@ button.swiper-pagination-bullet {
     z-index: 2;
   }
 
-.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
-      box-shadow: inset var(--shadow-focus-outline);
+.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo {
+      box-shadow: none;
     }
 
+.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
+        box-shadow: inset var(--shadow-focus-outline);
+      }
+
 /* selected state */
 
 .menu-list-module-4QhF4.menu-list-module-hiMca {
@@ -6306,6 +6422,90 @@ button.swiper-pagination-bullet {
   gap: 1rem;
 }
 
+.panel-navigation-module-FnSua {
+  block-size: inherit;
+}
+
+.panel-navigation-module-torfG {
+  position: relative;
+  display: grid;
+  block-size: inherit;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.panel-navigation-module-torfG.panel-navigation-module-7K80h {
+    overflow: hidden;
+    grid-template-columns: 1fr;
+  }
+
+.panel-navigation-module-j3ZBu {
+  --transition-duration: 250ms;
+
+  z-index: 2;
+  display: grid;
+  background-color: var(--color-white);
+  block-size: inherit;
+  border-inline: 1px solid var(--color-brand-light-gray);
+  margin-inline-start: -1px;
+}
+
+/* only applies to the first panel, when more content than one menu is present, like in the mobile navigation */
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP {
+    display: flex;
+    overflow: hidden auto;
+    flex-direction: column;
+    gap: var(--space-24);
+    scrollbar-width: thin;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP > * {
+      flex-shrink: 0;
+    }
+
+.panel-navigation-module-j3ZBu:last-child {
+    z-index: 1;
+  }
+
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter-active {
+    transition: translate var(--transition-duration) ease-in-out;
+  }
+
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter {
+    translate: -100% 0;
+  }
+
+.panel-navigation-module-j3ZBu.enter-active {
+    translate: 0 0;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h {
+    position: absolute;
+    border: 0;
+    margin: 0;
+    inset: 0;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active,
+    .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter {
+      translate: 100% 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter-active {
+      translate: 0 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h) {
+      transition: translate var(--transition-duration) ease-in-out;
+      translate: -100% 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active) {
+      translate: 0 0;
+    }
+
 .announcement-module-Xi0L5 {
   --text-color: var(--color-white);
   --background-color: var(--color-brand-red);
@@ -6696,7 +6896,7 @@ button.swiper-pagination-bullet {
 
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-wGAXb {
     position: fixed;
-    z-index: 5;
+    z-index: var(--top-actions-sticky-layer);
     top: var(--header-height);
     right: 0;
     left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "164.0.0",
+  "version": "165.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/background-overlay/background-overlay.module.css.js

@@ -1,3 +0,0 @@
-var styles = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
-
-export { styles as default };