@pnx-mixtape/mxds 0.0.26 → 0.0.27

package/dist/build/popover.entry.js

@@ -1 +1 @@
-import "./chunks/Popover-Bws25suh.js";
+import "./chunks/Popover-C4gisyxr.js";

package/dist/build/tabs.entry.js

@@ -1,6 +1,6 @@
 import { i as makeAnchor, t as createElement } from "./chunks/utilities-DepaJdUg.js";
-import "./chunks/Popover-Bws25suh.js";
-import { t as DropMenu } from "./chunks/DropMenu-plGsgySm.js";
+import "./chunks/Popover-C4gisyxr.js";
+import { t as DropMenu } from "./chunks/DropMenu-LnJEp-sg.js";
 let PopoverPlacementModifier = /* @__PURE__ */ function(e) {
 	return e.TOP = "top", e.TOP_START = "top-start", e.TOP_END = "top-end", e.RIGHT = "right", e.RIGHT_START = "right-start", e.RIGHT_END = "right-end", e.LEFT = "left", e.LEFT_START = "left-start", e.LEFT_END = "left-end", e.BOTTOM = "bottom", e.BOTTOM_START = "bottom-start", e.BOTTOM_END = "bottom-end", e;
 }({});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@oddbird/popover-polyfill": "^0.6.1",
@@ -17,9 +17,8 @@
     "react-stately": "^3.42.0"
   },
   "devDependencies": {
-    "@csstools/postcss-global-data": "^3.1.0",
-    "@csstools/stylelint-formatter-github": "^1.0.0",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@csstools/stylelint-formatter-github": "^2.0.0",
     "@storybook/addon-a11y": "^10.1.4",
     "@storybook/addon-docs": "^10.1.4",
     "@storybook/addon-links": "^10.1.4",
@@ -32,7 +31,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.10.1",
+    "@types/node": "^25.0.3",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.15",
     "@vitest/coverage-v8": "^4.0.15",
@@ -48,17 +47,16 @@
     "postcss-design-tokens": "^1.3.0",
     "postcss-inline-svg": "^6.0.0",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^10.5.0",
+    "postcss-preset-env": "^11.1.1",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.7.4",
-    "storybook": "^10.1.4",
-    "stylelint": "^16.26.1",
-    "stylelint-config-standard": "^39.0.1",
+    "storybook": "^10.1.10",
+    "stylelint": "^17.0.0",
+    "stylelint-config-standard": "^40.0.0",
     "stylelint-use-logical-spec": "^5.0.1",
-    "tinyglobby": "^0.2.15",
     "twig": "^1.17.1",
     "typescript": "^5.9.3",
-    "vite": "8.0.0-beta.0",
+    "vite": "8.0.0-beta.8",
     "vite-plugin-twig-drupal": "^1.6.2",
     "vitest": "^4.0.15"
   },

package/src/Component/Accordion/__snapshots__/AccordionItem.stories.ts.snap

@@ -18,7 +18,7 @@ exports[`Accordion Item 1`] = `
 
 exports[`Div 1`] = `
 "<mx-accordiondiv class="mx-accordion mx-accordion--divided">
-  <button type="button" class="mx-accordion__toggle" aria-expanded="false" aria-controls="music">
+  <button type="button" class="mx-accordion__toggle" aria-expanded="false" aria-controls="unique-0">
     Music
     <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>
   </button>

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

@@ -3,14 +3,14 @@
 exports[`Dialog 1`] = `
 "
     
-<a href="#example-dialog" aria-controls="example-dialog">
+<a href="#example-dialog" aria-controls="unique-0">
   
   <span>Open dialog</span>
     
 </a>
 
     
-<mx-dialog id="example-dialog">
+<mx-dialog id="unique-0">
   <dialog class="mx-dialog">
     <button autofocus="" class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close="">Close dialog</button>
     <div class="mx-dialog__content mx-vertical-flow">
@@ -36,14 +36,14 @@ exports[`Dialog 1`] = `
 exports[`Fullscreen 1`] = `
 "
       
-  <button aria-controls="example-fullscreen" class="mx-button mx-button--dark" type="button">
+  <button aria-controls="unique-0" class="mx-button mx-button--dark" type="button">
     
     <span>Open fullscreen modal</span>
     
   </button>
 
     
-<mx-dialog id="example-fullscreen" data-modal="">
+<mx-dialog id="unique-0" data-modal="">
   <dialog class="mx-dialog mx-dialog--fullscreen">
     <button autofocus="" class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close="">Close dialog</button>
     <div class="mx-dialog__content mx-vertical-flow">
@@ -69,14 +69,14 @@ exports[`Fullscreen 1`] = `
 exports[`Modal 1`] = `
 "
       
-  <button aria-controls="example-modal" class="mx-button mx-button--dark" type="button">
+  <button aria-controls="unique-0" class="mx-button mx-button--dark" type="button">
     
     <span>Open modal</span>
     
   </button>
 
     
-<mx-dialog id="example-modal" data-modal="">
+<mx-dialog id="unique-0" data-modal="">
   <dialog class="mx-dialog">
     <button autofocus="" class="mx-button mx-button--icon-only mx-icon mx-icon--close" data-close="">Close dialog</button>
     <div class="mx-dialog__content mx-vertical-flow">

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

@@ -2,10 +2,10 @@
 
 exports[`Buttons 1`] = `
 "<mx-dropmenu closeonclick="">
-<button id="dropdown-menu-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
+<button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="dropdown-menu-target" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
+<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="" role="menu">
             <button type="button" data-id="news" role="menuitemradio" aria-checked="false">News</button>
                 <button type="button" data-id="events" role="menuitemradio" aria-checked="false">Events</button>
                 <button type="button" data-id="stories" role="menuitemradio" aria-checked="false">Stories</button>
@@ -16,10 +16,10 @@ exports[`Buttons 1`] = `
 
 exports[`Drop Menu 1`] = `
 "<mx-dropmenu closeonclick="">
-<button id="dropdown-menu-target" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
+<button id="unique-0" class="mx-popover__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end" popovertarget="dropdown-menu" style="anchor-name: --dropdown-menu">
   Categories
 </button>
-<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="dropdown-menu-target" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
+<div class="mx-popover mx-drop-menu" id="dropdown-menu" aria-describedby="unique-0" style="position-anchor: --dropdown-menu" data-placement="bottom-start" popover="">
             <a href="#news">News</a>
                 <a href="#events">Events</a>
                 <a href="#stories">Stories</a>

package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap

@@ -46,12 +46,12 @@ exports[`Filters 1`] = `
     
 <label class="mx-label" for="filter-keywords">Keywords</label>
 
-  <div class="mx-description" id="help-filter-keywords" role="tooltip">
+  <div class="mx-description" id="unique-0" role="tooltip">
   Search by keywords
 </div>
 
         
-<input class="mx-input__text" id="filter-keywords" name="example-keywords" type="text" value="" aria-describedby="help-filter-keywords">
+<input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-describedby="unique-0">
 
     
   

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

@@ -23,9 +23,9 @@ exports[`Collapsible Counter 1`] = `
   
   
         
-<input class="mx-input__text" id="filter-keywords" name="example-keywords" type="text" value="" aria-label="Keywords" aria-describedby="help-filter-keywords">
+<input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-label="Keywords" aria-describedby="unique-0">
 
-    <div class="mx-description" id="help-filter-keywords" role="tooltip">
+    <div class="mx-description" id="unique-0" role="tooltip">
   Search by keywords
 </div>
 
@@ -120,12 +120,12 @@ exports[`Collapsible Right 1`] = `
 
 <div class="mx-form-item mx-accordion__content">
   
-  <div class="mx-description" id="help-filter-keywords" role="tooltip">
+  <div class="mx-description" id="unique-0" role="tooltip">
   Search by keywords
 </div>
 
         
-<input class="mx-input__text" id="filter-keywords" name="example-keywords" type="text" value="" aria-label="Keywords" aria-describedby="help-filter-keywords">
+<input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-label="Keywords" aria-describedby="unique-0">
 
     
   
@@ -208,12 +208,12 @@ exports[`Filters 1`] = `
     
 <label class="mx-label" for="filter-keywords">Keywords</label>
 
-  <div class="mx-description" id="help-filter-keywords" role="tooltip">
+  <div class="mx-description" id="unique-0" role="tooltip">
   Search by keywords
 </div>
 
         
-<input class="mx-input__text" id="filter-keywords" name="example-keywords" type="text" value="" aria-describedby="help-filter-keywords">
+<input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-describedby="unique-0">
 
     
   
@@ -286,12 +286,12 @@ exports[`Instant 1`] = `
     
 <label class="mx-label" for="filter-keywords">Keywords</label>
 
-  <div class="mx-description" id="help-filter-keywords" role="tooltip">
+  <div class="mx-description" id="unique-0" role="tooltip">
   Search by keywords
 </div>
 
         
-<input class="mx-input__text" id="filter-keywords" name="example-keywords" type="text" value="" aria-describedby="help-filter-keywords">
+<input class="mx-input__text" id="filter-keywords" name="unique-0" type="text" value="" aria-describedby="unique-0">
 
     
   

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

@@ -19,7 +19,7 @@ exports[`Critical 1`] = `
 
 exports[`Global Alert 1`] = `
 "
-<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light" id="light-alertlight">
+<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light" id="unique-0">
   <div class="mx-global-alert__inner" data-container="">
     <div class="mx-global-alert__content">
                         
@@ -28,7 +28,7 @@ exports[`Global Alert 1`] = `
       <p>Something happened that requires your attention</p>
       
     </div>
-  <button class="mx-icon mx-icon--close" aria-controls="light-alertlight" aria-label="Close GlobalAlert" type="button"></button></div>
+  <button class="mx-icon mx-icon--close" aria-controls="unique-0" aria-label="Close GlobalAlert" type="button"></button></div>
 </mx-closable-alert>
 
 "

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -9,6 +9,8 @@ export default class InPageNavigation extends HTMLElement {
   internals_: ElementInternals
   controller: AbortController
   headingLevels: string
+  title: string
+  titleClass: string = "is-excluded mx-heading--m"
   items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]
   active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined
 
@@ -17,11 +19,16 @@ export default class InPageNavigation extends HTMLElement {
     this.internals_ = this.attachInternals()
     this.controller = new AbortController()
     this.headingLevels = this.dataset?.headings || "h2"
+    this.title = this.dataset?.title || "On this page"
     this.items = []
   }
 
   connectedCallback(): void {
     if (!this.menu || !this.headings) return
+    const headingElement: HTMLHeadingElement = createElement(
+      `<h2 class="${this.titleClass}">${this.title}</h2>`,
+    ) as HTMLHeadingElement
+    this.nav.insertBefore(headingElement, this.menu)
     if (!this.links.length) {
       // Build links if not provided.
       this.headings.forEach((heading: HTMLHeadingElement) => {
@@ -71,10 +78,22 @@ export default class InPageNavigation extends HTMLElement {
 
   get menu(): HTMLUListElement | HTMLOListElement | null {
     const menu: HTMLUListElement | HTMLOListElement | null = this.querySelector("ul, ol")
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)
+    if (menu) {
+      return menu
     }
-    return menu
+    if (!this.nav) {
+      throw new Error(`${this.localName} must contain a <nav> element.`)
+    }
+    if (this.items.length === 0 && this.headings.length === 0) {
+      return null
+    }
+    const list = document.createElement("ul")
+    this.nav.appendChild(list)
+    return list
+  }
+
+  get nav(): HTMLElement | null {
+    return this.querySelector("nav")
   }
 
   get container(): HTMLElement | null {

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

@@ -98,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/__snapshots__/InPageNavigation.stories.ts.snap

@@ -1,14 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Generated Items 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="">
+"<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>
+      <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>
@@ -24,12 +19,9 @@ exports[`Generated Items 1`] = `
 `;
 
 exports[`In Page Navigation 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="">
+"<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>
+        <h2 class="is-excluded mx-heading--m">On this page</h2><ul>
               <li>
 <a href="#section-1">
   
@@ -58,7 +50,7 @@ exports[`In Page Navigation 1`] = `
 </a>
 </li>
           </ul>
-  </nav>
+      </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>
@@ -74,14 +66,27 @@ exports[`In Page Navigation 1`] = `
 `;
 
 exports[`Nested 1`] = `
-"<mx-in-page-navigation data-content=".js-content" data-headings="h2,h3">
+"<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>
+      <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>
+"
+`;
 
-    <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>
+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>

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

@@ -13,7 +13,9 @@
     --link-colour: var(--colour-link);
     --nav-underline: underline;
 
-    margin-block-end: var(--flow-gap, var(--gap));
+    &: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/Navigation/__snapshots__/Navigation.stories.ts.snap

@@ -12,22 +12,22 @@ exports[`Collapsible 1`] = `
           </a>
                       </li>
           <li class="mx-nav__has-subnav">
-                  <a href="#" id="list-label-subnav-0--what-we-do">
+                  <a href="#" id="unique-2">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--what-we-do">Sub-navigation</button>
-              <ul class="mx-nav__level-2" inert="" id="subnav-0--what-we-do" aria-labelledby="list-label-subnav-0--what-we-do">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li>
                   <a href="#">
             Events
           </a>
                       </li>
           <li class="mx-nav__has-subnav">
-                  <a href="#" id="list-label-subnav-1--who-we-are">
+                  <a href="#" id="unique-3">
             Who we are
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-1--who-we-are">Sub-navigation</button>
-              <ul class="mx-nav__level-3" inert="" id="subnav-1--who-we-are" aria-labelledby="list-label-subnav-1--who-we-are">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+              <ul class="mx-nav__level-3" inert="" id="unique-1" aria-labelledby="unique-3">
           <li>
                   <a href="#">
             Our team
@@ -88,11 +88,11 @@ exports[`Dropdown 1`] = `
           </a>
                       </li>
           <li class="mx-nav__has-subnav">
-                  <a href="#" id="list-label-subnav-0--what-we-do">
+                  <a href="#" id="unique-1">
             What we do
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--what-we-do">Sub-navigation</button>
-              <ul class="mx-nav__level-2" inert="" id="subnav-0--what-we-do" aria-labelledby="list-label-subnav-0--what-we-do">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li>
                   <a href="#">
             Events
@@ -145,17 +145,17 @@ exports[`Mega 1`] = `
           </a>
                       </li>
           <li class="mx-nav__has-subnav">
-                  <a href="#" id="list-label-subnav-0--about">
+                  <a href="#" id="unique-3">
             About
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-0--about">Sub-navigation</button>
-              <ul class="mx-nav__level-2" inert="" id="subnav-0--about" aria-labelledby="list-label-subnav-0--about">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-0">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="unique-0" aria-labelledby="unique-1">
           <li class="mx-nav__has-subnav">
-                  <a href="#" aria-current="page" id="list-label-subnav-1--who">
+                  <a href="#" aria-current="page" id="unique-4">
             Who
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-1--who">Sub-navigation</button>
-              <ul class="mx-nav__level-3" inert="" id="subnav-1--who" aria-labelledby="list-label-subnav-1--who">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+              <ul class="mx-nav__level-3" inert="" id="unique-1" aria-labelledby="unique-3">
           <li>
                   <a href="#" aria-current="page">
             How come?
@@ -188,11 +188,11 @@ exports[`Mega 1`] = `
 
               </li>
           <li class="mx-nav__has-subnav">
-                  <a href="#" id="list-label-subnav-2--contact">
+                  <a href="#" id="unique-5">
             Contact
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="subnav-2--contact">Sub-navigation</button>
-              <ul class="mx-nav__level-2" inert="" id="subnav-2--contact" aria-labelledby="list-label-subnav-2--contact">
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
+              <ul class="mx-nav__level-2" inert="" id="unique-2" aria-labelledby="unique-5">
           <li>
                   <a href="#" aria-current="page">
             How