@undrr/undrr-mangrove 2.0.0 → 2.1.0

package/scss/Molecules/SectionHeader/section-header.scss

@@ -4,7 +4,7 @@
  * Section header block with category tag, headline, and optional action link.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
  */
 /* header section start */
 .mg-section-header {

package/scss/Molecules/SectionHeader/sectionheader.scss

@@ -4,7 +4,7 @@
  * Legacy stylesheet forwarding to section-header.scss.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
  */
 // sectionheader.scss — DEPRECATED, use section-header.scss
 @import "./section-header";

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

@@ -4,7 +4,7 @@
  * Content hub banner header with theme styling, breadcrumb trail, and description copy.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
  */
 // 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

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

@@ -0,0 +1,177 @@
+/**
+ * Rich content
+ *
+ * Opt-in semantic defaults for trusted editorial HTML. Classed descendants
+ * keep their own presentation; classless structural wrappers pass through.
+ *
+ * Full documentation:
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/RichContent/RichContent.mdx
+ */
+
+// The pattern's scroll wrapper is editorial structure, not a component
+// island. Root classes never exclude the root's own content.
+@mixin mg-editorial-element($element) {
+  .mg-content
+    #{$element}:not(
+      :where(
+        .mg-content [class]:not(.mg-content__scroll),
+        .mg-content [class]:not(.mg-content__scroll) *,
+        .mg-content
+          :is(
+            nav,
+            form,
+            fieldset,
+            button,
+            [role="navigation"],
+            [role="menu"],
+            [role="menubar"],
+            [role="tablist"],
+            [role="dialog"],
+            [role="toolbar"],
+            [role="listbox"],
+            [role="tree"]
+          ),
+        .mg-content
+          :is(
+            nav,
+            form,
+            fieldset,
+            button,
+            [role="navigation"],
+            [role="menu"],
+            [role="menubar"],
+            [role="tablist"],
+            [role="dialog"],
+            [role="toolbar"],
+            [role="listbox"],
+            [role="tree"]
+          )
+          *
+      )
+    ) {
+    @content;
+  }
+}
+
+@include mg-editorial-element(":is(p, ul, ol, dl)") {
+  margin-block: 0 var(--mg-spacing-150);
+}
+
+@include mg-editorial-element(":is(h1, h2, h3, h4, h5, h6)") {
+  margin-block: var(--mg-spacing-200) var(--mg-spacing-100);
+  line-height: var(--mg-font-line-height-500);
+}
+
+@include mg-editorial-element(":is(ul, ol)") {
+  padding-inline: 0;
+  padding-inline-start: var(--mg-spacing-250);
+}
+
+@include mg-editorial-element("li") {
+  padding-inline: 0;
+  margin-block-end: var(--mg-spacing-25);
+}
+
+@include mg-editorial-element("li > :is(ul, ol)") {
+  margin-block: var(--mg-spacing-50) 0;
+}
+
+@include mg-editorial-element(
+  "blockquote:not(:where(:has(.mg-highlight-box)))"
+) {
+  margin-block: var(--mg-spacing-200);
+  margin-inline: 0;
+  padding-inline-start: var(--mg-spacing-150);
+  border-inline-start: 3px solid rgb(var(--mg-color-neutral-400));
+  font-size: var(--mg-font-size-300);
+  font-weight: 400;
+  line-height: var(--mg-font-line-height-700);
+}
+
+@include mg-editorial-element("cite") {
+  display: inline;
+  margin: 0;
+  font-style: italic;
+}
+
+@include mg-editorial-element("a:not(:where([role=button]))") {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+@include mg-editorial-element("hr") {
+  margin-block: var(--mg-spacing-200);
+}
+
+@include mg-editorial-element("figure") {
+  margin-block: var(--mg-spacing-200);
+  margin-inline: 0;
+}
+
+@include mg-editorial-element("figure > img") {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  padding: 0;
+}
+
+@include mg-editorial-element(":is(figcaption, caption)") {
+  font-size: var(--mg-font-size-250);
+  line-height: var(--mg-font-line-height-700);
+  text-align: start;
+}
+
+@include mg-editorial-element("figcaption") {
+  margin-block-start: var(--mg-spacing-50);
+}
+
+@include mg-editorial-element("table") {
+  width: 100%;
+  border-collapse: collapse;
+  margin-block: var(--mg-spacing-150);
+}
+
+@include mg-editorial-element(":is(th, td)") {
+  padding: var(--mg-spacing-75) var(--mg-spacing-100);
+  border: 1px solid rgb(var(--mg-color-neutral-400));
+  text-align: start;
+  vertical-align: top;
+}
+
+@include mg-editorial-element("caption") {
+  margin-block-end: var(--mg-spacing-50);
+  font-weight: 600;
+}
+
+@include mg-editorial-element("code:not(:where(pre code))") {
+  // Code is prose, not a link: use the readable text/surface pairing rather
+  // than interactive ink on its tinted global background in every theme.
+  color: rgb(var(--mg-color-text));
+  background: rgb(var(--mg-color-neutral-50));
+}
+
+@include mg-editorial-element("pre") {
+  max-width: 100%;
+  margin-block: var(--mg-spacing-150);
+  overflow-x: auto;
+
+  // Match the existing LTR code child so RTL pages can reach both ends.
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+@include mg-editorial-element("pre:focus-visible") {
+  @include mg-focus-ring-inset;
+}
+
+// Only authored overflow regions become keyboard stops. Native table
+// semantics remain on the table; the wrapper supplies scrolling and focus.
+.mg-content .mg-content__scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  margin-block: var(--mg-spacing-150);
+
+  &:focus-visible {
+    @include mg-focus-ring-inset;
+  }
+}

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

@@ -4,7 +4,7 @@
  * Shared layout and scaffolding styles for Storybook page pattern demonstrations.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/LandingPages/LandingPages.mdx
+ * 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";
@@ -53,3 +53,8 @@
 .mg-demo-article-header .mg-hero__split-grid {
   max-inline-size: var(--mg-reading-with-contents-width);
 }
+
+// CollectionPage: space between the page's sections.
+.mg-demo-collection-section {
+  margin-block-end: var(--mg-spacing-400);
+}

package/scss/Utilities/EmbedContainer/embed-container.scss

@@ -4,7 +4,7 @@
  * Responsive aspect-ratio wrapper for embedded video, iframes, maps, and external widgets.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
  */
 // Responsive embed container
 // Provides aspect-ratio wrapper for iframes, videos, and other embedded media.

package/scss/Utilities/FullWidth/full-width.scss

@@ -4,7 +4,7 @@
  * Breakout utility allowing content within constrained containers to bleed full width to viewport edges.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/FullWidth/FullWidth.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/FullWidth/FullWidth.mdx
  */
 // Full-bleed background without moving the element's box: a 100vw pseudo-element
 // is painted behind the element, so content alignment is untouched.

package/scss/Utilities/Loader/loader.scss

@@ -1,39 +1,160 @@
 /**
  * Loader / Spinner
  *
- * Animated loading spinner indicator with brand-themed animation for asynchronous states.
+ * Loading indicator for asynchronous states, in a default size for
+ * pages and regions and a 1em inline size for text, buttons and form fields.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/Loader/Loader.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/Loader/Loader.mdx
  */
 // * loader start *//
 
-// loader animation
-@keyframes loader-animation {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
+@keyframes mg-spin {
+  to {
     transform: rotate(360deg);
   }
 }
 
 .mg-loader {
-  @include animation(loader-animation 2s linear infinite);
+  // One turn. Under a second keeps a small spinner looking busy; at 2s a 16px
+  // spinner reads as stalled.
+  --mg-loader-duration: 0.9s;
 
-  border: 8px solid rgb(var(--mg-color-blue-600));
+  animation: mg-spin var(--mg-loader-duration) linear infinite;
+  border: 8px solid rgb(var(--mg-color-interactive));
   border-radius: 50%;
   border-top: 8px solid rgb(var(--mg-color-neutral-300));
+  box-sizing: border-box;
   height: 40px;
   width: 40px;
 
   @include devicebreak(medium) {
-    border: 14px solid rgb(var(--mg-color-blue-600));
+    border: 14px solid rgb(var(--mg-color-interactive));
     border-top: 14px solid rgb(var(--mg-color-neutral-300));
     height: 96px;
     width: 96px;
   }
+
+  // Compact inline size. It is sized in em so it follows the font size of the
+  // text or button it sits in, and it does not grow at the medium breakpoint:
+  // this rule comes after the breakpoint rule above, so it wins there too.
+  // The arc is currentColor and the track a quarter-strength currentColor, so
+  // the spinner takes the text colour of its context, including filled and
+  // outline buttons and text on dark backgrounds. Where color-mix() is not
+  // supported the track is transparent and the arc still shows.
+  &--inline {
+    border: max(2px, 0.125em) solid transparent;
+    border-color: color-mix(in oklab, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    display: inline-block;
+    flex-shrink: 0;
+    height: 1em;
+
+    // A box with no text has its baseline at its bottom edge, so baseline
+    // alignment would stand the spinner on the text baseline and lift it above
+    // the letters. -0.125em centres it on the letters, as icon fonts do. In a
+    // flex container such as .mg-button the spinner is a flex item instead,
+    // centred by align-items, and vertical-align does not apply.
+    vertical-align: -0.125em;
+    width: 1em;
+  }
+
+  // Forced colours would paint every side of the border in one system colour,
+  // a full ring whose rotation cannot be seen. Opt out and use system colours
+  // for the arc and the track.
+  @media (forced-colors: active) {
+    border-color: GrayText;
+    border-top-color: CanvasText;
+    forced-color-adjust: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    // A complete dashed ring is a deliberate pending marker, not a frozen
+    // frame of the asymmetric spinner. Its label carries the state meaning.
+    animation: none !important;
+    transform: none;
+    border-style: dashed;
+    border-color: rgb(var(--mg-color-interactive));
+
+    &--inline {
+      border-color: currentColor;
+    }
+
+    // The same existing markup works for React and CSS-only consumers. The
+    // status label joins normal flow; only the marker keeps the old size.
+    &:not([aria-hidden="true"]) {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--mg-spacing-50);
+      width: fit-content;
+      max-width: 100%;
+      height: auto;
+      border: 0;
+      border-radius: 0;
+      vertical-align: middle;
+      text-align: center;
+
+      &::before {
+        content: "";
+        display: block;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: 40px;
+        max-width: 100%;
+        aspect-ratio: 1;
+        border: 8px dashed rgb(var(--mg-color-interactive));
+        border-radius: 50%;
+
+        @include devicebreak(medium) {
+          width: 96px;
+          border-width: 14px;
+        }
+      }
+
+      > .mg-u-sr-only {
+        position: static;
+        width: auto;
+        min-width: 0;
+        max-width: 100%;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        clip-path: none;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        line-height: var(--mg-font-line-height-700);
+      }
+    }
+
+    &--inline:not([aria-hidden="true"]) {
+      flex-direction: row;
+      align-items: baseline;
+      text-align: start;
+
+      &::before {
+        width: 1em;
+        height: 1em;
+        border-width: max(2px, 0.125em);
+        border-color: currentColor;
+      }
+    }
+
+    @media (forced-colors: active) {
+      border-color: CanvasText;
+
+      &:not([aria-hidden="true"]) {
+        // Let the visible label use the user's text colours. Only the
+        // decorative marker opts out to keep its dashed outline distinct.
+        forced-color-adjust: auto;
+
+        &::before {
+          border-color: CanvasText;
+          forced-color-adjust: none;
+        }
+      }
+    }
+  }
 }
 
 // * loader end *//

package/scss/Utilities/Normalize/normalize.scss

@@ -4,7 +4,7 @@
  * Cross-browser HTML element reset and foundational base styles ensuring consistent baseline rendering.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/Normalize/Normalize.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/Normalize/Normalize.mdx
  */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 

package/scss/Utilities/PagePatterns/page-patterns.scss

@@ -4,7 +4,7 @@
  * Composite page layout pattern utilities for standard UNDRR editorial templates.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/PagePatterns/PagePatterns.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/PagePatterns/PagePatterns.mdx
  */
 // Reading-page layout tokens and placement rules.
 

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

@@ -4,7 +4,7 @@
  * Collapsible content container with progressive Show more / Show less disclosure toggle.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/ShowMore/ShowMore.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/ShowMore/ShowMore.mdx
  */
 :root {
   --mg-show-more-height: 200px;
@@ -32,3 +32,9 @@
   z-index: 2; // button sits above the gradient fade-out overlay — local to show-more context
   padding: mg-rem(10) mg-rem(40);
 }
+
+// `.mg-button` sets `display`, which beats the `hidden` attribute the
+// threshold option puts on a toggle with nothing to reveal.
+.mg-show-more--button[hidden] {
+  display: none;
+}

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

@@ -4,7 +4,7 @@
  * Accessible skip-to-main-content navigation link that reveals on keyboard focus.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/SkipLink/SkipLink.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/SkipLink/SkipLink.mdx
  */
 // Skip link.
 

package/scss/assets/scss/_components.scss

@@ -60,6 +60,7 @@
 @import "../../Components/Buttons/CopyButton/copy-button";
 @import "../../Components/MegaMenu/mega-menu";
 @import "../../Patterns/HubHeader/hub-header";
+@import "../../Components/CiteThis/cite-this";
 @import "../../Utilities/PagePatterns/page-patterns";
 @import "../../Components/PageHeader/page-header";
 @import "../../Components/Cards/Card/card";
@@ -69,6 +70,7 @@
 @import "../../Components/Hero/hero";
 @import "../../Components/TextCta/text-cta";
 @import "../../Components/Notice/notice";
+@import "../../Components/ProgressBar/progress-bar";
 @import "../../Components/ScrollContainer/scroll-container";
 @import "../../Components/Tab/tab";
 @import "../../Components/UserFeedback/user-feedback";
@@ -95,3 +97,6 @@
 @import "../../Components/DataViz/Legend/legend";
 @import "../../Components/Navigation/Drawer/drawer";
 @import "../../Components/Navigation/Tree/tree";
+
+// Opt-in editorial defaults follow component styles; classed islands opt out.
+@import "../../Patterns/RichContent/rich-content";

package/scss/assets/scss/_foundational.scss

@@ -191,7 +191,10 @@ a {
 // Long-form and WYSIWYG content opt into this boundary. Navigation, cards and
 // button-like links carry their purpose through their component treatment;
 // prose links do not, so colour alone is insufficient (WCAG 1.4.1).
-.mg-content p a {
+// Retain the reach through CMS classes, with low specificity so component
+// links (including paragraph-wrapped buttons) can own their treatment.
+:where(.mg-content p)
+  a:not(:where(.mg-button, .mg-icon-button, [role="button"])) {
   text-decoration: underline;
 }
 
@@ -206,9 +209,22 @@ a {
   }
 }
 
-[dir="rtl"] {
+// RTL list indentation. The direction is wrapped in :where() so these rules
+// carry exactly the specificity of the LTR `ul`, `ol` and `ul li` rules they
+// mirror. A bare [dir="rtl"] made them outrank a component's own list reset
+// (a class rule), so in RTL every unmarked component list (On this page nav,
+// hero tags, breadcrumbs, pager, tabs and more) picked up the prose indent and
+// sat 9-22px inside its content edge. LTR is untouched: these rules only match
+// under an RTL ancestor, and the custom property is only read here.
+:where([dir="rtl"]) {
   ul,
   ol {
+    // The item indent below aligns Arabic text with its bullets. A list
+    // with no bullets (mg-list-unmarked) sets this to 0 on itself; each
+    // list declares its own default, so a bulleted list nested inside an
+    // unmarked one keeps its indent.
+    --mg-list-item-indent-rtl: #{mg-rem(9)};
+
     direction: rtl;
     padding-left: 0;
     padding-right: mg-rem(11);
@@ -219,16 +235,15 @@ a {
 
     li {
       padding-left: 0;
-      padding-right: mg-rem(9);
 
-      @include devicebreak(medium) {
-        // Keep RTL list item text aligned with bullets at medium
-        // https://gitlab.com/undrr/web-backlog/-/issues/2444
-        padding-right: mg-rem(9);
-      }
+      // Keep RTL list item text aligned with bullets
+      // https://gitlab.com/undrr/web-backlog/-/issues/2444
+      padding-right: var(--mg-list-item-indent-rtl);
     }
   }
+}
 
+[dir="rtl"] {
   // 900 weight Roboto does not work well with Arabic
   // https://gitlab.com/undrr/web-backlog/-/issues/1711
   h1,

package/scss/assets/scss/_mixins.scss

@@ -176,6 +176,11 @@
 // (`tree`, `group`, `menu`, `listbox`, `tablist`): that role already replaces
 // list semantics, and there is nothing to preserve.
 @mixin mg-list-unmarked {
+  // A list with no bullets has nothing to align its items with, so it opts
+  // out of the RTL item indent in _foundational.scss. Read only under
+  // [dir="rtl"]; no effect in LTR.
+  --mg-list-item-indent-rtl: 0;
+
   list-style: none;
   list-style-type: "";
 }

package/scss/assets/scss/_variables.scss

@@ -3,8 +3,8 @@
  *
  * Storybook:    https://mangrove.undrr.org/
  * LLMs context: https://mangrove.undrr.org/llms.txt
- * Repository:   https://github.com/unisdr/undrr-mangrove
- * Version: 2.0.0
+ * Repository:   https://github.com/PreventionWeb/undrr-mangrove
+ * Version: 2.1.0
  *
  *   ██╗   ██╗███╗   ██╗██████╗ ██████╗ ██████╗
  *   ██║   ██║████╗  ██║██╔══██╗██╔══██╗██╔══██╗