@undrr/undrr-mangrove 2.0.1 → 2.1.0

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

@@ -57,34 +57,13 @@ $search-input-padding-x: mg-rem(44);
 // Loading Progress Bar
 // ========================================
 
+// Shared ProgressBar owns track, animation, RTL and accessibility modes.
+// Keep the historical wrapper class as the positioning hook.
 .mg-search__progress {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: $search-border-light;
-  overflow: hidden;
-  z-index: 10;
-}
-
-.mg-search__progress-bar {
-  height: 100%;
-  width: 30%;
-  background: linear-gradient(90deg, $search-primary, $search-primary-dark);
-  animation: mg-search-progress 1.2s ease-in-out infinite;
-}
-
-@keyframes mg-search-progress {
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(200%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: 1; // local stacking within the positioned results region
 }
 
 // Search form (used by both the in-widget SearchForm and the standalone
@@ -109,9 +88,13 @@ $search-input-padding-x: mg-rem(44);
 
   // Override the inline-end padding to leave room for the clear button
   padding-inline-end: $search-input-padding-x;
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 
   &::placeholder {
     color: $search-text-muted;
@@ -143,12 +126,6 @@ $search-input-padding-x: mg-rem(44);
   }
 }
 
-@keyframes mg-search-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 // Submit button: visual styling comes from .mg-button / .mg-button-primary.
 // Only layout-specific spacing for the icon + label is defined here.
 // Loading state is conveyed by the widget-level progress strip
@@ -202,9 +179,14 @@ $search-input-padding-x: mg-rem(44);
   border: 1px solid $search-border;
   border-radius: $search-radius;
   cursor: pointer;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
+  }
 
   &:hover {
     background: $search-chip-hover;
@@ -231,9 +213,13 @@ $search-input-padding-x: mg-rem(44);
   border: 1px solid $search-primary;
   border-radius: $search-radius;
   cursor: pointer;
-  transition:
-    background-color 0.2s,
-    color 0.2s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 
   &:hover {
     color: #fff;
@@ -247,7 +233,23 @@ $search-input-padding-x: mg-rem(44);
   gap: var(--mg-spacing-200);
 }
 
+// Results column: the search box and filter chips (sidebar layout) and the
+// results.
+.mg-search__column {
+  flex: 1;
+  min-width: 0;
+}
+
+// The in-widget search box is capped at a comfortable reading width, start
+// aligned, in every layout; on narrow screens it is full width anyway. A
+// form portaled into a searchTarget is outside the widget and left to the
+// host page.
+.mg-search-widget .mg-search__form {
+  max-inline-size: mg-rem(768);
+}
+
 .mg-search__main {
+  position: relative;
   flex: 1;
   min-width: 0;
 }
@@ -304,7 +306,63 @@ $search-input-padding-x: mg-rem(44);
 
 // Results
 .mg-search__results {
-  transition: opacity 0.2s ease-out;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
+}
+
+// A new search with results on screen: keep them, dimmed, with an inline
+// loader in the header, instead of swapping in the skeleton.
+// Keep active status text at full contrast; only the retained hits are stale.
+.mg-search__results--refreshing {
+  .mg-search__results-list,
+  .mg-search__results-grid {
+    opacity: 0.6;
+  }
+}
+
+.mg-search__results-loader {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mg-spacing-50);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  margin-inline-start: auto;
+  color: $search-primary;
+}
+
+// One short fade for a completed set. No per-item delays or movement:
+// results are immediately usable and the base state is fully visible.
+.mg-search__enter {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: mg-search-results-in var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
+}
+
+@keyframes mg-search-results-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// Server-rendered results ([data-mg-search-ssr], moved into the results
+// region until the first client results). The recommended markup reuses the
+// client classes (.mg-search__results-list, .mg-search__result), which get
+// containment and block images from their own rules; these cover markup
+// that doesn't, so a malformed teaser can't cover the page here either.
+// undrr/web-backlog#3145.
+[data-mg-search-ssr] {
+  position: relative;
+  isolation: isolate;
+
+  :where(.mg-card__visual) img {
+    display: block;
+  }
 }
 
 .mg-search__results-header {
@@ -342,9 +400,15 @@ $search-input-padding-x: mg-rem(44);
   border: 1px solid $search-border;
   border-radius: $search-radius;
   cursor: pointer;
-  transition:
-    background-color 0.15s,
-    border-color 0.15s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
+  }
+
   white-space: nowrap;
 
   &:hover {
@@ -423,6 +487,12 @@ $search-input-padding-x: mg-rem(44);
 
 // Result item
 .mg-search__result {
+  // Contain each result: teaser HTML comes from the consuming site's index,
+  // and a malformed teaser's absolutely positioned pieces (e.g. a stretched
+  // link's ::after) otherwise anchor to the page and cover it.
+  // undrr/web-backlog#3145.
+  position: relative;
+  isolation: isolate;
   padding-bottom: var(--mg-spacing-150);
   border-bottom: 1px solid $search-border-light;
 
@@ -432,6 +502,13 @@ $search-input-padding-x: mg-rem(44);
   }
 }
 
+// Teaser images are inline by default, and the teaser's field wrappers set
+// a 24px line height, which left a few pixels of descender space under every
+// result image. Block images sit flush in list, card and book cover modes.
+.mg-search__result :where(.mg-card__visual) img {
+  display: block;
+}
+
 .mg-search__result-content {
   display: flex;
   gap: var(--mg-spacing-100);
@@ -549,14 +626,7 @@ $search-input-padding-x: mg-rem(44);
 .mg-search__skeleton-title,
 .mg-search__skeleton-meta,
 .mg-search__skeleton-text {
-  background: linear-gradient(
-    90deg,
-    $search-skeleton-bg 25%,
-    #e8e8e8 50%,
-    $search-skeleton-bg 75%
-  );
-  background-size: 200% 100%;
-  animation: mg-search-shimmer 1.5s infinite;
+  background: $search-skeleton-bg;
   border-radius: $search-radius;
 }
 
@@ -599,14 +669,7 @@ $search-input-padding-x: mg-rem(44);
 
 .mg-search__skeleton-card-image {
   aspect-ratio: 16 / 9;
-  background: linear-gradient(
-    90deg,
-    $search-skeleton-bg 25%,
-    #e8e8e8 50%,
-    $search-skeleton-bg 75%
-  );
-  background-size: 200% 100%;
-  animation: mg-search-shimmer 1.5s infinite;
+  background: $search-skeleton-bg;
 }
 
 .mg-search__skeleton-card-body {
@@ -622,15 +685,6 @@ $search-input-padding-x: mg-rem(44);
   }
 }
 
-@keyframes mg-search-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
 // Facets placeholder
 .mg-search__facets-placeholder {
   padding: var(--mg-spacing-100);
@@ -810,19 +864,25 @@ $search-input-padding-x: mg-rem(44);
 // Animation classes applied via JS (which checks prefers-reduced-motion).
 // ========================================
 
-// Initial hidden state - applied before animation
-.mg-search__result--pending {
-  opacity: 0;
-  transform: translateX(-20px);
-}
+// Legacy consumers may still toggle these classes. Gate the hidden state as
+// well as its transition, so reduced motion never strands a result invisible.
+@media (prefers-reduced-motion: no-preference) {
+  .mg-search__result--pending {
+    opacity: 0;
+    transform: translateX(-20px);
 
-// Animated state - triggers the transition
-.mg-search__result--visible {
-  opacity: 1;
-  transform: translateX(0);
-  transition:
-    opacity 0.3s ease-out,
-    transform 0.3s ease-out;
+    &:dir(rtl) {
+      transform: translateX(20px);
+    }
+  }
+
+  .mg-search__result--visible {
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+      transform var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 }
 
 // Stale state - dim results while loading new data
@@ -831,29 +891,8 @@ $search-input-padding-x: mg-rem(44);
   pointer-events: none;
 }
 
-// Stale main area with more visible feedback
-.mg-search__main--stale {
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: rgb(255 255 255 / 0.4);
-    pointer-events: none;
-    animation: mg-search-pulse 1.5s ease-in-out infinite;
-  }
-}
-
-@keyframes mg-search-pulse {
-  0%,
-  100% {
-    opacity: 0.3;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
+// Refresh feedback is retained/dimmed results, inline Loader and the shared
+// progress strip; an additional pulsing overlay would compete with them.
 
 // ========================================
 // Collapsible Filter Sections
@@ -900,7 +939,11 @@ $search-input-padding-x: mg-rem(44);
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 6px solid currentColor;
-  transition: transform 0.2s ease;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
 
   .mg-search__facet-toggle[aria-expanded="false"] & {
     transform: rotate(-90deg);
@@ -922,13 +965,37 @@ $search-input-padding-x: mg-rem(44);
   padding: var(--mg-spacing-200);
 }
 
+// Legacy public class: keep compatibility for hand-written Drupal markup.
+// New widget code uses shared Loader. One cycle is 1s; this is a documented
+// looping compatibility exception, not interaction timing. Unlike the shared
+// Loader's designed static reduced-motion state, this legacy markup keeps slow
+// rotation until its consumers can be audited and migrated.
+@keyframes mg-search-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .mg-search__spinner {
+  --mg-search-spinner-duration: 1s;
+
   border: 4px solid $search-border-light;
   border-top: 4px solid $search-primary;
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  animation: mg-search-spin 1s linear infinite;
+  animation: mg-search-spin var(--mg-search-spinner-duration) linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: calc(var(--mg-search-spinner-duration) * 3) !important;
+    animation-iteration-count: infinite !important;
+  }
+
+  @media (forced-colors: active) {
+    border-color: GrayText;
+    border-top-color: CanvasText;
+    forced-color-adjust: none;
+  }
 }
 
 .mg-search__loader-text {
@@ -963,9 +1030,13 @@ $search-input-padding-x: mg-rem(44);
   border: 1px solid rgb(var(--mg-color-neutral-600) / 0.22);
   border-radius: var(--mg-radius-form-input);
   cursor: pointer;
-  transition:
-    border-color 0.15s,
-    box-shadow 0.15s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 
   &:hover {
     border-color: $search-primary;
@@ -997,7 +1068,11 @@ $search-input-padding-x: mg-rem(44);
   flex-shrink: 0;
   margin-inline-start: var(--mg-spacing-50);
   color: $search-text-muted;
-  transition: transform 0.2s ease;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
 
   .mg-select--open & {
     transform: rotate(180deg);
@@ -1029,7 +1104,11 @@ $search-input-padding-x: mg-rem(44);
   border-top: none;
   border-radius: 0 0 $search-radius $search-radius;
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
-  animation: mg-select-fade-in 0.15s ease-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: mg-select-fade-in var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
 }
 
 @keyframes mg-select-fade-in {
@@ -1085,7 +1164,11 @@ $search-input-padding-x: mg-rem(44);
   padding: var(--mg-spacing-50) var(--mg-spacing-75);
   min-height: 40px; // Touch-friendly
   cursor: pointer;
-  transition: background-color 0.1s ease;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
 
   &:hover,
   &--highlighted {
@@ -1101,6 +1184,9 @@ $search-input-padding-x: mg-rem(44);
     }
   }
 
+  // Hover is pure CSS; --highlighted is the keyboard position only, so
+  // moving the pointer over a long list doesn't re-render it.
+  &--selected:hover,
   &--selected#{&}--highlighted {
     background-color: rgb(var(--mg-color-blue-900) / 0.12);
   }
@@ -1189,7 +1275,11 @@ $search-input-padding-x: mg-rem(44);
   border-radius: $search-radius;
   align-items: baseline;
   gap: 0 var(--mg-spacing-25);
-  transition: background-color 0.15s ease;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
 
   &:hover {
     background-color: rgb(var(--mg-color-blue-900) / 0.05);
@@ -1250,7 +1340,12 @@ $search-input-padding-x: mg-rem(44);
   inset: 0;
   background: rgb(0 0 0 / 0.5);
   z-index: calc(var(--mg-z-index-drawer) - 1); // backdrop behind drawer panel
-  animation: mg-search-fade-in 0.2s ease-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: mg-search-fade-in var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
+
   cursor: pointer; // Indicate clickable to close
 }
 
@@ -1281,19 +1376,19 @@ $search-input-padding-x: mg-rem(44);
   box-shadow: var(--mg-search-drawer-shadow-offset) 0 20px rgb(0 0 0 / 0.15);
   display: flex;
   flex-direction: column;
-  animation: mg-search-slide-in-start 0.3s ease-out;
   z-index: var(--mg-z-index-drawer);
   cursor: default; // Reset cursor inside drawer
 
+  @media (prefers-reduced-motion: no-preference) {
+    animation: mg-search-slide-in-start var(--mg-motion-duration-medium)
+      var(--mg-motion-easing-standard);
+  }
+
   // The shadow points at the page content, so it mirrors with the panel.
   &:dir(rtl) {
     --mg-search-drawer-offset: 100%;
     --mg-search-drawer-shadow-offset: -4px;
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
 }
 
 @keyframes mg-search-slide-in-start {
@@ -1351,9 +1446,13 @@ $search-input-padding-x: mg-rem(44);
   border: none;
   border-radius: $search-radius;
   cursor: pointer;
-  transition:
-    background-color 0.15s,
-    color 0.15s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 
   &:hover {
     background: $search-chip-bg;
@@ -1395,7 +1494,11 @@ $search-input-padding-x: mg-rem(44);
   border: none;
   border-radius: $search-radius;
   cursor: pointer;
-  transition: background-color 0.15s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
+  }
 
   &:hover {
     background: $search-primary-dark;
@@ -1503,9 +1606,14 @@ $search-input-padding-x: mg-rem(44);
   align-items: center;
   padding: var(--mg-spacing-25) var(--mg-spacing-50);
   cursor: pointer;
-  transition:
-    color 0.15s,
-    border-color 0.15s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+      border-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
+  }
+
   font-weight: 400;
   font-size: var(--mg-font-size-200);
   user-select: none;
@@ -1554,3 +1662,20 @@ $search-input-padding-x: mg-rem(44);
 
 // Pager styles now live in the standalone Pager component.
 // @see stories/Components/Pager/pager.scss
+
+// Skeleton surfaces must stay identifiable when forced colours removes
+// author backgrounds. These shapes are decorative; the status owns meaning.
+@media (forced-colors: active) {
+  .mg-search__skeleton-title,
+  .mg-search__skeleton-meta,
+  .mg-search__skeleton-text,
+  .mg-search__skeleton-card-image,
+  .mg-search__skeleton-card {
+    outline: 1px solid GrayText;
+    outline-offset: -1px;
+  }
+
+  .mg-search__drawer {
+    border-inline-end: 1px solid CanvasText;
+  }
+}

package/scss/Components/Tab/tab.scss

@@ -107,7 +107,8 @@
       transform: rotate(-45deg);
       vertical-align: top;
       width: 0.45em;
-      transition: transform 0.3s ease;
+      transition: transform var(--mg-motion-duration-medium)
+        var(--mg-motion-easing-standard);
 
       @media (prefers-reduced-motion: reduce) {
         transition: none;