@uoguelph/web-components 0.0.16 → 0.0.18

package/dist/esm/{uofg-footer_3.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-24999f13.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,49 +7,23 @@ 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 faSquareTwitter = {
-  prefix: 'fab',
-  iconName: 'square-twitter',
-  icon: [448, 512, ["twitter-square"], "f081", "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"]
-};
-var faTwitterSquare = faSquareTwitter;
-var faTiktok = {
-  prefix: 'fab',
-  iconName: 'tiktok',
-  icon: [448, 512, [], "e07b", "M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"]
-};
-var faSquareFacebook = {
-  prefix: 'fab',
-  iconName: 'square-facebook',
-  icon: [448, 512, ["facebook-square"], "f082", "M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"]
-};
-var faFacebookSquare = faSquareFacebook;
-var faLinkedin = {
-  prefix: 'fab',
-  iconName: 'linkedin',
-  icon: [448, 512, [], "f08c", "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"]
-};
-var faInstagram = {
-  prefix: 'fab',
-  iconName: 'instagram',
-  icon: [448, 512, [], "f16d", "M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"]
-};
-var faYoutube = {
-  prefix: 'fab',
-  iconName: 'youtube',
-  icon: [576, 512, [61802], "f167", "M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"]
+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 SocialLink = props => (h("li", null,
-  h("a", { href: props.url, "aria-label": props.name },
-    h(FontAwesomeIcon, { icon: props.icon }))));
-const SocialLinks = () => (h("ul", { id: "uofg-footer-social-links" },
-  h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare }),
-  h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare }),
-  h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram }),
-  h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube }),
-  h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin }),
-  h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok })));
+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',
@@ -71,6 +45,11 @@ var faList = {
   iconName: 'list',
   icon: [512, 512, ["list-squares"], "f03a", "M40 48C26.7 48 16 58.7 16 72v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V72c0-13.3-10.7-24-24-24H40zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM16 232v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V232c0-13.3-10.7-24-24-24H40c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24H88c13.3 0 24-10.7 24-24V392c0-13.3-10.7-24-24-24H40z"]
 };
+var faChevronUp = {
+  prefix: 'fas',
+  iconName: 'chevron-up',
+  icon: [512, 512, [], "f077", "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"]
+};
 var faKey = {
   prefix: 'fas',
   iconName: 'key',
@@ -117,12 +96,84 @@ 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',
   icon: [512, 512, [128188], "f0b1", "M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 320 512V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM512 288H320v32c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V288z"]
 };
 
+const uofgBackToTopCss = ":host{display:block}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}#uofg-back-to-top{position:fixed;margin:10px;height:35px;width:35px;right:0;bottom:0;z-index:1000;cursor:pointer;background-color:black;color:white;transition-duration:0.3s;transition-timing-function:ease-in-out;transition-property:opacity, visibility, background-color;opacity:0;visibility:hidden;border-radius:50%;border:1px solid #fff}#uofg-back-to-top:hover{background-color:#d50029}#uofg-back-to-top>svg{width:1em;height:1em;fill:currentColor}#uofg-back-to-top.visible{opacity:1;visibility:visible}";
+
+const UofgBackToTop = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.threshold = 50;
+    this.isVisible = false;
+  }
+  connectedCallback() {
+    this.onScroll();
+  }
+  onScroll() {
+    this.isVisible = window.scrollY >= this.threshold;
+  }
+  render() {
+    return (h("button", { id: "uofg-back-to-top", "aria-label": "Go back to the top", class: { visible: this.isVisible }, onClick: () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      } }, h(FontAwesomeIcon, { icon: faChevronUp })));
+  }
+};
+UofgBackToTop.style = uofgBackToTopCss;
+
+var faSquareTwitter = {
+  prefix: 'fab',
+  iconName: 'square-twitter',
+  icon: [448, 512, ["twitter-square"], "f081", "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"]
+};
+var faTwitterSquare = faSquareTwitter;
+var faTiktok = {
+  prefix: 'fab',
+  iconName: 'tiktok',
+  icon: [448, 512, [], "e07b", "M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"]
+};
+var faSquareFacebook = {
+  prefix: 'fab',
+  iconName: 'square-facebook',
+  icon: [448, 512, ["facebook-square"], "f082", "M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"]
+};
+var faFacebookSquare = faSquareFacebook;
+var faLinkedin = {
+  prefix: 'fab',
+  iconName: 'linkedin',
+  icon: [448, 512, [], "f08c", "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"]
+};
+var faInstagram = {
+  prefix: 'fab',
+  iconName: 'instagram',
+  icon: [448, 512, [], "f16d", "M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"]
+};
+var faYoutube = {
+  prefix: 'fab',
+  iconName: 'youtube',
+  icon: [576, 512, [61802], "f167", "M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"]
+};
+
+const SocialLink = props => (h("li", null,
+  h("a", { href: props.url, "aria-label": props.name },
+    h(FontAwesomeIcon, { icon: props.icon }))));
+const SocialLinks = () => (h("ul", { id: "uofg-footer-social-links" },
+  h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare }),
+  h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare }),
+  h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram }),
+  h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube }),
+  h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin }),
+  h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok })));
+
 const FooterLink = props => (h("li", null,
   h("a", { href: props.url, title: props.title },
     h(FontAwesomeIcon, { icon: props.icon }),
@@ -280,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);
@@ -302,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;
@@ -357,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)) {
@@ -484,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.
@@ -528,4 +570,107 @@ const UofgMenu = class {
   }; }
 };
 
-export { 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-24999f13.js';
-export { s as setNonce } from './index-24999f13.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-footer_3",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[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-back-to-top/uofg-back-to-top.d.ts

@@ -0,0 +1,10 @@
+export declare class UofgBackToTop {
+  /**
+   * The number of pixels the user has to scroll down before the button appears.
+   */
+  threshold: number;
+  isVisible: boolean;
+  connectedCallback(): void;
+  onScroll(): void;
+  render(): any;
+}

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

@@ -1,11 +1,11 @@
 import { type PageSpecificContent } from './page-specific';
 export declare class UofgHeader {
   /**
-   * The title of the pages that the header is being used on. For example, for the Convocation pages, this would be set to "Convocation".
+   * The title of the department/topic that the header is being used for. For example, for the Convocation pages, this would be set to "Convocation".
    */
   pageTitle: string;
   /**
-   * The URL to the home/landing page for the pages the header is being used on. For example, for the Convocation pages, this would be set to "https://www.uoguelph.ca/convocation/".
+   * The URL to the home/landing page of the department/topic the header is being used for. For example, for the Convocation pages, this would be set to "https://www.uoguelph.ca/convocation/".
    */
   pageUrl: string;
   el: HTMLUofgHeaderElement;

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>;
+}