@undrr/undrr-mangrove 2.0.0 → 2.1.0

package/scss/Atom/Layout/Grid/grid.scss

@@ -4,7 +4,7 @@
  * Flexible grid system and columnar layout utilities for structured multi-column content.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Layout/Grid/Grid.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Grid/Grid.mdx
  */
 /* Our custom css grid based on https://stable.visual-framework.dev/components/vf-grid/ */
 g-grid {

package/scss/Atom/Layout/Spacing/spacing.scss

@@ -4,6 +4,6 @@
  * Margin and padding spacing utility classes mapped to design system spacing tokens.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Layout/Spacing/Spacing.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Spacing/Spacing.mdx
  */
 // empty

package/scss/Atom/Logo/logo.scss

@@ -4,7 +4,7 @@
  * UNDRR and partner logo presentation styles, scaling, and bilingual language variants.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Logo/Logo.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Logo/Logo.mdx
  */
 .mg-logo {
   display: block;

package/scss/Atom/Navigation/Breadcrumb/breadcrumb.scss

@@ -4,6 +4,6 @@
  * Foundational breadcrumb list and separator styling (superseded by Components/Breadcrumbs).
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
  */
 // Retried

package/scss/Atom/Navigation/MenuItems/menu-items.scss

@@ -4,7 +4,7 @@
  * Accessible menu list, navigation item links, and hover/focus interaction states.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Typography/Links/Links.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Typography/Links/Links.mdx
  */
 // * menu item row start *//
 .menu li {

package/scss/Atom/ReachElement/Details/details.scss

@@ -4,7 +4,7 @@
  * Native HTML <details> and <summary> disclosure styling with custom toggle indicators.
  *
  * 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
  */
 /* details tag start */
 
@@ -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/Atom/ReachElement/Figcaption/figcaption.scss

@@ -4,7 +4,7 @@
  * Typographic styles for HTML <figcaption> elements accompanying figures and media.
  *
  * 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
  */
 /* figure tag start */
 figure {

package/scss/Atom/StatusLabel/status-label.scss

@@ -4,7 +4,7 @@
  * Compact status indicators and colored badge pills for states (draft, active, archived, etc.).
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/StatusLabel/StatusLabel.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/StatusLabel/StatusLabel.mdx
  */
 // Status label — a workflow status shown as a coloured indicator plus its name.
 // -

package/scss/Atom/Table/table.scss

@@ -4,7 +4,7 @@
  * Accessible tabular data styling with striped, bordered, and responsive scrolling variants.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Table/Table.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Table/Table.mdx
  */
 /* table tag start */
 .mg-table {

package/scss/Atom/Tag/tag.scss

@@ -4,7 +4,7 @@
  * Metadata taxonomy tags, clickable topic chips, and keyword labels with active and hover states.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Tag/Tag.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Tag/Tag.mdx
  */
 // Compact taxonomy labels. Keep legacy theme overrides and container markup.
 // :where() gives auto-styled children the same specificity as .mg-tag, so

package/scss/Atom/Video/video.scss

@@ -4,7 +4,7 @@
  * Responsive HTML5 video element wrapper and aspect ratio scaling.
  *
  * 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
  */
 /* video start */
 video {

package/scss/Components/Boilerplate/boilerplate.scss

@@ -4,7 +4,7 @@
  * Starter scaffold and template styles for authoring new Mangrove components.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Boilerplate/Boilerplate.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Boilerplate/Boilerplate.mdx
  */
 // Boilerplate component styles
 // We use the 'mg-' prefix for our CSS classes to namespace them

package/scss/Components/Breadcrumbs/breadcrumbs.scss

@@ -4,7 +4,7 @@
  * Accessible hierarchical breadcrumb navigation with chevron separators and current-page semantics.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
  */
 .mg-breadcrumb {
   font-family: var(--mg-font-family-ui);

package/scss/Components/Buttons/Chips/chips.scss

@@ -4,7 +4,7 @@
  * Interactive filter and selection chip buttons with selected/unselected states.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Buttons/Chips/Chips.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/Chips/Chips.mdx
  */
 .mg-chip {
   align-items: center;

package/scss/Components/Buttons/CopyButton/copy-button.scss

@@ -4,7 +4,7 @@
  * One-click copy button with a transient feedback tooltip and aria-live announcements.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Buttons/CopyButton/CopyButton.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CopyButton/CopyButton.mdx
  */
 
 .mg-copy-button {

package/scss/Components/Buttons/CtaButton/buttons.scss

@@ -4,7 +4,7 @@
  * Legacy stylesheet forwarding to cta-button.scss.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
  */
 // buttons.scss — DEPRECATED, use cta-button.scss
 @import "./cta-button";

package/scss/Components/Buttons/CtaButton/cta-button.scss

@@ -4,7 +4,7 @@
  * Primary, secondary, and tertiary call-to-action button styles with size variants and motion effects.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
  */
 // .mg-buttons {
 //   margin-bottom: 1em;

package/scss/Components/Buttons/ShareButtons/share-buttons.scss

@@ -4,7 +4,7 @@
  * Social sharing action bar with platform icons (X/Twitter, LinkedIn, Facebook, Email, Copy Link).
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Buttons/ShareButtons/ShareButtons.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/ShareButtons/ShareButtons.mdx
  */
 .mg-share {
   max-inline-size: mg-rem(400);
@@ -106,3 +106,92 @@
   line-height: 1.5;
   overflow-wrap: anywhere;
 }
+
+.mg-share__dialog {
+  box-sizing: border-box;
+  inline-size: min(calc(100% - 2 * var(--mg-spacing-200)), mg-rem(500));
+  max-block-size: calc(100vh - 2 * var(--mg-spacing-200));
+  padding: var(--mg-spacing-300);
+  border: 0;
+  border-block-start: mg-rem(4) solid rgb(var(--mg-color-interactive));
+  border-radius: 0;
+  background: rgb(var(--mg-color-white));
+  color: rgb(var(--mg-color-text));
+  box-shadow: 0 mg-rem(8) mg-rem(32) rgb(var(--mg-color-neutral-900) / 0.25);
+  overflow: auto;
+
+  &::backdrop {
+    background: var(--mg-color-modal-scrim);
+  }
+}
+
+.mg-share__dialog-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--mg-spacing-150);
+}
+
+.mg-share__dialog-title {
+  margin: 0;
+  font-family: var(--mg-font-family-ui);
+  font-size: var(--mg-font-size-500);
+  line-height: 1.2;
+}
+
+.mg-share__dialog-close {
+  flex: none;
+  inline-size: mg-rem(40);
+  block-size: mg-rem(40);
+  min-inline-size: mg-rem(40);
+  min-block-size: mg-rem(40);
+  margin-inline-start: auto;
+  color: rgb(var(--mg-color-text));
+
+  &:hover {
+    background: rgb(var(--mg-color-neutral-50));
+    color: rgb(var(--mg-color-text));
+  }
+}
+
+.mg-share__dialog-description {
+  margin-block: var(--mg-spacing-150);
+  font-family: var(--mg-font-family-text);
+}
+
+.mg-share__dialog-content {
+  min-inline-size: 0;
+}
+
+.mg-share__dialog-image {
+  display: block;
+  max-inline-size: 100%;
+  max-block-size: mg-rem(220);
+  block-size: auto;
+  margin-inline: auto;
+}
+
+.mg-share__dialog-url {
+  overflow-wrap: anywhere;
+}
+
+.mg-share__dialog-actions,
+.mg-share__dialog-actions-primary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-100);
+}
+
+.mg-share__dialog-actions {
+  justify-content: space-between;
+  margin-block-start: var(--mg-spacing-200);
+}
+
+.mg-share__visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

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

@@ -4,7 +4,7 @@
  * Card layouts including VerticalCard, HorizontalCard, BookCard, and HorizontalBookCard with responsive media.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Cards/Card/VerticalCard.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/Card/VerticalCard.mdx
  */
 /* content-card start */
 
@@ -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

@@ -4,7 +4,7 @@
  * Key metric and statistical callout card with large numeral display and descriptive labels.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Cards/StatsCard/StatsCard.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/StatsCard/StatsCard.mdx
  */
 /* Stats Card Component */
 .mg-stats-card {
@@ -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;
+  }
+}