@uoguelph/web-components 0.0.17 → 0.0.18

package/dist/components/uofg-modal.js

@@ -0,0 +1,139 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { F as FontAwesomeIcon } from './font-awesome-icon.js';
+import { p as faTimes } from './index2.js';
+import { g as getAllFocusableElements } from './utils.js';
+
+const uofgModalCss = ":host{visibility:visible !important;position:relative !important}:focus-visible{outline:2px solid #ffc72a}*{box-sizing:border-box}#uofg-modal{display:flex;position:fixed;top:0;left:0;z-index:10000;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5);visibility:hidden;opacity:0;padding:2rem;transition-duration:0.3s;transition-timing-function:ease-in-out;transition-property:visibility, opacity}#uofg-modal #uofg-modal-dismiss{display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:0;padding:0.5rem;height:3.5rem;width:3.5rem;font-size:2rem;line-height:1;color:var(--uofg-modal-dismiss-color, #fff);background-color:transparent;border:none;cursor:pointer;z-index:2}#uofg-modal #uofg-modal-dismiss>svg{display:block;height:1em;fill:currentColor}#uofg-modal>#uofg-modal-content{position:absolute;left:50%;transition:transform 0.3s ease-in-out;transform:translate(-50%, -50px);z-index:1}@media (prefers-reduced-motion: reduce){#uofg-modal>#uofg-modal-content{transition:none}}#uofg-modal>#uofg-modal-content.centered{top:50%;transform:translate(-50%, calc(-50% - 50px))}#uofg-modal.open{visibility:visible;opacity:1}#uofg-modal.open #uofg-modal-content{visibility:visible;opacity:1;transform:translate(-50%, 0)}#uofg-modal.open #uofg-modal-content.centered{transform:translate(-50%, -50%)}";
+
+const UofgModal$1 = /*@__PURE__*/ proxyCustomElement(class UofgModal extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.alertDialog = false;
+    this.centered = false;
+    this.staticBackdrop = false;
+    this.autoOpen = false;
+    this.isOpen = false;
+  }
+  connectedCallback() {
+    // Bind event handlers so that 'this' is always the component instance.
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    if (this.autoOpen) {
+      this.isOpen = true;
+    }
+  }
+  handleClick(e) {
+    if (!this.staticBackdrop && e.target === e.currentTarget) {
+      this.isOpen = false;
+    }
+  }
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isOpen = false;
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === 'Tab') {
+      const focusableElements = getAllFocusableElements(this.el);
+      const firstFocusable = this.dismissButton; // The dismiss button is always the first focusable element in the modal.
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+      if (e.target === firstFocusable && e.shiftKey) {
+        e.preventDefault();
+        lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.focus();
+      }
+      else if (e.target === lastFocusable && !e.shiftKey) {
+        e.preventDefault();
+        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+      }
+    }
+  }
+  handleIsOpenChange(newValue) {
+    if (newValue === true) {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            this.dismissButton.focus();
+          });
+        });
+      });
+    }
+  }
+  render() {
+    return (h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.isOpen ? (this.alertDialog ? 'alertdialog' : 'dialog') : '', "aria-modal": this.isOpen, "aria-label": this.label, "aria-hidden": !this.isOpen, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("div", { id: "uofg-modal-content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { icon: faTimes })), h("slot", null))));
+  }
+  /**
+   * Get the current state of the modal.
+   * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
+   */
+  async getState() {
+    return this.isOpen;
+  }
+  /**
+   * Set the state of the modal.
+   * @param value The new state, set it to true to open the modal, or false to close the modal.
+   */
+  async setState(value) {
+    this.isOpen = value;
+  }
+  /**
+   * Toggle the state of the modal.
+   * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
+    return this.isOpen;
+  }
+  /**
+   * Closes the modal.
+   * @returns empty Promise.
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  /**
+   * Opens the modal.
+   * @returns empty Promise.
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "isOpen": ["handleIsOpenChange"]
+  }; }
+  static get style() { return uofgModalCss; }
+}, [1, "uofg-modal", {
+    "label": [1],
+    "alertDialog": [4, "alert-dialog"],
+    "centered": [4],
+    "staticBackdrop": [4, "static-backdrop"],
+    "autoOpen": [4, "auto-open"],
+    "isOpen": [32],
+    "getState": [64],
+    "setState": [64],
+    "toggle": [64],
+    "close": [64],
+    "open": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["uofg-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "uofg-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, UofgModal$1);
+      }
+      break;
+  } });
+}
+
+const UofgModal = UofgModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UofgModal, defineCustomElement };

package/dist/components/utils.js

@@ -0,0 +1,8 @@
+const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
+const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const getAllFocusableElements = (container) => {
+  const query = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])';
+  return Array.from(container.querySelectorAll(query));
+};
+
+export { PREFERS_REDUCED_MOTION as P, WEB_ANIMATIONS_SUPPORTED as W, getAllFocusableElements as g };

package/dist/esm/{index-8ff56dd3.js → index-ebf79156.js}

@@ -917,7 +917,9 @@ const patch = (oldVNode, newVNode) => {
             isSvgMode = tag === 'svg' ? true : tag === 'foreignObject' ? false : isSvgMode;
         }
         {
-            {
+            if (tag === 'slot')
+                ;
+            else {
                 // either this is the first render of an element OR it's an update
                 // AND we already know it's possible it could have changed
                 // this updates the element's css classes, attrs, props, listeners, etc.
@@ -1495,12 +1497,16 @@ const connectedCallback = (elm) => {
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {

package/dist/esm/loader.js

@@ -1,9 +1,9 @@
-import { b as bootstrapLazy } from './index-8ff56dd3.js';
-export { s as setNonce } from './index-8ff56dd3.js';
+import { b as bootstrapLazy } from './index-ebf79156.js';
+export { s as setNonce } from './index-ebf79156.js';
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return bootstrapLazy([["uofg-back-to-top_4",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-footer"],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]},[[0,"onChildListChange","handleChildListChange"]]]]]], options);
+  return bootstrapLazy([["uofg-alert_6",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-alert"],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-footer"],[1,"uofg-modal",{"label":[1],"alertDialog":[4,"alert-dialog"],"centered":[4],"staticBackdrop":[4,"static-backdrop"],"autoOpen":[4,"auto-open"],"isOpen":[32],"getState":[64],"setState":[64],"toggle":[64],"close":[64],"open":[64]}],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/{uofg-back-to-top_4.entry.js → uofg-alert_6.entry.js}

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, g as getElement, c as createEvent, H as Host } from './index-8ff56dd3.js';
+import { h, r as registerInstance, g as getElement, c as createEvent, H as Host } from './index-ebf79156.js';
 
 const FontAwesomeIcon = props => {
   const width = props.icon.icon[0];
@@ -7,6 +7,24 @@ const FontAwesomeIcon = props => {
   return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(path => h("path", { d: path }))) : (h("path", { d: iconPathData }))));
 };
 
+var faCircleExclamation = {
+  prefix: 'far',
+  iconName: 'circle-exclamation',
+  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"]
+};
+
+const uofgAlertCss = ":host{display:block}*{box-sizing:border-box}#uofg-alert{display:flex;flex-direction:column;font-size:2rem}#uofg-alert #uofg-alert-title{display:flex;align-items:center;font-size:2.25rem;padding:2rem;color:white;background-color:#C10631}#uofg-alert #uofg-alert-title>svg{margin-right:1rem;fill:currentColor;height:1.5em}#uofg-alert #uofg-alert-body{display:flex;flex-direction:column;padding:1.5rem 2rem;background-color:white}#uofg-alert #uofg-alert-body slot[name=subtitle]::slotted(*){font-size:2rem;margin-bottom:2rem;font-weight:bold}#uofg-alert #uofg-alert-body slot[name=message]::slotted(*){font-size:1.6rem}#uofg-alert #uofg-alert-footer{display:flex;padding:1rem 2rem;background-color:#DDDDDD;font-size:1.4rem}";
+
+const UofgAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { id: "uofg-alert" }, h("div", { id: "uofg-alert-title" }, h(FontAwesomeIcon, { icon: faCircleExclamation }), h("slot", { name: "title" })), h("div", { id: "uofg-alert-body" }, h("slot", { name: "subtitle" }), h("slot", { name: "message" })), h("div", { id: "uofg-alert-footer" }, h("slot", { name: "footer" }))));
+  }
+};
+UofgAlert.style = uofgAlertCss;
+
 var faTrees = {
   prefix: 'fas',
   iconName: 'trees',
@@ -78,6 +96,12 @@ var faMagnifyingGlass = {
   icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
 };
 var faSearch = faMagnifyingGlass;
+var faXmark = {
+  prefix: 'fas',
+  iconName: 'xmark',
+  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"]
+};
+var faTimes = faXmark;
 var faBriefcase = {
   prefix: 'fas',
   iconName: 'briefcase',
@@ -307,17 +331,13 @@ UofgHeader.style = uofgHeaderCss;
 
 const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
 const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const getAllFocusableElements = (container) => {
+  const query = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])';
+  return Array.from(container.querySelectorAll(query));
+};
 
 const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
 const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
-const observer = new MutationObserver(mutations => {
-  for (const mutation of mutations) {
-    mutation.target.dispatchEvent(new CustomEvent('childListChange', { bubbles: false }));
-  }
-});
-const observerConfig = {
-  childList: true,
-};
 const UofgMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -329,50 +349,31 @@ const UofgMenu = class {
     this.button = null;
     this.content = null;
     this.contentComputedStyle = null;
+    this.observer = new MutationObserver(this.handleMutation);
     this.isExpanded = false;
     this.autoCollapse = false;
   }
   connectedCallback() {
     // Bind functions so that "this" correctly refers to the component's instance.
-    this.handleChildListChange = this.handleChildListChange.bind(this);
-    this.updateButton = this.updateButton.bind(this);
-    this.updateContent = this.updateContent.bind(this);
-    this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.handleMutation = this.handleMutation.bind(this);
+    this.handleClick = this.handleClick.bind(this);
     this.handleFocusout = this.handleFocusout.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.computedStyle = window.getComputedStyle(this.el);
-    this.isExpanded = false;
-    this.handleChildListChange();
-    observer.observe(this.el, observerConfig);
+    this.handleMutation();
+    this.observer.observe(this.el, { childList: true });
   }
-  handleChildListChange() {
-    this.updateButton();
-    this.updateContent();
+  disconnectedCallback() {
+    this.observer.disconnect();
   }
-  handleKeyUp(e) {
-    if (e.key === 'Escape') {
-      this.isExpanded = false;
-      if (e.target !== this.button) {
-        e.stopPropagation();
-        this.isExpanded = false;
-        this.button && this.button.focus();
-      }
-    }
-  }
-  updateButton() {
-    var _a, _b, _c;
+  handleMutation() {
+    // Update the button element
     const button = this.el.querySelector('[slot="button"]');
-    // Clean up the old button before setting the new one
-    (_a = this.button) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
-    (_b = this.button) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-expanded');
-    (_c = this.button) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
     // Set up the new button
     button === null || button === void 0 ? void 0 : button.setAttribute('aria-expanded', this.isExpanded ? 'true' : 'false');
     button === null || button === void 0 ? void 0 : button.setAttribute('aria-haspopup', 'true');
-    button === null || button === void 0 ? void 0 : button.addEventListener('click', this.handleButtonClick);
     this.button = button;
-  }
-  updateContent() {
+    // Update the content element
     const content = this.el.querySelector('[slot="content"]');
     if (content == null) {
       this.content = null;
@@ -384,8 +385,22 @@ const UofgMenu = class {
       this.contentComputedStyle = window.getComputedStyle(this.content);
     }
   }
-  handleButtonClick() {
-    this.isExpanded = !this.isExpanded;
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isExpanded = false;
+      if (e.target !== this.button) {
+        e.stopPropagation();
+        this.isExpanded = false;
+        this.button && this.button.focus();
+      }
+    }
+  }
+  handleClick(e) {
+    //Check if the click was on the button or a descendant of the button
+    if (this.button && this.button.contains(e.target)) {
+      this.isExpanded = !this.isExpanded;
+      return;
+    }
   }
   handleFocusout(e) {
     if (this.autoCollapse && !this.el.contains(e.relatedTarget)) {
@@ -511,7 +526,7 @@ const UofgMenu = class {
     };
   }
   render() {
-    return (h(Host, { tabindex: -1, "data-expanded": this.isExpanded, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp }));
+    return (h(Host, { "data-expanded": this.isExpanded, tabindex: -1, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp, onClick: this.handleClick }));
   }
   /**
    * Get the current expanded state of the menu.
@@ -555,4 +570,107 @@ const UofgMenu = class {
   }; }
 };
 
-export { UofgBackToTop as uofg_back_to_top, UofgFooter as uofg_footer, UofgHeader as uofg_header, UofgMenu as uofg_menu };
+const uofgModalCss = ":host{visibility:visible !important;position:relative !important}:focus-visible{outline:2px solid #ffc72a}*{box-sizing:border-box}#uofg-modal{display:flex;position:fixed;top:0;left:0;z-index:10000;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5);visibility:hidden;opacity:0;padding:2rem;transition-duration:0.3s;transition-timing-function:ease-in-out;transition-property:visibility, opacity}#uofg-modal #uofg-modal-dismiss{display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:0;padding:0.5rem;height:3.5rem;width:3.5rem;font-size:2rem;line-height:1;color:var(--uofg-modal-dismiss-color, #fff);background-color:transparent;border:none;cursor:pointer;z-index:2}#uofg-modal #uofg-modal-dismiss>svg{display:block;height:1em;fill:currentColor}#uofg-modal>#uofg-modal-content{position:absolute;left:50%;transition:transform 0.3s ease-in-out;transform:translate(-50%, -50px);z-index:1}@media (prefers-reduced-motion: reduce){#uofg-modal>#uofg-modal-content{transition:none}}#uofg-modal>#uofg-modal-content.centered{top:50%;transform:translate(-50%, calc(-50% - 50px))}#uofg-modal.open{visibility:visible;opacity:1}#uofg-modal.open #uofg-modal-content{visibility:visible;opacity:1;transform:translate(-50%, 0)}#uofg-modal.open #uofg-modal-content.centered{transform:translate(-50%, -50%)}";
+
+const UofgModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.label = undefined;
+    this.alertDialog = false;
+    this.centered = false;
+    this.staticBackdrop = false;
+    this.autoOpen = false;
+    this.isOpen = false;
+  }
+  connectedCallback() {
+    // Bind event handlers so that 'this' is always the component instance.
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    if (this.autoOpen) {
+      this.isOpen = true;
+    }
+  }
+  handleClick(e) {
+    if (!this.staticBackdrop && e.target === e.currentTarget) {
+      this.isOpen = false;
+    }
+  }
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isOpen = false;
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === 'Tab') {
+      const focusableElements = getAllFocusableElements(this.el);
+      const firstFocusable = this.dismissButton; // The dismiss button is always the first focusable element in the modal.
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+      if (e.target === firstFocusable && e.shiftKey) {
+        e.preventDefault();
+        lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.focus();
+      }
+      else if (e.target === lastFocusable && !e.shiftKey) {
+        e.preventDefault();
+        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+      }
+    }
+  }
+  handleIsOpenChange(newValue) {
+    if (newValue === true) {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            this.dismissButton.focus();
+          });
+        });
+      });
+    }
+  }
+  render() {
+    return (h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.isOpen ? (this.alertDialog ? 'alertdialog' : 'dialog') : '', "aria-modal": this.isOpen, "aria-label": this.label, "aria-hidden": !this.isOpen, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("div", { id: "uofg-modal-content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { icon: faTimes })), h("slot", null))));
+  }
+  /**
+   * Get the current state of the modal.
+   * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
+   */
+  async getState() {
+    return this.isOpen;
+  }
+  /**
+   * Set the state of the modal.
+   * @param value The new state, set it to true to open the modal, or false to close the modal.
+   */
+  async setState(value) {
+    this.isOpen = value;
+  }
+  /**
+   * Toggle the state of the modal.
+   * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
+    return this.isOpen;
+  }
+  /**
+   * Closes the modal.
+   * @returns empty Promise.
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  /**
+   * Opens the modal.
+   * @returns empty Promise.
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["handleIsOpenChange"]
+  }; }
+};
+UofgModal.style = uofgModalCss;
+
+export { UofgAlert as uofg_alert, UofgBackToTop as uofg_back_to_top, UofgFooter as uofg_footer, UofgHeader as uofg_header, UofgMenu as uofg_menu, UofgModal as uofg_modal };

package/dist/esm/uofg-web-components.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-8ff56dd3.js';
-export { s as setNonce } from './index-8ff56dd3.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-ebf79156.js';
+export { s as setNonce } from './index-ebf79156.js';
 
 /*
  Stencil Client Patch Browser v4.0.1 | MIT Licensed | https://stenciljs.com
@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["uofg-back-to-top_4",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-footer"],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]},[[0,"onChildListChange","handleChildListChange"]]]]]], options);
+  return bootstrapLazy([["uofg-alert_6",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-alert"],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-footer"],[1,"uofg-modal",{"label":[1],"alertDialog":[4,"alert-dialog"],"centered":[4],"staticBackdrop":[4,"static-backdrop"],"autoOpen":[4,"auto-open"],"isOpen":[32],"getState":[64],"setState":[64],"toggle":[64],"close":[64],"open":[64]}],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]}]]]], options);
 });

package/dist/types/components/uofg-alert/uofg-alert.d.ts

@@ -0,0 +1,3 @@
+export declare class UofgAlert {
+  render(): any;
+}

package/dist/types/components/uofg-menu/uofg-menu.d.ts

@@ -26,12 +26,12 @@ export declare class UofgMenu {
   private button;
   private content;
   private contentComputedStyle;
+  private observer;
   connectedCallback(): void;
-  private handleChildListChange;
+  disconnectedCallback(): void;
+  private handleMutation;
   private handleKeyUp;
-  private updateButton;
-  private updateContent;
-  private handleButtonClick;
+  private handleClick;
   private handleFocusout;
   handleIsExpandedChange(newValue: boolean): void;
   private getAnimationType;

package/dist/types/components/uofg-modal/uofg-modal.d.ts

@@ -0,0 +1,61 @@
+export declare class UofgModal {
+  /**
+   * The label for the modal. It is recommended that you set this to describe the modal's content.
+   * This is required for accessibility.
+   */
+  label: string;
+  /**
+   * Used to determine whether the modal should be rendered as an alert dialog.
+   * This is useful for when you want to use the modal to alert the user of something, rather than to ask the user to make a decision.
+   * If this is set to true, the modal will be rendered with a role of "alertdialog" instead of "dialog".
+   */
+  alertDialog: boolean;
+  /**
+   * Used to determine whether the modal content is centered vertically.
+   */
+  centered: boolean;
+  /**
+   * Used to determine whether clicking on the backdrop of the modal will close the modal.
+   * If this is set to true, clicking on the backdrop will NOT close the modal.
+   */
+  staticBackdrop: boolean;
+  /**
+   * Used to determine whether the modal should open automatically when the component is first rendered.
+   * It is important to ensure this is only set to true for ONE modal on the page.
+   */
+  autoOpen: boolean;
+  isOpen: boolean;
+  el: HTMLUofgModalElement;
+  private dismissButton;
+  connectedCallback(): void;
+  handleClick(e: MouseEvent): void;
+  handleKeyUp(e: KeyboardEvent): void;
+  handleKeyDown(e: KeyboardEvent): void;
+  handleIsOpenChange(newValue: boolean): void;
+  render(): any;
+  /**
+   * Get the current state of the modal.
+   * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
+   */
+  getState(): Promise<boolean>;
+  /**
+   * Set the state of the modal.
+   * @param value The new state, set it to true to open the modal, or false to close the modal.
+   */
+  setState(value: boolean): Promise<void>;
+  /**
+   * Toggle the state of the modal.
+   * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
+   */
+  toggle(): Promise<boolean>;
+  /**
+   * Closes the modal.
+   * @returns empty Promise.
+   */
+  close(): Promise<void>;
+  /**
+   * Opens the modal.
+   * @returns empty Promise.
+   */
+  open(): Promise<void>;
+}