@undrr/undrr-mangrove 2.3.0 → 2.4.0

package/scss/Components/MegaMenu/mega-menu.scss

@@ -1137,3 +1137,406 @@
     }
   }
 }
+
+// =============================================================================
+// Contextual menu finding: desktop sections and mobile drawer
+// =============================================================================
+
+// Quick navigation shares geometry and readable type across every theme.
+// Override these properties on .mg-mega-wrapper in consumer theme CSS.
+:where(.mg-mega-wrapper) {
+  --mg-mega-filter-font-size: var(--mg-font-size-300);
+  --mg-mega-filter-meta-font-size: var(--mg-font-size-250);
+}
+
+.mg-mega-mobile-sidebar__filter-container {
+  padding: var(--mg-spacing-100) var(--mg-spacing-150);
+  border-bottom: 1px solid rgb(var(--mg-color-neutral-200));
+  background: rgb(var(--mg-color-white));
+  flex-shrink: 0;
+}
+
+.mg-mega-filter {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: rgb(var(--mg-color-white));
+  border: 1px solid rgb(var(--mg-color-neutral-300));
+  border-radius: var(--mg-radius-form-input);
+
+  &:focus-within {
+    @include mg-focus-ring;
+  }
+
+  &__icon {
+    position: absolute;
+    inset-inline-start: var(--mg-spacing-100);
+    color: rgb(var(--mg-color-neutral-600));
+    pointer-events: none;
+    font-size: var(--mg-font-size-300);
+  }
+
+  &__input {
+    width: 100%;
+    min-width: 0;
+    height: mg-rem(44);
+    padding: var(--mg-spacing-50) mg-rem(44);
+    border: none;
+    background: transparent;
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-mega-filter-font-size);
+    color: rgb(var(--mg-color-neutral-900));
+
+    &::placeholder {
+      color: rgb(var(--mg-color-neutral-600));
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      appearance: none;
+    }
+  }
+
+  &__clear {
+    position: absolute;
+    inset-inline-end: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: mg-rem(44);
+    height: mg-rem(44);
+    padding: 0;
+    border: none;
+    border-radius: var(--mg-radius-form-input);
+    background: transparent;
+    color: rgb(var(--mg-color-neutral-800));
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-font-size-500);
+    cursor: pointer;
+
+    &:focus-visible {
+      @include mg-focus-ring-inset;
+    }
+  }
+
+  &__status {
+    font-size: var(--mg-mega-filter-meta-font-size);
+    color: rgb(var(--mg-color-neutral-600));
+    margin-bottom: var(--mg-spacing-100);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__highlight {
+    // Match the card title's search-hit treatment. Reset the global editorial
+    // mark padding and size so the match stays inline, including in breadcrumbs.
+    padding: 0;
+    background: rgb(var(--mg-color-neutral-50));
+    color: inherit;
+    font-size: inherit;
+    font-weight: 700;
+    line-height: inherit;
+  }
+
+  &__empty-container {
+    padding-block: var(--mg-spacing-100);
+  }
+
+  &__empty-search-btn,
+  &__site-search-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mg-spacing-100);
+    min-height: mg-rem(44);
+    max-inline-size: 100%;
+    font-size: var(--mg-mega-filter-font-size);
+    line-height: inherit;
+    text-align: start;
+    text-decoration: none;
+    white-space: normal;
+    overflow-wrap: anywhere;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &__fallback {
+    margin-top: var(--mg-spacing-100);
+    padding-top: var(--mg-spacing-100);
+    border-top: 1px solid rgb(var(--mg-color-neutral-200));
+  }
+
+  &__fallback-arrow {
+    margin-inline-start: auto;
+
+    &:dir(rtl) {
+      transform: scaleX(-1);
+    }
+  }
+
+  &__mobile-list {
+    @include mg-list-unmarked;
+
+    padding: 0;
+    margin: 0;
+  }
+
+  &__mobile-item {
+    border-bottom: 1px solid rgb(var(--mg-color-neutral-200));
+
+    &:last-child {
+      border-bottom: 0; // The site-search footer owns the closing separator.
+    }
+  }
+
+  &__mobile-link {
+    transition: none;
+    display: flex;
+    align-items: center;
+    min-height: mg-rem(44);
+    padding: var(--mg-spacing-100);
+    border-radius: var(--mg-radius-form-input);
+    font-family: var(--mg-font-family-ui);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+
+    &:focus-visible {
+      @include mg-focus-ring-inset;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background: rgb(var(--mg-color-interactive) / 0.06);
+      }
+    }
+  }
+
+  // Same chevron geometry and logical direction as .mg-breadcrumb, without
+  // creating a navigation landmark or nested links for every search result.
+  &__trail {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    row-gap: var(--mg-spacing-25);
+    flex: 1;
+    min-width: 0;
+    font-size: var(--mg-mega-filter-meta-font-size);
+    color: rgb(var(--mg-color-neutral-600));
+  }
+
+  &__trail-step {
+    display: inline;
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
+
+    + .mg-mega-filter__trail-step::before {
+      content: "";
+      display: inline-block;
+      inline-size: 0.35em;
+      block-size: 0.35em;
+      border-inline-end: 0.125em solid currentColor;
+      border-block-start: 0.125em solid currentColor;
+      transform: rotate(45deg);
+      margin-inline: 0.65em 0.75em;
+      vertical-align: middle;
+      color: rgb(var(--mg-color-neutral-600));
+    }
+
+    &:dir(rtl) + .mg-mega-filter__trail-step::before {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__item-title {
+    font-size: var(--mg-mega-filter-font-size);
+    font-weight: 600;
+    color: rgb(var(--mg-color-interactive));
+  }
+}
+
+.mg-mega-mobile-sidebar--progressive.mg-mega-mobile-sidebar--filtering {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .mg-mega-mobile-sidebar__header {
+    flex-shrink: 0;
+  }
+}
+
+.mg-mega-mobile-sidebar__filter-results {
+  padding: var(--mg-spacing-100) var(--mg-spacing-150);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+
+  .mg-mega-filter__site-search-link {
+    width: 100%;
+  }
+}
+
+.mg-mega-content__left-contents {
+  display: contents;
+}
+
+.mg-mega-content--filterable > .mg-mega-content__left {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mg-mega-content__left-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.mg-mega-content__finder-footer {
+  flex-shrink: 0;
+  padding-block: var(--mg-spacing-100);
+  border-top: 1px solid rgb(var(--mg-color-neutral-200));
+}
+
+.mg-mega-menu-finder__action.mg-mega-content__finder-trigger {
+  width: 100%;
+  justify-content: space-between;
+  padding-inline: var(--mg-spacing-250);
+  border-radius: 0;
+
+  @media (hover: hover) {
+    &:hover {
+      background: rgb(var(--mg-color-interactive) / 0.15);
+    }
+  }
+
+  &:focus-visible {
+    background: rgb(var(--mg-color-interactive) / 0.15);
+  }
+
+  > span {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+}
+
+.mg-mega-content__finder-shortcut {
+  font-size: var(--mg-mega-filter-meta-font-size);
+  padding-inline: var(--mg-spacing-50);
+  border: 1px solid rgb(var(--mg-color-neutral-300));
+  border-radius: var(--mg-spacing-25);
+  background: rgb(var(--mg-color-white));
+  color: rgb(var(--mg-color-neutral-600));
+}
+
+.mg-mega-menu-finder {
+  flex-direction: column;
+  max-block-size: min(75vh, 600px);
+  margin-block: min(10vh, 80px) auto;
+  margin-inline: auto;
+  overflow: hidden;
+  font-weight: 400;
+
+  &[open] {
+    display: flex;
+  }
+
+  &__action {
+    transition: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-inline-size: mg-rem(44);
+    min-height: mg-rem(44);
+    padding: 0 var(--mg-spacing-50);
+    border: 0;
+    border-radius: var(--mg-radius-form-input);
+    background: transparent;
+    color: rgb(var(--mg-color-interactive));
+    font-family: var(--mg-font-family-text);
+    font-size: var(--mg-mega-filter-meta-font-size);
+    font-weight: 400;
+    cursor: pointer;
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover {
+        background: rgb(var(--mg-color-neutral-100));
+      }
+    }
+
+    &:focus-visible {
+      @include mg-focus-ring;
+    }
+  }
+
+  &__header {
+    padding: var(--mg-spacing-100) var(--mg-spacing-250) var(--mg-spacing-150);
+    border-bottom: 1px solid rgb(var(--mg-color-neutral-200));
+    flex-shrink: 0;
+
+    .mg-mega-filter {
+      max-inline-size: mg-rem(480);
+    }
+  }
+
+  &__heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mg-spacing-100);
+  }
+
+  &__label {
+    font-family: var(--mg-font-family-ui);
+    font-size: var(--mg-mega-filter-font-size);
+    color: rgb(var(--mg-color-neutral-800));
+  }
+
+  &__results {
+    padding: var(--mg-spacing-100) var(--mg-spacing-250);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    min-height: 0;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    padding: var(--mg-spacing-100) var(--mg-spacing-250);
+    border-top: 1px solid rgb(var(--mg-color-neutral-200));
+
+    .mg-mega-filter__site-search-link {
+      width: fit-content;
+      max-inline-size: 100%;
+    }
+  }
+}
+
+// Keep the finder body scrolling independently of its input, Close control and site-search footer.
+.mg-dialog.mg-mega-menu-finder {
+  max-block-size: min(75vh, 600px);
+  margin-block: min(10vh, 80px) auto;
+  margin-inline: auto;
+  overflow: hidden;
+}
+
+// A brief tint confirms pointer targeting without delaying navigation or focus.
+// Base states remain immediate; keyboard, touch and forced colours stay instant.
+@media (hover: hover) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
+  .mg-mega-menu-finder__action,
+  .mg-mega-filter__mobile-link {
+    transition: background-color var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+
+    &:focus-visible {
+      transition: none;
+    }
+  }
+}

package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss

@@ -573,7 +573,6 @@ $search-input-padding-x: mg-rem(44);
   padding: var(--mg-spacing-25) var(--mg-spacing-50);
   background: $search-chip-bg;
   border-radius: $search-radius;
-  text-transform: uppercase;
   letter-spacing: 0.025em;
 }
 
@@ -1713,7 +1712,6 @@ $search-input-padding-x: mg-rem(44);
   margin-inline-end: var(--mg-spacing-25);
   color: $search-text-muted;
   font-weight: 600;
-  text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
@@ -1736,3 +1734,73 @@ $search-input-padding-x: mg-rem(44);
     border-inline-end: 1px solid CanvasText;
   }
 }
+
+// A result scope is one required choice, distinct from removable filters.
+.mg-search__scope-tabs {
+  border: 0;
+  padding: 0;
+  margin-block: 0 var(--mg-spacing-100);
+  margin-inline: 0;
+  min-inline-size: 0;
+}
+
+.mg-search__scope-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-25);
+  border-block-end: 1px solid rgb(var(--mg-color-neutral-200));
+}
+
+.mg-search__scope-option {
+  position: relative;
+  cursor: pointer;
+  margin: 0;
+
+  input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: mg-rem(44);
+    min-block-size: mg-rem(44);
+    box-sizing: border-box;
+    padding: var(--mg-spacing-75) var(--mg-spacing-100);
+    border-block-end: 3px solid transparent;
+    font-family: var(--mg-font-family-ui);
+    color: rgb(var(--mg-color-text));
+  }
+
+  input:checked + span {
+    border-block-end-color: rgb(var(--mg-color-interactive));
+    font-weight: 700;
+  }
+
+  input:focus-visible + span {
+    @include mg-focus-ring-inset;
+  }
+
+  input:disabled + span {
+    cursor: not-allowed;
+    color: rgb(var(--mg-color-neutral-600));
+  }
+
+  @media (forced-colors: active) {
+    input:not(:checked) + span {
+      border-block-end-color: Canvas;
+    }
+
+    input:checked + span {
+      border-block-end-color: Highlight;
+    }
+
+    input:disabled + span {
+      color: GrayText;
+    }
+  }
+}

package/scss/Patterns/Content/Publication/publication-record.scss

@@ -0,0 +1,110 @@
+/**
+ * Experimental publication record composition, built on the ArticleStory shell and reading layout.
+ * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/Content/Publication/PublicationRecord.mdx
+ */
+@use "../../../assets/scss/mixins" as *;
+
+.mg-publication-record {
+  overflow-wrap: anywhere;
+
+  main a:not(.mg-tag) {
+    text-decoration-line: underline;
+  }
+}
+
+.mg-publication-record__layout {
+  max-inline-size: var(--mg-reading-with-contents-width);
+  padding-block-end: var(--mg-spacing-400);
+}
+
+.mg-publication-record__header {
+  margin-block-end: var(--mg-spacing-300);
+
+  h1 {
+    max-inline-size: 49rem;
+  }
+}
+
+.mg-publication-record__metadata {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--mg-spacing-200);
+
+  dt {
+    font-weight: 700;
+    margin-block-end: var(--mg-spacing-50);
+  }
+
+  dd {
+    overflow-wrap: anywhere;
+    margin-inline-start: 0;
+  }
+
+  ul {
+    @include mg-list-unmarked;
+
+    margin-block: 0;
+    padding-inline-start: 0;
+  }
+}
+
+.mg-publication-record__identity {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-200) var(--mg-spacing-300);
+
+  > div {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+}
+
+.mg-publication-record__resources {
+  @include mg-list-unmarked;
+
+  padding-inline-start: 0;
+
+  li {
+    padding-block: var(--mg-spacing-150);
+    border-block-end: 1px solid rgb(var(--mg-color-neutral-200));
+  }
+
+  li:first-child {
+    padding-block-start: var(--mg-spacing-50);
+  }
+
+  p {
+    margin-block: var(--mg-spacing-50) 0;
+  }
+}
+
+.mg-publication-record__reading {
+  align-items: start;
+}
+
+.mg-publication-record__main,
+.mg-publication-record__aside {
+  min-inline-size: 0;
+
+  > * + * {
+    margin-block-start: var(--mg-spacing-300);
+  }
+
+  > :first-child,
+  > section > h2:first-child {
+    margin-block-start: 0;
+  }
+}
+
+.mg-publication-record__cover {
+  margin: 0;
+  max-inline-size: 14rem;
+
+  img {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    padding: 0;
+    border: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
+  }
+}

package/scss/Patterns/LandingPages/publication-example.scss

@@ -0,0 +1,28 @@
+/**
+ * Publication branding example
+ *
+ * Consumer-owned report expression for the paired Publication page stories.
+ * This is story scaffolding, not an additional component API or theme.
+ *
+ * Full documentation:
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/LandingPages/PublicationPage.mdx
+ */
+
+// Existing theme token: the report changes its masthead surface, not the
+// theme's interactive colours, fonts, responsive geometry or focus rules.
+.mg-publication-example--branded {
+  --mg-color-hero: var(--mg-color-neutral-900);
+}
+
+// A documented Hero property is set on the component that owns its value.
+// Changing the shared copy-width hook keeps copy and protective veil aligned.
+.mg-publication-example--branded .mg-hero {
+  --mg-hero-overlay-max-width: 44rem;
+}
+
+// The only direct presentation override belongs to consumer-authored prose.
+// It never reaches a shared component's children or interaction states.
+.mg-publication-example--branded .mg-publication-example__intro {
+  border-inline-start: 4px solid rgb(var(--mg-color-interactive));
+  padding-inline-start: var(--mg-spacing-200);
+}

package/scss/assets/scss/_components.scss

@@ -102,3 +102,4 @@
 @use "../../Patterns/RichContent/rich-content" as *;
 @use "../../Patterns/ContentTeaser/content-teaser";
 @use "../../Patterns/ContentCard/content-card";
+@use "../../Components/Dialog/dialog" as *;

package/scss/assets/scss/_variables.scss

@@ -4,7 +4,7 @@
  * Storybook:    https://mangrove.undrr.org/
  * LLMs context: https://mangrove.undrr.org/llms.txt
  * Repository:   https://github.com/PreventionWeb/undrr-mangrove
- * Version: 2.3.0
+ * Version: 2.4.0
  *
  *   ██╗   ██╗███╗   ██╗██████╗ ██████╗ ██████╗
  *   ██║   ██║████╗  ██║██╔══██╗██╔══██╗██╔══██╗