@pnx-mixtape/mxds 0.0.24 → 0.0.27

package/src/Component/InPageNavigation/InPageNavigation.stories.ts

@@ -22,6 +22,7 @@ const meta: Meta<InPageNavigationType> = {
       title: "On this page",
       as: HeadingTypes.TWO,
       modifiers: [HeadingTypes.FOUR],
+      excluded: true,
     }),
     items: [
       Link({
@@ -97,3 +98,13 @@ export const Nested: Story = {
     levels: [HeadingTypes.TWO, HeadingTypes.THREE],
   },
 }
+
+/**
+ * No headings found: page content contains no headings.
+ */
+export const NoHeadings: Story = {
+  args: {
+    items: [],
+    levels: [HeadingTypes.FOUR],
+  },
+}

package/src/Component/InPageNavigation/InPageNavigation.stories.tsx

@@ -5,10 +5,12 @@ import Component from "./InPageNavigation"
 import Sidebar from "../../Layout/Sidebar/Sidebar"
 import "./in-page-navigation.css"
 import { HeadingLevels } from "../../enums"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  decorators: [Page],
   render: () => (
     <Sidebar before sidebar={<Component />}>
       <div className="mx-vertical-flow">

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap

@@ -1,217 +1,102 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/InPageNavigation GeneratedItems smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-in-page-navigation data-content=".js-content"
-                         data-headings
-  >
-    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class="mx-heading--m">
-        On this page
-      </h2>
-      <ul>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 1
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 2
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 3
-            </span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </mx-in-page-navigation>
-  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-    <h2 id="section-1">
-      Section 1
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-2">
-      Section 2
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h3 id="test-level-3">
-      Test level 3
-    </h3>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-3">
-      Section 3
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-  </div>
+exports[`Generated Items 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="" data-title="On this page">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+      <h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>
+"
 `;
 
-exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-in-page-navigation data-content=".js-content"
-                         data-headings
-  >
-    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class="mx-heading--m">
-        On this page
-      </h2>
-      <ul>
-        <li>
-          <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 1
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 2
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 3
-            </span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </mx-in-page-navigation>
-  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-    <h2 id="section-1">
-      Section 1
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-2">
-      Section 2
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h3 id="test-level-3">
-      Test level 3
-    </h3>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-3">
-      Section 3
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-  </div>
+exports[`In Page Navigation 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="" data-title="On this page">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+        <h2 class="is-excluded mx-heading--m">On this page</h2><ul>
+              <li>
+<a href="#section-1">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+  <span>Section 1</span>
+    
+</a>
+</li>
+              <li>
+<a href="#section-2">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+  <span>Section 2</span>
+    
+</a>
+</li>
+              <li>
+<a href="#section-3">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+  <span>Section 3</span>
+    
+</a>
+</li>
+          </ul>
+      </nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+</div>
+"
+`;
+
+exports[`Nested 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="h2,h3" data-title="On this page">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+      <h2 class="is-excluded mx-heading--m">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul></nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>
+"
 `;
 
-exports[`Component/InPageNavigation Nested smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-in-page-navigation data-content=".js-content"
-                         data-headings="h2,h3"
-  >
-    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class="mx-heading--m">
-        On this page
-      </h2>
-      <ul>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 1
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 2
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h3">
-          <a href="#test-level-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Test level 3
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 3
-            </span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </mx-in-page-navigation>
-  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-    <h2 id="section-1">
-      Section 1
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-2">
-      Section 2
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h3 id="test-level-3">
-      Test level 3
-    </h3>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-3">
-      Section 3
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-  </div>
+exports[`No Headings 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="h4" data-title="On this page">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+      </nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>
+"
 `;

package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap

@@ -1,149 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
-<div class="mx-grid--sidebar">
-  <aside>
-    <nav class="mx-in-page-navigation mx-nav mx-nav--list">
-      <h2 class="mx-text--embellished-headline"
-          id="on-this-page"
-      >
-        On this page
-      </h2>
-      <ul>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-1"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 1
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#anchor-test"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 2
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#test-level-3"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Test level 3
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-3"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 3
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-4"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 4
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-5"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 5
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#test-level-6"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Test level 6
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-7"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 7
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </aside>
-  <section>
-    <div class="mx-vertical-flow">
-      <h2 class
-          level="h2"
-          id="section-1"
-      >
-        Section 1
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          id="anchor-test"
-          level="h2"
-      >
-        Section 2
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h3"
-          id="test-level-3"
-      >
-        Test level 3
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-3"
-      >
-        Section 3
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-4"
-      >
-        Section 4
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-5"
-      >
-        Section 5
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h3"
-          id="test-level-6"
-      >
-        Test level 6
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-7"
-      >
-        Section 7
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-    </div>
-  </section>
-</div>
-`;
+exports[`In Page Navigation 1`] = `"<div class="mx-grid--sidebar"><aside><nav class="mx-in-page-navigation mx-nav mx-nav--list"><h2 class="mx-text--embellished-headline" id="on-this-page">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1" class="mx-icon mx-icon--chevron-right">Section 1</a></li><li class="mx-in-page-navigation__level--h2"><a href="#anchor-test" class="mx-icon mx-icon--chevron-right">Section 2</a></li><li class="mx-in-page-navigation__level--h2"><a href="#test-level-3" class="mx-icon mx-icon--chevron-right">Test level 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3" class="mx-icon mx-icon--chevron-right">Section 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-4" class="mx-icon mx-icon--chevron-right">Section 4</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-5" class="mx-icon mx-icon--chevron-right">Section 5</a></li><li class="mx-in-page-navigation__level--h2"><a href="#test-level-6" class="mx-icon mx-icon--chevron-right">Test level 6</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-7" class="mx-icon mx-icon--chevron-right">Section 7</a></li></ul></nav></aside><section><div class="mx-vertical-flow"><h2 class="" level="h2" id="section-1">Section 1</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="anchor-test" level="h2">Section 2</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h3" id="test-level-3">Test level 3</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-3">Section 3</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-4">Section 4</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-5">Section 5</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h3" id="test-level-6">Test level 6</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-7">Section 7</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p></div></section></div>"`;

package/src/Component/InPageNavigation/in-page-navigation.css

@@ -10,6 +10,13 @@
 
 @layer design-system.components {
   .mx-in-page-navigation {
+    --link-colour: var(--colour-link);
+    --nav-underline: underline;
+
+    &:has(ul, ol) {
+      margin-block-end: var(--flow-gap, var(--gap));
+    }
+
     & .mx-in-page-navigation__level--h3 {
       padding-inline-start: var(--indent, var(--spacing-s));
     }

package/src/Component/InPageNavigation/in-page-navigation.twig

@@ -5,13 +5,14 @@
   'mx-vertical-flow'
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
-<mx-in-page-navigation data-content=".js-content" data-headings="{{ levels|join(",") }}">
+<mx-in-page-navigation data-content=".js-content" data-headings="{{ levels|join(",") }}" data-title="{{ title|striptags|trim }}">
   <nav{{ attributes }}>
-    {{ title }}
+    {% if items %}
     <ul>
       {% for item in items %}
         <li>{{ item }}</li>
       {% endfor %}
     </ul>
+    {% endif %}
   </nav>
 </mx-in-page-navigation>

package/src/Component/LinkList/LinkList.stories.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component, { LinkListItem } from "./LinkList"
 import "./link-list.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Navigation/Link List",
+  decorators: [Page],
   tags: ["autodocs"],
   component: Component,
   args: {