@pnx-mixtape/mxds 0.0.18 → 0.0.20

package/dist/build/steps.css

@@ -19,8 +19,10 @@
         var(--line-colour, var(--colour-border));
       background-color: var(--background, var(--colour-background));
       border-radius: 100%;
-      inline-size: var(--counter-size, var(--spacing-l));
-      block-size: var(--counter-size, var(--spacing-l));
+      inline-size: 2rem;
+      inline-size: var(--counter-size, 2rem);
+      block-size: 2rem;
+      block-size: var(--counter-size, 2rem);
       inset-block-start: 0;
       inset-block-start: var(--counter-top, 0);
       inset-inline-start: 0;
@@ -39,16 +41,16 @@
       font-weight: var(--font-weight-bold);
       line-height: var(--line-height-ui);
       inline-size: calc(
-        var(--counter-size, var(--spacing-l)) + (2px * 2)
+        2rem + (2px * 2)
       );
       inline-size: calc(
-        var(--counter-size, var(--spacing-l)) + (var(--line-width, 2px) * 2)
+        var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
       );
       block-size: calc(
-        var(--counter-size, var(--spacing-l)) + (2px * 2)
+        2rem + (2px * 2)
       );
       block-size: calc(
-        var(--counter-size, var(--spacing-l)) + (var(--line-width, 2px) * 2)
+        var(--counter-size, 2rem) + (var(--line-width, 2px) * 2)
       );
       justify-content: center;
       inset-block-start: 0;
@@ -84,12 +86,10 @@
       inline-size: var(--line-width, 2px);
       background-color: var(--line-colour, var(--colour-border));
       inset-inline-start: calc(
-        (var(--counter-size, var(--spacing-l)) / 2) -
-          (2px / 2)
+        (2rem / 2) + (2px)
       );
       inset-inline-start: calc(
-        (var(--counter-size, var(--spacing-l)) / 2) -
-          (var(--line-width, 2px) / 2)
+        (var(--counter-size, 2rem) / 2) + (var(--line-width, 2px))
       );
       inset-block: 0;
       position: absolute;
@@ -115,4 +115,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZXBzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0Usa0JBQWtCO0VBa0RwQjs7SUFoREU7TUFDRSxXQUFXO01BQ1g7Z0RBQzBDO01BRDFDO2dEQUMwQztNQUMxQyw2REFBNkQ7TUFDN0QsbUJBQW1CO01BQ25CLGtEQUFrRDtNQUNsRCxpREFBaUQ7TUFDakQsb0JBQXdDO01BQXhDLHdDQUF3QztNQUN4QyxxQkFBcUI7TUFDckIsa0JBQWtCO01BQ2xCLFVBQVU7SUFDWjs7SUFFQTtNQUNFLG1CQUFtQjtNQUNuQixjQUFpQztNQUFqQyxpQ0FBaUM7TUFDakMsdUJBQXVCO01BQ3ZCLHlCQUF5QjtNQUN6QixhQUFhO01BQ2IsNkJBQTZCO01BQzdCLG9DQUFvQztNQUNwQyxrQ0FBa0M7TUFDbEM7O09BRUM7TUFGRDs7T0FFQztNQUNEOztPQUVDO01BRkQ7O09BRUM7TUFDRCx1QkFBdUI7TUFDdkIsb0JBQXdDO01BQXhDLHdDQUF3QztNQUN4QyxxQkFBcUI7TUFDckIsa0JBQWtCO01BQ2xCLFVBQVU7TUFDVixrQkFBNkM7TUFBN0MsNkNBQTZDO0lBQy9DOztJQUVBO01BQ0UsWUFBWTtJQUNkOztJQUVBO01BQ0Usd0JBQW1CO0lBQ3JCOztJQUVBO01BQ0UsdUJBQW1CO0lBQ3JCOztFQUdGO0lBQ0UsaURBQWlEO0lBQ2pELHVEQUF1RDtJQUN2RCxrREFBa0Q7RUFhcEQ7O0lBWEU7TUFDRSxXQUFXO01BQ1gsZ0JBQW1DO01BQW5DLG1DQUFtQztNQUNuQywwREFBMEQ7TUFDMUQ7OztPQUdDO01BSEQ7OztPQUdDO01BQ0QsY0FBYztNQUNkLGtCQUFrQjtJQUNwQjs7RUFHRjtJQUNFLG9DQUFvQztJQUNwQyxzREFBc0Q7RUFDeEQ7O0VBRUE7SUFDRSxtQ0FBbUM7SUFDbkMsc0RBQXNEO0VBQ3hEOztFQUVBO0lBQ0Usc0RBQXNEO0lBQ3RELGdEQUFnRDtFQUNsRDs7RUFFQTtJQUNFLDZCQUE2QjtFQUMvQjtBQUNGIiwiZmlsZSI6InN0ZXBzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU3RlcHNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXN0ZXBzIHtcbiAgICBjb3VudGVyLXJlc2V0OiBzdGVwO1xuICB9XG5cbiAgLm14LXN0ZXBzX19wYW5lbCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmQsIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSk7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgICAgaW5saW5lLXNpemU6IHZhcigtLWNvdW50ZXItc2l6ZSwgdmFyKC0tc3BhY2luZy1sKSk7XG4gICAgICBibG9jay1zaXplOiB2YXIoLS1jb3VudGVyLXNpemUsIHZhcigtLXNwYWNpbmctbCkpO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IHZhcigtLWNvdW50ZXItdG9wLCAwKTtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHotaW5kZXg6IDI7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCBpbmhlcml0KTtcbiAgICAgIGNvdW50ZXItaW5jcmVtZW50OiBzdGVwO1xuICAgICAgY29udGVudDogY291bnRlcihzdGVwKSBcIlwiO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXMpO1xuICAgICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICAgIGlubGluZS1zaXplOiBjYWxjKFxuICAgICAgICB2YXIoLS1jb3VudGVyLXNpemUsIHZhcigtLXNwYWNpbmctbCkpICsgKHZhcigtLWxpbmUtd2lkdGgsIDJweCkgKiAyKVxuICAgICAgKTtcbiAgICAgIGJsb2NrLXNpemU6IGNhbGMoXG4gICAgICAgIHZhcigtLWNvdW50ZXItc2l6ZSwgdmFyKC0tc3BhY2luZy1sKSkgKyAodmFyKC0tbGluZS13aWR0aCwgMnB4KSAqIDIpXG4gICAgICApO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBpbnNldC1ibG9jay1zdGFydDogdmFyKC0tY291bnRlci10b3AsIDApO1xuICAgICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgei1pbmRleDogMztcbiAgICAgIHZpc2liaWxpdHk6IHZhcigtLWNvdW50ZXItdmlzaWJpbGl0eSwgaGlkZGVuKTtcbiAgICB9XG5cbiAgICAmOmxhc3QtY2hpbGQge1xuICAgICAgLS1zcGFjaW5nOiAwO1xuICAgIH1cblxuICAgICY6aGFzKC5teC1zdGVwc19fcGFuZWwtY29udGVudCBoMzpmaXJzdC1jaGlsZCkge1xuICAgICAgLS1jb3VudGVyLXRvcDogLTJweDtcbiAgICB9XG5cbiAgICAmOmhhcygubXgtc3RlcHNfX3BhbmVsLWNvbnRlbnQgaDQ6Zmlyc3QtY2hpbGQpIHtcbiAgICAgIC0tY291bnRlci10b3A6IC00cHg7XG4gICAgfVxuICB9XG5cbiAgLm14LXN0ZXBzX19wYW5lbC1jb250ZW50IHtcbiAgICBwYWRkaW5nLWJsb2NrOiAwIHZhcigtLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctbCkpO1xuICAgIHBhZGRpbmctaW5saW5lLXN0YXJ0OiB2YXIoLS1pbmRlbnQsIHZhcigtLXNwYWNpbmcteHhsKSk7XG4gICAgaW5saW5lLXNpemU6IG1pbigxMDAlLCB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoKSk7XG5cbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogXCJcIjtcbiAgICAgIGlubGluZS1zaXplOiB2YXIoLS1saW5lLXdpZHRoLCAycHgpO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogY2FsYyhcbiAgICAgICAgKHZhcigtLWNvdW50ZXItc2l6ZSwgdmFyKC0tc3BhY2luZy1sKSkgLyAyKSAtXG4gICAgICAgICAgKHZhcigtLWxpbmUtd2lkdGgsIDJweCkgLyAyKVxuICAgICAgKTtcbiAgICAgIGluc2V0LWJsb2NrOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbiAgfVxuXG4gIC5teC1zdGVwcy0tZGFyayB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLXByaW1hcnkpO1xuICAgIC0tY291bnRlci1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgfVxuXG4gIC5teC1zdGVwcy0tc3VwcGxlbWVudGFyeSB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWFjY2VudCk7XG4gICAgLS1jb3VudGVyLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICB9XG5cbiAgLm14LXN0ZXBzLS1maWxsOndoZXJlKDpub3QoOmhhcygubXgtc3RlcHMtLWZpbGwpKSkge1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvdW50ZXItZm9yZWdyb3VuZCwgaW5oZXJpdCk7XG4gIH1cblxuICAubXgtc3RlcHMtLWNvdW50ZXJzIHtcbiAgICAtLWNvdW50ZXItdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0ZXBzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0Usa0JBQWtCO0VBa0RwQjs7SUFoREU7TUFDRSxXQUFXO01BQ1g7Z0RBQzBDO01BRDFDO2dEQUMwQztNQUMxQyw2REFBNkQ7TUFDN0QsbUJBQW1CO01BQ25CLGlCQUFzQztNQUF0QyxzQ0FBc0M7TUFDdEMsZ0JBQXFDO01BQXJDLHFDQUFxQztNQUNyQyxvQkFBd0M7TUFBeEMsd0NBQXdDO01BQ3hDLHFCQUFxQjtNQUNyQixrQkFBa0I7TUFDbEIsVUFBVTtJQUNaOztJQUVBO01BQ0UsbUJBQW1CO01BQ25CLGNBQWlDO01BQWpDLGlDQUFpQztNQUNqQyx1QkFBdUI7TUFDdkIseUJBQXlCO01BQ3pCLGFBQWE7TUFDYiw2QkFBNkI7TUFDN0Isb0NBQW9DO01BQ3BDLGtDQUFrQztNQUNsQzs7T0FFQztNQUZEOztPQUVDO01BQ0Q7O09BRUM7TUFGRDs7T0FFQztNQUNELHVCQUF1QjtNQUN2QixvQkFBd0M7TUFBeEMsd0NBQXdDO01BQ3hDLHFCQUFxQjtNQUNyQixrQkFBa0I7TUFDbEIsVUFBVTtNQUNWLGtCQUE2QztNQUE3Qyw2Q0FBNkM7SUFDL0M7O0lBRUE7TUFDRSxZQUFZO0lBQ2Q7O0lBRUE7TUFDRSx3QkFBbUI7SUFDckI7O0lBRUE7TUFDRSx1QkFBbUI7SUFDckI7O0VBR0Y7SUFDRSxpREFBaUQ7SUFDakQsdURBQXVEO0lBQ3ZELGtEQUFrRDtFQVlwRDs7SUFWRTtNQUNFLFdBQVc7TUFDWCxnQkFBbUM7TUFBbkMsbUNBQW1DO01BQ25DLDBEQUEwRDtNQUMxRDs7T0FFQztNQUZEOztPQUVDO01BQ0QsY0FBYztNQUNkLGtCQUFrQjtJQUNwQjs7RUFHRjtJQUNFLG9DQUFvQztJQUNwQyxzREFBc0Q7RUFDeEQ7O0VBRUE7SUFDRSxtQ0FBbUM7SUFDbkMsc0RBQXNEO0VBQ3hEOztFQUVBO0lBQ0Usc0RBQXNEO0lBQ3RELGdEQUFnRDtFQUNsRDs7RUFFQTtJQUNFLDZCQUE2QjtFQUMvQjtBQUNGIiwiZmlsZSI6InN0ZXBzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogU3RlcHNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXN0ZXBzIHtcbiAgICBjb3VudGVyLXJlc2V0OiBzdGVwO1xuICB9XG5cbiAgLm14LXN0ZXBzX19wYW5lbCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGNvbnRlbnQ6IFwiXCI7XG4gICAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmQsIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSk7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgICAgaW5saW5lLXNpemU6IHZhcigtLWNvdW50ZXItc2l6ZSwgMnJlbSk7XG4gICAgICBibG9jay1zaXplOiB2YXIoLS1jb3VudGVyLXNpemUsIDJyZW0pO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IHZhcigtLWNvdW50ZXItdG9wLCAwKTtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHotaW5kZXg6IDI7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCBpbmhlcml0KTtcbiAgICAgIGNvdW50ZXItaW5jcmVtZW50OiBzdGVwO1xuICAgICAgY29udGVudDogY291bnRlcihzdGVwKSBcIlwiO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLXMpO1xuICAgICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICAgIGlubGluZS1zaXplOiBjYWxjKFxuICAgICAgICB2YXIoLS1jb3VudGVyLXNpemUsIDJyZW0pICsgKHZhcigtLWxpbmUtd2lkdGgsIDJweCkgKiAyKVxuICAgICAgKTtcbiAgICAgIGJsb2NrLXNpemU6IGNhbGMoXG4gICAgICAgIHZhcigtLWNvdW50ZXItc2l6ZSwgMnJlbSkgKyAodmFyKC0tbGluZS13aWR0aCwgMnB4KSAqIDIpXG4gICAgICApO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBpbnNldC1ibG9jay1zdGFydDogdmFyKC0tY291bnRlci10b3AsIDApO1xuICAgICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgei1pbmRleDogMztcbiAgICAgIHZpc2liaWxpdHk6IHZhcigtLWNvdW50ZXItdmlzaWJpbGl0eSwgaGlkZGVuKTtcbiAgICB9XG5cbiAgICAmOmxhc3QtY2hpbGQge1xuICAgICAgLS1zcGFjaW5nOiAwO1xuICAgIH1cblxuICAgICY6aGFzKC5teC1zdGVwc19fcGFuZWwtY29udGVudCBoMzpmaXJzdC1jaGlsZCkge1xuICAgICAgLS1jb3VudGVyLXRvcDogLTJweDtcbiAgICB9XG5cbiAgICAmOmhhcygubXgtc3RlcHNfX3BhbmVsLWNvbnRlbnQgaDQ6Zmlyc3QtY2hpbGQpIHtcbiAgICAgIC0tY291bnRlci10b3A6IC00cHg7XG4gICAgfVxuICB9XG5cbiAgLm14LXN0ZXBzX19wYW5lbC1jb250ZW50IHtcbiAgICBwYWRkaW5nLWJsb2NrOiAwIHZhcigtLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctbCkpO1xuICAgIHBhZGRpbmctaW5saW5lLXN0YXJ0OiB2YXIoLS1pbmRlbnQsIHZhcigtLXNwYWNpbmcteHhsKSk7XG4gICAgaW5saW5lLXNpemU6IG1pbigxMDAlLCB2YXIoLS1jb250YWluZXItbWF4LXdpZHRoKSk7XG5cbiAgICAmOjpiZWZvcmUge1xuICAgICAgY29udGVudDogXCJcIjtcbiAgICAgIGlubGluZS1zaXplOiB2YXIoLS1saW5lLXdpZHRoLCAycHgpO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogY2FsYyhcbiAgICAgICAgKHZhcigtLWNvdW50ZXItc2l6ZSwgMnJlbSkgLyAyKSArICh2YXIoLS1saW5lLXdpZHRoLCAycHgpKVxuICAgICAgKTtcbiAgICAgIGluc2V0LWJsb2NrOiAwO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbiAgfVxuXG4gIC5teC1zdGVwcy0tZGFyayB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLXByaW1hcnkpO1xuICAgIC0tY291bnRlci1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgfVxuXG4gIC5teC1zdGVwcy0tc3VwcGxlbWVudGFyeSB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWFjY2VudCk7XG4gICAgLS1jb3VudGVyLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICB9XG5cbiAgLm14LXN0ZXBzLS1maWxsOndoZXJlKDpub3QoOmhhcygubXgtc3RlcHMtLWZpbGwpKSkge1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvdW50ZXItZm9yZWdyb3VuZCwgaW5oZXJpdCk7XG4gIH1cblxuICAubXgtc3RlcHMtLWNvdW50ZXJzIHtcbiAgICAtLWNvdW50ZXItdmlzaWJpbGl0eTogdmlzaWJsZTtcbiAgfVxufVxuIl19 */

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

@@ -1 +1 @@
-{"version":3,"file":"sticky.entry.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n  root: IntersectionObserver[\"root\"]\n  rootMargin: IntersectionObserver[\"rootMargin\"]\n  thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n  internals_: ElementInternals\n  iO: IntersectionObserver\n  rO?: ResizeObserver\n  offsetPropName?: string\n  root?: IOOptions[\"root\"] = null\n  rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n  thresholds?: IOOptions[\"thresholds\"] = [0]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n  }\n\n  connectedCallback(): void {\n    this.offsetPropName = this.getAttribute(\"offsetpropname\")\n    const options: IOOptions = {\n      root: this.root,\n      rootMargin: this.rootMargin,\n      thresholds: this.thresholds,\n    }\n\n    // Toggle \"is-stuck\" and emit event.\n    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n      const isSticky: boolean = boundingClientRect.y < 0\n      this.classList.toggle(\"is-stuck\", isSticky)\n      const newEvent: CustomEvent<{\n        isSticky: boolean\n        options: IOOptions\n        target: Sticky\n      }> = new CustomEvent(\"sticky-toggle\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isSticky,\n          options,\n          target: this,\n        },\n      })\n      this.dispatchEvent(newEvent)\n    }, options)\n    this.iO.observe(this.trigger)\n\n    // If offsetPropName, record its height.\n    if (!this.offsetPropName) return\n    this.rO = new ResizeObserver(entries => {\n      entries.forEach(({ borderBoxSize }) => {\n        const [{ blockSize }] = borderBoxSize\n        document.body.style.setProperty(\n          this.offsetPropName,\n          `${blockSize.toFixed(1)}px`,\n        )\n      })\n    })\n    this.rO.observe(this)\n  }\n\n  disconnectedCallback(): void {\n    this.iO.unobserve(this.trigger)\n    this.rO.disconnect()\n  }\n\n  get trigger(): HTMLDivElement {\n    let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n    if (!trigger) {\n      trigger = createElement(\n        '<div class=\"sticky__trigger\"></div>',\n      ) as HTMLDivElement\n      this.insertAdjacentElement(\"beforebegin\", trigger)\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-sticky\": Sticky\n  }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACN;AALmB,SAAA,OAAA;AACY,SAAA,aAAA;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIlC,SAAA,aAAa,KAAK;EACzB;AAAA,EAEA,oBAA0B;AACnB,SAAA,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAId,SAAA,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AACzD,YAAA,WAAoB,mBAAmB,IAAI;AAC5C,WAAA,UAAU,OAAO,YAAY,QAAQ;AACpC,YAAA,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,OAC1B,OAAO;AACL,SAAA,GAAG,QAAQ,KAAK,OAAO;AAGxB,QAAA,CAAC,KAAK,eAAgB;AACrB,SAAA,KAAK,IAAI,eAAe,CAAW,YAAA;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,WAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MACzB,CACD;AAAA,IAAA,CACF;AACI,SAAA,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AACtB,SAAA,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG;EACV;AAAA,EAEA,IAAI,UAA0B;AACxB,QAAA,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACF,gBAAA;AAAA,QACR;AAAA,MAAA;AAEG,WAAA,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}
+{"version":3,"file":"sticky.entry.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n  root: IntersectionObserver[\"root\"]\n  rootMargin: IntersectionObserver[\"rootMargin\"]\n  thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n  internals_: ElementInternals\n  iO: IntersectionObserver\n  rO?: ResizeObserver\n  offsetPropName?: string\n  root?: IOOptions[\"root\"] = null\n  rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n  thresholds?: IOOptions[\"thresholds\"] = [0]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n  }\n\n  connectedCallback(): void {\n    this.offsetPropName = this.getAttribute(\"offsetpropname\")\n    const options: IOOptions = {\n      root: this.root,\n      rootMargin: this.rootMargin,\n      thresholds: this.thresholds,\n    }\n\n    // Toggle \"is-stuck\" and emit event.\n    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n      const isSticky: boolean = boundingClientRect.y < 0\n      this.classList.toggle(\"is-stuck\", isSticky)\n      const newEvent: CustomEvent<{\n        isSticky: boolean\n        options: IOOptions\n        target: Sticky\n      }> = new CustomEvent(\"sticky-toggle\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isSticky,\n          options,\n          target: this,\n        },\n      })\n      this.dispatchEvent(newEvent)\n    }, options)\n    this.iO.observe(this.trigger)\n\n    // If offsetPropName, record its height.\n    if (!this.offsetPropName) return\n    this.rO = new ResizeObserver(entries => {\n      entries.forEach(({ borderBoxSize }) => {\n        const [{ blockSize }] = borderBoxSize\n        document.body.style.setProperty(\n          this.offsetPropName,\n          `${blockSize.toFixed(1)}px`,\n        )\n      })\n    })\n    this.rO.observe(this)\n  }\n\n  disconnectedCallback(): void {\n    this.iO.unobserve(this.trigger)\n    this.rO.disconnect()\n  }\n\n  get trigger(): HTMLDivElement {\n    let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n    if (!trigger) {\n      trigger = createElement(\n        '<div class=\"sticky__trigger\"></div>',\n      ) as HTMLDivElement\n      this.insertAdjacentElement(\"beforebegin\", trigger)\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-sticky\": Sticky\n  }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACZ,UAAA;AALF,SAAA,OAA2B;AAC3B,SAAA,aAAuC;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIvC,SAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,SAAK,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAInB,SAAK,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AAC/D,YAAM,WAAoB,mBAAmB,IAAI;AACjD,WAAK,UAAU,OAAO,YAAY,QAAQ;AAC1C,YAAM,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QAAA;AAAA,MACV,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,IAC7B,GAAG,OAAO;AACV,SAAK,GAAG,QAAQ,KAAK,OAAO;AAG5B,QAAI,CAAC,KAAK,eAAgB;AAC1B,SAAK,KAAK,IAAI,eAAe,CAAA,YAAW;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,UAAA,CAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MAE3B,CAAC;AAAA,IACH,CAAC;AACD,SAAK,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AAC3B,SAAK,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG,WAAA;AAAA,EACV;AAAA,EAEA,IAAI,UAA0B;AAC5B,QAAI,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACZ,gBAAU;AAAA,QACR;AAAA,MAAA;AAEF,WAAK,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACA,WAAO;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}

package/dist/build/tabs.entry.js

@@ -1,4 +1,4 @@
-import { D as DropMenu } from "./chunks/drop-menu.entry-BEhZ_Je3.js";
+import { D as DropMenu } from "./chunks/drop-menu.entry-B4TtnC50.js";
 import { c as createElement, m as makeAnchor } from "./chunks/utilities-DXELy_An.js";
 class Tabs extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.entry.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\n\nimport DropMenu, { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\nimport { createElement, makeAnchor } from \"../../../Utility/utilities\"\n\ntype TabsType = {\n  panel: HTMLElement\n  tab: HTMLButtonElement\n  button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  tabs?: Map<string, TabsType>\n  mq: string\n  locationHash?: string\n  tabFocus?: number = 0\n  tabListClasses?: string\n  dropTriggerClasses?: string\n  dropMenuId?: string\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.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.panels.forEach((panel: HTMLDivElement): void => {\n      const id: string = panel.id\n      const name: string = panel.getAttribute(\"aria-label\")\n      const tabTemplate = `<button type=\"button\" role=\"tab\" aria-controls=\"${id}\" aria-selected=\"false\">${name}</button>`\n      const tab = createElement(tabTemplate) as HTMLButtonElement\n      this.tabList.appendChild(tab)\n      const button = createElement(tabTemplate) as HTMLButtonElement\n      this.dropMenuMenu.appendChild(button)\n      if (id && panel && button) {\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n\n    const hashEl: HTMLElement | null = this.locationHash\n      ? this.querySelector(this.locationHash)\n      : null\n    if (hashEl) {\n      this.active = hashEl.id\n    } else if (!this.active) {\n      this.active = this.panels[0].id\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    this.dropMenuTrigger.toggleAttribute(\"hidden\", !matches)\n    this.tabList.toggleAttribute(\"hidden\", matches)\n    if (matches) {\n      this.dropMenuMenu.addEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n        { signal },\n      )\n      this.tabList.removeEventListener(\"click\", this.handleClick)\n      this.tabList.removeEventListener(\"keydown\", this.handleKeydown)\n    } else {\n      this.tabList.addEventListener(\"click\", this.handleClick, { signal })\n      this.tabList.addEventListener(\"keydown\", this.handleKeydown, { signal })\n      this.dropMenuMenu.removeEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n      )\n    }\n  }\n\n  handleKeydown = ({ key }: KeyboardEvent): void => {\n    if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n      if (key === \"ArrowRight\") {\n        this.tabFocus += 1\n        // If we're at the end, go to the start\n        if (this.tabFocus >= this.triggers.length) {\n          this.tabFocus = 0\n        }\n        // Move left\n      } else if (key === \"ArrowLeft\") {\n        this.tabFocus -= 1\n        // If we're at the start, move to the end\n        if (this.tabFocus < 0) {\n          this.tabFocus = this.triggers.length - 1\n        }\n      }\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n      this.triggers[this.tabFocus].focus()\n    }\n  }\n\n  handleClick = (event: MouseEvent): void => {\n    const target = event.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    event.preventDefault()\n    const id: string = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleDropMenuSelect = (event: DropMenuEvent): void => {\n    const target = event.detail.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    const id = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleTabChange = (id: string): void => {\n    this.active = id\n    this.handleUrlParams(id)\n    const { panel, tab, button } = this.tabs.get(id)\n    panel.focus({ preventScroll: true })\n    const newEvent: CustomEvent<{\n      id: string\n      tab: HTMLButtonElement\n      button: HTMLButtonElement\n      panel: HTMLElement\n    }> = new CustomEvent(\"tab-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: { id, tab, button, panel },\n    })\n    this.dispatchEvent(newEvent)\n  }\n\n  get dropMenu(): DropMenu | null {\n    const existingMenu = this.querySelector(\"mx-dropmenu\")\n    if (existingMenu) return existingMenu\n    this.dropTriggerClasses =\n      this.getAttribute(\"dropTriggerClasses\") ||\n      \"mx-button mx-icon mx-icon--chevron-down mx-icon--end\"\n    this.dropMenuId = this.id || makeAnchor(\"tab-drop-menu\")\n    const name = `${this.dropMenuId}-target`\n    const tabDropMenu = new DropMenu()\n    tabDropMenu.setAttribute(\"closeOnClick\", \"true\")\n    const trigger = createElement(`<button\n                  id=\"${name}\"\n                  class=\"mx-drop-menu__trigger ${this.dropTriggerClasses}\"\n                  popovertarget=\"${this.dropMenuId}\"\n                  hidden\n              ></button>`)\n    const menu = createElement(\n      `<div\n                  class=\"mx-drop-menu\"\n                  id=\"${this.dropMenuId}\"\n                  aria-labelledby=\"${name}\"\n                  anchor=\"${name}\"\n                  popover\n                  role=\"tablist\"\n              ></div>`,\n    )\n    tabDropMenu.append(trigger, menu)\n    this.prepend(tabDropMenu)\n    return tabDropMenu\n  }\n\n  get dropMenuMenu(): HTMLDivElement {\n    return this.dropMenu.querySelector('[popover][role=\"tablist\"]')\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    return this.dropMenu.querySelector(\"[popovertarget]\")\n  }\n\n  get tabList(): HTMLDivElement {\n    this.tabListClasses = this.getAttribute(\"tabListClasses\") || \"mx-tabs__list\"\n    const existingTabList: HTMLDivElement = this.querySelector(\n      '[role=\"tablist\"]:not([popover])',\n    )\n    if (existingTabList) return existingTabList\n    const tabList = createElement(\n      `<div class=\"${this.tabListClasses}\" role=\"tablist\" hidden></div>`,\n    ) as HTMLDivElement\n    this.prepend(tabList)\n    return tabList\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.tabList.querySelectorAll('[role=\"tab\"]')\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain [role=\"tab\"]`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll('[role=\"tabpanel\"]')\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain [role=\"tabpanel\"]`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n\n  set active(id: string) {\n    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n      if (key === id) {\n        tab.setAttribute(\"aria-selected\", \"true\")\n        tab.setAttribute(\"tab-index\", \"0\")\n        panel.removeAttribute(\"inert\")\n        this.dropMenuTrigger.textContent = tab.textContent\n      } else {\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"inert\", \"\")\n      }\n    })\n  }\n\n  handleUrlParams = (id: string): void => {\n    const urlParams: URLSearchParams = new URLSearchParams(\n      window.location.search,\n    )\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState(\n      {},\n      \"\",\n      `${window.location.pathname}?${urlParams.toString()}`,\n    )\n  }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tabs.entry.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\n\nimport DropMenu, { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\nimport { createElement, makeAnchor } from \"../../../Utility/utilities\"\n\ntype TabsType = {\n  panel: HTMLElement\n  tab: HTMLButtonElement\n  button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  tabs?: Map<string, TabsType>\n  mq: string\n  locationHash?: string\n  tabFocus?: number = 0\n  tabListClasses?: string\n  dropTriggerClasses?: string\n  dropMenuId?: string\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.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.panels.forEach((panel: HTMLDivElement): void => {\n      const id: string = panel.id\n      const name: string = panel.getAttribute(\"aria-label\")\n      const tabTemplate = `<button type=\"button\" role=\"tab\" aria-controls=\"${id}\" aria-selected=\"false\">${name}</button>`\n      const tab = createElement(tabTemplate) as HTMLButtonElement\n      this.tabList.appendChild(tab)\n      const button = createElement(tabTemplate) as HTMLButtonElement\n      this.dropMenuMenu.appendChild(button)\n      if (id && panel && button) {\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n\n    const hashEl: HTMLElement | null = this.locationHash\n      ? this.querySelector(this.locationHash)\n      : null\n    if (hashEl) {\n      this.active = hashEl.id\n    } else if (!this.active) {\n      this.active = this.panels[0].id\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    const { signal }: AbortController = this.controller\n    this.dropMenuTrigger.toggleAttribute(\"hidden\", !matches)\n    this.tabList.toggleAttribute(\"hidden\", matches)\n    if (matches) {\n      this.dropMenuMenu.addEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n        { signal },\n      )\n      this.tabList.removeEventListener(\"click\", this.handleClick)\n      this.tabList.removeEventListener(\"keydown\", this.handleKeydown)\n    } else {\n      this.tabList.addEventListener(\"click\", this.handleClick, { signal })\n      this.tabList.addEventListener(\"keydown\", this.handleKeydown, { signal })\n      this.dropMenuMenu.removeEventListener(\n        \"drop-menu-select\",\n        this.handleDropMenuSelect,\n      )\n    }\n  }\n\n  handleKeydown = ({ key }: KeyboardEvent): void => {\n    if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n      if (key === \"ArrowRight\") {\n        this.tabFocus += 1\n        // If we're at the end, go to the start\n        if (this.tabFocus >= this.triggers.length) {\n          this.tabFocus = 0\n        }\n        // Move left\n      } else if (key === \"ArrowLeft\") {\n        this.tabFocus -= 1\n        // If we're at the start, move to the end\n        if (this.tabFocus < 0) {\n          this.tabFocus = this.triggers.length - 1\n        }\n      }\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n      this.triggers[this.tabFocus].focus()\n    }\n  }\n\n  handleClick = (event: MouseEvent): void => {\n    const target = event.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    event.preventDefault()\n    const id: string = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleDropMenuSelect = (event: DropMenuEvent): void => {\n    const target = event.detail.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    const id = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleTabChange = (id: string): void => {\n    this.active = id\n    this.handleUrlParams(id)\n    const { panel, tab, button } = this.tabs.get(id)\n    panel.focus({ preventScroll: true })\n    const newEvent: CustomEvent<{\n      id: string\n      tab: HTMLButtonElement\n      button: HTMLButtonElement\n      panel: HTMLElement\n    }> = new CustomEvent(\"tab-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: { id, tab, button, panel },\n    })\n    this.dispatchEvent(newEvent)\n  }\n\n  get dropMenu(): DropMenu | null {\n    const existingMenu = this.querySelector(\"mx-dropmenu\")\n    if (existingMenu) return existingMenu\n    this.dropTriggerClasses =\n      this.getAttribute(\"dropTriggerClasses\") ||\n      \"mx-button mx-icon mx-icon--chevron-down mx-icon--end\"\n    this.dropMenuId = this.id || makeAnchor(\"tab-drop-menu\")\n    const name = `${this.dropMenuId}-target`\n    const tabDropMenu = new DropMenu()\n    tabDropMenu.setAttribute(\"closeOnClick\", \"true\")\n    const trigger = createElement(`<button\n                  id=\"${name}\"\n                  class=\"mx-drop-menu__trigger ${this.dropTriggerClasses}\"\n                  popovertarget=\"${this.dropMenuId}\"\n                  hidden\n              ></button>`)\n    const menu = createElement(\n      `<div\n                  class=\"mx-drop-menu\"\n                  id=\"${this.dropMenuId}\"\n                  aria-labelledby=\"${name}\"\n                  anchor=\"${name}\"\n                  popover\n                  role=\"tablist\"\n              ></div>`,\n    )\n    tabDropMenu.append(trigger, menu)\n    this.prepend(tabDropMenu)\n    return tabDropMenu\n  }\n\n  get dropMenuMenu(): HTMLDivElement {\n    return this.dropMenu.querySelector('[popover][role=\"tablist\"]')\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    return this.dropMenu.querySelector(\"[popovertarget]\")\n  }\n\n  get tabList(): HTMLDivElement {\n    this.tabListClasses = this.getAttribute(\"tabListClasses\") || \"mx-tabs__list\"\n    const existingTabList: HTMLDivElement = this.querySelector(\n      '[role=\"tablist\"]:not([popover])',\n    )\n    if (existingTabList) return existingTabList\n    const tabList = createElement(\n      `<div class=\"${this.tabListClasses}\" role=\"tablist\" hidden></div>`,\n    ) as HTMLDivElement\n    this.prepend(tabList)\n    return tabList\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.tabList.querySelectorAll('[role=\"tab\"]')\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain [role=\"tab\"]`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll('[role=\"tabpanel\"]')\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain [role=\"tabpanel\"]`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n\n  set active(id: string) {\n    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n      if (key === id) {\n        tab.setAttribute(\"aria-selected\", \"true\")\n        tab.setAttribute(\"tab-index\", \"0\")\n        panel.removeAttribute(\"inert\")\n        this.dropMenuTrigger.textContent = tab.textContent\n      } else {\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"inert\", \"\")\n      }\n    })\n  }\n\n  handleUrlParams = (id: string): void => {\n    const urlParams: URLSearchParams = new URLSearchParams(\n      window.location.search,\n    )\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState(\n      {},\n      \"\",\n      `${window.location.pathname}?${urlParams.toString()}`,\n    )\n  }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/utilities.css

@@ -101,6 +101,14 @@
   [hidden] {
     display: none;
   }
+
+  /* Prevent scrolling on the body. */
+  .body--scroll-lock,
+  .body-dialog--open {
+    overflow: hidden;
+    position: fixed;
+    inline-size: 100vw;
+  }
 }
 
 /**
@@ -175,4 +183,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9sYXlvdXQtdXRpbHMuY3NzIiwidXRpbGl0aWVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQ0UsYUFBYTtJQUNiLDRCQUE0QjtFQUs5Qjs7SUFIRTtNQUNFLGdCQUFnQjtJQUNsQjs7RUFHRjtJQUNFLGFBQWE7RUFDZjs7RUFFQTtJQUNFLHFCQUFxQjtJQUFyQix1QkFBcUI7SUFBckIscUJBQXFCO0VBQ3ZCOztFQUVBO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0UsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UseUJBQXlCO0VBQzNCOztFQUVBO0lBQ0Usd0JBQXdCO0VBQzFCOztFQUVBO0lBQ0Usc0JBQXNCO0VBQ3hCOztFQUVBO0lBQ0UsU0FBUztFQUNYOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsaUJBQWlCO0VBQ25COztFQUVBO0lBQ0UsZUFBZTtFQUNqQjs7RUFFQTtJQUNFLGlCQUFpQjtFQUNuQjs7RUFFQTtJQUNFLGtCQUFrQjtFQUNwQjs7RUFFQTtJQUNFLHdDQUF3QztFQUMxQzs7RUFFQTtJQUNFLDBDQUEwQztFQUM1QztBQUNGOztBQzNFQTtFQUNFOzs7SUFHRSxzQ0FBc0M7SUFDdEMsc0JBQXNCO0lBQ3RCLDZCQUE2QjtJQUM3QixTQUFTO0lBQ1QsVUFBVTtFQUNaOztFQUVBOztJQUVFLGVBQWU7SUFDZiwyQkFBMkI7SUFDM0IsY0FBYztJQUNkLGVBQWU7RUFDakI7O0VBRUE7SUFDRSxhQUFhO0VBQ2Y7QUFDRjs7QUFFQTs7RUFFRTs7QUFFRjtJQUVJO0VBREY7TUFFSSxhQUFhO0VBRWpCO0lBREU7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTs7RUFHRjtJQUNFLHdCQUF3QjtFQUsxQjs7SUFIRTs7RUFIRjtNQUlJLHlCQUF5QjtFQUU3QjtJQURFO0lBSUE7O0VBREY7TUFFSSx3QkFBd0I7RUFFNUI7SUFERTtBQUVKOztBQUVBOztFQUVFOztBQUNGO0VBQ0U7SUFDRSxrQ0FBbUM7SUFDbkMsa0JBQWtCO0lBQ2xCLG9CQUFvQjtJQUNwQixrQkFBa0I7O0lBRWxCLHFDQUE4Qzs7SUFBOUMsOENBQThDO0VBQ2hEOztFQUVBO0lBQ0UsbUNBQW1DO0lBQ25DLG1DQUFtQztJQUNuQyxXQUFXO0VBQ2I7QUFDRjs7QUFFQTtFQUNFO0lBQ0UsMkJBQTJCO0VBQzdCOztFQUVBO0lBQ0UsNEJBQTRCO0VBQzlCOztFQUVBO0lBQ0UsMkJBQTJCO0VBQzdCO0FBQ0YiLCJmaWxlIjoidXRpbGl0aWVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5zdGFjayB7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcInN0YWNrXCI7XG5cbiAgICAmID4gKiB7XG4gICAgICBncmlkLWFyZWE6IHN0YWNrO1xuICAgIH1cbiAgfVxuXG4gIC5mbGV4IHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICB9XG5cbiAgLnBsYWNlLWNlbnRlciB7XG4gICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLmFsaWduLS1jZW50ZXIge1xuICAgIG1hcmdpbi1pbmxpbmU6IGF1dG87XG4gIH1cblxuICAuYWxpZ24tLWxlZnQge1xuICAgIG1hcmdpbi1pbmxpbmUtZW5kOiBhdXRvO1xuICB9XG5cbiAgLmFsaWduLS1yaWdodCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxuXG4gIC5hbGlnbi0tYm90dG9tIHtcbiAgICBtYXJnaW4tYmxvY2stc3RhcnQ6IGF1dG87XG4gIH1cblxuICAuYWxpZ24tLXRvcCB7XG4gICAgbWFyZ2luLWJsb2NrLWVuZDogYXV0bztcbiAgfVxuXG4gIC5vcmRlci0tc3RhcnQge1xuICAgIG9yZGVyOiAtMTtcbiAgfVxuXG4gIC5vcmRlci0tMSB7XG4gICAgb3JkZXI6IDE7XG4gIH1cblxuICAub3JkZXItLTIge1xuICAgIG9yZGVyOiAyO1xuICB9XG5cbiAgLm9yZGVyLS0zIHtcbiAgICBvcmRlcjogMztcbiAgfVxuXG4gIC5nYXAtLXMge1xuICAgIGdhcDogdmFyKC0tZ2FwLXMpO1xuICB9XG5cbiAgLmdhcC0tbSB7XG4gICAgZ2FwOiB2YXIoLS1nYXApO1xuICB9XG5cbiAgLmdhcC0tbCB7XG4gICAgZ2FwOiB2YXIoLS1nYXAtbCk7XG4gIH1cblxuICAuZ2FwLS14bCB7XG4gICAgZ2FwOiB2YXIoLS1nYXAteGwpO1xuICB9XG5cbiAgLmdhcC0tc2VjdGlvbi1sIHtcbiAgICBnYXA6IHZhcigtLXNlY3Rpb24tbCwgdmFyKC0tc3BhY2luZy14bCkpO1xuICB9XG5cbiAgLmdhcC0tc2VjdGlvbi14bCB7XG4gICAgZ2FwOiB2YXIoLS1zZWN0aW9uLXhsLCB2YXIoLS1zcGFjaW5nLXV1bCkpO1xuICB9XG59XG4iLCJAaW1wb3J0IFwiX2xheW91dC11dGlscy5jc3NcIjtcblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0udXRpbGl0aWVzIHtcbiAgLmhpZGRlbixcbiAgLnZpc3VhbGx5LWhpZGRlbixcbiAgLnNyLW9ubHkge1xuICAgIGNsaXAtcGF0aDogcG9seWdvbigwIDAsIDAgMCwgMCAwLCAwIDApO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgcG9zaXRpb246IGFic29sdXRlICFpbXBvcnRhbnQ7XG4gICAgbWFyZ2luOiAwO1xuICAgIHBhZGRpbmc6IDA7XG4gIH1cblxuICAudmlzdWFsbHktaGlkZGVuLnZpc3VhbGx5LWhpZGRlbi0tZm9jdXNzYWJsZTpmb2N1cyxcbiAgLnNyLW9ubHkuc3Itb25seS0tZm9jdXNzYWJsZTpmb2N1cyB7XG4gICAgY2xpcC1wYXRoOiBub25lO1xuICAgIHBvc2l0aW9uOiByZXZlcnQgIWltcG9ydGFudDtcbiAgICBtYXJnaW46IHJldmVydDtcbiAgICBwYWRkaW5nOiByZXZlcnQ7XG4gIH1cblxuICBbaGlkZGVuXSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4vKipcbiAqIFJlc3BvbnNpdmUgdXRpbGl0eSBjbGFzc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5tb2JpbGUtb25seSB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5kZXNrdG9wLW9ubHkge1xuICAgIEBtZWRpYSAoLS1sYXJnZS1kb3duKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5wcmludC1vbmx5IHtcbiAgICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cbiAgICBAbWVkaWEgcHJpbnQge1xuICAgICAgZGlzcGxheTogYmxvY2sgIWltcG9ydGFudDtcbiAgICB9XG4gIH1cblxuICAuc2NyZWVuLW9ubHkge1xuICAgIEBtZWRpYSBwcmludCB7XG4gICAgICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogU2tlbGV0b24gYW5kIGxvYWRpbmcgVUkuXG4gKi9cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5za2VsZXRvbiB7XG4gICAgLS1iYWNrZ3JvdW5kOiBoc2woMGRlZyAwJSAwJSAvIDEwJSk7XG4gICAgLS1vcGFjaXR5LWxvdzogMC41O1xuICAgIC0tb3BhY2l0eS1oaWdoOiAwLjc1O1xuICAgIC0tZHVyYXRpb246IDE1MDBtcztcblxuICAgIGFuaW1hdGlvbjogcHVsc2UgdmFyKC0tZHVyYXRpb24pIGVhc2UgaW5maW5pdGU7XG4gIH1cblxuICAuc2tlbGV0b24tLWJnIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICB6LWluZGV4OiAtMTtcbiAgfVxufVxuXG5Aa2V5ZnJhbWVzIHB1bHNlIHtcbiAgMCUge1xuICAgIG9wYWNpdHk6IHZhcigtLW9wYWNpdHktbG93KTtcbiAgfVxuXG4gIDc1JSB7XG4gICAgb3BhY2l0eTogdmFyKC0tb3BhY2l0eS1oaWdoKTtcbiAgfVxuXG4gIDEwMCUge1xuICAgIG9wYWNpdHk6IHZhcigtLW9wYWNpdHktbG93KTtcbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9sYXlvdXQtdXRpbHMuY3NzIiwidXRpbGl0aWVzLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQ0UsYUFBYTtJQUNiLDRCQUE0QjtFQUs5Qjs7SUFIRTtNQUNFLGdCQUFnQjtJQUNsQjs7RUFHRjtJQUNFLGFBQWE7RUFDZjs7RUFFQTtJQUNFLHFCQUFxQjtJQUFyQix1QkFBcUI7SUFBckIscUJBQXFCO0VBQ3ZCOztFQUVBO0lBQ0UsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0UsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UseUJBQXlCO0VBQzNCOztFQUVBO0lBQ0Usd0JBQXdCO0VBQzFCOztFQUVBO0lBQ0Usc0JBQXNCO0VBQ3hCOztFQUVBO0lBQ0UsU0FBUztFQUNYOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsUUFBUTtFQUNWOztFQUVBO0lBQ0UsaUJBQWlCO0VBQ25COztFQUVBO0lBQ0UsZUFBZTtFQUNqQjs7RUFFQTtJQUNFLGlCQUFpQjtFQUNuQjs7RUFFQTtJQUNFLGtCQUFrQjtFQUNwQjs7RUFFQTtJQUNFLHdDQUF3QztFQUMxQzs7RUFFQTtJQUNFLDBDQUEwQztFQUM1QztBQUNGOztBQzNFQTtFQUNFOzs7SUFHRSxzQ0FBc0M7SUFDdEMsc0JBQXNCO0lBQ3RCLDZCQUE2QjtJQUM3QixTQUFTO0lBQ1QsVUFBVTtFQUNaOztFQUVBOztJQUVFLGVBQWU7SUFDZiwyQkFBMkI7SUFDM0IsY0FBYztJQUNkLGVBQWU7RUFDakI7O0VBRUE7SUFDRSxhQUFhO0VBQ2Y7O0VBRUEsbUNBQW1DO0VBQ25DOztJQUVFLGdCQUFnQjtJQUNoQixlQUFlO0lBQ2Ysa0JBQWtCO0VBQ3BCO0FBQ0Y7O0FBRUE7O0VBRUU7O0FBRUY7SUFFSTtFQURGO01BRUksYUFBYTtFQUVqQjtJQURFO0lBSUE7O0VBREY7TUFFSSxhQUFhO0VBRWpCO0lBREU7O0VBR0Y7SUFDRSx3QkFBd0I7RUFLMUI7O0lBSEU7O0VBSEY7TUFJSSx5QkFBeUI7RUFFN0I7SUFERTtJQUlBOztFQURGO01BRUksd0JBQXdCO0VBRTVCO0lBREU7QUFFSjs7QUFFQTs7RUFFRTs7QUFDRjtFQUNFO0lBQ0Usa0NBQW1DO0lBQ25DLGtCQUFrQjtJQUNsQixvQkFBb0I7SUFDcEIsa0JBQWtCOztJQUVsQixxQ0FBOEM7O0lBQTlDLDhDQUE4QztFQUNoRDs7RUFFQTtJQUNFLG1DQUFtQztJQUNuQyxtQ0FBbUM7SUFDbkMsV0FBVztFQUNiO0FBQ0Y7O0FBRUE7RUFDRTtJQUNFLDJCQUEyQjtFQUM3Qjs7RUFFQTtJQUNFLDRCQUE0QjtFQUM5Qjs7RUFFQTtJQUNFLDJCQUEyQjtFQUM3QjtBQUNGIiwiZmlsZSI6InV0aWxpdGllcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAbGF5ZXIgZGVzaWduLXN5c3RlbS51dGlsaXRpZXMge1xuICAuc3RhY2sge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ3JpZC10ZW1wbGF0ZS1hcmVhczogXCJzdGFja1wiO1xuXG4gICAgJiA+ICoge1xuICAgICAgZ3JpZC1hcmVhOiBzdGFjaztcbiAgICB9XG4gIH1cblxuICAuZmxleCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuXG4gIC5wbGFjZS1jZW50ZXIge1xuICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuXG4gIC5hbGlnbi0tY2VudGVyIHtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG5cbiAgLmFsaWduLS1sZWZ0IHtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5hbGlnbi0tcmlnaHQge1xuICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IGF1dG87XG4gIH1cblxuICAuYWxpZ24tLWJvdHRvbSB7XG4gICAgbWFyZ2luLWJsb2NrLXN0YXJ0OiBhdXRvO1xuICB9XG5cbiAgLmFsaWduLS10b3Age1xuICAgIG1hcmdpbi1ibG9jay1lbmQ6IGF1dG87XG4gIH1cblxuICAub3JkZXItLXN0YXJ0IHtcbiAgICBvcmRlcjogLTE7XG4gIH1cblxuICAub3JkZXItLTEge1xuICAgIG9yZGVyOiAxO1xuICB9XG5cbiAgLm9yZGVyLS0yIHtcbiAgICBvcmRlcjogMjtcbiAgfVxuXG4gIC5vcmRlci0tMyB7XG4gICAgb3JkZXI6IDM7XG4gIH1cblxuICAuZ2FwLS1zIHtcbiAgICBnYXA6IHZhcigtLWdhcC1zKTtcbiAgfVxuXG4gIC5nYXAtLW0ge1xuICAgIGdhcDogdmFyKC0tZ2FwKTtcbiAgfVxuXG4gIC5nYXAtLWwge1xuICAgIGdhcDogdmFyKC0tZ2FwLWwpO1xuICB9XG5cbiAgLmdhcC0teGwge1xuICAgIGdhcDogdmFyKC0tZ2FwLXhsKTtcbiAgfVxuXG4gIC5nYXAtLXNlY3Rpb24tbCB7XG4gICAgZ2FwOiB2YXIoLS1zZWN0aW9uLWwsIHZhcigtLXNwYWNpbmcteGwpKTtcbiAgfVxuXG4gIC5nYXAtLXNlY3Rpb24teGwge1xuICAgIGdhcDogdmFyKC0tc2VjdGlvbi14bCwgdmFyKC0tc3BhY2luZy11dWwpKTtcbiAgfVxufVxuIiwiQGltcG9ydCBcIl9sYXlvdXQtdXRpbHMuY3NzXCI7XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5oaWRkZW4sXG4gIC52aXN1YWxseS1oaWRkZW4sXG4gIC5zci1vbmx5IHtcbiAgICBjbGlwLXBhdGg6IHBvbHlnb24oMCAwLCAwIDAsIDAgMCwgMCAwKTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5cbiAgLnZpc3VhbGx5LWhpZGRlbi52aXN1YWxseS1oaWRkZW4tLWZvY3Vzc2FibGU6Zm9jdXMsXG4gIC5zci1vbmx5LnNyLW9ubHktLWZvY3Vzc2FibGU6Zm9jdXMge1xuICAgIGNsaXAtcGF0aDogbm9uZTtcbiAgICBwb3NpdGlvbjogcmV2ZXJ0ICFpbXBvcnRhbnQ7XG4gICAgbWFyZ2luOiByZXZlcnQ7XG4gICAgcGFkZGluZzogcmV2ZXJ0O1xuICB9XG5cbiAgW2hpZGRlbl0ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cblxuICAvKiBQcmV2ZW50IHNjcm9sbGluZyBvbiB0aGUgYm9keS4gKi9cbiAgLmJvZHktLXNjcm9sbC1sb2NrLFxuICAuYm9keS1kaWFsb2ctLW9wZW4ge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIGlubGluZS1zaXplOiAxMDB2dztcbiAgfVxufVxuXG4vKipcbiAqIFJlc3BvbnNpdmUgdXRpbGl0eSBjbGFzc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5tb2JpbGUtb25seSB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5kZXNrdG9wLW9ubHkge1xuICAgIEBtZWRpYSAoLS1sYXJnZS1kb3duKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5wcmludC1vbmx5IHtcbiAgICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cbiAgICBAbWVkaWEgcHJpbnQge1xuICAgICAgZGlzcGxheTogYmxvY2sgIWltcG9ydGFudDtcbiAgICB9XG4gIH1cblxuICAuc2NyZWVuLW9ubHkge1xuICAgIEBtZWRpYSBwcmludCB7XG4gICAgICBkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogU2tlbGV0b24gYW5kIGxvYWRpbmcgVUkuXG4gKi9cbkBsYXllciBkZXNpZ24tc3lzdGVtLnV0aWxpdGllcyB7XG4gIC5za2VsZXRvbiB7XG4gICAgLS1iYWNrZ3JvdW5kOiBoc2woMGRlZyAwJSAwJSAvIDEwJSk7XG4gICAgLS1vcGFjaXR5LWxvdzogMC41O1xuICAgIC0tb3BhY2l0eS1oaWdoOiAwLjc1O1xuICAgIC0tZHVyYXRpb246IDE1MDBtcztcblxuICAgIGFuaW1hdGlvbjogcHVsc2UgdmFyKC0tZHVyYXRpb24pIGVhc2UgaW5maW5pdGU7XG4gIH1cblxuICAuc2tlbGV0b24tLWJnIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICB6LWluZGV4OiAtMTtcbiAgfVxufVxuXG5Aa2V5ZnJhbWVzIHB1bHNlIHtcbiAgMCUge1xuICAgIG9wYWNpdHk6IHZhcigtLW9wYWNpdHktbG93KTtcbiAgfVxuXG4gIDc1JSB7XG4gICAgb3BhY2l0eTogdmFyKC0tb3BhY2l0eS1oaWdoKTtcbiAgfVxuXG4gIDEwMCUge1xuICAgIG9wYWNpdHk6IHZhcigtLW9wYWNpdHktbG93KTtcbiAgfVxufVxuIl19 */

package/package.json

@@ -1,52 +1,20 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.18",
-  "scripts": {
-    "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run dev-vite\" \"npm run dev-storybook\"",
-    "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run build-vite\" \"npm run build-storybook\"",
-    "dev-storybook-html": "storybook dev -p 6006",
-    "dev-storybook-react": "storybook dev -p 6008 -c .storybook-react",
-    "dev-storybook": "concurrently \"npm:dev-storybook-*\"",
-    "build-storybook": "npm run build-storybook-html && npm run build-storybook-react",
-    "build-storybook-html": "storybook build -o dist/storybook",
-    "build-storybook-react": "storybook build -o dist/storybook/react -c .storybook-react",
-    "dev-vite": "vite build -w -m development",
-    "build-vite": "vite build",
-    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && npm run fix-css && npm run fix-js",
-    "lint": "npm run lint-prettier && npm run lint-css && npm run lint-ts && npm run lint-js",
-    "lint-prettier": "prettier --check \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\"",
-    "lint-css": "stylelint \"./**/*.css\"",
-    "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
-    "fix-css": "npm run lint-css -- --fix",
-    "lint-js": "eslint \"./**/*.{ts,tsx}\"",
-    "lint-js-ci": "eslint \"./**/*.{ts,tsx}\" --format gha",
-    "fix-js": "npm run lint-js -- --fix",
-    "lint-ts": "tsc",
-    "test": "npm run test-storybook",
-    "test-vitest": "vitest --run",
-    "test-storybook": "concurrently \"npm:test-storybook-*\"",
-    "test-storybook-html": "test-storybook --maxWorkers=2",
-    "test-storybook-react": "test-storybook --maxWorkers=2 --url http://127.0.0.1:6008 -c .storybook-react",
-    "clean": "rm -rf ./dist",
-    "commit": "git-cz",
-    "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
-    "build-ci": "npm run build",
-    "lint-ci": "npm run lint-prettier && npm run lint-css-ci && npm run lint-ts && npm run lint-js-ci"
-  },
+  "version": "0.0.20",
   "dependencies": {
     "@floating-ui/dom": "^1.7.3",
     "@oddbird/popover-polyfill": "^0.6.1",
-    "@pnx-mixtape/ids-shape": "^0.0.20",
+    "@pnx-mixtape/ids-shape": "^0.0.22",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "classnames": "^2.5.1",
+    "focus-trap": "^7.6.5",
     "js-cookie": "^3.0.5",
     "react": "^19.1.1",
     "react-aria": "^3.42.0",
     "react-dom": "^19.1.1",
-    "react-stately": "^3.40.0",
-    "tabbable": "^6.2.0"
+    "react-stately": "^3.40.0"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^3.0.0",
@@ -58,7 +26,9 @@
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-docs": "^9.1.2",
     "@storybook/addon-links": "^9.1.2",
+    "@storybook/html": "^9.1.7",
     "@storybook/html-vite": "^9.1.2",
+    "@storybook/react": "^9.1.7",
     "@storybook/react-vite": "^9.1.2",
     "@storybook/test-runner": "^0.23.0",
     "@svgr/rollup": "^8.1.0",
@@ -66,6 +36,7 @@
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.5.2",
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/ui": "^3.2.4",
@@ -76,6 +47,7 @@
     "concurrently": "^9.2.0",
     "cz-conventional-changelog": "^3.3.0",
     "drupal-attribute": "^1.1.0",
+    "drupal-twig-extensions": "1.0.0-beta.5",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-gha": "^1.6.0",
@@ -86,6 +58,7 @@
     "globals": "^16.3.0",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",
+    "playwright": "^1.55.0",
     "postcss": "^8.5.6",
     "postcss-design-tokens": "^1.3.0",
     "postcss-inline-svg": "^6.0.0",
@@ -93,14 +66,17 @@
     "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.6.2",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.7",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^39.0.0",
     "stylelint-use-logical-spec": "^5.0.1",
     "tinyglobby": "^0.2.14",
+    "twig": "^1.17.1",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.1",
-    "vite-plugin-twig-drupal": "^1.6.2"
+    "vite": "^7.1.6",
+    "vite-plugin-twig-drupal": "^1.6.2",
+    "wait-on": "^9.0.0"
   },
   "optionalDependencies": {
     "@esbuild/linux-arm64": "^0.25.9",
@@ -127,5 +103,37 @@
     "./tokens": "./src/tokens.js",
     "./dist/*": "./dist/build/*",
     "./src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm dev-vite\" \"pnpm dev-storybook\"",
+    "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm build-vite\" \"pnpm build-storybook\"",
+    "dev-storybook-html": "storybook dev -p 6006",
+    "dev-storybook-react": "storybook dev -p 6008 -c .storybook-react",
+    "dev-storybook": "concurrently \"npm:dev-storybook-*\"",
+    "build-storybook": "pnpm build-storybook-html && pnpm build-storybook-react",
+    "build-storybook-html": "storybook build -o dist/storybook",
+    "build-storybook-react": "storybook build -o dist/storybook/react -c .storybook-react",
+    "dev-vite": "vite build -w -m development",
+    "build-vite": "vite build",
+    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && pnpm fix-css && pnpm fix-js",
+    "lint": "pnpm lint-prettier && pnpm lint-css && pnpm lint-ts && pnpm lint-js",
+    "lint-prettier": "prettier --check \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\"",
+    "lint-css": "stylelint \"./**/*.css\"",
+    "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
+    "fix-css": "pnpm lint-css --fix",
+    "lint-js": "eslint \"./**/*.{ts,tsx}\"",
+    "lint-js-ci": "eslint \"./**/*.{ts,tsx}\" --format gha",
+    "fix-js": "pnpm lint-js --fix",
+    "lint-ts": "tsc",
+    "test": "pnpm test-storybook",
+    "test-vitest": "vitest --run",
+    "test-storybook": "concurrently \"npm:test-storybook-*\"",
+    "test-storybook-html": "test-storybook --maxWorkers=2",
+    "test-storybook-react": "test-storybook --maxWorkers=2 --url http://127.0.0.1:6008 -c .storybook-react",
+    "clean": "rm -rf ./dist",
+    "commit": "git-cz",
+    "http-server": "http-server ./dist/storybook -i -p 3001 --silent",
+    "build-ci": "pnpm build",
+    "lint-ci": "pnpm lint-prettier && pnpm lint-css-ci && pnpm lint-ts && pnpm lint-js-ci"
   }
-}
+}

package/src/Atom/Button/Button.stories.ts

@@ -54,6 +54,7 @@ export const Text: Story = {
 
 export const Link: Story = {
   args: {
+    as: ButtonTypes.LINK,
     href: "#",
   },
 }

package/src/Atom/Button/_buttons-styles.css

@@ -8,7 +8,7 @@
     --background: var(--colour-link);
     --foreground: var(--colour-foreground-reverse);
 
-    &.button--outline {
+    &.mx-button--outline {
       --background: transparent;
       --foreground: var(--colour-primary);
     }
@@ -29,7 +29,7 @@
     --background: var(--colour-error);
     --foreground: var(--colour-foreground-reverse);
 
-    &.button--outline {
+    &.mx-button--outline {
       --background: transparent;
       --foreground: var(--colour-error);
     }
@@ -40,7 +40,7 @@
     --background: var(--colour-foreground-reverse);
     --foreground: var(--colour-foreground);
 
-    &.button--outline {
+    &.mx-button--outline {
       --background: transparent;
       --foreground: var(--colour-foreground-reverse);
     }

package/src/Atom/Button/button.twig

@@ -8,7 +8,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-{% if href is not empty %}
+{% if as == "link" %}
   <a{{ attributes}} href="{{ href }}">
     {{ iconStart }}
     <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>

package/src/Atom/Heading/Heading.tsx

@@ -6,7 +6,7 @@ import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 export type HeadingProps = PropsWithChildren & {
   as?: HeadingTypes
-  modifier?: HeadingStyles
+  modifier?: HeadingTypes | HeadingStyles
   className?: string
   id?: string
 }

package/src/Atom/Link/Link.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Link"
-import { LinkStyles } from "../../enums"
 
 const meta: Meta<typeof Component> = {
   title: "Atom/Link",
@@ -10,9 +9,6 @@ const meta: Meta<typeof Component> = {
     children: "Link",
     to: "http://example.com",
   },
-  argTypes: {
-    modifier: { options: Object.values(LinkStyles), control: "radio" },
-  },
 }
 export default meta
 type Story = StoryObj<typeof meta>
@@ -20,11 +16,11 @@ type Story = StoryObj<typeof meta>
 export const Link: Story = {}
 export const External: Story = {
   args: {
-    modifier: LinkStyles.EXTERNAL,
+    external: true,
   },
 }
 export const More: Story = {
   args: {
-    modifier: LinkStyles.MORE,
+    more: true,
   },
 }

package/src/Atom/Link/Link.tsx

@@ -1,12 +1,13 @@
 import { JSX, ComponentPropsWithoutRef, PropsWithChildren } from "react"
 import classNames from "classnames"
 import { useLinkComponent } from "../../react"
-import { LinkStyles } from "../../enums"
 
 type LinkProps = ComponentPropsWithoutRef<"a"> &
   PropsWithChildren & {
     to: string
-    modifier?: LinkStyles
+    more?: boolean
+    external?: boolean
+    download?: boolean
     className?: string
     allyText?: string
   }
@@ -15,7 +16,9 @@ const Link = ({
   to,
   children,
   allyText,
-  modifier,
+  more,
+  external,
+  download,
   className = "mx-link",
   ...props
 }: LinkProps): JSX.Element => {
@@ -25,7 +28,9 @@ const Link = ({
     <LinkComponent
       to={to}
       className={classNames(className, {
-        [`mx-link--${modifier}`]: modifier,
+        "mx-link--more": more,
+        "mx-link--external": external,
+        "mx-link--download": download,
       })}
       {...props}
     >

package/src/Atom/Link/_links.css

@@ -31,6 +31,7 @@
 
   .mx-link--more {
     font-weight: var(--font-weight-bold);
+    display: inline-flex;
 
     &:hover .mx-icon {
       transform: translateX(3px);

package/src/Component/Accordion/Accordion.stories.ts

@@ -43,6 +43,25 @@ type Story = StoryObj<AccordionType>
 
 export const Accordion: Story = {}
 
+export const DefaultOpen: Story = {
+  args: {
+    ...meta.args,
+    items: [
+      AccordionItem({
+        title: "Music",
+        content:
+          "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      }),
+      AccordionItem({
+        title: "Performances (default open)",
+        open: true,
+        content:
+          "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
+      }),
+    ],
+  },
+}
+
 export const ToggleAll: Story = {
   args: {
     toggleAll: true,

package/src/Component/Accordion/Accordion.stories.tsx

@@ -1,21 +1,51 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
-import { AccordionStyles, HeadingLevels } from "../../enums"
 import Component from "./Accordion"
+import AccordionTitle from "./Components/AccordionTitle"
+import AccordionContent from "./Components/AccordionContent"
+import AccordionTitleIcon from "./Components/AccordionTitleIcon"
 import "./accordion.css"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ["autodocs"],
   args: {
-    title: "Open me!",
-    modifier: AccordionStyles.DIVIDED,
-    children:
-      "I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.",
-  },
-  argTypes: {
-    modifier: { options: Object.values(AccordionStyles) },
-    headingLevel: { options: Object.values(HeadingLevels) },
+    children: (
+      <>
+        <AccordionTitle>
+          Open me!
+          <AccordionTitleIcon />
+        </AccordionTitle>
+        <AccordionContent>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread
+          dreamcatcher everyday carry lumbersexual, iceland cardigan swag
+          chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch
+          cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier
+          health goth.
+        </AccordionContent>
+      </>
+    ),
   },
 }
 export default meta
 export const Accordion: StoryObj<typeof meta> = {}
+
+export const HeadingLevel: StoryObj<typeof meta> = {
+  args: {
+    children: (
+      <>
+        <AccordionTitle headingLevel={HeadingTypes.TWO}>
+          Open me!
+          <AccordionTitleIcon />
+        </AccordionTitle>
+        <AccordionContent>
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread
+          dreamcatcher everyday carry lumbersexual, iceland cardigan swag
+          chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch
+          cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier
+          health goth.
+        </AccordionContent>
+      </>
+    ),
+  },
+}