@undrr/undrr-mangrove 1.3.0 → 1.3.2

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

@@ -0,0 +1,324 @@
+// Shared BEM-scoped form styles for Mangrove form components.
+// All form components import this partial for consistent base styling.
+
+// -----------------------------------------------------------------------------
+// Field wrapper
+// -----------------------------------------------------------------------------
+.mg-form-field {
+  display: block;
+  margin-bottom: $mg-spacing-100;
+}
+
+// -----------------------------------------------------------------------------
+// Label
+// -----------------------------------------------------------------------------
+.mg-form-label {
+  display: block;
+  font-size: $mg-font-size-300;
+
+  &--disabled {
+    color: $mg-color-neutral-400;
+  }
+
+  &--required::after {
+    color: $mg-color-red-900;
+    content: " *";
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Text input
+// -----------------------------------------------------------------------------
+%mg-form-input-base {
+  @extend %background-white;
+
+  appearance: none;
+  border: 2px solid $mg-color-black;
+  border-radius: $mg-radius-form-input;
+  box-sizing: border-box;
+  display: block;
+  font-family: $mg-font-family;
+  font-size: $mg-font-size-300;
+  height: 46px;
+  margin-top: $mg-spacing-25;
+  padding: 0.625rem;
+  width: 100%;
+
+  &::placeholder {
+    color: $mg-color-neutral-500;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 4px $mg-color-form-focus;
+    outline: 0;
+  }
+}
+
+.mg-form-input {
+  @extend %mg-form-input-base;
+
+  &--disabled {
+    background-color: $mg-color-white;
+    border-color: $mg-color-neutral-400;
+    color: $mg-color-neutral-400;
+
+    &::placeholder {
+      color: $mg-color-neutral-400;
+    }
+  }
+
+  &--error {
+    border-color: $mg-color-red-900;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Textarea
+// -----------------------------------------------------------------------------
+.mg-form-textarea {
+  @extend %mg-form-input-base;
+
+  height: auto;
+  max-width: 100%;
+  resize: vertical;
+
+  &--disabled {
+    background-color: $mg-color-white;
+    border-color: $mg-color-neutral-400;
+    color: $mg-color-neutral-400;
+
+    &::placeholder {
+      color: $mg-color-neutral-400;
+    }
+  }
+
+  &--error {
+    border-color: $mg-color-red-900;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Select
+// -----------------------------------------------------------------------------
+.mg-form-select {
+  @extend %background-white;
+
+  appearance: none;
+  border: 2px solid $mg-color-black;
+  border-radius: $mg-radius-form-input;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  font-family: $mg-font-family;
+  font-size: $mg-font-size-300;
+  height: 46px;
+  margin-top: $mg-spacing-25;
+  padding: 0.625rem;
+  padding-right: $mg-spacing-200;
+  width: 100%;
+
+  // Custom dropdown arrow
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
+  background-position: right 0.625rem center;
+  background-repeat: no-repeat;
+
+  &:focus-visible {
+    box-shadow: 0 0 4px $mg-color-form-focus;
+    outline: 0;
+  }
+
+  &--disabled {
+    background-color: $mg-color-white;
+    border-color: $mg-color-neutral-400;
+    color: $mg-color-neutral-400;
+    cursor: default;
+  }
+
+  &--error {
+    border-color: $mg-color-red-900;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Checkbox / Radio shared (check group)
+// -----------------------------------------------------------------------------
+.mg-form-check {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  // Base input (shared between checkbox and radio)
+  &__input {
+    appearance: none;
+    border: 2px solid $mg-color-form-check;
+    cursor: pointer;
+    height: 16px;
+    margin: 0;
+    width: 16px;
+
+    &:hover {
+      border-color: $mg-color-form-check--hover;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 4px $mg-color-form-focus;
+      outline: 0;
+    }
+
+    &--checkbox {
+      border-radius: 0;
+    }
+
+    &--radio {
+      background-color: transparent;
+      border-radius: 100%;
+      box-shadow: inset 0 0 0 $mg-color-white;
+    }
+
+    &--disabled {
+      border-color: $mg-color-neutral-400;
+      cursor: default;
+
+      &:hover {
+        border-color: $mg-color-neutral-400;
+      }
+    }
+
+    &--error {
+      border-color: $mg-color-red-900;
+
+      &:hover {
+        border-color: $mg-color-red-900;
+      }
+    }
+  }
+
+  // Label next to checkbox/radio
+  &__label {
+    cursor: pointer;
+    font-size: $mg-font-size-300;
+    padding: 0 7px;
+  }
+}
+
+// Checked states (must be outside BEM nesting for specificity)
+.mg-form-check__input--checkbox:checked {
+  background-color: $mg-color-form-check--checked;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8l3 3 6-6'/%3E%3C/svg%3E");
+  border-color: $mg-color-form-check--checked;
+}
+
+.mg-form-check__input--radio:checked {
+  background-color: $mg-color-form-check--checked;
+  box-shadow: inset 0 0 0 3px $mg-color-white;
+}
+
+// -----------------------------------------------------------------------------
+// Help text
+// -----------------------------------------------------------------------------
+.mg-form-help {
+  color: $mg-color-neutral-500;
+  font-size: $mg-font-size-200;
+  margin-bottom: 0;
+  margin-top: $mg-spacing-25;
+}
+
+// -----------------------------------------------------------------------------
+// Error text
+// -----------------------------------------------------------------------------
+.mg-form-error {
+  color: $mg-color-red-900;
+  font-size: $mg-font-size-300;
+  margin-bottom: 0;
+  margin-top: $mg-spacing-25;
+}
+
+// -----------------------------------------------------------------------------
+// Form error summary
+// -----------------------------------------------------------------------------
+.mg-form-error-summary {
+  background-color: $mg-color-red-50;
+  border-left: 4px solid $mg-color-red-900;
+  margin-bottom: $mg-spacing-200;
+  padding: $mg-spacing-150;
+
+  &:focus {
+    outline: 3px solid $mg-color-blue-800;
+    outline-offset: 0;
+  }
+
+  &__title {
+    color: $mg-color-red-900;
+    font-size: $mg-font-size-300;
+    font-weight: 700;
+    margin-bottom: $mg-spacing-75;
+    margin-top: 0;
+  }
+
+  &__list {
+    margin: 0;
+    padding-left: $mg-spacing-100;
+
+    li {
+      margin-bottom: $mg-spacing-50;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: $mg-color-red-900;
+      font-weight: 600;
+      text-decoration: underline;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Screen-reader-only utility
+// -----------------------------------------------------------------------------
+.mg-u-sr-only {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+// -----------------------------------------------------------------------------
+// RTL overrides
+// -----------------------------------------------------------------------------
+[dir="rtl"] {
+  .mg-form-select {
+    background-position: left 0.625rem center;
+    padding-left: $mg-spacing-200;
+    padding-right: 0.625rem;
+  }
+
+  .mg-form-input[type="date"]::-webkit-calendar-picker-indicator {
+    left: inherit;
+    position: absolute;
+    right: 27px;
+  }
+
+  .mg-form-input[type="date"]::-webkit-date-and-time-value {
+    margin-right: 0;
+    text-align: right;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Arabic font override
+// -----------------------------------------------------------------------------
+:lang(ar) {
+  .mg-form-input,
+  .mg-form-textarea,
+  .mg-form-select {
+    font-family: $mg-font-family-arabic-body;
+  }
+}

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

@@ -0,0 +1,153 @@
+// DEPRECATED — February 2026
+// These bare element selectors are provided for backward compatibility only.
+// Migrate to BEM classes (.mg-form-input, .mg-form-label, etc.) from _form-base.scss.
+// Scheduled for removal: August 2026.
+@warn "_form-legacy.scss is deprecated. Migrate to BEM classes from _form-base.scss. Removal: August 2026.";
+
+label {
+  @extend %paragraph-font-300;
+
+  display: block;
+
+  &.error {
+    @extend %paragraph-font-300;
+
+    color: $mg-color-black;
+    margin-top: 0;
+  }
+
+  &.disabled {
+    color: $mg-color-neutral-400;
+  }
+}
+
+.help {
+  color: $mg-color-neutral-500;
+  display: block;
+  font-size: $mg-font-size-200;
+  margin-bottom: 0;
+  margin-top: $mg-spacing-25;
+}
+
+.error {
+  color: $mg-color-red-900;
+  font-size: $mg-font-size-300;
+  margin-bottom: 0;
+  margin-top: $mg-spacing-25;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="date"],
+textarea {
+  @extend %background-white;
+
+  appearance: none;
+  border: 2px solid $mg-color-black;
+  border-radius: 0;
+  box-sizing: border-box;
+  display: block;
+  font-family: $mg-font-family;
+  font-size: $mg-font-size-300;
+  height: 46px;
+  margin-top: $mg-spacing-25;
+  padding: 0.625rem;
+  width: 100%;
+
+  &::placeholder {
+    color: $mg-color-neutral-500;
+  }
+
+  &:focus {
+    box-shadow: 0 0 4px $mg-color-blue-800;
+    outline: 0;
+  }
+
+  input[type="date"],
+  input[type="search"] {
+    position: relative;
+  }
+
+  &.disabled {
+    background-color: $mg-color-white;
+    border: 2px solid $mg-color-neutral-400;
+    color: $mg-color-neutral-400;
+
+    &::placeholder {
+      color: $mg-color-neutral-400;
+    }
+  }
+
+  &.error {
+    border: 2px solid $mg-color-red-900;
+  }
+}
+
+input[type="date"] {
+  background-color: $mg-color-white;
+  color: $mg-color-neutral-500;
+}
+
+.help {
+  &.disabled {
+    color: $mg-color-neutral-400;
+  }
+}
+
+textarea {
+  height: auto;
+  max-width: 100%;
+  resize: vertical;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  appearance: none;
+  left: 3px;
+  opacity: 0;
+  position: absolute;
+}
+
+[dir="rtl"] {
+  input[type="text"],
+  input[type="number"],
+  input[type="email"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="date"],
+  textarea {
+    @media (hover: none) and (pointer: coarse) {
+      input[type="date"] {
+        padding-right: $mg-spacing-100;
+      }
+    }
+  }
+
+  input[type="date"]::-webkit-calendar-picker-indicator {
+    left: inherit;
+    position: absolute;
+    right: 27px;
+  }
+
+  input::-webkit-date-and-time-value {
+    margin-right: 0;
+    text-align: right;
+  }
+}
+
+:lang(ar) {
+  input[type="text"],
+  input[type="number"],
+  input[type="email"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="date"],
+  textarea {
+    font-family: $mg-font-family-arabic-body;
+  }
+}

package/scss/Components/Hero/hero.scss

@@ -69,7 +69,7 @@
 
   &__label {
     display: inline-block;
-    font-size: $mg-font-label;
+    font-size: $mg-font-tag;
     font-weight: bold;
     margin-right: $mg-spacing-25;
     padding: $mg-spacing-25 0;

package/scss/Components/HighlightBox/highlight-box.scss

@@ -12,16 +12,7 @@
   width: 100%;
   border: 1px solid rgb(0 0 0 / 0.3);
 
-  // Responsive embed for iframes inside highlight-box
-  &:has(iframe) {
-    position: relative;
-    max-width: 100%;
-    aspect-ratio: 16 / 9;
-    height: 100%;
-  }
   iframe {
-    width: 100%;
-    height: 100%;
     border: 0;
     display: block;
     max-width: 100%;

package/scss/Components/MegaMenu/megamenu.scss

@@ -11,9 +11,13 @@
   align-items: flex-start;
   z-index: 10;
   padding: 0;
-  max-width: $mg-breakpoint-desktop; // mg-mega-toolbar does not play well with mg-container
+  max-width: $mg-breakpoint-desktop;
   margin: 0 auto;
 
+  @media screen and (min-width: $mg-breakpoint-desktop-wide) {
+    max-width: $mg-breakpoint-desktop-wide;
+  }
+
   // these are note "mobile first" as they seem to cause a glitch with firefox and .mg-container-full-width
   @media screen and (max-width: $mg-breakpoint-tablet) {
     padding-left: 4rem; // space for the icon button
@@ -334,7 +338,7 @@
       li {
         animation: mg-mega-item-slide-in 250ms ease-out both;
 
-        @for $i from 1 through 12 {
+        @for $i from 1 through 25 {
           &:nth-child(#{$i}) {
             animation-delay: #{($i - 1) * 30}ms;
           }

package/scss/Components/PageHeader/page-header.scss

@@ -130,7 +130,7 @@
 
 .mg-page-header__label {
   display: inline-block;
-  font-size: $mg-font-label;
+  font-size: $mg-font-tag;
   font-weight: bold;
   margin-right: $mg-spacing-25;
   padding: $mg-spacing-25 0;

package/scss/Components/SyndicationSearchWidget/SyndicationSearchWidget.scss

@@ -689,10 +689,22 @@ $search-input-padding-x: $mg-spacing-250;
 // Result teaser HTML overrides
 // ========================================
 
+// Type badge and site name badges injected before the title in teaser results
+.mg-search__result-badges {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $mg-spacing-50;
+  margin-bottom: $mg-spacing-25;
+}
+
+// Content type badge — uses the system-level .mg-tag atom.
+// No additional styles needed; the class is applied in ResultItem.jsx.
+
 // Site name label in search results
 .mg-search__result-site-name {
   display: inline-block;
-  margin: 0 0 $mg-spacing-25;
+  margin: 0;
   padding: $mg-spacing-25 $mg-spacing-50;
   font-size: $mg-font-size-200;
   color: $search-text-muted;
@@ -719,6 +731,42 @@ $search-input-padding-x: $mg-spacing-250;
   }
 }
 
+// ========================================
+// Teaser Field Visibility
+// ========================================
+// Modifier classes on the results container hide specific teaser fields
+// via the visibleTeaserFields config option.
+// Title (.mg-card__title) is intentionally not toggleable.
+// Teaser HTML uses standard mg-card__* BEM wrapper classes added by
+// Drupal teaser templates (see web-backlog#2660).
+
+.mg-search--hide-image .mg-card__visual { display: none; }
+.mg-search--hide-contentType .mg-card__tag { display: none; }
+.mg-search--hide-publicationType .mg-card__publication-type { display: none; }
+.mg-search--hide-date .mg-card__date { display: none; }
+.mg-search--hide-siteName .mg-search__result-site-name { display: none; }
+.mg-search--hide-summary .mg-card__description { display: none; }
+.mg-search--hide-organization .mg-card__organization { display: none; }
+
+// ========================================
+// Card Display Mode (mg-grid layout)
+// ========================================
+
+.mg-search__results-grid {
+  gap: $mg-spacing-150;
+
+  // Card items within grid
+  > [role="listitem"] {
+    display: flex;
+  }
+
+  // Remove list-style dividers in grid/card mode
+  .mg-search__result {
+    padding-bottom: 0;
+    border-bottom: 0;
+  }
+}
+
 // ========================================
 // Result Animations
 // Sequential fade-in and slide from left for search results.

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 {