Merge branch 'stage' into MWPW-142267

.browserslistrc

@@ -1,5 +1,5 @@
 last 1 chrome version
 last 1 firefox version
 last 1 edge version
-safari >= 14
-ios_saf >= 14
+safari >= 15
+ios_saf >= 15

.github/codeql/codeql-config.yml

@@ -5,3 +5,4 @@ paths-ignore:
   - 'tools/floodgate/**'
   - 'tools/translation/**'
   - node_modules
+  - libs/deps/mas

.github/workflows/high-impact-alert.js

@@ -13,9 +13,12 @@ const main = async (params) => {
     }
 
     const { html_url, number, title } = context.payload.pull_request;
-    console.log('High impact label detected, sending Slack notification');
+    console.log('High impact label detected, sending Slack notifications');
     slackNotification(`:alert: High Impact PR has been opened: <${html_url}|#${number}: ${title}>.` +
       ` Please prioritize testing the proposed changes.`, process.env.SLACK_HIGH_IMPACT_PR_WEBHOOK);
+    slackNotification(`:alert: High Impact PR has been opened: <${html_url}|#${number}: ${title}>.` +
+      ` Please review the PR details promptly and raise any concerns or questions.`,
+      process.env.SLACK_MILO_UPDATES_WEBHOOK);
   } catch (error) {
     console.error(error);
   }

.github/workflows/high-impact-alert.yml

@@ -7,6 +7,7 @@ on:
 
 env:
   SLACK_HIGH_IMPACT_PR_WEBHOOK: ${{ secrets.SLACK_HIGH_IMPACT_PR_WEBHOOK }}
+  SLACK_MILO_UPDATES_WEBHOOK: ${{ secrets.SLACK_MILO_UPDATES_WEBHOOK }}
 
 jobs:
   send_alert:

.github/workflows/label-zero-impact.js

@@ -4,13 +4,15 @@ const zeroImpactDirs = [
   '.kodiak',
   '.vscode',
   '.test',
+  '.browserslistrc',
   'libs/mep',
   '.eslintrc.js',
   'CODEOWNERS',
   'web-test-runner.config.mjs',
   'LICENSE',
   'codecov.yaml',
   '.gitignore',
+  'package.json',
   'package-lock.json',
 ];
 const zeroImpactLabel = 'zero-impact';

.gitignore

@@ -2,9 +2,9 @@
 .aem/*
 coverage
 logs/*
-node_modules
+*node_modules
 .DS_Store
 .idea
 .iml
 .env
-**/mas/stats.json
+**/mas/*/stats.json

libs/blocks/accordion/accordion.css

@@ -12,6 +12,10 @@ dl.accordion {
   border-bottom: 1px solid var(--color-gray-500);
 }
 
+.accordion-container.no-borders dl.accordion {
+  border: none;
+}
+
 .accordion dd {
   margin: 0;
   padding: var(--spacing-xs);
@@ -32,7 +36,7 @@ dl.accordion {
   line-height: var(--type-heading-s-lh);
   padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-xs);
   position: relative;
-  text-align: left;
+  text-align: start;
   width: 100%;
   -webkit-text-size-adjust: 100%;
 }
@@ -42,6 +46,10 @@ dl.accordion {
   color: var(--color-black);
 }
 
+.accordion-container.no-borders .accordion dt button {
+  border: none;
+}
+
 .accordion dt .accordion-heading {
   margin: 0;
 }

libs/blocks/caas-config/caas-config.js

@@ -212,6 +212,7 @@ const defaultOptions = {
   },
   detailsTextOption: {
     default: 'Default',
+    createdDate: 'Created Date',
     modifiedDate: 'Modified Date',
   },
   cardHoverEffect: {

libs/blocks/caas/utils.js

@@ -551,7 +551,9 @@ export const getConfig = async (originalState, strs = {}) => {
   && state.targetActivity ? `/${encodeURIComponent(state.targetActivity)}.json` : '';
   const flatFile = targetActivity ? '&flatFile=false' : '';
   const localesQueryParam = locales ? `&locales=${locales}` : '';
-  const debug = state.showIds && document.location.pathname.includes('/tools/caas') ? '&debug=true' : '';
+  const debug = (state.showIds && document.location.pathname.includes('/tools/caas'))
+    || state.container === 'categories'
+    ? '&debug=true' : '';
   const collectionTags = state.includeTags ? state.includeTags.join(',') : '';
   const excludeContentWithTags = state.excludeTags ? state.excludeTags.join(',') : '';
 

libs/blocks/editorial-card/editorial-card.css

@@ -55,7 +55,7 @@
   min-width: initial;
 }
 
-.editorial-card.has-footer {
+.editorial-card.equal-height {
   height: 100%;
 }
 
@@ -79,27 +79,29 @@
 }
 
 .editorial-card .foreground,
-.editorial-card .footer {
+.editorial-card .card-footer {
   padding: var(--spacing-xs);
 }
 
 .editorial-card .extra-row {
   padding: 0 var(--spacing-xs);
 }
 
-.editorial-card .footer {
+.editorial-card .card-footer {
   padding-top: 0;
   margin-top: auto;
 }
 
-.editorial-card .footer > div {
+.editorial-card .card-footer > div {
   display: flex;
   flex-direction: column;
   text-align: end;
   justify-content: end;
   row-gap: var(--spacing-xxs);
 }
 
+.editorial-card .card-footer.empty { padding: 0; }
+
 .editorial-card.no-bg.no-border .foreground {
   padding: var(--spacing-s) 0;
 }
@@ -109,7 +111,7 @@
 }
 
 .editorial-card.no-bg.no-border .static,
-.editorial-card.no-bg.no-border .footer {
+.editorial-card.no-bg.no-border .card-footer {
   padding-inline: 0;
 }
 
@@ -127,8 +129,8 @@
   line-height: 0;
 }
 
-.editorial-card.footer-align-left .footer > div { text-align: start; }
-.editorial-card.footer-align-center .footer > div { text-align: center; }
+.editorial-card.footer-align-left .card-footer > div { text-align: start; }
+.editorial-card.footer-align-center .card-footer > div { text-align: center; }
 
 .editorial-card.no-bg.no-border .foreground > div { 
   row-gap: var(--spacing-xs);
@@ -154,11 +156,11 @@
 }
 
 .editorial-card .action-area, 
-.editorial-card .footer > .action-area {
+.editorial-card .card-footer > .action-area {
   display: flex;
   align-items: center;
   justify-content: right;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs) var(--spacing-s);
   flex-flow: wrap;
   flex-direction: row;
 }
@@ -171,16 +173,13 @@
   justify-content: center;
 }
 
-.editorial-card.right .action-area {
-  justify-content: right;
-}
 
 .editorial-card hr {
   background-color: currentcolor;
   border: none;
   height: 1px;
   width: 100%;
-  margin: var(--spacing-xs) 0;
+  margin: var(--spacing-xxs) 0;
 }
 
 .editorial-card .background {
@@ -204,6 +203,11 @@
   position: relative;
 }
 
+.editorial-card:is(.media-square, .media-wide, .media-standard, .media-tall) .media-area .milo-video {
+  height: auto;
+  padding: 0;
+}
+
 /* Aspect Ratio */
 .editorial-card.media-square .media-area img,
 .editorial-card.media-square .media-area video {
@@ -224,7 +228,8 @@
 }
 
 .editorial-card.media-tall .media-area img,
-.editorial-card.media-tall .media-area video {
+.editorial-card.media-tall .media-area video,
+.editorial-card.media-tall .media-area .milo-video {
   aspect-ratio: var(--aspect-ratio-tall);
   max-height: unset;
 }
@@ -241,10 +246,5 @@
   justify-items: center; 
 }
 
-.editorial-card.right { 
-  text-align: end; 
-  justify-items: end; 
-}
-
 .editorial-card.footer-align-left .action-area { justify-content: start; }
 .editorial-card.footer-align-center .action-area { justify-content: center; }

libs/blocks/editorial-card/editorial-card.js

@@ -46,7 +46,8 @@ const decorateForeground = async (el, rows) => {
       row.classList.add('foreground');
       await decorateLockupFromContent(row);
     } else if (i === (rows.length - 1)) {
-      row.classList.add('footer');
+      row.classList.add('card-footer');
+      if (!row.textContent.trim()) row.classList.add('empty');
     } else {
       row.classList.add('extra-row');
     }
@@ -86,12 +87,12 @@ const init = async (el) => {
   if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
   let rows = el.querySelectorAll(':scope > div');
   const [head, middle, ...tail] = rows;
-  if (rows.length === 4) el.classList.add('has-footer');
+  if (rows.length === 4) el.classList.add('equal-height');
   if (rows.length >= 1) {
     const count = rows.length >= 3 ? 'three-plus' : rows.length;
     switch (count) {
       case 'three-plus':
-        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:footer)
+        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
         decorateBgRow(el, head);
         rows = tail;
         await decorateForeground(el, rows);

libs/blocks/footer/footer.js

@@ -150,6 +150,12 @@ export class Footer {
         const ariaExpanded = regionButton.classList.contains('inline-dialog-active');
         regionButton.setAttribute('aria-expanded', ariaExpanded);
       });
+      document.addEventListener('click', (e) => {
+        if (regionButton.classList.contains('inline-dialog-active') && !e.target.closest('.footer-region')) {
+          regionButton.setAttribute('aria-expanded', false);
+          regionButton.classList.remove('inline-dialog-active');
+        }
+      });
     }
     regionButton.className = 'footer-region-button';
     regionButton.setAttribute('aria-haspopup', true);

libs/blocks/global-navigation/global-navigation.js

@@ -405,13 +405,15 @@ class Gnav {
       try {
         this.block.removeEventListener('click', this.loadDelayed);
         this.block.removeEventListener('keydown', this.loadDelayed);
-        const [
-          Search,
-        ] = await Promise.all([
-          loadBlock('../features/search/gnav-search.js'),
-          loadStyles(rootPath('features/search/gnav-search.css')),
-        ]);
-        this.Search = Search;
+        if (this.searchPresent()) {
+          const [
+            Search,
+          ] = await Promise.all([
+            loadBlock('../features/search/gnav-search.js'),
+            loadStyles(rootPath('features/search/gnav-search.css')),
+          ]);
+          this.Search = Search;
+        }
 
         if (!this.useUniversalNav) {
           const [ProfileDropdown] = await Promise.all([