@undrr/undrr-mangrove 2.0.0 → 2.1.0

package/js/on-this-page-nav.js

@@ -107,6 +107,7 @@ export function mgOnThisPageNav(scope) {
     container._mgOnThisPageNavAbort = ac;
 
     setupClickHandlers(container, ac.signal);
+    setupBlockSize(container, ac.signal);
     setupScrollSpy(container);
     setupFocusScrolling(container, ac.signal);
     setupScrollButtons(container, ac.signal);
@@ -132,13 +133,53 @@ export function mgOnThisPageNavDestroy(container) {
     container._mgOnThisPageNavResizeObserver.disconnect();
     delete container._mgOnThisPageNavResizeObserver;
   }
+  if (container._mgOnThisPageNavSizeObserver) {
+    container._mgOnThisPageNavSizeObserver.disconnect();
+    delete container._mgOnThisPageNavSizeObserver;
+    document.documentElement.style.removeProperty(BLOCK_SIZE);
+  }
   container
     .querySelectorAll('.mg-on-this-page-nav__scroll-btn')
     .forEach(btn => btn.remove());
-  container.classList.remove('mg-on-this-page-nav--has-left-overflow');
+  container.classList.remove(
+    'mg-on-this-page-nav--has-left-overflow',
+    'mg-on-this-page-nav--has-right-overflow'
+  );
   delete container.dataset.mgOnThisPageNavInitialized;
 }
 
+const BLOCK_SIZE = '--mg-on-this-page-nav-block-size';
+
+/**
+ * Publishes the bar's height on the root element while it is sticky, and 0px
+ * when it is not (it un-sticks on short viewports). The stylesheet adds it to
+ * `scroll-padding-top`, so anything the browser scrolls into view (focus,
+ * anchors, scrollIntoView from other components) lands below the bar rather
+ * than under it.
+ *
+ * @param {HTMLElement} container - The nav element
+ * @param {AbortSignal} signal - Removes the resize listener on destroy
+ */
+function setupBlockSize(container, signal) {
+  const root = document.documentElement;
+  const publish = () => {
+    const sticky = getComputedStyle(container).position === 'sticky';
+    root.style.setProperty(
+      BLOCK_SIZE,
+      `${sticky ? container.offsetHeight || 0 : 0}px`
+    );
+  };
+  publish();
+  window.addEventListener('resize', publish, { passive: true, signal });
+  if (typeof ResizeObserver === 'function') {
+    const observer = new ResizeObserver(publish);
+    observer.observe(container);
+    container._mgOnThisPageNavSizeObserver = observer;
+  } else {
+    container._mgOnThisPageNavSizeObserver = { disconnect() {} };
+  }
+}
+
 /**
  * Auto-detect mode: scan headings from the page and generate nav links.
  * Preserves any existing CTA element in the container.
@@ -399,6 +440,13 @@ function updateScrollButtons(container, list, prevBtn, nextBtn) {
     'mg-on-this-page-nav--has-left-overflow',
     rtl ? canScrollFurther : scrolledFromStart
   );
+  // has-right-overflow is its mirror. Only the RTL fades read it: in RTL the
+  // hidden content can sit on either physical side, and a fade belongs only
+  // on a side with something hidden behind it.
+  container.classList.toggle(
+    'mg-on-this-page-nav--has-right-overflow',
+    rtl ? scrolledFromStart : canScrollFurther
+  );
 }
 
 /**
@@ -543,6 +591,15 @@ function setupScrollSpy(container) {
   if (targets.length === 0) return;
 
   let activeId = null;
+
+  // At the foot of a page that scrolls a real distance. On a page that barely
+  // scrolls, the bottom is also the top, and the first section is right.
+  const atFoot = () => {
+    const doc = document.documentElement;
+    const scrollable = doc.scrollHeight - window.innerHeight;
+    const minimum = Math.max(120, window.innerHeight * 0.25);
+    return scrollable >= minimum && window.scrollY >= scrollable - 2;
+  };
   // Track which targets are currently intersecting (avoids DOM expando properties)
   const intersecting = new Set();
 
@@ -584,6 +641,13 @@ function setupScrollSpy(container) {
         }
       });
 
+      // At the foot of the page the last section wins (see onScroll). The
+      // observer reports after the scroll event, so without this check it
+      // would take the mark straight back.
+      if (atFoot()) {
+        setActive(targets[targets.length - 1].id);
+        return;
+      }
       // Pick the first intersecting target in DOM order
       const firstVisible = targets.find(t => intersecting.has(t));
       if (firstVisible) {
@@ -599,12 +663,27 @@ function setupScrollSpy(container) {
   targets.forEach(target => observer.observe(target));
   container._mgOnThisPageNavObserver = observer;
 
+  // A short last section can never scroll up into the observed band, so at
+  // the foot of the page the previous section stayed marked, even straight
+  // after following the last link. At the bottom, mark the last target. Only
+  // on pages that scroll a real distance: on one that barely scrolls, the
+  // bottom is also the top, and the first section is the right answer.
+  const onScroll = () => {
+    if (atFoot()) setActive(targets[targets.length - 1].id);
+  };
+  window.addEventListener('scroll', onScroll, {
+    passive: true,
+    signal: container._mgOnThisPageNavAbort?.signal,
+  });
+
   const hashId = window.location.hash ? window.location.hash.slice(1) : null;
   if (hashId && linkMap.has(hashId)) {
     setActive(hashId);
   } else if (targets.length > 0) {
     setActive(targets[0].id);
   }
+  // A page restored at its foot (reload, back button) is checked straight away.
+  onScroll();
 }
 
 // Auto-wrap so the browser Event object is not passed as scope

package/js/show-more.js

@@ -61,6 +61,58 @@ function resolveTarget(toggle, selector) {
   return document.querySelector(selector);
 }
 
+/**
+ * The height the content collapses to, read from CSS: the computed
+ * max-height of the collapsed state, so `--mg-show-more-height` may be set in
+ * any unit, including `lh`. Applying and removing the class in one task
+ * forces a style recalculation but never paints.
+ *
+ * @param {HTMLElement} target - The collapsible content.
+ * @returns {number} Pixels, or NaN when CSS gives no length.
+ */
+function collapsedHeight(target) {
+  const collapsed = target.classList.contains('mg-show-more--collapsed');
+  if (!collapsed) target.classList.add('mg-show-more--collapsed');
+  const height = parseFloat(getComputedStyle(target).maxHeight);
+  if (!collapsed) target.classList.remove('mg-show-more--collapsed');
+  return height;
+}
+
+/**
+ * @param {HTMLElement} target - The collapsible content.
+ * @returns {number} Its line height in pixels.
+ */
+function lineHeight(target) {
+  const style = getComputedStyle(target);
+  const line = parseFloat(style.lineHeight);
+  return Number.isFinite(line) ? line : parseFloat(style.fontSize) * 1.2;
+}
+
+/**
+ * After a reader collapses content, bring the start of it back into view if
+ * the toggle has left the viewport. Scrolls the heading just before the
+ * content when there is one, honours scroll-padding (so a sticky bar such as
+ * On this page is allowed for) and reduced motion.
+ *
+ * @param {HTMLElement} toggle - The toggle that was used.
+ * @param {HTMLElement} target - The content it collapsed.
+ */
+function returnToContent(toggle, target) {
+  const box = toggle.getBoundingClientRect();
+  if (box.bottom > 0 && box.top < window.innerHeight) return;
+  const previous = target.previousElementSibling;
+  const anchor = previous?.matches('h1, h2, h3, h4, h5, h6')
+    ? previous
+    : target;
+  const reduce =
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  anchor.scrollIntoView?.({
+    block: 'start',
+    behavior: reduce ? 'auto' : 'smooth',
+  });
+}
+
 /**
  * Initializes "show more" toggle buttons.
  *
@@ -102,7 +154,6 @@ export function mgShowMore(scope) {
       'mg-show-more--collapsed'
     );
     const wasOpen = item.classList.contains('mg-show-more--button--open');
-    const initialText = item.textContent;
     const initialControls = item.getAttribute('aria-controls');
     const initialRole = item.getAttribute('role');
     const onKeydown = event => {
@@ -112,8 +163,27 @@ export function mgShowMore(scope) {
       }
     };
 
-    item.dataset.dataVfGoogleAnalyticsLabel =
-      'Show more: ' + (item.dataset.mgShowMoreLabelCollapsed || 'Show more');
+    // The click tracker reads data-vf-analytics-label. Report the action the
+    // toggle is about to perform, in fixed English so reports do not split by
+    // language. A label the author set by hand is kept as it is, unless
+    // per-state labels are given.
+    const COLLAPSED = 'mg-show-more--collapsed';
+    const authorLabel = item.getAttribute('data-vf-analytics-label');
+    const { mgShowMoreAnalyticsCollapsed, mgShowMoreAnalyticsOpen } =
+      item.dataset;
+    const stateLabels =
+      mgShowMoreAnalyticsCollapsed || mgShowMoreAnalyticsOpen || !authorLabel
+        ? {
+            collapsed: mgShowMoreAnalyticsCollapsed || 'Show more',
+            open: mgShowMoreAnalyticsOpen || 'Show less',
+          }
+        : null;
+
+    // Visible text lives in a [data-mg-show-more-label] child when there is
+    // one, so visually hidden context beside it survives each toggle.
+    const labelNode = item.querySelector('[data-mg-show-more-label]') || item;
+    const initialText = labelNode.textContent;
+    const initialHidden = item.hidden;
 
     // Relate the toggle to the content it acts on. A <button> already
     // announces as a button; an anchor copied from an earlier version of the
@@ -131,24 +201,35 @@ export function mgShowMore(scope) {
       item.addEventListener('keydown', onKeydown);
     }
 
-    const onClick = event => {
-      // Also neutralises the dead `href="#"` on a legacy anchor toggle.
-      event.preventDefault();
-      mgShowMoreTarget.classList.toggle('mg-show-more--collapsed');
-
-      // Which label to show?
-      item.textContent = mgShowMoreTarget.classList.contains(
-        'mg-show-more--collapsed'
-      )
+    // Initialisation and re-measures change state here rather than through
+    // item.click(), so they reach no click listener (analytics reporting, the
+    // Drupal wrapper). Focus entering, or a click on, collapsed content still
+    // clicks the toggle below: those stand for a reader's action.
+    const setCollapsed = collapsed => {
+      mgShowMoreTarget.classList.toggle(COLLAPSED, collapsed);
+      labelNode.textContent = collapsed
         ? item.dataset.mgShowMoreLabelCollapsed || 'Show more'
         : item.dataset.mgShowMoreLabelOpen || 'Show less';
-
-      if (mgShowMoreTarget.classList.contains('mg-show-more--collapsed')) {
-        item.classList.remove('mg-show-more--button--open');
-      } else {
-        item.classList.add('mg-show-more--button--open');
+      item.classList.toggle('mg-show-more--button--open', !collapsed);
+      if (stateLabels) {
+        item.setAttribute(
+          'data-vf-analytics-label',
+          collapsed ? stateLabels.collapsed : stateLabels.open
+        );
       }
     };
+
+    let readerToggled = false;
+    const onClick = event => {
+      // Also neutralises the dead `href="#"` on a legacy anchor toggle.
+      event.preventDefault();
+      readerToggled = true;
+      const collapsing = !mgShowMoreTarget.classList.contains(COLLAPSED);
+      setCollapsed(collapsing);
+      // Collapsing a long block pulls the toggle up the page, often out of
+      // view. Bring the reader back to the start of what they collapsed.
+      if (collapsing) returnToContent(item, mgShowMoreTarget);
+    };
     item.addEventListener('click', onClick);
 
     // The collapse is `max-height` + `overflow: hidden`, which clips content
@@ -158,7 +239,7 @@ export function mgShowMore(scope) {
     // entry keeps the focused control visible.
     const onFocusin = event => {
       if (item === event.target || item.contains(event.target)) return;
-      if (mgShowMoreTarget.classList.contains('mg-show-more--collapsed')) {
+      if (mgShowMoreTarget.classList.contains(COLLAPSED)) {
         item.click();
       }
     };
@@ -167,14 +248,61 @@ export function mgShowMore(scope) {
     // Allow items to be shown by clicking anywhere on the collapsed item
     // https://gitlab.com/undrr/web-backlog/-/issues/1612
     const onTargetClick = () => {
-      if (mgShowMoreTarget.classList.contains('mg-show-more--collapsed')) {
+      if (mgShowMoreTarget.classList.contains(COLLAPSED)) {
         item.click();
       }
     };
     mgShowMoreTarget.addEventListener('click', onTargetClick);
 
-    item.click();
+    // A template may ship the toggle `hidden` so it never shows without
+    // JavaScript; the content is then simply open.
+    item.hidden = false;
+    setCollapsed(!wasCollapsed);
+
+    // Opt-in: collapse only when enough would be hidden. Short content stays
+    // open and the toggle is hidden, so a template can wrap every body field
+    // in ShowMore. The value is a number of lines (empty means 1): collapse
+    // when the content runs at least that many lines past the collapsed
+    // height. The collapsed height is read from CSS (--mg-show-more-height),
+    // so the decision does not depend on the current state and cannot flip
+    // back and forth. Measured again when the content resizes, until the
+    // reader uses the toggle. Content with no layout yet (inside a closed
+    // tab, say) waits until it has one.
+    let observer = null;
+    let frame = 0;
+    if (item.hasAttribute('data-mg-show-more-min-hidden-lines')) {
+      const lines =
+        parseFloat(item.dataset.mgShowMoreMinHiddenLines) > 0
+          ? parseFloat(item.dataset.mgShowMoreMinHiddenLines)
+          : 1;
+      const measure = () => {
+        frame = 0;
+        if (readerToggled || mgShowMoreTarget.scrollHeight === 0) return;
+        const limit = collapsedHeight(mgShowMoreTarget);
+        const line = lineHeight(mgShowMoreTarget);
+        if (!Number.isFinite(limit) || !Number.isFinite(line)) return;
+        const collapse = mgShowMoreTarget.scrollHeight - limit >= lines * line;
+        setCollapsed(collapse);
+        item.hidden = !collapse;
+      };
+      measure();
+      if (typeof ResizeObserver === 'function') {
+        // Deferred to the next frame: changing the observed box inside the
+        // callback is what raises "ResizeObserver loop" errors.
+        observer = new ResizeObserver(() => {
+          if (frame) cancelAnimationFrame(frame);
+          frame = requestAnimationFrame(measure);
+        });
+        observer.observe(mgShowMoreTarget);
+      }
+    }
+
     cleanups.push(() => {
+      observer?.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+      item.hidden = initialHidden;
+      if (authorLabel === null) item.removeAttribute('data-vf-analytics-label');
+      else item.setAttribute('data-vf-analytics-label', authorLabel);
       item.removeEventListener('click', onClick);
       item.removeEventListener('keydown', onKeydown);
       mgShowMoreTarget.removeEventListener('focusin', onFocusin);
@@ -184,7 +312,7 @@ export function mgShowMore(scope) {
         wasCollapsed
       );
       item.classList.toggle('mg-show-more--button--open', wasOpen);
-      item.textContent = initialText;
+      labelNode.textContent = initialText;
       for (const [attribute, value] of [
         ['aria-controls', initialControls],
         ['role', initialRole],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undrr/undrr-mangrove",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Mangrove design System for UNDRR",
   "files": [
     "components/**/*",
@@ -9,6 +9,7 @@
     "scss/**/*.scss",
     "error-pages/**/*",
     "fonts/**/*",
+    "docs/**/*",
     "!**/__tests__/**",
     "!**/__snapshots__/**",
     "!**/__mocks__/**",
@@ -20,6 +21,10 @@
     "type": "git",
     "url": "https://github.com/unisdr/undrr-mangrove.git"
   },
+  "homepage": "https://mangrove.undrr.org/",
+  "bugs": {
+    "url": "https://github.com/PreventionWeb/undrr-mangrove/issues"
+  },
   "keywords": [],
   "author": "",
   "license": "Apache-2.0"

package/scss/Atom/BaseTypography/Abbr/abbr.scss

@@ -4,7 +4,7 @@
  * Styles for HTML <abbr> elements with subtle dotted underlines and accessible expansion styling.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 abbr[title] {
   border-bottom: 2px dashed rgb(var(--mg-color-red-900));

package/scss/Atom/BaseTypography/Blockquote/blockquote.scss

@@ -4,7 +4,7 @@
  * Typography and border accent styles for standard HTML <blockquote> elements.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 .mg-body blockquote,
 .mg-content blockquote {

package/scss/Atom/BaseTypography/Cite/cite.scss

@@ -4,7 +4,7 @@
  * Typographic styles for HTML <cite> citation references.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 .mg-body cite,
 .mg-content cite {

package/scss/Atom/BaseTypography/Code/code.scss

@@ -4,7 +4,7 @@
  * Monospace typographic styling for inline <code> elements.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 .mg-code,
 code {

package/scss/Atom/BaseTypography/Mark/mark.scss

@@ -4,7 +4,7 @@
  * Highlight styling for HTML <mark> elements using theme-aware highlight colors.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 mark {
   background: var(--mg-color-yellow-light);

package/scss/Atom/BaseTypography/Quotation/quotation.scss

@@ -4,7 +4,7 @@
  * Inline quotation typography and glyph styles for <q> elements.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 q {
   font-style: italic;

package/scss/Atom/BaseTypography/Small/small.scss

@@ -4,7 +4,7 @@
  * Reduced scale typography styles for fine print and secondary metadata (<small>).
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
  */
 small {
   @extend %paragraph-font-100;

package/scss/Atom/Colors/color.scss

@@ -4,6 +4,6 @@
  * Color swatch and background/text utility helper classes across brand palettes.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Colors/color.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Colors/color.mdx
  */
 // empty

package/scss/Atom/EmptyState/empty-state.scss

@@ -4,7 +4,7 @@
  * Placeholder presentation for empty search results, missing data, or filtered-out views.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/EmptyState/EmptyState.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/EmptyState/EmptyState.mdx
  */
 // Empty state — what a list, table, chart or dashboard tile shows when it has
 // no content to show.

package/scss/Atom/Icons/_icon-definitions.scss

@@ -5,10 +5,10 @@
  * Generated by scripts/icon-build.cjs — do not edit by hand.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
  */
 // To regenerate: yarn build:icons
-// 98 icons from Lucide, OCHA, and custom SVG sources.
+// 106 icons from Lucide, OCHA, and custom SVG sources.
 
 .mg-icon-globe::before {
   --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><path d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20'/></svg>");
@@ -55,7 +55,7 @@
 }
 
 .mg-icon-pen-nib::before {
-  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z'/><path d='m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286'/><circle cx='11' cy='11' r='2'/></svg>");
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m18 13-.654-4.736a4 4 0 0 0-2.756-3.266l-9.163-2.9a2 2 0 0 0-2.017.493l-.82.819a2 2 0 0 0-.492 2.017l2.9 9.163a4 4 0 0 0 3.266 2.756L13 18'/><path d='M18.648 12.352a1.205 1.205 0 0 1 1.704 0l1.296 1.296a1.205 1.205 0 0 1 0 1.704l-6.296 6.296a1.205 1.205 0 0 1-1.704 0l-1.296-1.296a1.205 1.205 0 0 1 0-1.704zM3 3l6.586 6.586'/><circle cx='11' cy='11' r='2'/></svg>");
 }
 
 .mg-icon-code-branch::before {
@@ -126,6 +126,38 @@
   --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M8 16H3v5'/></svg>");
 }
 
+.mg-icon-plus::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M5 12h14M12 5v14'/></svg>");
+}
+
+.mg-icon-minus::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M5 12h14'/></svg>");
+}
+
+.mg-icon-pause::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><rect width='5' height='18' x='14' y='3' rx='1'/><rect width='5' height='18' x='5' y='3' rx='1'/></svg>");
+}
+
+.mg-icon-play::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/></svg>");
+}
+
+.mg-icon-circle-minus::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/></svg>");
+}
+
+.mg-icon-expand::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m15 15 6 6M15 9l6-6M21 16v5h-5M21 8V3h-5M3 16v5h5M3 21l6-6M3 8V3h5M9 9 3 3'/></svg>");
+}
+
+.mg-icon-shrink::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m15 15 6 6m-6-6v4.8m0-4.8h4.8M9 19.8V15m0 0H4.2M9 15l-6 6M15 4.2V9m0 0h4.8M15 9l6-6M9 4.2V9m0 0H4.2M9 9 3 3'/></svg>");
+}
+
+.mg-icon-layers::before {
+  --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/><path d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/><path d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/></svg>");
+}
+
 .mg-icon-clone::before {
   --mg-icon-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><rect width='14' height='14' x='8' y='8' rx='2' ry='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>");
 }

package/scss/Atom/Icons/icons.scss

@@ -4,7 +4,7 @@
  * Base styles, icon sizing, font-family setup, and alignment classes for Mangrove icons.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
  */
 // Mangrove Icon System
 // Icons render via CSS mask-image backed by SVG data URIs (Lucide, OCHA, custom sources).

package/scss/Atom/Images/AuthorImage/author-image.scss

@@ -4,7 +4,7 @@
  * Circular avatar and author profile photo styling with standardized sizing and object-fit.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Images/AuthorImage/AuthorImages.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/AuthorImage/AuthorImages.mdx
  */
 /* author image */
 
@@ -49,8 +49,8 @@
   position: absolute;
   z-index: 1;
   transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
+    opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+    transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
   transform: translateY(2px);
 }
 
@@ -224,3 +224,10 @@
   justify-items: center;
   text-align: center;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .mg-author-image__avatar::before {
+    transition: none;
+    transform: none;
+  }
+}

package/scss/Atom/Images/Image/image.scss

@@ -4,7 +4,7 @@
  * Fluid responsive image wrapper and image sizing utilities.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
  */
 /* img start */
 img,

package/scss/Atom/Images/ImageCaptionCredit/image-caption-credit.scss

@@ -4,7 +4,7 @@
  * Figure, figcaption, caption text, and photo credit metadata presentation styles.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
  */
 // @import '../../../assets/scss/base';
 
@@ -49,7 +49,8 @@
       padding-bottom: 0;
       width: 25%;
 
-      p {
+      p,
+      :where(.mg-image-caption__text) {
         font-size: var(--mg-font-size-200);
         line-height: 1.4;
         margin-bottom: var(--mg-spacing-50);
@@ -61,6 +62,10 @@
           padding: var(--mg-spacing-50) 0 0 0;
         }
       }
+
+      .mg-image-caption__text p:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 

package/scss/Atom/Images/ImageCredit/image-credit.scss

@@ -4,7 +4,7 @@
  * Subtle attribution and copyright credit line styling for imagery.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
  */
 .mg-credits {
   font-size: var(--mg-font-size-200);

package/scss/Atom/Layout/Container/container.scss

@@ -4,7 +4,7 @@
  * Responsive layout containers with breakpoint-driven max widths (480/900/1164/1440px) and gutter padding.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Layout/Container/Container.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Container/Container.mdx
  */
 // Define your breakpoints if not already defined
 // $mg-breakpoint-mobile: 480px;