@undrr/undrr-mangrove 2.0.1 → 2.1.1

package/scss/Components/Gallery/gallery.scss

@@ -105,21 +105,27 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    color: rgb(var(--mg-color-interactive));
+    font-size: var(--mg-spacing-300);
     z-index: 3; // loading spinner above nav buttons — local to gallery stacking context
-  }
 
-  &__spinner {
-    width: var(--mg-spacing-300); // 30px
-    height: var(--mg-spacing-300);
-    border: 4px solid rgb(var(--mg-color-neutral-300));
-    border-top-color: rgb(var(--mg-color-interactive));
-    border-radius: 50%;
-    animation: mg-gallery-spin 0.8s linear infinite;
-  }
+    @media (prefers-reduced-motion: reduce) {
+      // The shared Loader reveals translated text. Keep it inside the stage
+      // and give the label a stable surface over arbitrary video/posters.
+      width: max-content;
 
-  @keyframes mg-gallery-spin {
-    to {
-      transform: rotate(360deg);
+      // Reserve both 44px arrow targets, their largest inset, and a focus gap.
+      $navigation-space: calc(
+        #{mg-rem(44)} + var(--mg-spacing-100) + var(--mg-spacing-50)
+      );
+
+      max-width: calc(100% - 2 * $navigation-space);
+      box-sizing: border-box;
+      pointer-events: none;
+      padding: var(--mg-spacing-75);
+      background: rgb(var(--mg-color-neutral-0));
+      color: rgb(var(--mg-color-text));
+      font-size: var(--mg-font-size-300);
     }
   }
 
@@ -213,7 +219,10 @@
     padding: 0;
     position: relative;
 
-    @include transition(border-color 0.2s ease);
+    @include transition(
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard)
+    );
 
     @include devicebreak(medium) {
       width: 100%;
@@ -366,7 +375,11 @@
     align-items: center;
     justify-content: center;
 
-    @include transition(background-color 0.2s, opacity 0.2s);
+    @include transition(
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)
+    );
 
     &:hover {
       background: rgb(var(--mg-color-neutral-600));
@@ -436,7 +449,11 @@
     align-items: center;
     justify-content: center;
 
-    @include transition(background-color 0.2s, opacity 0.2s);
+    @include transition(
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)
+    );
 
     &:hover {
       background: rgb(var(--mg-color-neutral-600));
@@ -511,3 +528,11 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .mg-gallery__thumbnail,
+  .mg-gallery__arrow,
+  .mg-gallery__arrow-button {
+    transition: none;
+  }
+}

package/scss/Components/Hero/hero.scss

@@ -748,3 +748,168 @@ $variant-colour-props: (
     direction: rtl; // reverses grid item order (content stays first semantically)
   }
 }
+
+// Tags below the summary and facts line: a list of outline tags in the
+// hero's own ink, so they read on every surface. On the coloured variants the
+// ink is white, the same pairing as the hero's copy; on the neutral variant it
+// is the interactive colour. The plain fill a .mg-tag has elsewhere would be
+// close to invisible on the theme's hero colour. Tags carrying a Tag modifier
+// (mg-tag--secondary, --accent, …) keep that modifier's styling.
+.mg-hero {
+  --mg-hero-tag-color: var(--mg-color-neutral-0);
+}
+
+.mg-hero__tags {
+  @include mg-list-unmarked;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-50);
+  margin: 0;
+  padding: var(--mg-spacing-50) 0;
+
+  > li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .mg-tag:not([class*="mg-tag--"]) {
+    --mg-tag-foreground: rgb(var(--mg-hero-tag-color));
+    --mg-tag-background: transparent;
+    --mg-tag-background-hover: transparent;
+
+    background-color: transparent;
+    border-color: currentColor;
+    color: rgb(var(--mg-hero-tag-color));
+  }
+
+  // The hero's link colour rules are scoped to its copy; a tag is not copy.
+  a.mg-tag:not([class*="mg-tag--"]),
+  a.mg-tag:not([class*="mg-tag--"]):visited,
+  a.mg-tag:not([class*="mg-tag--"]):hover {
+    color: rgb(var(--mg-hero-tag-color));
+  }
+
+  a.mg-tag:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+}
+
+// Neutral variant: the page's own white surface, dark copy and the theme's
+// interactive colour for links, for a page header that should not read as a
+// coloured band. Every pairing is a published text token on white, so the
+// contrast is solved rather than sampled: --mg-color-text and
+// --mg-color-interactive both clear 4.5:1 on white in all five themes.
+// --mg-color-hero-title is not used, because DELTA sets it to a light blue
+// meant for a dark surface.
+.mg-hero.mg-hero--neutral {
+  --mg-border-color-button-primary: transparent;
+  --mg-border-color-button-secondary: transparent;
+  --mg-hero-link-color: var(--mg-color-interactive);
+
+  background-color: rgb(var(--mg-color-neutral-0));
+  color: rgb(var(--mg-color-text));
+
+  // No photograph and no veil: dark copy cannot sit on either.
+  &::before {
+    content: none;
+  }
+
+  .mg-hero__title,
+  .mg-hero__title a,
+  .mg-hero__title a:hover,
+  .mg-hero__title a:visited {
+    color: rgb(var(--mg-color-text));
+  }
+
+  .mg-hero__overlay,
+  .mg-hero__content {
+    a:hover {
+      color: rgb(var(--mg-color-interactive-active));
+    }
+  }
+
+  // Outline tags in the interactive colour.
+  --mg-hero-tag-color: var(--mg-color-interactive);
+
+  // Links in the eyebrow, facts line and summary are underlined: colour alone
+  // separates them from the text around them by only about 2:1 (WCAG 1.4.1).
+  .mg-hero__label a,
+  .mg-hero__summaryText a {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  // Buttons go back to their ordinary page styling.
+  a.mg-button,
+  a.mg-button:hover,
+  a.mg-button:visited {
+    color: rgb(var(--mg-color-button));
+  }
+
+  a.mg-button-primary {
+    background-color: var(--mg-color-button-background);
+
+    &:hover {
+      background-color: var(--mg-color-button-background--hover);
+    }
+  }
+
+  a.mg-button-secondary:not(.mg-button-cta),
+  a.mg-button-secondary:not(.mg-button-cta):hover,
+  a.mg-button-secondary:not(.mg-button-cta):visited {
+    background-color: rgb(var(--mg-color-button-secondary-background));
+    border-color: var(--mg-border-color-button-secondary);
+    color: rgb(var(--mg-color-button));
+  }
+
+  a.mg-button.mg-button-cta,
+  a.mg-button.mg-button-cta:hover,
+  a.mg-button.mg-button-cta:visited {
+    background: transparent;
+    border-color: transparent;
+    color: rgb(var(--mg-color-interactive));
+
+    &::after {
+      background: rgb(var(--mg-color-interactive));
+      color: rgb(var(--mg-color-neutral-0));
+    }
+  }
+
+  a.mg-button:focus-visible {
+    @include mg-focus-ring;
+  }
+
+  // The split layout's padding was spacing for a coloured band. On the page
+  // surface the copy aligns with the content below, so it starts at the top.
+  &.mg-hero--split .mg-hero__content {
+    padding-block-start: 0;
+  }
+}
+
+// Neutral in the background layout drops the photograph even when the markup
+// carries one inline, as Drupal or hand-written markup may: an inline
+// background-image beats any selector, but background-size does not, so the
+// image is sized away. The mobile banner (::after, which inherits the image)
+// and the space reserved for it go too. Three classes, to beat both the
+// mobile banner rules and .mg-hero--no-image.
+.mg-hero.mg-hero--neutral:not(.mg-hero--split) {
+  --mg-hero-banner-block-size: 0px;
+
+  background-size: 0 0;
+
+  &::after {
+    content: none;
+  }
+}
+
+// On a phone the neutral split hero's image is a short banner above the copy
+// rather than a 16:9 block below it, so the page's first screen keeps the
+// title and summary. Visual order only; the copy stays first in the source.
+.mg-hero.mg-hero--neutral.mg-hero--split .mg-hero__media {
+  @media (max-width: $mg-breakpoint-tablet) {
+    aspect-ratio: 3 / 1;
+    order: -1;
+  }
+}

package/scss/Components/MegaMenu/mega-menu.scss

@@ -188,14 +188,6 @@
           background: rgb(var(--mg-color-interactive));
           opacity: 0;
           transform: scaleX(0);
-
-          @media (prefers-reduced-motion: no-preference) {
-            transition:
-              transform var(--mg-motion-duration-fast)
-                var(--mg-motion-easing-standard),
-              opacity var(--mg-motion-duration-fast)
-                var(--mg-motion-easing-standard);
-          }
         }
       }
     }
@@ -386,9 +378,9 @@
 
     font-weight: 600;
     transition:
-      background-color 150ms ease,
-      color 150ms ease,
-      transform 150ms ease;
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
 
     &:hover,
     &:focus-visible {
@@ -405,11 +397,8 @@
       inset-inline-end: auto;
       padding-inline-start: var(--mg-spacing-150);
       margin-inline-end: var(--mg-spacing-150);
-      transition:
-        transform 150ms ease,
-        inset-inline-start 200ms cubic-bezier(0.4, 0, 0.2, 1),
-        inset-inline-end 200ms cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 150ms ease;
+      transition: opacity var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
       opacity: 0.55;
     }
 
@@ -435,43 +424,9 @@
   content: "‹";
 }
 
-/* Brief pulse to draw attention when active becomes visible */
-@keyframes mg-mega-tab-pulse {
-  0% {
-    box-shadow:
-      inset 4px 0 0 0 rgb(var(--mg-color-button)),
-      0 0 0 0 rgb(var(--mg-color-blue-900) / 0);
-  }
-  60% {
-    box-shadow:
-      inset 4px 0 0 0 rgb(var(--mg-color-button)),
-      0 0 0 8px rgb(var(--mg-color-blue-900) / 0.12);
-  }
-  100% {
-    box-shadow:
-      inset 4px 0 0 0 rgb(var(--mg-color-button)),
-      0 0 0 0 rgb(var(--mg-color-blue-900) / 0);
-  }
-}
-
-.mg-mega-content__section-list-link--active {
-  animation: mg-mega-tab-pulse 700ms ease-out 1;
-}
-
-/* Slide motion for right content when tab changes */
-@keyframes mg-mega-content-swap {
-  0% {
-    transform: translateX(8px);
-    opacity: 0.98;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
+// Public compatibility hook: content changes are immediate, without a slide.
 .mg-mega-content__right--sliding {
-  animation: mg-mega-content-swap 180ms ease-out;
+  animation: none;
 }
 
 /* Stronger keyboard focus ring for accessibility.
@@ -518,19 +473,7 @@
     .mg-mega-content__menu--desktop {
       display: block;
 
-      // Blue flash background that fades out (retriggered via React key)
-      animation: mg-mega-right-flash 400ms ease-out;
-
-      // Staggered slide-in for menu items
-      li {
-        animation: mg-mega-item-slide-in 250ms ease-out both;
-
-        @for $i from 1 through 25 {
-          &:nth-child(#{$i}) {
-            animation-delay: #{($i - 1) * 30}ms;
-          }
-        }
-      }
+      // Every destination is available immediately, including long menus.
     }
   }
 
@@ -588,32 +531,6 @@
   }
 }
 
-/* Subtle blue gradient flash that fades to transparent on right content area */
-@keyframes mg-mega-right-flash {
-  0% {
-    background: linear-gradient(
-      to bottom,
-      rgb(var(--mg-color-blue-900) / 0.06) 0%,
-      transparent 100%
-    );
-  }
-  100% {
-    background: transparent;
-  }
-}
-
-/* Menu items slide in from the left */
-@keyframes mg-mega-item-slide-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-12px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 .mg-mega-sidebar-section {
   // This is the <li> inside .mg-mega-sidebar__list. A bare `list-style: none`
   // here overrides the empty-string marker the list sets, and the item's
@@ -684,13 +601,15 @@
   &[aria-expanded="true"] {
     .mg-icon-angle-circled-left {
       transform: rotate(-90deg);
-      transition: transform 0.3s ease-in-out;
+      transition: transform var(--mg-motion-duration-medium)
+        var(--mg-motion-easing-standard);
     }
   }
 
   // Ensure smooth transition for icon default state
   .mg-icon-angle-circled-left {
-    transition: transform 0.3s ease-in-out;
+    transition: transform var(--mg-motion-duration-medium)
+      var(--mg-motion-easing-standard);
   }
 }
 
@@ -713,7 +632,8 @@
   max-height: 80vh;
   top: -100%;
   inset-inline: 0; // RTL-friendly
-  transition: top 0.4s ease-in-out;
+  transition: top var(--mg-motion-duration-medium)
+    var(--mg-motion-easing-standard);
   box-shadow: 0 5px 8px -4px rgb(0 0 0 / 0.25);
 
   &.mg-sidebar-open {
@@ -827,7 +747,8 @@
   max-height: 80vh;
   height: 80vh;
   transform: translateY(-100vh);
-  transition: transform 0.4s ease-in-out;
+  transition: transform var(--mg-motion-duration-medium)
+    var(--mg-motion-easing-standard);
   box-shadow: 0 5px 8px -4px rgb(0 0 0 / 0.25);
 
   &.mg-mega-mobile-sidebar--open {
@@ -910,8 +831,8 @@
   opacity: 0;
   transform: translateX(var(--mg-mega-enter-offset, 8px));
   transition:
-    opacity 180ms ease,
-    transform 180ms ease;
+    opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+    transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
   pointer-events: none;
 
   &[hidden] {
@@ -922,7 +843,13 @@
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
-    animation: mg-mega-surface-enter 180ms ease-out;
+
+    // Establish the entry frame when the hidden surface becomes rendered.
+    // Transitions also reverse smoothly if a close is interrupted by reopening.
+    @starting-style {
+      opacity: 0;
+      transform: translateX(var(--mg-mega-enter-offset, 8px));
+    }
   }
 
   .mg-mega-mobile-sidebar__header {
@@ -967,7 +894,8 @@
   .mg-mega-mobile-sidebar__page {
     padding: var(--mg-spacing-250);
     padding-bottom: max(var(--mg-spacing-300), env(safe-area-inset-bottom));
-    animation: mg-mega-progressive-enter 160ms ease-out;
+    animation: mg-mega-progressive-enter var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
   }
 
   .mg-mega-mobile-sidebar__title {
@@ -1099,36 +1027,20 @@
   z-index: var(--mg-z-index-modal);
 }
 
-@keyframes mg-mega-surface-enter {
-  from {
-    opacity: 0;
-    transform: translateX(var(--mg-mega-enter-offset, 8px));
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 .mg-mega-mobile-sidebar-overlay {
   opacity: 0;
   pointer-events: none;
-  transition: opacity 180ms ease;
+  transition: opacity var(--mg-motion-duration-fast)
+    var(--mg-motion-easing-standard);
   background: rgb(var(--mg-color-black) / 0.16);
 
   &--open {
     opacity: 1;
     pointer-events: auto;
-    animation: mg-mega-backdrop-enter 180ms ease-out;
-  }
-}
 
-@keyframes mg-mega-backdrop-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+    @starting-style {
+      opacity: 0;
+    }
   }
 }
 
@@ -1163,7 +1075,16 @@
   }
 
   // Reduced motion: keep states, remove transition animation.
-  .mg-mega-content {
+  .mg-mega-topbar__item .mg-mega-content,
+  .mg-mega-topbar__item--active .mg-mega-content,
+  .mg-mega-content__section-list-item .mg-mega-content__section-list-link,
+  .mg-mega-content__section-list-item
+    .mg-mega-content__section-list-link::after,
+  .mg-mega-sidebar,
+  .mg-mega-mobile-sidebar,
+  .mg-mega-sidebar-section__item .mg-icon-angle-circled-left,
+  .mg-mega-sidebar-section__item[aria-expanded="true"]
+    .mg-icon-angle-circled-left {
     transition: none;
   }
 }

package/scss/Components/Navigation/Drawer/drawer.scss

@@ -149,3 +149,13 @@
     max-block-size: mg-rem(400);
   }
 }
+
+// The global reduced-motion reset gives every element a tiny transition
+// duration. With the initial `all` transition property, descendants briefly
+// animate inherited visibility and cannot receive opening focus. Disable the
+// properties themselves so an open drawer and its controls appear together.
+@media (prefers-reduced-motion: reduce) {
+  .mg-drawer * {
+    transition-property: none !important;
+  }
+}

package/scss/Components/OnThisPageNav/on-this-page-nav.scss

@@ -46,6 +46,39 @@
     display: none;
   }
 
+  // Line the links up with an mg-container content column instead of the
+  // bar's own padding. The bar stays full-bleed; only its padding changes, to
+  // half the space outside the container plus the container's gutter. A
+  // container is 100% wide below the mobile breakpoint, so the padding is the
+  // gutter alone there.
+  &--align-container {
+    --mg-on-this-page-nav-container: 100vw;
+
+    padding-inline: calc(
+      (100vw - var(--mg-on-this-page-nav-container)) / 2 + #{mg-rem(10)}
+    );
+
+    @media (min-width: $mg-breakpoint-mobile) {
+      --mg-on-this-page-nav-container: #{$mg-breakpoint-mobile};
+    }
+
+    @media screen and (min-width: $mg-breakpoint-tablet) {
+      --mg-on-this-page-nav-container: #{$mg-breakpoint-tablet};
+
+      padding-inline: calc(
+        (100vw - var(--mg-on-this-page-nav-container)) / 2 + #{mg-rem(10)}
+      );
+    }
+
+    @media (min-width: $mg-breakpoint-desktop) {
+      --mg-on-this-page-nav-container: #{$mg-breakpoint-desktop};
+    }
+
+    @media (min-width: $mg-breakpoint-desktop-wide) {
+      --mg-on-this-page-nav-container: #{$mg-breakpoint-desktop-wide};
+    }
+  }
+
   &__list {
     display: flex;
     align-items: center;
@@ -227,6 +260,78 @@
 
 // RTL: flex layout places prevBtn at the right (visual-start) edge and nextBtn
 // at the left (visual-end) edge. The JS scrollBy direction, button visibility,
-// and chevron icon direction are all RTL-aware. The mask-image gradient uses
-// physical `to right` which fades the correct edge in LTR; RTL gradient
-// correction is a known open item.
+// and chevron icon direction are all RTL-aware. The fades are physical
+// gradients, so RTL states each case: a fade only on a side with content
+// hidden behind it, and the trailing (left) edge when nothing is hidden, to
+// match LTR. has-left-overflow and has-right-overflow are set by the script.
+// Each rule outranks the direction-neutral has-left-overflow rule above.
+
+// Nothing hidden, or hidden only on the left (at the start of the list).
+[dir="rtl"] .mg-on-this-page-nav__list,
+[dir="rtl"] .mg-on-this-page-nav--has-left-overflow .mg-on-this-page-nav__list {
+  padding-inline-start: 0;
+  -webkit-mask-image: linear-gradient(
+    to left,
+    #000 calc(100% - var(--mg-spacing-500)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to left,
+    #000 calc(100% - var(--mg-spacing-500)),
+    transparent
+  );
+}
+
+// Hidden only on the right (scrolled to the end of the list).
+[dir="rtl"]
+  .mg-on-this-page-nav--has-right-overflow
+  .mg-on-this-page-nav__list {
+  padding-inline-start: var(--mg-spacing-300);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--mg-spacing-500)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--mg-spacing-500)),
+    transparent
+  );
+}
+
+// Hidden on both sides (mid-scroll).
+[dir="rtl"]
+  .mg-on-this-page-nav--has-left-overflow.mg-on-this-page-nav--has-right-overflow
+  .mg-on-this-page-nav__list {
+  padding-inline-start: var(--mg-spacing-300);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--mg-spacing-500),
+    #000 calc(100% - var(--mg-spacing-500)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--mg-spacing-500),
+    #000 calc(100% - var(--mg-spacing-500)),
+    transparent
+  );
+}
+
+// Anything the browser scrolls into view (keyboard focus, anchors, a pager's
+// scrollIntoView) lands below the docked bar instead of under it (WCAG 2.4.11
+// Focus Not Obscured). The script publishes the bar's height as
+// --mg-on-this-page-nav-block-size while it is sticky, and 0px when it is not.
+// --mg-on-this-page-nav-offset is read here from the root, so set it on :root
+// for it to count.
+// Zero specificity (:where), so a site's own `html { scroll-padding-top }`
+// wins outright. A site that wants both sets --mg-on-this-page-nav-scroll-padding-base to its
+// own value and lets this rule add the bar on top.
+:where(html:has(.mg-on-this-page-nav:not(.mg-on-this-page-nav--hidden))) {
+  // prettier-ignore
+  --mg-on-this-page-nav-scroll-padding: calc(var(--mg-on-this-page-nav-scroll-padding-base, 0px) + var(--mg-on-this-page-nav-offset, 0px) + var(--mg-on-this-page-nav-block-size, 0px));
+
+  scroll-padding-top: var(--mg-on-this-page-nav-scroll-padding);
+}