@undrr/undrr-mangrove 1.3.3 → 1.4.1

package/error-pages/504.html

@@ -26,25 +26,24 @@
     <style>
       /* Critical inline styles for immediate render */
       *,*::before,*::after{box-sizing:border-box}
-      html{font-size:10px}
-      body{font-family:system-ui,-apple-system,sans-serif;font-size:1.6rem;line-height:1.5;margin:0;color:#1a1a1a}
-      h1,h2{margin:1rem 0;font-weight:700}
-      h1{font-size:1.4rem;color:#004f91;margin:0}
-      h2{font-size:2.3rem;margin-top:.5rem}
+      body{font-family:system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;margin:0;color:#1a1a1a}
+      h1,h2{margin:10px 0;font-weight:700}
+      h1{font-size:14px;color:#004f91;margin:0}
+      h2{font-size:23px;margin-top:5px}
       a{color:#004f91;text-decoration:none}
       a:hover{text-decoration:underline}
       hr{border:1px solid #b3b3b3}
-      small{display:block;margin-bottom:.5rem}
-      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:2rem}
+      small{display:block;margin-bottom:5px}
+      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:20px}
       .mg-page-header__decoration{display:flex}
       .mg-page-header__decoration div{width:25%;height:7px}
       .mg-page-header__decoration div:nth-child(1){background:#c10920}
       .mg-page-header__decoration div:nth-child(2){background:#962987}
       .mg-page-header__decoration div:nth-child(3){background:#eb752a}
       .mg-page-header__decoration div:nth-child(4){background:#00afae}
-      .mg-error-page__container{background:#fff;padding:2rem 1.5rem 1rem;max-width:900px;margin:2rem auto}
-      .mg-error-page__actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}
-      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;font-size:1.4rem;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
+      .mg-error-page__container{background:#fff;padding:20px 15px 10px;max-width:900px;margin:20px auto}
+      .mg-error-page__actions{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}
+      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;font-size:14px;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
       .mg-button:hover{background:#3372a7;color:#fff;text-decoration:none}
       .mg-button-secondary{background:#4d84b2}
       .mg-button-secondary:hover{background:#80a7c8}
@@ -88,7 +87,7 @@
           document.head.appendChild(el);
         }
         // Load full CSS from CDN (includes fonts)
-        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.3.3/css/style.css'});
+        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.4.1/css/style.css'});
         // Load analytics
         load('script',{src:'https://assets.undrr.org/static/analytics/v1.0.0/google_analytics_enhancements.js',crossorigin:'anonymous'});
         load('script',{src:'https://messaging.undrr.org/src/undrr-messaging.js',defer:''});

package/error-pages/5xx.html

@@ -29,25 +29,24 @@
     <style>
       /* Critical inline styles for immediate render */
       *,*::before,*::after{box-sizing:border-box}
-      html{font-size:10px}
-      body{font-family:system-ui,-apple-system,sans-serif;font-size:1.6rem;line-height:1.5;margin:0;color:#1a1a1a}
-      h1,h2{margin:1rem 0;font-weight:700}
-      h1{font-size:1.4rem;color:#004f91;margin:0}
-      h2{font-size:2.3rem;margin-top:.5rem}
+      body{font-family:system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;margin:0;color:#1a1a1a}
+      h1,h2{margin:10px 0;font-weight:700}
+      h1{font-size:14px;color:#004f91;margin:0}
+      h2{font-size:23px;margin-top:5px}
       a{color:#004f91;text-decoration:none}
       a:hover{text-decoration:underline}
       hr{border:1px solid #b3b3b3}
-      small{display:block;margin-bottom:.5rem}
-      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:2rem}
+      small{display:block;margin-bottom:5px}
+      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:20px}
       .mg-page-header__decoration{display:flex}
       .mg-page-header__decoration div{width:25%;height:7px}
       .mg-page-header__decoration div:nth-child(1){background:#c10920}
       .mg-page-header__decoration div:nth-child(2){background:#962987}
       .mg-page-header__decoration div:nth-child(3){background:#eb752a}
       .mg-page-header__decoration div:nth-child(4){background:#00afae}
-      .mg-error-page__container{background:#fff;padding:2rem 1.5rem 1rem;max-width:900px;margin:2rem auto}
-      .mg-error-page__actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}
-      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;font-size:1.4rem;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
+      .mg-error-page__container{background:#fff;padding:20px 15px 10px;max-width:900px;margin:20px auto}
+      .mg-error-page__actions{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}
+      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;font-size:14px;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
       .mg-button:hover{background:#3372a7;color:#fff;text-decoration:none}
       .mg-button-secondary{background:#4d84b2}
       .mg-button-secondary:hover{background:#80a7c8}
@@ -91,7 +90,7 @@
           document.head.appendChild(el);
         }
         // Load full CSS from CDN (includes fonts)
-        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.3.3/css/style.css'});
+        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.4.1/css/style.css'});
         // Load analytics
         load('script',{src:'https://assets.undrr.org/static/analytics/v1.0.0/google_analytics_enhancements.js',crossorigin:'anonymous'});
         load('script',{src:'https://messaging.undrr.org/src/undrr-messaging.js',defer:''});

package/error-pages/challenge.html

@@ -29,28 +29,27 @@
     <style>
       /* Critical inline styles for immediate render */
       *,*::before,*::after{box-sizing:border-box}
-      html{font-size:10px}
-      body{font-family:system-ui,-apple-system,sans-serif;font-size:1.6rem;line-height:1.5;margin:0;color:#1a1a1a}
-      h1,h2{margin:1rem 0;font-weight:700}
-      h1{font-size:1.4rem;color:#004f91;margin:0}
-      h2{font-size:2.3rem;margin-top:.5rem}
+      body{font-family:system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;margin:0;color:#1a1a1a}
+      h1,h2{margin:10px 0;font-weight:700}
+      h1{font-size:14px;color:#004f91;margin:0}
+      h2{font-size:23px;margin-top:5px}
       a{color:#004f91;text-decoration:none}
       a:hover{text-decoration:underline}
       hr{border:1px solid #b3b3b3}
-      small{display:block;margin-bottom:.5rem}
-      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:2rem}
+      small{display:block;margin-bottom:5px}
+      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:20px}
       .mg-error-page--challenge{background:#f2f2f2}
-      .mg-error-page--challenge .mg-error-page__container{text-align:center;padding:3rem 2.5rem 2rem;margin-top:4rem;max-width:540px;border-radius:8px;box-shadow:0 2px 12px rgb(0 0 0 / 8%)}
-      .mg-error-page--challenge .undrr-logo{width:100%;margin:0 0 2.5rem;background-position:center;height:35px}
-      .mg-error-page--challenge h1{font-size:2.3rem;font-weight:600;color:#1a1a1a;margin:0 0 .5rem}
+      .mg-error-page--challenge .mg-error-page__container{text-align:center;padding:30px 25px 20px;margin-top:40px;max-width:540px;border-radius:8px;box-shadow:0 2px 12px rgb(0 0 0 / 8%)}
+      .mg-error-page--challenge .undrr-logo{width:100%;margin:0 0 25px;background-position:center;height:35px}
+      .mg-error-page--challenge h1{font-size:23px;font-weight:600;color:#1a1a1a;margin:0 0 5px}
       .mg-page-header__decoration{display:flex}
       .mg-page-header__decoration div{width:25%;height:7px}
       .mg-page-header__decoration div:nth-child(1){background:#c10920}
       .mg-page-header__decoration div:nth-child(2){background:#962987}
       .mg-page-header__decoration div:nth-child(3){background:#eb752a}
       .mg-page-header__decoration div:nth-child(4){background:#00afae}
-      .mg-error-page__container{background:#fff;padding:2rem 1.5rem 1rem;max-width:900px;margin:2rem auto}
-      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;font-size:1.4rem;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
+      .mg-error-page__container{background:#fff;padding:20px 15px 10px;max-width:900px;margin:20px auto}
+      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;font-size:14px;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
       .mg-button:hover{background:#3372a7;color:#fff;text-decoration:none}
       .mg-u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(0);border:0}
     </style>
@@ -89,7 +88,7 @@
           document.head.appendChild(el);
         }
         // Load full CSS from CDN (includes fonts)
-        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.3.3/css/style.css'});
+        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.4.1/css/style.css'});
         // Load analytics
         load('script',{src:'https://assets.undrr.org/static/analytics/v1.0.0/google_analytics_enhancements.js',crossorigin:'anonymous'});
         load('script',{src:'https://messaging.undrr.org/src/undrr-messaging.js',defer:''});

package/error-pages/managed-challenge.html

@@ -31,28 +31,27 @@
     <style>
       /* Critical inline styles for immediate render */
       *,*::before,*::after{box-sizing:border-box}
-      html{font-size:10px}
-      body{font-family:system-ui,-apple-system,sans-serif;font-size:1.6rem;line-height:1.5;margin:0;color:#1a1a1a}
-      h1,h2{margin:1rem 0;font-weight:700}
-      h1{font-size:1.4rem;color:#004f91;margin:0}
-      h2{font-size:2.3rem;margin-top:.5rem}
+      body{font-family:system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;margin:0;color:#1a1a1a}
+      h1,h2{margin:10px 0;font-weight:700}
+      h1{font-size:14px;color:#004f91;margin:0}
+      h2{font-size:23px;margin-top:5px}
       a{color:#004f91;text-decoration:none}
       a:hover{text-decoration:underline}
       hr{border:1px solid #b3b3b3}
-      small{display:block;margin-bottom:.5rem}
-      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:2rem}
+      small{display:block;margin-bottom:5px}
+      .mg-error-page{min-height:100vh;background:#004f91;padding-bottom:20px}
       .mg-error-page--challenge{background:#f2f2f2}
-      .mg-error-page--challenge .mg-error-page__container{text-align:center;padding:3rem 2.5rem 2rem;margin-top:4rem;max-width:540px;border-radius:8px;box-shadow:0 2px 12px rgb(0 0 0 / 8%)}
-      .mg-error-page--challenge .undrr-logo{width:100%;margin:0 0 2.5rem;background-position:center;height:35px}
-      .mg-error-page--challenge h1{font-size:2.3rem;font-weight:600;color:#1a1a1a;margin:0 0 .5rem}
+      .mg-error-page--challenge .mg-error-page__container{text-align:center;padding:30px 25px 20px;margin-top:40px;max-width:540px;border-radius:8px;box-shadow:0 2px 12px rgb(0 0 0 / 8%)}
+      .mg-error-page--challenge .undrr-logo{width:100%;margin:0 0 25px;background-position:center;height:35px}
+      .mg-error-page--challenge h1{font-size:23px;font-weight:600;color:#1a1a1a;margin:0 0 5px}
       .mg-page-header__decoration{display:flex}
       .mg-page-header__decoration div{width:25%;height:7px}
       .mg-page-header__decoration div:nth-child(1){background:#c10920}
       .mg-page-header__decoration div:nth-child(2){background:#962987}
       .mg-page-header__decoration div:nth-child(3){background:#eb752a}
       .mg-page-header__decoration div:nth-child(4){background:#00afae}
-      .mg-error-page__container{background:#fff;padding:2rem 1.5rem 1rem;max-width:900px;margin:2rem auto}
-      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;font-size:1.4rem;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
+      .mg-error-page__container{background:#fff;padding:20px 15px 10px;max-width:900px;margin:20px auto}
+      .mg-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;font-size:14px;font-weight:600;color:#fff;background:#004f91;border:1px solid #fff;cursor:pointer;text-decoration:none}
       .mg-button:hover{background:#3372a7;color:#fff;text-decoration:none}
       .mg-u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(0);border:0}
     </style>
@@ -91,7 +90,7 @@
           document.head.appendChild(el);
         }
         // Load full CSS from CDN (includes fonts)
-        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.3.3/css/style.css'});
+        load('link',{rel:'stylesheet',href:'https://assets.undrr.org/static/mangrove/1.4.1/css/style.css'});
         // Load analytics
         load('script',{src:'https://assets.undrr.org/static/analytics/v1.0.0/google_analytics_enhancements.js',crossorigin:'anonymous'});
         load('script',{src:'https://messaging.undrr.org/src/undrr-messaging.js',defer:''});

package/js/README.md

@@ -0,0 +1,57 @@
+# Vanilla JS scripts
+
+Standalone JavaScript modules that work without React. Each file in this directory is auto-discovered by `webpack.entries.js` and produces a UMD bundle at `dist/js/{name}.min.js`.
+
+## How they ship
+
+```
+stories/assets/js/my-script.js          ← source (this directory)
+  ↓ webpack build (Config 1, UMD)
+dist/js/my-script.min.js                ← minified bundle (Drupal/CDN)
+  ↓ CopyPlugin
+dist/assets/js/my-script.js             ← unminified copy
+  ↓ npm-publish.yml (CI)
+@undrr/undrr-mangrove/js/my-script.js   ← npm package
+```
+
+The GitHub Actions publish workflow (`npm-publish.yml`) copies `dist/assets/js/*` into the npm package at the top-level `js/` directory. This happens automatically — no manual registration is needed.
+
+## Current scripts
+
+| File | Component | Purpose |
+|------|-----------|---------|
+| `on-this-page-nav.js` | [OnThisPageNav](../../Components/OnThisPageNav/) | Sticky horizontal "On this page" navigation with scroll-spy |
+| `tabs.js` | [Tab](../../Components/Tab/) | Tabbed content with keyboard navigation and deep linking |
+| `show-more.js` | [ShowMore](../../../Utilities/ShowMore/) | Expand/collapse toggle for content sections |
+| `undrr.js` | — | Shared constants (key codes, breakpoints) and `window.UNDRR` namespace |
+
+## Adding a new script
+
+1. Create your file here (e.g., `my-feature.js`)
+2. Export a named init function: `export function mgMyFeature() { ... }`
+3. Auto-init at the bottom:
+   ```js
+   if (document.readyState === 'loading') {
+     document.addEventListener('DOMContentLoaded', mgMyFeature, false);
+   } else {
+     mgMyFeature();
+   }
+   ```
+4. Use `data-mg-*` attributes for activation and configuration
+5. Guard against double-init: `if (el.dataset.mgMyFeatureInitialized) return;`
+6. Create a companion SCSS file in `stories/Components/YourComponent/` and import it in `_components.scss`
+7. Run `yarn build` — the script appears at `dist/js/my-feature.min.js`
+
+No webpack config or `src/index.js` changes are needed. The file is picked up automatically by the glob pattern in `webpack.entries.js`.
+
+## Differences from React components
+
+| | Vanilla JS (this directory) | React components |
+|---|---|---|
+| Entry discovery | Auto (glob) | Manual (webpack.config.js) |
+| Output | `dist/js/*.min.js` (UMD) | `dist/components/*.js` (ESM) |
+| npm location | `@undrr/undrr-mangrove/js/` | `@undrr/undrr-mangrove/components/` |
+| React dependency | None | Externalized (provided by import map) |
+| Drupal integration | Load script directly as a library | Wrapper + hydration via `createHydrator` |
+
+See [ARCHITECTURE.md](../../../docs/ARCHITECTURE.md) for the full build system documentation.

package/js/__tests__/show-more.test.js

@@ -0,0 +1,76 @@
+import { mgShowMore } from '../show-more';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+function setupButton({ manual = false, targetSelector = null } = {}) {
+  document.body.innerHTML = `
+    <button
+      data-mg-show-more
+      ${manual ? 'data-mg-show-more-skip-auto-init' : ''}
+      ${targetSelector ? `data-mg-show-more-target="${targetSelector}"` : ''}
+    >Show more</button>
+    <div class="mg-show-more--container mg-show-more--collapsed"></div>
+  `;
+  return document.querySelector('[data-mg-show-more]');
+}
+
+describe('mgShowMore', () => {
+  describe('data-mg-show-more-skip-auto-init', () => {
+    it('skips elements with the attribute during auto-init (no scope)', () => {
+      const btn = setupButton({ manual: true });
+      mgShowMore(); // no scope = auto-init path
+      expect(btn.dataset.mgShowMoreInitialized).toBeUndefined();
+    });
+
+    it('processes elements with the attribute when scope is passed explicitly', () => {
+      const btn = setupButton({ manual: true });
+      mgShowMore([btn]);
+      expect(btn.dataset.mgShowMoreInitialized).toBe('true');
+    });
+  });
+
+  describe('idempotency', () => {
+    it('does not double-initialize when called twice', () => {
+      const btn = setupButton();
+      mgShowMore();
+      // After first call, flag is set and button has been clicked once (collapsed → expanded)
+      const target = document.querySelector('.mg-show-more--container');
+      const classAfterFirst = target.classList.contains('mg-show-more--collapsed');
+
+      mgShowMore();
+      // Second call should be a no-op — collapsed state must not change
+      expect(target.classList.contains('mg-show-more--collapsed')).toBe(classAfterFirst);
+      expect(btn.dataset.mgShowMoreInitialized).toBe('true');
+    });
+  });
+
+  describe('missing target guard', () => {
+    it('does not throw and warns when target element is missing', () => {
+      document.body.innerHTML = `
+        <button data-mg-show-more data-mg-show-more-target=".nonexistent">Show more</button>
+      `;
+      const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      expect(() => mgShowMore()).not.toThrow();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining('.nonexistent')
+      );
+      warn.mockRestore();
+    });
+  });
+
+  describe('single-element scope', () => {
+    it('accepts a single HTMLElement without throwing', () => {
+      const btn = setupButton();
+      expect(() => mgShowMore(btn)).not.toThrow();
+      expect(btn.dataset.mgShowMoreInitialized).toBe('true');
+    });
+
+    it('does not apply skip-auto-init check when a single element is passed as scope', () => {
+      const btn = setupButton({ manual: true });
+      mgShowMore(btn); // single element, not an array
+      expect(btn.dataset.mgShowMoreInitialized).toBe('true');
+    });
+  });
+});

package/js/__tests__/table-of-contents.test.js

@@ -0,0 +1,198 @@
+import { mgTableOfContents, mgTableOfContentsInit } from '../table-of-contents';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+function setupPage({ contentSelector, title, showTitle, skipAutoInit } = {}) {
+  document.body.innerHTML = `
+    <article class="mg-content">
+      <section
+        data-mg-table-of-contents
+        ${contentSelector ? `data-mg-table-of-contents-content="${contentSelector}"` : ''}
+        ${title ? `data-mg-table-of-contents-title="${title}"` : ''}
+        ${showTitle === false ? 'data-mg-table-of-contents-show-title="false"' : ''}
+        ${skipAutoInit ? 'data-mg-table-of-contents-skip-auto-init' : ''}
+        class="mg-table-of-contents"
+      ></section>
+      <h2 id="section-a">Section A</h2>
+      <p>Content A</p>
+      <h2>Section B</h2>
+      <p>Content B</p>
+      <h2 class="mg-table-of-contents--exclude">Excluded</h2>
+      <p>Should not appear</p>
+      <h2 class="mg-u-sr-only">Screen reader only</h2>
+      <p>Should not appear</p>
+      <h2>Section C</h2>
+      <p>Content C</p>
+    </article>
+  `;
+  return {
+    toc: document.querySelector('[data-mg-table-of-contents]'),
+    content: document.querySelector('.mg-content'),
+  };
+}
+
+describe('mgTableOfContents', () => {
+  it('generates TOC links from h2 headings', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc);
+
+    const links = toc.querySelectorAll('li a');
+    expect(links).toHaveLength(3);
+    expect(links[0].textContent).toBe('Section A');
+    expect(links[1].textContent).toBe('Section B');
+    expect(links[2].textContent).toBe('Section C');
+  });
+
+  it('uses existing heading IDs', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc);
+
+    const links = toc.querySelectorAll('li a');
+    expect(links[0].getAttribute('href')).toBe('#section-a');
+  });
+
+  it('generates IDs for headings without them', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc);
+
+    // Index 2 because mgTableOfContents prepends an h2 title to the TOC
+    // element which is inside content: [0]=title, [1]=Section A, [2]=Section B
+    const sectionB = content.querySelectorAll('h2')[2];
+    expect(sectionB.id).toBe('section-b');
+
+    const links = toc.querySelectorAll('li a');
+    expect(links[1].getAttribute('href')).toBe('#section-b');
+  });
+
+  it('excludes headings with mg-table-of-contents--exclude', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc);
+
+    const linkTexts = Array.from(toc.querySelectorAll('li a')).map(
+      a => a.textContent
+    );
+    expect(linkTexts).not.toContain('Excluded');
+  });
+
+  it('excludes headings with mg-u-sr-only', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc);
+
+    const linkTexts = Array.from(toc.querySelectorAll('li a')).map(
+      a => a.textContent
+    );
+    expect(linkTexts).not.toContain('Screen reader only');
+  });
+
+  it('adds default title "On this page"', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc);
+
+    const header = toc.querySelector('h2#on-this-page');
+    expect(header).not.toBeNull();
+    expect(header.textContent).toBe('On this page');
+  });
+
+  it('uses custom title from data attribute', () => {
+    const { toc, content } = setupPage({ title: 'Contents' });
+    mgTableOfContents(content, toc);
+
+    const header = toc.querySelector('h2#on-this-page');
+    expect(header.textContent).toBe('Contents');
+  });
+
+  it('hides title when show-title is false', () => {
+    const { toc, content } = setupPage({ showTitle: false });
+    mgTableOfContents(content, toc);
+
+    const header = toc.querySelector('h2#on-this-page');
+    expect(header).toBeNull();
+  });
+
+  it('adds mg-u-sr-only class when title is "hidden"', () => {
+    const { toc, content } = setupPage({ title: 'hidden' });
+    mgTableOfContents(content, toc);
+
+    const header = toc.querySelector('h2#on-this-page');
+    expect(header.classList.contains('mg-u-sr-only')).toBe(true);
+  });
+
+  it('renders ordered list when showNumbers is true', () => {
+    const { toc, content } = setupPage();
+    mgTableOfContents(content, toc, true);
+
+    expect(toc.querySelector('ol')).not.toBeNull();
+    expect(toc.querySelector('ul')).toBeNull();
+  });
+
+  it('logs error when content element is missing', () => {
+    const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const { toc } = setupPage();
+    mgTableOfContents(null, toc);
+    expect(error).toHaveBeenCalled();
+    error.mockRestore();
+  });
+});
+
+describe('mgTableOfContentsInit', () => {
+  it('auto-initializes elements with data-mg-table-of-contents', () => {
+    const { toc } = setupPage({ contentSelector: '.mg-content' });
+    mgTableOfContentsInit();
+
+    expect(toc.dataset.mgTableOfContentsInitialized).toBe('true');
+    expect(toc.querySelectorAll('li a').length).toBeGreaterThan(0);
+  });
+
+  it('skips elements with skip-auto-init during auto-init', () => {
+    const { toc } = setupPage({ skipAutoInit: true });
+    mgTableOfContentsInit(); // no scope = auto-init path
+    expect(toc.dataset.mgTableOfContentsInitialized).toBeUndefined();
+  });
+
+  it('processes skip-auto-init elements when scope is passed explicitly', () => {
+    const { toc } = setupPage({
+      skipAutoInit: true,
+      contentSelector: '.mg-content',
+    });
+    mgTableOfContentsInit([toc]);
+    expect(toc.dataset.mgTableOfContentsInitialized).toBe('true');
+  });
+
+  it('does not double-initialize', () => {
+    const { toc } = setupPage({ contentSelector: '.mg-content' });
+    mgTableOfContentsInit();
+    const linkCountFirst = toc.querySelectorAll('li a').length;
+
+    mgTableOfContentsInit();
+    const linkCountSecond = toc.querySelectorAll('li a').length;
+    expect(linkCountSecond).toBe(linkCountFirst);
+  });
+
+  it('accepts a single HTMLElement as scope', () => {
+    const { toc } = setupPage({ contentSelector: '.mg-content' });
+    expect(() => mgTableOfContentsInit(toc)).not.toThrow();
+    expect(toc.dataset.mgTableOfContentsInitialized).toBe('true');
+  });
+
+  it('defaults to document.body when no content selector is set', () => {
+    const { toc } = setupPage(); // no contentSelector
+    mgTableOfContentsInit();
+
+    // Should still find headings since they're children of document.body
+    expect(toc.querySelectorAll('li a').length).toBeGreaterThan(0);
+  });
+
+  it('warns when content selector points to nonexistent element', () => {
+    const { toc } = setupPage({ contentSelector: '.nonexistent' });
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    mgTableOfContentsInit();
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('.nonexistent')
+    );
+    // Should still mark as initialized (no retry without clearing flag)
+    expect(toc.dataset.mgTableOfContentsInitialized).toBe('true');
+    warn.mockRestore();
+  });
+});