@watermarkinsights/ripple 3.8.0-2 → 3.8.0-5

package/dist/esm/wm-modal.entry.js

@@ -1,170 +1,170 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cd8f9ae2.js';
-import { g as generateId, j as getFirstFocusableDescendant, c as checkForActiveElInShadow } from './functions-6cd52dcf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-66f8130e.js';
+import { g as generateId, j as getFirstFocusableDescendant, c as checkForActiveElInShadow } from './functions-7eebdc16.js';
 
 const wmModalCss = "wm-modal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal>*{width:80vw;max-width:750px;background:#fff}wm-modal>*:focus{outline:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem}wm-modal wm-modal-header{z-index:2003}wm-modal wm-modal-footer{z-index:2003}wm-modal>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal.wm-modal wm-modal-header{border-bottom:1px solid #f4f3f6}wm-modal.wm-modal wm-modal-footer{border-top:1px solid #f4f3f6}@media only screen and (max-width: 768px){wm-modal.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal.wm-modal>*{max-width:none;width:100vw}wm-modal.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal.wm-dialog>:not(wm-modal-header):not(wm-modal-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal.hide{visibility:hidden}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
 
-let Modal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.focusLastElement = createEvent(this, "focusLastElement", 7);
-    this.focusFirstElement = createEvent(this, "focusFirstElement", 7);
-    this.wmModalCloseTriggered = createEvent(this, "wmModalCloseTriggered", 3);
-    this.wmCloseTriggered = createEvent(this, "wmCloseTriggered", 7);
-    this.wmModalPrimaryTriggered = createEvent(this, "wmModalPrimaryTriggered", 7);
-    this.wmPrimaryTriggered = createEvent(this, "wmPrimaryTriggered", 7);
-    this.wmModalSecondaryTriggered = createEvent(this, "wmModalSecondaryTriggered", 7);
-    this.wmSecondaryTriggered = createEvent(this, "wmSecondaryTriggered", 7);
-    this.open = false;
-    this.isOpen = false; // DEPRECATED in favor of open
-    this.elementToFocus = "";
-    this.modalType = null;
-    this.isTypeDialog = null;
-    this.bodyFocusListener = () => this.redirectFocusOnBody();
-  }
-  get tempOpen() {
-    // instances of this.tempOpen should be replaced with this.open once isOpen is fully phased out
-    return this.open || this.isOpen;
-  }
-  get tempModalType() {
-    return this.modalType ? this.modalType : this.isTypeDialog ? "dialog" : "modal";
-  }
-  //App can open modal by toggling the prop
-  toggleModal() {
-    this.tempOpen ? this.showModal() : this.hideModal();
-  }
-  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
-  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
-  // @Listen("wmShowModal", { target: "window" })
-  // doesEventMatchId(ev: CustomEvent) {
-  //   ev.detail === this.uid && this.showModal();
-  // }
-  showModal() {
-    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
-    document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
-    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
-    document.body.tabIndex = 0;
-    document.body.removeEventListener("focus", this.bodyFocusListener, true);
-    document.body.addEventListener("focus", this.bodyFocusListener, true);
-    window.requestAnimationFrame(() => {
-      this.setElToFocusOnOpen();
-      window.requestAnimationFrame(() => this.focusOnOpen.focus()); //Bring focus to element inside modal
-    });
-  }
-  handleClick(ev) {
-    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpen.focus();
-  }
-  closeModalOnEscape(ev) {
-    if (ev.key === "Escape") {
-      // stops propagation prevents nested modal from closing all at once
-      ev.stopPropagation();
-      this.wmModalCloseTriggered.emit();
-      this.wmCloseTriggered.emit(); // deprecated
-      this.open = false;
-    }
-  }
-  //Close the modal and focus the triggering element when the modal buttons emit their events
-  hideModal() {
-    document.body.style.overflow = "visible";
-    document.body.tabIndex = -1;
-    document.body.removeEventListener("focus", this.bodyFocusListener, true);
-    window.requestAnimationFrame(() => this.focusOnClose.focus()); //Return focus
-  }
-  componentWillLoad() {
-    if (this.isOpen) {
-      console.warn("wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.");
-    }
-    if (this.isTypeDialog) {
-      console.warn("wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.");
-    }
-    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
-      if (!this.el.id) {
-        throw new Error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
-      }
-    }
-    this.uid = this.el.id ? this.el.id : generateId();
-  }
-  componentDidLoad() {
-    if (this.tempOpen) {
-      this.showModal();
-    }
-  }
-  async emitCloseEvent() {
-    this.wmModalCloseTriggered.emit();
-    this.wmCloseTriggered.emit(); // deprecated
-  }
-  async emitPrimaryEvent() {
-    this.wmModalPrimaryTriggered.emit();
-    this.wmPrimaryTriggered.emit(); // deprecated
-  }
-  async emitSecondaryEvent() {
-    this.wmModalSecondaryTriggered.emit();
-    this.wmSecondaryTriggered.emit(); // deprecated
-  }
-  //If the dev hasn't specified an element to focus, element to focus first will be the close (X) button
-  setElToFocusOnOpen() {
-    const closeBtn = getFirstFocusableDescendant(this.el.querySelector(`#wm-modal-close-${this.uid}`));
-    if (this.elementToFocus) {
-      if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
-        this.setAriaDescribedbyOnModal();
-        this.elementToFocus = `wm-${this.elementToFocus}-${this.uid}`;
-      }
-      const elToFocus = this.el.querySelector(`#${this.elementToFocus}`);
-      if (elToFocus) {
-        const firstEl = getFirstFocusableDescendant(elToFocus);
-        if (firstEl) {
-          this.focusOnOpen = firstEl;
-        }
-        else {
-          console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
-          this.focusOnOpen = closeBtn;
-        }
-      }
-      else {
-        console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
-        this.focusOnOpen = closeBtn;
-      }
-    }
-    else {
-      this.focusOnOpen = closeBtn;
-    }
-  }
-  setAriaDescribedbyOnModal() {
-    const modalBody = document.getElementById(`content-${this.uid}`);
-    if (!modalBody) {
-      console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
-    }
-    else {
-      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
-    }
-  }
-  setElToFocusOnClose() {
-    const elToFocus = document.activeElement;
-    if (elToFocus.tagName === "WM-MENUITEM") {
-      this.focusOnClose = elToFocus.parentElement;
-    }
-    else {
-      this.focusOnClose = checkForActiveElInShadow(elToFocus);
-    }
-  }
-  redirectFocusOnBody() {
-    if (document.activeElement.tagName === "BODY") {
-      this.setElToFocusOnOpen();
-      this.focusOnOpen.focus();
-    }
-  }
-  render() {
-    return (h(Host, { class: `${this.tempOpen ? "" : "hide "}${"wm-" + this.tempModalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.tempOpen ? 0 : null, onFocus: () => {
-        this.focusLastElement.emit();
-      } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
-        this.focusFirstElement.emit();
-      } })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["toggleModal"],
-    "isOpen": ["toggleModal"]
-  }; }
-};
+const Modal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focusLastElement = createEvent(this, "focusLastElement", 7);
+    this.focusFirstElement = createEvent(this, "focusFirstElement", 7);
+    this.wmModalCloseTriggered = createEvent(this, "wmModalCloseTriggered", 3);
+    this.wmCloseTriggered = createEvent(this, "wmCloseTriggered", 7);
+    this.wmModalPrimaryTriggered = createEvent(this, "wmModalPrimaryTriggered", 7);
+    this.wmPrimaryTriggered = createEvent(this, "wmPrimaryTriggered", 7);
+    this.wmModalSecondaryTriggered = createEvent(this, "wmModalSecondaryTriggered", 7);
+    this.wmSecondaryTriggered = createEvent(this, "wmSecondaryTriggered", 7);
+    this.open = false;
+    this.isOpen = false; // DEPRECATED in favor of open
+    this.elementToFocus = "";
+    this.modalType = null;
+    this.isTypeDialog = null;
+    this.bodyFocusListener = () => this.redirectFocusFromBody();
+  }
+  get tempOpen() {
+    // instances of this.tempOpen should be replaced with this.open once isOpen is fully phased out
+    return this.open || this.isOpen;
+  }
+  get tempModalType() {
+    return this.modalType ? this.modalType : this.isTypeDialog ? "dialog" : "modal";
+  }
+  //App can open modal by toggling the prop
+  toggleModal() {
+    this.tempOpen ? this.showModal() : this.hideModal();
+  }
+  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+  // @Listen("wmShowModal", { target: "window" })
+  // doesEventMatchId(ev: CustomEvent) {
+  //   ev.detail === this.uid && this.showModal();
+  // }
+  handleClick(ev) {
+    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpen.focus();
+  }
+  closeModalOnEscape(ev) {
+    if (ev.key === "Escape") {
+      // stops propagation prevents nested modal from closing all at once
+      ev.stopPropagation();
+      this.wmModalCloseTriggered.emit();
+      this.wmCloseTriggered.emit(); // deprecated
+      this.open = false;
+    }
+  }
+  showModal() {
+    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
+    document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
+    document.body.tabIndex = 0;
+    document.body.removeEventListener("focus", this.bodyFocusListener, true);
+    document.body.addEventListener("focus", this.bodyFocusListener, true);
+    window.requestAnimationFrame(() => {
+      this.setElToFocusOnOpen();
+      window.requestAnimationFrame(() => this.focusOnOpen.focus()); //Bring focus to element inside modal
+    });
+  }
+  //Close the modal and focus the triggering element when the modal buttons emit their events
+  hideModal() {
+    document.body.style.overflow = "visible";
+    document.body.tabIndex = -1;
+    document.body.removeEventListener("focus", this.bodyFocusListener, true);
+    window.requestAnimationFrame(() => this.focusOnClose.focus()); //Return focus
+  }
+  componentWillLoad() {
+    if (this.isOpen) {
+      console.warn("wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.");
+    }
+    if (this.isTypeDialog) {
+      console.warn("wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.");
+    }
+    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+      if (!this.el.id) {
+        console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
+      }
+    }
+    this.uid = this.el.id ? this.el.id : generateId();
+  }
+  componentDidLoad() {
+    if (this.tempOpen) {
+      this.showModal();
+    }
+  }
+  async emitCloseEvent() {
+    this.wmModalCloseTriggered.emit();
+    this.wmCloseTriggered.emit(); // deprecated
+  }
+  async emitPrimaryEvent() {
+    this.wmModalPrimaryTriggered.emit();
+    this.wmPrimaryTriggered.emit(); // deprecated
+  }
+  async emitSecondaryEvent() {
+    this.wmModalSecondaryTriggered.emit();
+    this.wmSecondaryTriggered.emit(); // deprecated
+  }
+  //If the dev hasn't specified an element to focus, element to focus first will be the close (X) button
+  setElToFocusOnOpen() {
+    const closeBtn = getFirstFocusableDescendant(this.el.querySelector(`#wm-modal-close-${this.uid}`));
+    if (this.elementToFocus) {
+      if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+        this.setAriaDescribedbyOnModal();
+        this.elementToFocus = `wm-${this.elementToFocus}-${this.uid}`;
+      }
+      const elToFocus = this.el.querySelector(`#${this.elementToFocus}`);
+      if (elToFocus) {
+        const firstEl = getFirstFocusableDescendant(elToFocus);
+        if (firstEl) {
+          this.focusOnOpen = firstEl;
+        }
+        else {
+          console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+          this.focusOnOpen = closeBtn;
+        }
+      }
+      else {
+        console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.");
+        this.focusOnOpen = closeBtn;
+      }
+    }
+    else {
+      this.focusOnOpen = closeBtn;
+    }
+  }
+  setAriaDescribedbyOnModal() {
+    const modalBody = document.getElementById(`content-${this.uid}`);
+    if (!modalBody) {
+      console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+    }
+    else {
+      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+    }
+  }
+  setElToFocusOnClose() {
+    const elToFocus = document.activeElement;
+    if (elToFocus.tagName === "WM-MENUITEM") {
+      this.focusOnClose = elToFocus.parentElement;
+    }
+    else {
+      this.focusOnClose = checkForActiveElInShadow(elToFocus);
+    }
+  }
+  redirectFocusFromBody() {
+    if (document.activeElement.tagName === "BODY") {
+      this.setElToFocusOnOpen();
+      this.focusOnOpen.focus();
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.tempOpen ? "" : "hide "}${"wm-" + this.tempModalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.tempOpen ? 0 : null, onFocus: () => {
+        this.focusLastElement.emit();
+      } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
+        this.focusFirstElement.emit();
+      } })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["toggleModal"],
+    "isOpen": ["toggleModal"]
+  }; }
+};
 Modal.style = wmModalCss;
 
 export { Modal as wm_modal };

package/dist/esm/wm-navigation_3.entry.js

@@ -0,0 +1,233 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-66f8130e.js';
+import { i as intl, r as throttle } from './functions-7eebdc16.js';
+
+const wmNavigationCss = ":host{z-index:10}:host(.collapsible){z-index:5000}.nav{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.nav{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav ul{visibility:hidden}.nav[aria-expanded=true]{-webkit-transform:translateX(0);transform:translateX(0)}.nav[aria-expanded=true] ul{visibility:visible}.nav .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";
+
+const Navigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmNavigationStateChanged = createEvent(this, "wmNavigationStateChanged", 7);
+    this.open = false;
+    this.isTabbing = false;
+    this.mainNavigationMessage = intl.formatMessage({
+      id: "navigation.mainNavigation",
+      defaultMessage: "Main navigation",
+      description: "Label describing the site navigation, for screen reader users",
+    });
+    this.openTooltipMessage = intl.formatMessage({
+      id: "global.openVerb",
+      defaultMessage: "Open",
+      description: "For a button, to open a user interface element",
+    });
+    this.closeTooltipMessage = intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+    this.throttledRerender = throttle(() => forceUpdate(this.el), 50);
+  }
+  get isCollapsible() {
+    return window.innerWidth < 1024;
+  }
+  get ariaExpanded() {
+    return this.isCollapsible
+      ? // if component is in collapsible mode, set aria-expanded according to expanded state
+        this.open.toString()
+      : // otherwise, do not render attr at all
+        undefined;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  closeOnEscape(ev) {
+    if (ev.key === "Escape") {
+      this.open = false;
+    }
+  }
+  handleWindowResize() {
+    // for component to react when breakpoint is crossed
+    // (doesn't rerender on window resize)
+    this.throttledRerender();
+  }
+  handleStateChange() {
+    if (this.isCollapsible) {
+      this.wmNavigationStateChanged.emit();
+      this.open ? this.expand() : this.collapse();
+    }
+  }
+  componentWillLoad() {
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".toggle").focus();
+    };
+    if (this.isCollapsible && this.open) {
+      // hamburger needs to know if open was initially set to true
+      this.wmNavigationStateChanged.emit();
+      this.expand();
+    }
+  }
+  componentDidLoad() {
+    // Should fail silently if not found as devs may decide not to use the hamburger component.
+    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
+  }
+  redirectFocusFromBody() {
+    if (document.activeElement.tagName === "BODY") {
+      this.el.focus();
+    }
+  }
+  expand() {
+    // listen to focus on body and redirect to the component
+    document.body.tabIndex = 0;
+    document.body.addEventListener("focus", this.redirectFocusFromBody.bind(this), true);
+    // wait for nav to be expanded otherwise tooltip will be misplaced.
+    setTimeout(() => this.toggleEl.focus(), 250);
+  }
+  collapse() {
+    // rm event listener on body
+    document.body.tabIndex = -1;
+    document.body.removeEventListener("focus", this.redirectFocusFromBody.bind(this));
+    // should fail silently if el doesn't exist
+    // (dev may have chosen not to use the hamburger component)
+    this.hamburgerBtn && this.hamburgerBtn.focus();
+  }
+  focusLastItem() {
+    const items = this.el.querySelectorAll("wm-navigation-item");
+    const lastItem = Array.from(items).pop();
+    lastItem.focus();
+  }
+  renderOverlay() {
+    return (h("div", { class: "overlay", onClick: () => {
+        this.open = false;
+      } }));
+  }
+  render() {
+    return (h(Host, { class: this.isCollapsible ? "collapsible" : undefined }, this.open ? this.renderOverlay() : "", h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() }), h("nav", { class: "nav", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
+        this.open = !this.open;
+      } })), h("ul", { class: "navlist" }, h("slot", null))), h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleStateChange"]
+  }; }
+};
+Navigation.style = wmNavigationCss;
+
+const wmNavigationHamburgerCss = "@charset \"UTF-8\";:host{width:3.75rem;height:3.75rem}button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){button{display:initial}}";
+
+const NavigationHamburger = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()
+    this.isTabbing = false;
+    this.open = false;
+    this.showNavMessage = intl.formatMessage({
+      id: "navigation.showNavigation",
+      defaultMessage: "Show navigation",
+      description: "For user interface element opening a navigation menu",
+    });
+  }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  // this also works on initial load because event is fired then
+  handleNavigationStateChanged(ev) {
+    this.open = ev.target.open;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      // if (!this.disabled) {
+      this.shadowRoot.querySelector("button").focus();
+      // prevent tooltip from showing on programmatic focus
+      requestAnimationFrame(() => {
+        this.tooltipVisible = false;
+      });
+      // }
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    if (!this.navId) {
+      console.error("wm-navigation-hamburger: nav-id is a required prop");
+    }
+  }
+  componentDidLoad() {
+    this.nav = document.getElementById(this.navId);
+    if (!this.nav) {
+      console.error(`wm-navigation-hamburger: wm-navigation with id ${this.navId} was not found`);
+    }
+  }
+  showTooltip() {
+    this.tooltipEl.textContent = this.showNavMessage;
+    this.tooltipEl.style.top = "1.125rem";
+    this.tooltipEl.style.left = "2.75rem";
+    this.tooltipEl.style.transitionDelay = "500ms";
+    this.tooltipEl.style.opacity = "1";
+    // tooltip is only visible after the transition delay.
+    // This also fixes an issue for keyboard users:
+    // if they tab to a button out of screen bounds, the page scrolls
+    // and hideTooltip() would be triggered before the tooltip would show
+    setTimeout(() => {
+      this.tooltipVisible = true;
+    }, 500);
+  }
+  hideTooltip() {
+    this.tooltipEl.style.transitionDelay = "0s";
+    this.tooltipEl.style.opacity = "0";
+    this.tooltipVisible = false;
+  }
+  showTooltipForKeyboardUsers() {
+    if (this.isTabbing) {
+      this.showTooltip();
+    }
+  }
+  handleClick() {
+    this.hideTooltip();
+    this.nav.open = !this.nav.open;
+  }
+  render() {
+    return (h(Host, { class: this.open ? "nav-open" : "nav-closed" }, h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
+  }
+  get el() { return getElement(this); }
+};
+NavigationHamburger.style = wmNavigationHamburgerCss;
+
+const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:\"\";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}";
+
+const NavigationItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isTabbing = false;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    this.el.focus = function () {
+      this.shadowRoot.querySelector(".link").focus();
+    };
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
+  }
+  get el() { return getElement(this); }
+};
+NavigationItem.style = wmNavigationItemCss;
+
+export { Navigation as wm_navigation, NavigationHamburger as wm_navigation_hamburger, NavigationItem as wm_navigation_item };