@undrr/undrr-mangrove 2.1.1 → 2.3.0

package/scss/Components/Cards/Card/card.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/Card/VerticalCard.mdx
  */
+@use "../../../assets/scss/mixins" as *;
+@use "../../../assets/scss/config" as *;
+
 /* content-card start */
 
 // MG CARD using CSS GRID
@@ -144,6 +147,12 @@
   }
 
   &__hc.mg-card-book__hc {
+    > .mg-card__content {
+      grid-column: 1 / -1;
+      grid-row: auto;
+      min-inline-size: 0;
+    }
+
     .mg-card__visual {
       align-self: flex-start;
       border: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
@@ -157,11 +166,16 @@
 
     &:has(.mg-card__visual) {
       grid-template-rows: unset;
-      gap: 0 var(--mg-spacing-100);
+      gap: var(--mg-spacing-150);
 
       @media (min-width: $mg-breakpoint-mobile) {
-        grid-template-columns: 160px 1fr;
-        grid-template-rows: 1fr auto;
+        grid-template-columns: 160px minmax(0, 1fr);
+        grid-template-rows: auto;
+
+        > .mg-card__content {
+          grid-column: 2;
+          grid-row: 1;
+        }
       }
     }
   }
@@ -264,6 +278,85 @@
   }
 }
 
+// Photo media forms the card edge; publication teasers preserve complete covers.
+// Clip only the visual so content focus rings can extend beyond the surface.
+.mg-card__vc:not(.mg-card__book),
+.mg-card__hc:not(.mg-card-book__hc) {
+  padding: 0;
+  gap: 0;
+
+  > .mg-card__content {
+    min-inline-size: 0;
+    padding: var(--mg-card-padding);
+  }
+
+  > .mg-card__visual {
+    min-inline-size: 0;
+    border-radius: 0;
+    border-start-start-radius: var(--mg-card-border-radius);
+    border-start-end-radius: var(--mg-card-border-radius);
+    outline-offset: -1px;
+  }
+}
+
+.mg-card__vc:not(.mg-card__book):has(> .mg-card__visual) {
+  > .mg-card__content {
+    padding-block-start: calc(var(--mg-card-padding) + var(--mg-spacing-50));
+  }
+}
+
+.mg-card__hc:not(.mg-card-book__hc) {
+  grid-template-columns: minmax(0, 1fr);
+
+  > .mg-card__content {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  &:has(> .mg-card__visual) {
+    grid-template-rows: 300px auto;
+
+    > .mg-card__content {
+      padding-block-start: calc(var(--mg-card-padding) + var(--mg-spacing-100));
+    }
+
+    @media (min-width: $mg-breakpoint-mobile) {
+      grid-template-columns: 160px minmax(0, 1fr);
+      grid-template-rows: auto;
+
+      > .mg-card__visual {
+        border-start-end-radius: 0;
+        border-end-start-radius: var(--mg-card-border-radius);
+      }
+
+      > .mg-card__content {
+        grid-column: 2;
+        padding-block-start: var(--mg-card-padding);
+        padding-inline-start: calc(
+          var(--mg-card-padding) + var(--mg-spacing-100)
+        );
+      }
+    }
+
+    @media (min-width: $mg-breakpoint-tablet) {
+      grid-template-columns: 330px minmax(0, 1fr);
+    }
+  }
+}
+
+// Without metadata, the title starts at the content inset. Do not stack the
+// media gap and the title's label-separation padding above the first text.
+.mg-card__vc:not(.mg-card__book),
+.mg-card__hc:not(.mg-card-book__hc) {
+  > .mg-card__content:has(> .mg-card__title:first-child) {
+    padding-block-start: var(--mg-card-padding);
+
+    > .mg-card__title {
+      padding-block-start: 0;
+    }
+  }
+}
+
 // RTL chevron — flip direction
 [dir="rtl"] .mg-card__title a::after {
   transform: rotate(225deg);
@@ -420,6 +513,61 @@ span.mg-card__label {
   }
 }
 
+// Publication teasers: the cover is the object, without a second raised frame.
+.mg-card.mg-card__book,
+.mg-card.mg-card-book__hc {
+  background: var(--mg-card-publication-background);
+  padding: var(--mg-card-publication-padding);
+  border-radius: var(--mg-card-publication-border-radius);
+  box-shadow: var(--mg-card-publication-shadow);
+
+  &:hover {
+    box-shadow: var(--mg-card-publication-shadow-hover);
+  }
+
+  > .mg-card__visual {
+    aspect-ratio: auto;
+    border-radius: 0;
+    outline: none;
+  }
+
+  .mg-card__image {
+    block-size: auto;
+    object-fit: contain;
+  }
+
+  &:hover .mg-card__image {
+    opacity: 1;
+    transform: none;
+  }
+
+  .mg-card__title:first-child {
+    padding-block-start: 0;
+  }
+
+  &.mg-card--secondary {
+    padding-inline-start: var(--mg-card-padding);
+  }
+}
+
+// An unlinked teaser never advertises elevation on hover, including themed surfaces.
+.mg-card.mg-card__book.mg-card--no-link:hover,
+.mg-card.mg-card-book__hc.mg-card--no-link:hover,
+.mg-card:is(.mg-card__book, .mg-card-book__hc):has(
+    .mg-card__title a:not([href])
+  ):hover,
+.mg-card:is(.mg-card__book, .mg-card-book__hc):has(
+    .mg-card__title a[href=""]
+  ):hover {
+  box-shadow: var(--mg-card-publication-shadow);
+}
+
+.mg-card__book {
+  display: grid;
+  align-content: start;
+  gap: var(--mg-spacing-100);
+}
+
 // END of CARD
 
 // Icon Card variant
@@ -481,6 +629,11 @@ span.mg-card__label {
       aspect-ratio: 1/1;
     }
 
+    // Small glyphs and fixed-size badges do not need the illustration frame.
+    &:has(.mg-card__icon-wrap--small) {
+      aspect-ratio: auto;
+    }
+
     // Fixed-size badges do not need the full illustration frame.
     &:has(.mg-card__icon-wrap--colored) {
       aspect-ratio: auto;

package/scss/Components/Cards/StatsCard/stats-card.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/StatsCard/StatsCard.mdx
  */
+@use "../../../assets/scss/breakpoints" as *;
+@use "../../../assets/scss/mixins" as *;
+
 /* Stats Card Component */
 .mg-stats-card {
   width: 100%;
@@ -142,10 +145,19 @@
 /* Variant: Compact */
 .mg-stats-card--compact {
   .mg-stats-card-item {
-    padding: var(--mg-spacing-300);
+    padding: var(--mg-spacing-150);
+    gap: var(--mg-spacing-50);
 
     @include devicebreak(small) {
-      padding: var(--mg-spacing-200);
+      padding: var(--mg-spacing-100);
+    }
+
+    // Compact spacing is owned by the gap, without child margins stacking up.
+    &__icon,
+    &__value,
+    &__bottom-label,
+    &__summary {
+      margin: 0;
     }
 
     &__value {

package/scss/Components/CiteThis/cite-this.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CiteThis/CiteThis.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
 
 .mg-cite-this {
   max-inline-size: 48rem;

package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CookieConsentBanner/CookieConsentBanner.mdx
  */
+@use "../../assets/scss/mixins" as *;
+
 // Mangrove theme bridge for the externally loaded vanilla-cookieconsent UI.
 // The CDN stylesheet is appended after the local bundle and declares the same
 // custom properties, so these token mappings intentionally carry importance.

package/scss/Components/DataViz/Legend/legend.scss

@@ -6,6 +6,7 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/DataViz/Legend/Legend.mdx
  */
+@use "../../../assets/scss/mixins" as *;
 
 .mg-legend {
   display: flex;

package/scss/Components/ErrorPages/error-pages.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ErrorPages/ErrorPage.mdx
  */
+@use "../../assets/scss/config" as *;
+
 .mg-error-page {
   min-height: 100vh;
   background-color: rgb(var(--mg-color-blue-900));

package/scss/Components/Footer/footer.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Footer/Footer.mdx
  */
+@use "../../assets/scss/config" as *;
+
 .mg-footer {
   --mg-gutenberg-spacer: 0;
 }

package/scss/Components/Forms/FormAction/form-action.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormAction/FormAction.mdx
  */
+@use "../../../assets/scss/config" as *;
+
 .mg-form-action {
   align-items: stretch;
   display: flex;

package/scss/Components/Forms/FormGroup/form-group.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormGroup/FormGroup.mdx
  */
+@use "../../../assets/scss/mixins" as *;
+
 // FormGroup — styled fieldset/legend for grouping related form controls.
 
 .mg-form-group {

package/scss/Components/Forms/Range/range.scss

@@ -6,6 +6,7 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Range/Range.mdx
  */
+@use "../../../assets/scss/mixins" as *;
 
 @mixin mg-range-thumb {
   appearance: none;

package/scss/Components/Forms/SegmentedControl/segmented-control.scss

@@ -8,6 +8,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/SegmentedControl/SegmentedControl.mdx
  */
+@use "../../../assets/scss/mixins" as *;
+@use "../../../assets/scss/config" as *;
 
 // The control is a presentation layer over a native radio group: a fieldset, a
 // legend and one <input type="radio"> per segment, each followed by its own

package/scss/Components/Forms/Select/select.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Select/Select.mdx
  */
+@use "../../../assets/scss/config" as *;
+
 // Select-specific overrides.
 // Shared form styles live in _form-base.scss (.mg-form-select).
 

package/scss/Components/Forms/_form-base.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 // Shared BEM-scoped form styles for Mangrove form components.
 // All form components import this partial for consistent base styling.
 

package/scss/Components/Gallery/gallery.scss

@@ -6,6 +6,10 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Gallery/Gallery.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 /* Photo Gallery Component */
 .mg-gallery {
   position: relative;

package/scss/Components/Hero/hero.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Hero/Hero.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 // The veil between the photograph and the copy, in two layers.
 
 // The lower layer is the brand tint that has always been here: the hero

package/scss/Components/HighlightBox/highlight-box.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/HighlightBox/HighlightBox.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+@use "../../assets/scss/config" as *;
+
 // Highlight box component (RTL-safe)
 // https://gitlab.com/undrr/web-backlog/-/issues/1678
 // Variables and mixins are imported at the theme level via @use in mangrove.scss

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

@@ -6,10 +6,15 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 .mg-mega-wrapper {
   position: relative;
   background: rgb(var(--mg-color-white));
-  box-shadow: inset 0 -1px 0 rgb(var(--mg-color-neutral-600) / 0.24);
+
+  // Paint below the header so opaque logo/trigger surfaces cannot cover it.
+  box-shadow: 0 1px 0 rgb(var(--mg-color-neutral-600) / 0.24);
   z-index: var(--mg-z-index-nav);
 }
 
@@ -19,9 +24,7 @@
   align-items: flex-start;
   z-index: var(--mg-z-index-nav);
 
-  // In the default variant this class is on the nav <ul> itself (the branded
-  // variant puts it on a wrapping <div> and uses &__nav for the list), so it
-  // is a list class and carries the house rule.
+  // Plain HTML consumers can use this class directly on a navigation list.
   @include mg-list-unmarked;
 
   padding: 0;
@@ -33,17 +36,38 @@
   }
 
   // Kept max-width based to avoid a Firefox glitch with .mg-container-full-width.
-  @media screen and (max-width: $mg-breakpoint-tablet) {
-    padding-left: mg-rem(40); // space for the icon button
-    overflow-x: hidden; // primarily for mobile
+  @media screen and (width < $mg-breakpoint-tablet) {
+    position: relative;
+    padding-inline-start: mg-rem(40); // space for the icon button
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+  }
+
+  // React keeps the hamburger outside the scrolling rail in both variants.
+  // Avoid sticky flex children: WebKit can scroll them out of view in RTL.
+  @media screen and (width < $mg-breakpoint-tablet) {
+    &:has(> .mg-mega-topbar__nav) {
+      padding-inline-start: 0;
+      overflow: hidden;
+    }
+
+    > .mg-mega-topbar-mobile__icon-button {
+      position: relative;
+      inset: auto;
+      width: mg-rem(40);
+      flex-shrink: 0;
+      align-self: stretch;
+      background: rgb(var(--mg-color-white));
+    }
   }
 
   // --- Branded variant (with inline logo) ---
   &--branded {
     align-items: center;
 
-    @media screen and (max-width: $mg-breakpoint-tablet) {
-      padding-left: 0; // logo replaces the left padding
+    @media screen and (width < $mg-breakpoint-tablet) {
+      padding-inline-start: 0; // logo replaces the left padding
       overflow-x: hidden;
     }
 
@@ -69,6 +93,10 @@
     justify-content: flex-end;
     flex: 1;
 
+    @media screen and (width < $mg-breakpoint-tablet) {
+      justify-content: flex-start;
+    }
+
     @include mg-list-unmarked;
 
     margin: 0;
@@ -106,11 +134,23 @@
 
     @include mg-list-unmarked;
 
-    // Clip overflow on mobile so the scrolling content hint works correctly.
-    // pointer-events is left as auto here — it is restricted only when JS has
-    // initialised the full mega menu (see .mg-mega-wrapper--js-active below).
-    @media screen and (max-width: $mg-breakpoint-tablet) {
-      overflow: hidden;
+    // The branded rail scrolls independently of the logo and hamburger.
+    @media screen and (width < $mg-breakpoint-tablet) {
+      overflow-x: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: none;
+      cursor: grab;
+      user-select: none;
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      .mg-mega-topbar__item-link {
+        cursor: inherit;
+      }
+
+      justify-content: flex-start;
       flex: 1;
       min-width: 0;
     }
@@ -145,6 +185,7 @@
       }
     }
 
+    flex-shrink: 0;
     font-size: var(--mg-font-size-300);
     color: rgb(var(--mg-color-interactive));
     font-weight: bold;
@@ -685,6 +726,7 @@
 .mg-mega-topbar-mobile__icon-button {
   // Mobile-first: Display by default
   position: absolute;
+  inset-block: 0;
 
   // Anchored to both edges of the topbar rather than assumed to be
   // viewport-wide: a `100vw` overlay overhangs and is clipped by the parent's
@@ -698,7 +740,8 @@
   color: rgb(var(--mg-color-interactive));
   font-size: mg-rem(20);
   width: auto;
-  height: 100%;
+  height: auto;
+  min-height: mg-rem(44);
   padding: var(--mg-spacing-100);
   border: none;
   cursor: pointer;
@@ -790,24 +833,8 @@
   box-shadow: 3px 0 6px -2px rgb(0 0 0 / 0.15);
 }
 
-// Full JS mega menu — sidebar handles mobile nav, so topbar items must NOT be
-// interactive on small screens. This class is added by the React component on
-// mount (useEffect), so it is absent when JS fails or has not yet hydrated,
-// preserving a clickable fallback for server-rendered nav markup.
-.mg-mega-wrapper--js-active {
-  @media screen and (max-width: $mg-breakpoint-tablet) {
-    .mg-mega-topbar__nav {
-      pointer-events: none;
-    }
-
-    .mg-mega-topbar__item {
-      pointer-events: none;
-    }
-  }
-}
-
 // Mobile progressive navigation: one stable surface at every depth. Existing
-// desktop classes and the full-strip opening target remain compatible.
+// desktop classes remain compatible; the rail opens individual sections.
 .mg-mega-mobile-sidebar--progressive {
   position: fixed;
   inset: 0 0 auto;
@@ -1091,7 +1118,7 @@
 
 // Existing plain HTML navigation needs no hamburger gutter or JS enhancement.
 // Keep overflow local to the rail so every destination remains reachable.
-@media screen and (max-width: $mg-breakpoint-tablet) {
+@media screen and (width < $mg-breakpoint-tablet) {
   .mg-mega-topbar:not(
     .mg-mega-topbar--branded,
     :has(.mg-mega-topbar-mobile__icon-button)

package/scss/Components/MegaMenu/megamenu.scss

@@ -7,5 +7,5 @@
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
  */
 // megamenu.scss — DEPRECATED, use mega-menu.scss
-@import "./mega-menu";
+@forward "./mega-menu";
 @warn "megamenu.scss is deprecated. Import mega-menu.scss instead.";

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

@@ -7,6 +7,7 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Drawer/Drawer.mdx
  */
+@use "../../../assets/scss/config" as *;
 
 .mg-drawer,
 .mg-floating-panel {

package/scss/Components/Navigation/Tree/tree.scss

@@ -6,6 +6,7 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Tree/Tree.mdx
  */
+@use "../../../assets/scss/mixins" as *;
 
 .mg-tree {
   // The selected label uses the text colour, not the interactive colour: IRP's

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

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/OnThisPageNav/OnThisPageNav.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 // On this page nav
 // https://gitlab.com/undrr/web-backlog/-/issues/337
 // A sticky horizontal navigation bar that links to page sections.

package/scss/Components/PageHeader/page-header.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 .mg-page-header {
   // Base styles for page header
 

package/scss/Components/Pager/pager.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Pager/Pager.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 // ========================================
 // Pager — standalone pagination component
 // ========================================

package/scss/Components/PreviewAccess/preview-access.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PreviewAccess/PreviewAccess.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 // Preview access
 // Soft preview gate for unfinished UNDRR pages. CSS hides the page on parse
 // (via :has()); the runtime layers a modal over it and asks for a PIN.

package/scss/Components/QuoteHighlight/quote-highlight.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/QuoteHighlight/QuoteHighlight.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+
 .mg-quote-highlight {
   display: flex;
   flex-direction: column;

package/scss/Components/ScrollContainer/scroll-container.scss

@@ -6,6 +6,10 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ScrollContainer/ScrollContainer.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 .mg-scroll {
   position: relative;
   display: flex;

package/scss/Components/Snackbar/snackbar.scss

@@ -7,6 +7,7 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Snackbar/Snackbar.mdx
  */
+@use "../../assets/scss/config" as *;
 
 .mg-snackbar-wrapper {
   position: fixed;