@undrr/undrr-mangrove 2.1.1 → 2.3.0

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.";

package/scss/Patterns/ContentCard/content-card.scss

@@ -0,0 +1,79 @@
+/**
+ * Content card projections with vertical and book layouts; shared card interaction and metadata.
+ * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/ContentCard/ContentCard.mdx
+ */
+@use "../../assets/scss/mixins" as *;
+
+.mg-card.mg-content-card {
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: none;
+}
+
+.mg-card.mg-content-card--vertical {
+  .mg-card__title {
+    font-size: var(--mg-content-card-title-font-size);
+  }
+}
+
+.mg-card.mg-content-card--book {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  .mg-card__title {
+    font-size: var(--mg-content-card-book-title-font-size);
+  }
+
+  > .mg-card__content {
+    padding: var(--mg-spacing-100) 0 0;
+  }
+  > .mg-card__content:only-child {
+    padding-block-start: 0;
+  }
+  > .mg-card__visual {
+    border-radius: 0;
+    outline: none;
+  }
+
+  &:not(.mg-card__book) {
+    background: var(--mg-content-card-book-background);
+    padding: var(--mg-content-card-book-padding);
+    border-radius: var(--mg-content-card-book-border-radius);
+    box-shadow: var(--mg-content-card-book-shadow);
+
+    &:hover {
+      box-shadow: var(--mg-content-card-book-shadow-hover);
+    }
+  }
+}
+
+.mg-content-card.mg-content-pattern--logo .mg-card__image {
+  object-fit: contain;
+  transform: none;
+  opacity: 1;
+}
+
+.mg-content-card.mg-content-pattern--logo > .mg-card__visual {
+  // Brand marks need clear space; photographs intentionally meet the edge.
+  padding: var(--mg-card-padding);
+  outline: none;
+}
+
+.mg-content-card-grid {
+  @include mg-list-unmarked;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: var(--mg-spacing-200);
+  margin: 0;
+  padding: 0;
+  align-items: start;
+
+  > li {
+    min-inline-size: 0;
+  }
+  .mg-content-card {
+    margin-block-end: 0;
+  }
+}

package/scss/Patterns/ContentTeaser/content-teaser.scss

@@ -0,0 +1,174 @@
+/**
+ * Content teaser patterns compose shared card geometry with semantic metadata.
+ * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/ContentTeaser/ContentTeaser.mdx
+ */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
+.mg-content-teaser,
+.mg-content-card {
+  min-inline-size: 0;
+  inline-size: 100%;
+  overflow-wrap: anywhere;
+
+  > .mg-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mg-spacing-75);
+  }
+
+  .mg-content-meta__before-title,
+  .mg-content-meta__metadata,
+  .mg-content-meta__attribution {
+    font-family: var(--mg-font-family-ui);
+    font-size: var(--mg-content-meta-font-size);
+    line-height: var(--mg-font-line-height-700);
+  }
+
+  .mg-content-meta__before-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--mg-spacing-50) var(--mg-spacing-100);
+  }
+
+  .mg-card__label {
+    margin: 0;
+    font-size: inherit;
+  }
+
+  .mg-card__title {
+    margin: 0;
+    padding: 0;
+    font-family: var(--mg-font-family-ui);
+  }
+
+  .mg-card__summary,
+  .mg-content-meta__metadata {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.mg-content-meta__group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  max-inline-size: 100%;
+  gap: var(--mg-spacing-50) var(--mg-spacing-100);
+}
+
+.mg-content-meta__attribution {
+  @include mg-list-unmarked;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-50) var(--mg-spacing-100);
+  margin: 0;
+  padding: 0;
+}
+
+.mg-content-meta__metadata-link {
+  display: inline-block;
+  position: relative;
+  z-index: 2; // Above the title's stretched link, within the card stacking context.
+  min-block-size: var(--mg-spacing-250);
+  text-decoration: underline;
+
+  &:focus-visible {
+    @include mg-focus-ring;
+  }
+}
+
+// Category links share the resting label treatment. Other metadata links keep
+// their ordinary underline; categories reveal theirs on hover and keyboard focus.
+.mg-content-meta__metadata-link.mg-card__label {
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+}
+
+.mg-content-pattern--logo > .mg-card__visual {
+  border: 0;
+}
+
+.mg-content-teaser-list {
+  @include mg-list-unmarked;
+
+  display: grid;
+  gap: var(--mg-spacing-200);
+  margin: 0;
+  padding: 0;
+
+  > li {
+    min-inline-size: 0;
+  }
+
+  .mg-content-teaser {
+    margin-block-end: 0;
+  }
+}
+
+// Enclosed listing surfaces follow horizontal cards, independently of book-card
+// publication tokens. Clip only photographs so native focus rings stay visible.
+.mg-card.mg-content-teaser {
+  background: var(--mg-content-teaser-background);
+  padding: 0;
+  gap: 0;
+  border-radius: var(--mg-content-teaser-border-radius);
+  box-shadow: var(--mg-content-teaser-shadow);
+
+  > .mg-card__content {
+    padding: var(--mg-content-teaser-padding);
+  }
+
+  &:has(> .mg-card__visual) {
+    gap: 0;
+  }
+
+  > .mg-card__visual {
+    margin: var(--mg-content-teaser-padding);
+
+    @media (min-width: $mg-breakpoint-mobile) {
+      margin-inline-end: 0;
+      max-inline-size: none;
+    }
+  }
+
+  &[data-content-media="photo"] {
+    > .mg-card__visual {
+      align-self: stretch;
+      margin: 0;
+      max-inline-size: none;
+      border: 0;
+      aspect-ratio: 16 / 9;
+      border-start-start-radius: var(--mg-content-teaser-border-radius);
+      border-start-end-radius: var(--mg-content-teaser-border-radius);
+
+      @media (min-width: $mg-breakpoint-mobile) {
+        aspect-ratio: auto;
+        border-start-end-radius: 0;
+        border-end-start-radius: var(--mg-content-teaser-border-radius);
+      }
+    }
+
+    .mg-card__image {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &:hover {
+    box-shadow: var(--mg-content-teaser-shadow-hover);
+  }
+
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}

package/scss/Patterns/HubHeader/hub-header.scss

@@ -6,6 +6,9 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
  */
+@use "../../assets/scss/mixins" as *;
+@use "../../assets/scss/config" as *;
+
 // Deliberately not a tab set and deliberately not the mega menu topbar. Both
 // mark the active item with a 3px bottom border; so does OnThisPageNav. A
 // leading rule is the repo's existing idiom for "the destination you are on"

package/scss/Patterns/RichContent/rich-content.scss

@@ -7,6 +7,7 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/RichContent/RichContent.mdx
  */
+@use "../../assets/scss/mixins" as *;
 
 // The pattern's scroll wrapper is editorial structure, not a component
 // island. Root classes never exclude the root's own content.

package/scss/Patterns/_shared/pattern-demo.scss

@@ -7,7 +7,7 @@
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/LandingPages/LandingPages.mdx
  */
 // Demo-only story scaffolding (`mg-demo-*`), imported directly by pattern stories.
-@import "../../assets/scss/variables";
+@use "../../assets/scss/config" as *;
 
 .mg-demo-lede,
 .mg-demo-intro {

package/scss/Utilities/Loader/loader.scss

@@ -7,6 +7,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/Loader/Loader.mdx
  */
+@use "../../assets/scss/breakpoints" as *;
+
 // * loader start *//
 
 @keyframes mg-spin {

package/scss/Utilities/ShowMore/show-more.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/ShowMore/ShowMore.mdx
  */
+@use "../../assets/scss/config" as *;
+
 :root {
   --mg-show-more-height: 200px;
 }

package/scss/Utilities/SkipLink/skip-link.scss

@@ -6,6 +6,8 @@
  * Full documentation:
  * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/SkipLink/SkipLink.mdx
  */
+@use "../../assets/scss/mixins" as *;
+
 // Skip link.
 
 // Visually hidden until focused. Deliberately not .mg-u-sr-only: that utility

package/scss/assets/fonts/noto-kufi-arabic/noto-kufi-arabic.scss

@@ -1,3 +1,5 @@
+@use "../../scss/font-paths" as *;
+
 /* Noto Kufi Arabic - Arabic headings.
    OFL-1.1. Repackaged from @fontsource/noto-kufi-arabic v5.3.0 by the UNDRR asset library;
    see https://assets.undrr.org/fonts/noto-kufi-arabic/v1.1.0/.

package/scss/assets/fonts/noto-sans-arabic/noto-sans-arabic.scss

@@ -1,3 +1,5 @@
+@use "../../scss/font-paths" as *;
+
 /* Noto Sans Arabic - Arabic body text.
    OFL-1.1. Repackaged from @fontsource/noto-sans-arabic v5.3.0 by the UNDRR asset library;
    see https://assets.undrr.org/fonts/noto-sans-arabic/v1.0.0/.

package/scss/assets/fonts/roboto/roboto.scss

@@ -1,15 +1,15 @@
-@import "sass/variables";
-@import "sass/mixins";
+@use "sass/variables" as *;
+@use "sass/mixins" as *;
 
 // @import "sass/Thin";
 // @import "sass/ThinItalic";
-@import "sass/Light";
-@import "sass/LightItalic";
-@import "sass/Regular";
-@import "sass/Italic";
-@import "sass/Medium";
-@import "sass/MediumItalic";
-@import "sass/Bold";
-@import "sass/BoldItalic";
-@import "sass/Black";
-@import "sass/BlackItalic";
+@use "sass/Light" as *;
+@use "sass/LightItalic" as *;
+@use "sass/Regular" as *;
+@use "sass/Italic" as *;
+@use "sass/Medium" as *;
+@use "sass/MediumItalic" as *;
+@use "sass/Bold" as *;
+@use "sass/BoldItalic" as *;
+@use "sass/Black" as *;
+@use "sass/BlackItalic" as *;

package/scss/assets/fonts/roboto/sass/_Black.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Black */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_BlackItalic.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Black Italic */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_Bold.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Bold */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_BoldItalic.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Bold Italic */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_Italic.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Italic */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_Light.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Light */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_LightItalic.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Light Italic */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_Medium.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Medium */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_MediumItalic.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Medium Italic */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_Regular.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Regular */
 @font-face {
   font-family: Roboto;

package/scss/assets/fonts/roboto/sass/_variables.scss

@@ -1,2 +1 @@
-$FontName: "Roboto" !default;
-$font-version: "2.137" !default;
+@forward "../../../scss/font-paths" show $FontName, $font-version;

package/scss/assets/fonts/roboto/sass/roboto.scss

@@ -1,15 +1,15 @@
-@import "variables";
-@import "mixins";
+@use "variables" as *;
+@use "mixins" as *;
 
 // @import "Thin";
 // @import "ThinItalic";
-@import "Light";
-@import "LightItalic";
-@import "Regular";
-@import "Italic";
-@import "Medium";
-@import "MediumItalic";
-@import "Bold";
-@import "BoldItalic";
-@import "Black";
-@import "BlackItalic";
+@use "Light" as *;
+@use "LightItalic" as *;
+@use "Regular" as *;
+@use "Italic" as *;
+@use "Medium" as *;
+@use "MediumItalic" as *;
+@use "Bold" as *;
+@use "BoldItalic" as *;
+@use "Black" as *;
+@use "BlackItalic" as *;

package/scss/assets/fonts/roboto-condensed/roboto-condensed.scss

@@ -1,8 +1,8 @@
-@import "sass/variables";
-@import "sass/mixins";
-@import "sass/Light";
-@import "sass/LightItalic";
-@import "sass/Regular";
-@import "sass/Italic";
-@import "sass/Bold";
-@import "sass/BoldItalic";
+@use "sass/variables" as *;
+@use "sass/mixins" as *;
+@use "sass/Light" as *;
+@use "sass/LightItalic" as *;
+@use "sass/Regular" as *;
+@use "sass/Italic" as *;
+@use "sass/Bold" as *;
+@use "sass/BoldItalic" as *;

package/scss/assets/fonts/roboto-condensed/sass/_Bold.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Bold */
 @font-face {
   font-family: "Roboto Condensed";

package/scss/assets/fonts/roboto-condensed/sass/_BoldItalic.scss

@@ -1,3 +1,7 @@
+@use "../../../scss/font-paths" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
 /* BEGIN Bold Italic */
 @font-face {
   font-family: "Roboto Condensed";