@madgex/design-system 13.6.3 → 13.7.0

package/src/components/scroll-spy/scroll-spy.njk

@@ -0,0 +1,184 @@
+<div class="mds-grid-row">
+  <div class="mds-grid-col-12 mds-grid-col-md-4 mds-grid-col-lg-3 mds-display-none mds-display-md-block">
+    <nav aria-label="Page sections" class="mds-position-sticky">
+      <ol class="mds-step-list">
+        <li class="mds-step-list__item">
+          <a href="/">Previous page</a>
+        </li>
+        <li class="mds-step-list__item mds-step-list__item--current mds-step-list__item--has-subnav" aria-current="page">Current
+          page
+          <mds-scroll-spy>
+            <ul class="mds-step-list-subnav">
+              <li class="mds-step-list-subnav__item">
+                <a class="mds-step-list-subnav__link" href="#section-1">Section 1</a>
+              </li>
+              <li class="mds-step-list-subnav__item">
+                <a class="mds-step-list-subnav__link" href="#section-2">Section 2</a>
+              </li>
+              <li class="mds-step-list-subnav__item">
+                <a class="mds-step-list-subnav__link" href="#section-3">Section 3</a>
+              </li>
+            </ul>
+          </mds-scroll-spy>
+        </li>
+        <li class="mds-step-list__item mds-step-list__item--future">
+          <a href="/">Next page</a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+  <div class="mds-grid-col-12 mds-grid-col-md-8 mds-grid-col-lg-9">
+    <section id="section-1">
+      <h2>Section 1</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+    <section id="section-2">
+      <h2>Section 2</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+    <section id="section-3">
+      <h2>Section 3</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+    <section id="section-no-scrollspy">
+      <h2>Section outside of Scroll Spy</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+  </div>
+</div>

package/src/components/scroll-spy/scroll-spy.spec.js

@@ -0,0 +1,462 @@
+// eslint-disable-next-line n/no-unpublished-import
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { MdsScrollSpy } from './scroll-spy.js';
+
+// Polyfill CSS.escape for jsdom (not available by default)
+if (typeof CSS === 'undefined' || !CSS.escape) {
+  globalThis.CSS = {
+    escape: (str) => str.replace(/([^\w-])/g, (match) => `\\${match}`),
+  };
+}
+
+// Mock IntersectionObserver
+let lastObserverInstance = null;
+
+class MockIntersectionObserver {
+  constructor(callback, options) {
+    this.callback = callback;
+    this.options = options;
+    this.observedElements = [];
+    lastObserverInstance = this;
+  }
+  observe(el) {
+    this.observedElements.push(el);
+  }
+  unobserve(el) {
+    this.observedElements = this.observedElements.filter((e) => e !== el);
+  }
+  disconnect() {
+    this.observedElements = [];
+  }
+  // Helper to simulate intersection events
+  triggerIntersect(entries) {
+    this.callback(entries, this);
+  }
+}
+
+vi.stubGlobal('IntersectionObserver', MockIntersectionObserver);
+
+// Register the custom element
+if (!customElements.get('mds-scroll-spy')) {
+  customElements.define('mds-scroll-spy', MdsScrollSpy);
+}
+
+describe('MdsScrollSpy', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper to create a scroll-spy and attach it to the container with links.
+   * Uses innerHTML to ensure proper URL resolution in jsdom.
+   */
+  function createScrollSpyWithLinks(anchors) {
+    const linksHtml = anchors.map(({ href, text }) => `<a href="${href}">${text}</a>`).join('');
+    container.innerHTML = `<mds-scroll-spy>${linksHtml}</mds-scroll-spy>`;
+    return container.querySelector('mds-scroll-spy');
+  }
+
+  // ------------------------------
+  // Constructor
+  // ------------------------------
+  describe('constructor', () => {
+    it('creates instance without errors', () => {
+      const scrollSpy = new MdsScrollSpy();
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+      expect(scrollSpy).toBeInstanceOf(HTMLElement);
+    });
+  });
+
+  // ------------------------------
+  // observer-threshold attribute parsing (tested via behavior)
+  // ------------------------------
+  describe('observer-threshold attribute', () => {
+    it('accepts single numeric threshold value', () => {
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-threshold="0.5">
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      // Element should initialize without errors
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section.remove();
+    });
+
+    it('accepts JSON array threshold value', () => {
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-threshold="[0, 0.5, 1]">
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section.remove();
+    });
+
+    it('warns and uses default for invalid threshold', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-threshold="invalid">
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Invalid observer-threshold'));
+
+      section.remove();
+    });
+
+    it('warns and uses default for empty array threshold', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-threshold="[]">
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+      expect(warnSpy).toHaveBeenCalled();
+
+      section.remove();
+    });
+  });
+
+  // ------------------------------
+  // Section discovery (via links)
+  // ------------------------------
+  describe('section discovery', () => {
+    it('observes sections referenced by links', () => {
+      const section1 = document.createElement('section');
+      section1.id = 'section-1';
+      const section2 = document.createElement('section');
+      section2.id = 'section-2';
+      document.body.appendChild(section1);
+      document.body.appendChild(section2);
+
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="#section-1">Section 1</a>
+          <a href="#section-2">Section 2</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      // Verify observer was created and is observing sections
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section1.remove();
+      section2.remove();
+    });
+
+    it('warns when section element does not exist', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      createScrollSpyWithLinks([{ href: '#nonexistent', text: 'Link' }]);
+
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("doesn't exist on this page"));
+    });
+
+    it('ignores external links', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="https://external.com/page#section">External</a>
+        </mds-scroll-spy>
+      `;
+
+      // No warning should be logged for external links
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it('ignores links without hash', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="/page">No hash</a>
+        </mds-scroll-spy>
+      `;
+
+      // No warning should be logged for links without hash
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it('handles IDs with special characters', () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const section = document.createElement('section');
+      section.id = 'section:with.special-chars';
+      document.body.appendChild(section);
+
+      createScrollSpyWithLinks([{ href: '#section:with.special-chars', text: 'Special' }]);
+
+      // No warning means section was found
+      expect(warnSpy).not.toHaveBeenCalled();
+
+      section.remove();
+    });
+  });
+
+  // ------------------------------
+  // Observer options (via attributes)
+  // ------------------------------
+  describe('observer options', () => {
+    it('uses default threshold when no attribute provided', () => {
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      // Check that observer was created (via mock)
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section.remove();
+    });
+
+    it('uses observer-root attribute', () => {
+      const rootEl = document.createElement('div');
+      rootEl.id = 'scroll-root';
+      document.body.appendChild(rootEl);
+
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      rootEl.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-root="#scroll-root">
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      rootEl.remove();
+    });
+
+    it('uses observer-threshold attribute', () => {
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-threshold="0.75">
+          <a href="#test-section">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section.remove();
+    });
+  });
+
+  // ------------------------------
+  // connectedCallback
+  // ------------------------------
+  describe('connectedCallback', () => {
+    it('finds links within the element', () => {
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="#a">A</a>
+          <a href="#b">B</a>
+        </mds-scroll-spy>
+      `;
+
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+      const links = scrollSpy.querySelectorAll('a');
+      expect(links).toHaveLength(2);
+    });
+
+    it('uses aria-current-value attribute when setting active state', () => {
+      const section = document.createElement('section');
+      section.id = 'test';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy aria-current-value="location">
+          <a href="#test">Test</a>
+        </mds-scroll-spy>
+      `;
+
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+      expect(scrollSpy.getAttribute('aria-current-value')).toBe('location');
+
+      section.remove();
+    });
+
+    it('does not create observer when no sections found', () => {
+      vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="#nonexistent">Link</a>
+        </mds-scroll-spy>
+      `;
+
+      // Element should still be created without errors
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+    });
+
+    it('creates observer when sections exist', () => {
+      const section = document.createElement('section');
+      section.id = 'test-section';
+      document.body.appendChild(section);
+
+      const scrollSpy = createScrollSpyWithLinks([{ href: '#test-section', text: 'Link' }]);
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section.remove();
+    });
+  });
+
+  // ------------------------------
+  // disconnectedCallback
+  // ------------------------------
+  describe('disconnectedCallback', () => {
+    it('cleans up without errors when removed', () => {
+      const section = document.createElement('section');
+      section.id = 'cleanup-test';
+      document.body.appendChild(section);
+
+      const scrollSpy = createScrollSpyWithLinks([{ href: '#cleanup-test', text: 'Link' }]);
+
+      // Should not throw when removing
+      expect(() => scrollSpy.remove()).not.toThrow();
+
+      section.remove();
+    });
+
+    it('handles disconnect when no observer was created', () => {
+      container.innerHTML = `<mds-scroll-spy></mds-scroll-spy>`;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      // Should not throw
+      expect(() => scrollSpy.remove()).not.toThrow();
+    });
+  });
+
+  // ------------------------------
+  // setObserver / aria-current behavior
+  // ------------------------------
+  describe('setObserver', () => {
+    it('sets up intersection observer for sections', () => {
+      const section = document.createElement('section');
+      section.id = 'observer-test';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy observer-threshold="0.5">
+          <a href="#observer-test">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy).toBeInstanceOf(MdsScrollSpy);
+
+      section.remove();
+    });
+
+    it('sets aria-current on most visible section link', () => {
+      const section1 = document.createElement('section');
+      section1.id = 'section-1';
+      const section2 = document.createElement('section');
+      section2.id = 'section-2';
+      document.body.appendChild(section1);
+      document.body.appendChild(section2);
+
+      container.innerHTML = `
+        <mds-scroll-spy>
+          <a href="#section-1">Section 1</a>
+          <a href="#section-2">Section 2</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+      const link1 = scrollSpy.querySelector('a[href="#section-1"]');
+      const link2 = scrollSpy.querySelector('a[href="#section-2"]');
+
+      // Verify initial state (no aria-current)
+      expect(link1.getAttribute('aria-current')).toBeNull();
+      expect(link2.getAttribute('aria-current')).toBeNull();
+
+      // Simulate intersection: section-1 is more visible
+      lastObserverInstance.triggerIntersect([
+        { target: section1, intersectionRatio: 0.8 },
+        { target: section2, intersectionRatio: 0.2 },
+      ]);
+
+      expect(link1.getAttribute('aria-current')).toBe('step');
+      expect(link2.getAttribute('aria-current')).toBeNull();
+
+      // Simulate scrolling: section-2 becomes more visible
+      lastObserverInstance.triggerIntersect([
+        { target: section1, intersectionRatio: 0.1 },
+        { target: section2, intersectionRatio: 0.9 },
+      ]);
+
+      expect(link1.getAttribute('aria-current')).toBeNull();
+      expect(link2.getAttribute('aria-current')).toBe('step');
+
+      section1.remove();
+      section2.remove();
+    });
+
+    it('uses custom aria-current-value attribute', () => {
+      const section = document.createElement('section');
+      section.id = 'custom-aria';
+      document.body.appendChild(section);
+
+      container.innerHTML = `
+        <mds-scroll-spy aria-current-value="page">
+          <a href="#custom-aria">Link</a>
+        </mds-scroll-spy>
+      `;
+      const scrollSpy = container.querySelector('mds-scroll-spy');
+
+      expect(scrollSpy.getAttribute('aria-current-value')).toBe('page');
+
+      section.remove();
+    });
+  });
+});

package/src/icons/arrow-left.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <g clip-path="url(#clip0_7495_1339)">
+    <path d="M13.144 6.14002H3.16257C3.13304 6.13973 3.10429 6.13053 3.08009 6.11361C3.05589 6.09669 3.03737 6.07285 3.02696 6.04522C3.01655 6.01759 3.01474 5.98746 3.02176 5.95878C3.02879 5.9301 3.04432 5.90421 3.06632 5.88452L8.10457 1.45118C8.26296 1.30184 8.35719 1.09685 8.3674 0.879393C8.37761 0.66194 8.303 0.449016 8.15929 0.285496C8.01559 0.121975 7.81402 0.0206296 7.59705 0.00281822C7.38009 -0.0149932 7.16469 0.0521206 6.99624 0.190015L0.473987 5.92943C0.325018 6.06081 0.205709 6.22238 0.123987 6.40342C0.0422649 6.58445 0 6.78081 0 6.97943C0 7.17806 0.0422649 7.37441 0.123987 7.55544C0.205709 7.73648 0.325018 7.89805 0.473987 8.02943L6.99507 13.7677C7.16365 13.9038 7.37834 13.9696 7.59426 13.9512C7.81018 13.9328 8.01063 13.8316 8.15372 13.6689C8.29681 13.5061 8.37147 13.2944 8.36209 13.0779C8.35272 12.8614 8.26003 12.6569 8.1034 12.5071L3.06515 8.07377C3.04315 8.05407 3.02762 8.02818 3.0206 7.9995C3.01357 7.97082 3.01539 7.94069 3.0258 7.91306C3.0362 7.88543 3.05473 7.86159 3.07893 7.84467C3.10313 7.82775 3.13188 7.81855 3.1614 7.81827H13.144C13.3629 7.8125 13.5708 7.7215 13.7236 7.56465C13.8764 7.4078 13.9619 7.19751 13.9619 6.97856C13.9619 6.75961 13.8764 6.54931 13.7236 6.39246C13.5708 6.23562 13.3629 6.14462 13.144 6.13885V6.14002Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_7495_1339">
+      <rect width="14" height="14" fill="currentColor"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/arrow-right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <g clip-path="url(#clip0_7495_4915)">
+    <path d="M13.9854 6.97943C13.9849 6.78081 13.9423 6.58455 13.8605 6.40357C13.7786 6.22259 13.6594 6.061 13.5106 5.92943L6.9895 0.190015C6.82105 0.0521206 6.60565 -0.0149932 6.38868 0.00281822C6.17172 0.0206296 5.97015 0.121975 5.82644 0.285496C5.68274 0.449016 5.60813 0.66194 5.61834 0.879393C5.62854 1.09685 5.72277 1.30184 5.88117 1.45118L10.9194 5.88452C10.9415 5.90412 10.9571 5.92997 10.9642 5.95865C10.9713 5.98733 10.9695 6.01748 10.9591 6.04511C10.9486 6.07275 10.93 6.09656 10.9058 6.1134C10.8815 6.13025 10.8527 6.13932 10.8232 6.13943H0.84C0.617218 6.13943 0.403561 6.22793 0.24603 6.38546C0.0884998 6.54299 0 6.75665 0 6.97943C0 7.20221 0.0884998 7.41587 0.24603 7.5734C0.403561 7.73093 0.617218 7.81943 0.84 7.81943H10.8214C10.8509 7.81972 10.8797 7.82892 10.9039 7.84584C10.9281 7.86276 10.9466 7.88659 10.957 7.91423C10.9674 7.94186 10.9692 7.97199 10.9622 8.00067C10.9552 8.02935 10.9397 8.05524 10.9177 8.07493L5.87942 12.5083C5.7913 12.5794 5.71849 12.6677 5.66537 12.7677C5.61224 12.8678 5.57989 12.9775 5.57026 13.0904C5.56064 13.2032 5.57394 13.3168 5.60936 13.4244C5.64478 13.532 5.70159 13.6313 5.77638 13.7164C5.85117 13.8014 5.94239 13.8705 6.04456 13.9194C6.14672 13.9683 6.25772 13.996 6.37088 14.0009C6.48404 14.0058 6.59702 13.9878 6.70303 13.9479C6.80904 13.908 6.90589 13.8471 6.98775 13.7688L13.51 8.02943C13.659 7.89797 13.7784 7.73641 13.8603 7.55542C13.9423 7.37442 13.9849 7.17811 13.9854 6.97943V6.97943Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_7495_4915">
+      <rect width="14" height="14" fill="currentColor"/>
+    </clipPath>
+  </defs>
+</svg>