Merge branch 'main' of github.com:adobe/aem-boilerplate

.editorconfig

@@ -0,0 +1,5 @@
+[*.js]
+indent_size = 2
+
+[*.css]
+indent_size = 4

404.html

@@ -51,7 +51,7 @@
     }
 
     main.error .error-number text {
-      font-family: var(--type-fixed-font-family);
+      font-family: monospace;
     }
   </style>
   <link rel="stylesheet" href="/styles/lazy-styles.css">

blocks/cards/cards.css

@@ -3,8 +3,8 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  grid-gap: 24px;
 }
 
 .cards > ul > li {
@@ -20,10 +20,6 @@
   line-height: 0;
 }
 
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
-}
-
 .cards > ul > li img {
   width: 100%;
   aspect-ratio: 4 / 3;

blocks/cards/cards.js

@@ -12,7 +12,7 @@ export default function decorate(block) {
     });
     ul.append(li);
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+  ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
   block.textContent = '';
   block.append(ul);
 }

blocks/columns/columns.css

@@ -23,7 +23,7 @@
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 32px;
+    gap: 24px;
   }
 
   .columns > div > div {

blocks/footer/footer.css

@@ -1,15 +1,21 @@
 footer {
-  padding: 2rem;
   background-color: var(--color-neutral-100);
   font: var(--type-body-2-default-font);
   letter-spacing: var(--type-body-2-default-letter-spacing);
 }
 
-footer .footer {
-  max-width: 1200px;
+footer .footer > div {
   margin: auto;
+  max-width: 1200px;
+  padding: 40px 24px 24px;
 }
 
 footer .footer p {
   margin: 0;
 }
+
+@media (width >= 900px) {
+  footer .footer > div {
+    padding: 40px 32px 24px;
+  }
+}

blocks/fragment/fragment.css

@@ -1,13 +1 @@
-/* suppress nested section padding */
-.fragment-wrapper > .section {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.fragment-wrapper > .section:first-of-type {
-  padding-top: 0;
-}
-
-.fragment-wrapper > .section:last-of-type {
-  padding-bottom: 0;
-}
+/* stylelint-disable no-empty-source */

blocks/header/header.css

@@ -15,11 +15,11 @@ header nav {
     'hamburger brand tools' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
-  gap: 0 32px;
+  gap: 0 24px;
   margin: auto;
-  max-width: 1264px;
+  max-width: 1248px;
   height: var(--nav-height);
-  padding: 0 16px;
+  padding: 0 24px;
   font-family: var(--type-base-font-family);
 }
 
@@ -29,19 +29,16 @@ header nav[aria-expanded='true'] {
     'sections sections' 1fr
     'tools tools' var(--nav-height) / auto 1fr;
   overflow-y: auto;
-  min-height: 100vh;
-}
-
-@media (width >= 600px) {
-  header nav {
-    padding: 0 32px;
-  }
+  min-height: 100dvh;
 }
 
 @media (width >= 900px) {
   header nav {
     display: flex;
     justify-content: space-between;
+    gap: 0 32px;
+    max-width: 1264px;
+    padding: 0 32px;
   }
 
   header nav[aria-expanded='true'] {
@@ -175,15 +172,15 @@ header nav .nav-sections ul {
 }
 
 header nav .nav-sections ul > li {
-  font-weight: 700;
+  font-weight: 500;
 }
 
 header nav .nav-sections ul > li > ul {
   margin-top: 0;
 }
 
 header nav .nav-sections ul > li > ul > li {
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @media (width >= 900px) {
@@ -225,14 +222,13 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections ul {
     display: flex;
-    gap: 2em;
+    gap: 24px;
     margin: 0;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li {
     flex: 0 1 auto;
     position: relative;
-    font-weight: 500;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li > ul {
@@ -243,10 +239,10 @@ header nav .nav-sections ul > li > ul > li {
   header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
     display: block;
     position: absolute;
-    left: -1em;
+    left: -24px;
     width: 200px;
-    margin-top: 12px;
-    padding: 1em;
+    top: 150%;
+    padding: 16px;
     background-color: var(--color-neutral-500);
     white-space: initial;
   }
@@ -255,7 +251,7 @@ header nav .nav-sections ul > li > ul > li {
     content: '';
     position: absolute;
     top: -8px;
-    left: 8px;
+    left: 16px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;

blocks/header/header.js

@@ -22,6 +22,21 @@ function closeOnEscape(e) {
   }
 }
 
+function closeOnFocusLost(e) {
+  const nav = e.currentTarget;
+  if (!nav.contains(e.relatedTarget)) {
+    const navSections = nav.querySelector('.nav-sections');
+    const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]');
+    if (navSectionExpanded && isDesktop.matches) {
+      // eslint-disable-next-line no-use-before-define
+      toggleAllNavSections(navSections, false);
+    } else if (!isDesktop.matches) {
+      // eslint-disable-next-line no-use-before-define
+      toggleMenu(nav, navSections, false);
+    }
+  }
+}
+
 function openOnKeydown(e) {
   const focused = document.activeElement;
   const isNavDrop = focused.className === 'nav-drop';
@@ -66,24 +81,26 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
   if (isDesktop.matches) {
     navDrops.forEach((drop) => {
       if (!drop.hasAttribute('tabindex')) {
-        drop.setAttribute('role', 'button');
         drop.setAttribute('tabindex', 0);
         drop.addEventListener('focus', focusNavSection);
       }
     });
   } else {
     navDrops.forEach((drop) => {
-      drop.removeAttribute('role');
       drop.removeAttribute('tabindex');
       drop.removeEventListener('focus', focusNavSection);
     });
   }
+
   // enable menu collapse on escape keypress
   if (!expanded || isDesktop.matches) {
     // collapse menu on escape press
     window.addEventListener('keydown', closeOnEscape);
+    // collapse menu on focus lost
+    nav.addEventListener('focusout', closeOnFocusLost);
   } else {
     window.removeEventListener('keydown', closeOnEscape);
+    nav.removeEventListener('focusout', closeOnFocusLost);
   }
 }
 

blocks/hero/hero.css

@@ -1,22 +1,19 @@
-main .hero-container > div {
+.hero-container .hero-wrapper {
   max-width: unset;
-}
-
-main .hero-container {
   padding: 0;
 }
 
 .hero {
   position: relative;
-  padding: 32px;
+  padding: 40px 24px;
   min-height: 300px;
 }
 
 .hero h1 {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
-  color: white;
+  color: var(--background-color);
 }
 
 .hero picture {
@@ -32,3 +29,9 @@ main .hero-container {
   width: 100%;
   height: 100%;
 }
+
+@media (width >= 900px) {
+  .hero {
+    padding: 40px 32px;
+  }
+}