@undrr/undrr-mangrove 2.0.0 → 2.0.1

package/scss/Utilities/Loader/loader.scss

@@ -1,39 +1,82 @@
 /**
  * Loader / Spinner
  *
- * Animated loading spinner indicator with brand-themed animation for asynchronous states.
+ * Animated loading spinner 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;
+  }
+
+  // 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.
+  @media (forced-colors: active) {
+    border-color: GrayText;
+    border-top-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;

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

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.0.1
  *
  *   ██╗   ██╗███╗   ██╗██████╗ ██████╗ ██████╗
  *   ██║   ██║████╗  ██║██╔══██╗██╔══██╗██╔══██╗