@uoguelph/web-components 0.0.30 → 0.0.31

package/README.md

@@ -20,7 +20,27 @@ Put the following in the head of your HTML to always load the latest version
 ></script>
 ```
 
-If you want to load a specific version, follow the guide on [the unpkg website](https://www.unpkg.com).
+Loading the latest version is not best practice, as a new version of the package may be released which has breaking changes and may result in your page being affected.
+
+Instead, it's best to specify a semver range. As the package follows semantic versioning, versions follow this syntax:
+`x.x.x` where the first x represents major releases with potentially breaking changes, the second is minor releases with new features but maintains backwards compatibility, and finally the third which represents small bug fixes which are also backwards compatible.
+
+For example `1.x.x` represents the latest version of the v1 major release.
+
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/@uoguelph/web-components@1.x.x/dist/uofg-web-components/uofg-web-components.css"
+/>
+<script
+  type="module"
+  src="https://unpkg.com/@uoguelph/web-components@1.x.x/dist/uofg-web-components/uofg-web-components.esm.js"
+></script>
+```
+
+Including the components this way, ensures that your page will run as expected, until you are ready to update to the latest major release.
+
+For more information, check out the guide on [the unpkg website](https://www.unpkg.com).
 
 ## Using the components
 

package/dist/cjs/index-5114bde1.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const index = require('./index-ff6a2049.js');
+
+const FontAwesomeIcon = props => {
+  const width = props.icon.icon[0];
+  const height = props.icon.icon[1];
+  const iconPathData = props.icon.icon[4];
+  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: 'fas',
+  iconName: 'circle-exclamation',
+  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"]
+};
+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 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;
+
+exports.FontAwesomeIcon = FontAwesomeIcon;
+exports.faChevronUp = faChevronUp;
+exports.faCircleExclamation = faCircleExclamation;
+exports.faTimes = faTimes;

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

@@ -1637,6 +1637,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+const Fragment = (_, children) => children;
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
@@ -1821,6 +1822,7 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
+exports.Fragment = Fragment;
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;

package/dist/cjs/loader.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-52617c57.js');
+const index = require('./index-ff6a2049.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
-  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);
+  return index.bootstrapLazy([["uofg-alert.cjs",[[1,"uofg-alert"]]],["uofg-modal.cjs",[[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]}]]],["uofg-back-to-top_5.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-card",{"href":[1]}],[1,"uofg-footer"],[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-alert.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ff6a2049.js');
+const index$1 = require('./index-5114bde1.js');
+
+const uofgAlertCss = "*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}:host{display:block;max-width:100rem}#uofg-alert{display:flex;flex-direction:column;font-size:2rem}#uofg-alert-title{display:flex;align-items:center;font-size:2.25rem;padding:2rem;color:white;background-color:#c20430}#uofg-alert-title>svg{margin-right:1rem;fill:currentColor;height:1.5em}#uofg-alert-body{display:flex;flex-direction:column;padding:1.5rem 2rem;background-color:white}#uofg-alert-body slot[name=subtitle]::slotted(*){font-size:2rem;margin-bottom:2rem;font-weight:bold}#uofg-alert-body slot[name=message]::slotted(*){font-size:1.6rem}#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(index$1.FontAwesomeIcon, { icon: index$1.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;
+
+exports.uofg_alert = UofgAlert;

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

@@ -2,43 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-52617c57.js');
-
-const FontAwesomeIcon = props => {
-  const width = props.icon.icon[0];
-  const height = props.icon.icon[1];
-  const iconPathData = props.icon.icon[4];
-  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: 'fas',
-  iconName: 'circle-exclamation',
-  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"]
-};
-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 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;
-
-const uofgAlertCss = ":host{display:block;max-width:100rem}*{box-sizing:border-box}#uofg-alert{display:flex;flex-direction:column;font-size:2rem}#uofg-alert-title{display:flex;align-items:center;font-size:2.25rem;padding:2rem;color:white;background-color:#c10631}#uofg-alert-title>svg{margin-right:1rem;fill:currentColor;height:1.5em}#uofg-alert-body{display:flex;flex-direction:column;padding:1.5rem 2rem;background-color:white}#uofg-alert-body slot[name=subtitle]::slotted(*){font-size:2rem;margin-bottom:2rem;font-weight:bold}#uofg-alert-body slot[name=message]::slotted(*){font-size:1.6rem}#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;
+const index = require('./index-ff6a2049.js');
+const index$1 = require('./index-5114bde1.js');
+const utils = require('./utils-582c8cb9.js');
 
 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}";
 
@@ -57,11 +23,25 @@ const UofgBackToTop = class {
   render() {
     return (index.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' });
-      } }, index.h(FontAwesomeIcon, { icon: faChevronUp })));
+      } }, index.h(index$1.FontAwesomeIcon, { icon: index$1.faChevronUp })));
   }
 };
 UofgBackToTop.style = uofgBackToTopCss;
 
+const uofgCardCss = "*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}:host{display:block;width:300px;margin:1rem}#uofg-card{display:flex;flex-direction:column;background-color:#f1f8fa;font-size:1.6rem;border-radius:5px;overflow:hidden}a#uofg-card{border:1px solid transparent;transition-property:border-color;transition-duration:0.2s;transition-timing-function:ease-in-out}a#uofg-card:hover,a#uofg-card:focus,a#uofg-card:focus-within{border-color:#69a3b9}#uofg-card-img{display:flex;justify-content:center;align-items:center;overflow:hidden}#uofg-card-img>slot::slotted(img){width:100%;object-fit:cover;transition-property:transform;transition-duration:0.2s;transition-timing-function:ease-in-out}a#uofg-card:hover #uofg-card-img>slot::slotted(img),a#uofg-card:focus #uofg-card-img>slot::slotted(img),a#uofg-card:focus-within #uofg-card-img>slot::slotted(img){transform:scale(1.1)}#uofg-card-content{padding:1rem}#uofg-card-content>slot[name=title]::slotted(*){font-size:2.25rem;font-weight:normal;margin:0;padding:1rem 0}#uofg-card-content>slot[name=subtitle]::slotted(*){font-size:1.8rem;font-weight:normal;margin:0;padding:1rem 0}#uofg-card-content>slot[name=body]::slotted(*){font-size:1.6rem;font-weight:normal;margin:0}#uofg-card-footer{background-color:#bedae3}";
+
+const UofgCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+  }
+  render() {
+    const Body = () => (index.h(index.Fragment, null, index.h("div", { id: "uofg-card-img" }, index.h("slot", { name: "img" })), index.h("div", { id: "uofg-card-content" }, index.h("slot", { name: "title" }), index.h("slot", { name: "subtitle" }), index.h("slot", { name: "body" })), index.h("div", { id: "uofg-card-footer" }, index.h("slot", { name: "footer" }))));
+    return this.href ? (index.h("a", { href: this.href, id: "uofg-card" }, index.h(Body, null))) : (index.h("div", { id: "uofg-card" }, index.h(Body, null)));
+  }
+};
+UofgCard.style = uofgCardCss;
+
 const improveLifeLogo = `<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 107.4 12">
   <path
     d="M0 0h5.3v.5C4 .5 3.6.8 3.6 2.1v7.3c0 1.4.3 1.8 1.6 1.8v.5H0v-.5c1.5 0 1.5-.5 1.5-1.6V1.9C1.5.9 1.3.5 0 .5ZM6.1 11.4c.9 0 1.1-.2 1.2-1.4l.3-5.1c.1-1.2-.1-1.4-.9-1.4v-.4h2.6l3 6.5 2.8-6.5h2.6v.4c-.8 0-.9.2-.9.8l.5 6.3c.1.7.3.8 1.1.8v.4h-4v-.4c1.1 0 1.3-.3 1.2-1.8l-.4-5.1-3.2 7.3h-.5L8.4 4.7l-.3 5.1c-.1 1.5.2 1.5 1.1 1.6v.4H6.1ZM19.2 11.4c1 0 1.2-.2 1.2-1.5v-5c0-1.4-.2-1.5-1.3-1.5v-.3h1.4a14.4 14.4 0 0 1 1.8-.1c2.6 0 4.1.6 4.1 2.5 0 1.6-1.4 2.8-3.3 2.8a3.8 3.8 0 0 1-1.1-.1v1.9c0 1.1.3 1.3 1.6 1.3v.4h-4.3v-.4Zm2.7-3.7.6.1a2.2 2.2 0 0 0 2.2-2.3 2 2 0 0 0-2.1-2.1h-.7ZM29.7 10c0 1.2.2 1.4 1.4 1.4v.4h-4.3v-.4c1.2 0 1.3-.3 1.3-1.2V4.6c0-.9-.2-1.1-1.3-1.1v-.4l2-.1h1.7c2.8 0 3.8 1.2 3.8 2.5a2.5 2.5 0 0 1-1.8 2.3 9.4 9.4 0 0 1 1 1l.9.9a5.4 5.4 0 0 0 3.3 1.9v.4c-2.7.1-3.4-.4-4.7-1.7l-.7-.7a8 8 0 0 0-1.5-1.3h-1.2V10Zm0-2.2h.4c1.9-.1 2.5-.8 2.5-2.2a2 2 0 0 0-2.3-2.2 1.7 1.7 0 0 0-.7.1v4.3ZM42.4 2.9c3 0 5.1 1.8 5.1 4.4a4.8 4.8 0 0 1-5.1 4.7c-2.9 0-5-1.8-5-4.3-.1-2.8 2.1-4.8 5-4.8Zm.2 8.6c1.9 0 3.2-1.6 3.2-3.9 0-2.5-1.5-4.3-3.5-4.3S39 4.8 39 7.3c0 2.8 1.8 4.2 3.6 4.2ZM49 4.5c-.4-1-.5-1.1-1.4-1.1v-.3h4.3v.4c-1.1 0-1.3.3-1.3.6a3 3 0 0 0 .2.8l2.1 5.2 2-4.9a4.5 4.5 0 0 0 .3-1.1c0-.5-.4-.6-1.3-.6v-.4h3.4v.4c-1 0-1.2.5-1.6 1.6L52.8 12H52ZM57.7 11.8v-.4c1.1 0 1.4-.2 1.4-1v-6c0-.9-.5-.9-1.4-.9v-.4h7.1l.1 2.1h-.4l-.1-.3c-.3-1.1-.5-1.2-1.4-1.2h-2.5V7h2.2c.8 0 1-.1 1-1.1h.4v2.8h-.4c-.1-1-.3-1.1-1-1.1h-2.2v2.5c0 .9.1 1 .8 1H63c1.4 0 1.7-.2 2.1-1.6h.4l-.2 2.2h-7.6ZM72.2 11.8v-.5c1.5 0 1.8-.1 1.8-1.6V2.1C74 .8 73.9.4 72.2.5V0h6.2v.5c-2 0-2.3.1-2.3 1.5v8c0 .8.2.9 1 .9H79c1.6 0 1.7-.1 3.1-2h.6l-1.5 2.9ZM83.2 3.1h3.9v.4c-.9 0-1.2.2-1.2 1.2v5.4c0 1 .2 1.3 1.2 1.3v.4h-3.9v-.4c1.1 0 1.1-.4 1.1-1.2V4.5c0-.8-.2-1.1-1.1-1ZM90.7 10c0 1.1.2 1.3 1.2 1.3v.4H88v-.4c.9 0 1.1-.3 1.1-1.1V4.5c0-.8-.3-1-1.1-1v-.4h6.6v1.7h-.4c-.1-.9-.3-1.1-1.4-1.1h-2.2v3.1h2.2c.9 0 1-.1 1.1-.9h.4v2.6H94c-.1-.9-.3-1-1.2-1h-2.1ZM95.3 11.8v-.4c1.1 0 1.4-.2 1.4-1v-6c0-.9-.5-.9-1.4-.9v-.4h7.1l.1 2.1h-.4l-.1-.3c-.3-1.1-.5-1.2-1.4-1.2h-2.5V7h2.2c.8 0 1-.1 1-1.1h.4v2.8h-.4c-.1-1-.3-1.1-1-1.1h-2.2v2.5c0 .9.1 1 .8 1h1.5c1.4 0 1.7-.2 2.1-1.6h.4l-.2 2.2h-7.4ZM107.4 10.9c0 .7-.5 1.1-1.3 1.1s-1.3-.4-1.3-1.1a1.2 1.2 0 0 1 1.3-1.2 1.2 1.2 0 0 1 1.3 1.2Z"/>
@@ -644,16 +624,16 @@ exports.svgPathData = svgPathData;
 exports.aliases = aliases;
 });
 
-const uofgFooterCss = ":host{display:block;width:100%;font-size:1.6rem;font-family:sans-serif}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}a{display:flex;align-items:center;gap:0.5rem;border-bottom:2px dotted transparent;width:fit-content;color:inherit;white-space:nowrap;padding-bottom:0.2rem;transition-property:border-color;transition-duration:0.2s;transition-timing-function:ease-in-out}a:hover,a:focus{border-color:currentColor}svg{fill:currentColor;height:1.6rem}li{display:contents}#uofg-footer{display:flex;justify-content:center;align-items:center;background-color:#000;color:#fff;padding:2rem}#uofg-footer-content{display:grid;grid-template-columns:1fr;gap:2rem;width:100%;max-width:1500px}@media (min-width: 570px){#uofg-footer-content{grid-template-columns:1fr 1fr}}@media (min-width: 962px){#uofg-footer-content{grid-template-columns:0.5fr 2fr 0.5fr;justify-items:center;gap:2rem 4.75vw}}.uofg-footer-content-separator{display:flex;flex-direction:column;gap:0.75rem;justify-content:space-between}#uofg-footer-improve-life{transition-property:opacity;transition-duration:0.2s;transition-timing-function:ease-in-out;border:0}#uofg-footer-improve-life>svg{height:2.5rem}#uofg-footer-improve-life:hover,#uofg-footer-improve-life:focus{opacity:0.8}#uofg-footer-social-links{display:flex;align-items:center;list-style:none;padding:0;margin-left:0;gap:0.75rem}#uofg-footer-social-links a{transition-property:color;transition-duration:0.2s;transition-timing-function:ease-in-out;border:0}#uofg-footer-social-links a:hover,#uofg-footer-social-links a:focus{color:#ffc72a}#uofg-footer-social-links a:hover[aria-label=Twitter],#uofg-footer-social-links a:focus[aria-label=Twitter]{color:#1da1f2}#uofg-footer-social-links a:hover[aria-label=Facebook],#uofg-footer-social-links a:focus[aria-label=Facebook]{color:#4267b2}#uofg-footer-social-links a:hover[aria-label=Instagram],#uofg-footer-social-links a:focus[aria-label=Instagram]{color:#e1306c}#uofg-footer-social-links a:hover[aria-label=Youtube],#uofg-footer-social-links a:focus[aria-label=Youtube]{color:#f00}#uofg-footer-social-links a:hover[aria-label=LinkedIn],#uofg-footer-social-links a:focus[aria-label=LinkedIn]{color:#0077b5}#uofg-footer-social-links a:hover[aria-label=TikTok],#uofg-footer-social-links a:focus[aria-label=TikTok]{color:#f00}#uofg-footer-social-links svg{height:2rem}#uofg-footer-links{display:grid;grid-template-columns:1fr}#uofg-footer-links svg{color:#ffc72a}@media (min-width: 570px){#uofg-footer-links{grid-template-columns:1fr 1fr;grid-column-start:1;grid-column-end:3}}@media (min-width: 962px){#uofg-footer-links{grid-row:unset;grid-column:unset;gap:0.75rem 9.5vw}}#uofg-footer-address{font-style:normal;white-space:nowrap}#uofg-footer-address a{color:#69a3b9}@media (min-width: 570px){#uofg-footer-address{grid-row:1;grid-column:2}}@media (min-width: 962px){#uofg-footer-address{grid-row:unset;grid-column:unset}}";
+const uofgFooterCss = ":focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}:host{display:block;width:100%;font-size:1.6rem;font-family:sans-serif}a{display:flex;align-items:center;gap:0.5rem;border-bottom:2px dotted transparent;width:fit-content;color:inherit;white-space:nowrap;padding-bottom:0.2rem;transition-property:border-color;transition-duration:0.2s;transition-timing-function:ease-in-out}a:hover,a:focus{border-color:currentColor}svg{fill:currentColor;height:1.6rem}li{display:contents}#uofg-footer{display:flex;justify-content:center;align-items:center;background-color:#000;color:#fff;padding:2rem}#uofg-footer-content{display:grid;grid-template-columns:1fr;gap:2rem;width:100%;max-width:1500px}@media (min-width: 570px){#uofg-footer-content{grid-template-columns:1fr 1fr}}@media (min-width: 962px){#uofg-footer-content{grid-template-columns:0.5fr 2fr 0.5fr;justify-items:center;gap:2rem 4.75vw}}.uofg-footer-content-separator{display:flex;flex-direction:column;gap:0.75rem;justify-content:space-between}#uofg-footer-improve-life{transition-property:opacity;transition-duration:0.2s;transition-timing-function:ease-in-out;border:0}#uofg-footer-improve-life>svg{height:2.5rem}#uofg-footer-improve-life:hover,#uofg-footer-improve-life:focus{opacity:0.8}#uofg-footer-social-links{display:flex;align-items:center;list-style:none;padding:0;margin-left:0;gap:0.75rem}#uofg-footer-social-links a{transition-property:color;transition-duration:0.2s;transition-timing-function:ease-in-out;border:0}#uofg-footer-social-links a:hover,#uofg-footer-social-links a:focus{color:#ffc72a}#uofg-footer-social-links a:hover[aria-label=Twitter],#uofg-footer-social-links a:focus[aria-label=Twitter]{color:#1da1f2}#uofg-footer-social-links a:hover[aria-label=Facebook],#uofg-footer-social-links a:focus[aria-label=Facebook]{color:#4267b2}#uofg-footer-social-links a:hover[aria-label=Instagram],#uofg-footer-social-links a:focus[aria-label=Instagram]{color:#e1306c}#uofg-footer-social-links a:hover[aria-label=Youtube],#uofg-footer-social-links a:focus[aria-label=Youtube]{color:#f00}#uofg-footer-social-links a:hover[aria-label=LinkedIn],#uofg-footer-social-links a:focus[aria-label=LinkedIn]{color:#0077b5}#uofg-footer-social-links a:hover[aria-label=TikTok],#uofg-footer-social-links a:focus[aria-label=TikTok]{color:#f00}#uofg-footer-social-links svg{height:2rem}#uofg-footer-links{display:grid;grid-template-columns:1fr}#uofg-footer-links svg{color:#ffc72a}@media (min-width: 570px){#uofg-footer-links{grid-template-columns:1fr 1fr;grid-column-start:1;grid-column-end:3}}@media (min-width: 962px){#uofg-footer-links{grid-row:unset;grid-column:unset;gap:0.75rem 9.5vw}}#uofg-footer-address{font-style:normal;white-space:nowrap}#uofg-footer-address a{color:#69a3b9}@media (min-width: 570px){#uofg-footer-address{grid-row:1;grid-column:2}}@media (min-width: 962px){#uofg-footer-address{grid-row:unset;grid-column:unset}}";
 
-const SocialLink = props => (index.h("li", null, index.h("a", { href: props.url, "aria-label": props.name }, index.h(FontAwesomeIcon, { icon: props.icon }))));
-const FooterLink = props => (index.h("li", null, index.h("a", { href: props.url, title: props.title }, index.h(FontAwesomeIcon, { icon: props.icon }), index.h("span", null, props.text))));
+const SocialLink = props => (index.h("li", null, index.h("a", { href: props.url, "aria-label": props.name }, index.h(index$1.FontAwesomeIcon, { icon: props.icon }))));
+const FooterLink = props => (index.h("li", null, index.h("a", { href: props.url, title: props.title }, index.h(index$1.FontAwesomeIcon, { icon: props.icon }), index.h("span", null, props.text))));
 const UofgFooter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h("footer", { id: "uofg-footer" }, index.h("div", { id: "uofg-footer-content" }, index.h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, index.h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), index.h("ul", { id: "uofg-footer-social-links" }, index.h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare.faTwitterSquare }), index.h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare.faFacebookSquare }), index.h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram.faInstagram }), index.h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube.faYoutube }), index.h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin.faLinkedin }), index.h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok.faTiktok })), index.h("a", { href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), index.h("a", { href: "//www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), index.h("ul", { id: "uofg-footer-links", class: "uofg-footer-content-separator" }, index.h(FooterLink, { text: "Accessibility", url: "https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g", icon: faUniversalAccess.faUniversalAccess }), index.h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey.faKey }), index.h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/site-map/", icon: faSitemap.faSitemap }), index.h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck.faCircleCheck }), index.h(FooterLink, { text: "Land Acknowledgement", url: "https://www.uoguelph.ca/land-acknowledgement/", icon: faTree.faTree, title: "The University of Guelph resides on the treaty lands and territory of the Mississaugas of the Credit. We recognize that today this gathering place is home to many First Nations, Inuit and M\u00E9tis peoples and acknowledging them reminds us of our collective responsibility to the land where we learn and work." }), index.h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase.faBriefcase }), index.h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendar.faCalendar }), index.h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendar.faCalendar }), index.h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList.faList }), index.h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart.faHandHoldingHeart })), index.h("address", { id: "uofg-footer-address", class: "uofg-footer-content-separator" }, index.h("strong", null, "University of Guelph"), index.h("span", null, "50 Stone Road East,"), index.h("span", null, "Guelph, Ontario, Canada"), index.h("span", null, "N1G 2W1"), index.h("a", { href: "tel:1-519-824-4120" }, index.h(FontAwesomeIcon, { icon: faPhoneFlip.faPhoneFlip }), index.h("span", null, "519-824-4120"))))));
+    return (index.h("footer", { id: "uofg-footer" }, index.h("div", { id: "uofg-footer-content" }, index.h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, index.h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), index.h("ul", { id: "uofg-footer-social-links" }, index.h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare.faTwitterSquare }), index.h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare.faFacebookSquare }), index.h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram.faInstagram }), index.h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube.faYoutube }), index.h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin.faLinkedin }), index.h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok.faTiktok })), index.h("a", { href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), index.h("a", { href: "//www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), index.h("ul", { id: "uofg-footer-links", class: "uofg-footer-content-separator" }, index.h(FooterLink, { text: "Accessibility", url: "https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g", icon: faUniversalAccess.faUniversalAccess }), index.h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey.faKey }), index.h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/site-map/", icon: faSitemap.faSitemap }), index.h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck.faCircleCheck }), index.h(FooterLink, { text: "Land Acknowledgement", url: "https://www.uoguelph.ca/land-acknowledgement/", icon: faTree.faTree, title: "The University of Guelph resides on the treaty lands and territory of the Mississaugas of the Credit. We recognize that today this gathering place is home to many First Nations, Inuit and M\u00E9tis peoples and acknowledging them reminds us of our collective responsibility to the land where we learn and work." }), index.h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase.faBriefcase }), index.h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendar.faCalendar }), index.h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendar.faCalendar }), index.h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList.faList }), index.h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart.faHandHoldingHeart })), index.h("address", { id: "uofg-footer-address", class: "uofg-footer-content-separator" }, index.h("strong", null, "University of Guelph"), index.h("span", null, "50 Stone Road East,"), index.h("span", null, "Guelph, Ontario, Canada"), index.h("span", null, "N1G 2W1"), index.h("a", { href: "tel:1-519-824-4120" }, index.h(index$1.FontAwesomeIcon, { icon: faPhoneFlip.faPhoneFlip }), index.h("span", null, "519-824-4120"))))));
   }
 };
 UofgFooter.style = uofgFooterCss;
@@ -817,13 +797,13 @@ exports.svgPathData = svgPathData;
 exports.aliases = aliases;
 });
 
-const uofgHeaderCss = ":host{height:auto !important}*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}a{display:flex;align-items:center;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}li{display:contents}button{border:none;background:none;cursor:pointer;font-size:inherit;font-family:inherit;color:inherit;line-height:inherit;word-spacing:inherit;letter-spacing:inherit;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}uofg-menu{--uofg-menu-animation-type:slide;--uofg-menu-animation-duration:0.2s;--uofg-menu-animation-easing:ease-in-out;display:block;position:relative}uofg-menu>[slot=button]{display:flex;align-items:center;gap:0.5rem;height:100%;padding:0 1rem}uofg-menu>[slot=button]>svg{height:1em;fill:currentColor;transition-property:transform;transition-duration:0.2s;transition-timing-function:ease-in-out}uofg-menu>[slot=content]{display:flex;flex-direction:column;position:absolute;z-index:1;min-width:20rem;right:0;background-color:#fff;color:#000;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2)}#uofg-header{position:relative;width:100%;z-index:10000;font-size:1.6rem;font-family:\"Roboto Condensed\", Arial, sans-serif}#uofg-header-top-content-container,#uofg-header-main-content-container,#uofg-header-sub-content-container{display:flex;position:relative;align-items:center;justify-content:flex-end;width:100%;padding:0 calc((100vw - 1500px) / 2)}#uofg-header-top-content-container{height:3.5rem;background-color:#fff;color:#000;z-index:3}#uofg-header-top-content-container>ul{display:flex;align-items:center;height:100%}#uofg-header-top-content-container>ul>li>a{height:100%;padding:0 1rem}#uofg-header-top-content-container>ul>li>a:hover,#uofg-header-top-content-container>ul>li>a:focus-visible,#uofg-header-top-content-container>ul>li>a[aria-expanded=true]{background-color:#ddd}#uofg-header-top-content-container>uofg-menu{height:100%}#uofg-header-top-content-container>uofg-menu>[slot=button]{padding:0 1rem;background-color:#ffc72a;color:#000;font-weight:bold}#uofg-header-top-content-container>uofg-menu>[slot=button]:hover,#uofg-header-top-content-container>uofg-menu>[slot=button]:focus-visible,#uofg-header-top-content-container>uofg-menu>[slot=button][aria-expanded=true]{background-color:#ccc;color:#000}#uofg-header-top-content-container>uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-top-content-container>uofg-menu>[slot=content]{background-color:#ddd;color:#000}#uofg-header-top-content-container>uofg-menu>[slot=content] a{height:100%;padding:0.75rem;border-bottom:1px solid rgba(0, 0, 0, 0.4)}#uofg-header-top-content-container>uofg-menu>[slot=content] a:hover,#uofg-header-top-content-container>uofg-menu>[slot=content] a:focus-visible{background-color:#ffc72a}#uofg-header-main-content-container{height:5rem;background-color:#000;color:#fff;z-index:2}#uofg-header-main-content-container>*{height:100%}#uofg-header-main-content-container.full-height{height:8rem}#uofg-header-logo-container{display:flex;height:100%;margin-right:auto;overflow:hidden}#uofg-header-logo-container>*{height:100%}#uofg-header-logo-container svg{width:auto}#uofg-header-decorative-img{position:absolute;left:0}#uofg-header-decorative-img>svg{height:100%}@media screen and (max-width: 1500px){#uofg-header-decorative-img{position:static}}#uofg-header-logo{height:100%;position:relative;margin-left:1rem;transition:opacity 0.2s ease-in-out}#uofg-header-logo>svg{height:100%}#uofg-header-logo:hover,#uofg-header-logo:focus-visible{opacity:0.8}@media screen and (min-width: 1500px) and (max-width: calc(1500px + 7rem)){#uofg-header-logo{position:absolute;left:0;margin-left:7rem}}#uofg-header-full-main-content,#uofg-header-reduced-main-content{display:flex}#uofg-header-full-main-content svg,#uofg-header-reduced-main-content svg{height:1em;fill:currentColor}#uofg-header-full-main-content>ul{display:flex;align-items:center}#uofg-header-full-main-content>ul>li>a,#uofg-header-full-main-content>a,#uofg-header-full-main-content>uofg-menu>[slot=button]{display:flex;align-items:center;justify-content:center;height:100%;padding:0 1.5rem;font-size:1.8rem;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-full-main-content>ul>li>a:hover,#uofg-header-full-main-content>ul>li>a:focus-visible,#uofg-header-full-main-content>a:hover,#uofg-header-full-main-content>a:focus-visible,#uofg-header-full-main-content>uofg-menu>[slot=button]:hover,#uofg-header-full-main-content>uofg-menu>[slot=button]:focus-visible{background-color:#333;color:#ffc72a}#uofg-header-full-main-content>uofg-menu>[slot=button]{color:#ffc72a}#uofg-header-full-main-content>uofg-menu>[slot=content]{color:#000;background-color:#fff;padding:2rem;width:35rem}#uofg-header-full-main-content>uofg-menu>[slot=content]>span{display:block;font-size:2.4rem;font-weight:bold;padding:1rem 0}#uofg-header-full-main-content>a{color:#ffc72a}#uofg-header-reduced-main-content>uofg-menu>[slot=button],#uofg-header-reduced-main-content>a{justify-content:center;padding:0 1.5rem;font-size:2rem;border-left:1px solid rgba(255, 255, 255, 0.15)}#uofg-header-reduced-main-content>uofg-menu>[slot=button]:hover,#uofg-header-reduced-main-content>uofg-menu>[slot=button]:focus-visible,#uofg-header-reduced-main-content>uofg-menu>[slot=button][aria-expanded=true],#uofg-header-reduced-main-content>a:hover,#uofg-header-reduced-main-content>a:focus-visible,#uofg-header-reduced-main-content>a[aria-expanded=true]{background-color:#fff;color:#000}#uofg-header-reduced-main-content>uofg-menu{position:static;height:100%}#uofg-header-reduced-main-content>uofg-menu>[slot=content]{background-color:#fff;color:#000;width:100%;padding:1rem 2rem 2rem}#uofg-header-reduced-main-content>uofg-menu>[slot=content]>span{display:block;font-size:2.4rem;font-weight:bold;padding:1rem 0}#uofg-header-main-menu>[slot=content]{overflow-y:auto;max-height:calc(100vh - 5rem)}#uofg-header-main-menu uofg-menu{position:relative}#uofg-header-main-menu uofg-menu>[slot=button]{display:flex;padding:0.75rem;height:auto;width:100%;color:inherit;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-main-menu uofg-menu>[slot=button]>svg{margin-left:auto}#uofg-header-main-menu uofg-menu>[slot=button]:hover,#uofg-header-main-menu uofg-menu>[slot=button]:focus-visible,#uofg-header-main-menu uofg-menu>[slot=button][aria-expanded=true]{background-color:rgba(0, 0, 0, 0.1)}#uofg-header-main-menu uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-main-menu uofg-menu>[slot=content]{position:relative;box-shadow:none;padding:0}#uofg-header-main-menu uofg-menu>[slot=content]>li>a{padding:0.75rem;border-bottom:1px solid rgba(0, 0, 0, 0.1);transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-main-menu uofg-menu>[slot=content]>li>a:hover,#uofg-header-main-menu uofg-menu>[slot=content]>li>a:focus-visible{background-color:rgba(0, 0, 0, 0.1)}#uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu>[slot=button]{background-color:#ffc72a;color:#000;font-weight:bold}#uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu>[slot=content]{background-color:rgba(0, 0, 0, 0.1);color:#000}#uofg-header-main-menu ul>li>a{padding:0.75rem;width:100%;color:inherit;border-bottom:1px solid rgba(0, 0, 0, 0.1);transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-main-menu ul>li>a:hover,#uofg-header-main-menu ul>li>a:focus-visible,#uofg-header-main-menu ul>li>a[aria-expanded=true]{background-color:rgba(0, 0, 0, 0.1)}#uofg-header-sub-content-container{height:4rem;background-color:#ddd;color:#000;z-index:1}#uofg-header-sub-content-container #uofg-header-page-title{display:flex;align-items:center;margin-right:auto;padding:0 1rem;height:100%;font-weight:bold}#uofg-header-sub-content-container uofg-menu{position:relative;height:100%}#uofg-header-sub-content-container uofg-menu>[slot=button]{color:inherit}#uofg-header-sub-content-container uofg-menu>[slot=button]:hover,#uofg-header-sub-content-container uofg-menu>[slot=button]:focus-visible,#uofg-header-sub-content-container uofg-menu>[slot=button][aria-expanded=true]{background-color:#ffc72a;color:#000}#uofg-header-sub-content-container uofg-menu>[slot=content]{position:absolute;background-color:#ddd;color:#000}#uofg-header-sub-content-container uofg-menu>[slot=content]>li:not(:last-child)>a{border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-sub-content-container uofg-menu>[slot=content]>li>a{padding:0.75rem;justify-content:flex-start}#uofg-header-sub-content-container a{display:flex;align-items:center;justify-content:center;height:100%;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-sub-content-container a:hover,#uofg-header-sub-content-container a:focus-visible{background-color:#ffc72a;color:#000}#uofg-header-full-sub-content,#uofg-header-reduced-sub-content{height:100%}#uofg-header-full-sub-content a,#uofg-header-reduced-sub-content a{padding:0 0.5rem}#uofg-header-full-sub-content{height:100%}#uofg-header-full-sub-content>ul{display:flex;align-items:center}#uofg-header-full-sub-content uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-full-sub-content .uofg-header-page-specific{display:flex;height:100%;align-items:center}#uofg-header-reduced-sub-content>uofg-menu{position:static}#uofg-header-reduced-sub-content>uofg-menu>[slot=button]{font-size:2rem;padding:0 1.5rem}#uofg-header-reduced-sub-content>uofg-menu>[slot=content]{background-color:#fff;color:#000;padding:2rem;overflow-y:auto;max-height:calc(100vh - 5rem - 4rem);width:100%}#uofg-header-reduced-sub-content>uofg-menu>[slot=content]>span{display:block;font-size:2.4rem;font-weight:bold;padding:1rem 0}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] a{height:auto;padding:1rem;width:100%;align-items:flex-start;justify-content:flex-start;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] a:hover,#uofg-header-reduced-sub-content>uofg-menu>[slot=content] a:focus-visible{background-color:rgba(0, 0, 0, 0.1);color:#000}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu{height:auto}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]{width:100%;padding:1rem;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]>svg{margin-left:auto}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]:hover,#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]:focus-visible,#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button][aria-expanded=true]{background-color:rgba(0, 0, 0, 0.2);color:#000}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=content]{position:static;background-color:rgba(0, 0, 0, 0.1);box-shadow:none}";
+const uofgHeaderCss = ":focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}:host{height:auto !important}a{display:flex;align-items:center;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}li{display:contents}button{border:none;background:none;cursor:pointer;font-size:inherit;font-family:inherit;color:inherit;line-height:inherit;word-spacing:inherit;letter-spacing:inherit;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}uofg-menu{--uofg-menu-animation-type:slide;--uofg-menu-animation-duration:0.2s;--uofg-menu-animation-easing:ease-in-out;display:block;position:relative}uofg-menu>[slot=button]{display:flex;align-items:center;gap:0.5rem;height:100%;padding:0 1rem}uofg-menu>[slot=button]>svg{height:1em;fill:currentColor;transition-property:transform;transition-duration:0.2s;transition-timing-function:ease-in-out}uofg-menu>[slot=content]{display:flex;flex-direction:column;position:absolute;z-index:1;min-width:20rem;right:0;background-color:white;color:black;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2)}#uofg-header{position:relative;width:100%;z-index:10000;font-size:1.6rem;font-family:\"Roboto Condensed\", Arial, sans-serif}#uofg-header-top-content-container,#uofg-header-main-content-container,#uofg-header-sub-content-container{display:flex;position:relative;align-items:center;justify-content:flex-end;width:100%;padding:0 calc((100vw - 1500px) / 2)}#uofg-header-top-content-container{height:3.5rem;background-color:white;color:black;z-index:3}#uofg-header-top-content-container>ul{display:flex;align-items:center;height:100%}#uofg-header-top-content-container>ul>li>a{height:100%;padding:0 1rem}#uofg-header-top-content-container>ul>li>a:hover,#uofg-header-top-content-container>ul>li>a:focus-visible,#uofg-header-top-content-container>ul>li>a[aria-expanded=true]{background-color:#dddddd}#uofg-header-top-content-container>uofg-menu{height:100%}#uofg-header-top-content-container>uofg-menu>[slot=button]{padding:0 1rem;background-color:#ffc72a;color:black;font-weight:bold}#uofg-header-top-content-container>uofg-menu>[slot=button]:hover,#uofg-header-top-content-container>uofg-menu>[slot=button]:focus-visible,#uofg-header-top-content-container>uofg-menu>[slot=button][aria-expanded=true]{background-color:#ccc;color:black}#uofg-header-top-content-container>uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-top-content-container>uofg-menu>[slot=content]{background-color:#dddddd;color:black}#uofg-header-top-content-container>uofg-menu>[slot=content] a{height:100%;padding:0.75rem;border-bottom:1px solid rgba(0, 0, 0, 0.4)}#uofg-header-top-content-container>uofg-menu>[slot=content] a:hover,#uofg-header-top-content-container>uofg-menu>[slot=content] a:focus-visible{background-color:#ffc72a}#uofg-header-main-content-container{height:5rem;background-color:black;color:white;z-index:2}#uofg-header-main-content-container>*{height:100%}#uofg-header-main-content-container.full-height{height:8rem}#uofg-header-logo-container{display:flex;height:100%;margin-right:auto;overflow:hidden}#uofg-header-logo-container>*{height:100%}#uofg-header-logo-container svg{width:auto}#uofg-header-decorative-img{position:absolute;left:0}#uofg-header-decorative-img>svg{height:100%}@media screen and (max-width: 1500px){#uofg-header-decorative-img{position:static}}#uofg-header-logo{height:100%;position:relative;margin-left:1rem;transition:opacity 0.2s ease-in-out}#uofg-header-logo>svg{height:100%}#uofg-header-logo:hover,#uofg-header-logo:focus-visible{opacity:0.8}@media screen and (min-width: 1500px) and (max-width: calc(1500px + 7rem)){#uofg-header-logo{position:absolute;left:0;margin-left:7rem}}#uofg-header-full-main-content,#uofg-header-reduced-main-content{display:flex}#uofg-header-full-main-content svg,#uofg-header-reduced-main-content svg{height:1em;fill:currentColor}#uofg-header-full-main-content>ul{display:flex;align-items:center}#uofg-header-full-main-content>ul>li>a,#uofg-header-full-main-content>a,#uofg-header-full-main-content>uofg-menu>[slot=button]{display:flex;align-items:center;justify-content:center;height:100%;padding:0 1.5rem;font-size:1.8rem;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-full-main-content>ul>li>a:hover,#uofg-header-full-main-content>ul>li>a:focus-visible,#uofg-header-full-main-content>a:hover,#uofg-header-full-main-content>a:focus-visible,#uofg-header-full-main-content>uofg-menu>[slot=button]:hover,#uofg-header-full-main-content>uofg-menu>[slot=button]:focus-visible{background-color:#333333;color:#ffc72a}#uofg-header-full-main-content>uofg-menu>[slot=button]{color:#ffc72a}#uofg-header-full-main-content>uofg-menu>[slot=content]{color:black;background-color:white;padding:2rem;width:35rem}#uofg-header-full-main-content>uofg-menu>[slot=content]>span{display:block;font-size:2.4rem;font-weight:bold;padding:1rem 0}#uofg-header-full-main-content>a{color:#ffc72a}#uofg-header-reduced-main-content>uofg-menu>[slot=button],#uofg-header-reduced-main-content>a{justify-content:center;padding:0 1.5rem;font-size:2rem;border-left:1px solid rgba(255, 255, 255, 0.15)}#uofg-header-reduced-main-content>uofg-menu>[slot=button]:hover,#uofg-header-reduced-main-content>uofg-menu>[slot=button]:focus-visible,#uofg-header-reduced-main-content>uofg-menu>[slot=button][aria-expanded=true],#uofg-header-reduced-main-content>a:hover,#uofg-header-reduced-main-content>a:focus-visible,#uofg-header-reduced-main-content>a[aria-expanded=true]{background-color:white;color:black}#uofg-header-reduced-main-content>uofg-menu{position:static;height:100%}#uofg-header-reduced-main-content>uofg-menu>[slot=content]{background-color:white;color:black;width:100%;padding:1rem 2rem 2rem}#uofg-header-reduced-main-content>uofg-menu>[slot=content]>span{display:block;font-size:2.4rem;font-weight:bold;padding:1rem 0}#uofg-header-main-menu>[slot=content]{overflow-y:auto;max-height:calc(100vh - 5rem)}#uofg-header-main-menu uofg-menu{position:relative}#uofg-header-main-menu uofg-menu>[slot=button]{display:flex;padding:0.75rem;height:auto;width:100%;color:inherit;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-main-menu uofg-menu>[slot=button]>svg{margin-left:auto}#uofg-header-main-menu uofg-menu>[slot=button]:hover,#uofg-header-main-menu uofg-menu>[slot=button]:focus-visible,#uofg-header-main-menu uofg-menu>[slot=button][aria-expanded=true]{background-color:rgba(0, 0, 0, 0.1)}#uofg-header-main-menu uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-main-menu uofg-menu>[slot=content]{position:relative;box-shadow:none;padding:0}#uofg-header-main-menu uofg-menu>[slot=content]>li>a{padding:0.75rem;border-bottom:1px solid rgba(0, 0, 0, 0.1);transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-main-menu uofg-menu>[slot=content]>li>a:hover,#uofg-header-main-menu uofg-menu>[slot=content]>li>a:focus-visible{background-color:rgba(0, 0, 0, 0.1)}#uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu>[slot=button]{background-color:#ffc72a;color:black;font-weight:bold}#uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu>[slot=content]{background-color:rgba(0, 0, 0, 0.1);color:black}#uofg-header-main-menu ul>li>a{padding:0.75rem;width:100%;color:inherit;border-bottom:1px solid rgba(0, 0, 0, 0.1);transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-main-menu ul>li>a:hover,#uofg-header-main-menu ul>li>a:focus-visible,#uofg-header-main-menu ul>li>a[aria-expanded=true]{background-color:rgba(0, 0, 0, 0.1)}#uofg-header-sub-content-container{height:4rem;background-color:#dddddd;color:black;z-index:1}#uofg-header-sub-content-container #uofg-header-page-title{display:flex;align-items:center;margin-right:auto;padding:0 1rem;height:100%;font-weight:bold}#uofg-header-sub-content-container uofg-menu{position:relative;height:100%}#uofg-header-sub-content-container uofg-menu>[slot=button]{color:inherit}#uofg-header-sub-content-container uofg-menu>[slot=button]:hover,#uofg-header-sub-content-container uofg-menu>[slot=button]:focus-visible,#uofg-header-sub-content-container uofg-menu>[slot=button][aria-expanded=true]{background-color:#ffc72a;color:black}#uofg-header-sub-content-container uofg-menu>[slot=content]{position:absolute;background-color:#dddddd;color:black}#uofg-header-sub-content-container uofg-menu>[slot=content]>li:not(:last-child)>a{border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-sub-content-container uofg-menu>[slot=content]>li>a{padding:0.75rem;justify-content:flex-start}#uofg-header-sub-content-container a{display:flex;align-items:center;justify-content:center;height:100%;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-sub-content-container a:hover,#uofg-header-sub-content-container a:focus-visible{background-color:#ffc72a;color:black}#uofg-header-full-sub-content,#uofg-header-reduced-sub-content{height:100%}#uofg-header-full-sub-content a,#uofg-header-reduced-sub-content a{padding:0 0.5rem}#uofg-header-full-sub-content{height:100%}#uofg-header-full-sub-content>ul{display:flex;align-items:center}#uofg-header-full-sub-content uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-full-sub-content .uofg-header-page-specific{display:flex;height:100%;align-items:center}#uofg-header-reduced-sub-content>uofg-menu{position:static}#uofg-header-reduced-sub-content>uofg-menu>[slot=button]{font-size:2rem;padding:0 1.5rem}#uofg-header-reduced-sub-content>uofg-menu>[slot=content]{background-color:white;color:black;padding:2rem;overflow-y:auto;max-height:calc(100vh - 5rem - 4rem);width:100%}#uofg-header-reduced-sub-content>uofg-menu>[slot=content]>span{display:block;font-size:2.4rem;font-weight:bold;padding:1rem 0}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] a{height:auto;padding:1rem;width:100%;align-items:flex-start;justify-content:flex-start;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] a:hover,#uofg-header-reduced-sub-content>uofg-menu>[slot=content] a:focus-visible{background-color:rgba(0, 0, 0, 0.1);color:black}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu{height:auto}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]{width:100%;padding:1rem;border-bottom:1px solid rgba(0, 0, 0, 0.1)}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]>svg{margin-left:auto}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]:hover,#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button]:focus-visible,#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button][aria-expanded=true]{background-color:rgba(0, 0, 0, 0.2);color:black}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=button][aria-expanded=true]>svg{transform:rotate(180deg)}#uofg-header-reduced-sub-content>uofg-menu>[slot=content] uofg-menu>[slot=content]{position:static;background-color:rgba(0, 0, 0, 0.1);box-shadow:none}";
 
 const TopLinks = () => (index.h("ul", null, index.h("li", null, index.h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/apply" }, "APPLY")), index.h("li", null, index.h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))));
-const HelloYouMenu = props => (index.h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, index.h("button", { slot: "button", "aria-label": "Hello, YOU! menu" }, index.h("span", null, "Hello, YOU!"), index.h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), index.h("ul", { slot: "content" }, index.h("li", null, index.h("a", { href: "https://uoguelph.ca/future-students" }, "Future Students")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/current-students" }, "Current Students")), index.h("li", null, index.h("a", { href: "https://alumni.uoguelph.ca/" }, "Alumni & Donors")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/staff-and-faculty" }, "Staff & Faculty")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/parents-and-visitors" }, "Parents & Visitors")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/employers-and-partners" }, "Employers & Partners")))));
+const HelloYouMenu = props => (index.h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, index.h("button", { slot: "button", "aria-label": "Hello, YOU! menu" }, index.h("span", null, "Hello, YOU!"), index.h(index$1.FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), index.h("ul", { slot: "content" }, index.h("li", null, index.h("a", { href: "https://uoguelph.ca/future-students" }, "Future Students")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/current-students" }, "Current Students")), index.h("li", null, index.h("a", { href: "https://alumni.uoguelph.ca/" }, "Alumni & Donors")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/staff-and-faculty" }, "Staff & Faculty")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/parents-and-visitors" }, "Parents & Visitors")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/employers-and-partners" }, "Employers & Partners")))));
 const MainLinks = () => (index.h("ul", { class: "uofg-header-global-links" }, index.h("li", null, index.h("a", { href: "https://uoguelph.ca/about" }, "About")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/academics" }, "Academics")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/admissions" }, "Admissions")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/research" }, "Research")), index.h("li", null, index.h("a", { href: "https://uoguelph.ca/student-life" }, "Student Life"))));
-const AccountLink = () => (index.h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "University of Guelph Intranet" }, index.h(FontAwesomeIcon, { icon: faRightToBracket.faRightToBracket })));
-const SearchLink = () => (index.h("a", { href: "https://uoguelph.ca/search", "aria-label": "Search University of Guelph" }, index.h(FontAwesomeIcon, { icon: faSearch.faSearch })));
+const AccountLink = () => (index.h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "University of Guelph Intranet" }, index.h(index$1.FontAwesomeIcon, { icon: faRightToBracket.faRightToBracket })));
+const SearchLink = () => (index.h("a", { href: "https://uoguelph.ca/search", "aria-label": "Search University of Guelph" }, index.h(index$1.FontAwesomeIcon, { icon: faSearch.faSearch })));
 const PageSpecific = props => {
   var _a;
   return (index.h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map(item => {
@@ -833,7 +813,7 @@ const PageSpecific = props => {
     if ('text' in item) {
       return (index.h("li", null, index.h("a", Object.assign({ href: item.href }, item.attributes), item.text)));
     }
-    return (index.h("li", null, index.h("uofg-menu", { autoCollapse: props.autoCollapse }, index.h("button", { slot: "button" }, index.h("span", null, item.title), index.h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), index.h("ul", { slot: "content", role: "menu" }, item.links.map(link => (index.h("li", null, index.h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
+    return (index.h("li", null, index.h("uofg-menu", { autoCollapse: props.autoCollapse }, index.h("button", { slot: "button" }, index.h("span", null, item.title), index.h(index$1.FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), index.h("ul", { slot: "content", role: "menu" }, item.links.map(link => (index.h("li", null, index.h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
   }).filter(Boolean)));
 };
 const UofgHeader = class {
@@ -884,24 +864,13 @@ const UofgHeader = class {
     });
   }
   render() {
-    return (index.h("header", { id: "uofg-header" }, this.isFullSize && (index.h("div", { id: "uofg-header-top-content-container" }, index.h(TopLinks, null), index.h(HelloYouMenu, { autoCollapse: true }))), index.h("div", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize } }, index.h("div", { id: "uofg-header-logo-container" }, this.isFullSize && index.h("div", { id: "uofg-header-decorative-img", innerHTML: Decoration }), index.h("a", { id: "uofg-header-logo", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (index.h("div", { id: "uofg-header-full-main-content", class: "uofg-header-main-content" }, index.h(MainLinks, null), index.h(AccountLink, null), index.h(SearchLink, null))) : (index.h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, index.h(AccountLink, null), index.h(SearchLink, null), index.h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, index.h("button", { slot: "button", "aria-label": "Main Menu" }, index.h(FontAwesomeIcon, { icon: faBars.faBars })), index.h("div", { slot: "content" }, index.h("span", null, "University of Guelph"), index.h(MainLinks, null), index.h(HelloYouMenu, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (index.h("div", { id: "uofg-header-sub-content-container" }, this.pageTitle &&
-      (this.pageUrl ? (index.h("a", { id: "uofg-header-page-title", href: this.pageUrl }, this.pageTitle)) : (index.h("span", { id: "uofg-header-page-title" }, this.pageTitle))), this.isFullSize ? (index.h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, index.h(PageSpecific, { content: this.pageSpecificContent, autoCollapse: true }))) : (index.h("div", { id: "uofg-header-reduced-sub-content", class: "uofg-header-sub-content" }, index.h("uofg-menu", { id: "uofg-header-sub-menu", "auto-collapse": true }, index.h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, index.h(FontAwesomeIcon, { icon: faBars.faBars })), index.h("div", { slot: "content" }, index.h(PageSpecific, { content: this.pageSpecificContent })))))))));
+    return (index.h("header", { id: "uofg-header" }, this.isFullSize && (index.h("div", { id: "uofg-header-top-content-container" }, index.h(TopLinks, null), index.h(HelloYouMenu, { autoCollapse: true }))), index.h("div", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize } }, index.h("div", { id: "uofg-header-logo-container" }, this.isFullSize && index.h("div", { id: "uofg-header-decorative-img", innerHTML: Decoration }), index.h("a", { id: "uofg-header-logo", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (index.h("div", { id: "uofg-header-full-main-content", class: "uofg-header-main-content" }, index.h(MainLinks, null), index.h(AccountLink, null), index.h(SearchLink, null))) : (index.h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, index.h(AccountLink, null), index.h(SearchLink, null), index.h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, index.h("button", { slot: "button", "aria-label": "Main Menu" }, index.h(index$1.FontAwesomeIcon, { icon: faBars.faBars })), index.h("div", { slot: "content" }, index.h("span", null, "University of Guelph"), index.h(MainLinks, null), index.h(HelloYouMenu, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (index.h("div", { id: "uofg-header-sub-content-container" }, this.pageTitle &&
+      (this.pageUrl ? (index.h("a", { id: "uofg-header-page-title", href: this.pageUrl }, this.pageTitle)) : (index.h("span", { id: "uofg-header-page-title" }, this.pageTitle))), this.isFullSize ? (index.h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, index.h(PageSpecific, { content: this.pageSpecificContent, autoCollapse: true }))) : (index.h("div", { id: "uofg-header-reduced-sub-content", class: "uofg-header-sub-content" }, index.h("uofg-menu", { id: "uofg-header-sub-menu", "auto-collapse": true }, index.h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, index.h(index$1.FontAwesomeIcon, { icon: faBars.faBars })), index.h("div", { slot: "content" }, index.h(PageSpecific, { content: this.pageSpecificContent })))))))));
   }
   get el() { return index.getElement(this); }
 };
 UofgHeader.style = uofgHeaderCss;
 
-const WEB_ANIMATIONS_SUPPORTED = () => {
-  return typeof window !== 'undefined' && 'animate' in HTMLElement.prototype;
-};
-const PREFERS_REDUCED_MOTION = () => {
-  return typeof window !== 'undefined' && 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 UofgMenu = class {
@@ -984,7 +953,7 @@ const UofgMenu = class {
     // Determine what animation type the user wants.
     const type = this.getAnimationType();
     // If Web Animations API isn't supported, or the user requested no animation, we can simply set display style
-    if (!WEB_ANIMATIONS_SUPPORTED() || PREFERS_REDUCED_MOTION() || type === 'none') {
+    if (!utils.WEB_ANIMATIONS_SUPPORTED() || utils.PREFERS_REDUCED_MOTION() || type === 'none') {
       this.content.style.display = newValue ? '' : 'none';
       return;
     }
@@ -1136,162 +1105,8 @@ const UofgMenu = class {
   }; }
 };
 
-const uofgModalCss = ":host{visibility:visible !important;position:relative !important;z-index:100000 !important}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}#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;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-modal.open{visibility:visible;opacity:1}#uofg-modal-dismiss{display:flex;justify-content:center;align-items:center;position:absolute;top:2rem;right:2rem;padding:0.5rem;height:3.5rem;width:3.5rem;font-size:2rem;line-height:1;color:var(--uofg-modal-dismiss-color, #fff);z-index:2}#uofg-modal-dismiss>svg{display:block;height:1em;fill:currentColor}#uofg-modal-content{position:absolute;width:fit-content;height:fit-content;width:-moz-max-content;height:-moz-max-content;padding:2rem;max-width:100%;max-height:100%;left:50%;transform:translate(-50%, -50px);z-index:1;overflow:auto;transition-property:transform;transition-duration:0.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){#uofg-modal-content{transition:none}}#uofg-modal-content.centered{top:50%;transform:translate(-50%, calc(-50% - 50px))}#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.opened = index.createEvent(this, "opened", 2);
-    this.closed = index.createEvent(this, "closed", 2);
-    this.inertElements = [];
-    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.handleFocusOut = this.handleFocusOut.bind(this);
-    if (this.autoOpen) {
-      this.isOpen = true;
-    }
-  }
-  disconnectedCallback() {
-    // Just in case the modal is removed from the DOM before it is closed, make sure to remove the inert attribute from all elements that we marked as inert when the modal was opened.
-    for (const element of this.inertElements) {
-      element.removeAttribute('inert');
-    }
-  }
-  handleClick(e) {
-    if (!this.staticBackdrop && e.target === e.currentTarget) {
-      this.isOpen = false;
-    }
-  }
-  handleKeyUp(e) {
-    if (e.key === 'Escape') {
-      this.isOpen = false;
-    }
-  }
-  handleFocusOut(e) {
-    var _a;
-    if (!this.isOpen)
-      return; // Don't do anything if the modal is closed.
-    const relatedTarget = e.relatedTarget;
-    // If the focus is moving outside of the modal
-    if (!this.container.contains(relatedTarget) && !this.el.contains(relatedTarget)) {
-      e.preventDefault();
-      // If the focus is moving away from the dismiss button, focus the last focusable element in the modal.
-      if (e.target === this.dismissButton) {
-        const focusableElements = getAllFocusableElements(this.el);
-        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      else {
-        // Otherwise, focus the dismiss button.
-        this.dismissButton.focus();
-      }
-    }
-  }
-  handleIsOpenChange(newValue) {
-    if (newValue === true) {
-      window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
-            // Focus the container element when the modal is opened, so that the screen reader's will announce the modal when it opens.
-            this.container.focus();
-          });
-        });
-      });
-      // Mark outer elements as inert when the modal is open.
-      let current = this.el;
-      // We want to mark all elements outside of the modal as inert, so we need to traverse up the DOM tree until we reach the body element.
-      while (current !== null && current !== document.body) {
-        const parent = current.parentElement;
-        // If parent is null, then we may be inside a shadow root. If so, we get the host element and continue traversing up the DOM tree.
-        if (parent === null) {
-          const root = current.getRootNode();
-          if (root instanceof ShadowRoot) {
-            current = root.host;
-            continue;
-          }
-        }
-        if (parent !== null) {
-          for (const child of parent.children) {
-            if (child !== current && !child.inert) {
-              // Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
-              child.inert = true;
-              this.inertElements.push(child);
-            }
-          }
-        }
-        current = parent;
-        this.opened.emit();
-      }
-    }
-    else {
-      // Remove the inert attribute from all elements that we marked as inert when the modal was opened.
-      for (const element of this.inertElements) {
-        element.removeAttribute('inert');
-      }
-      // Clear the array of inert elements. This is important because we don't want to keep a reference to elements as they may be removed from the DOM and we could cause a memory leak.
-      this.inertElements = [];
-      this.closed.emit();
-    }
-    // Prevent scrolling of the body when the modal is open.
-    document.body.style.overflow = newValue ? 'hidden' : '';
-  }
-  render() {
-    return (index.h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, index.h("div", { id: "uofg-modal-content", part: "content", class: { centered: this.centered } }, index.h("button", { id: "uofg-modal-dismiss", part: "dismiss-button", "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_card = UofgCard;
 exports.uofg_footer = UofgFooter;
 exports.uofg_header = UofgHeader;
 exports.uofg_menu = UofgMenu;
-exports.uofg_modal = UofgModal;