@undrr/undrr-mangrove 2.1.1 → 2.2.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,6 +6,9 @@
  * 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));

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;

package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss

@@ -6,7 +6,10 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
  */
-@import "deprecated-teaser-hide";
+@use "../Forms/form-base";
+@use "deprecated-teaser-hide" as *;
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
 
 // Component-specific variables (using Mangrove tokens)
 // Colors
@@ -855,15 +858,63 @@ $search-input-padding-x: mg-rem(44);
   // The book card's existing start alignment keeps cover rows intrinsic.
   .mg-card__book {
     block-size: 100%;
+    max-width: none;
+    inline-size: 100%;
   }
 
   // Remove list-style dividers in grid/card mode
   .mg-search__result {
+    inline-size: 100%;
+    min-inline-size: 0;
     padding-bottom: 0;
     border-bottom: 0;
   }
 }
 
+// A catalogue aligns captions through a shared media stage, without cropping
+// supplied artwork or inventing a cover for a result that has none. Only search
+// galleries use this staging; standalone publication teasers remain intrinsic.
+.mg-search__results-grid--book {
+  @media (min-width: $mg-breakpoint-tablet) {
+    &:has(.mg-card__visual) {
+      .mg-card__book > .mg-card__visual,
+      .mg-card__book:not(:has(.mg-card__visual))::before {
+        inline-size: 100%;
+        block-size: var(--mg-search-book-cover-height);
+      }
+
+      .mg-card__book:not(:has(.mg-card__visual))::before {
+        content: "";
+      }
+
+      .mg-card__book > .mg-card__visual {
+        aspect-ratio: auto;
+        border: 0;
+        align-items: flex-end;
+        justify-content: flex-start;
+
+        > a {
+          display: flex;
+          align-items: flex-end;
+          justify-content: flex-start;
+          inline-size: 100%;
+          block-size: 100%;
+        }
+
+        img {
+          align-self: flex-end;
+          inline-size: auto;
+          block-size: auto;
+          max-inline-size: 100%;
+          max-block-size: 100%;
+          object-fit: contain;
+          border: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
+        }
+      }
+    }
+  }
+}
+
 // ========================================
 // Result Animations
 // Sequential fade-in and slide from left for search results.

package/scss/Components/Tab/tab.scss

@@ -6,6 +6,10 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Tab/Tab.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 .mg-tabs__list {
   background: var(--mg-color-tabbar-background);
   width: 100%;

package/scss/Components/TableOfContents/table-of-contents.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TableOfContents/TableOfContents.mdx
  */
+@use "../../assets/scss/mixins" as *;
+
 .mg-table-of-contents {
   padding-inline-start: var(--mg-spacing-200);
   border-inline-start: 2px solid rgb(var(--mg-color-neutral-300));

package/scss/Components/TextCta/text-cta.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TextCta/TextCta.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+@use "../../assets/scss/config" as *;
+
 /* CTA banner start */
 
 .mg-cta {

package/scss/Components/TextCta/textcta.scss

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

package/scss/Components/UserFeedback/user-feedback.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/UserFeedback/UserFeedback.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 .mg-user-feedback {
   align-items: center;
   box-sizing: border-box;

package/scss/Molecules/ImageCaption/image-caption.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+
 /* image caption start */
 .mg-image-caption {
   border-bottom: 2px solid rgb(var(--mg-color-black));

package/scss/Molecules/SectionHeader/sectionheader.scss

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