@undrr/undrr-mangrove 2.0.0 → 2.1.0

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

@@ -0,0 +1,339 @@
+/**
+ * Cite this (CiteThis)
+ *
+ * Citation button and dialog with a readable disclosure fallback.
+ *
+ * Full documentation:
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CiteThis/CiteThis.mdx
+ */
+
+.mg-cite-this {
+  max-inline-size: 48rem;
+  color: rgb(var(--mg-color-neutral-800));
+  font-family: var(--mg-font-family-text);
+
+  &__fallback {
+    background: rgb(var(--mg-color-neutral-50));
+    border-inline-start: var(--mg-spacing-50) solid
+      rgb(var(--mg-color-interactive));
+  }
+
+  &__trigger {
+    min-block-size: 44px;
+    padding: var(--mg-spacing-100) var(--mg-spacing-200);
+    background: rgb(var(--mg-color-interactive));
+    border: 0;
+    border-radius: var(--mg-radius-button);
+    color: rgb(var(--mg-color-white));
+    cursor: pointer;
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-font-size-300);
+    font-weight: 600;
+    transition: filter var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+
+    &:hover {
+      filter: brightness(0.92);
+    }
+
+    &:focus-visible {
+      @include mg-focus-ring;
+    }
+
+    @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 {
+    inline-size: min(calc(100% - 2rem), 44rem);
+    max-block-size: calc(100vh - 2rem);
+    padding: 0;
+    overflow-y: auto;
+    background: rgb(var(--mg-color-white));
+    border: 0;
+    border-block-start: var(--mg-spacing-50) solid
+      rgb(var(--mg-color-interactive));
+    border-radius: var(--mg-radius-button);
+    color: rgb(var(--mg-color-neutral-800));
+    box-shadow: 0 12px 40px rgb(0 0 0 / 0.2);
+
+    &::backdrop {
+      background: var(--mg-color-modal-scrim);
+    }
+
+    .mg-cite-this__content {
+      padding-block: 0 var(--mg-spacing-200);
+    }
+  }
+
+  &__dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mg-spacing-200);
+    padding: var(--mg-spacing-200) var(--mg-spacing-200) var(--mg-spacing-150);
+  }
+
+  &__title {
+    margin: 0;
+    font-family: var(--mg-font-family-ui);
+    font-size: var(--mg-font-size-400);
+    line-height: 1.3;
+  }
+
+  &__close {
+    flex-shrink: 0;
+    inline-size: 44px;
+    block-size: 44px;
+    min-inline-size: 44px;
+    min-block-size: 44px;
+    color: rgb(var(--mg-color-neutral-600));
+
+    &:hover {
+      color: rgb(var(--mg-color-neutral-900));
+      background-color: rgb(var(--mg-color-neutral-900) / 0.08);
+    }
+  }
+
+  &__summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mg-spacing-150);
+    min-block-size: 44px;
+    padding: var(--mg-spacing-150) var(--mg-spacing-200);
+    cursor: pointer;
+    font-family: var(--mg-font-family-ui);
+    font-size: var(--mg-font-size-400);
+    font-weight: 700;
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus-visible {
+      @include mg-focus-ring-inset;
+    }
+
+    &::after {
+      content: "+";
+      font-family: var(--mg-font-family-text);
+      font-size: var(--mg-font-size-400);
+      font-weight: 400;
+      line-height: 1;
+    }
+  }
+
+  &__fallback[open] .mg-cite-this__summary::after {
+    content: "−";
+  }
+
+  &__content {
+    padding: 0 var(--mg-spacing-200) var(--mg-spacing-200);
+  }
+
+  // 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 {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--mg-spacing-150);
+    margin-block-start: var(--mg-spacing-150);
+  }
+
+  &__copy {
+    min-block-size: 44px;
+    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-interactive));
+    cursor: pointer;
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-font-size-250);
+    font-weight: 600;
+    transition-property: background-color, color, scale;
+    transition-duration: var(--mg-motion-duration-fast);
+    transition-timing-function: var(--mg-motion-easing-standard);
+
+    &:hover {
+      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 {
+      scale: 0.96;
+    }
+
+    &:focus-visible {
+      @include mg-focus-ring;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  &__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);
+  }
+}

package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss

@@ -4,7 +4,7 @@
  * Fixed bottom GDPR/privacy compliance consent notice with accept/manage preference controls.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/CookieConsentBanner/CookieConsentBanner.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CookieConsentBanner/CookieConsentBanner.mdx
  */
 // Mangrove theme bridge for the externally loaded vanilla-cookieconsent UI.
 // The CDN stylesheet is appended after the local bundle and declares the same

package/scss/Components/DataViz/Legend/legend.scss

@@ -4,7 +4,7 @@
  * Continuous, stepped and categorical legend primitives for maps and charts.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/DataViz/Legend/Legend.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/DataViz/Legend/Legend.mdx
  */
 
 .mg-legend {

package/scss/Components/ErrorPages/error-pages.scss

@@ -4,7 +4,7 @@
  * Branded 404 Not Found and 500 Server Error status page layouts and illustrations.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/ErrorPages/ErrorPage.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ErrorPages/ErrorPage.mdx
  */
 .mg-error-page {
   min-height: 100vh;

package/scss/Components/Footer/footer.scss

@@ -4,7 +4,7 @@
  * Site-wide mega footer with branding, navigation columns, copyright, and social links.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Footer/Footer.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Footer/Footer.mdx
  */
 .mg-footer {
   --mg-gutenberg-spacer: 0;

package/scss/Components/Forms/Checkbox/checkbox.scss

@@ -4,7 +4,7 @@
  * Accessible custom checkbox inputs with focus rings, checked checkmarks, and disabled states.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Checkbox/Checkbox.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Checkbox/Checkbox.mdx
  */
 // Checkbox-specific overrides.
 // Shared form styles live in _form-base.scss (.mg-form-check).

package/scss/Components/Forms/FormAction/form-action.scss

@@ -4,7 +4,7 @@
  * Button row and submission action container for web forms.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/FormAction/FormAction.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormAction/FormAction.mdx
  */
 .mg-form-action {
   align-items: stretch;

package/scss/Components/Forms/FormGroup/form-group.scss

@@ -4,7 +4,7 @@
  * Field wrapper associating labels, hint helper text, form inputs, and inline error validation messages.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/FormGroup/FormGroup.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormGroup/FormGroup.mdx
  */
 // FormGroup — styled fieldset/legend for grouping related form controls.
 

package/scss/Components/Forms/InputFields/input-fields.scss

@@ -4,7 +4,7 @@
  * Rollup stylesheet for text inputs, select dropdowns, and form control elements.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
  */
 // DEPRECATED — February 2026
 // This file has been replaced by:

package/scss/Components/Forms/Radio/radio.scss

@@ -4,7 +4,7 @@
  * Accessible radio input controls with styled checked indicators and keyboard focus states.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Radio/Radio.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Radio/Radio.mdx
  */
 // Radio-specific overrides.
 // Shared form styles live in _form-base.scss (.mg-form-check).

package/scss/Components/Forms/Range/range.scss

@@ -4,7 +4,7 @@
  * Range slider supporting continuous and stepped intervals with labelled tick marks.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Range/Range.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Range/Range.mdx
  */
 
 @mixin mg-range-thumb {

package/scss/Components/Forms/SegmentedControl/segmented-control.scss

@@ -6,7 +6,7 @@
  * view shows.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/SegmentedControl/SegmentedControl.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/SegmentedControl/SegmentedControl.mdx
  */
 
 // The control is a presentation layer over a native radio group: a fieldset, a

package/scss/Components/Forms/Select/select.scss

@@ -4,7 +4,7 @@
  * Custom styled <select> dropdown menus with custom chevron indicator and focus treatment.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Select/Select.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Select/Select.mdx
  */
 // Select-specific overrides.
 // Shared form styles live in _form-base.scss (.mg-form-select).

package/scss/Components/Forms/TextInput/text-input.scss

@@ -4,7 +4,7 @@
  * Single-line text input fields supporting prefix/suffix adornments, search variants, and error states.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
  */
 // TextInput-specific overrides (date picker styling).
 // Shared form styles live in _form-base.scss.

package/scss/Components/Forms/Textarea/textarea.scss

@@ -4,7 +4,7 @@
  * Multi-line text input fields with configurable resize behavior and validation styling.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Textarea/Textarea.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Textarea/Textarea.mdx
  */
 // Textarea-specific overrides.
 // Shared form styles live in _form-base.scss (.mg-form-textarea).

package/scss/Components/Forms/_form-base.scss

@@ -4,7 +4,7 @@
  * Foundational styling, typography, focus rings, and validation states shared across form controls.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
  */
 // Shared BEM-scoped form styles for Mangrove form components.
 // All form components import this partial for consistent base styling.

package/scss/Components/Gallery/gallery.scss

@@ -4,7 +4,7 @@
  * Thumbnail grid gallery and full-screen lightbox image viewer with keyboard navigation.
  *
  * Full documentation:
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Gallery/Gallery.mdx
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Gallery/Gallery.mdx
  */
 /* Photo Gallery Component */
 .mg-gallery {
@@ -105,21 +105,27 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    color: rgb(var(--mg-color-interactive));
+    font-size: var(--mg-spacing-300);
     z-index: 3; // loading spinner above nav buttons — local to gallery stacking context
-  }
 
-  &__spinner {
-    width: var(--mg-spacing-300); // 30px
-    height: var(--mg-spacing-300);
-    border: 4px solid rgb(var(--mg-color-neutral-300));
-    border-top-color: rgb(var(--mg-color-interactive));
-    border-radius: 50%;
-    animation: mg-gallery-spin 0.8s linear infinite;
-  }
+    @media (prefers-reduced-motion: reduce) {
+      // The shared Loader reveals translated text. Keep it inside the stage
+      // and give the label a stable surface over arbitrary video/posters.
+      width: max-content;
 
-  @keyframes mg-gallery-spin {
-    to {
-      transform: rotate(360deg);
+      // Reserve both 44px arrow targets, their largest inset, and a focus gap.
+      $navigation-space: calc(
+        #{mg-rem(44)} + var(--mg-spacing-100) + var(--mg-spacing-50)
+      );
+
+      max-width: calc(100% - 2 * $navigation-space);
+      box-sizing: border-box;
+      pointer-events: none;
+      padding: var(--mg-spacing-75);
+      background: rgb(var(--mg-color-neutral-0));
+      color: rgb(var(--mg-color-text));
+      font-size: var(--mg-font-size-300);
     }
   }
 
@@ -213,7 +219,10 @@
     padding: 0;
     position: relative;
 
-    @include transition(border-color 0.2s ease);
+    @include transition(
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard)
+    );
 
     @include devicebreak(medium) {
       width: 100%;
@@ -366,7 +375,11 @@
     align-items: center;
     justify-content: center;
 
-    @include transition(background-color 0.2s, opacity 0.2s);
+    @include transition(
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)
+    );
 
     &:hover {
       background: rgb(var(--mg-color-neutral-600));
@@ -436,7 +449,11 @@
     align-items: center;
     justify-content: center;
 
-    @include transition(background-color 0.2s, opacity 0.2s);
+    @include transition(
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard)
+    );
 
     &:hover {
       background: rgb(var(--mg-color-neutral-600));
@@ -511,3 +528,11 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .mg-gallery__thumbnail,
+  .mg-gallery__arrow,
+  .mg-gallery__arrow-button {
+    transition: none;
+  }
+}