@undrr/undrr-mangrove 2.0.1 → 2.1.1

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.1",
+  "version": "2.1.1",
   "description": "Mangrove design System for UNDRR",
   "files": [
     "components/**/*",

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

@@ -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/ReachElement/Details/details.scss

@@ -24,7 +24,8 @@ details.mg-details {
   border: 1px solid rgb(var(--mg-color-neutral-400)); // #808080 — 3.95:1 on white (passes WCAG 1.4.11)
   border-radius: mg-rem(4);
   padding: mg-rem(10);
-  transition: box-shadow 0.2s ease-in-out;
+  transition: box-shadow var(--mg-motion-duration-fast)
+    var(--mg-motion-easing-standard);
 
   &:hover {
     box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
@@ -40,7 +41,8 @@ details.mg-details {
     padding-block: mg-rem(10);
     padding-inline: mg-rem(10) mg-rem(44);
     position: relative;
-    transition: background-color 0.2s ease-in-out;
+    transition: background-color var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
 
     &:hover {
       background-color: rgb(

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

@@ -242,7 +242,8 @@
     width: 0.35em;
 
     @media (prefers-reduced-motion: no-preference) {
-      transition: translate 200ms ease;
+      transition: translate var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
     }
   }
 
@@ -578,7 +579,12 @@ span.mg-card__label {
   // Visual link for logo cards (srOnlyTitle) - stretched link pattern
   .mg-card__visual-link {
     display: block;
-    transition: opacity 200ms ease;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: opacity var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
+    }
+
     width: 100%;
 
     &::after {

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

@@ -120,7 +120,8 @@
       text-decoration: underline;
       position: relative;
       z-index: 2; // above stretched-link cover — local to stats-card stacking context
-      transition: opacity 200ms ease;
+      transition: opacity var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
 
       &:hover {
         opacity: 0.7;
@@ -228,3 +229,9 @@
 }
 
 /* RTL support is automatic: the highlighted accent uses `border-inline-start`. */
+
+@media (prefers-reduced-motion: reduce) {
+  .mg-stats-card-item__summary a {
+    transition: none;
+  }
+}

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

@@ -43,6 +43,104 @@
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
+
+    // The filled trigger relies on its background, which forced colours remove.
+    @media (forced-colors: active) {
+      border: 1px solid ButtonText;
+    }
+  }
+
+  // Default enhanced layout, with the same structure and metrics as
+  // ShareButtons: a label, the citation as a copyable field, and a quiet
+  // dialog link. `--compact` shows the dialog trigger alone.
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--mg-spacing-100);
+    max-inline-size: mg-rem(400);
+  }
+
+  &__header {
+    margin: 0;
+    color: rgb(var(--mg-color-text));
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-font-size-300);
+    font-weight: 600;
+  }
+
+  &__preview {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--mg-spacing-100);
+    inline-size: 100%;
+    min-block-size: mg-rem(40);
+    padding: var(--mg-spacing-100);
+    background-color: rgb(var(--mg-color-neutral-25));
+    border: 1px solid rgb(var(--mg-color-neutral-300) / 0.4);
+    border-radius: var(--mg-radius-button);
+    color: rgb(var(--mg-color-text));
+    cursor: pointer;
+    font-family: var(--mg-font-family-text);
+    text-align: start;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
+    }
+
+    .mg-icon {
+      flex: 0 0 mg-rem(24);
+      text-align: center;
+    }
+
+    &:hover {
+      background-color: rgb(var(--mg-color-neutral-50));
+
+      .mg-cite-this__preview-text {
+        text-decoration: underline;
+        text-underline-offset: 0.15em;
+      }
+    }
+
+    &:focus-visible {
+      @include mg-focus-ring;
+    }
+
+    @media (forced-colors: active) {
+      border-color: ButtonText;
+    }
+  }
+
+  &__preview-text {
+    display: -webkit-box;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    font-size: var(--mg-font-size-250);
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+  }
+
+  // Doubled selector outranks the filled `__trigger` styles.
+  & &__more {
+    min-block-size: 44px;
+    padding: 0;
+    background: transparent;
+    color: rgb(var(--mg-color-interactive));
+    font-size: var(--mg-font-size-250);
+    font-weight: 400;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+
+    &:hover {
+      filter: none;
+      text-decoration-thickness: 2px;
+    }
   }
 
   &__dialog {
@@ -72,7 +170,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--mg-spacing-200);
-    padding: var(--mg-spacing-150) var(--mg-spacing-200) 0;
+    padding: var(--mg-spacing-200) var(--mg-spacing-200) var(--mg-spacing-150);
   }
 
   &__title {
@@ -134,10 +232,32 @@
     padding: 0 var(--mg-spacing-200) var(--mg-spacing-200);
   }
 
-  &__text {
+  // Doubled selector outranks `.mg-code`, which earlier markup put on the
+  // citation; a citation is prose to read, not code.
+  & &__text {
     margin: 0;
+    padding: var(--mg-spacing-150) var(--mg-spacing-200);
+    background: rgb(var(--mg-color-neutral-25));
+    border: 1px solid rgb(var(--mg-color-neutral-300) / 0.4);
+    border-radius: var(--mg-radius-form-input);
+    box-shadow: none;
+    color: rgb(var(--mg-color-neutral-800));
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-font-size-300);
+    font-weight: 400;
+    line-height: 1.6;
     overflow-wrap: anywhere;
     text-wrap: pretty;
+
+    a {
+      color: rgb(var(--mg-color-interactive));
+      text-decoration: underline;
+      text-underline-offset: 0.15em;
+
+      &:focus-visible {
+        @include mg-focus-ring;
+      }
+    }
   }
 
   &__actions {
@@ -150,21 +270,31 @@
 
   &__copy {
     min-block-size: 44px;
-    padding: var(--mg-spacing-100) var(--mg-spacing-200);
-    background: rgb(var(--mg-color-interactive));
-    border: 0;
+    padding: var(--mg-spacing-50) var(--mg-spacing-150);
+    background: transparent;
+    border: 2px solid rgb(var(--mg-color-interactive));
     border-radius: var(--mg-radius-button);
-    color: rgb(var(--mg-color-white));
+    color: rgb(var(--mg-color-interactive));
     cursor: pointer;
     font-family: var(--mg-font-family-text);
-    font-size: var(--mg-font-size-300);
+    font-size: var(--mg-font-size-250);
     font-weight: 600;
-    transition-property: filter, scale;
+    transition-property: background-color, color, scale;
     transition-duration: var(--mg-motion-duration-fast);
     transition-timing-function: var(--mg-motion-easing-standard);
 
     &:hover {
-      filter: brightness(0.92);
+      background: rgb(var(--mg-color-interactive));
+      color: rgb(var(--mg-color-white));
+    }
+
+    &:not(.mg-cite-this__copy-url) {
+      background: rgb(var(--mg-color-interactive));
+      color: rgb(var(--mg-color-white));
+
+      &:hover {
+        filter: brightness(0.92);
+      }
     }
 
     &:active {
@@ -180,6 +310,29 @@
     }
   }
 
+  &__exports {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mg-spacing-50) var(--mg-spacing-200);
+    margin-block-start: var(--mg-spacing-150);
+    padding-block-start: var(--mg-spacing-150);
+    border-block-start: 1px solid rgb(var(--mg-color-neutral-200));
+    font-size: var(--mg-font-size-250);
+  }
+
+  &__export {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 44px;
+    color: rgb(var(--mg-color-interactive));
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+
+    &:focus-visible {
+      @include mg-focus-ring;
+    }
+  }
+
   &__status {
     font-size: var(--mg-font-size-250);
   }