@undrr/undrr-mangrove 2.0.1 → 2.1.0

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

@@ -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/Loader/loader.scss

@@ -1,7 +1,7 @@
 /**
  * Loader / Spinner
  *
- * Animated loading spinner for asynchronous states, in a default size for
+ * 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:
@@ -59,16 +59,6 @@
     width: 1em;
   }
 
-  // Under reduced motion the site-wide reset cuts every animation to 0.01ms
-  // and one iteration, which would freeze the spinner and make it look as if
-  // loading has stopped. A slow, steady rotation still says "working" without
-  // the speed. The !important is needed to outrank the reset's own
-  // !important, and is scoped to the loader.
-  @media (prefers-reduced-motion: reduce) {
-    animation-duration: calc(var(--mg-loader-duration) * 3) !important;
-    animation-iteration-count: infinite !important;
-  }
-
   // 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.
@@ -77,6 +67,94 @@
     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/ShowMore/show-more.scss

@@ -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/assets/scss/_components.scss

@@ -97,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

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