@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/dist/build/global-alert.css

@@ -22,12 +22,12 @@
       padding-inline: var(--spacing-s);
     }
 
-      .mx-global-alert .mx-global-alert__inner:has(.icon--close) {
+      .mx-global-alert .mx-global-alert__inner:has(.mx-icon--close) {
         grid-template-columns: auto min-content;
         grid-template-areas: "content close";
       }
 
-        .mx-global-alert .mx-global-alert__inner:has(.icon--close) .message__content {
+        .mx-global-alert .mx-global-alert__inner:has(.mx-icon--close) .message__content {
           grid-area: content;
         }
 
@@ -57,4 +57,4 @@
     }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdsb2JhbC1hbGVydC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtFQUNFO0lBQ0UsZ0VBQWdFO0lBQ2hFLGtEQUFrRDtFQXdDcEQ7O0lBdENFO01BQ0UsYUFBYTtNQUNiLHNCQUFpQjtNQUFqQixpQkFBaUI7TUFDakIsaUNBQWlDO01BQ2pDLGdDQUFnQztJQVVsQzs7TUFSRTtRQUNFLHVDQUF1QztRQUN2QyxvQ0FBb0M7TUFLdEM7O1FBSEU7VUFDRSxrQkFBa0I7UUFDcEI7O0lBSUo7TUFDRSxjQUFjO0lBQ2hCOztJQUVBO01BQ0UsNENBQTRDO01BQzVDLDRDQUE0QztJQUM5Qzs7SUFFQTtNQUNFLGlCQUFpQjs7TUFFakIsZ0JBQWdCO01BQ2hCLHdCQUFnQjtTQUFoQixxQkFBZ0I7Y0FBaEIsZ0JBQWdCO01BQ2hCLDZCQUE2QjtNQUM3Qiw0QkFBNEI7TUFDNUIsVUFBVTtNQUNWLFNBQVM7TUFDVCw2QkFBNkI7TUFDN0Isb0JBQW9CO01BQ3BCLGNBQWM7SUFDaEI7QUFFSiIsImZpbGUiOiJnbG9iYWwtYWxlcnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBNZXNzYWdlc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgbXgtY2xvc2FibGUtYWxlcnQge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtZ2xvYmFsLWFsZXJ0IHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItcHJpbWFyeS1saWdodCkpO1xuICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpO1xuXG4gICAgJiAubXgtZ2xvYmFsLWFsZXJ0X19pbm5lciB7XG4gICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgZ2FwOiB2YXIoLS1nYXAtcyk7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zcGFjaW5nLXh4cyk7XG4gICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0tc3BhY2luZy1zKTtcblxuICAgICAgJjpoYXMoLmljb24tLWNsb3NlKSB7XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byBtaW4tY29udGVudDtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJjb250ZW50IGNsb3NlXCI7XG5cbiAgICAgICAgJiAubWVzc2FnZV9fY29udGVudCB7XG4gICAgICAgICAgZ3JpZC1hcmVhOiBjb250ZW50O1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiBhIHtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuICAgIH1cblxuICAgICYubXgtZ2xvYmFsLWFsZXJ0LS1jcml0aWNhbCB7XG4gICAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1lcnJvci1mb3JlZ3JvdW5kKTtcbiAgICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWVycm9yLWJhY2tncm91bmQpO1xuICAgIH1cblxuICAgICYgLm14LWljb24tLWNsb3NlIHtcbiAgICAgIC0taWNvbi1zaXplOiAxcmVtO1xuXG4gICAgICBncmlkLWFyZWE6IGNsb3NlO1xuICAgICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLWwpO1xuICAgICAgYmxvY2stc2l6ZTogdmFyKC0tc3BhY2luZy1sKTtcbiAgICAgIHBhZGRpbmc6IDA7XG4gICAgICBib3JkZXI6IDA7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGp1c3RpZnktY29udGVudDogZW5kO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdsb2JhbC1hbGVydC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtFQUNFO0lBQ0UsZ0VBQWdFO0lBQ2hFLGtEQUFrRDtFQXdDcEQ7O0lBdENFO01BQ0UsYUFBYTtNQUNiLHNCQUFpQjtNQUFqQixpQkFBaUI7TUFDakIsaUNBQWlDO01BQ2pDLGdDQUFnQztJQVVsQzs7TUFSRTtRQUNFLHVDQUF1QztRQUN2QyxvQ0FBb0M7TUFLdEM7O1FBSEU7VUFDRSxrQkFBa0I7UUFDcEI7O0lBSUo7TUFDRSxjQUFjO0lBQ2hCOztJQUVBO01BQ0UsNENBQTRDO01BQzVDLDRDQUE0QztJQUM5Qzs7SUFFQTtNQUNFLGlCQUFpQjs7TUFFakIsZ0JBQWdCO01BQ2hCLHdCQUFnQjtTQUFoQixxQkFBZ0I7Y0FBaEIsZ0JBQWdCO01BQ2hCLDZCQUE2QjtNQUM3Qiw0QkFBNEI7TUFDNUIsVUFBVTtNQUNWLFNBQVM7TUFDVCw2QkFBNkI7TUFDN0Isb0JBQW9CO01BQ3BCLGNBQWM7SUFDaEI7QUFFSiIsImZpbGUiOiJnbG9iYWwtYWxlcnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBNZXNzYWdlc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgbXgtY2xvc2FibGUtYWxlcnQge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtZ2xvYmFsLWFsZXJ0IHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItcHJpbWFyeS1saWdodCkpO1xuICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpO1xuXG4gICAgJiAubXgtZ2xvYmFsLWFsZXJ0X19pbm5lciB7XG4gICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgZ2FwOiB2YXIoLS1nYXAtcyk7XG4gICAgICBwYWRkaW5nLWJsb2NrOiB2YXIoLS1zcGFjaW5nLXh4cyk7XG4gICAgICBwYWRkaW5nLWlubGluZTogdmFyKC0tc3BhY2luZy1zKTtcblxuICAgICAgJjpoYXMoLm14LWljb24tLWNsb3NlKSB7XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogYXV0byBtaW4tY29udGVudDtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJjb250ZW50IGNsb3NlXCI7XG5cbiAgICAgICAgJiAubWVzc2FnZV9fY29udGVudCB7XG4gICAgICAgICAgZ3JpZC1hcmVhOiBjb250ZW50O1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiBhIHtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuICAgIH1cblxuICAgICYubXgtZ2xvYmFsLWFsZXJ0LS1jcml0aWNhbCB7XG4gICAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1lcnJvci1mb3JlZ3JvdW5kKTtcbiAgICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWVycm9yLWJhY2tncm91bmQpO1xuICAgIH1cblxuICAgICYgLm14LWljb24tLWNsb3NlIHtcbiAgICAgIC0taWNvbi1zaXplOiAxcmVtO1xuXG4gICAgICBncmlkLWFyZWE6IGNsb3NlO1xuICAgICAgYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLWwpO1xuICAgICAgYmxvY2stc2l6ZTogdmFyKC0tc3BhY2luZy1sKTtcbiAgICAgIHBhZGRpbmc6IDA7XG4gICAgICBib3JkZXI6IDA7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIGp1c3RpZnktY29udGVudDogZW5kO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/build/header.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.layouts {
-  .header__toggles {
+  .mx-header__toggles {
     display: flex;
     gap: var(--toggle-gap, var(--spacing-xs));
     padding-inline-end: 0.125rem;
@@ -12,16 +12,16 @@
   }
 
     @media (min-width: 720px) {
-  .header__toggles {
+  .mx-header__toggles {
       display: none;
   }
     }
 
-    .header__toggles .button--secondary {
+    .mx-header__toggles .mx-button--secondary {
       border-color: transparent;
     }
 
-    .header__toggles [hidden] {
+    .mx-header__toggles [hidden] {
       display: none;
     }
     @media (max-width: 719.98px) {
@@ -37,25 +37,30 @@
  */
 
 @layer design-system.layouts {
-  .header {
+  .mx-header__inner {
     position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
   }
 
-    .header .flex {
-      flex-wrap: wrap;
-      align-items: center;
-      position: relative;
-    }
+  .mx-header__brand {
+    display: flex;
+    gap: var(--brand-gap, var(--gap));
+    align-items: center;
+    margin-inline-end: auto;
+  }
 
-      .header .flex::after {
-        display: none;
-      }
+  .mx-header__name {
+    display: grid;
+  }
 
-      .header .flex .logo {
-        margin-inline-end: auto;
-      }
+  .mx-header__main {
+    display: flex;
+    gap: var(--main-gap, var(--gap));
+    align-items: center;
+  }
 
-  .header__nav {
+  .mx-header__nav {
     inline-size: 100%;
     transition:
       0.2s opacity var(--ease),
@@ -64,7 +69,7 @@
 
     @media (min-width: 720px) {
 
-  .header__nav {
+  .mx-header__nav {
       z-index: 2;
       position: relative;
       inline-size: auto;
@@ -72,7 +77,7 @@
   }
     }
 
-    .header__nav[inert] {
+    .mx-header__nav[inert] {
       block-size: 0;
       opacity: 0;
       visibility: hidden;
@@ -81,7 +86,7 @@
         0.2s visibility var(--ease);
     }
 
-  .header__search {
+  .mx-header__search {
     position: absolute;
     inset-block-start: 2px;
     inset-inline-start: 0;
@@ -93,15 +98,14 @@
 
     @media (min-width: 720px) {
 
-  .header__search {
+  .mx-header__search {
       display: flex;
       position: relative;
       inline-size: auto;
-      margin-inline-start: var(--spacing-m);
   }
     }
 
-    .header__search[inert] {
+    .mx-header__search[inert] {
       opacity: 0;
       visibility: hidden;
       transition:
@@ -109,23 +113,26 @@
         0.2s visibility var(--ease);
     }
 
+    .mx-header__search input {
+      max-inline-size: 150px;
+    }
+
   /**
    * Primary Header Stacked
    */
+  .mx-header__nav-inner {
+    display: flex;
+  }
 
-  .header__nav-right {
+  .mx-header__nav-right {
     margin-inline-start: auto;
   }
 }
 
 @media print {
-  .header .header__nav {
+  .mx-header .mx-header__nav {
     display: none;
   }
-
-  .header .section__content {
-    max-inline-size: 100%;
-  }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90b2dnbGVzLmNzcyIsIl9oZWFkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IseUNBQXlDO0lBQ3pDLDRCQUF1QjtJQUN2QixrQkFBa0I7SUFDbEIsVUFBVTtFQWFaOztJQVhFO0VBUEY7TUFRSSxhQUFhO0VBVWpCO0lBVEU7O0lBRUE7TUFDRSx5QkFBeUI7SUFDM0I7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTtBQUVKOztBQzlCQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0VBZXBCOztJQWJFO01BQ0UsZUFBZTtNQUNmLG1CQUFtQjtNQUNuQixrQkFBa0I7SUFTcEI7O01BUEU7UUFDRSxhQUFhO01BQ2Y7O01BRUE7UUFDRSx1QkFBdUI7TUFDekI7O0VBSUo7SUFDRSxpQkFBaUI7SUFDakI7O2lDQUU2QjtFQWlCL0I7O0lBZkU7O0VBTkY7TUFPSSxVQUFVO01BQ1Ysa0JBQWtCO01BQ2xCLGlCQUFpQjtNQUNqQixnQkFBZ0I7RUFXcEI7SUFWRTs7SUFFQTtNQUNFLGFBQWE7TUFDYixVQUFVO01BQ1Ysa0JBQWtCO01BQ2xCOzttQ0FFNkI7SUFDL0I7O0VBR0Y7SUFDRSxrQkFBa0I7SUFDbEIsc0JBQXNCO0lBQ3RCLHFCQUFxQjtJQUNyQixpQkFBaUI7SUFDakI7O2lDQUU2QjtFQWdCL0I7O0lBZEU7O0VBVEY7TUFVSSxhQUFhO01BQ2Isa0JBQWtCO01BQ2xCLGlCQUFpQjtNQUNqQixxQ0FBcUM7RUFVekM7SUFURTs7SUFFQTtNQUNFLFVBQVU7TUFDVixrQkFBa0I7TUFDbEI7O21DQUU2QjtJQUMvQjs7RUFHRjs7SUFFRTs7RUFFRjtJQUNFLHlCQUF5QjtFQUMzQjtBQUNGOztBQUVBO0VBQ0U7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSxxQkFBcUI7RUFDdkI7QUFDRiIsImZpbGUiOiJoZWFkZXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHbG9iYWwgSGVhZGVyXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5oZWFkZXJfX3RvZ2dsZXMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiB2YXIoLS10b2dnbGUtZ2FwLCB2YXIoLS1zcGFjaW5nLXhzKSk7XG4gICAgcGFkZGluZy1pbmxpbmUtZW5kOiAycHg7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHotaW5kZXg6IDE7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG5cbiAgICAmIC5idXR0b24tLXNlY29uZGFyeSB7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIH1cblxuICAgICYgW2hpZGRlbl0ge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cblxuICAuZ2xvYmFsLW5hdi11cC1vbmx5IHtcbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi1kb3duKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxufVxuIiwiLyoqXG4gKiBQcmltYXJ5IEhlYWRlclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAuaGVhZGVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAmIC5mbGV4IHtcbiAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgICAgJiAubG9nbyB7XG4gICAgICAgIG1hcmdpbi1pbmxpbmUtZW5kOiBhdXRvO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5oZWFkZXJfX25hdiB7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgdHJhbnNpdGlvbjpcbiAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICB6LWluZGV4OiAyO1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaW5saW5lLXNpemU6IGF1dG87XG4gICAgICBibG9jay1zaXplOiBhdXRvO1xuICAgIH1cblxuICAgICZbaW5lcnRdIHtcbiAgICAgIGJsb2NrLXNpemU6IDA7XG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICAgICAgdHJhbnNpdGlvbjpcbiAgICAgICAgMC4ycyBvcGFjaXR5IHZhcigtLWVhc2UpLFxuICAgICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG4gICAgfVxuICB9XG5cbiAgLmhlYWRlcl9fc2VhcmNoIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgaW5zZXQtYmxvY2stc3RhcnQ6IDJweDtcbiAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgdHJhbnNpdGlvbjpcbiAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaW5saW5lLXNpemU6IGF1dG87XG4gICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgIH1cblxuICAgICZbaW5lcnRdIHtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gICAgICB0cmFuc2l0aW9uOlxuICAgICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogUHJpbWFyeSBIZWFkZXIgU3RhY2tlZFxuICAgKi9cblxuICAuaGVhZGVyX19uYXYtcmlnaHQge1xuICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IGF1dG87XG4gIH1cbn1cblxuQG1lZGlhIHByaW50IHtcbiAgLmhlYWRlciAuaGVhZGVyX19uYXYge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cblxuICAuaGVhZGVyIC5zZWN0aW9uX19jb250ZW50IHtcbiAgICBtYXgtaW5saW5lLXNpemU6IDEwMCU7XG4gIH1cbn1cbiJdfQ== */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90b2dnbGVzLmNzcyIsIl9oZWFkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IseUNBQXlDO0lBQ3pDLDRCQUF1QjtJQUN2QixrQkFBa0I7SUFDbEIsVUFBVTtFQWFaOztJQVhFO0VBUEY7TUFRSSxhQUFhO0VBVWpCO0lBVEU7O0lBRUE7TUFDRSx5QkFBeUI7SUFDM0I7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTtBQUVKOztBQzlCQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYiwrQkFBK0I7RUFDakM7O0VBRUE7SUFDRSxhQUFhO0lBQ2IsaUNBQWlDO0lBQ2pDLG1CQUFtQjtJQUNuQix1QkFBdUI7RUFDekI7O0VBRUE7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSxhQUFhO0lBQ2IsZ0NBQWdDO0lBQ2hDLG1CQUFtQjtFQUNyQjs7RUFFQTtJQUNFLGlCQUFpQjtJQUNqQjs7aUNBRTZCO0VBaUIvQjs7SUFmRTs7RUFORjtNQU9JLFVBQVU7TUFDVixrQkFBa0I7TUFDbEIsaUJBQWlCO01BQ2pCLGdCQUFnQjtFQVdwQjtJQVZFOztJQUVBO01BQ0UsYUFBYTtNQUNiLFVBQVU7TUFDVixrQkFBa0I7TUFDbEI7O21DQUU2QjtJQUMvQjs7RUFHRjtJQUNFLGtCQUFrQjtJQUNsQixzQkFBc0I7SUFDdEIscUJBQXFCO0lBQ3JCLGlCQUFpQjtJQUNqQjs7aUNBRTZCO0VBbUIvQjs7SUFqQkU7O0VBVEY7TUFVSSxhQUFhO01BQ2Isa0JBQWtCO01BQ2xCLGlCQUFpQjtFQWNyQjtJQWJFOztJQUVBO01BQ0UsVUFBVTtNQUNWLGtCQUFrQjtNQUNsQjs7bUNBRTZCO0lBQy9COztJQUVBO01BQ0Usc0JBQXNCO0lBQ3hCOztFQUdGOztJQUVFO0VBQ0Y7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7QUFDRjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoiaGVhZGVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2xvYmFsIEhlYWRlclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtaGVhZGVyX190b2dnbGVzIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tdG9nZ2xlLWdhcCwgdmFyKC0tc3BhY2luZy14cykpO1xuICAgIHBhZGRpbmctaW5saW5lLWVuZDogMnB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuXG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuXG4gICAgJiAubXgtYnV0dG9uLS1zZWNvbmRhcnkge1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICB9XG5cbiAgICAmIFtoaWRkZW5dIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgLmdsb2JhbC1uYXYtdXAtb25seSB7XG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtZG93bikge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogUHJpbWFyeSBIZWFkZXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWhlYWRlcl9faW5uZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyIGF1dG87XG4gIH1cblxuICAubXgtaGVhZGVyX19icmFuZCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLWJyYW5kLWdhcCwgdmFyKC0tZ2FwKSk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hbWUge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gIH1cblxuICAubXgtaGVhZGVyX19tYWluIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tbWFpbi1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19uYXYge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgei1pbmRleDogMjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgICAgYmxvY2stc2l6ZTogYXV0bztcbiAgICB9XG5cbiAgICAmW2luZXJ0XSB7XG4gICAgICBibG9jay1zaXplOiAwO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgICAgMC4ycyB2aXNpYmlsaXR5IHZhcigtLWVhc2UpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZWFkZXJfX3NlYXJjaCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGluc2V0LWJsb2NrLXN0YXJ0OiAycHg7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgIH1cblxuICAgICZbaW5lcnRdIHtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gICAgICB0cmFuc2l0aW9uOlxuICAgICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcbiAgICB9XG5cbiAgICAmIGlucHV0IHtcbiAgICAgIG1heC1pbmxpbmUtc2l6ZTogMTUwcHg7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFByaW1hcnkgSGVhZGVyIFN0YWNrZWRcbiAgICovXG4gIC5teC1oZWFkZXJfX25hdi1pbm5lciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hdi1yaWdodCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtaGVhZGVyIC5teC1oZWFkZXJfX25hdiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl19 */

package/dist/build/header.entry.js

@@ -10,10 +10,15 @@ class GlobalToggle extends HTMLElement {
       matches
     }) => {
       if (!this.trigger) return;
+      const { signal } = this.controller;
       if (matches) {
         this.widget.attach();
         this.target.setAttribute("inert", "");
-        this.trigger.addEventListener("disclosure-toggle", this.handleDisclosure);
+        this.trigger.addEventListener(
+          "disclosure-toggle",
+          this.handleDisclosure,
+          { signal }
+        );
       } else {
         this.widget.detach();
         this.target.removeAttribute("inert");

package/dist/build/header.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.entry.js","sources":["../../src/Layout/Header/Elements/GlobalToggle.ts"],"sourcesContent":["/**\n * Header\n * @file Handle accessible trigger of menus on small screens.\n */\n\nimport {\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\nexport default class GlobalToggle extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  widget!: DisclosureWidget\n  controls?: string\n  mq: string\n  triggerText: string\n  closeIconClass: string = \"icon--close\"\n  menuIconClass: string = \"icon--menu\"\n  searchIconClass: string = \"icon--search\"\n  hideMenu: boolean\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    if (!this.trigger || !this.target) return\n\n    this.target?.setAttribute(\"role\", \"region\")\n    this.widget = new DisclosureWidget(this.trigger, this.target)\n    this.widget.init()\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.widget.detach()\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (!this.trigger) return\n    if (matches) {\n      this.widget.attach()\n      this.target.setAttribute(\"inert\", \"\")\n      this.trigger.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n    } else {\n      this.widget.detach()\n      this.target.removeAttribute(\"inert\")\n      this.trigger.removeEventListener(\n        \"disclosure-toggle\",\n        this.handleDisclosure,\n      )\n    }\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen } = detail\n    // Toggle toggle text.\n    const origText = !isOpen ? \"Close\" : \"Open\"\n    const replaceText = !isOpen ? \"Open\" : \"Close\"\n    this.trigger.textContent = this.triggerText.replace(origText, replaceText)\n\n    // Search is a little different.\n    const isSearch = this.controls === \"primary-search\"\n    if (isSearch) this.handleSearchDisclosure(isOpen)\n\n    // Toggle trigger classes.\n    this.trigger.classList.toggle(\n      isSearch ? this.searchIconClass : this.menuIconClass,\n    )\n    this.trigger.classList.toggle(this.closeIconClass)\n  }\n\n  handleSearchDisclosure = (isOpen?: boolean): void => {\n    if (this.hideMenu) {\n      // Search trigger should hide the menu trigger.\n      const menuTrigger = document.querySelector(`.${this.menuIconClass}`)\n      menuTrigger.toggleAttribute(\"hidden\")\n    }\n    // Shift focus between search input and trigger.\n    if (!isOpen) {\n      this.trigger.focus()\n    } else {\n      this.target.querySelector(\"input\")?.focus()\n    }\n  }\n\n  get trigger(): HTMLButtonElement {\n    const trigger: HTMLButtonElement | null =\n      this.querySelector(\":scope > button\")\n    const controls = trigger.getAttribute(\"aria-controls\")\n    if (!trigger || !controls) {\n      throw new Error(\n        `${this.localName} must contain a <button aria-controls=\"element-to-trigger\"> element.`,\n      )\n    }\n    trigger.removeAttribute(\"disabled\")\n    this.controls = controls\n    this.triggerText = trigger.textContent\n    return trigger\n  }\n\n  get target(): HTMLDivElement {\n    const target: HTMLDivElement | null = document.querySelector(\n      `div[id=\"${this.controls}\"]`,\n    )\n    if (!target) {\n      throw new Error(\n        `${this.localName} must contain a target <div id=\"${this.controls}\">.`,\n      )\n    }\n    target.classList.remove(\"global-nav-up-only\")\n    return target\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-global-toggle\", GlobalToggle)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-trigger\": GlobalToggle\n  }\n}\n"],"names":[],"mappings":";;AAUA,MAAqB,qBAAqB,YAAY;AAAA,EAYpD,cAAc;AACN;AANiB,SAAA,iBAAA;AACD,SAAA,gBAAA;AACE,SAAA,kBAAA;AA4B1B,SAAA,mBAAmB,CAAC;AAAA,MAClB;AAAA,IAAA,MACgD;AAC5C,UAAA,CAAC,KAAK,QAAS;AACnB,UAAI,SAAS;AACX,aAAK,OAAO;AACP,aAAA,OAAO,aAAa,SAAS,EAAE;AACpC,aAAK,QAAQ,iBAAiB,qBAAqB,KAAK,gBAAgB;AAAA,MAAA,OACnE;AACL,aAAK,OAAO;AACP,aAAA,OAAO,gBAAgB,OAAO;AACnC,aAAK,QAAQ;AAAA,UACX;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAGiB,SAAA,mBAAA,CAAC,EAAE,aAAuD;AACrE,YAAA,EAAE,OAAW,IAAA;AAEb,YAAA,WAAW,CAAC,SAAS,UAAU;AAC/B,YAAA,cAAc,CAAC,SAAS,SAAS;AACvC,WAAK,QAAQ,cAAc,KAAK,YAAY,QAAQ,UAAU,WAAW;AAGnE,YAAA,WAAW,KAAK,aAAa;AAC/B,UAAA,SAAe,MAAA,uBAAuB,MAAM;AAGhD,WAAK,QAAQ,UAAU;AAAA,QACrB,WAAW,KAAK,kBAAkB,KAAK;AAAA,MAAA;AAEzC,WAAK,QAAQ,UAAU,OAAO,KAAK,cAAc;AAAA,IAAA;AAGnD,SAAA,yBAAyB,CAAC,WAA2B;AACnD,UAAI,KAAK,UAAU;AAEjB,cAAM,cAAc,SAAS,cAAc,IAAI,KAAK,aAAa,EAAE;AACnE,oBAAY,gBAAgB,QAAQ;AAAA,MACtC;AAEA,UAAI,CAAC,QAAQ;AACX,aAAK,QAAQ;MAAM,OACd;AACL,aAAK,OAAO,cAAc,OAAO,GAAG,MAAM;AAAA,MAC5C;AAAA,IAAA;AAtEK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACtB,SAAK,KAAK,KAAK,aAAa,IAAI,KAAK;AAAA,EACvC;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,OAAQ;AAE9B,SAAA,QAAQ,aAAa,QAAQ,QAAQ;AAC1C,SAAK,SAAS,IAAI,iBAAiB,KAAK,SAAS,KAAK,MAAM;AAC5D,SAAK,OAAO;AACN,UAAA,EAAE,OAAO,IAAqB,KAAK;AACpC,SAAA,iBAAiB,KAAK,UAAU;AACrC,SAAK,WAAW,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,MAChE;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEA,uBAA6B;AAC3B,SAAK,OAAO;AACZ,SAAK,WAAW;EAClB;AAAA,EAoDA,IAAI,UAA6B;AACzB,UAAA,UACJ,KAAK,cAAc,iBAAiB;AAChC,UAAA,WAAW,QAAQ,aAAa,eAAe;AACjD,QAAA,CAAC,WAAW,CAAC,UAAU;AACzB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,YAAQ,gBAAgB,UAAU;AAClC,SAAK,WAAW;AAChB,SAAK,cAAc,QAAQ;AACpB,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,SAAyB;AAC3B,UAAM,SAAgC,SAAS;AAAA,MAC7C,WAAW,KAAK,QAAQ;AAAA,IAAA;AAE1B,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS,mCAAmC,KAAK,QAAQ;AAAA,MAAA;AAAA,IAErE;AACO,WAAA,UAAU,OAAO,oBAAoB;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,aAA6B;AACxB,WAAA,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC;AACF;AAEA,eAAe,OAAO,oBAAoB,YAAY;"}
+{"version":3,"file":"header.entry.js","sources":["../../src/Layout/Header/Elements/GlobalToggle.ts"],"sourcesContent":["/**\n * Header\n * @file Handle accessible trigger of menus on small screens.\n */\n\nimport {\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\nexport default class GlobalToggle extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  widget!: DisclosureWidget\n  controls?: string\n  mq: string\n  triggerText: string\n  closeIconClass: string = \"icon--close\"\n  menuIconClass: string = \"icon--menu\"\n  searchIconClass: string = \"icon--search\"\n  hideMenu: boolean\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    if (!this.trigger || !this.target) return\n\n    this.target?.setAttribute(\"role\", \"region\")\n    this.widget = new DisclosureWidget(this.trigger, this.target)\n    this.widget.init()\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.widget.detach()\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (!this.trigger) return\n    const { signal }: AbortController = this.controller\n    if (matches) {\n      this.widget.attach()\n      this.target.setAttribute(\"inert\", \"\")\n      this.trigger.addEventListener(\n        \"disclosure-toggle\",\n        this.handleDisclosure,\n        { signal },\n      )\n    } else {\n      this.widget.detach()\n      this.target.removeAttribute(\"inert\")\n      this.trigger.removeEventListener(\n        \"disclosure-toggle\",\n        this.handleDisclosure,\n      )\n    }\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen } = detail\n    // Toggle toggle text.\n    const origText = !isOpen ? \"Close\" : \"Open\"\n    const replaceText = !isOpen ? \"Open\" : \"Close\"\n    this.trigger.textContent = this.triggerText.replace(origText, replaceText)\n\n    // Search is a little different.\n    const isSearch = this.controls === \"primary-search\"\n    if (isSearch) this.handleSearchDisclosure(isOpen)\n\n    // Toggle trigger classes.\n    this.trigger.classList.toggle(\n      isSearch ? this.searchIconClass : this.menuIconClass,\n    )\n    this.trigger.classList.toggle(this.closeIconClass)\n  }\n\n  handleSearchDisclosure = (isOpen?: boolean): void => {\n    if (this.hideMenu) {\n      // Search trigger should hide the menu trigger.\n      const menuTrigger = document.querySelector(`.${this.menuIconClass}`)\n      menuTrigger.toggleAttribute(\"hidden\")\n    }\n    // Shift focus between search input and trigger.\n    if (!isOpen) {\n      this.trigger.focus()\n    } else {\n      this.target.querySelector(\"input\")?.focus()\n    }\n  }\n\n  get trigger(): HTMLButtonElement {\n    const trigger: HTMLButtonElement | null =\n      this.querySelector(\":scope > button\")\n    const controls = trigger.getAttribute(\"aria-controls\")\n    if (!trigger || !controls) {\n      throw new Error(\n        `${this.localName} must contain a <button aria-controls=\"element-to-trigger\"> element.`,\n      )\n    }\n    trigger.removeAttribute(\"disabled\")\n    this.controls = controls\n    this.triggerText = trigger.textContent\n    return trigger\n  }\n\n  get target(): HTMLDivElement {\n    const target: HTMLDivElement | null = document.querySelector(\n      `div[id=\"${this.controls}\"]`,\n    )\n    if (!target) {\n      throw new Error(\n        `${this.localName} must contain a target <div id=\"${this.controls}\">.`,\n      )\n    }\n    target.classList.remove(\"global-nav-up-only\")\n    return target\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-global-toggle\", GlobalToggle)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-trigger\": GlobalToggle\n  }\n}\n"],"names":[],"mappings":";;AAUA,MAAqB,qBAAqB,YAAY;AAAA,EAYpD,cAAc;AACN;AANiB,SAAA,iBAAA;AACD,SAAA,gBAAA;AACE,SAAA,kBAAA;AA4B1B,SAAA,mBAAmB,CAAC;AAAA,MAClB;AAAA,IAAA,MACgD;AAC5C,UAAA,CAAC,KAAK,QAAS;AACb,YAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,UAAI,SAAS;AACX,aAAK,OAAO;AACP,aAAA,OAAO,aAAa,SAAS,EAAE;AACpC,aAAK,QAAQ;AAAA,UACX;AAAA,UACA,KAAK;AAAA,UACL,EAAE,OAAO;AAAA,QAAA;AAAA,MACX,OACK;AACL,aAAK,OAAO;AACP,aAAA,OAAO,gBAAgB,OAAO;AACnC,aAAK,QAAQ;AAAA,UACX;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAGiB,SAAA,mBAAA,CAAC,EAAE,aAAuD;AACrE,YAAA,EAAE,OAAW,IAAA;AAEb,YAAA,WAAW,CAAC,SAAS,UAAU;AAC/B,YAAA,cAAc,CAAC,SAAS,SAAS;AACvC,WAAK,QAAQ,cAAc,KAAK,YAAY,QAAQ,UAAU,WAAW;AAGnE,YAAA,WAAW,KAAK,aAAa;AAC/B,UAAA,SAAe,MAAA,uBAAuB,MAAM;AAGhD,WAAK,QAAQ,UAAU;AAAA,QACrB,WAAW,KAAK,kBAAkB,KAAK;AAAA,MAAA;AAEzC,WAAK,QAAQ,UAAU,OAAO,KAAK,cAAc;AAAA,IAAA;AAGnD,SAAA,yBAAyB,CAAC,WAA2B;AACnD,UAAI,KAAK,UAAU;AAEjB,cAAM,cAAc,SAAS,cAAc,IAAI,KAAK,aAAa,EAAE;AACnE,oBAAY,gBAAgB,QAAQ;AAAA,MACtC;AAEA,UAAI,CAAC,QAAQ;AACX,aAAK,QAAQ;MAAM,OACd;AACL,aAAK,OAAO,cAAc,OAAO,GAAG,MAAM;AAAA,MAC5C;AAAA,IAAA;AA3EK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACtB,SAAK,KAAK,KAAK,aAAa,IAAI,KAAK;AAAA,EACvC;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,OAAQ;AAE9B,SAAA,QAAQ,aAAa,QAAQ,QAAQ;AAC1C,SAAK,SAAS,IAAI,iBAAiB,KAAK,SAAS,KAAK,MAAM;AAC5D,SAAK,OAAO;AACN,UAAA,EAAE,OAAO,IAAqB,KAAK;AACpC,SAAA,iBAAiB,KAAK,UAAU;AACrC,SAAK,WAAW,iBAAiB,UAAU,KAAK,kBAAkB;AAAA,MAChE;AAAA,IAAA,CACD;AAAA,EACH;AAAA,EAEA,uBAA6B;AAC3B,SAAK,OAAO;AACZ,SAAK,WAAW;EAClB;AAAA,EAyDA,IAAI,UAA6B;AACzB,UAAA,UACJ,KAAK,cAAc,iBAAiB;AAChC,UAAA,WAAW,QAAQ,aAAa,eAAe;AACjD,QAAA,CAAC,WAAW,CAAC,UAAU;AACzB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,YAAQ,gBAAgB,UAAU;AAClC,SAAK,WAAW;AAChB,SAAK,cAAc,QAAQ;AACpB,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,SAAyB;AAC3B,UAAM,SAAgC,SAAS;AAAA,MAC7C,WAAW,KAAK,QAAQ;AAAA,IAAA;AAE1B,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS,mCAAmC,KAAK,QAAQ;AAAA,MAAA;AAAA,IAErE;AACO,WAAA,UAAU,OAAO,oBAAoB;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,aAA6B;AACxB,WAAA,OAAO,WAAW,KAAK,EAAE;AAAA,EAClC;AACF;AAEA,eAAe,OAAO,oBAAoB,YAAY;"}

package/dist/build/in-page-navigation.css

@@ -9,9 +9,9 @@
 }
 
 @layer design-system.components {
-    .in-page-navigation .in-page-navigation__level--h3 {
-      padding-inline-start: var(--spacing-s);
+    .mx-in-page-navigation .mx-in-page-navigation__level--h3 {
+      padding-inline-start: var(--indent, var(--spacing-s));
     }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluLXBhZ2UtbmF2aWdhdGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtJQUVJO01BQ0Usc0NBQXNDO0lBQ3hDO0FBRUoiLCJmaWxlIjoiaW4tcGFnZS1uYXZpZ2F0aW9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogSW5QYWdlTmF2aWdhdGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgbXgtaW4tcGFnZS1uYXZpZ2F0aW9uIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLmluLXBhZ2UtbmF2aWdhdGlvbiB7XG4gICAgJiAuaW4tcGFnZS1uYXZpZ2F0aW9uX19sZXZlbC0taDMge1xuICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgfVxuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluLXBhZ2UtbmF2aWdhdGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGNBQWM7RUFDaEI7QUFDRjs7QUFFQTtJQUVJO01BQ0UscURBQXFEO0lBQ3ZEO0FBRUoiLCJmaWxlIjoiaW4tcGFnZS1uYXZpZ2F0aW9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogSW5QYWdlTmF2aWdhdGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmRlZmF1bHRzIHtcbiAgbXgtaW4tcGFnZS1uYXZpZ2F0aW9uIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxufVxuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWluLXBhZ2UtbmF2aWdhdGlvbiB7XG4gICAgJiAubXgtaW4tcGFnZS1uYXZpZ2F0aW9uX19sZXZlbC0taDMge1xuICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IHZhcigtLWluZGVudCwgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/build/in-page-navigation.entry.js

@@ -73,14 +73,14 @@ class InPageNavigation extends HTMLElement {
     const targetID = id || this.generatedId(heading);
     if (!id) heading.id = targetID;
     const item = createElement(
-      `<a href="#${targetID}" class="icon icon--chevron-right">${linkText}</a>`
+      `<a href="#${targetID}" class="mx-icon mx-icon--chevron-right">${linkText}</a>`
     );
     return item;
   }
   generateListItem(heading) {
     const { tagName } = heading;
     const item = createElement(
-      `<li class="in-page-navigation__level--${tagName.toLowerCase()}"></li>`
+      `<li class="mx-in-page-navigation__level--${tagName.toLowerCase()}"></li>`
     );
     return item;
   }

package/dist/build/in-page-navigation.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"in-page-navigation.entry.js","sources":["../../src/Component/InPageNavigation/Elements/InPageNavigation.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageNavigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  headingLevels: string\n  items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]\n  active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.headingLevels = this.dataset?.headings || \"h2\"\n    this.items = []\n  }\n\n  connectedCallback(): void {\n    if (!this.menu || !this.headings) return\n\n    this.headings.forEach((heading: HTMLHeadingElement) => {\n      const listItem: HTMLLIElement = this.generateListItem(heading)\n      const link: HTMLAnchorElement = this.generateAnchor(heading)\n      this.items.push({ link, heading })\n      listItem.appendChild(link)\n      this.menu?.appendChild(listItem)\n    })\n\n    const { signal }: AbortController = this.controller\n\n    // Open on toggle click.\n    this.menu.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        const { target } = e\n        if (!(target instanceof HTMLAnchorElement)) return\n        this.handleClick(target)\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    if (!this.menu || !this.headings) return\n    this.menu.textContent = \"\"\n    this.items = []\n    this.controller.abort()\n  }\n\n  handleClick = (target: EventTarget | null): void => {\n    this.active = this.items.find(item => item.link === target)\n    if (!this.links || !this.active) return\n    this.links.forEach(link => link.classList.remove(\"is-active\"))\n    this.active.link.classList.add(\"is-active\")\n  }\n\n  get menu(): HTMLUListElement | HTMLOListElement | null {\n    const menu: HTMLUListElement | HTMLOListElement | null =\n      this.querySelector(\"ul, ol\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)\n    }\n    return menu\n  }\n\n  get container(): HTMLElement | null {\n    const selector: string | null = this.getAttribute(\"data-content\")\n    if (!selector) {\n      throw new Error(\n        `${this.localName} must have a [data-content] attribute that contains the content selector.`,\n      )\n    }\n    return this.closest(selector) || this.parentElement.querySelector(selector)\n  }\n\n  get headings(): NodeListOf<HTMLHeadingElement> | undefined {\n    return this.container?.querySelectorAll(this.headingLevels)\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | undefined {\n    return this.menu?.querySelectorAll(\"a\")\n  }\n\n  generatedId(heading: HTMLHeadingElement): string {\n    const string: string | undefined = heading?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n\n  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {\n    const { textContent, id } = heading\n    const linkText: string | null =\n      heading.getAttribute(\"data-in-page-navigation-title\") || textContent\n    const targetID: string = id || this.generatedId(heading)\n    if (!id) heading.id = targetID\n    const item: Element = createElement(\n      `<a href=\"#${targetID}\" class=\"icon icon--chevron-right\">${linkText}</a>`,\n    )\n\n    return item as HTMLAnchorElement\n  }\n\n  generateListItem(heading: HTMLHeadingElement): HTMLLIElement {\n    const { tagName } = heading\n    const item: Element = createElement(\n      `<li class=\"in-page-navigation__level--${tagName.toLowerCase()}\"></li>`,\n    )\n\n    return item as HTMLLIElement\n  }\n}\n\ncustomElements.define(\"mx-in-page-navigation\", InPageNavigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-in-page-navigation\": InPageNavigation\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,yBAAyB,YAAY;AAAA,EAOxD,cAAc;AACN;AAyCR,SAAA,cAAc,CAAC,WAAqC;AAClD,WAAK,SAAS,KAAK,MAAM,KAAK,CAAQ,SAAA,KAAK,SAAS,MAAM;AAC1D,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AACjC,WAAK,MAAM,QAAQ,CAAA,SAAQ,KAAK,UAAU,OAAO,WAAW,CAAC;AAC7D,WAAK,OAAO,KAAK,UAAU,IAAI,WAAW;AAAA,IAAA;AA5CrC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACjB,SAAA,gBAAgB,KAAK,SAAS,YAAY;AAC/C,SAAK,QAAQ;EACf;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAE7B,SAAA,SAAS,QAAQ,CAAC,YAAgC;AAC/C,YAAA,WAA0B,KAAK,iBAAiB,OAAO;AACvD,YAAA,OAA0B,KAAK,eAAe,OAAO;AAC3D,WAAK,MAAM,KAAK,EAAE,MAAM,QAAS,CAAA;AACjC,eAAS,YAAY,IAAI;AACpB,WAAA,MAAM,YAAY,QAAQ;AAAA,IAAA,CAChC;AAEK,UAAA,EAAE,OAAO,IAAqB,KAAK;AAGzC,SAAK,KAAK;AAAA,MACR;AAAA,MACA,CAAC,MAAwB;AACjB,cAAA,EAAE,OAAW,IAAA;AACf,YAAA,EAAE,kBAAkB,mBAAoB;AAC5C,aAAK,YAAY,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAClC,SAAK,KAAK,cAAc;AACxB,SAAK,QAAQ;AACb,SAAK,WAAW;EAClB;AAAA,EASA,IAAI,OAAmD;AAC/C,UAAA,OACJ,KAAK,cAAc,QAAQ;AAC7B,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,uCAAuC;AAAA,IAC1E;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,YAAgC;AAC5B,UAAA,WAA0B,KAAK,aAAa,cAAc;AAChE,QAAI,CAAC,UAAU;AACb,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO,KAAK,QAAQ,QAAQ,KAAK,KAAK,cAAc,cAAc,QAAQ;AAAA,EAC5E;AAAA,EAEA,IAAI,WAAuD;AACzD,WAAO,KAAK,WAAW,iBAAiB,KAAK,aAAa;AAAA,EAC5D;AAAA,EAEA,IAAI,QAAmD;AAC9C,WAAA,KAAK,MAAM,iBAAiB,GAAG;AAAA,EACxC;AAAA,EAEA,YAAY,SAAqC;AACzC,UAAA,SAA6B,SAAS,aAAa,KAAK;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AAAA,EAEA,eAAe,SAAgD;AACvD,UAAA,EAAE,aAAa,GAAO,IAAA;AAC5B,UAAM,WACJ,QAAQ,aAAa,+BAA+B,KAAK;AAC3D,UAAM,WAAmB,MAAM,KAAK,YAAY,OAAO;AACnD,QAAA,CAAC,GAAI,SAAQ,KAAK;AACtB,UAAM,OAAgB;AAAA,MACpB,aAAa,QAAQ,sCAAsC,QAAQ;AAAA,IAAA;AAG9D,WAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,SAA4C;AACrD,UAAA,EAAE,QAAY,IAAA;AACpB,UAAM,OAAgB;AAAA,MACpB,yCAAyC,QAAQ,YAAA,CAAa;AAAA,IAAA;AAGzD,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,yBAAyB,gBAAgB;"}
+{"version":3,"file":"in-page-navigation.entry.js","sources":["../../src/Component/InPageNavigation/Elements/InPageNavigation.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageNavigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  headingLevels: string\n  items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]\n  active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.headingLevels = this.dataset?.headings || \"h2\"\n    this.items = []\n  }\n\n  connectedCallback(): void {\n    if (!this.menu || !this.headings) return\n\n    this.headings.forEach((heading: HTMLHeadingElement) => {\n      const listItem: HTMLLIElement = this.generateListItem(heading)\n      const link: HTMLAnchorElement = this.generateAnchor(heading)\n      this.items.push({ link, heading })\n      listItem.appendChild(link)\n      this.menu?.appendChild(listItem)\n    })\n\n    const { signal }: AbortController = this.controller\n\n    // Open on toggle click.\n    this.menu.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        const { target } = e\n        if (!(target instanceof HTMLAnchorElement)) return\n        this.handleClick(target)\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    if (!this.menu || !this.headings) return\n    this.menu.textContent = \"\"\n    this.items = []\n    this.controller.abort()\n  }\n\n  handleClick = (target: EventTarget | null): void => {\n    this.active = this.items.find(item => item.link === target)\n    if (!this.links || !this.active) return\n    this.links.forEach(link => link.classList.remove(\"is-active\"))\n    this.active.link.classList.add(\"is-active\")\n  }\n\n  get menu(): HTMLUListElement | HTMLOListElement | null {\n    const menu: HTMLUListElement | HTMLOListElement | null =\n      this.querySelector(\"ul, ol\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)\n    }\n    return menu\n  }\n\n  get container(): HTMLElement | null {\n    const selector: string | null = this.getAttribute(\"data-content\")\n    if (!selector) {\n      throw new Error(\n        `${this.localName} must have a [data-content] attribute that contains the content selector.`,\n      )\n    }\n    return this.closest(selector) || this.parentElement.querySelector(selector)\n  }\n\n  get headings(): NodeListOf<HTMLHeadingElement> | undefined {\n    return this.container?.querySelectorAll(this.headingLevels)\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | undefined {\n    return this.menu?.querySelectorAll(\"a\")\n  }\n\n  generatedId(heading: HTMLHeadingElement): string {\n    const string: string | undefined = heading?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n\n  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {\n    const { textContent, id } = heading\n    const linkText: string | null =\n      heading.getAttribute(\"data-in-page-navigation-title\") || textContent\n    const targetID: string = id || this.generatedId(heading)\n    if (!id) heading.id = targetID\n    const item: Element = createElement(\n      `<a href=\"#${targetID}\" class=\"mx-icon mx-icon--chevron-right\">${linkText}</a>`,\n    )\n\n    return item as HTMLAnchorElement\n  }\n\n  generateListItem(heading: HTMLHeadingElement): HTMLLIElement {\n    const { tagName } = heading\n    const item: Element = createElement(\n      `<li class=\"mx-in-page-navigation__level--${tagName.toLowerCase()}\"></li>`,\n    )\n\n    return item as HTMLLIElement\n  }\n}\n\ncustomElements.define(\"mx-in-page-navigation\", InPageNavigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-in-page-navigation\": InPageNavigation\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,yBAAyB,YAAY;AAAA,EAOxD,cAAc;AACN;AAyCR,SAAA,cAAc,CAAC,WAAqC;AAClD,WAAK,SAAS,KAAK,MAAM,KAAK,CAAQ,SAAA,KAAK,SAAS,MAAM;AAC1D,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AACjC,WAAK,MAAM,QAAQ,CAAA,SAAQ,KAAK,UAAU,OAAO,WAAW,CAAC;AAC7D,WAAK,OAAO,KAAK,UAAU,IAAI,WAAW;AAAA,IAAA;AA5CrC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACjB,SAAA,gBAAgB,KAAK,SAAS,YAAY;AAC/C,SAAK,QAAQ;EACf;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAE7B,SAAA,SAAS,QAAQ,CAAC,YAAgC;AAC/C,YAAA,WAA0B,KAAK,iBAAiB,OAAO;AACvD,YAAA,OAA0B,KAAK,eAAe,OAAO;AAC3D,WAAK,MAAM,KAAK,EAAE,MAAM,QAAS,CAAA;AACjC,eAAS,YAAY,IAAI;AACpB,WAAA,MAAM,YAAY,QAAQ;AAAA,IAAA,CAChC;AAEK,UAAA,EAAE,OAAO,IAAqB,KAAK;AAGzC,SAAK,KAAK;AAAA,MACR;AAAA,MACA,CAAC,MAAwB;AACjB,cAAA,EAAE,OAAW,IAAA;AACf,YAAA,EAAE,kBAAkB,mBAAoB;AAC5C,aAAK,YAAY,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAClC,SAAK,KAAK,cAAc;AACxB,SAAK,QAAQ;AACb,SAAK,WAAW;EAClB;AAAA,EASA,IAAI,OAAmD;AAC/C,UAAA,OACJ,KAAK,cAAc,QAAQ;AAC7B,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,uCAAuC;AAAA,IAC1E;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,YAAgC;AAC5B,UAAA,WAA0B,KAAK,aAAa,cAAc;AAChE,QAAI,CAAC,UAAU;AACb,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO,KAAK,QAAQ,QAAQ,KAAK,KAAK,cAAc,cAAc,QAAQ;AAAA,EAC5E;AAAA,EAEA,IAAI,WAAuD;AACzD,WAAO,KAAK,WAAW,iBAAiB,KAAK,aAAa;AAAA,EAC5D;AAAA,EAEA,IAAI,QAAmD;AAC9C,WAAA,KAAK,MAAM,iBAAiB,GAAG;AAAA,EACxC;AAAA,EAEA,YAAY,SAAqC;AACzC,UAAA,SAA6B,SAAS,aAAa,KAAK;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AAAA,EAEA,eAAe,SAAgD;AACvD,UAAA,EAAE,aAAa,GAAO,IAAA;AAC5B,UAAM,WACJ,QAAQ,aAAa,+BAA+B,KAAK;AAC3D,UAAM,WAAmB,MAAM,KAAK,YAAY,OAAO;AACnD,QAAA,CAAC,GAAI,SAAQ,KAAK;AACtB,UAAM,OAAgB;AAAA,MACpB,aAAa,QAAQ,4CAA4C,QAAQ;AAAA,IAAA;AAGpE,WAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,SAA4C;AACrD,UAAA,EAAE,QAAY,IAAA;AACpB,UAAM,OAAgB;AAAA,MACpB,4CAA4C,QAAQ,YAAA,CAAa;AAAA,IAAA;AAG5D,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,yBAAyB,gBAAgB;"}

package/dist/build/list-item.css

@@ -0,0 +1,114 @@
+/**
+ * List Item
+ */
+
+@layer design-system.components {
+  .mx-list-item {
+    display: grid;
+    grid-gap: var(--list-item-gap, var(--gap));
+    gap: var(--list-item-gap, var(--gap));
+  }
+
+  .mx-list-item:has(> .mx-list-item__media) {
+    grid-template: "media" "content" 1fr / 1fr;
+  }
+
+    @container (min-width: 720px) {
+
+  .mx-list-item:has(> .mx-list-item__media) {
+      --list-item-gap: var(--gap-l);
+      --image-min-width: var(--image-max-width, 200px);
+
+      grid-template: "media content" 1fr / auto 1fr;
+      align-items: center;
+  }
+    }
+      @container (min-width: 720px) {
+
+    .mx-list-item.mx-list-item--reversed:has(> .mx-list-item__media) {
+        grid-template-areas: "content media";
+        grid-template-columns: 1fr auto;
+    }
+      }
+
+    .mx-list-item:has(> .mx-list-item__media) .mx-list-item__content {
+      grid-area: content;
+    }
+
+    .mx-list-item:has(> .mx-list-item__media) :is(.mx-list-item__media, figure) {
+      grid-area: media;
+      display: grid;
+      position: relative;
+      inline-size: 100%;
+      max-inline-size: 100px;
+      max-inline-size: var(--image-min-width, 100px);
+    }
+
+      .mx-list-item:has(> .mx-list-item__media) :is(.mx-list-item__media, figure) img {
+        aspect-ratio: 1 / 1;
+        border-radius: var(--border-radius);
+        -o-object-fit: cover;
+           object-fit: cover;
+        display: block;
+      }
+
+  .mx-list-item__content {
+    --flow-gap: var(--gap-s);
+  }
+
+    .mx-list-item__content > .mx-text--s {
+      --flow-gap: 0;
+    }
+    :is(.mx-list-item, .mx-container:has(> .mx-list-item)):where(:not(:first-child)) {
+      border-block-start: 1px solid
+        var(--line-colour, var(--colour-border));
+      border-block-start: var(--line-width, 1px) solid
+        var(--line-colour, var(--colour-border));
+      padding-block-start: var(--gap);
+      margin-block-start: var(--gap);
+    }
+}
+
+/**
+ * List item grid
+ */
+
+@layer design-system.components {
+  .mx-grid:has(> *:nth-child(2):last-child)
+    > :is(.mx-list-item, .mx-container:has(.mx-list-item)) {
+    inline-size: 100%;
+    max-inline-size: 37ch;
+    max-inline-size: var(--max-list-item-width, 37ch);
+    margin-inline: auto;
+  }
+}
+
+/**
+ * Block list item
+ */
+
+@layer design-system.components {
+  .mx-list-item--block {
+    position: relative;
+  }
+
+    .mx-list-item--block:focus-within {
+      border-radius: var(--border-radius);
+      outline: var(--outline-width) var(--outline-style) var(--outline-color);
+      outline-offset: 2px;
+    }
+      .mx-list-item--block :is(a[href], button):focus-visible {
+        outline: none;
+      }
+
+    .mx-list-item--block a::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxpc3QtaXRlbS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGFBQWE7SUFDYiwwQ0FBcUM7SUFBckMscUNBQXFDO0VBQ3ZDOztFQUVBO0lBQ0UsMENBQTBDO0VBbUM1Qzs7SUFqQ0U7O0VBSEY7TUFJSSw2QkFBNkI7TUFDN0IsZ0RBQWdEOztNQUVoRCw2Q0FBNkM7TUFDN0MsbUJBQW1CO0VBNEJ2QjtJQTNCRTtNQUdFOztJQURGO1FBRUksb0NBQW9DO1FBQ3BDLCtCQUErQjtJQUVuQztNQURFOztJQUdGO01BQ0Usa0JBQWtCO0lBQ3BCOztJQUVBO01BQ0UsZ0JBQWdCO01BQ2hCLGFBQWE7TUFDYixrQkFBa0I7TUFDbEIsaUJBQWlCO01BQ2pCLHNCQUE4QztNQUE5Qyw4Q0FBOEM7SUFRaEQ7O01BTkU7UUFDRSxtQkFBbUI7UUFDbkIsbUNBQW1DO1FBQ25DLG9CQUFpQjtXQUFqQixpQkFBaUI7UUFDakIsY0FBYztNQUNoQjs7RUFJSjtJQUNFLHdCQUF3QjtFQUsxQjs7SUFIRTtNQUNFLGFBQWE7SUFDZjtJQUlBO01BQ0U7Z0RBQzBDO01BRDFDO2dEQUMwQztNQUMxQywrQkFBK0I7TUFDL0IsOEJBQThCO0lBQ2hDO0FBRUo7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTs7SUFFRSxpQkFBaUI7SUFDakIscUJBQWlEO0lBQWpELGlEQUFpRDtJQUNqRCxtQkFBbUI7RUFDckI7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0VBc0JwQjs7SUFwQkU7TUFDRSxtQ0FBbUM7TUFDbkMsdUVBQXVFO01BQ3ZFLG1CQUFtQjtJQUNyQjtNQUdFO1FBQ0UsYUFBYTtNQUNmOztJQUdGO01BQ0UsV0FBVztNQUNYLGtCQUFrQjtNQUNsQixvQkFBb0I7TUFDcEIscUJBQXFCO01BQ3JCLGlCQUFpQjtNQUNqQixnQkFBZ0I7SUFDbEI7QUFFSiIsImZpbGUiOiJsaXN0LWl0ZW0uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBMaXN0IEl0ZW1cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LWxpc3QtaXRlbSB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBnYXA6IHZhcigtLWxpc3QtaXRlbS1nYXAsIHZhcigtLWdhcCkpO1xuICB9XG5cbiAgLm14LWxpc3QtaXRlbTpoYXMoPiAubXgtbGlzdC1pdGVtX19tZWRpYSkge1xuICAgIGdyaWQtdGVtcGxhdGU6IFwibWVkaWFcIiBcImNvbnRlbnRcIiAxZnIgLyAxZnI7XG5cbiAgICBAY29udGFpbmVyIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5jb250ZW50Q2FyZFwiKSkge1xuICAgICAgLS1saXN0LWl0ZW0tZ2FwOiB2YXIoLS1nYXAtbCk7XG4gICAgICAtLWltYWdlLW1pbi13aWR0aDogdmFyKC0taW1hZ2UtbWF4LXdpZHRoLCAyMDBweCk7XG5cbiAgICAgIGdyaWQtdGVtcGxhdGU6IFwibWVkaWEgY29udGVudFwiIDFmciAvIGF1dG8gMWZyO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB9XG5cbiAgICAmLm14LWxpc3QtaXRlbS0tcmV2ZXJzZWQge1xuICAgICAgQGNvbnRhaW5lciAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuY29udGVudENhcmRcIikpIHtcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJjb250ZW50IG1lZGlhXCI7XG4gICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyIGF1dG87XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiAubXgtbGlzdC1pdGVtX19jb250ZW50IHtcbiAgICAgIGdyaWQtYXJlYTogY29udGVudDtcbiAgICB9XG5cbiAgICAmIDppcygubXgtbGlzdC1pdGVtX19tZWRpYSwgZmlndXJlKSB7XG4gICAgICBncmlkLWFyZWE6IG1lZGlhO1xuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgICAgbWF4LWlubGluZS1zaXplOiB2YXIoLS1pbWFnZS1taW4td2lkdGgsIDEwMHB4KTtcblxuICAgICAgJiBpbWcge1xuICAgICAgICBhc3BlY3QtcmF0aW86IDEgLyAxO1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICAgICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5teC1saXN0LWl0ZW1fX2NvbnRlbnQge1xuICAgIC0tZmxvdy1nYXA6IHZhcigtLWdhcC1zKTtcblxuICAgICYgPiAubXgtdGV4dC0tcyB7XG4gICAgICAtLWZsb3ctZ2FwOiAwO1xuICAgIH1cbiAgfVxuXG4gIDppcygubXgtbGlzdC1pdGVtLCAubXgtY29udGFpbmVyOmhhcyg+IC5teC1saXN0LWl0ZW0pKSB7XG4gICAgJjp3aGVyZSg6bm90KDpmaXJzdC1jaGlsZCkpIHtcbiAgICAgIGJvcmRlci1ibG9jay1zdGFydDogdmFyKC0tbGluZS13aWR0aCwgMXB4KSBzb2xpZFxuICAgICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgICAgcGFkZGluZy1ibG9jay1zdGFydDogdmFyKC0tZ2FwKTtcbiAgICAgIG1hcmdpbi1ibG9jay1zdGFydDogdmFyKC0tZ2FwKTtcbiAgICB9XG4gIH1cbn1cblxuLyoqXG4gKiBMaXN0IGl0ZW0gZ3JpZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtZ3JpZDpoYXMoPiAqOm50aC1jaGlsZCgyKTpsYXN0LWNoaWxkKVxuICAgID4gOmlzKC5teC1saXN0LWl0ZW0sIC5teC1jb250YWluZXI6aGFzKC5teC1saXN0LWl0ZW0pKSB7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgbWF4LWlubGluZS1zaXplOiB2YXIoLS1tYXgtbGlzdC1pdGVtLXdpZHRoLCAzN2NoKTtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG59XG5cbi8qKlxuICogQmxvY2sgbGlzdCBpdGVtXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1saXN0LWl0ZW0tLWJsb2NrIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAmOmZvY3VzLXdpdGhpbiB7XG4gICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICAgIG91dGxpbmU6IHZhcigtLW91dGxpbmUtd2lkdGgpIHZhcigtLW91dGxpbmUtc3R5bGUpIHZhcigtLW91dGxpbmUtY29sb3IpO1xuICAgICAgb3V0bGluZS1vZmZzZXQ6IDJweDtcbiAgICB9XG5cbiAgICAmIDppcyhhW2hyZWZdLCBidXR0b24pIHtcbiAgICAgICY6Zm9jdXMtdmlzaWJsZSB7XG4gICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiBhOjphZnRlciB7XG4gICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gICAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/build/masthead.css

@@ -3,37 +3,28 @@
  */
 
 @layer design-system.layouts {
-    .masthead .flex {
+    .mx-masthead .flex {
       justify-content: space-between;
       align-items: center;
-      padding-block: var(--secondary-gap, var(--spacing-xxs));
-      padding-inline: 0;
     }
 
-      .masthead .flex::after {
-        display: none;
-      }
-
-  .masthead__nav {
+  .mx-masthead__nav {
     display: none;
   }
 
     @media (min-width: 720px) {
 
-  .masthead__nav {
-      display: inline-block;
+  .mx-masthead__nav {
+      display: inline-flex;
+      gap: var(--gap);
   }
     }
-
-    .masthead__nav ul {
-      margin: auto;
-    }
 }
 
 @media print {
-  .masthead {
+  .mx-masthead {
     display: none;
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1hc3RoZWFkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsOEJBQThCO01BQzlCLG1CQUFtQjtNQUNuQix1REFBdUQ7TUFDdkQsaUJBQWlCO0lBS25COztNQUhFO1FBQ0UsYUFBYTtNQUNmOztFQUlKO0lBQ0UsYUFBYTtFQVNmOztJQVBFOztFQUhGO01BSUkscUJBQXFCO0VBTXpCO0lBTEU7O0lBRUE7TUFDRSxZQUFZO0lBQ2Q7QUFFSjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoibWFzdGhlYWQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBNYXN0aGVhZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubWFzdGhlYWQge1xuICAgICYgLmZsZXgge1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXNlY29uZGFyeS1nYXAsIHZhcigtLXNwYWNpbmcteHhzKSk7XG4gICAgICBwYWRkaW5nLWlubGluZTogMDtcblxuICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIC5tYXN0aGVhZF9fbmF2IHtcbiAgICBkaXNwbGF5OiBub25lO1xuXG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICB9XG5cbiAgICAmIHVsIHtcbiAgICAgIG1hcmdpbjogYXV0bztcbiAgICB9XG4gIH1cbn1cblxuQG1lZGlhIHByaW50IHtcbiAgLm1hc3RoZWFkIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1hc3RoZWFkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsOEJBQThCO01BQzlCLG1CQUFtQjtJQUNyQjs7RUFHRjtJQUNFLGFBQWE7RUFNZjs7SUFKRTs7RUFIRjtNQUlJLG9CQUFvQjtNQUNwQixlQUFlO0VBRW5CO0lBREU7QUFFSjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoibWFzdGhlYWQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBNYXN0aGVhZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtbWFzdGhlYWQge1xuICAgICYgLmZsZXgge1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB9XG4gIH1cblxuICAubXgtbWFzdGhlYWRfX25hdiB7XG4gICAgZGlzcGxheTogbm9uZTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGdhcDogdmFyKC0tZ2FwKTtcbiAgICB9XG4gIH1cbn1cblxuQG1lZGlhIHByaW50IHtcbiAgLm14LW1hc3RoZWFkIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */