@pnx-mixtape/mxds 0.0.15 → 0.0.16

package/dist/build/global-alert.entry.js

@@ -1 +1,68 @@
-import{c as t,m as e}from"./chunks/utilities-CE6xwgqF.js";class o extends HTMLElement{constructor(){super(),this.handleClose=()=>{this.controller.abort(),this.remove(),this.localStorage="true";const t=new CustomEvent("GlobalAlert-close",{bubbles:!0,cancelable:!0,detail:{id:this.id,target:this}});this.dispatchEvent(t)},this.internals_=this.attachInternals(),this.controller=new AbortController}connectedCallback(){if(!this.container)return;if(this.id=this.id||this.generatedId(),this.localStorage)return this.controller.abort(),void this.remove();const{signal:t}=this.controller;this.close?.addEventListener("click",this.handleClose,{signal:t})}disconnectedCallback(){this.controller.abort(),this.close.remove()}get localStorage(){return localStorage.getItem(this.id)}set localStorage(t){localStorage.setItem(this.id,t)}get container(){const t=this.querySelector("[data-container]");if(!t)throw new Error(`${this.localName} must contain a [data-container] element.`);return t}get close(){let e=this.querySelector(".mx-icon--close");return e||(e=t(`<button class="mx-icon mx-icon--close" aria-controls="${this.id}" aria-label="Close GlobalAlert" type="button"></button>`),this.container.appendChild(e)),e}generatedId(){const t=`mx-alert-${Math.floor(Math.random()*Math.floor(1e4))}`;return e(t,20)}}customElements.define("mx-closable-alert",o);
+import { c as createElement, m as makeAnchor } from "./chunks/utilities-DXELy_An.js";
+class GlobalAlert extends HTMLElement {
+  constructor() {
+    super();
+    this.handleClose = () => {
+      this.controller.abort();
+      this.remove();
+      this.localStorage = "true";
+      const newEvent = new CustomEvent("GlobalAlert-close", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          id: this.id,
+          target: this
+        }
+      });
+      this.dispatchEvent(newEvent);
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    if (!this.container) return;
+    this.id = this.id || this.generatedId();
+    if (this.localStorage) {
+      this.controller.abort();
+      this.remove();
+      return;
+    }
+    const { signal } = this.controller;
+    this.close?.addEventListener("click", this.handleClose, { signal });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+    this.close.remove();
+  }
+  get localStorage() {
+    return localStorage.getItem(this.id);
+  }
+  set localStorage(value) {
+    localStorage.setItem(this.id, value);
+  }
+  get container() {
+    const element = this.querySelector("[data-container]");
+    if (!element) {
+      throw new Error(
+        `${this.localName} must contain a [data-container] element.`
+      );
+    }
+    return element;
+  }
+  get close() {
+    let closeBtn = this.querySelector(".mx-icon--close");
+    if (!closeBtn) {
+      closeBtn = createElement(
+        `<button class="mx-icon mx-icon--close" aria-controls="${this.id}" aria-label="Close GlobalAlert" type="button"></button>`
+      );
+      this.container.appendChild(closeBtn);
+    }
+    return closeBtn;
+  }
+  generatedId() {
+    const id = `mx-alert-${Math.floor(Math.random() * Math.floor(1e4))}`;
+    return makeAnchor(id, 20);
+  }
+}
+customElements.define("mx-closable-alert", GlobalAlert);
+//# sourceMappingURL=global-alert.entry.js.map

package/dist/build/global-alert.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-alert.entry.js","sources":["../../src/Component/GlobalAlert/Elements/ClosableAlert.ts"],"sourcesContent":["/**\n * @file GlobalAlerts\n *\n * When a GlobalAlert is closed the id is written to local storage.\n * This is checked as the page is re-rendered, if a GlobalAlert with the same ID is\n * created it will be removed from the dom.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class GlobalAlert 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.container) return\n    this.id = this.id || this.generatedId()\n    if (this.localStorage) {\n      this.controller.abort()\n      this.remove()\n      return\n    }\n    const { signal }: AbortController = this.controller\n    this.close?.addEventListener(\"click\", this.handleClose, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.close.remove()\n  }\n\n  /**\n   * Handle close button click event.\n   */\n  handleClose = (): void => {\n    this.controller.abort()\n    this.remove()\n    this.localStorage = \"true\"\n    const newEvent: CustomEvent<{ id: string; target: GlobalAlert }> =\n      new CustomEvent(\"GlobalAlert-close\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          id: this.id,\n          target: this,\n        },\n      })\n    this.dispatchEvent(newEvent)\n  }\n\n  get localStorage(): string {\n    return localStorage.getItem(this.id)\n  }\n\n  set localStorage(value: string) {\n    localStorage.setItem(this.id, value)\n  }\n\n  get container(): HTMLElement {\n    const element: HTMLElement = this.querySelector(\"[data-container]\")\n    if (!element) {\n      throw new Error(\n        `${this.localName} must contain a [data-container] element.`,\n      )\n    }\n    return element\n  }\n\n  get close(): HTMLButtonElement {\n    let closeBtn: HTMLButtonElement = this.querySelector(\".mx-icon--close\")\n    if (!closeBtn) {\n      closeBtn = createElement(\n        `<button class=\"mx-icon mx-icon--close\" aria-controls=\"${this.id}\" aria-label=\"Close GlobalAlert\" type=\"button\"></button>`,\n      ) as HTMLButtonElement\n      this.container.appendChild(closeBtn)\n    }\n    return closeBtn\n  }\n\n  generatedId(): string {\n    const id = `mx-alert-${Math.floor(Math.random() * Math.floor(10000))}`\n    return makeAnchor(id, 20)\n  }\n}\n\ncustomElements.define(\"mx-closable-alert\", GlobalAlert)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-closable-alert\": GlobalAlert\n  }\n}\n"],"names":[],"mappings":";AAUA,MAAqB,oBAAoB,YAAY;AAAA,EAInD,cAAc;AACN;AAyBR,SAAA,cAAc,MAAY;AACxB,WAAK,WAAW;AAChB,WAAK,OAAO;AACZ,WAAK,eAAe;AACd,YAAA,WACJ,IAAI,YAAY,qBAAqB;AAAA,QACnC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN,IAAI,KAAK;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACH,WAAK,cAAc,QAAQ;AAAA,IAAA;AArCtB,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACpB,QAAA,CAAC,KAAK,UAAW;AACrB,SAAK,KAAK,KAAK,MAAM,KAAK,YAAY;AACtC,QAAI,KAAK,cAAc;AACrB,WAAK,WAAW;AAChB,WAAK,OAAO;AACZ;AAAA,IACF;AACM,UAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,SAAK,OAAO,iBAAiB,SAAS,KAAK,aAAa,EAAE,QAAQ;AAAA,EACpE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;AAChB,SAAK,MAAM;EACb;AAAA,EAqBA,IAAI,eAAuB;AAClB,WAAA,aAAa,QAAQ,KAAK,EAAE;AAAA,EACrC;AAAA,EAEA,IAAI,aAAa,OAAe;AACjB,iBAAA,QAAQ,KAAK,IAAI,KAAK;AAAA,EACrC;AAAA,EAEA,IAAI,YAAyB;AACrB,UAAA,UAAuB,KAAK,cAAc,kBAAkB;AAClE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,QAA2B;AACzB,QAAA,WAA8B,KAAK,cAAc,iBAAiB;AACtE,QAAI,CAAC,UAAU;AACF,iBAAA;AAAA,QACT,yDAAyD,KAAK,EAAE;AAAA,MAAA;AAE7D,WAAA,UAAU,YAAY,QAAQ;AAAA,IACrC;AACO,WAAA;AAAA,EACT;AAAA,EAEA,cAAsB;AACd,UAAA,KAAK,YAAY,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM,GAAK,CAAC,CAAC;AAC7D,WAAA,WAAW,IAAI,EAAE;AAAA,EAC1B;AACF;AAEA,eAAe,OAAO,qBAAqB,WAAW;"}

package/dist/build/grid.css

@@ -1 +1,201 @@
-@layer design-system.layouts{.mx-grid{--grid-repeat: auto-fit;--grid-min: 20ch;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20ch),1fr));grid-template-columns:repeat(var(--grid-repeat),minmax(min(100%,var(--grid-min)),1fr));grid-template-rows:1fr;grid-gap:var(--grid-gap, var(--gap));gap:var(--grid-gap, var(--gap))}@media (min-width: 946px){.mx-grid{--grid-gap: var(--large-grid-gap, var(--gap-l))}}.mx-grid:is(ul,ol){list-style:none;padding-inline-start:unset}[class*=mx-grid--cols-]{--grid-repeat: 1}@media (min-width: 420px){.mx-grid--cols-xs-2{--grid-repeat: 2}}@media (min-width: 540px){.mx-grid--cols-sm-2{--grid-repeat: 2}}@media (min-width: 720px){.mx-grid--cols-md-2{--grid-repeat: 2}}@media (min-width: 946px){.mx-grid--cols-lg-2{--grid-repeat: 2}}@media (min-width: 1100px){.mx-grid--cols-xl-2{--grid-repeat: 2}}@media (min-width: 720px){.mx-grid--cols-md-3{--grid-repeat: 3}}@media (min-width: 946px){.mx-grid--cols-lg-3{--grid-repeat: 3}}@media (min-width: 1100px){.mx-grid--cols-xl-3{--grid-repeat: 3}}@media (min-width: 720px){.mx-grid--cols-md-4{--grid-repeat: 4}}@media (min-width: 946px){.mx-grid--cols-lg-4{--grid-repeat: 4}}@media (min-width: 1100px){.mx-grid--cols-xl-4{--grid-repeat: 4}}.mx-grid--collapse{--grid-gap: 0}.mx-grid--collapse-cols{-moz-column-gap:0;column-gap:0}.mx-grid--collapse-rows{row-gap:0}}@layer design-system.layouts{[class*=mx-grid-item__span-]{grid-column:auto / auto;grid-column:auto / var(--grid-span, auto)}@media (min-width: 420px){.mx-grid-item__span-xs-2{--grid-span: span 2}}@media (min-width: 540px){.mx-grid-item__span-sm-2{--grid-span: span 2}}@media (min-width: 720px){.mx-grid-item__span-md-2{--grid-span: span 2}}@media (min-width: 946px){.mx-grid-item__span-lg-2{--grid-span: span 2}}@media (min-width: 1100px){.mx-grid-item__span-xl-2{--grid-span: span 2}}@media (min-width: 720px){.mx-grid-item__span-md-3{--grid-span: span 3}}@media (min-width: 946px){.mx-grid-item__span-lg-3{--grid-span: span 3}}@media (min-width: 1100px){.mx-grid-item__span-xl-3{--grid-span: span 3}}@media (min-width: 720px){.mx-grid-item__span-md-4{--grid-span: span 4}}@media (min-width: 946px){.mx-grid-item__span-lg-4{--grid-span: span 4}}@media (min-width: 1100px){.mx-grid-item__span-xl-4{--grid-span: span 4}}}@media print{.mx-grid{display:block}}
+/**
+ * Dynamic Grid
+ */
+
+@layer design-system.layouts {
+  .mx-grid {
+    --grid-repeat: auto-fit;
+    --grid-min: 20ch;
+
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, 20ch), 1fr)
+    );
+    grid-template-columns: repeat(
+      var(--grid-repeat),
+      minmax(min(100%, var(--grid-min)), 1fr)
+    );
+    grid-template-rows: 1fr;
+    grid-gap: var(--grid-gap, var(--gap));
+    gap: var(--grid-gap, var(--gap));
+  }
+
+    @media (min-width: 946px) {
+  .mx-grid {
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
+  }
+    }
+
+    .mx-grid:is(ul,ol) {
+      list-style: none;
+      padding-inline-start: unset;
+    }
+
+  [class*="mx-grid--cols-"] {
+    --grid-repeat: 1;
+  }
+    @media (min-width: 420px) {
+
+  .mx-grid--cols-xs-2 {
+      --grid-repeat: 2;
+  }
+    }
+    @media (min-width: 540px) {
+
+  .mx-grid--cols-sm-2 {
+      --grid-repeat: 2;
+  }
+    }
+    @media (min-width: 720px) {
+
+  .mx-grid--cols-md-2 {
+      --grid-repeat: 2;
+  }
+    }
+    @media (min-width: 946px) {
+
+  .mx-grid--cols-lg-2 {
+      --grid-repeat: 2;
+  }
+    }
+    @media (min-width: 1100px) {
+
+  .mx-grid--cols-xl-2 {
+      --grid-repeat: 2;
+  }
+    }
+    @media (min-width: 720px) {
+
+  .mx-grid--cols-md-3 {
+      --grid-repeat: 3;
+  }
+    }
+    @media (min-width: 946px) {
+
+  .mx-grid--cols-lg-3 {
+      --grid-repeat: 3;
+  }
+    }
+    @media (min-width: 1100px) {
+
+  .mx-grid--cols-xl-3 {
+      --grid-repeat: 3;
+  }
+    }
+    @media (min-width: 720px) {
+
+  .mx-grid--cols-md-4 {
+      --grid-repeat: 4;
+  }
+    }
+    @media (min-width: 946px) {
+
+  .mx-grid--cols-lg-4 {
+      --grid-repeat: 4;
+  }
+    }
+    @media (min-width: 1100px) {
+
+  .mx-grid--cols-xl-4 {
+      --grid-repeat: 4;
+  }
+    }
+
+  .mx-grid--collapse {
+    --grid-gap: 0;
+  }
+
+  .mx-grid--collapse-cols {
+    -moz-column-gap: 0;
+         column-gap: 0;
+  }
+
+  .mx-grid--collapse-rows {
+    row-gap: 0;
+  }
+}
+
+/**
+ * Grid items.
+ */
+@layer design-system.layouts {
+  [class*="mx-grid-item__span-"] {
+    grid-column: auto / auto;
+    grid-column: auto / var(--grid-span, auto);
+  }
+    @media (min-width: 420px) {
+
+  .mx-grid-item__span-xs-2 {
+      --grid-span: span 2;
+  }
+    }
+    @media (min-width: 540px) {
+
+  .mx-grid-item__span-sm-2 {
+      --grid-span: span 2;
+  }
+    }
+    @media (min-width: 720px) {
+
+  .mx-grid-item__span-md-2 {
+      --grid-span: span 2;
+  }
+    }
+    @media (min-width: 946px) {
+
+  .mx-grid-item__span-lg-2 {
+      --grid-span: span 2;
+  }
+    }
+    @media (min-width: 1100px) {
+
+  .mx-grid-item__span-xl-2 {
+      --grid-span: span 2;
+  }
+    }
+    @media (min-width: 720px) {
+
+  .mx-grid-item__span-md-3 {
+      --grid-span: span 3;
+  }
+    }
+    @media (min-width: 946px) {
+
+  .mx-grid-item__span-lg-3 {
+      --grid-span: span 3;
+  }
+    }
+    @media (min-width: 1100px) {
+
+  .mx-grid-item__span-xl-3 {
+      --grid-span: span 3;
+  }
+    }
+    @media (min-width: 720px) {
+
+  .mx-grid-item__span-md-4 {
+      --grid-span: span 4;
+  }
+    }
+    @media (min-width: 946px) {
+
+  .mx-grid-item__span-lg-4 {
+      --grid-span: span 4;
+  }
+    }
+    @media (min-width: 1100px) {
+
+  .mx-grid-item__span-xl-4 {
+      --grid-span: span 4;
+  }
+    }
+}
+
+@media print {
+  .mx-grid {
+    display: block;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdyaWQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSx1QkFBdUI7SUFDdkIsZ0JBQWdCOztJQUVoQixhQUFhO0lBQ2I7OztLQUdDO0lBSEQ7OztLQUdDO0lBQ0QsdUJBQXVCO0lBQ3ZCLHFDQUFnQztJQUFoQyxnQ0FBZ0M7RUFVbEM7O0lBUkU7RUFaRjtNQWFJLCtDQUErQztFQU9uRDtJQU5FOztJQUVBO01BQ0UsZ0JBQWdCO01BQ2hCLDJCQUEyQjtJQUM3Qjs7RUFHRjtJQUNFLGdCQUFnQjtFQUNsQjtJQUdFOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFO0lBSUE7O0VBREY7TUFFSSxnQkFBZ0I7RUFFcEI7SUFERTtJQUlBOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFO0lBSUE7O0VBREY7TUFFSSxnQkFBZ0I7RUFFcEI7SUFERTtJQUlBOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFO0lBSUE7O0VBREY7TUFFSSxnQkFBZ0I7RUFFcEI7SUFERTtJQUlBOztFQURGO01BRUksZ0JBQWdCO0VBRXBCO0lBREU7SUFJQTs7RUFERjtNQUVJLGdCQUFnQjtFQUVwQjtJQURFOztFQUdGO0lBQ0UsYUFBYTtFQUNmOztFQUVBO0lBQ0Usa0JBQWE7U0FBYixhQUFhO0VBQ2Y7O0VBRUE7SUFDRSxVQUFVO0VBQ1o7QUFDRjs7QUFFQTs7RUFFRTtBQUNGO0VBQ0U7SUFDRSx3QkFBMEM7SUFBMUMsMENBQTBDO0VBQzVDO0lBR0U7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7SUFJQTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7SUFJQTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7SUFJQTs7RUFERjtNQUVJLG1CQUFtQjtFQUV2QjtJQURFO0lBSUE7O0VBREY7TUFFSSxtQkFBbUI7RUFFdkI7SUFERTtJQUlBOztFQURGO01BRUksbUJBQW1CO0VBRXZCO0lBREU7QUFFSjs7QUFFQTtFQUNFO0lBQ0UsY0FBYztFQUNoQjtBQUNGIiwiZmlsZSI6ImdyaWQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBEeW5hbWljIEdyaWRcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWdyaWQge1xuICAgIC0tZ3JpZC1yZXBlYXQ6IGF1dG8tZml0O1xuICAgIC0tZ3JpZC1taW46IDIwY2g7XG5cbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KFxuICAgICAgdmFyKC0tZ3JpZC1yZXBlYXQpLFxuICAgICAgbWlubWF4KG1pbigxMDAlLCB2YXIoLS1ncmlkLW1pbikpLCAxZnIpXG4gICAgKTtcbiAgICBncmlkLXRlbXBsYXRlLXJvd3M6IDFmcjtcbiAgICBnYXA6IHZhcigtLWdyaWQtZ2FwLCB2YXIoLS1nYXApKTtcblxuICAgIEBtZWRpYSAoLS1sYXJnZS11cCkge1xuICAgICAgLS1ncmlkLWdhcDogdmFyKC0tbGFyZ2UtZ3JpZC1nYXAsIHZhcigtLWdhcC1sKSk7XG4gICAgfVxuXG4gICAgJjppcyh1bCwgb2wpIHtcbiAgICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgICBwYWRkaW5nLWlubGluZS1zdGFydDogdW5zZXQ7XG4gICAgfVxuICB9XG5cbiAgW2NsYXNzKj1cIm14LWdyaWQtLWNvbHMtXCJdIHtcbiAgICAtLWdyaWQtcmVwZWF0OiAxO1xuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMteHMtMiB7XG4gICAgQG1lZGlhICgtLXgtc21hbGwtdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtc20tMiB7XG4gICAgQG1lZGlhICgtLXNtYWxsLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLW1kLTIge1xuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtbGctMiB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLXhsLTIge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLW1kLTMge1xuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDM7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtbGctMyB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLXhsLTMge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLW1kLTQge1xuICAgIEBtZWRpYSAoLS1tZWRpdW0tdXApIHtcbiAgICAgIC0tZ3JpZC1yZXBlYXQ6IDQ7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtLWNvbHMtbGctNCB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiA0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xzLXhsLTQge1xuICAgIEBtZWRpYSAoLS14LWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtcmVwZWF0OiA0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xsYXBzZSB7XG4gICAgLS1ncmlkLWdhcDogMDtcbiAgfVxuXG4gIC5teC1ncmlkLS1jb2xsYXBzZS1jb2xzIHtcbiAgICBjb2x1bW4tZ2FwOiAwO1xuICB9XG5cbiAgLm14LWdyaWQtLWNvbGxhcHNlLXJvd3Mge1xuICAgIHJvdy1nYXA6IDA7XG4gIH1cbn1cblxuLyoqXG4gKiBHcmlkIGl0ZW1zLlxuICovXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgW2NsYXNzKj1cIm14LWdyaWQtaXRlbV9fc3Bhbi1cIl0ge1xuICAgIGdyaWQtY29sdW1uOiBhdXRvIC8gdmFyKC0tZ3JpZC1zcGFuLCBhdXRvKTtcbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4teHMtMiB7XG4gICAgQG1lZGlhICgtLXgtc21hbGwtdXApIHtcbiAgICAgIC0tZ3JpZC1zcGFuOiBzcGFuIDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtaXRlbV9fc3Bhbi1zbS0yIHtcbiAgICBAbWVkaWEgKC0tc21hbGwtdXApIHtcbiAgICAgIC0tZ3JpZC1zcGFuOiBzcGFuIDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtaXRlbV9fc3Bhbi1tZC0yIHtcbiAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tbGctMiB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4teGwtMiB7XG4gICAgQG1lZGlhICgtLXgtbGFyZ2UtdXApIHtcbiAgICAgIC0tZ3JpZC1zcGFuOiBzcGFuIDI7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtaXRlbV9fc3Bhbi1tZC0zIHtcbiAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tbGctMyB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiAzO1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4teGwtMyB7XG4gICAgQG1lZGlhICgtLXgtbGFyZ2UtdXApIHtcbiAgICAgIC0tZ3JpZC1zcGFuOiBzcGFuIDM7XG4gICAgfVxuICB9XG5cbiAgLm14LWdyaWQtaXRlbV9fc3Bhbi1tZC00IHtcbiAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiA0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4tbGctNCB7XG4gICAgQG1lZGlhICgtLWxhcmdlLXVwKSB7XG4gICAgICAtLWdyaWQtc3Bhbjogc3BhbiA0O1xuICAgIH1cbiAgfVxuXG4gIC5teC1ncmlkLWl0ZW1fX3NwYW4teGwtNCB7XG4gICAgQG1lZGlhICgtLXgtbGFyZ2UtdXApIHtcbiAgICAgIC0tZ3JpZC1zcGFuOiBzcGFuIDQ7XG4gICAgfVxuICB9XG59XG5cbkBtZWRpYSBwcmludCB7XG4gIC5teC1ncmlkIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxufVxuIl19 */

package/dist/build/header.css

@@ -1 +1,161 @@
-@layer design-system.layouts{.mx-header__toggles{display:flex;gap:var(--toggle-gap, var(--spacing-xs));padding-inline-end:.125rem;position:relative;z-index:1}@media (min-width: 720px){.mx-header__toggles{display:none}}.mx-header__toggles .mx-button--secondary{border-color:transparent}.mx-header__toggles [hidden]{display:none}@media (max-width: 719.98px){.global-nav-up-only{display:none}}}@layer design-system.layouts{.mx-header__inner{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center}.mx-header__brand{display:flex;gap:var(--brand-gap, var(--gap));align-items:center;margin-inline-end:auto}.mx-header__name{display:grid}.mx-header__main{display:flex;gap:var(--main-gap, var(--gap));align-items:center}.mx-header__nav{inline-size:100%;opacity:1;display:grid}@starting-style{.mx-header__nav{opacity:0;display:grid}}@media (min-width: 720px){.mx-header__nav{z-index:2;position:relative;inline-size:auto;block-size:auto}}.mx-header__nav[inert]{display:none;opacity:0;transition-duration:.4s}.mx-header__search{position:absolute;z-index:2;inset-block-start:2px;inset-inline-start:0;inline-size:100%;opacity:1;display:flex}@starting-style{.mx-header__search{opacity:0;display:grid}}@media (min-width: 720px){.mx-header__search{position:relative;inline-size:auto}}.mx-header__search[inert]{display:none;opacity:0;transition-duration:.4s}@media (min-width: 720px){.mx-header__search input{max-inline-size:150px}}@media (min-width: 720px){.mx-header__nav-inner{display:flex}}.mx-header__nav-right{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{.mx-header .mx-header__nav{display:none}}
+/**
+ * Global Header
+ */
+
+@layer design-system.layouts {
+  .mx-header__toggles {
+    display: flex;
+    gap: var(--toggle-gap, var(--spacing-xs));
+    padding-inline-end: 0.125rem;
+    position: relative;
+    z-index: 1;
+  }
+
+    @media (min-width: 720px) {
+  .mx-header__toggles {
+      display: none;
+  }
+    }
+
+    .mx-header__toggles .mx-button--secondary {
+      border-color: transparent;
+    }
+
+    .mx-header__toggles [hidden] {
+      display: none;
+    }
+    @media (max-width: 719.98px) {
+
+  .global-nav-up-only {
+      display: none;
+  }
+    }
+}
+
+/**
+ * Primary Header
+ */
+
+@layer design-system.layouts {
+  .mx-header__inner {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+
+  .mx-header__brand {
+    display: flex;
+    gap: var(--brand-gap, var(--gap));
+    align-items: center;
+    margin-inline-end: auto;
+  }
+
+  .mx-header__name {
+    display: grid;
+  }
+
+  .mx-header__main {
+    display: flex;
+    gap: var(--main-gap, var(--gap));
+    align-items: center;
+  }
+
+  .mx-header__nav {
+    inline-size: 100%;
+    opacity: 1;
+    display: grid;
+  }
+
+    @starting-style {
+
+  .mx-header__nav {
+      opacity: 0;
+      display: grid;
+  }
+    }
+
+    @media (min-width: 720px) {
+
+  .mx-header__nav {
+      z-index: 2;
+      position: relative;
+      inline-size: auto;
+      block-size: auto;
+  }
+    }
+
+    .mx-header__nav[inert] {
+      display: none;
+      opacity: 0;
+      transition-duration: 0.4s;
+    }
+
+  .mx-header__search {
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 2px;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    opacity: 1;
+    display: flex;
+  }
+
+    @starting-style {
+
+  .mx-header__search {
+      opacity: 0;
+      display: grid;
+  }
+    }
+
+    @media (min-width: 720px) {
+
+  .mx-header__search {
+      position: relative;
+      inline-size: auto;
+  }
+    }
+
+    .mx-header__search[inert] {
+      display: none;
+      opacity: 0;
+      transition-duration: 0.4s;
+    }
+      @media (min-width: 720px) {
+
+    .mx-header__search input {
+        max-inline-size: 150px;
+    }
+      }
+
+  /**
+   * Primary Header Stacked
+   */
+    @media (min-width: 720px) {
+  .mx-header__nav-inner {
+      display: flex;
+  }
+    }
+
+  .mx-header__nav-right {
+    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 {
+  .mx-header .mx-header__nav {
+    display: none;
+  }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl90b2dnbGVzLmNzcyIsIl9oZWFkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2IseUNBQXlDO0lBQ3pDLDRCQUF1QjtJQUN2QixrQkFBa0I7SUFDbEIsVUFBVTtFQWFaOztJQVhFO0VBUEY7TUFRSSxhQUFhO0VBVWpCO0lBVEU7O0lBRUE7TUFDRSx5QkFBeUI7SUFDM0I7O0lBRUE7TUFDRSxhQUFhO0lBQ2Y7SUFJQTs7RUFERjtNQUVJLGFBQWE7RUFFakI7SUFERTtBQUVKOztBQzlCQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLGFBQWE7SUFDYiwrQkFBK0I7SUFDL0IsbUJBQW1CO0VBQ3JCOztFQUVBO0lBQ0UsYUFBYTtJQUNiLGlDQUFpQztJQUNqQyxtQkFBbUI7SUFDbkIsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0UsYUFBYTtFQUNmOztFQUVBO0lBQ0UsYUFBYTtJQUNiLGdDQUFnQztJQUNoQyxtQkFBbUI7RUFDckI7O0VBRUE7SUFDRSxpQkFBaUI7SUFDakIsVUFBVTtJQUNWLGFBQWE7RUFtQmY7O0lBakJFOztFQUxGO01BTUksVUFBVTtNQUNWLGFBQWE7RUFlakI7SUFkRTs7SUFFQTs7RUFWRjtNQVdJLFVBQVU7TUFDVixrQkFBa0I7TUFDbEIsaUJBQWlCO01BQ2pCLGdCQUFnQjtFQVFwQjtJQVBFOztJQUVBO01BQ0UsYUFBYTtNQUNiLFVBQVU7TUFDVix5QkFBeUI7SUFDM0I7O0VBR0Y7SUFDRSxrQkFBa0I7SUFDbEIsVUFBVTtJQUNWLHNCQUFzQjtJQUN0QixxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLFVBQVU7SUFDVixhQUFhO0VBdUJmOztJQXJCRTs7RUFURjtNQVVJLFVBQVU7TUFDVixhQUFhO0VBbUJqQjtJQWxCRTs7SUFFQTs7RUFkRjtNQWVJLGtCQUFrQjtNQUNsQixpQkFBaUI7RUFjckI7SUFiRTs7SUFFQTtNQUNFLGFBQWE7TUFDYixVQUFVO01BQ1YseUJBQXlCO0lBQzNCO01BR0U7O0lBREY7UUFFSSxzQkFBc0I7SUFFMUI7TUFERTs7RUFJSjs7SUFFRTtJQUVBO0VBREY7TUFFSSxhQUFhO0VBRWpCO0lBREU7O0VBR0Y7SUFDRSw4QkFBOEI7RUFPaEM7O0lBTEU7O0VBSEY7TUFJSSx5QkFBeUI7TUFDekIsZUFBZTtNQUNmLGtCQUFrQjtFQUV0QjtJQURFO0FBRUo7O0FBRUE7RUFDRTtJQUNFLGFBQWE7RUFDZjtBQUNGIiwiZmlsZSI6ImhlYWRlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdsb2JhbCBIZWFkZXJcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5sYXlvdXRzIHtcbiAgLm14LWhlYWRlcl9fdG9nZ2xlcyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLXRvZ2dsZS1nYXAsIHZhcigtLXNwYWNpbmcteHMpKTtcbiAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDJweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgei1pbmRleDogMTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cblxuICAgICYgLm14LWJ1dHRvbi0tc2Vjb25kYXJ5IHtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgfVxuXG4gICAgJiBbaGlkZGVuXSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuXG4gIC5nbG9iYWwtbmF2LXVwLW9ubHkge1xuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LWRvd24pIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG59XG4iLCIvKipcbiAqIFByaW1hcnkgSGVhZGVyXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5teC1oZWFkZXJfX2lubmVyIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmciBhdXRvO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19icmFuZCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBnYXA6IHZhcigtLWJyYW5kLWdhcCwgdmFyKC0tZ2FwKSk7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBtYXJnaW4taW5saW5lLWVuZDogYXV0bztcbiAgfVxuXG4gIC5teC1oZWFkZXJfX25hbWUge1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gIH1cblxuICAubXgtaGVhZGVyX19tYWluIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tbWFpbi1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIH1cblxuICAubXgtaGVhZGVyX19uYXYge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIG9wYWNpdHk6IDE7XG4gICAgZGlzcGxheTogZ3JpZDtcblxuICAgIEBzdGFydGluZy1zdHlsZSB7XG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICB9XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgei1pbmRleDogMjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgICAgYmxvY2stc2l6ZTogYXV0bztcbiAgICB9XG5cbiAgICAmW2luZXJ0XSB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHRyYW5zaXRpb24tZHVyYXRpb246IDAuNHM7XG4gICAgfVxuICB9XG5cbiAgLm14LWhlYWRlcl9fc2VhcmNoIHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgei1pbmRleDogMjtcbiAgICBpbnNldC1ibG9jay1zdGFydDogMnB4O1xuICAgIGluc2V0LWlubGluZS1zdGFydDogMDtcbiAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICBvcGFjaXR5OiAxO1xuICAgIGRpc3BsYXk6IGZsZXg7XG5cbiAgICBAc3RhcnRpbmctc3R5bGUge1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgfVxuXG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGlubGluZS1zaXplOiBhdXRvO1xuICAgIH1cblxuICAgICZbaW5lcnRdIHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogMC40cztcbiAgICB9XG5cbiAgICAmIGlucHV0IHtcbiAgICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICAgIG1heC1pbmxpbmUtc2l6ZTogMTUwcHg7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFByaW1hcnkgSGVhZGVyIFN0YWNrZWRcbiAgICovXG4gIC5teC1oZWFkZXJfX25hdi1pbm5lciB7XG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG5cbiAgLm14LWhlYWRlcl9fbmF2LXJpZ2h0IHtcbiAgICBtYXJnaW4tYmxvY2s6IHZhcigtLXNwYWNpbmctbSk7XG5cbiAgICBAbWVkaWEgKC0tZ2xvYmFsLW5hdi11cCkge1xuICAgICAgbWFyZ2luLWlubGluZS1zdGFydDogYXV0bztcbiAgICAgIG1hcmdpbi1ibG9jazogMDtcbiAgICAgIHBhZGRpbmctYmxvY2s6IDRweDtcbiAgICB9XG4gIH1cbn1cblxuQG1lZGlhIHByaW50IHtcbiAgLm14LWhlYWRlciAubXgtaGVhZGVyX19uYXYge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cbiJdfQ== */

package/dist/build/header.entry.js

@@ -1 +1,103 @@
-import{D as t}from"./chunks/disclosure-widget-CPdkUWkq.js";import"./chunks/utilities-CE6xwgqF.js";class e extends HTMLElement{constructor(){super(),this.closeIconClass="icon--close",this.menuIconClass="icon--menu",this.searchIconClass="icon--search",this.handleBreakpoint=({matches:t})=>{if(!this.trigger)return;const{signal:e}=this.controller;t?(this.widget.attach(),this.target.setAttribute("inert",""),this.trigger.addEventListener("disclosure-toggle",this.handleDisclosure,{signal:e})):(this.widget.detach(),this.target.removeAttribute("inert"),this.trigger.removeEventListener("disclosure-toggle",this.handleDisclosure))},this.handleDisclosure=({detail:t})=>{const{isOpen:e}=t,s=e?"Open":"Close",i=e?"Close":"Open";this.trigger.textContent=this.triggerText.replace(s,i);const r="primary-search"===this.controls;r&&this.handleSearchDisclosure(e),this.trigger.classList.toggle(r?this.searchIconClass:this.menuIconClass),this.trigger.classList.toggle(this.closeIconClass)},this.handleSearchDisclosure=t=>{this.hideMenu&&document.querySelector(`.${this.menuIconClass}`).toggleAttribute("hidden"),t?this.target.querySelector("input")?.focus():this.trigger.focus()},this.internals_=this.attachInternals(),this.controller=new AbortController,this.mq=this.getAttribute("mq")||"(max-width: 720px)"}connectedCallback(){if(!this.trigger||!this.target)return;this.target?.setAttribute("role","region"),this.widget=new t(this.trigger,this.target),this.widget.init();const{signal:e}=this.controller;this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener("change",this.handleBreakpoint,{signal:e})}disconnectedCallback(){this.widget.detach(),this.controller.abort()}get trigger(){const t=this.querySelector(":scope > button"),e=t.getAttribute("aria-controls");if(!t||!e)throw new Error(`${this.localName} must contain a <button aria-controls="element-to-trigger"> element.`);return t.removeAttribute("disabled"),this.controls=e,this.triggerText=t.textContent,t}get target(){const t=document.querySelector(`div[id="${this.controls}"]`);if(!t)throw new Error(`${this.localName} must contain a target <div id="${this.controls}">.`);return t.classList.remove("global-nav-up-only"),t}get breakpoint(){return window.matchMedia(this.mq)}}customElements.define("mx-global-toggle",e);
+import { D as DisclosureWidget } from "./chunks/disclosure-widget-CtNx0f8p.js";
+import "./chunks/utilities-DXELy_An.js";
+class GlobalToggle extends HTMLElement {
+  constructor() {
+    super();
+    this.closeIconClass = "icon--close";
+    this.menuIconClass = "icon--menu";
+    this.searchIconClass = "icon--search";
+    this.handleBreakpoint = ({
+      matches
+    }) => {
+      if (!this.trigger) return;
+      const { signal } = this.controller;
+      if (matches) {
+        this.widget.attach();
+        this.target.setAttribute("inert", "");
+        this.trigger.addEventListener(
+          "disclosure-toggle",
+          this.handleDisclosure,
+          { signal }
+        );
+      } else {
+        this.widget.detach();
+        this.target.removeAttribute("inert");
+        this.trigger.removeEventListener(
+          "disclosure-toggle",
+          this.handleDisclosure
+        );
+      }
+    };
+    this.handleDisclosure = ({ detail }) => {
+      const { isOpen } = detail;
+      const origText = !isOpen ? "Close" : "Open";
+      const replaceText = !isOpen ? "Open" : "Close";
+      this.trigger.textContent = this.triggerText.replace(origText, replaceText);
+      const isSearch = this.controls === "primary-search";
+      if (isSearch) this.handleSearchDisclosure(isOpen);
+      this.trigger.classList.toggle(
+        isSearch ? this.searchIconClass : this.menuIconClass
+      );
+      this.trigger.classList.toggle(this.closeIconClass);
+    };
+    this.handleSearchDisclosure = (isOpen) => {
+      if (this.hideMenu) {
+        const menuTrigger = document.querySelector(`.${this.menuIconClass}`);
+        menuTrigger.toggleAttribute("hidden");
+      }
+      if (!isOpen) {
+        this.trigger.focus();
+      } else {
+        this.target.querySelector("input")?.focus();
+      }
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+    this.mq = this.getAttribute("mq") || "(max-width: 720px)";
+  }
+  connectedCallback() {
+    if (!this.trigger || !this.target) return;
+    this.target?.setAttribute("role", "region");
+    this.widget = new DisclosureWidget(this.trigger, this.target);
+    this.widget.init();
+    const { signal } = this.controller;
+    this.handleBreakpoint(this.breakpoint);
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.widget.detach();
+    this.controller.abort();
+  }
+  get trigger() {
+    const trigger = this.querySelector(":scope > button");
+    const controls = trigger.getAttribute("aria-controls");
+    if (!trigger || !controls) {
+      throw new Error(
+        `${this.localName} must contain a <button aria-controls="element-to-trigger"> element.`
+      );
+    }
+    trigger.removeAttribute("disabled");
+    this.controls = controls;
+    this.triggerText = trigger.textContent;
+    return trigger;
+  }
+  get target() {
+    const target = document.querySelector(
+      `div[id="${this.controls}"]`
+    );
+    if (!target) {
+      throw new Error(
+        `${this.localName} must contain a target <div id="${this.controls}">.`
+      );
+    }
+    target.classList.remove("global-nav-up-only");
+    return target;
+  }
+  get breakpoint() {
+    return window.matchMedia(this.mq);
+  }
+}
+customElements.define("mx-global-toggle", GlobalToggle);
+//# sourceMappingURL=header.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.entry.js","sources":["../../src/Layout/Header/Elements/GlobalToggle.ts"],"sourcesContent":["/**\n * Header\n * @file Handle accessible trigger of menus on small screens.\n */\n\nimport {\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\nexport default class GlobalToggle extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  widget!: DisclosureWidget\n  controls?: string\n  mq: string\n  triggerText: string\n  closeIconClass: string = \"icon--close\"\n  menuIconClass: string = \"icon--menu\"\n  searchIconClass: string = \"icon--search\"\n  hideMenu: boolean\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.mq = this.getAttribute(\"mq\") || \"(max-width: 720px)\"\n  }\n\n  connectedCallback(): void {\n    if (!this.trigger || !this.target) return\n\n    this.target?.setAttribute(\"role\", \"region\")\n    this.widget = new DisclosureWidget(this.trigger, this.target)\n    this.widget.init()\n    const { signal }: AbortController = this.controller\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.widget.detach()\n    this.controller.abort()\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (!this.trigger) return\n    const { signal }: AbortController = this.controller\n    if (matches) {\n      this.widget.attach()\n      this.target.setAttribute(\"inert\", \"\")\n      this.trigger.addEventListener(\n        \"disclosure-toggle\",\n        this.handleDisclosure,\n        { signal },\n      )\n    } else {\n      this.widget.detach()\n      this.target.removeAttribute(\"inert\")\n      this.trigger.removeEventListener(\n        \"disclosure-toggle\",\n        this.handleDisclosure,\n      )\n    }\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen } = detail\n    // Toggle toggle text.\n    const origText = !isOpen ? \"Close\" : \"Open\"\n    const replaceText = !isOpen ? \"Open\" : \"Close\"\n    this.trigger.textContent = this.triggerText.replace(origText, replaceText)\n\n    // Search is a little different.\n    const isSearch = this.controls === \"primary-search\"\n    if (isSearch) this.handleSearchDisclosure(isOpen)\n\n    // Toggle trigger classes.\n    this.trigger.classList.toggle(\n      isSearch ? this.searchIconClass : this.menuIconClass,\n    )\n    this.trigger.classList.toggle(this.closeIconClass)\n  }\n\n  handleSearchDisclosure = (isOpen?: boolean): void => {\n    if (this.hideMenu) {\n      // Search trigger should hide the menu trigger.\n      const menuTrigger = document.querySelector(`.${this.menuIconClass}`)\n      menuTrigger.toggleAttribute(\"hidden\")\n    }\n    // Shift focus between search input and trigger.\n    if (!isOpen) {\n      this.trigger.focus()\n    } else {\n      this.target.querySelector(\"input\")?.focus()\n    }\n  }\n\n  get trigger(): HTMLButtonElement {\n    const trigger: HTMLButtonElement | null =\n      this.querySelector(\":scope > button\")\n    const controls = trigger.getAttribute(\"aria-controls\")\n    if (!trigger || !controls) {\n      throw new Error(\n        `${this.localName} must contain a <button aria-controls=\"element-to-trigger\"> element.`,\n      )\n    }\n    trigger.removeAttribute(\"disabled\")\n    this.controls = controls\n    this.triggerText = trigger.textContent\n    return trigger\n  }\n\n  get target(): HTMLDivElement {\n    const target: HTMLDivElement | null = document.querySelector(\n      `div[id=\"${this.controls}\"]`,\n    )\n    if (!target) {\n      throw new Error(\n        `${this.localName} must contain a target <div id=\"${this.controls}\">.`,\n      )\n    }\n    target.classList.remove(\"global-nav-up-only\")\n    return target\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-global-toggle\", GlobalToggle)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-trigger\": GlobalToggle\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/hero-banner.css

@@ -1 +1,67 @@
-@layer design-system.components{.mx-hero-banner{position:relative;z-index:1}.mx-hero-banner.mx-hero-banner--hero{min-block-size:400px;min-block-size:var(--hero-height, 400px);align-content:center;justify-content:center;place-content:center}.mx-hero-banner :is(h1,h2,p){inline-size:min(100%,var(--container-max-width-narrow));text-wrap:balance}.mx-hero-banner h1{word-wrap:anywhere}.mx-hero-banner__inner{grid-column:container;display:grid;grid-template-areas:"content" "aside"}@media (min-width: 946px){.mx-hero-banner__inner{grid-template-areas:"content aside";grid-template-columns:50% 50%;grid-template-columns:var(--hero-columns, 50% 50%)}}.mx-hero-banner__content,.mx-hero-banner__aside{align-content:center}.mx-hero-banner__aside.mx-hero-banner__aside-image{overflow:hidden;position:relative;border-radius:var(--hero-image-radius, var(--border-radius))}.mx-hero-banner__aside img{inline-size:100%;block-size:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}}
+/**
+ * Page Title
+ */
+
+@layer design-system.components {
+  .mx-hero-banner {
+    position: relative;
+    z-index: 1;
+  }
+
+    .mx-hero-banner.mx-hero-banner--hero {
+      min-block-size: 400px;
+      min-block-size: var(--hero-height, 400px);
+      align-content: center;
+      justify-content: center;
+      place-content: center;
+    }
+
+    .mx-hero-banner :is(h1,h2,p) {
+      inline-size: min(100%, var(--container-max-width-narrow));
+      text-wrap: balance;
+    }
+
+    .mx-hero-banner h1 {
+      word-wrap: anywhere;
+    }
+
+  .mx-hero-banner__inner {
+    grid-column: container;
+    display: grid;
+    grid-template-areas: "content" "aside";
+  }
+
+    @media (min-width: 946px) {
+
+  .mx-hero-banner__inner {
+      grid-template-areas: "content aside";
+      grid-template-columns: 50% 50%;
+      grid-template-columns: var(--hero-columns, 50% 50%);
+  }
+    }
+
+  .mx-hero-banner__content {
+    align-content: center;
+  }
+
+  .mx-hero-banner__aside {
+    align-content: center;
+  }
+
+    .mx-hero-banner__aside.mx-hero-banner__aside-image {
+      overflow: hidden;
+      position: relative;
+      border-radius: var(--hero-image-radius, var(--border-radius));
+    }
+
+    .mx-hero-banner__aside img {
+      inline-size: 100%;
+      block-size: 100%;
+      -o-object-fit: cover;
+         object-fit: cover;
+      -o-object-position: center;
+         object-position: center;
+    }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhlcm8tYmFubmVyLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0Usa0JBQWtCO0lBQ2xCLFVBQVU7RUFlWjs7SUFiRTtNQUNFLHFCQUF5QztNQUF6Qyx5Q0FBeUM7TUFDekMscUJBQXFCO01BQXJCLHVCQUFxQjtNQUFyQixxQkFBcUI7SUFDdkI7O0lBRUE7TUFDRSx5REFBeUQ7TUFDekQsa0JBQWtCO0lBQ3BCOztJQUVBO01BQ0UsbUJBQXVCO0lBQ3pCOztFQUdGO0lBQ0Usc0JBQXNCO0lBQ3RCLGFBQWE7SUFDYixzQ0FBc0M7RUFNeEM7O0lBSkU7O0VBTEY7TUFNSSxvQ0FBb0M7TUFDcEMsOEJBQW1EO01BQW5ELG1EQUFtRDtFQUV2RDtJQURFOztFQUdGO0lBQ0UscUJBQXFCO0VBQ3ZCOztFQUVBO0lBQ0UscUJBQXFCO0VBY3ZCOztJQVpFO01BQ0UsZ0JBQWdCO01BQ2hCLGtCQUFrQjtNQUNsQiw2REFBNkQ7SUFDL0Q7O0lBRUE7TUFDRSxpQkFBaUI7TUFDakIsZ0JBQWdCO01BQ2hCLG9CQUFpQjtTQUFqQixpQkFBaUI7TUFDakIsMEJBQXVCO1NBQXZCLHVCQUF1QjtJQUN6QjtBQUVKIiwiZmlsZSI6Imhlcm8tYmFubmVyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogUGFnZSBUaXRsZVxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtaGVyby1iYW5uZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAxO1xuXG4gICAgJi5teC1oZXJvLWJhbm5lci0taGVybyB7XG4gICAgICBtaW4tYmxvY2stc2l6ZTogdmFyKC0taGVyby1oZWlnaHQsIDQwMHB4KTtcbiAgICAgIHBsYWNlLWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB9XG5cbiAgICAmIDppcyhoMSwgaDIsIHApIHtcbiAgICAgIGlubGluZS1zaXplOiBtaW4oMTAwJSwgdmFyKC0tY29udGFpbmVyLW1heC13aWR0aC1uYXJyb3cpKTtcbiAgICAgIHRleHQtd3JhcDogYmFsYW5jZTtcbiAgICB9XG5cbiAgICAmIGgxIHtcbiAgICAgIG92ZXJmbG93LXdyYXA6IGFueXdoZXJlO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZXJvLWJhbm5lcl9faW5uZXIge1xuICAgIGdyaWQtY29sdW1uOiBjb250YWluZXI7XG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXRlbXBsYXRlLWFyZWFzOiBcImNvbnRlbnRcIiBcImFzaWRlXCI7XG5cbiAgICBAbWVkaWEgKC0tbGFyZ2UtdXApIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiY29udGVudCBhc2lkZVwiO1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiB2YXIoLS1oZXJvLWNvbHVtbnMsIDUwJSA1MCUpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1oZXJvLWJhbm5lcl9fY29udGVudCB7XG4gICAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLm14LWhlcm8tYmFubmVyX19hc2lkZSB7XG4gICAgYWxpZ24tY29udGVudDogY2VudGVyO1xuXG4gICAgJi5teC1oZXJvLWJhbm5lcl9fYXNpZGUtaW1hZ2Uge1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWhlcm8taW1hZ2UtcmFkaXVzLCB2YXIoLS1ib3JkZXItcmFkaXVzKSk7XG4gICAgfVxuXG4gICAgJiBpbWcge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgICBibG9jay1zaXplOiAxMDAlO1xuICAgICAgb2JqZWN0LWZpdDogY292ZXI7XG4gICAgICBvYmplY3QtcG9zaXRpb246IGNlbnRlcjtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */