@undrr/undrr-mangrove 1.3.1 → 1.3.3

package/scss/Utilities/EmbedContainer/embed-container.scss

@@ -0,0 +1,58 @@
+// Responsive embed container
+// Provides aspect-ratio wrapper for iframes, videos, and other embedded media.
+// Default aspect ratio is 16:9. Use modifier classes for other ratios.
+// Usage: <div class="mg-embed-container"><iframe ...></iframe></div>
+
+.mg-embed-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; // 16:9 fallback for older browsers
+  height: 0;
+  overflow: hidden;
+
+  @supports (aspect-ratio: 16 / 9) {
+    aspect-ratio: 16 / 9;
+    padding-bottom: 0;
+    height: auto;
+  }
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+
+// Aspect ratio variants (mg-embed-container only)
+.mg-embed-container--4x3 {
+  padding-bottom: 75%; // 4:3 fallback
+
+  @supports (aspect-ratio: 4 / 3) {
+    aspect-ratio: 4 / 3;
+    padding-bottom: 0;
+  }
+}
+
+.mg-embed-container--1x1 {
+  padding-bottom: 100%; // 1:1 fallback
+
+  @supports (aspect-ratio: 1 / 1) {
+    aspect-ratio: 1 / 1;
+    padding-bottom: 0;
+  }
+}
+
+.mg-embed-container--21x9 {
+  padding-bottom: 42.857%; // 21:9 fallback
+
+  @supports (aspect-ratio: 21 / 9) {
+    aspect-ratio: 21 / 9;
+    padding-bottom: 0;
+  }
+}

package/scss/Utilities/ShowMore/ShowMore.scss

@@ -6,26 +6,17 @@
   max-height: 200px;
   max-height: var(--mg-show-more-height);
   overflow: hidden;
-}
-
-.mg-show-more--collapsed {
   position: relative;
-  margin-bottom: -1rem;
-}
-.mg-show-more--collapsed:before {
-  content: "";
-  cursor: s-resize;
-  display: block;
-  position: absolute;
-  background-image: linear-gradient(
+  mask-image: linear-gradient(
+    to bottom,
+    black calc(var(--mg-show-more-height) - 80px),
+    transparent var(--mg-show-more-height)
+  );
+  -webkit-mask-image: linear-gradient(
     to bottom,
-    rgb(255 255 255 / 0),
-    rgb(255 255 255 / 1)
+    black calc(var(--mg-show-more-height) - 80px),
+    transparent var(--mg-show-more-height)
   );
-  height: 200px;
-  width: 100%;
-  z-index: 1;
-  margin-top: calc(var(--mg-show-more-height) - 200px);
 }
 
 .mg-show-more--button {

package/scss/assets/scss/_components.scss

@@ -22,21 +22,21 @@
 
 // @import "../../Atom/Layout/Spacing/spacing"; // Retried
 // @import "../../Atom/Navigation/Breadcrumb/breadcrumb"; // Retried
-@import "../../Atom/Navigation/LanguageSwitcherRow/language-switcher-row";
 @import "../../Atom/Navigation/MenuItems/menu-items";
-@import "../../Atom/Navigation/ProgressBarNavigation/progress-bar-navigation";
-@import "../../Atom/Navigation/SidebarFirstLevel/sidebar-first-level";
 @import "../../Atom/ReachElement/Details/details";
 @import "../../Atom/ReachElement/Figcaption/figcaption";
 @import "../../Atom/Table/table";
+@import "../../Atom/Tag/tag";
 @import "../../Atom/Video/video";
 
 // Components
 @import "../../Components/Boilerplate/boilerplate";
+@import "../../Components/Forms/form-base";
+@import "../../Components/Forms/form-legacy";
+@import "../../Components/Forms/FormGroup/form-group";
+@import "../../Components/Forms/TextInput/text-input";
+@import "../../Components/Forms/Textarea/textarea";
 @import "../../Components/Forms/Checkbox/checkbox";
-@import "../../Components/Forms/Dropdowns/CustomSelect/custom-select";
-@import "../../Components/Forms/Dropdowns/Multiselect/multi-select";
-@import "../../Components/Forms/InputFields/input-fields";
 @import "../../Components/Forms/Radio/radio";
 @import "../../Components/Forms/Select/select";
 @import "../../Components/Breadcrumbs/breadcrumbs";
@@ -45,8 +45,6 @@
 @import "../../Components/Gallery/gallery";
 @import "../../Components/HighlightBox/highlight-box";
 @import "../../Components/QuoteHighlight/quote-highlight";
-@import "../../Components/Sidebar/sidebar";
-@import "../../Components/Accordion/accordion";
 @import "../../Components/Buttons/Chips/chips";
 @import "../../Components/Buttons/CtaButton/buttons";
 @import "../../Components/Buttons/CtaLink/cta-link";
@@ -57,7 +55,6 @@
 @import "../../Components/Cards/StatsCard/stats-card";
 @import "../../Components/Snackbar/snackbar";
 @import "../../Components/Hero/hero";
-@import "../../Components/LanguageSwitcher/language-switcher";
 @import "../../Components/ScrollContainer/scroll-container";
 @import "../../Components/Tab/tab";
 @import "../../Components/TableOfContents/TableOfContents";
@@ -68,9 +65,9 @@
 
 // Molecules
 @import "../../Molecules/ImageCaption/image-caption";
-@import "../../Molecules/SidebarData/sidebar-data";
 
 // Utilities
+@import "../../Utilities/EmbedContainer/embed-container";
 @import "../../Utilities/Loader/loader";
 @import "../../Utilities/FullWidth/FullWidth";
 @import "../../Utilities/ShowMore/ShowMore";

package/scss/assets/scss/_mixins.scss

@@ -135,50 +135,9 @@
   margin-bottom: $mg-spacing-150;
 }
 
-%sidebar {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-  padding: $mg-spacing-50;
-  position: relative;
 
-  @include devicebreak(medium) {
-    padding: $mg-spacing-100;
-  }
-}
-
-%sidebar-selected {
-  background-color: $mg-color-blue-600;
-
-  h6 {
-    color: $mg-color-white;
-  }
-
-  &:hover {
-    background-color: $mg-color-blue-600;
-  }
-}
-
-%checbox-radio-before {
-  -webkit-appearance: none;
-  appearance: none;
-  border: 2px solid $mg-color-red-900;
-  cursor: pointer;
-  height: 16px;
-  margin: 0;
-  width: 16px;
-
-  &:hover {
-    border-color: $sendai-purple-400;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-blue-800;
-    outline: 0;
-  }
-}
+// %checbox-radio-before — REMOVED (February 2026)
+// Migrated to .mg-form-check__input in _form-base.scss.
 
 %ctaimg {
   content: "";
@@ -217,18 +176,6 @@
   width: 100%;
 }
 
-%sidebar-chevron {
-  @include transition(all 0.3s ease);
-  @include transform(translateY(-50%));
-
-  // background: url(#{$img-path-Icon}/chevron-down.svg) no-repeat center center;
-  content: "";
-  height: 0.813rem;
-  position: absolute;
-  right: 1.188rem;
-  top: 50%;
-  width: 20px;
-}
 
 %language_switcher {
   border: none;
@@ -248,19 +195,8 @@
   width: 100%;
 }
 
-%select_default {
-  border: 2px solid $mg-color-black;
-  color: $mg-color-black;
-  cursor: pointer;
-  font-size: $mg-font-size-300;
-  font-weight: 600;
-  line-height: 1.125rem;
-  margin: 0;
-  padding: $mg-spacing-50 $mg-spacing-800 $mg-spacing-50 $mg-spacing-50;
-  position: relative;
-  text-transform: uppercase;
-  width: 100%;
-}
+// %select_default — REMOVED (February 2026)
+// Migrated to .mg-form-select in _form-base.scss.
 
 %select_option {
   border: 2px solid $mg-color-black;

package/scss/assets/scss/_utility.scss

@@ -287,3 +287,90 @@ $colors-solid: (
 .mg-u-color--interactive-active { color: $mg-color-interactive-active; }
 
 /* Color utilities end */
+
+/* Font size utilities start */
+
+.mg-u-font-size-150 {
+  font-size: $mg-font-size-150;
+  line-height: $mg-font-line-height-700;
+}
+
+.mg-u-font-size-200 {
+  font-size: $mg-font-size-200;
+  line-height: $mg-font-line-height-700;
+}
+
+.mg-u-font-size-250 {
+  font-size: $mg-font-size-250;
+  line-height: $mg-font-line-height-700;
+}
+
+.mg-u-font-size-300 {
+  font-size: $mg-font-size-300;
+  line-height: $mg-font-line-height-700;
+}
+
+.mg-u-font-size-400 {
+  font-size: $mg-font-size-300;
+  line-height: $mg-font-line-height-700;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-400;
+  }
+}
+
+.mg-u-font-size-500 {
+  font-size: $mg-font-size-400;
+  line-height: $mg-font-line-height-500;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-500;
+  }
+}
+
+.mg-u-font-size-600 {
+  font-size: $mg-font-size-500;
+  line-height: $mg-font-line-height-500;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-600;
+  }
+}
+
+.mg-u-font-size-800 {
+  font-size: $mg-font-size-600;
+  line-height: $mg-font-line-height-500;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-800;
+  }
+}
+
+.mg-u-font-size-900 {
+  font-size: $mg-font-size-800;
+  line-height: $mg-font-line-height-500;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-900;
+  }
+}
+
+:lang(my) {
+  .mg-u-font-size-400,
+  .mg-u-font-size-500,
+  .mg-u-font-size-600,
+  .mg-u-font-size-800,
+  .mg-u-font-size-900 {
+    line-height: 1.7;
+  }
+}
+
+:lang(ar) {
+  .mg-u-font-size-600,
+  .mg-u-font-size-800,
+  .mg-u-font-size-900 {
+    line-height: 1.4;
+  }
+}
+
+/* Font size utilities end */

package/scss/assets/scss/_variables-irp.scss

@@ -14,13 +14,22 @@ $mg-color-interactive: $irp-color-primary;
 $mg-color-interactive-active: $irp-color-primary;
 
 // COMPONENTS
-$mg-color-label: $mg-color-interactive;
-$mg-color-label--hover: $mg-color-interactive;
-$mg-radius-label: $mg-spacing-50;
+$mg-color-tag: $mg-color-interactive;
+$mg-color-tag--hover: $mg-color-interactive-active;
+
+// $mg-color-tag-secondary, $mg-color-tag-accent — use defaults
+$mg-radius-tag: $mg-spacing-50;
 $mg-color-button-background: $irp-color-primary;
 $mg-color-button-background--hover: $sendai-orange-900;
 $mg-radius-button: $mg-spacing-50;
 
+// Form elements
+$mg-color-form-check: $mg-color-interactive;
+$mg-color-form-check--hover: $mg-color-interactive-active;
+$mg-color-form-check--checked: $mg-color-interactive;
+$mg-color-form-focus: $mg-color-interactive;
+$mg-radius-form-input: $mg-spacing-50;
+
 // Hero
 $mg-color-hero: $mg-color-interactive;
 $mg-spacing-hero-overlay: 2rem 0;

package/scss/assets/scss/_variables-mcr.scss

@@ -21,9 +21,11 @@ $mg-color-interactive: $mcr-color-primary;
 $mg-color-interactive-active: $mcr-color-primary;
 
 // COMPONENTS
-$mg-color-label: $mg-color-interactive;
-$mg-color-label--hover: $mg-color-interactive;
-$mg-radius-label: $mg-spacing-100;
+$mg-color-tag: $mg-color-interactive;
+$mg-color-tag--hover: $mg-color-interactive-active;
+
+// $mg-color-tag-secondary, $mg-color-tag-accent — use defaults
+$mg-radius-tag: $mg-spacing-100;
 $mg-color-button-background: $mcr-color-primary;
 $mg-color-button-background--hover: $mcr-color-purple-800;
 $mg-radius-button: $mg-spacing-300;
@@ -31,6 +33,13 @@ $mg-border-width-button: 2px;
 $mg-padding-button: $mg-spacing-150 $mg-spacing-300;
 $mg-font-size-button: $mg-font-size-400;
 
+// Form elements
+$mg-color-form-check: $mg-color-interactive;
+$mg-color-form-check--hover: $mg-color-interactive-active;
+$mg-color-form-check--checked: $mg-color-interactive;
+$mg-color-form-focus: $mg-color-interactive;
+$mg-radius-form-input: $mg-spacing-100;
+
 // Hero
 $mg-color-hero: $mg-color-interactive;
 $mg-spacing-hero-overlay: 2rem 0;

package/scss/assets/scss/_variables-preventionweb.scss

@@ -13,12 +13,20 @@ $mg-color-interactive: $pw-color-primary;
 $mg-color-interactive-active: $pw-color-primary;
 
 // PW-COMPONENTS
-$mg-color-label: $mg-color-interactive;
-$mg-color-label--hover: $mg-color-interactive;
+$mg-color-tag: $mg-color-interactive;
+$mg-color-tag--hover: $mg-color-interactive-active;
+
+// $mg-color-tag-secondary, $mg-color-tag-accent — use defaults
 $mg-color-button-background: $pw-color-primary;
 $mg-color-button-background--hover: $sendai-orange-900;
 $mg-radius-button: $mg-spacing-50;
 
+// Form elements
+$mg-color-form-check: $mg-color-interactive;
+$mg-color-form-check--hover: $mg-color-interactive-active;
+$mg-color-form-check--checked: $mg-color-interactive;
+$mg-color-form-focus: $mg-color-interactive;
+
 // Hero
 $mg-color-hero: $mg-color-interactive;
 $mg-spacing-hero-overlay: 2rem 0;

package/scss/assets/scss/_variables.scss

@@ -193,7 +193,7 @@ $mg-font-size-900: 4rem;
 $mg-font-size-1000: 4.8rem;
 $mg-font-size-1100: 6.4rem;
 $mg-font-body: $mg-font-size-300;
-$mg-font-label: $mg-font-size-200;
+$mg-font-tag: $mg-font-size-200;
 $mg-font-line-height-500: 1.25em;
 $mg-font-line-height-700: 1.5em;
 
@@ -278,10 +278,14 @@ $mg-container-spacer: $mg-spacing-150;
 // text
 $mg-color-text: $mg-color-neutral-800;
 
-// label
-$mg-color-label: $mg-color-interactive !default;
-$mg-color-label--hover: $mg-color-interactive !default;
-$mg-radius-label: $mg-spacing-0 !default;
+// tag
+$mg-color-tag: $mg-color-interactive !default;
+$mg-color-tag--hover: $mg-color-interactive-active !default;
+$mg-color-tag-secondary: $mg-color-neutral-500 !default;
+$mg-color-tag-secondary--hover: $mg-color-neutral-600 !default;
+$mg-color-tag-accent: $mg-color-orange-900 !default;
+$mg-color-tag-accent--hover: $mg-color-orange-800 !default;
+$mg-radius-tag: $mg-spacing-0 !default;
 
 // button
 $mg-color-button: $mg-color-white !default;
@@ -295,11 +299,25 @@ $mg-border-color-button: $mg-color-text-button !default;
 $mg-padding-button: $mg-spacing-100 $mg-spacing-150 !default;
 $mg-font-size-button: $mg-font-size-250 !default;
 
-// hero
+// form check (checkbox / radio)
+$mg-color-form-check: $mg-color-interactive !default;
+$mg-color-form-check--hover: $mg-color-interactive-active !default;
+$mg-color-form-check--checked: $mg-color-interactive !default;
+
+// form inputs (text, textarea, select)
+$mg-color-form-focus: $mg-color-interactive !default;
+$mg-radius-form-input: $mg-spacing-0 !default;
+
+// shared variant accent colours (used by hero, cards, and other components)
+$mg-color-secondary: $mg-color-orange-800 !default;
+$mg-color-tertiary: $mg-color-neutral-900 !default;
+$mg-color-quaternary: $mg-color-red-800 !default;
+
+// hero (aliases for backward compatibility)
 $mg-color-hero: $mg-color-interactive !default;
-$mg-color-hero--secondary: $mg-color-orange-800 !default;
-$mg-color-hero--tertiary: $mg-color-neutral-900 !default;
-$mg-color-hero--quaternary: $mg-color-red-800 !default;
+$mg-color-hero--secondary: $mg-color-secondary !default;
+$mg-color-hero--tertiary: $mg-color-tertiary !default;
+$mg-color-hero--quaternary: $mg-color-quaternary !default;
 $mg-opacity-hero: 0.85 !default;
 $mg-spacing-hero-overlay: 0 !default;
 
@@ -333,7 +351,16 @@ $author-image-radius: 50%;
   * @tokens-end
   */
 
-// Legacy: Required by UNDP
+// @deprecated Legacy UNDP color variables — will be removed in a future major release.
+// Migrate to Mangrove's standard color tokens ($mg-color-{hue}-{shade}):
+//   $mg-color-green       → $mg-color-green-600 or a custom semantic variable
+//   $mg-color-green-light → $mg-color-green-200
+//   $mg-color-green-dark  → $mg-color-green-800
+//   $mg-color-yellow      → $mg-color-yellow-500
+//   $mg-color-yellow-light → $mg-color-yellow-100
+//   $mg-color-yellow-dark → $mg-color-yellow-700
+//   $mg-color-azure*      → $mg-color-blue-100 / $mg-color-neutral-100
+//   $mg-color-ebony-clay  → $mg-color-neutral-700
 $mg-color-green: #008484;
 $mg-color-green-light: #90ee90;
 $mg-color-yellow: #ff0;

package/scss/Atom/Navigation/LanguageSwitcherRow/language-switcher-row.scss

@@ -1,12 +0,0 @@
-// * language row start *//
-.language__item {
-  @extend %paragraph-font-200;
-  @extend %border-bottom;
-
-  display: inline-block;
-  line-height: 0.9;
-  min-width: 100px;
-  padding: $mg-spacing-25 $mg-spacing-50;
-}
-
-// * language row end *//

package/scss/Atom/Navigation/ProgressBarNavigation/progress-bar-navigation.scss

@@ -1,70 +0,0 @@
-// * progress navigation start *//
-.progress-container {
-  background: $mg-color-neutral-300;
-  height: 0.75rem;
-  width: 100%;
-
-  @include devicebreak(medium) {
-    height: 1rem;
-  }
-
-  &.small {
-    height: 0.625rem;
-
-    @include devicebreak(medium) {
-      height: 0.75rem;
-    }
-
-    .progress-bar {
-      height: 0.625rem;
-
-      @include devicebreak(medium) {
-        height: 0.75rem;
-      }
-    }
-  }
-
-  &.yellow {
-    .progress-bar {
-      background: $mg-color-yellow;
-    }
-  }
-
-  &.red {
-    .progress-bar {
-      background: $mg-color-red-900;
-    }
-  }
-
-  &.green {
-    .progress-bar {
-      background: $mg-color-green;
-    }
-  }
-
-  &.blue {
-    .progress-bar {
-      background: $mg-color-azure;
-    }
-  }
-}
-
-.progress-bar {
-  @include transition(width 0.2s linear);
-
-  height: 0.75rem;
-  min-width: 1%;
-  position: fixed;
-  width: 34%;
-  z-index: 1;
-
-  @include devicebreak(medium) {
-    height: 1rem;
-  }
-}
-
-.progress-top {
-  top: 0;
-}
-
-// * progress navigation end *//

package/scss/Atom/Navigation/SidebarFirstLevel/sidebar-first-level.scss

@@ -1,26 +0,0 @@
-// * Sidebar start *//
-.sidebar_item {
-  @extend %border-bottom;
-  @extend %sidebar;
-
-  &:hover {
-    background-color: $mg-color-neutral-200;
-  }
-
-  &.open {
-    .arrow {
-      transform: rotateZ(180deg);
-      transition: all 0.1s ease;
-    }
-  }
-
-  h6 {
-    margin-bottom: 0;
-  }
-
-  &.selected {
-    @extend %sidebar-selected;
-  }
-}
-
-// * Slidebar end *//