@undrr/undrr-mangrove 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (175) hide show
  1. package/README.md +9 -5
  2. package/components/BookCard.js +2 -2
  3. package/components/Breadcrumbs.js +2 -2
  4. package/components/Checkbox.js +2 -2
  5. package/components/Chips.js +2 -2
  6. package/components/CopyButton.js +2 -2
  7. package/components/CtaButton.js +2 -2
  8. package/components/Drawer.js +3 -3
  9. package/components/Drawer.js.LICENSE.txt +3 -1
  10. package/components/EmbedContainer.js +2 -2
  11. package/components/Footer.js +2 -2
  12. package/components/FormAction.js +2 -2
  13. package/components/FormErrorSummary.js +2 -2
  14. package/components/FormGroup.js +2 -2
  15. package/components/FullWidth.js +2 -2
  16. package/components/Gallery.js +2 -2
  17. package/components/Hero.js +2 -2
  18. package/components/HighlightBox.js +2 -2
  19. package/components/HorizontalBookCard.js +3 -3
  20. package/components/HorizontalBookCard.js.LICENSE.txt +3 -1
  21. package/components/HorizontalCard.js +3 -3
  22. package/components/HorizontalCard.js.LICENSE.txt +3 -1
  23. package/components/IconCard.js +3 -3
  24. package/components/IconCard.js.LICENSE.txt +3 -1
  25. package/components/Legend.js +2 -2
  26. package/components/Loader.js +3 -3
  27. package/components/MegaMenu.js +2 -2
  28. package/components/Notice.js +2 -2
  29. package/components/PageHeader.js +2 -2
  30. package/components/Pager.js +2 -2
  31. package/components/ProgressBar.js +9 -0
  32. package/components/ProgressBar.js.LICENSE.txt +9 -0
  33. package/components/QuoteHighlight.js +3 -3
  34. package/components/QuoteHighlight.js.LICENSE.txt +3 -1
  35. package/components/Radio.js +2 -2
  36. package/components/Range.js +2 -2
  37. package/components/ScrollContainer.js +2 -2
  38. package/components/SegmentedControl.js +2 -2
  39. package/components/Select.js +2 -2
  40. package/components/ServiceNotice.js +2 -2
  41. package/components/ShareButtons.js +3 -3
  42. package/components/ShowMore.js +2 -2
  43. package/components/SkipLink.js +2 -2
  44. package/components/StatsCard.js +3 -3
  45. package/components/StatsCard.js.LICENSE.txt +3 -1
  46. package/components/SyndicationSearchWidget.js +3 -3
  47. package/components/Tab.js +2 -2
  48. package/components/TextCta.js +3 -3
  49. package/components/TextCta.js.LICENSE.txt +3 -1
  50. package/components/TextInput.js +2 -2
  51. package/components/Textarea.js +2 -2
  52. package/components/Tree.js +2 -2
  53. package/components/UserFeedback.js +2 -2
  54. package/components/VerticalCard.js +3 -3
  55. package/components/VerticalCard.js.LICENSE.txt +3 -1
  56. package/components/hydrate.js +2 -2
  57. package/css/style-all.css +110 -90
  58. package/css/style-all.css.map +1 -1
  59. package/css/style-delta.css +110 -90
  60. package/css/style-delta.css.map +1 -1
  61. package/css/style-gutenberg.css +9 -9
  62. package/css/style-irp.css +110 -90
  63. package/css/style-irp.css.map +1 -1
  64. package/css/style-mcr.css +110 -90
  65. package/css/style-mcr.css.map +1 -1
  66. package/css/style-preventionweb.css +110 -90
  67. package/css/style-preventionweb.css.map +1 -1
  68. package/css/style.css +110 -90
  69. package/css/style.css.map +1 -1
  70. package/docs/EDITORIAL-MANUAL.md +193 -0
  71. package/docs/llms-editorial-manual.txt +200 -0
  72. package/docs/llms-page-building.txt +1140 -0
  73. package/docs/llms-search-widget.txt +765 -0
  74. package/error-pages/401.html +1 -1
  75. package/error-pages/403.html +1 -1
  76. package/error-pages/404.html +1 -1
  77. package/error-pages/429.html +1 -1
  78. package/error-pages/500.html +1 -1
  79. package/error-pages/502.html +1 -1
  80. package/error-pages/503.html +1 -1
  81. package/error-pages/504.html +1 -1
  82. package/error-pages/5xx.html +1 -1
  83. package/error-pages/challenge.html +1 -1
  84. package/error-pages/managed-challenge.html +1 -1
  85. package/js/cite-this.js +352 -0
  86. package/package.json +6 -1
  87. package/scss/Atom/BaseTypography/Abbr/abbr.scss +1 -1
  88. package/scss/Atom/BaseTypography/Blockquote/blockquote.scss +1 -1
  89. package/scss/Atom/BaseTypography/Cite/cite.scss +1 -1
  90. package/scss/Atom/BaseTypography/Code/code.scss +1 -1
  91. package/scss/Atom/BaseTypography/Mark/mark.scss +1 -1
  92. package/scss/Atom/BaseTypography/Quotation/quotation.scss +1 -1
  93. package/scss/Atom/BaseTypography/Small/small.scss +1 -1
  94. package/scss/Atom/Colors/color.scss +1 -1
  95. package/scss/Atom/EmptyState/empty-state.scss +1 -1
  96. package/scss/Atom/Icons/_icon-definitions.scss +35 -3
  97. package/scss/Atom/Icons/icons.scss +1 -1
  98. package/scss/Atom/Images/AuthorImage/author-image.scss +1 -1
  99. package/scss/Atom/Images/Image/image.scss +1 -1
  100. package/scss/Atom/Images/ImageCaptionCredit/image-caption-credit.scss +7 -2
  101. package/scss/Atom/Images/ImageCredit/image-credit.scss +1 -1
  102. package/scss/Atom/Layout/Container/container.scss +1 -1
  103. package/scss/Atom/Layout/Grid/grid.scss +1 -1
  104. package/scss/Atom/Layout/Spacing/spacing.scss +1 -1
  105. package/scss/Atom/Logo/logo.scss +1 -1
  106. package/scss/Atom/Navigation/Breadcrumb/breadcrumb.scss +1 -1
  107. package/scss/Atom/Navigation/MenuItems/menu-items.scss +1 -1
  108. package/scss/Atom/ReachElement/Details/details.scss +1 -1
  109. package/scss/Atom/ReachElement/Figcaption/figcaption.scss +1 -1
  110. package/scss/Atom/StatusLabel/status-label.scss +1 -1
  111. package/scss/Atom/Table/table.scss +1 -1
  112. package/scss/Atom/Tag/tag.scss +1 -1
  113. package/scss/Atom/Video/video.scss +1 -1
  114. package/scss/Components/Boilerplate/boilerplate.scss +1 -1
  115. package/scss/Components/Breadcrumbs/breadcrumbs.scss +1 -1
  116. package/scss/Components/Buttons/Chips/chips.scss +1 -1
  117. package/scss/Components/Buttons/CopyButton/copy-button.scss +1 -1
  118. package/scss/Components/Buttons/CtaButton/buttons.scss +1 -1
  119. package/scss/Components/Buttons/CtaButton/cta-button.scss +1 -1
  120. package/scss/Components/Buttons/ShareButtons/share-buttons.scss +90 -1
  121. package/scss/Components/Cards/Card/card.scss +1 -1
  122. package/scss/Components/Cards/StatsCard/stats-card.scss +1 -1
  123. package/scss/Components/CiteThis/cite-this.scss +186 -0
  124. package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss +1 -1
  125. package/scss/Components/DataViz/Legend/legend.scss +1 -1
  126. package/scss/Components/ErrorPages/error-pages.scss +1 -1
  127. package/scss/Components/Footer/footer.scss +1 -1
  128. package/scss/Components/Forms/Checkbox/checkbox.scss +1 -1
  129. package/scss/Components/Forms/FormAction/form-action.scss +1 -1
  130. package/scss/Components/Forms/FormGroup/form-group.scss +1 -1
  131. package/scss/Components/Forms/InputFields/input-fields.scss +1 -1
  132. package/scss/Components/Forms/Radio/radio.scss +1 -1
  133. package/scss/Components/Forms/Range/range.scss +1 -1
  134. package/scss/Components/Forms/SegmentedControl/segmented-control.scss +1 -1
  135. package/scss/Components/Forms/Select/select.scss +1 -1
  136. package/scss/Components/Forms/TextInput/text-input.scss +1 -1
  137. package/scss/Components/Forms/Textarea/textarea.scss +1 -1
  138. package/scss/Components/Forms/_form-base.scss +1 -1
  139. package/scss/Components/Gallery/gallery.scss +1 -1
  140. package/scss/Components/Hero/hero.scss +1 -1
  141. package/scss/Components/HighlightBox/highlight-box.scss +1 -1
  142. package/scss/Components/MegaMenu/mega-menu.scss +1 -1
  143. package/scss/Components/MegaMenu/megamenu.scss +1 -1
  144. package/scss/Components/Navigation/Drawer/drawer.scss +1 -1
  145. package/scss/Components/Navigation/Tree/tree.scss +1 -1
  146. package/scss/Components/Notice/notice.scss +1 -1
  147. package/scss/Components/OnThisPageNav/on-this-page-nav.scss +1 -1
  148. package/scss/Components/PageHeader/page-header.scss +1 -1
  149. package/scss/Components/Pager/pager.scss +1 -1
  150. package/scss/Components/PreviewAccess/preview-access.scss +1 -1
  151. package/scss/Components/ProgressBar/progress-bar.scss +215 -0
  152. package/scss/Components/QuoteHighlight/quote-highlight.scss +1 -1
  153. package/scss/Components/ScrollContainer/scroll-container.scss +1 -1
  154. package/scss/Components/Snackbar/snackbar.scss +1 -1
  155. package/scss/Components/SyndicationSearchWidget/_deprecated-teaser-hide.scss +1 -1
  156. package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss +1 -1
  157. package/scss/Components/Tab/tab.scss +1 -1
  158. package/scss/Components/TableOfContents/table-of-contents.scss +1 -1
  159. package/scss/Components/TextCta/text-cta.scss +1 -1
  160. package/scss/Components/TextCta/textcta.scss +1 -1
  161. package/scss/Components/UserFeedback/user-feedback.scss +1 -1
  162. package/scss/Molecules/ImageCaption/image-caption.scss +17 -3
  163. package/scss/Molecules/SectionHeader/section-header.scss +1 -1
  164. package/scss/Molecules/SectionHeader/sectionheader.scss +1 -1
  165. package/scss/Patterns/HubHeader/hub-header.scss +1 -1
  166. package/scss/Patterns/_shared/pattern-demo.scss +1 -1
  167. package/scss/Utilities/EmbedContainer/embed-container.scss +1 -1
  168. package/scss/Utilities/FullWidth/full-width.scss +1 -1
  169. package/scss/Utilities/Loader/loader.scss +55 -12
  170. package/scss/Utilities/Normalize/normalize.scss +1 -1
  171. package/scss/Utilities/PagePatterns/page-patterns.scss +1 -1
  172. package/scss/Utilities/ShowMore/show-more.scss +1 -1
  173. package/scss/Utilities/SkipLink/skip-link.scss +1 -1
  174. package/scss/assets/scss/_components.scss +2 -0
  175. package/scss/assets/scss/_variables.scss +2 -2
@@ -4,7 +4,7 @@
4
4
  * Range slider supporting continuous and stepped intervals with labelled tick marks.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Range/Range.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Range/Range.mdx
8
8
  */
9
9
 
10
10
  @mixin mg-range-thumb {
@@ -6,7 +6,7 @@
6
6
  * view shows.
7
7
  *
8
8
  * Full documentation:
9
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/SegmentedControl/SegmentedControl.mdx
9
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/SegmentedControl/SegmentedControl.mdx
10
10
  */
11
11
 
12
12
  // The control is a presentation layer over a native radio group: a fieldset, a
@@ -4,7 +4,7 @@
4
4
  * Custom styled <select> dropdown menus with custom chevron indicator and focus treatment.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Select/Select.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Select/Select.mdx
8
8
  */
9
9
  // Select-specific overrides.
10
10
  // Shared form styles live in _form-base.scss (.mg-form-select).
@@ -4,7 +4,7 @@
4
4
  * Single-line text input fields supporting prefix/suffix adornments, search variants, and error states.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
8
8
  */
9
9
  // TextInput-specific overrides (date picker styling).
10
10
  // Shared form styles live in _form-base.scss.
@@ -4,7 +4,7 @@
4
4
  * Multi-line text input fields with configurable resize behavior and validation styling.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/Textarea/Textarea.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Textarea/Textarea.mdx
8
8
  */
9
9
  // Textarea-specific overrides.
10
10
  // Shared form styles live in _form-base.scss (.mg-form-textarea).
@@ -4,7 +4,7 @@
4
4
  * Foundational styling, typography, focus rings, and validation states shared across form controls.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
8
8
  */
9
9
  // Shared BEM-scoped form styles for Mangrove form components.
10
10
  // All form components import this partial for consistent base styling.
@@ -4,7 +4,7 @@
4
4
  * Thumbnail grid gallery and full-screen lightbox image viewer with keyboard navigation.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Gallery/Gallery.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Gallery/Gallery.mdx
8
8
  */
9
9
  /* Photo Gallery Component */
10
10
  .mg-gallery {
@@ -4,7 +4,7 @@
4
4
  * Full-bleed and split-column hero banner featuring headline typography, background imagery, and CTAs.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Hero/Hero.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Hero/Hero.mdx
8
8
  */
9
9
  // The veil between the photograph and the copy, in two layers.
10
10
 
@@ -4,7 +4,7 @@
4
4
  * Callout container for highlighted summary points, key takeaways, and secondary editorial callouts.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/HighlightBox/HighlightBox.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/HighlightBox/HighlightBox.mdx
8
8
  */
9
9
  // Highlight box component (RTL-safe)
10
10
  // https://gitlab.com/undrr/web-backlog/-/issues/1678
@@ -4,7 +4,7 @@
4
4
  * Responsive header navigation bar with multi-level dropdown menus, mobile drawer, and keyboard accessibility.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
8
8
  */
9
9
  .mg-mega-wrapper {
10
10
  position: relative;
@@ -4,7 +4,7 @@
4
4
  * Legacy stylesheet forwarding to mega-menu.scss.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/MegaMenu/MegaMenu.mdx
8
8
  */
9
9
  // megamenu.scss — DEPRECATED, use mega-menu.scss
10
10
  @import "./mega-menu";
@@ -5,7 +5,7 @@
5
5
  * The close control reuses .mg-icon-button and its shared focus ring.
6
6
  *
7
7
  * Full documentation:
8
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Navigation/Drawer/Drawer.mdx
8
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Drawer/Drawer.mdx
9
9
  */
10
10
 
11
11
  .mg-drawer,
@@ -4,7 +4,7 @@
4
4
  * Accessible tree and nested hierarchy view with expand/collapse and selection states.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Navigation/Tree/Tree.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Navigation/Tree/Tree.mdx
8
8
  */
9
9
 
10
10
  .mg-tree {
@@ -7,7 +7,7 @@
7
7
  * Actions reuse .mg-buttons and the dismiss control reuses .mg-icon-button.
8
8
  *
9
9
  * Full documentation:
10
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Notice/Notice.mdx
10
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Notice/Notice.mdx
11
11
  */
12
12
 
13
13
  .mg-notice {
@@ -4,7 +4,7 @@
4
4
  * In-page table of contents navigation with active section indicator and smooth scrolling.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/OnThisPageNav/OnThisPageNav.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/OnThisPageNav/OnThisPageNav.mdx
8
8
  */
9
9
  // On this page nav
10
10
  // https://gitlab.com/undrr/web-backlog/-/issues/337
@@ -4,7 +4,7 @@
4
4
  * Standardized page heading banner with title, breadcrumbs, category metadata, and intro text.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
8
8
  */
9
9
  .mg-page-header {
10
10
  // Base styles for page header
@@ -4,7 +4,7 @@
4
4
  * Accessible pagination component with numbered pages, previous/next controls, and ellipsis truncation.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Pager/Pager.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Pager/Pager.mdx
8
8
  */
9
9
  // ========================================
10
10
  // Pager — standalone pagination component
@@ -4,7 +4,7 @@
4
4
  * Protected preview bar and password gate interface for staging and draft content views.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/PreviewAccess/PreviewAccess.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PreviewAccess/PreviewAccess.mdx
8
8
  */
9
9
  // Preview access
10
10
  // Soft preview gate for unfinished UNDRR pages. CSS hides the page on parse
@@ -0,0 +1,215 @@
1
+ /**
2
+ * Progress bar
3
+ *
4
+ * Determinate and indeterminate progress bar built on the native progress
5
+ * element, with an optional visible label, value and help text, and a thin
6
+ * flush variant for the top edge of a region or the viewport.
7
+ *
8
+ * Full documentation:
9
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ProgressBar/ProgressBar.mdx
10
+ */
11
+
12
+ // The scanner is 30% of the track, and translateX percentages are of the
13
+ // scanner itself, so -100% starts it just before the inline-start edge and
14
+ // 340% ends it just past the inline-end edge (100 / 30 = 333%).
15
+ @keyframes mg-progress-bar-scan {
16
+ from {
17
+ transform: translateX(-100%);
18
+ }
19
+
20
+ to {
21
+ transform: translateX(340%);
22
+ }
23
+ }
24
+
25
+ // translateX is physical, so right-to-left text sweeps the other way. The
26
+ // scanner is anchored with inset-inline-start, which is already the right
27
+ // edge there.
28
+ @keyframes mg-progress-bar-scan-rtl {
29
+ from {
30
+ transform: translateX(100%);
31
+ }
32
+
33
+ to {
34
+ transform: translateX(-340%);
35
+ }
36
+ }
37
+
38
+ // The element order mirrors Drupal core's progress-bar.html.twig (label,
39
+ // track, percentage, description), so the template can be overridden one to
40
+ // one. The grid puts the value beside the label.
41
+ .mg-progress-bar {
42
+ // The indicator is the interactive colour, which every theme keeps at 4.5:1
43
+ // or more against white, so the filled part reaches 3:1 against the page
44
+ // and against this light track. The track itself cannot reach 3:1 against
45
+ // white without moving towards the indicator, so its extent is marked by a
46
+ // 1px edge in neutral-500 instead.
47
+ --mg-progress-bar-block-size: 0.5rem;
48
+ --mg-progress-bar-indicator: rgb(var(--mg-color-interactive));
49
+ --mg-progress-bar-track: rgb(var(--mg-color-neutral-50));
50
+
51
+ align-items: baseline;
52
+ column-gap: var(--mg-spacing-100);
53
+ display: grid;
54
+ grid-template-areas:
55
+ "label value"
56
+ "track track"
57
+ "help help";
58
+ grid-template-columns: 1fr auto;
59
+ row-gap: var(--mg-spacing-50);
60
+ }
61
+
62
+ .mg-progress-bar__label {
63
+ color: rgb(var(--mg-color-text));
64
+ font-family: var(--mg-font-family-ui);
65
+ font-size: var(--mg-font-size-300);
66
+ font-weight: 600;
67
+ grid-area: label;
68
+ }
69
+
70
+ .mg-progress-bar__value {
71
+ color: rgb(var(--mg-color-text));
72
+ font-family: var(--mg-font-family-ui);
73
+ font-size: var(--mg-font-size-300);
74
+ font-variant-numeric: tabular-nums;
75
+ grid-area: value;
76
+ text-align: end;
77
+ }
78
+
79
+ .mg-progress-bar__help {
80
+ color: rgb(var(--mg-color-neutral-500));
81
+ font-size: var(--mg-font-size-200);
82
+ grid-area: help;
83
+ }
84
+
85
+ .mg-progress-bar__track {
86
+ background-color: var(--mg-progress-bar-track);
87
+ block-size: var(--mg-progress-bar-block-size);
88
+ border-radius: 999px;
89
+
90
+ // An inset shadow paints under the native fill, so the edge shows only on
91
+ // the part of the track that is still empty.
92
+ box-shadow: inset 0 0 0 1px rgb(var(--mg-color-neutral-500));
93
+ grid-area: track;
94
+ overflow: hidden;
95
+ position: relative;
96
+ }
97
+
98
+ // The native element draws only the determinate fill; the track is drawn by
99
+ // the wrapper and the indeterminate scanner by the wrapper's ::after, which
100
+ // behave the same in every engine.
101
+ .mg-progress-bar__native {
102
+ appearance: none;
103
+ background: transparent;
104
+ block-size: 100%;
105
+ border: 0;
106
+ border-radius: inherit;
107
+ color: var(--mg-progress-bar-indicator);
108
+ display: block;
109
+ inline-size: 100%;
110
+
111
+ // Vendor pseudo-elements stay in separate rules: a browser drops a whole
112
+ // selector list that contains a pseudo-element it does not recognise.
113
+ &::-webkit-progress-bar {
114
+ background: transparent;
115
+ }
116
+
117
+ &::-webkit-progress-value {
118
+ background-color: var(--mg-progress-bar-indicator);
119
+ border-radius: inherit;
120
+ }
121
+
122
+ &::-moz-progress-bar {
123
+ background-color: var(--mg-progress-bar-indicator);
124
+ border-radius: inherit;
125
+ }
126
+
127
+ // Firefox draws the indeterminate fill at full width; hide it everywhere.
128
+ &:indeterminate::-webkit-progress-value {
129
+ background: transparent;
130
+ }
131
+
132
+ &:indeterminate::-moz-progress-bar {
133
+ background: transparent;
134
+ }
135
+
136
+ @media (prefers-reduced-motion: no-preference) {
137
+ &::-webkit-progress-value {
138
+ transition: width var(--mg-motion-duration-fast)
139
+ var(--mg-motion-easing-standard);
140
+ }
141
+ }
142
+ }
143
+
144
+ .mg-progress-bar__track::after {
145
+ background-color: var(--mg-progress-bar-indicator);
146
+ border-radius: inherit;
147
+ content: "";
148
+ display: none;
149
+ inline-size: 30%;
150
+ inset-block: 0;
151
+ inset-inline-start: 0;
152
+ position: absolute;
153
+ transform: translateX(-100%);
154
+ }
155
+
156
+ .mg-progress-bar__track:has(.mg-progress-bar__native:indeterminate)::after {
157
+ display: block;
158
+ }
159
+
160
+ // The sweep is only declared when motion is welcome. The site-wide reduced
161
+ // motion reset would otherwise run it once in 0.01ms and leave the segment
162
+ // where it stopped, which reads as a bar that is partly done.
163
+ @media (prefers-reduced-motion: no-preference) {
164
+ .mg-progress-bar__track::after {
165
+ animation: mg-progress-bar-scan 1.5s ease-in-out infinite;
166
+ }
167
+
168
+ .mg-progress-bar__track:dir(rtl)::after {
169
+ animation-name: mg-progress-bar-scan-rtl;
170
+ }
171
+ }
172
+
173
+ // Reduced motion: a still, dashed bar across the whole track. It shows that
174
+ // work is going on without moving, and the gaps keep it from reading as a
175
+ // finished bar or as a partial value.
176
+ @media (prefers-reduced-motion: reduce) {
177
+ .mg-progress-bar__track::after {
178
+ animation: none;
179
+ background: repeating-linear-gradient(
180
+ to right,
181
+ var(--mg-progress-bar-indicator) 0 0.75rem,
182
+ transparent 0.75rem 1.25rem
183
+ );
184
+ border-radius: 0;
185
+ inline-size: 100%;
186
+ transform: none;
187
+ }
188
+ }
189
+
190
+ // A thin bar with no visible text, for the top edge of a region or the
191
+ // viewport. Positioning is left to the page; see the documentation.
192
+ .mg-progress-bar--flush {
193
+ --mg-progress-bar-block-size: 0.25rem;
194
+
195
+ display: block;
196
+
197
+ .mg-progress-bar__track {
198
+ border-radius: 0;
199
+ box-shadow: none;
200
+ }
201
+ }
202
+
203
+ // Forced colours replaces author backgrounds, which would hide the fill and
204
+ // the scanner. Opt out (the property is inherited, so this covers the native
205
+ // element and its pseudo-elements) and draw the bar in system colours.
206
+ @media (forced-colors: active) {
207
+ .mg-progress-bar__track {
208
+ --mg-progress-bar-indicator: CanvasText;
209
+ --mg-progress-bar-track: Canvas;
210
+
211
+ border: 1px solid CanvasText;
212
+ box-shadow: none;
213
+ forced-color-adjust: none;
214
+ }
215
+ }
@@ -4,7 +4,7 @@
4
4
  * Editorial pull quote banner with prominent quotation marks, author attribution, and source citation.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/QuoteHighlight/QuoteHighlight.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/QuoteHighlight/QuoteHighlight.mdx
8
8
  */
9
9
  .mg-quote-highlight {
10
10
  display: flex;
@@ -4,7 +4,7 @@
4
4
  * Horizontal scroll wrapper with left/right scroll navigation buttons and themed scrollbars.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/ScrollContainer/ScrollContainer.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ScrollContainer/ScrollContainer.mdx
8
8
  */
9
9
  .mg-scroll {
10
10
  position: relative;
@@ -5,7 +5,7 @@
5
5
  * The toast body is a Notice (.mg-notice); this file only positions and animates it.
6
6
  *
7
7
  * Full documentation:
8
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Snackbar/Snackbar.mdx
8
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Snackbar/Snackbar.mdx
9
9
  */
10
10
 
11
11
  .mg-snackbar-wrapper {
@@ -4,7 +4,7 @@
4
4
  * Legacy helper styles for hiding syndicated search teaser content.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
8
8
  */
9
9
  // ========================================
10
10
  // DEPRECATED: Teaser Field Hiding Modifier Classes
@@ -4,7 +4,7 @@
4
4
  * Styles for the UNDRR Search Widget component with faceted filtering and responsive layouts.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/SyndicationSearchWidget/SyndicationSearchWidget.mdx
8
8
  */
9
9
  @import "deprecated-teaser-hide";
10
10
 
@@ -4,7 +4,7 @@
4
4
  * Accessible tabbed interface panels with keyboard tab switching and scrollable tab strips.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/Tab/Tab.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Tab/Tab.mdx
8
8
  */
9
9
  .mg-tabs__list {
10
10
  background: var(--mg-color-tabbar-background);
@@ -4,7 +4,7 @@
4
4
  * Dynamic in-article table of contents with heading hierarchy detection and scroll-spy tracking.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/TableOfContents/TableOfContents.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TableOfContents/TableOfContents.mdx
8
8
  */
9
9
  .mg-table-of-contents {
10
10
  padding-inline-start: var(--mg-spacing-200);
@@ -4,7 +4,7 @@
4
4
  * Call-to-action banner supporting color variants, headings, rich text copy, and button groups.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/TextCta/TextCta.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TextCta/TextCta.mdx
8
8
  */
9
9
  /* CTA banner start */
10
10
 
@@ -4,7 +4,7 @@
4
4
  * Legacy stylesheet forwarding to text-cta.scss.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/TextCta/TextCta.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/TextCta/TextCta.mdx
8
8
  */
9
9
  // textcta.scss — DEPRECATED, use text-cta.scss
10
10
  @import "./text-cta";
@@ -4,7 +4,7 @@
4
4
  * Binary page satisfaction widget (Was this page helpful? Yes/No) with response confirmation.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/UserFeedback/UserFeedback.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/UserFeedback/UserFeedback.mdx
8
8
  */
9
9
  .mg-user-feedback {
10
10
  align-items: center;
@@ -4,7 +4,7 @@
4
4
  * Composed image figure layout with integrated caption and photographer credit text.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
8
8
  */
9
9
  /* image caption start */
10
10
  .mg-image-caption {
@@ -16,7 +16,12 @@
16
16
  padding-bottom: var(--mg-spacing-150);
17
17
  }
18
18
 
19
- p {
19
+ // .mg-image-caption__text wraps caption content that is not a single <p>
20
+ // (several paragraphs, or bare text). :where() keeps it one element below
21
+ // the matching p selector, so every rule that overrides the p caption also
22
+ // overrides the wrapper.
23
+ p,
24
+ :where(.mg-image-caption__text) {
20
25
  color: rgb(var(--mg-color-neutral-600));
21
26
  font-size: var(--mg-font-size-200);
22
27
  margin-bottom: var(--mg-spacing-50);
@@ -47,6 +52,14 @@
47
52
  }
48
53
  }
49
54
 
55
+ .mg-image-caption__text p {
56
+ margin: 0 0 var(--mg-spacing-50);
57
+
58
+ &:last-child {
59
+ margin-bottom: 0;
60
+ }
61
+ }
62
+
50
63
  .mg-credits {
51
64
  display: flex;
52
65
  margin-bottom: var(--mg-spacing-50);
@@ -70,7 +83,8 @@
70
83
 
71
84
  [dir="rtl"] {
72
85
  .mg-image-caption {
73
- p {
86
+ p,
87
+ :where(.mg-image-caption__text) {
74
88
  @include devicebreak(medium) {
75
89
  padding-right: 0;
76
90
  }
@@ -4,7 +4,7 @@
4
4
  * Section header block with category tag, headline, and optional action link.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
8
8
  */
9
9
  /* header section start */
10
10
  .mg-section-header {
@@ -4,7 +4,7 @@
4
4
  * Legacy stylesheet forwarding to section-header.scss.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/PageHeader/PageHeader.mdx
8
8
  */
9
9
  // sectionheader.scss — DEPRECATED, use section-header.scss
10
10
  @import "./section-header";
@@ -4,7 +4,7 @@
4
4
  * Content hub banner header with theme styling, breadcrumb trail, and description copy.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/ContentHub/ContentHub.mdx
8
8
  */
9
9
  // Deliberately not a tab set and deliberately not the mega menu topbar. Both
10
10
  // mark the active item with a 3px bottom border; so does OnThisPageNav. A
@@ -4,7 +4,7 @@
4
4
  * Shared layout and scaffolding styles for Storybook page pattern demonstrations.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/LandingPages/LandingPages.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/LandingPages/LandingPages.mdx
8
8
  */
9
9
  // Demo-only story scaffolding (`mg-demo-*`), imported directly by pattern stories.
10
10
  @import "../../assets/scss/variables";
@@ -4,7 +4,7 @@
4
4
  * Responsive aspect-ratio wrapper for embedded video, iframes, maps, and external widgets.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
8
8
  */
9
9
  // Responsive embed container
10
10
  // Provides aspect-ratio wrapper for iframes, videos, and other embedded media.
@@ -4,7 +4,7 @@
4
4
  * Breakout utility allowing content within constrained containers to bleed full width to viewport edges.
5
5
  *
6
6
  * Full documentation:
7
- * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Utilities/FullWidth/FullWidth.mdx
7
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/FullWidth/FullWidth.mdx
8
8
  */
9
9
  // Full-bleed background without moving the element's box: a 100vw pseudo-element
10
10
  // is painted behind the element, so content alignment is untouched.