@uoguelph/web-components 0.0.17 → 0.0.18

package/dist/cjs/{index-c68ebbb8.js → index-52617c57.js}

@@ -939,7 +939,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.
@@ -1517,12 +1519,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/cjs/loader.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c68ebbb8.js');
+const index = require('./index-52617c57.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  return index.bootstrapLazy([["uofg-back-to-top_4.cjs",[[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 index.bootstrapLazy([["uofg-alert_6.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c68ebbb8.js');
+const index = require('./index-52617c57.js');
 
 const FontAwesomeIcon = props => {
   const width = props.icon.icon[0];
@@ -11,6 +11,24 @@ const FontAwesomeIcon = props => {
   return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(path => index.h("path", { d: path }))) : (index.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", { id: "uofg-alert" }, index.h("div", { id: "uofg-alert-title" }, index.h(FontAwesomeIcon, { icon: faCircleExclamation }), index.h("slot", { name: "title" })), index.h("div", { id: "uofg-alert-body" }, index.h("slot", { name: "subtitle" }), index.h("slot", { name: "message" })), index.h("div", { id: "uofg-alert-footer" }, index.h("slot", { name: "footer" }))));
+  }
+};
+UofgAlert.style = uofgAlertCss;
+
 var faTrees = {
   prefix: 'fas',
   iconName: 'trees',
@@ -82,6 +100,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',
@@ -311,17 +335,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) {
     index.registerInstance(this, hostRef);
@@ -333,50 +353,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;
@@ -388,8 +389,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)) {
@@ -515,7 +530,7 @@ const UofgMenu = class {
     };
   }
   render() {
-    return (index.h(index.Host, { tabindex: -1, "data-expanded": this.isExpanded, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp }));
+    return (index.h(index.Host, { "data-expanded": this.isExpanded, tabindex: -1, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp, onClick: this.handleClick }));
   }
   /**
    * Get the current expanded state of the menu.
@@ -559,7 +574,112 @@ const UofgMenu = class {
   }; }
 };
 
+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) {
+    index.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 (index.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 }, index.h("div", { id: "uofg-modal-content", class: { centered: this.centered } }, index.h("button", { id: "uofg-modal-dismiss", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, index.h(FontAwesomeIcon, { icon: faTimes })), index.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 index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["handleIsOpenChange"]
+  }; }
+};
+UofgModal.style = uofgModalCss;
+
+exports.uofg_alert = UofgAlert;
 exports.uofg_back_to_top = UofgBackToTop;
 exports.uofg_footer = UofgFooter;
 exports.uofg_header = UofgHeader;
 exports.uofg_menu = UofgMenu;
+exports.uofg_modal = UofgModal;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c68ebbb8.js');
+const index = require('./index-52617c57.js');
 
 /*
  Stencil Client Patch Browser v4.0.1 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["uofg-back-to-top_4.cjs",[[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 index.bootstrapLazy([["uofg-alert_6.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,9 +1,11 @@
 {
   "entries": [
+    "components/uofg-alert/uofg-alert.js",
     "components/uofg-back-to-top/uofg-back-to-top.js",
     "components/uofg-footer/uofg-footer.js",
     "components/uofg-header/uofg-header.js",
-    "components/uofg-menu/uofg-menu.js"
+    "components/uofg-menu/uofg-menu.js",
+    "components/uofg-modal/uofg-modal.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/uofg-alert/uofg-alert.css

@@ -0,0 +1,46 @@
+: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;
+}

package/dist/collection/components/uofg-alert/uofg-alert.js

@@ -0,0 +1,20 @@
+import { h } from "@stencil/core";
+import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
+import { faCircleExclamation } from "@fortawesome/pro-regular-svg-icons";
+export class UofgAlert {
+  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" }))));
+  }
+  static get is() { return "uofg-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["uofg-alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["uofg-alert.css"]
+    };
+  }
+}

package/dist/collection/components/uofg-menu/uofg-menu.js

@@ -1,65 +1,38 @@
 import { h, Host } from "@stencil/core";
-import { PREFERS_REDUCED_MOTION, WEB_ANIMATIONS_SUPPORTED } from "../../utils/feature-check";
+import { PREFERS_REDUCED_MOTION, WEB_ANIMATIONS_SUPPORTED } from "../../utils/utils";
 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,
-};
 export class UofgMenu {
   constructor() {
     this.computedStyle = null;
     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;
@@ -71,8 +44,22 @@ export class UofgMenu {
       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)) {
@@ -198,7 +185,7 @@ export class UofgMenu {
     };
   }
   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.
@@ -444,13 +431,4 @@ export class UofgMenu {
         "methodName": "handleIsExpandedChange"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "onChildListChange",
-        "method": "handleChildListChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/uofg-modal/uofg-modal.css

@@ -0,0 +1,80 @@
+: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%);
+}