@undrr/undrr-mangrove 2.0.0-rc.2 → 2.0.0

package/scss/Components/ScrollContainer/scroll-container.scss

@@ -114,6 +114,10 @@
       cursor: grabbing;
     }
 
+    &:focus-visible {
+      @include mg-focus-ring-inset;
+    }
+
     .mg-scroll--mobile & {
       cursor: default;
 
@@ -161,6 +165,13 @@
     }
 
     &--custom-width {
+      // A floor on the scroll box itself, which is what minWidth means. Note
+      // that min-width wins over the max-width: 100% above, so a value larger
+      // than the parent makes this box overflow its parent by design — that
+      // is the point of a minimum. Containing that overflow is the caller's
+      // job; pick a value the layout can afford, or give the parent its own
+      // overflow. To widen the scrollable track instead, size the items with
+      // itemWidth.
       min-width: var(--scroll-min-width, auto);
     }
 

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

@@ -26,7 +26,12 @@ $search-debug-text: var(--mg-color-yellow-dark);
 
 // Spacing & sizing (component needs rounded corners, base theme has 0)
 $search-radius: var(--mg-spacing-25);
-$search-input-padding-x: var(--mg-spacing-250);
+
+// Clear button target: 36px square, clear of the WCAG 2.5.8 24x24 minimum.
+$search-clear-size: mg-rem(36);
+
+// Inline-end room for the clear button: its size plus the offset and a small gap.
+$search-input-padding-x: mg-rem(44);
 
 // Screen reader only utility
 .mg-u-sr-only {
@@ -102,8 +107,8 @@ $search-input-padding-x: var(--mg-spacing-250);
 .mg-search__input {
   @extend %mg-form-input-base;
 
-  // Override padding-right to leave room for the clear button
-  padding-right: $search-input-padding-x;
+  // 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;
@@ -115,18 +120,20 @@ $search-input-padding-x: var(--mg-spacing-250);
 
 .mg-search__clear {
   position: absolute;
-  right: var(--mg-spacing-50);
+  inset-inline-end: var(--mg-spacing-50);
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--mg-spacing-200);
-  height: var(--mg-spacing-200);
+  width: $search-clear-size;
+  height: $search-clear-size;
   padding: 0;
   background: none;
   border: none;
-  font-size: var(--mg-font-size-100);
+
+  // Matches the icon-only button glyph size used by CTA buttons and chips.
+  font-size: mg-rem(18);
   color: $search-text;
   cursor: pointer;
   line-height: 1;
@@ -171,14 +178,16 @@ $search-input-padding-x: var(--mg-spacing-250);
 .mg-search__active-filters-label {
   font-weight: 500;
   color: $search-text;
-  margin-right: var(--mg-spacing-25);
+  margin-inline-end: var(--mg-spacing-25);
 }
 
 .mg-search__active-filters-list {
   display: flex;
   flex-wrap: wrap;
   gap: var(--mg-spacing-50);
-  list-style: none;
+
+  @include mg-list-unmarked;
+
   margin: 0;
   padding: 0;
 }
@@ -492,7 +501,7 @@ $search-input-padding-x: var(--mg-spacing-250);
 .mg-search__result-date {
   &::before {
     content: "•";
-    margin-right: var(--mg-spacing-50);
+    margin-inline-end: var(--mg-spacing-50);
     color: $search-border;
   }
 }
@@ -949,7 +958,7 @@ $search-input-padding-x: var(--mg-spacing-250);
   padding: var(--mg-spacing-50) var(--mg-spacing-75);
   font-size: var(--mg-font-size-300);
   color: $search-text;
-  text-align: left;
+  text-align: start;
   background-color: rgb(var(--mg-color-neutral-50));
   border: 1px solid rgb(var(--mg-color-neutral-600) / 0.22);
   border-radius: var(--mg-radius-form-input);
@@ -986,7 +995,7 @@ $search-input-padding-x: var(--mg-spacing-250);
 
 .mg-select__trigger-icon {
   flex-shrink: 0;
-  margin-left: var(--mg-spacing-50);
+  margin-inline-start: var(--mg-spacing-50);
   color: $search-text-muted;
   transition: transform 0.2s ease;
 
@@ -1148,7 +1157,7 @@ $search-input-padding-x: var(--mg-spacing-250);
 
 // Subtype options (indented children under parent content types)
 .mg-select__option--subtype {
-  padding-left: var(--mg-spacing-150);
+  padding-inline-start: var(--mg-spacing-150);
 
   .mg-select__option-label {
     font-size: var(--mg-font-size-100);
@@ -1156,7 +1165,7 @@ $search-input-padding-x: var(--mg-spacing-250);
     // Add visual connector
     &::before {
       content: "└";
-      margin-right: var(--mg-spacing-25);
+      margin-inline-end: var(--mg-spacing-25);
       color: $search-text-muted;
     }
   }
@@ -1194,7 +1203,7 @@ $search-input-padding-x: var(--mg-spacing-250);
   }
 
   label {
-    padding-left: var(--mg-spacing-25);
+    padding-inline-start: var(--mg-spacing-25);
     font-weight: normal;
     text-wrap: balance;
     cursor: pointer;
@@ -1226,7 +1235,7 @@ $search-input-padding-x: var(--mg-spacing-250);
 }
 
 // ========================================
-// Mobile Filter Drawer (Left Slide-in)
+// Mobile Filter Drawer (Inline-start Slide-in)
 // ========================================
 // UX patterns informed by:
 // @see https://www.pencilandpaper.io/articles/ux-pattern-analysis-mobile-filters
@@ -1254,24 +1263,42 @@ $search-input-padding-x: var(--mg-spacing-250);
   }
 }
 
+// The panel, the direction it travels and the side its shadow falls on are
+// all driven by two custom properties flipped under `:dir(rtl)`, the same
+// shape `.mg-drawer--start` uses in Navigation/Drawer. `inset-inline-start`
+// on its own would fight the keyframe, which translates on a physical axis:
+// the resting edge would move to the right in Arabic while the panel still
+// slid in from the left.
 .mg-search__drawer {
+  --mg-search-drawer-offset: -100%;
+  --mg-search-drawer-shadow-offset: 4px;
+
   position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
+  inset-block: 0;
+  inset-inline-start: 0;
   width: min(320px, 85vw); // Max 320px or 85% of viewport
   background: #fff;
-  box-shadow: 4px 0 20px rgb(0 0 0 / 0.15);
+  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-left 0.3s ease-out;
+  animation: mg-search-slide-in-start 0.3s ease-out;
   z-index: var(--mg-z-index-drawer);
   cursor: default; // Reset cursor inside drawer
+
+  // 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-left {
+@keyframes mg-search-slide-in-start {
   from {
-    transform: translateX(-100%);
+    transform: translateX(var(--mg-search-drawer-offset));
   }
   to {
     transform: translateX(0);
@@ -1518,7 +1545,7 @@ $search-input-padding-x: var(--mg-spacing-250);
 .mg-search__filter-chip-connector {
   display: inline-flex;
   align-items: center;
-  margin-right: var(--mg-spacing-25);
+  margin-inline-end: var(--mg-spacing-25);
   color: $search-text-muted;
   font-weight: 600;
   text-transform: uppercase;

package/scss/Components/Tab/tab.scss

@@ -89,7 +89,7 @@
     > .mg-tabs__mobile-item
     > .mg-tabs__mobile-link {
     position: relative;
-    padding-right: mg-rem(40); // space for the chevron to theright
+    padding-right: mg-rem(40); // space for the chevron to the right
 
     &:hover,
     &:focus-visible {

package/scss/Components/TextCta/text-cta.scss

@@ -147,10 +147,16 @@
     background-color: rgb(var(--mg-color-hero));
   }
 
+  // The orange accent carries no text at any size, so this variant no longer
+  // paints it flat under an eyebrow, a headline and a 90%-white body. It takes
+  // the soft treatment below — a white surface under an 8% wash of the accent,
+  // with dark copy — and keeps the accent as a solid leading rule, which no
+  // copy sits on. See
+  // docs/COLOUR-CONTRAST-METHODOLOGY.md#the-orange-accent-carries-no-text
   &--secondary {
     --mg-cta-accent: var(--mg-color-hero--secondary);
 
-    background-color: rgb(var(--mg-color-hero--secondary));
+    border-inline-start: mg-rem(6) solid rgb(var(--mg-cta-accent));
   }
 
   &--tertiary {
@@ -165,7 +171,8 @@
     background-color: rgb(var(--mg-color-hero--quaternary));
   }
 
-  &--soft {
+  &--soft,
+  &--secondary {
     background-color: rgb(var(--mg-color-neutral-0));
     background-image: linear-gradient(
       rgb(var(--mg-cta-accent) / 0.08),
@@ -187,7 +194,8 @@
   }
 
   // Strong surfaces need inverse buttons; soft surfaces use normal buttons.
-  &:where(:not(.mg-cta--soft)) {
+  // --secondary is a soft surface too, since the orange accent left its fill.
+  &:where(:not(.mg-cta--soft, .mg-cta--secondary)) {
     // Light tinted stroke keeps filled buttons visible on the strong surface.
     --mg-border-color-button-primary: rgb(var(--mg-color-neutral-0) / 0.72);
     --mg-border-color-button-secondary: rgb(var(--mg-color-neutral-0) / 0.72);

package/scss/Patterns/HubHeader/hub-header.scss

@@ -41,9 +41,18 @@
   --mg-hub-header-bar-tint: 0 0 0;
   --mg-hub-header-bar-tint-alpha: 0.14;
 
+  // hero--secondary is the orange accent, which carries no text at any size —
+  // every link and heading here was white on it at 2.65, and the bar tint
+  // darkened it nowhere near enough. So the surface stays the theme's own hero
+  // colour, which the white ink above is already sized for, and the accent
+  // becomes the rule the bar sits on: a line, with no copy over it.
+  // See docs/COLOUR-CONTRAST-METHODOLOGY.md#the-orange-accent-carries-no-text
   &--surface-secondary {
-    --mg-hub-header-surface: var(--mg-color-hero--secondary);
-    --mg-hub-header-banner-surface: var(--mg-color-hero--secondary);
+    // Full-bleed, because the bar it sits under is full-bleed, so the rule
+    // reads as the edge of the header rather than a line inside it.
+    .mg-hub-header__bar {
+      border-block-end: mg-rem(4) solid rgb(var(--mg-color-hero--secondary));
+    }
   }
 
   &--surface-tertiary {
@@ -233,7 +242,9 @@
       overflow-x: auto;
       scrollbar-width: none;
       scroll-padding-inline: var(--mg-spacing-150);
-      list-style: none;
+
+      @include mg-list-unmarked;
+
       padding: 0;
       margin: 0;
       gap: var(--mg-spacing-50);

package/scss/Utilities/FullWidth/full-width.scss

@@ -35,6 +35,19 @@
   z-index: var(--mg-z-index-behind); // behind siblings, not behind ancestors
 }
 
+// RTL keeps the physical override rather than a logical `margin-inline-start`:
+// the pseudo-element is absolutely positioned with both offsets `auto`, so it
+// hangs off its static position, and a flex or grid parent resolves that static
+// position from the inline-end edge in RTL. Reset the inherited `margin-left`
+// here, or both negative margins apply at once and the bleed lands ~13px off
+// centre inside a flex parent such as `mg-mega-topbar`, leaving an unpainted
+// strip at the inline-end edge.
+// `left: 50%` is not a physical property left un-mirrored: the mirrored form
+// (`right: 50%` with `margin-right: -50vw`) was measured and reintroduces the
+// offset this anchor exists to remove. Do not tidy it.
+// See unisdr/undrr-mangrove#1203.
 [dir="rtl"] .mg-container-full-width::before {
-  margin-right: calc(50% - 50vw);
+  left: 50%;
+  margin-left: -50vw;
+  margin-right: 0;
 }

package/scss/assets/scss/_components.scss

@@ -44,6 +44,7 @@
 @import "../../Components/Forms/Textarea/textarea";
 @import "../../Components/Forms/Checkbox/checkbox";
 @import "../../Components/Forms/Radio/radio";
+@import "../../Components/Forms/SegmentedControl/segmented-control";
 @import "../../Components/Forms/Select/select";
 @import "../../Components/Forms/Range/range";
 @import "../../Components/Breadcrumbs/breadcrumbs";

package/scss/assets/scss/_fonts.scss

@@ -170,3 +170,14 @@ $font-path-noto-sans-arabic: "https://assets.undrr.org/fonts/noto-sans-arabic/v1
 
   font-family: var(--mg-font-family-text);
 }
+
+// Arabic joins letters: Latin tracking must never separate or overlap them.
+// Match the element's inherited language, not an Arabic ancestor, so explicit
+// non-Arabic islands keep their own tracking. Important is intentional: this
+// script constraint must beat later component rules and consumer import order.
+// Include generated labels (for example pre[data-language]::after).
+:lang(ar),
+:lang(ar)::before,
+:lang(ar)::after {
+  letter-spacing: normal !important;
+}

package/scss/assets/scss/_foundational.scss

@@ -188,6 +188,13 @@ a {
   }
 }
 
+// Long-form and WYSIWYG content opt into this boundary. Navigation, cards and
+// button-like links carry their purpose through their component treatment;
+// prose links do not, so colour alone is insufficient (WCAG 1.4.1).
+.mg-content p a {
+  text-decoration: underline;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

package/scss/assets/scss/_mixins.scss

@@ -148,6 +148,38 @@
   }
 }
 
+// Unmarked list — hide a <ul>/<ol>'s markers without losing its list role.
+
+// Safari removes the implicit `list` role from any list whose `list-style` is
+// `none`, so VoiceOver stops announcing "list, N items" for every navigation,
+// pager, legend and menu we style that way (unisdr/undrr-mangrove#1209). An
+// empty string IS a marker, so the role survives, and it renders nothing and
+// reserves no space.
+
+// Order matters. The shorthand goes first as the fallback: a browser too old
+// to parse a string `list-style-type` drops that declaration and keeps `none`,
+// behaving exactly as it did before. Never emit `list-style: none` on its own.
+
+// This is deliberately a CSS fix rather than `role="list"` in the markup.
+// Consumers hand-write these lists in Drupal templates and static HTML, so
+// only a fix on the class reaches all of them — and `jsx-a11y` flags the
+// redundant role in our own examples. See the "List semantics" rule in
+// docs/REVIEW-CHECKLIST.md.
+
+// It belongs on the list items too, wherever an `<li>` rule hides its own
+// marker. `list-style-type` is inherited, so the list's empty string reaches
+// the items — but an item rule setting `none` wins over that inheritance, and
+// it is the item's marker Safari inspects. A bare `list-style: none` on an
+// `<li>` silently undoes the fix on its list.
+
+// Do NOT use this on a list that carries a different ARIA role on purpose
+// (`tree`, `group`, `menu`, `listbox`, `tablist`): that role already replaces
+// list semantics, and there is nothing to preserve.
+@mixin mg-list-unmarked {
+  list-style: none;
+  list-style-type: "";
+}
+
 /* mixing  end */
 
 /* placeholder start */

package/scss/assets/scss/_tokens-data-viz.scss

@@ -42,6 +42,15 @@
  *   N=2  ΔE 56.8   N=3  ΔE 19.5   N=4  ΔE 19.5
  *   N=5  ΔE 11.1   N=6  ΔE  8.3   N=7  ΔE  3.2
  *
+ * The worst pair itself, so a slot change can be checked against the right
+ * two colours: N=2 is 1&2 (protan), N=3 and N=4 are 1&3 (deutan), N=5 is 1&5
+ * (protan), N=6 is 2&6 (protan), N=7 is 1&7 (protan).
+ *
+ * METHOD — reproduce these before changing a slot; the steps are not
+ * interchangeable and the wrong order gives wrong answers. See
+ * docs/COLOUR-CONTRAST-METHODOLOGY.md, "How colour-vision separation is
+ * measured", for the full procedure and why each step matters.
+ *
  * Read that as: up to 4 series, colour alone is sufficient. At 5 it is
  * marginal. At 6 or 7 colour alone is NOT sufficient — slots 1 and 7 are
  * near-identical to a protanope (ΔE 3.2) — so a chart using more than five

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/unisdr/undrr-mangrove
- * Version: 2.0.0-rc.2
+ * Version: 2.0.0
  *
  *   ██╗   ██╗███╗   ██╗██████╗ ██████╗ ██████╗
  *   ██║   ██║████╗  ██║██╔══██╗██╔══██╗██╔══██╗
@@ -303,8 +303,21 @@ $mg-tabs-border-bottom: true !default;
   // The dots are decoration, not the message — the label text always names the
   // status, so SC 1.4.1 does not depend on them. They still need a boundary:
   // the pale swatches sit at 1.3-2.2:1 against a white page, so a neutral-500
-  // ring (5.74:1 on white) gives every indicator a visible edge. Set
-  // --mg-status-label-indicator-border-width to 0 to drop it.
+  // ring (5.74:1 on white) gives every indicator a visible edge — the same
+  // width on every edge of all seven shapes, including the two drawn with a
+  // clip path (unisdr/undrr-mangrove#1208). Set
+  // --mg-status-label-indicator-border-width to 0 to drop it, bearing in mind
+  // that the ring is the only part of the four pale marks clearing 3:1, and
+  // that in forced colours it is also what keeps the base indicator visible.
+  // -
+  // No theme overrides any of the seven fills, so all five brands render the
+  // same status palette. That is deliberate: these are DELTA's editorial
+  // workflow colours and the shared service-health pair, not brand identity,
+  // and a status that changed colour per site would stop being one status.
+  // Do not rebalance the fills for colour-vision separation without reading
+  // StatusLabel.mdx, "Why the palette is not rebalanced instead" — it is
+  // measured, and the alternatives are worse on contrast, on normal vision, or
+  // on both.
   --mg-status-label-gap: var(--mg-spacing-75);
   --mg-status-label-font-size: var(--mg-font-size-300);
   --mg-status-label-color: rgb(var(--mg-color-text));

package/scss/assets/scss/generated/_tokens-irp.scss

@@ -31,11 +31,21 @@
   --mg-color-button-background: rgb(15 120 191);
 
   // color.button-background--hover
-  --mg-color-button-background--hover: rgb(var(--mg-color-orange-900));
+  // Deeper partner of the IRP interactive blue. Carries the secondary button
+  // fill and, since the primary button's hover left the orange accent, that
+  // hover too. White on it is 6.02:1 and 71.1 perceptually, so it clears AA
+  // either way, and it sits 6.6 dE2000 from the interactive blue —
+  // comfortably past the ~2.3 just-noticeable difference, and of the same
+  // order as the base theme's own blue-900 to blue-700 hover (12.2).
+  --mg-color-button-background--hover: rgb(13 103 163);
 
   // color.button-secondary-background
-  // Deeper partner of the IRP interactive blue for secondary button fill,
-  // meeting WCAG AA (6.0:1).
+  // Deeper partner of the IRP interactive blue. Carries the secondary button
+  // fill and, since the primary button's hover left the orange accent, that
+  // hover too. White on it is 6.02:1 and 71.1 perceptually, so it clears AA
+  // either way, and it sits 6.6 dE2000 from the interactive blue —
+  // comfortably past the ~2.3 just-noticeable difference, and of the same
+  // order as the base theme's own blue-900 to blue-700 hover (12.2).
   --mg-color-button-secondary-background: 13 103 163;
 
   // color.button-secondary-background--hover
@@ -46,7 +56,13 @@
   --mg-color-button-outline-primary: 15 120 191;
 
   // color.button-outline-primary--hover
-  --mg-color-button-outline-primary--hover: var(--mg-color-orange-900);
+  // Deeper partner of the IRP interactive blue. Carries the secondary button
+  // fill and, since the primary button's hover left the orange accent, that
+  // hover too. White on it is 6.02:1 and 71.1 perceptually, so it clears AA
+  // either way, and it sits 6.6 dE2000 from the interactive blue —
+  // comfortably past the ~2.3 just-noticeable difference, and of the same
+  // order as the base theme's own blue-900 to blue-700 hover (12.2).
+  --mg-color-button-outline-primary--hover: 13 103 163;
 
   // color.button-outline-secondary
   --mg-color-button-outline-secondary: var(--mg-color-button-secondary-background);

package/scss/assets/scss/generated/_tokens-mangrove.scss

@@ -585,6 +585,12 @@ $mg-font-line-height-700: 1.5em;
   // hero-gradient.end-opacity
   --mg-hero-gradient-end-opacity: 0.08;
 
+  // hero-scrim.opacity
+  --mg-hero-scrim-opacity: 0.16;
+
+  // hero-scrim.fade
+  --mg-hero-scrim-fade: 10rem;
+
   // z-index.behind
   --mg-z-index-behind: -1;
 

package/scss/assets/scss/generated/_tokens-preventionweb.scss

@@ -31,11 +31,21 @@
   --mg-color-button-background: rgb(10 105 105);
 
   // color.button-background--hover
-  --mg-color-button-background--hover: rgb(var(--mg-color-orange-900));
+  // Lighter partner of the brand teal. Carries the secondary button fill and,
+  // since the primary button's hover left the orange accent, that hover too.
+  // White on it is 5.5:1 and 69.7 perceptually, so it clears AA either way,
+  // and it sits 4.2 dE2000 from the brand teal — comfortably past the ~2.3
+  // just-noticeable difference, though a shallower step than the base theme's
+  // own blue-900 to blue-700 hover (12.2).
+  --mg-color-button-background--hover: rgb(12 117 117);
 
   // color.button-secondary-background
-  // Lighter partner of the brand teal for secondary button fill, meeting WCAG
-  // AA (5.5:1) while providing lower visual weight than primary.
+  // Lighter partner of the brand teal. Carries the secondary button fill and,
+  // since the primary button's hover left the orange accent, that hover too.
+  // White on it is 5.5:1 and 69.7 perceptually, so it clears AA either way,
+  // and it sits 4.2 dE2000 from the brand teal — comfortably past the ~2.3
+  // just-noticeable difference, though a shallower step than the base theme's
+  // own blue-900 to blue-700 hover (12.2).
   --mg-color-button-secondary-background: 12 117 117;
 
   // color.button-secondary-background--hover
@@ -46,7 +56,13 @@
   --mg-color-button-outline-primary: 10 105 105;
 
   // color.button-outline-primary--hover
-  --mg-color-button-outline-primary--hover: var(--mg-color-orange-900);
+  // Lighter partner of the brand teal. Carries the secondary button fill and,
+  // since the primary button's hover left the orange accent, that hover too.
+  // White on it is 5.5:1 and 69.7 perceptually, so it clears AA either way,
+  // and it sits 4.2 dE2000 from the brand teal — comfortably past the ~2.3
+  // just-noticeable difference, though a shallower step than the base theme's
+  // own blue-900 to blue-700 hover (12.2).
+  --mg-color-button-outline-primary--hover: 12 117 117;
 
   // color.button-outline-secondary
   --mg-color-button-outline-secondary: var(--mg-color-button-secondary-background);

package/js/__tests__/copy-button.test.js

@@ -1,112 +0,0 @@
-import { mgCopyButton } from '../copy-button';
-
-describe('mgCopyButton (Vanilla JS Script)', () => {
-  let writeTextMock;
-
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    jest.useFakeTimers();
-
-    writeTextMock = jest.fn().mockResolvedValue(undefined);
-    Object.assign(navigator, {
-      clipboard: {
-        writeText: writeTextMock,
-      },
-    });
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-    jest.restoreAllMocks();
-  });
-
-  function createButton(attrs = {}) {
-    const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className =
-      'mg-button mg-button-primary mg-button-outline mg-button--icon mg-copy-button';
-    btn.setAttribute('data-mg-copy-button', '');
-    Object.entries(attrs).forEach(([key, val]) => {
-      btn.setAttribute(`data-${key}`, val);
-    });
-
-    btn.innerHTML = `
-      <span class="mg-icon mg-icon-copy mg-button__icon" aria-hidden="true"></span>
-      <span class="mg-copy-button__feedback" role="status" aria-hidden="true">Copied!</span>
-      <span class="mg-u-sr-only" aria-live="polite"></span>
-    `;
-
-    document.body.appendChild(btn);
-    return btn;
-  }
-
-  it('initializes buttons and writes to clipboard on click', async () => {
-    const btn = createButton({
-      'text-to-copy': 'https://preventionweb.net',
-      'tooltip-label': 'Copied!',
-      'copied-label': 'URL copied to clipboard.',
-    });
-
-    mgCopyButton(btn);
-
-    // Trigger click
-    btn.click();
-    await Promise.resolve();
-
-    expect(writeTextMock).toHaveBeenCalledWith('https://preventionweb.net');
-    expect(btn.classList.contains('mg-copy-button--copied')).toBe(true);
-
-    const feedback = btn.querySelector('.mg-copy-button__feedback');
-    expect(
-      feedback.classList.contains('mg-copy-button__feedback--visible')
-    ).toBe(true);
-    expect(feedback.textContent).toBe('Copied!');
-
-    const liveRegion = btn.querySelector('.mg-u-sr-only');
-    expect(liveRegion.textContent).toBe('URL copied to clipboard.');
-
-    // Fast-forward 2 seconds
-    jest.advanceTimersByTime(2000);
-
-    expect(btn.classList.contains('mg-copy-button--copied')).toBe(false);
-    expect(
-      feedback.classList.contains('mg-copy-button__feedback--visible')
-    ).toBe(false);
-    expect(liveRegion.textContent).toBe('');
-  });
-
-  it('guards against duplicate initialization', () => {
-    const btn = createButton({ 'text-to-copy': 'Single' });
-
-    mgCopyButton(btn);
-    expect(btn.dataset.mgCopyButtonInitialized).toBe('true');
-
-    // Second call does not double-bind
-    mgCopyButton(btn);
-    expect(btn.dataset.mgCopyButtonInitialized).toBe('true');
-  });
-
-  it('supports initializing via container elements or document', async () => {
-    const container = document.createElement('div');
-    container.innerHTML = `
-      <div class="card">
-        <button type="button" class="mg-button mg-copy-button" data-mg-copy-button data-text-to-copy="https://nested.org">
-          <span class="mg-icon mg-icon-copy mg-button__icon"></span>
-          <span class="mg-copy-button__feedback">Copied!</span>
-          <span class="mg-u-sr-only"></span>
-        </button>
-      </div>
-    `;
-    document.body.appendChild(container);
-
-    mgCopyButton(container);
-
-    const btn = container.querySelector('[data-mg-copy-button]');
-    expect(btn.dataset.mgCopyButtonInitialized).toBe('true');
-
-    btn.click();
-    await Promise.resolve();
-
-    expect(writeTextMock).toHaveBeenCalledWith('https://nested.org');
-  });
-});