@pnx-mixtape/mxds 0.0.11 → 0.0.13

package/dist/build/accordion.css

@@ -46,11 +46,6 @@
   .mx-accordions__toggle-all {
     margin-inline-start: auto;
   }
-
-  .mx-accordion {
-    contain: layout;
-  }
-
     .mx-accordion .mx-accordion__toggle {
       cursor: pointer;
       inline-size: 100%;
@@ -59,6 +54,9 @@
     .mx-accordion:is(> h2, > h3, > h4, > h5, > h6) {
       all: unset;
     }
+        .mx-accordion:is([open], [data-open="true"]) > .mx-accordion__toggle .mx-icon--chevron-down {
+          transform: rotate(180deg);
+        }
 
   .mx-accordion--divided {
     border-block-end: 1px solid
@@ -74,17 +72,9 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+      gap: var(--spacing-xxs);
     }
-
-      .mx-accordion--divided .mx-accordion__toggle .mx-button--icon-only {
-        flex-shrink: 0;
-        margin-inline-start: var(--spacing-xxs);
-      }
-        .mx-accordion--divided:is([open], [data-open="true"]) .mx-accordion__toggle .mx-button--icon-only {
-          transform: rotate(180deg);
-        }
-
-      .mx-accordion--divided:is([open], [data-open="true"]) .mx-accordion__content {
+      .mx-accordion--divided:is([open], [data-open="true"]) > .mx-accordion__content {
         border-block-start: 1px solid
           var(--line-colour, var(--colour-border));
         border-block-start: var(--line-width, 1px) solid
@@ -105,4 +95,4 @@
     }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCOztJQUVBO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7O0VBRUE7SUFDRSxlQUFlO0VBVWpCOztJQVJFO01BQ0UsZUFBZTtNQUNmLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFVBQVU7SUFDWjs7RUFHRjtJQUNFOzhDQUMwQztJQUQxQzs4Q0FDMEM7RUE2QjVDOztJQTNCRTtNQUNFLDBEQUEwRDtNQUMxRCxpQkFBNEM7TUFBNUMsNENBQTRDO01BQzVDLGFBQWE7TUFDYiw4QkFBOEI7TUFDOUIsbUJBQW1CO0lBTXJCOztNQUpFO1FBQ0UsY0FBYztRQUNkLHVDQUF1QztNQUN6QztRQUtFO1VBQ0UseUJBQXlCO1FBQzNCOztNQUdGO1FBQ0U7a0RBQzBDO1FBRDFDO2tEQUMwQztRQUMxQywwREFBMEQ7UUFDMUQsaUJBQTRDO1FBQTVDLDRDQUE0QztNQUM5QztBQUdOOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJhY2NvcmRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBBY2NvcmRpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIGRldGFpbHMge1xuICAgICYgc3VtbWFyeSB7XG4gICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG5cbiAgICAgICY6aXMoOjotd2Via2l0LWRldGFpbHMtbWFya2VyLCA6Om1hcmtlcikge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIDppcyhteC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdiwgbXgtYWNjb3JkaW9ubW9iaWxlKSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICA6d2hlcmUoOmlzKGRpdi5teC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdikpIHtcbiAgICAmIC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xuICAgICAgYm9yZGVyOiBpbml0aWFsO1xuICAgICAgcGFkZGluZzogaW5pdGlhbDtcbiAgICB9XG5cbiAgICAmIC5teC1hY2NvcmRpb25fX2NvbnRlbnRbaW5lcnRdIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtYWNjb3JkaW9uX190aXRsZSB7XG4gICAgbWFyZ2luLWJsb2NrLWVuZDogdmFyKC0tc3BhY2luZy1tKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZmxvdzogcm93IHdyYXA7XG4gICAgZ2FwOiB2YXIoLS1zcGFjaW5nLXMpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtYWNjb3JkaW9uc19fdG9nZ2xlLWFsbCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxuXG4gIC5teC1hY2NvcmRpb24ge1xuICAgIGNvbnRhaW46IGxheW91dDtcblxuICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIH1cblxuICAgICY6aXMoPiBoMiwgPiBoMywgPiBoNCwgPiBoNSwgPiBoNikge1xuICAgICAgYWxsOiB1bnNldDtcbiAgICB9XG4gIH1cblxuICAubXgtYWNjb3JkaW9uLS1kaXZpZGVkIHtcbiAgICBib3JkZXItYmxvY2stZW5kOiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgJiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1ob3Jpem9udGFsLXBhZGRpbmcsIDApO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAgICYgLm14LWJ1dHRvbi0taWNvbi1vbmx5IHtcbiAgICAgICAgZmxleC1zaHJpbms6IDA7XG4gICAgICAgIG1hcmdpbi1pbmxpbmUtc3RhcnQ6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmlzKFtvcGVuXSwgW2RhdGEtb3Blbj1cInRydWVcIl0pIHtcbiAgICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgICAgJiAubXgtYnV0dG9uLS1pY29uLW9ubHkge1xuICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgJiAubXgtYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgICAgYm9yZGVyLWJsb2NrLXN0YXJ0OiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1hY2NvcmRpb24ge1xuICAgICYgLm14LWFjY29yZGlvbl9fY29udGVudCB7XG4gICAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjY29yZGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7SUFFSTtNQUNFLHFCQUFxQjtJQU12Qjs7TUFKRTtRQUNFLGFBQWE7UUFDYixXQUFXO01BQ2I7O0VBSUo7SUFDRSxjQUFjO0VBQ2hCO0lBR0U7TUFDRSx3QkFBZ0I7U0FBaEIscUJBQWdCO2NBQWhCLGdCQUFnQjtNQUNoQixjQUFjO01BQ2Qsa0JBQWtCO01BQ2xCLGlGQUFtQjtNQUFuQixtQkFBbUI7TUFDbkIsZ0NBQWU7TUFBZixlQUFlO01BQ2YsVUFBZ0I7TUFBaEIsZ0JBQWdCO0lBQ2xCOztJQUVBO01BQ0UsYUFBYTtJQUNmO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGtDQUFrQztJQUNsQyxhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLHFCQUFxQjtJQUNyQixtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7SUFHRTtNQUNFLGVBQWU7TUFDZixpQkFBaUI7SUFDbkI7O0lBRUE7TUFDRSxVQUFVO0lBQ1o7UUFJSTtVQUNFLHlCQUF5QjtRQUMzQjs7RUFLTjtJQUNFOzhDQUMwQztJQUQxQzs4Q0FDMEM7RUFtQjVDOztJQWpCRTtNQUNFLDBEQUEwRDtNQUMxRCxpQkFBNEM7TUFBNUMsNENBQTRDO01BQzVDLGFBQWE7TUFDYiw4QkFBOEI7TUFDOUIsbUJBQW1CO01BQ25CLHVCQUF1QjtJQUN6QjtNQUdFO1FBQ0U7a0RBQzBDO1FBRDFDO2tEQUMwQztRQUMxQywwREFBMEQ7UUFDMUQsaUJBQTRDO1FBQTVDLDRDQUE0QztNQUM5QztBQUdOOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSx5QkFBeUI7SUFDM0I7QUFFSiIsImZpbGUiOiJhY2NvcmRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBBY2NvcmRpb25cbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5kZWZhdWx0cyB7XG4gIGRldGFpbHMge1xuICAgICYgc3VtbWFyeSB7XG4gICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG5cbiAgICAgICY6aXMoOjotd2Via2l0LWRldGFpbHMtbWFya2VyLCA6Om1hcmtlcikge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIDppcyhteC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdiwgbXgtYWNjb3JkaW9ubW9iaWxlKSB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gIH1cblxuICA6d2hlcmUoOmlzKGRpdi5teC1hY2NvcmRpb24sIG14LWFjY29yZGlvbmRpdikpIHtcbiAgICAmIC5teC1hY2NvcmRpb25fX3RvZ2dsZSB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBmb250LXNpemU6IGluaGVyaXQ7XG4gICAgICBiYWNrZ3JvdW5kOiBpbml0aWFsO1xuICAgICAgYm9yZGVyOiBpbml0aWFsO1xuICAgICAgcGFkZGluZzogaW5pdGlhbDtcbiAgICB9XG5cbiAgICAmIC5teC1hY2NvcmRpb25fX2NvbnRlbnRbaW5lcnRdIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtYWNjb3JkaW9uX190aXRsZSB7XG4gICAgbWFyZ2luLWJsb2NrLWVuZDogdmFyKC0tc3BhY2luZy1tKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZmxvdzogcm93IHdyYXA7XG4gICAgZ2FwOiB2YXIoLS1zcGFjaW5nLXMpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtYWNjb3JkaW9uc19fdG9nZ2xlLWFsbCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxuXG4gIC5teC1hY2NvcmRpb24ge1xuICAgICYgLm14LWFjY29yZGlvbl9fdG9nZ2xlIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIH1cblxuICAgICY6aXMoPiBoMiwgPiBoMywgPiBoNCwgPiBoNSwgPiBoNikge1xuICAgICAgYWxsOiB1bnNldDtcbiAgICB9XG5cbiAgICAmOmlzKFtvcGVuXSwgW2RhdGEtb3Blbj1cInRydWVcIl0pIHtcbiAgICAgICYgPiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgICAmIC5teC1pY29uLS1jaGV2cm9uLWRvd24ge1xuICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAubXgtYWNjb3JkaW9uLS1kaXZpZGVkIHtcbiAgICBib3JkZXItYmxvY2stZW5kOiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICB2YXIoLS1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgJiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1ob3Jpem9udGFsLXBhZGRpbmcsIDApO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBnYXA6IHZhcigtLXNwYWNpbmcteHhzKTtcbiAgICB9XG5cbiAgICAmOmlzKFtvcGVuXSwgW2RhdGEtb3Blbj1cInRydWVcIl0pIHtcbiAgICAgICYgPiAubXgtYWNjb3JkaW9uX19jb250ZW50IHtcbiAgICAgICAgYm9yZGVyLWJsb2NrLXN0YXJ0OiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgMCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi8qKlxuICogUHJpbnQgc3R5bGVzaGVldFxuICovXG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1hY2NvcmRpb24ge1xuICAgICYgLm14LWFjY29yZGlvbl9fY29udGVudCB7XG4gICAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxufVxuIl19 */

package/dist/build/accordion.entry.js

@@ -1,60 +1,4 @@
-import { m as makeAnchor } from "./chunks/utilities-B4YZb689.js";
-class Accordion extends HTMLElement {
-  constructor() {
-    super();
-    this.handleOpen = () => {
-      if (!this.details) return;
-      this.details.open = true;
-    };
-    this.handleClose = () => {
-      if (!this.details) return;
-      this.details.open = false;
-    };
-    this.handleHash = () => {
-      const { hash } = window.location;
-      if (hash && hash === `#${this.details?.id}`) {
-        this.handleOpen();
-      }
-    };
-    this.generatedId = () => {
-      const string = this.trigger?.textContent?.trim();
-      return !string ? "" : makeAnchor(string);
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.details || !this.trigger) return;
-    const { signal } = this.controller;
-    document.addEventListener("beforeprint", this.handleOpen, {
-      signal
-    });
-    document.addEventListener("afterprint", this.handleClose, {
-      signal
-    });
-    this.handleHash();
-    document.addEventListener("hashchange", this.handleHash, { signal });
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  get details() {
-    const details = this.querySelector("details");
-    if (!details) {
-      throw new Error(`${this.localName} must contain a <details> element.`);
-    }
-    details.id = details.id || this.generatedId();
-    return details;
-  }
-  get trigger() {
-    const trigger = this.querySelector("summary");
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a <summary> element.`);
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-accordion", Accordion);
+import "./chunks/Accordion-DSze7pxN.js";
 class AccordionGroup extends HTMLElement {
   constructor() {
     super();

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.entry.js","sources":["../../src/Component/Accordion/Elements/Accordion.ts","../../src/Component/Accordion/Elements/AccordionGroup.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.details || !this.trigger) return\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\"beforeprint\", this.handleOpen, {\n      signal,\n    })\n    document.addEventListener(\"afterprint\", this.handleClose, {\n      signal,\n    })\n    this.handleHash()\n    document.addEventListener(\"hashchange\", this.handleHash, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleOpen = (): void => {\n    if (!this.details) return\n    this.details.open = true\n  }\n\n  handleClose = (): void => {\n    if (!this.details) return\n    this.details.open = false\n  }\n\n  handleHash = (): void => {\n    const { hash }: Location = window.location\n    if (hash && hash === `#${this.details?.id}`) {\n      this.handleOpen()\n    }\n  }\n\n  get details(): HTMLDetailsElement | null {\n    const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n    if (!details) {\n      throw new Error(`${this.localName} must contain a <details> element.`)\n    }\n    details.id = details.id || this.generatedId()\n    return details\n  }\n\n  get trigger(): HTMLElement | null {\n    const trigger: HTMLElement | null = this.querySelector(\"summary\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <summary> element.`)\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion\": Accordion\n  }\n}\n","/**\n * Accordion Group\n * @file Support opening and closing all.\n */\n\nexport default class AccordionGroup extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return\n    this.collapseTrigger.disabled = true\n    const { signal }: AbortController = this.controller\n    this.addEventListener(\"click\", this.handleClick, {\n      signal,\n    })\n    this.accordions.forEach(details =>\n      details.addEventListener(\"toggle\", this.handleToggle, {\n        signal,\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleClick = ({ target }) => {\n    if (target === this.expandTrigger) {\n      this.handleExpand()\n    }\n    if (target === this.collapseTrigger) {\n      this.handleCollapse()\n    }\n  }\n\n  handleExpand = () => {\n    this.accordions.forEach(detail => (detail.open = true))\n    this.expandTrigger.disabled = true\n    this.collapseTrigger.disabled = false\n  }\n\n  handleCollapse = () => {\n    this.accordions.forEach(detail => (detail.open = false))\n    this.expandTrigger.disabled = false\n    this.collapseTrigger.disabled = true\n  }\n\n  handleToggle = () => {\n    this.expandTrigger.disabled = [...this.accordions].every(\n      details => details.open === true,\n    )\n    this.collapseTrigger.disabled = [...this.accordions].every(\n      details => details.open !== true,\n    )\n  }\n\n  get accordions(): NodeListOf<HTMLDetailsElement> | null {\n    const accordions: NodeListOf<HTMLDetailsElement> | null =\n      this.querySelectorAll(\"details\")\n    if (!accordions.length) {\n      throw new Error(\n        `${this.localName} must contain at least one <details> element.`,\n      )\n    }\n    return accordions\n  }\n\n  get expandTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \"button[data-expand]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-expand> element.`,\n      )\n    }\n    return trigger\n  }\n\n  get collapseTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \"button[data-collapse]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-collapse> element.`,\n      )\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-accordion-group\", AccordionGroup)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion-group\": AccordionGroup\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;ACtE/C,MAAqB,uBAAuB,YAAY;AAAA,EAItD,cAAc;AACN;AAuBM,SAAA,cAAA,CAAC,EAAE,aAAa;AACxB,UAAA,WAAW,KAAK,eAAe;AACjC,aAAK,aAAa;AAAA,MACpB;AACI,UAAA,WAAW,KAAK,iBAAiB;AACnC,aAAK,eAAe;AAAA,MACtB;AAAA,IAAA;AAGF,SAAA,eAAe,MAAM;AACnB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,IAAK;AACtD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,iBAAiB,MAAM;AACrB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,KAAM;AACvD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,eAAe,MAAM;AACnB,WAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACjD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAE9B,WAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACnD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAAA,IAC9B;AAjDK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACpB,QAAA,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,gBAAgB,WAAW;AAC1B,UAAA,EAAE,OAAO,IAAqB,KAAK;AACpC,SAAA,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CACtB,YAAA,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAgCA,IAAI,aAAoD;AAChD,UAAA,aACJ,KAAK,iBAAiB,SAAS;AAC7B,QAAA,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,sBAAsB,cAAc;"}
+{"version":3,"file":"accordion.entry.js","sources":["../../src/Component/Accordion/Elements/AccordionGroup.ts"],"sourcesContent":["/**\n * Accordion Group\n * @file Support opening and closing all.\n */\n\nexport default class AccordionGroup extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.accordions || !this.expandTrigger || !this.collapseTrigger) return\n    this.collapseTrigger.disabled = true\n    const { signal }: AbortController = this.controller\n    this.addEventListener(\"click\", this.handleClick, {\n      signal,\n    })\n    this.accordions.forEach(details =>\n      details.addEventListener(\"toggle\", this.handleToggle, {\n        signal,\n      }),\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleClick = ({ target }) => {\n    if (target === this.expandTrigger) {\n      this.handleExpand()\n    }\n    if (target === this.collapseTrigger) {\n      this.handleCollapse()\n    }\n  }\n\n  handleExpand = () => {\n    this.accordions.forEach(detail => (detail.open = true))\n    this.expandTrigger.disabled = true\n    this.collapseTrigger.disabled = false\n  }\n\n  handleCollapse = () => {\n    this.accordions.forEach(detail => (detail.open = false))\n    this.expandTrigger.disabled = false\n    this.collapseTrigger.disabled = true\n  }\n\n  handleToggle = () => {\n    this.expandTrigger.disabled = [...this.accordions].every(\n      details => details.open === true,\n    )\n    this.collapseTrigger.disabled = [...this.accordions].every(\n      details => details.open !== true,\n    )\n  }\n\n  get accordions(): NodeListOf<HTMLDetailsElement> | null {\n    const accordions: NodeListOf<HTMLDetailsElement> | null =\n      this.querySelectorAll(\"details\")\n    if (!accordions.length) {\n      throw new Error(\n        `${this.localName} must contain at least one <details> element.`,\n      )\n    }\n    return accordions\n  }\n\n  get expandTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \"button[data-expand]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-expand> element.`,\n      )\n    }\n    return trigger\n  }\n\n  get collapseTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \"button[data-collapse]\",\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button data-collapse> element.`,\n      )\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-accordion-group\", AccordionGroup)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion-group\": AccordionGroup\n  }\n}\n"],"names":[],"mappings":";AAKA,MAAqB,uBAAuB,YAAY;AAAA,EAItD,cAAc;AACN;AAuBM,SAAA,cAAA,CAAC,EAAE,aAAa;AACxB,UAAA,WAAW,KAAK,eAAe;AACjC,aAAK,aAAa;AAAA,MACpB;AACI,UAAA,WAAW,KAAK,iBAAiB;AACnC,aAAK,eAAe;AAAA,MACtB;AAAA,IAAA;AAGF,SAAA,eAAe,MAAM;AACnB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,IAAK;AACtD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,iBAAiB,MAAM;AACrB,WAAK,WAAW,QAAQ,CAAW,WAAA,OAAO,OAAO,KAAM;AACvD,WAAK,cAAc,WAAW;AAC9B,WAAK,gBAAgB,WAAW;AAAA,IAAA;AAGlC,SAAA,eAAe,MAAM;AACnB,WAAK,cAAc,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACjD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAE9B,WAAK,gBAAgB,WAAW,CAAC,GAAG,KAAK,UAAU,EAAE;AAAA,QACnD,CAAA,YAAW,QAAQ,SAAS;AAAA,MAAA;AAAA,IAC9B;AAjDK,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACpB,QAAA,CAAC,KAAK,cAAc,CAAC,KAAK,iBAAiB,CAAC,KAAK,gBAAiB;AACtE,SAAK,gBAAgB,WAAW;AAC1B,UAAA,EAAE,OAAO,IAAqB,KAAK;AACpC,SAAA,iBAAiB,SAAS,KAAK,aAAa;AAAA,MAC/C;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAAA,MAAQ,CACtB,YAAA,QAAQ,iBAAiB,UAAU,KAAK,cAAc;AAAA,QACpD;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAgCA,IAAI,aAAoD;AAChD,UAAA,aACJ,KAAK,iBAAiB,SAAS;AAC7B,QAAA,CAAC,WAAW,QAAQ;AACtB,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,gBAA0C;AAC5C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,kBAA4C;AAC9C,UAAM,UAAoC,KAAK;AAAA,MAC7C;AAAA,IAAA;AAEF,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,sBAAsB,cAAc;"}

package/dist/build/button.css

@@ -5,7 +5,7 @@
 @layer design-system.atoms {
   .mx-button {
     --outline-offset: 0.0625rem;
-    --outline-width: 0.25rem;
+    --outline-width: 0.125rem;
 
     display: inline-flex;
     inline-size: -moz-fit-content;
@@ -129,4 +129,4 @@
     }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjtJQUNyQix3QkFBb0I7O0lBRXBCLG9CQUFvQjtJQUNwQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLHdDQUF3QztJQUN4QyxvREFBb0Q7SUFDcEQsb0NBQW9DO0lBQ3BDLCtCQUErQjtJQUMvQixrQ0FBa0M7SUFDbEM7cURBQ2lEO0lBRGpEO3FEQUNpRDtJQUNqRCxvREFBb0Q7SUFDcEQsMERBQTBEO0lBQzFELDJEQUEyRDtJQUMzRCw2REFBNkQ7SUFDN0Qsa0RBQWtEO0lBQ2xELDBCQUEwQjtJQUMxQjs7O3VCQUdtQjtFQVdyQjs7SUFURTtNQUNFLGVBQWU7TUFDZiwwQkFBMEI7SUFDNUI7O0lBRUE7TUFDRSxtQkFBbUI7TUFDbkIsWUFBWTtJQUNkOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLHVCQUF1QjtFQUN6Qjs7RUFFQTtJQUNFLG9DQUFvQztJQUNwQyxzQ0FBc0M7RUFDeEM7O0VBRUE7SUFDRSxzQ0FBc0M7SUFDdEMsdUNBQXVDO0lBQ3ZDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLDhCQUE4QjtJQUM5Qiw2QkFBNkI7SUFDN0IsVUFBVTtJQUNWLHlDQUF5QztJQUN6QyxnQkFBZ0I7SUFDaEIsZUFBZTtFQVdqQjs7SUFURTtNQUNFLGlCQUFpQjtNQUNqQixnQkFBZ0I7TUFDaEIsbUNBQTJCO2NBQTNCLDJCQUEyQjtJQUM3Qjs7SUFFQTtNQUNFLHFCQUFxQjtNQUFyQix1QkFBcUI7TUFBckIscUJBQXFCO0lBQ3ZCO0FBRUo7O0FDMUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSwyQ0FBMkM7SUFDM0MsbUNBQW1DO0lBQ25DLDhDQUE4QztFQU1oRDs7SUFKRTtNQUNFLHlCQUF5QjtNQUN6QixtQ0FBbUM7SUFDckM7O0VBR0Y7SUFDRSxtQkFBbUI7SUFDbkIsZ0RBQWdEO0lBQ2hELCtCQUErQjtFQUtqQzs7SUFIRTtNQUNFLCtCQUErQjtJQUNqQzs7RUFHRjtJQUNFLG9EQUFvRDtJQUNwRCw0Q0FBNEM7SUFDNUMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDRDQUE0QztJQUM5Qzs7RUFHRjtJQUNFLHNEQUFzRDtJQUN0RCw4Q0FBOEM7SUFDOUMsc0NBQXNDO0VBTXhDOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDhDQUE4QztJQUNoRDtBQUVKIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJ1dHRvbnNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5hdG9tcyB7XG4gIC5teC1idXR0b24ge1xuICAgIC0tb3V0bGluZS1vZmZzZXQ6IDFweDtcbiAgICAtLW91dGxpbmUtd2lkdGg6IDRweDtcblxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBnYXA6IHZhcigtLWJ1dHRvbi1nYXAsIHZhcigtLXNwYWNpbmctcykpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tYnV0dG9uLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplKSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgIHZhcigtLWJ1dHRvbi1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cywgdmFyKC0tYm9yZGVyLXJhZGl1cy1sKSk7XG4gICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpO1xuICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpO1xuICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIGNvbG9yLFxuICAgICAgMC4ycyBiYWNrZ3JvdW5kLWNvbG9yLFxuICAgICAgMC4ycyBib3JkZXItY29sb3I7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICAgIG9wYWNpdHk6IDAuMztcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1mdWxsLXdpZHRoIHtcbiAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuXG4gIC5teC1idXR0b24tLWxhcmdlIHtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctbCk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1zbWFsbCB7XG4gICAgLS1idXR0b24tZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG4gICAgLS12ZXJ0aWNhbC1wYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXh4eHMpO1xuICAgIC0taG9yaXpvbnRhbC1wYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXMpO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0taWNvbi1vbmx5IHtcbiAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy14bCk7XG4gICAgYmxvY2stc2l6ZTogdmFyKC0tc3BhY2luZy14bCk7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXJvdW5kKTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGZsZXgtd3JhcDogd3JhcDtcblxuICAgICY6OmJlZm9yZSB7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgICBtYXNrLXNpemU6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWljb24pIHtcbiAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbi0tZGFyayB7XG4gICAgLS1idXR0b24tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuXG4gICAgJi5idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLXByaW1hcnkpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWxpZ2h0IHtcbiAgICBib3JkZXI6IHRyYW5zcGFyZW50O1xuICAgIGNvbG9yOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWRlc3RydWN0aXZlIHtcbiAgICAtLWJ1dHRvbi1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWVycm9yLWZvcmVncm91bmQpO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWVycm9yLWZvcmVncm91bmQpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLmJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3ItZm9yZWdyb3VuZCk7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0td2hpdGUge1xuICAgIC0tYnV0dG9uLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQpO1xuXG4gICAgJi5idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgfVxuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjtJQUNyQix5QkFBb0I7O0lBRXBCLG9CQUFvQjtJQUNwQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLHdDQUF3QztJQUN4QyxvREFBb0Q7SUFDcEQsb0NBQW9DO0lBQ3BDLCtCQUErQjtJQUMvQixrQ0FBa0M7SUFDbEM7cURBQ2lEO0lBRGpEO3FEQUNpRDtJQUNqRCxvREFBb0Q7SUFDcEQsMERBQTBEO0lBQzFELDJEQUEyRDtJQUMzRCw2REFBNkQ7SUFDN0Qsa0RBQWtEO0lBQ2xELDBCQUEwQjtJQUMxQjs7O3VCQUdtQjtFQVdyQjs7SUFURTtNQUNFLGVBQWU7TUFDZiwwQkFBMEI7SUFDNUI7O0lBRUE7TUFDRSxtQkFBbUI7TUFDbkIsWUFBWTtJQUNkOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLHVCQUF1QjtFQUN6Qjs7RUFFQTtJQUNFLG9DQUFvQztJQUNwQyxzQ0FBc0M7RUFDeEM7O0VBRUE7SUFDRSxzQ0FBc0M7SUFDdEMsdUNBQXVDO0lBQ3ZDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLDhCQUE4QjtJQUM5Qiw2QkFBNkI7SUFDN0IsVUFBVTtJQUNWLHlDQUF5QztJQUN6QyxnQkFBZ0I7SUFDaEIsZUFBZTtFQVdqQjs7SUFURTtNQUNFLGlCQUFpQjtNQUNqQixnQkFBZ0I7TUFDaEIsbUNBQTJCO2NBQTNCLDJCQUEyQjtJQUM3Qjs7SUFFQTtNQUNFLHFCQUFxQjtNQUFyQix1QkFBcUI7TUFBckIscUJBQXFCO0lBQ3ZCO0FBRUo7O0FDMUVBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSwyQ0FBMkM7SUFDM0MsbUNBQW1DO0lBQ25DLDhDQUE4QztFQU1oRDs7SUFKRTtNQUNFLHlCQUF5QjtNQUN6QixtQ0FBbUM7SUFDckM7O0VBR0Y7SUFDRSxtQkFBbUI7SUFDbkIsZ0RBQWdEO0lBQ2hELCtCQUErQjtFQUtqQzs7SUFIRTtNQUNFLCtCQUErQjtJQUNqQzs7RUFHRjtJQUNFLG9EQUFvRDtJQUNwRCw0Q0FBNEM7SUFDNUMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDRDQUE0QztJQUM5Qzs7RUFHRjtJQUNFLHNEQUFzRDtJQUN0RCw4Q0FBOEM7SUFDOUMsc0NBQXNDO0VBTXhDOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLDhDQUE4QztJQUNoRDtBQUVKIiwiZmlsZSI6ImJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJ1dHRvbnNcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5hdG9tcyB7XG4gIC5teC1idXR0b24ge1xuICAgIC0tb3V0bGluZS1vZmZzZXQ6IDFweDtcbiAgICAtLW91dGxpbmUtd2lkdGg6IDJweDtcblxuICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBnYXA6IHZhcigtLWJ1dHRvbi1nYXAsIHZhcigtLXNwYWNpbmctcykpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tYnV0dG9uLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplKSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigtLWZvbnQtd2VpZ2h0LWJvbGQpO1xuICAgIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LXVpKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDJweCkgc29saWRcbiAgICAgIHZhcigtLWJ1dHRvbi1saW5lLWNvbG91ciwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cywgdmFyKC0tYm9yZGVyLXJhZGl1cy1sKSk7XG4gICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHMpKTtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpO1xuICAgIGNvbG9yOiB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpO1xuICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIGNvbG9yLFxuICAgICAgMC4ycyBiYWNrZ3JvdW5kLWNvbG9yLFxuICAgICAgMC4ycyBib3JkZXItY29sb3I7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICAgIG9wYWNpdHk6IDAuMztcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1mdWxsLXdpZHRoIHtcbiAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxuXG4gIC5teC1idXR0b24tLWxhcmdlIHtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctbCk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1zbWFsbCB7XG4gICAgLS1idXR0b24tZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG4gICAgLS12ZXJ0aWNhbC1wYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXh4eHMpO1xuICAgIC0taG9yaXpvbnRhbC1wYWRkaW5nOiB2YXIoLS1zcGFjaW5nLXMpO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0taWNvbi1vbmx5IHtcbiAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy14bCk7XG4gICAgYmxvY2stc2l6ZTogdmFyKC0tc3BhY2luZy14bCk7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXJvdW5kKTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIGZsZXgtd3JhcDogd3JhcDtcblxuICAgICY6OmJlZm9yZSB7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgICBtYXNrLXNpemU6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWljb24pIHtcbiAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbi0tZGFyayB7XG4gICAgLS1idXR0b24tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuXG4gICAgJi5idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLXByaW1hcnkpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWxpZ2h0IHtcbiAgICBib3JkZXI6IHRyYW5zcGFyZW50O1xuICAgIGNvbG9yOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWRlc3RydWN0aXZlIHtcbiAgICAtLWJ1dHRvbi1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWVycm9yLWZvcmVncm91bmQpO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWVycm9yLWZvcmVncm91bmQpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG5cbiAgICAmLmJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZXJyb3ItZm9yZWdyb3VuZCk7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0td2hpdGUge1xuICAgIC0tYnV0dG9uLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQpO1xuXG4gICAgJi5idXR0b24tLW91dGxpbmUge1xuICAgICAgLS1iYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICAgIC0tZm9yZWdyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/build/chunks/Accordion-DSze7pxN.js

@@ -0,0 +1,61 @@
+import { m as makeAnchor } from "./utilities-B4YZb689.js";
+class Accordion extends HTMLElement {
+  constructor() {
+    super();
+    this.handleOpen = () => {
+      if (!this.details) return;
+      this.details.open = true;
+    };
+    this.handleClose = () => {
+      if (!this.details) return;
+      this.details.open = false;
+    };
+    this.handleHash = () => {
+      const { hash } = window.location;
+      if (hash && hash === `#${this.details?.id}`) {
+        this.handleOpen();
+      }
+    };
+    this.generatedId = () => {
+      const string = this.trigger?.textContent?.trim();
+      return !string ? "" : makeAnchor(string);
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    if (!this.details || !this.trigger) return;
+    const { signal } = this.controller;
+    document.addEventListener("beforeprint", this.handleOpen, {
+      signal
+    });
+    document.addEventListener("afterprint", this.handleClose, {
+      signal
+    });
+    this.handleHash();
+    document.addEventListener("hashchange", this.handleHash, { signal });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  get details() {
+    const details = this.querySelector("details");
+    if (!details) {
+      throw new Error(`${this.localName} must contain a <details> element.`);
+    }
+    details.id = details.id || this.generatedId();
+    return details;
+  }
+  get trigger() {
+    const trigger = this.querySelector("summary");
+    if (!trigger) {
+      throw new Error(`${this.localName} must contain a <summary> element.`);
+    }
+    return trigger;
+  }
+}
+customElements.define("mx-accordion", Accordion);
+export {
+  Accordion as A
+};
+//# sourceMappingURL=Accordion-DSze7pxN.js.map

package/dist/build/chunks/Accordion-DSze7pxN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion-DSze7pxN.js","sources":["../../../src/Component/Accordion/Elements/Accordion.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.details || !this.trigger) return\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\"beforeprint\", this.handleOpen, {\n      signal,\n    })\n    document.addEventListener(\"afterprint\", this.handleClose, {\n      signal,\n    })\n    this.handleHash()\n    document.addEventListener(\"hashchange\", this.handleHash, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleOpen = (): void => {\n    if (!this.details) return\n    this.details.open = true\n  }\n\n  handleClose = (): void => {\n    if (!this.details) return\n    this.details.open = false\n  }\n\n  handleHash = (): void => {\n    const { hash }: Location = window.location\n    if (hash && hash === `#${this.details?.id}`) {\n      this.handleOpen()\n    }\n  }\n\n  get details(): HTMLDetailsElement | null {\n    const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n    if (!details) {\n      throw new Error(`${this.localName} must contain a <details> element.`)\n    }\n    details.id = details.id || this.generatedId()\n    return details\n  }\n\n  get trigger(): HTMLElement | null {\n    const trigger: HTMLElement | null = this.querySelector(\"summary\")\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a <summary> element.`)\n    }\n    return trigger\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordion\": Accordion\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;"}

package/dist/build/filters.entry.js

@@ -0,0 +1,137 @@
+import { A as Accordion } from "./chunks/Accordion-DSze7pxN.js";
+class AccordionMobile extends Accordion {
+  constructor() {
+    super();
+    this.handleBreakpoint = ({
+      matches
+    }) => {
+      if (!this.details) return;
+      this.details.toggleAttribute("open", !matches);
+    };
+    this.mq = this.getAttribute("mq") || "(max-width: 720px)";
+  }
+  connectedCallback() {
+    this.handleBreakpoint(this.breakpoint);
+    const { signal } = this.controller;
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  get breakpoint() {
+    return window.matchMedia(this.mq);
+  }
+}
+customElements.define("mx-accordionmobile", AccordionMobile);
+const _Filters = class _Filters extends HTMLElement {
+  constructor() {
+    super();
+    this.handleClose = (event) => {
+      if (!this.details) return;
+      this.details.open = false;
+      event.preventDefault();
+    };
+    this.handleShow = (event) => {
+      event.preventDefault();
+      const wrapper = this.showBtn.previousElementSibling;
+      wrapper.removeAttribute("hidden");
+      const lastVisible = wrapper.previousElementSibling;
+      const input = lastVisible.querySelector("input");
+      if (!input) return;
+      input.focus({ preventScroll: true });
+      setTimeout(() => {
+        this.showBtn.setAttribute("hidden", "");
+      }, 100);
+    };
+    this.handleReset = () => {
+      this.entries.forEach((entry, key) => {
+        this.entries.set(key, { ...entry, count: null });
+        if (entry.counter) entry.counter.textContent = "";
+      });
+      this.setAttribute("count", "0");
+    };
+    this.handleCounters = () => {
+      const formData = new FormData(this.form, this.submitBtn);
+      this.entries.forEach((entry, key) => {
+        const { length } = formData.getAll(key).filter(Boolean);
+        const count = length > 0 ? length : null;
+        this.entries.set(key, { ...entry, count });
+        if (entry.counter) entry.counter.textContent = count?.toString() || "";
+      });
+      const totalCount = [...this.entries].filter(([, item]) => item.count).length;
+      this.setAttribute("count", totalCount.toString());
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    if (!this.items) return;
+    const { signal } = this.controller;
+    this.closeBtn?.addEventListener("click", this.handleClose, {
+      signal
+    });
+    this.showBtn?.addEventListener("click", this.handleShow, {
+      signal
+    });
+    this.handleCounters();
+    this.addEventListener("change", this.handleCounters, { signal });
+    this.form?.addEventListener("submit", this.handleCounters, { signal });
+    this.form?.addEventListener("reset", this.handleReset, { signal });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "count" && oldValue !== newValue) {
+      const qualifier = parseInt(newValue, 10) > 0;
+      this.resetBtn?.toggleAttribute("disabled", !qualifier);
+      this.submitBtn?.toggleAttribute("disabled", !qualifier);
+      if (!this.allCounter) return;
+      this.allCounter.textContent = qualifier ? newValue : "";
+    }
+  }
+  get items() {
+    const items = this.querySelectorAll(".mx-filter-item");
+    if (!items) {
+      throw new Error(
+        `${this.localName} must contain a .mx-filter-item element.`
+      );
+    }
+    this.entries = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const key = item.querySelector("input, select")?.getAttribute("name");
+      this.entries.set(key, {
+        item,
+        counter: item.querySelector("[data-counter]")
+      });
+    });
+    return items;
+  }
+  get details() {
+    return this.querySelector("mx-accordionmobile > details");
+  }
+  get closeBtn() {
+    return this.details?.querySelector("button[data-close]");
+  }
+  get form() {
+    return this.querySelector("form");
+  }
+  get resetBtn() {
+    return this.querySelector("button[type='reset']");
+  }
+  get submitBtn() {
+    return this.querySelector("button[type='submit']");
+  }
+  get showBtn() {
+    return this.querySelector("button[data-show]");
+  }
+  get allCounter() {
+    return this.querySelector("[data-counters]");
+  }
+};
+_Filters.observedAttributes = ["count"];
+let Filters = _Filters;
+customElements.define("mx-filters", Filters);
+//# sourceMappingURL=filters.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filters.entry.js","sources":["../../src/Component/Accordion/Elements/AccordionMobile.ts","../../src/Component/Filters/Elements/Filters.ts"],"sourcesContent":["/**\n * AccordionMobile\n * @file Support a mobile only <details> element, that opens at a breakpoint.\n */\n\nimport Accordion from \"./Accordion\"\n\nexport default class AccordionMobile extends Accordion {\n  mq: string\n  toggleAttribute!: Element[\"toggleAttribute\"]\n\n  constructor() {\n    super()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    this.handleBreakpoint(this.breakpoint)\n    const { signal }: AbortController = this.controller\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (!this.details) return\n    this.details.toggleAttribute(\"open\", !matches)\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-accordionmobile\", AccordionMobile)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-accordionmobile\": AccordionMobile\n  }\n}\n","/**\n * Filters\n * @file Support filter count elements and closing the \"right\" variant on mobile..\n */\n\nimport \"../../Accordion/Elements/Accordion\"\nimport \"../../Accordion/Elements/AccordionMobile\"\n\ntype EntryType = {\n  item: HTMLElement\n  counter?: HTMLSpanElement\n  count?: number\n}\n\nexport default class Filters extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  entries?: Map<string, EntryType>\n\n  static observedAttributes = [\"count\"]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.items) return\n\n    const { signal }: AbortController = this.controller\n    this.closeBtn?.addEventListener(\"click\", this.handleClose, {\n      signal,\n    })\n    this.showBtn?.addEventListener(\"click\", this.handleShow, {\n      signal,\n    })\n\n    this.handleCounters()\n    this.addEventListener(\"change\", this.handleCounters, { signal })\n    this.form?.addEventListener(\"submit\", this.handleCounters, { signal })\n    this.form?.addEventListener(\"reset\", this.handleReset, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string,\n    newValue: string,\n  ): void {\n    if (name === \"count\" && oldValue !== newValue) {\n      const qualifier = parseInt(newValue, 10) > 0\n      this.resetBtn?.toggleAttribute(\"disabled\", !qualifier)\n      this.submitBtn?.toggleAttribute(\"disabled\", !qualifier)\n      if (!this.allCounter) return\n      this.allCounter.textContent = qualifier ? newValue : \"\"\n    }\n  }\n\n  handleClose = (event: MouseEvent): void => {\n    if (!this.details) return\n    this.details.open = false\n    event.preventDefault()\n  }\n\n  handleShow = (event: MouseEvent): void => {\n    event.preventDefault()\n    const wrapper = this.showBtn.previousElementSibling\n    wrapper.removeAttribute(\"hidden\")\n    const lastVisible = wrapper.previousElementSibling\n    const input = lastVisible.querySelector(\"input\")\n    if (!input) return\n    input.focus({ preventScroll: true })\n    setTimeout(() => {\n      this.showBtn.setAttribute(\"hidden\", \"\")\n    }, 100)\n  }\n\n  handleReset = (): void => {\n    this.entries.forEach((entry, key): void => {\n      this.entries.set(key, { ...entry, count: null })\n      if (entry.counter) entry.counter.textContent = \"\"\n    })\n    this.setAttribute(\"count\", \"0\")\n  }\n\n  handleCounters = (): void => {\n    const formData = new FormData(this.form, this.submitBtn)\n    this.entries.forEach((entry, key): void => {\n      const { length } = formData.getAll(key).filter(Boolean)\n      const count = length > 0 ? length : null\n      this.entries.set(key, { ...entry, count })\n      if (entry.counter) entry.counter.textContent = count?.toString() || \"\"\n    })\n\n    const totalCount = [...this.entries].filter(([, item]) => item.count).length\n    this.setAttribute(\"count\", totalCount.toString())\n  }\n\n  get items(): NodeListOf<HTMLElement> | null {\n    const items: NodeListOf<HTMLElement> =\n      this.querySelectorAll(\".mx-filter-item\")\n    if (!items) {\n      throw new Error(\n        `${this.localName} must contain a .mx-filter-item element.`,\n      )\n    }\n    this.entries = new Map()\n    items.forEach(item => {\n      const key = item.querySelector(\"input, select\")?.getAttribute(\"name\")\n      this.entries.set(key, {\n        item,\n        counter: item.querySelector(\"[data-counter]\"),\n      })\n    })\n    return items\n  }\n\n  get details(): HTMLDetailsElement | null {\n    return this.querySelector(\"mx-accordionmobile > details\")\n  }\n\n  get closeBtn(): HTMLButtonElement | null {\n    return this.details?.querySelector(\"button[data-close]\")\n  }\n\n  get form(): HTMLFormElement | null {\n    return this.querySelector(\"form\")\n  }\n\n  get resetBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[type='reset']\")\n  }\n\n  get submitBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[type='submit']\")\n  }\n\n  get showBtn(): HTMLButtonElement | null {\n    return this.querySelector(\"button[data-show]\")\n  }\n\n  get allCounter(): HTMLSpanElement | null {\n    return this.querySelector(\"[data-counters]\")\n  }\n}\n\ncustomElements.define(\"mx-filters\", Filters)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-filters\": Filters\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/header.css

@@ -41,6 +41,7 @@
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
+    align-items: center;
   }
 
   .mx-header__brand {
@@ -88,6 +89,7 @@
 
   .mx-header__search {
     position: absolute;
+    z-index: 2;
     inset-block-start: 2px;
     inset-inline-start: 0;
     inline-size: 100%;
@@ -112,21 +114,34 @@
         0.2s opacity var(--ease),
         0.2s visibility var(--ease);
     }
+      @media (min-width: 720px) {
 
     .mx-header__search input {
-      max-inline-size: 150px;
+        max-inline-size: 150px;
     }
+      }
 
   /**
    * Primary Header Stacked
    */
+    @media (min-width: 720px) {
   .mx-header__nav-inner {
-    display: flex;
+      display: flex;
   }
+    }
 
   .mx-header__nav-right {
-    margin-inline-start: auto;
+    margin-block: var(--spacing-m);
   }
+
+    @media (min-width: 720px) {
+
+  .mx-header__nav-right {
+      margin-inline-start: auto;
+      margin-block: 0;
+      padding-block: 4px;
+  }
+    }
 }
 
 @media print {
@@ -135,4 +150,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90b2dnbGVzLmNzcyIsIl9oZWFkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IseUNBQXlDO0lBQ3pDLDRCQUF1QjtJQUN2QixrQkFBa0I7SUFDbEIsVUFBVTtFQWFaOztJQVhFO0VBUEY7TUFRSSxhQUFhO0VBVWpCO0lBVEU7O0lBRUE7TUFDRSx5QkFBeUI7SUFDM0I7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTtBQUVKOztBQzlCQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYiwrQkFBK0I7RUFDakM7O0VBRUE7SUFDRSxhQUFhO0lBQ2IsaUNBQWlDO0lBQ2pDLG1CQUFtQjtJQUNuQix1QkFBdUI7RUFDekI7O0VBRUE7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSxhQUFhO0lBQ2IsZ0NBQWdDO0lBQ2hDLG1CQUFtQjtFQUNyQjs7RUFFQTtJQUNFLGlCQUFpQjtJQUNqQjs7aUNBRTZCO0VBaUIvQjs7SUFmRTs7RUFORjtNQU9JLFVBQVU7TUFDVixrQkFBa0I7TUFDbEIsaUJBQWlCO01BQ2pCLGdCQUFnQjtFQVdwQjtJQVZFOztJQUVBO01BQ0UsYUFBYTtNQUNiLFVBQVU7TUFDVixrQkFBa0I7TUFDbEI7O21DQUU2QjtJQUMvQjs7RUFHRjtJQUNFLGtCQUFrQjtJQUNsQixzQkFBc0I7SUFDdEIscUJBQXFCO0lBQ3JCLGlCQUFpQjtJQUNqQjs7aUNBRTZCO0VBbUIvQjs7SUFqQkU7O0VBVEY7TUFVSSxhQUFhO01BQ2Isa0JBQWtCO01BQ2xCLGlCQUFpQjtFQWNyQjtJQWJFOztJQUVBO01BQ0UsVUFBVTtNQUNWLGtCQUFrQjtNQUNsQjs7bUNBRTZCO0lBQy9COztJQUVBO01BQ0Usc0JBQXNCO0lBQ3hCOztFQUdGOztJQUVFO0VBQ0Y7SUFDRSxhQUFhO0VBQ2Y7O0VBRUE7SUFDRSx5QkFBeUI7RUFDM0I7QUFDRjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoiaGVhZGVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2xvYmFsIEhlYWRlclxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtaGVhZGVyX190b2dnbGVzIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tdG9nZ2xlLWdhcCwgdmFyKC0tc3BhY2luZy14cykpO1xuICAgIHBhZGRpbmctaW5saW5lLWVuZDogMnB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuXG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuXG4gICAgJiAubXgtYnV0dG9uLS1zZWNvbmRhcnkge1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICB9XG5cbiAgICAmIFtoaWRkZW5dIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgLmdsb2JhbC1uYXYtdXAtb25seSB7XG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtZG93bikge1xuICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG4gIH1cbn1cbiIsIi8qKlxuICogUHJpbWFyeSBIZWFkZXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWhlYWRlcl9faW5uZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogMWZyIGF1dG87XG4gIH1cblxuICAubXgtaGVhZGVyX19icmFuZCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLWJyYW5kLWdhcCwgdmFyKC0tZ2FwKSk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hbWUge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gIH1cblxuICAubXgtaGVhZGVyX19tYWluIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tbWFpbi1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19uYXYge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgei1pbmRleDogMjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgICAgYmxvY2stc2l6ZTogYXV0bztcbiAgICB9XG5cbiAgICAmW2luZXJ0XSB7XG4gICAgICBibG9jay1zaXplOiAwO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgICAgMC4ycyB2aXNpYmlsaXR5IHZhcigtLWVhc2UpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZWFkZXJfX3NlYXJjaCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGluc2V0LWJsb2NrLXN0YXJ0OiAycHg7XG4gICAgaW5zZXQtaW5saW5lLXN0YXJ0OiAwO1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgIH1cblxuICAgICZbaW5lcnRdIHtcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG4gICAgICB0cmFuc2l0aW9uOlxuICAgICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcbiAgICB9XG5cbiAgICAmIGlucHV0IHtcbiAgICAgIG1heC1pbmxpbmUtc2l6ZTogMTUwcHg7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFByaW1hcnkgSGVhZGVyIFN0YWNrZWRcbiAgICovXG4gIC5teC1oZWFkZXJfX25hdi1pbm5lciB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hdi1yaWdodCB7XG4gICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtaGVhZGVyIC5teC1oZWFkZXJfX25hdiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90b2dnbGVzLmNzcyIsIl9oZWFkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IseUNBQXlDO0lBQ3pDLDRCQUF1QjtJQUN2QixrQkFBa0I7SUFDbEIsVUFBVTtFQWFaOztJQVhFO0VBUEY7TUFRSSxhQUFhO0VBVWpCO0lBVEU7O0lBRUE7TUFDRSx5QkFBeUI7SUFDM0I7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTtBQUVKOztBQzlCQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYiwrQkFBK0I7SUFDL0IsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0UsYUFBYTtJQUNiLGlDQUFpQztJQUNqQyxtQkFBbUI7SUFDbkIsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UsYUFBYTtFQUNmOztFQUVBO0lBQ0UsYUFBYTtJQUNiLGdDQUFnQztJQUNoQyxtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSxpQkFBaUI7SUFDakI7O2lDQUU2QjtFQWlCL0I7O0lBZkU7O0VBTkY7TUFPSSxVQUFVO01BQ1Ysa0JBQWtCO01BQ2xCLGlCQUFpQjtNQUNqQixnQkFBZ0I7RUFXcEI7SUFWRTs7SUFFQTtNQUNFLGFBQWE7TUFDYixVQUFVO01BQ1Ysa0JBQWtCO01BQ2xCOzttQ0FFNkI7SUFDL0I7O0VBR0Y7SUFDRSxrQkFBa0I7SUFDbEIsVUFBVTtJQUNWLHNCQUFzQjtJQUN0QixxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCOztpQ0FFNkI7RUFxQi9COztJQW5CRTs7RUFWRjtNQVdJLGFBQWE7TUFDYixrQkFBa0I7TUFDbEIsaUJBQWlCO0VBZ0JyQjtJQWZFOztJQUVBO01BQ0UsVUFBVTtNQUNWLGtCQUFrQjtNQUNsQjs7bUNBRTZCO0lBQy9CO01BR0U7O0lBREY7UUFFSSxzQkFBc0I7SUFFMUI7TUFERTs7RUFJSjs7SUFFRTtJQUVBO0VBREY7TUFFSSxhQUFhO0VBRWpCO0lBREU7O0VBR0Y7SUFDRSw4QkFBOEI7RUFPaEM7O0lBTEU7O0VBSEY7TUFJSSx5QkFBeUI7TUFDekIsZUFBZTtNQUNmLGtCQUFrQjtFQUV0QjtJQURFO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6ImhlYWRlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdsb2JhbCBIZWFkZXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWhlYWRlcl9fdG9nZ2xlcyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLXRvZ2dsZS1nYXAsIHZhcigtLXNwYWNpbmcteHMpKTtcbiAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDJweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgei1pbmRleDogMTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cblxuICAgICYgLm14LWJ1dHRvbi0tc2Vjb25kYXJ5IHtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgfVxuXG4gICAgJiBbaGlkZGVuXSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5nbG9iYWwtbmF2LXVwLW9ubHkge1xuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LWRvd24pIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG4iLCIvKipcbiAqIFByaW1hcnkgSGVhZGVyXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5teC1oZWFkZXJfX2lubmVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmciBhdXRvO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19icmFuZCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLWJyYW5kLWdhcCwgdmFyKC0tZ2FwKSk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hbWUge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gIH1cblxuICAubXgtaGVhZGVyX19tYWluIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tbWFpbi1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19uYXYge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIHRyYW5zaXRpb246XG4gICAgICAwLjJzIG9wYWNpdHkgdmFyKC0tZWFzZSksXG4gICAgICAwLjJzIHZpc2liaWxpdHkgdmFyKC0tZWFzZSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgei1pbmRleDogMjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgICAgYmxvY2stc2l6ZTogYXV0bztcbiAgICB9XG5cbiAgICAmW2luZXJ0XSB7XG4gICAgICBibG9jay1zaXplOiAwO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgICAgMC4ycyB2aXNpYmlsaXR5IHZhcigtLWVhc2UpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZWFkZXJfX3NlYXJjaCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgaW5zZXQtYmxvY2stc3RhcnQ6IDJweDtcbiAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgdHJhbnNpdGlvbjpcbiAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgIDAuMnMgdmlzaWJpbGl0eSB2YXIoLS1lYXNlKTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaW5saW5lLXNpemU6IGF1dG87XG4gICAgfVxuXG4gICAgJltpbmVydF0ge1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgIHRyYW5zaXRpb246XG4gICAgICAgIDAuMnMgb3BhY2l0eSB2YXIoLS1lYXNlKSxcbiAgICAgICAgMC4ycyB2aXNpYmlsaXR5IHZhcigtLWVhc2UpO1xuICAgIH1cblxuICAgICYgaW5wdXQge1xuICAgICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgICAgbWF4LWlubGluZS1zaXplOiAxNTBweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogUHJpbWFyeSBIZWFkZXIgU3RhY2tlZFxuICAgKi9cbiAgLm14LWhlYWRlcl9fbmF2LWlubmVyIHtcbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cblxuICAubXgtaGVhZGVyX19uYXYtcmlnaHQge1xuICAgIG1hcmdpbi1ibG9jazogdmFyKC0tc3BhY2luZy1tKTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuICAgICAgbWFyZ2luLWJsb2NrOiAwO1xuICAgICAgcGFkZGluZy1ibG9jazogNHB4O1xuICAgIH1cbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtaGVhZGVyIC5teC1oZWFkZXJfX25hdiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuIl19 */

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

@@ -15,13 +15,23 @@ class InPageNavigation extends HTMLElement {
   }
   connectedCallback() {
     if (!this.menu || !this.headings) return;
-    this.headings.forEach((heading) => {
-      const listItem = this.generateListItem(heading);
-      const link = this.generateAnchor(heading);
-      this.items.push({ link, heading });
-      listItem.appendChild(link);
-      this.menu?.appendChild(listItem);
-    });
+    if (!this.links.length) {
+      this.headings.forEach((heading) => {
+        const listItem = this.generateListItem(heading);
+        const link = this.generateAnchor(heading);
+        this.items.push({ link, heading });
+        listItem.appendChild(link);
+        this.menu?.appendChild(listItem);
+      });
+    } else {
+      this.links.forEach((link) => {
+        const heading = this.container.querySelector(
+          link.href
+        );
+        if (!heading) return;
+        this.items.push({ link, heading });
+      });
+    }
     const { signal } = this.controller;
     this.menu.addEventListener(
       "click",
@@ -73,7 +83,7 @@ class InPageNavigation extends HTMLElement {
     const targetID = id || this.generatedId(heading);
     if (!id) heading.id = targetID;
     const item = createElement(
-      `<a href="#${targetID}" class="mx-icon mx-icon--chevron-right">${linkText}</a>`
+      `<a href="#${targetID}"><span class="mx-icon mx-icon--chevron-right"></span><span>${linkText}</span></a>`
     );
     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=\"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;"}
+{"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    if (!this.links.length) {\n      // Build links if not provided.\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    } else {\n      this.links.forEach((link: HTMLAnchorElement) => {\n        const heading: HTMLHeadingElement = this.container.querySelector(\n          link.href,\n        )\n        if (!heading) return\n        this.items.push({ link, heading })\n      })\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}\"><span class=\"mx-icon mx-icon--chevron-right\"></span><span>${linkText}</span></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":"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"}