@pnx-mixtape/mxds 0.0.1

package/dist/build/DropMenu.js

@@ -0,0 +1,132 @@
+import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
+import Keyboard from "./keyboard.js";
+class DropMenu extends HTMLElement {
+  constructor() {
+    super();
+    this.keyboard = new Keyboard();
+    this.handleSelect = (event) => {
+      const target = event.target;
+      this.items.forEach((item) => {
+        if (!(item instanceof HTMLButtonElement)) return;
+        item.setAttribute("aria-checked", String(item === target));
+      });
+      const newEvent = new CustomEvent("drop-menu-select", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          event,
+          target
+        }
+      });
+      this.menu.dispatchEvent(newEvent);
+      if (this.closeOnClick) this.menu.togglePopover();
+    };
+    this.handleToggle = ({ newState }) => {
+      const handleClose = () => this.menu.togglePopover();
+      if (newState === "open") {
+        this.keyboard.attachPopup(this.menu.id, handleClose);
+      } else {
+        this.keyboard.detachPopup(this.menu.id);
+      }
+    };
+    this.attachKeyboardMenu = () => {
+      this.keyboard.attachMenu(this.menu, this.items);
+    };
+    this.detachKeyboardMenu = () => {
+      this.keyboard.detachMenu();
+    };
+    this.generatedId = () => {
+      const string = this.trigger?.textContent?.trim();
+      return !string ? "" : makeAnchor(string);
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  async connectedCallback() {
+    if (!this.menu || !this.trigger) return;
+    if (!("anchorName" in document.documentElement.style)) {
+      const { default: Polyfills } = await import("./chunks/polyfills-CJ5uTmUJ.js");
+      new Polyfills(this.menu);
+    }
+    if (!Object.hasOwn(HTMLElement, "popover")) {
+      await import("./chunks/popover-wbPSyFRj.js");
+    }
+    this.closeOnClick = this.hasAttribute("closeonclick");
+    const { signal } = this.controller;
+    document.addEventListener(
+      "click",
+      (event) => {
+        const { target } = event;
+        if (target !== this.menu && ![...this.items].includes(
+          target
+        ))
+          return;
+        this.handleSelect(event);
+        event.preventDefault();
+      },
+      {
+        signal
+      }
+    );
+    document.addEventListener(
+      "keydown",
+      (event) => {
+        const { target, key } = event;
+        if (target !== this.menu && ![...this.items].includes(
+          target
+        ))
+          return;
+        if (key === "Enter") this.handleSelect(event);
+        event.preventDefault();
+      },
+      {
+        signal
+      }
+    );
+    this.keyboard.attachEventListeners(signal);
+    this.menu.addEventListener("focusin", this.attachKeyboardMenu, {
+      signal
+    });
+    this.menu.addEventListener("focusout", this.detachKeyboardMenu, {
+      signal
+    });
+    this.menu.addEventListener("toggle", this.handleToggle, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+    this.keyboard.detachMenu();
+  }
+  get menu() {
+    const menu = this.querySelector("[popover]");
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a <div popover> element.`);
+    }
+    menu.id = menu.id || this.generatedId();
+    return menu;
+  }
+  get items() {
+    const items = this.menu.querySelectorAll(":scope > *");
+    if (!items) {
+      throw new Error(`${this.localName} must contain some menu items.`);
+    }
+    return items;
+  }
+  get trigger() {
+    const trigger = this.querySelector(
+      `[popovertarget=${this.menu?.id}]`
+    );
+    if (!trigger) {
+      throw new Error(
+        `${this.localName} must contain a <button popovertarget="${this.menu.id}">`
+      );
+    }
+    return trigger;
+  }
+}
+customElements.define("mx-dropmenu", DropMenu);
+export {
+  DropMenu as default
+};
+//# sourceMappingURL=DropMenu.js.map

package/dist/build/DropMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropMenu.js","sources":["../../src/Component/DropMenu/Elements/DropMenu.ts"],"sourcesContent":["/**\n * DropMenu\n * @file Create a DropMenu using the Popover and Anchor APIs\n */\n\nimport { Keyboard, makeAnchor } from \"../../../Utility/utilities\"\n\nexport type DropMenuEvent = CustomEvent<{\n  event: MouseEvent | KeyboardEvent\n  target: HTMLButtonElement | HTMLAnchorElement\n}>\n\nexport default class DropMenu extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard = new Keyboard()\n  closeOnClick: boolean\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  async connectedCallback() {\n    if (!this.menu || !this.trigger) return\n\n    // Polyfill anchor (everywhere so far).\n    if (!(\"anchorName\" in document.documentElement.style)) {\n      const { default: Polyfills } = await import(\"../polyfills.js\")\n      new Polyfills(this.menu) // eslint-disable-line no-new\n    }\n    // Polyfill popover (FF only)\n    if (!Object.hasOwn(HTMLElement, \"popover\")) {\n      await import(\"@oddbird/popover-polyfill\")\n    }\n    this.closeOnClick = this.hasAttribute(\"closeonclick\")\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\n      \"click\",\n      (event: MouseEvent): void => {\n        const { target } = event\n        if (\n          (target as HTMLElement) !== this.menu &&\n          ![...this.items].includes(\n            target as HTMLButtonElement | HTMLAnchorElement,\n          )\n        )\n          return\n        this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    document.addEventListener(\n      \"keydown\",\n      (event: KeyboardEvent): void => {\n        const { target, key } = event\n        if (\n          (target as HTMLElement) !== this.menu &&\n          ![...this.items].includes(\n            target as HTMLButtonElement | HTMLAnchorElement,\n          )\n        )\n          return\n        if (key === \"Enter\") this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    this.keyboard.attachEventListeners(signal)\n    this.menu.addEventListener(\"focusin\", this.attachKeyboardMenu, {\n      signal,\n    })\n    this.menu.addEventListener(\"focusout\", this.detachKeyboardMenu, {\n      signal,\n    })\n    this.menu.addEventListener(\"toggle\", this.handleToggle, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.keyboard.detachMenu()\n  }\n\n  handleSelect = (event: MouseEvent | KeyboardEvent): void => {\n    const target = event.target as HTMLButtonElement | HTMLAnchorElement\n    this.items.forEach(item => {\n      if (!(item instanceof HTMLButtonElement)) return\n      item.setAttribute(\"aria-checked\", String(item === target))\n    })\n    const newEvent: DropMenuEvent = new CustomEvent(\"drop-menu-select\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        event,\n        target,\n      },\n    })\n    this.menu.dispatchEvent(newEvent)\n    if (this.closeOnClick) this.menu.togglePopover()\n  }\n\n  handleToggle = ({ newState }: ToggleEvent): void => {\n    const handleClose = () => this.menu.togglePopover()\n    if (newState === \"open\") {\n      this.keyboard.attachPopup(this.menu.id, handleClose)\n    } else {\n      this.keyboard.detachPopup(this.menu.id)\n    }\n  }\n\n  attachKeyboardMenu = (): void => {\n    this.keyboard.attachMenu(this.menu, this.items)\n  }\n\n  detachKeyboardMenu = (): void => {\n    this.keyboard.detachMenu()\n  }\n\n  get menu(): HTMLDivElement | null {\n    const menu: HTMLDivElement | null = this.querySelector(\"[popover]\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <div popover> element.`)\n    }\n    menu.id = menu.id || this.generatedId()\n    return menu\n  }\n\n  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> {\n    const items: NodeListOf<HTMLButtonElement | HTMLAnchorElement> =\n      this.menu.querySelectorAll(\":scope > *\")\n    if (!items) {\n      throw new Error(`${this.localName} must contain some menu items.`)\n    }\n    return items\n  }\n\n  get trigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      `[popovertarget=${this.menu?.id}]`,\n    )\n    if (!trigger) {\n      throw new Error(\n        `${this.localName} must contain a <button popovertarget=\"${this.menu.id}\">`,\n      )\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-dropmenu\", DropMenu)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-dropmenu\": DropMenu\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/GlobalToggle.js

@@ -0,0 +1,103 @@
+import DisclosureWidget from "./disclosure-widget.js";
+import "./chunks/js.cookie-CiMiGxWx.js";
+import "./io-loader.js";
+import "./breakpoint-loader.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;
+      if (matches) {
+        this.widget.attach();
+        this.target.setAttribute("inert", "");
+        this.trigger.addEventListener("disclosure-toggle", this.handleDisclosure);
+      } 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);
+export {
+  GlobalToggle as default
+};
+//# sourceMappingURL=GlobalToggle.js.map

package/dist/build/GlobalToggle.js.map

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

package/dist/build/InPageAlert.js

@@ -0,0 +1,61 @@
+import { c as createElement, m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
+class InPageAlert extends HTMLElement {
+  constructor() {
+    super();
+    this.handleClose = () => {
+      this.controller.abort();
+      this.remove();
+      this.localStorage = "true";
+      const newEvent = new CustomEvent("InPageAlert-close", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          id: this.id,
+          target: this
+        }
+      });
+      this.dispatchEvent(newEvent);
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+  }
+  connectedCallback() {
+    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 close() {
+    let closeBtn = this.querySelector(".icon--close");
+    if (!closeBtn) {
+      closeBtn = createElement(
+        `<button class="icon icon--close" aria-controls="${this.id}" aria-label="Close InPageAlert" type="button"></button>`
+      );
+      this.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", InPageAlert);
+export {
+  InPageAlert as default
+};
+//# sourceMappingURL=InPageAlert.js.map

package/dist/build/InPageAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InPageAlert.js","sources":["../../src/Component/InPageAlert/Elements/InPageAlert.ts"],"sourcesContent":["/**\n * @file InPageAlerts\n *\n * When a InPageAlert is closed the id is written to local storage.\n * This is checked as the page is re-rendered, if a InPageAlert 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 InPageAlert 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    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: InPageAlert }> =\n      new CustomEvent(\"InPageAlert-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 close(): HTMLButtonElement {\n    let closeBtn: HTMLButtonElement = this.querySelector(\".icon--close\")\n    if (!closeBtn) {\n      closeBtn = createElement(\n        `<button class=\"icon icon--close\" aria-controls=\"${this.id}\" aria-label=\"Close InPageAlert\" type=\"button\"></button>`,\n      ) as HTMLButtonElement\n      this.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\", InPageAlert)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-closable-alert\": InPageAlert\n  }\n}\n"],"names":[],"mappings":";AAUA,MAAqB,oBAAoB,YAAY;AAAA,EAInD,cAAc;AACN;AAwBR,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;AApCtB,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,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,QAA2B;AACzB,QAAA,WAA8B,KAAK,cAAc,cAAc;AACnE,QAAI,CAAC,UAAU;AACF,iBAAA;AAAA,QACT,mDAAmD,KAAK,EAAE;AAAA,MAAA;AAE5D,WAAK,YAAY,QAAQ;AAAA,IAC3B;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/InPageNavigation.js

@@ -0,0 +1,92 @@
+import { m as makeAnchor, c as createElement } from "./chunks/utilities-BIk0P2KX.js";
+class InPageNavigation extends HTMLElement {
+  constructor() {
+    super();
+    this.handleClick = (target) => {
+      this.active = this.items.find((item) => item.link === target);
+      if (!this.links || !this.active) return;
+      this.links.forEach((link) => link.classList.remove("is-active"));
+      this.active.link.classList.add("is-active");
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+    this.headingLevels = this.dataset?.headings || "h2";
+    this.items = [];
+  }
+  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);
+    });
+    const { signal } = this.controller;
+    this.menu.addEventListener(
+      "click",
+      (e) => {
+        const { target } = e;
+        if (!(target instanceof HTMLAnchorElement)) return;
+        this.handleClick(target);
+      },
+      {
+        signal
+      }
+    );
+  }
+  disconnectedCallback() {
+    if (!this.menu || !this.headings) return;
+    this.menu.textContent = "";
+    this.items = [];
+    this.controller.abort();
+  }
+  get menu() {
+    const menu = this.querySelector("ul, ol");
+    if (!menu) {
+      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`);
+    }
+    return menu;
+  }
+  get container() {
+    const selector = this.getAttribute("data-content");
+    if (!selector) {
+      throw new Error(
+        `${this.localName} must have a [data-content] attribute that contains the content selector.`
+      );
+    }
+    return this.closest(selector) || this.parentElement.querySelector(selector);
+  }
+  get headings() {
+    return this.container?.querySelectorAll(this.headingLevels);
+  }
+  get links() {
+    return this.menu?.querySelectorAll("a");
+  }
+  generatedId(heading) {
+    const string = heading?.textContent?.trim();
+    return !string ? "" : makeAnchor(string);
+  }
+  generateAnchor(heading) {
+    const { textContent, id } = heading;
+    const linkText = heading.getAttribute("data-in-page-navigation-title") || textContent;
+    const targetID = id || this.generatedId(heading);
+    if (!id) heading.id = targetID;
+    const item = createElement(
+      `<a href="#${targetID}" class="icon icon--chevron-right">${linkText}</a>`
+    );
+    return item;
+  }
+  generateListItem(heading) {
+    const { tagName } = heading;
+    const item = createElement(
+      `<li class="in-page-navigation__level--${tagName.toLowerCase()}"></li>`
+    );
+    return item;
+  }
+}
+customElements.define("mx-in-page-navigation", InPageNavigation);
+export {
+  InPageNavigation as default
+};
+//# sourceMappingURL=InPageNavigation.js.map

package/dist/build/InPageNavigation.js.map

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

package/dist/build/Navigation.js

@@ -0,0 +1,126 @@
+import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
+import Keyboard from "./keyboard.js";
+import DisclosureWidget from "./disclosure-widget.js";
+class Navigation extends HTMLElement {
+  constructor() {
+    super();
+    this.handleDisclosure = ({ detail }) => {
+      const { isOpen, id } = detail;
+      const { item } = this.subNavs.get(id);
+      item.classList.toggle("nav--open");
+      if (isOpen) {
+        this.keyboard.attachPopup(id, this.handleCloseAny);
+      } else {
+        this.keyboard.detachPopup(id);
+      }
+    };
+    this.handleCloseAny = () => {
+      this.subNavs.forEach(({ widget }) => {
+        if (!widget) return;
+        if (widget.isOpen) widget.handleToggle();
+      });
+    };
+    this.handleFlyout = (event) => {
+      const target = event.target;
+      const parent = target.closest("li");
+      if (!parent) return;
+      const subnav = parent.querySelector(":scope > ul");
+      if (!subnav) return;
+      this.subNavs.forEach(({ widget, list }) => {
+        if (!widget) return;
+        if (widget.isOpen) widget.handleToggle();
+        if (list.id === subnav.id) widget.handleToggle();
+      });
+    };
+    this.handleBreakpoint = ({
+      matches
+    }) => {
+      if (matches) {
+        this.addEventListener("mouseover", this.handleFlyout);
+        this.addEventListener("mouseleave", this.handleCloseAny);
+        if (this.edgeCheck) this.handleEdgeCheck();
+      } else {
+        this.removeEventListener("mouseover", this.handleFlyout);
+        this.removeEventListener("mouseleave", this.handleCloseAny);
+      }
+    };
+    this.internals_ = this.attachInternals();
+    this.controller = new AbortController();
+    this.flyout = this.hasAttribute("flyout");
+  }
+  connectedCallback() {
+    const { signal } = this.controller;
+    this.keyboard = new Keyboard();
+    this.keyboard.attachEventListeners(signal);
+    this.addEventListener("focusin", () => {
+      this.keyboard.attachMenu(this, this.links);
+    });
+    this.addEventListener("focusout", () => {
+      this.keyboard.detachMenu();
+    });
+    if (!this.lists.length) return;
+    this.subNavs = /* @__PURE__ */ new Map();
+    this.lists.forEach((list, index) => {
+      const item = list.closest("li");
+      const link = item.querySelector(":scope > a");
+      const id = makeAnchor(`subnav-${index}-${link.textContent}`, 30);
+      const trigger = item.querySelector(
+        ":scope > button.nav__toggle"
+      );
+      if (item && link && trigger) {
+        const labelId = `list-label-${id}`;
+        link.setAttribute("id", labelId);
+        list.setAttribute("id", id);
+        list.setAttribute("aria-labelledby", labelId);
+        const widget = new DisclosureWidget(trigger, list);
+        widget.init();
+        this.subNavs.set(id, { item, trigger, list, link, widget });
+      }
+    });
+    this.addEventListener("disclosure-toggle", this.handleDisclosure);
+    if (!this.flyout) return;
+    this.edgeCheck = this.hasAttribute("edgeCheck");
+    this.mq = this.getAttribute("mq") || "(min-width: 720px)";
+    this.handleBreakpoint(this.breakpoint);
+    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
+      signal
+    });
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+    this.subNavs.forEach((subNav) => subNav.widget.detach());
+  }
+  handleEdgeCheck() {
+    const windowInnerWidth = window.innerWidth;
+    const edgeCheck = new IntersectionObserver(
+      ([{ boundingClientRect, target }], obs) => {
+        if (windowInnerWidth < boundingClientRect.right)
+          target.classList.add("nav--reverse");
+        obs.disconnect();
+      }
+    );
+    this.subNavs.forEach(({ list }) => {
+      edgeCheck.observe(list);
+      const nestedLists = list.querySelectorAll("ul");
+      nestedLists.forEach((nestedList) => edgeCheck.observe(nestedList));
+    });
+  }
+  get links() {
+    const links = this.querySelectorAll("a");
+    if (!links.length) {
+      throw new Error(`${this.localName} must links`);
+    }
+    return links;
+  }
+  get lists() {
+    return this.querySelectorAll("li > ul");
+  }
+  get breakpoint() {
+    return window.matchMedia(this.mq);
+  }
+}
+customElements.define("mx-nav", Navigation);
+export {
+  Navigation as default
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/build/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../src/Component/Navigation/Elements/Navigation.ts"],"sourcesContent":["/**\n * Main Navigation\n * @file Drop down navigation handler.\n */\n\nimport {\n  Keyboard,\n  makeAnchor,\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\ntype SubNavType = {\n  list: HTMLElement\n  trigger: HTMLButtonElement\n  link: HTMLAnchorElement\n  item?: HTMLLIElement\n  widget?: DisclosureWidget\n  linkWidget?: DisclosureWidget\n}\n\nexport default class Navigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard\n  subNavs?: Map<string, SubNavType>\n  flyout?: boolean\n  edgeCheck!: boolean\n  mq!: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.flyout = this.hasAttribute(\"flyout\")\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Add keyboard navigation events.\n    this.keyboard = new Keyboard()\n    this.keyboard.attachEventListeners(signal)\n\n    // Add keyboard focus handler for menu links.\n    this.addEventListener(\"focusin\", () => {\n      this.keyboard.attachMenu(this, this.links)\n    })\n    this.addEventListener(\"focusout\", () => {\n      this.keyboard.detachMenu()\n    })\n\n    if (!this.lists.length) return\n    this.subNavs = new Map()\n    this.lists.forEach((list: HTMLUListElement, index: number): void => {\n      const item: HTMLLIElement = list.closest(\"li\")\n      const link: HTMLAnchorElement = item.querySelector(\":scope > a\")\n      const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)\n      const trigger: HTMLButtonElement = item.querySelector(\n        \":scope > button.nav__toggle\",\n      )\n      if (item && link && trigger) {\n        const labelId = `list-label-${id}`\n        link.setAttribute(\"id\", labelId)\n        list.setAttribute(\"id\", id)\n        list.setAttribute(\"aria-labelledby\", labelId)\n        const widget = new DisclosureWidget(trigger, list)\n        widget.init()\n        this.subNavs.set(id, { item, trigger, list, link, widget })\n      }\n    })\n\n    this.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n\n    if (!this.flyout) return\n    this.edgeCheck = this.hasAttribute(\"edgeCheck\")\n    this.mq = this.getAttribute(\"mq\") || \"(min-width: 720px)\"\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen, id } = detail\n    const { item } = this.subNavs.get(id)\n    item.classList.toggle(\"nav--open\")\n    if (isOpen) {\n      this.keyboard.attachPopup(id, this.handleCloseAny)\n    } else {\n      this.keyboard.detachPopup(id)\n    }\n  }\n\n  handleCloseAny = (): void => {\n    this.subNavs.forEach(({ widget }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n    })\n  }\n\n  handleFlyout = (event: MouseEvent): void => {\n    const target = event.target as HTMLElement\n    const parent: HTMLLIElement = target.closest(\"li\")\n    if (!parent) return\n    const subnav: HTMLUListElement = parent.querySelector(\":scope > ul\")\n    if (!subnav) return\n    this.subNavs.forEach(({ widget, list }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n      if (list.id === subnav.id) widget.handleToggle()\n    })\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (matches) {\n      this.addEventListener(\"mouseover\", this.handleFlyout)\n      this.addEventListener(\"mouseleave\", this.handleCloseAny)\n      if (this.edgeCheck) this.handleEdgeCheck()\n    } else {\n      this.removeEventListener(\"mouseover\", this.handleFlyout)\n      this.removeEventListener(\"mouseleave\", this.handleCloseAny)\n    }\n  }\n\n  handleEdgeCheck() {\n    const windowInnerWidth: number = window.innerWidth\n    const edgeCheck: IntersectionObserver = new IntersectionObserver(\n      ([{ boundingClientRect, target }], obs) => {\n        if (windowInnerWidth < boundingClientRect.right)\n          target.classList.add(\"nav--reverse\")\n        obs.disconnect()\n      },\n    )\n    this.subNavs.forEach(({ list }: SubNavType): void => {\n      edgeCheck.observe(list)\n      const nestedLists: NodeListOf<HTMLUListElement> =\n        list.querySelectorAll(\"ul\")\n      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))\n    })\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | null {\n    const links: NodeListOf<HTMLAnchorElement> | null =\n      this.querySelectorAll(\"a\")\n    if (!links.length) {\n      throw new Error(`${this.localName} must links`)\n    }\n    return links\n  }\n\n  get lists(): NodeListOf<HTMLUListElement> | null {\n    return this.querySelectorAll(\"li > ul\")\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-nav\", Navigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-nav\": Navigation\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/Sticky.js

@@ -0,0 +1,63 @@
+import { c as createElement } from "./chunks/utilities-BIk0P2KX.js";
+class Sticky extends HTMLElement {
+  constructor() {
+    super();
+    this.root = null;
+    this.rootMargin = "0px 0px 0px 0px";
+    this.thresholds = [0];
+    this.internals_ = this.attachInternals();
+  }
+  connectedCallback() {
+    this.offsetPropName = this.getAttribute("offsetpropname");
+    const options = {
+      root: this.root,
+      rootMargin: this.rootMargin,
+      thresholds: this.thresholds
+    };
+    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {
+      const isSticky = boundingClientRect.y < 0;
+      this.classList.toggle("is-stuck", isSticky);
+      const newEvent = new CustomEvent("sticky-toggle", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          isSticky,
+          options,
+          target: this
+        }
+      });
+      this.dispatchEvent(newEvent);
+    }, options);
+    this.iO.observe(this.trigger);
+    if (!this.offsetPropName) return;
+    this.rO = new ResizeObserver((entries) => {
+      entries.forEach(({ borderBoxSize }) => {
+        const [{ blockSize }] = borderBoxSize;
+        document.body.style.setProperty(
+          this.offsetPropName,
+          `${blockSize.toFixed(1)}px`
+        );
+      });
+    });
+    this.rO.observe(this);
+  }
+  disconnectedCallback() {
+    this.iO.unobserve(this.trigger);
+    this.rO.disconnect();
+  }
+  get trigger() {
+    let trigger = this.querySelector(".sticky__trigger");
+    if (!trigger) {
+      trigger = createElement(
+        '<div class="sticky__trigger"></div>'
+      );
+      this.insertAdjacentElement("beforebegin", trigger);
+    }
+    return trigger;
+  }
+}
+customElements.define("mx-sticky", Sticky);
+export {
+  Sticky as default
+};
+//# sourceMappingURL=Sticky.js.map

package/dist/build/Sticky.js.map

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