@uoguelph/web-components 1.0.18 → 1.1.1

package/dist/esm/{index-a1f4c438.js → index-284464b7.js}

@@ -107,10 +107,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -377,6 +377,21 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
  *
  * Modified for Stencil's compiler and vdom
  */
+/**
+ * When running a VDom render set properties present on a VDom node onto the
+ * corresponding HTML element.
+ *
+ * Note that this function has special functionality for the `class`,
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
+ * `onClick`, etc). All others are just passed through as-is.
+ *
+ * @param elm the HTMLElement onto which attributes should be set
+ * @param memberName the name of the attribute to set
+ * @param oldValue the old value for the attribute
+ * @param newValue the new value for the attribute
+ * @param isSvg whether we're in an svg context or not
+ * @param flags bitflags for Vdom variables
+ */
 const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
     if (oldValue !== newValue) {
         let isProp = isMemberInElement(elm, memberName);
@@ -978,12 +993,39 @@ const nullifyVNodeRefs = (vNode) => {
  * @param hostRef data needed to root and render the virtual DOM tree, such as
  * the DOM node into which it should be rendered.
  * @param renderFnResults the virtual DOM nodes to be rendered
+ * @param isInitialLoad whether or not this is the first call after page load
  */
-const renderVdom = (hostRef, renderFnResults) => {
+const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+    // if `renderFnResults` is a Host node then we can use it directly. If not,
+    // we need to call `h` again to wrap the children of our component in a
+    // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
+    // implicitly that the top-level vdom node is 1) an only child and 2)
+    // contains attrs that need to be set on the host element.
     const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
     hostTagName = hostElm.tagName;
+    // On the first render and *only* on the first render we want to check for
+    // any attributes set on the host element which are also set on the vdom
+    // node. If we find them, we override the value on the VDom node attrs with
+    // the value from the host element, which allows developers building apps
+    // with Stencil components to override e.g. the `role` attribute on a
+    // component even if it's already set on the `Host`.
+    if (isInitialLoad && rootVnode.$attrs$) {
+        for (const key of Object.keys(rootVnode.$attrs$)) {
+            // We have a special implementation in `setAccessor` for `style` and
+            // `class` which reconciles values coming from the VDom with values
+            // already present on the DOM element, so we don't want to override those
+            // attributes on the VDom tree with values from the host element if they
+            // are present.
+            //
+            // Likewise, `ref` and `key` are special internal values for the Stencil
+            // runtime and we don't want to override those either.
+            if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
+                rootVnode.$attrs$[key] = hostElm[key];
+            }
+        }
+    }
     rootVnode.$tag$ = null;
     rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
     hostRef.$vnode$ = rootVnode;
@@ -1081,6 +1123,16 @@ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.th
  */
 const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
     (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+/**
+ * Update a component given reference to its host elements and so on.
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param isInitialLoad whether or not this function is being called as part of
+ * the first render cycle
+ */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
     var _a;
     const elm = hostRef.$hostElement$;
@@ -1092,7 +1144,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     }
     const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
     {
-        callRender(hostRef, instance);
+        callRender(hostRef, instance, elm, isInitialLoad);
     }
     if (rc) {
         // ok, so turns out there are some child host elements
@@ -1116,8 +1168,24 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-const callRender = (hostRef, instance, elm) => {
+/**
+ * Handle making the call to the VDom renderer with the proper context given
+ * various build variables
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param elm the Host element for the component
+ * @param isInitialLoad whether or not this function is being called as part of
+ * @returns an empty promise
+ */
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render() ;
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1131,7 +1199,7 @@ const callRender = (hostRef, instance, elm) => {
                 // or we need to update the css class/attrs on the host element
                 // DOM WRITE!
                 {
-                    renderVdom(hostRef, instance);
+                    renderVdom(hostRef, instance, isInitialLoad);
                 }
             }
         }
@@ -1200,6 +1268,16 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+/**
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+ * e.g. custom element node. If a build figures out that e.g. no component
+ * has a `componentDidLoad` method, the instance method gets removed from the
+ * output bundle and this function returns `undefined`.
+ * @param instance any object that may or may not contain methods
+ * @param method method name
+ * @param arg single arbitrary argument
+ * @returns result of method call if it exists, otherwise `undefined`
+ */
 const safeCall = (instance, method, arg) => {
     if (instance && instance[method]) {
         try {
@@ -1267,6 +1345,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
@@ -1304,7 +1383,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1327,12 +1406,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -1352,18 +1431,46 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
@@ -1496,23 +1603,35 @@ const connectedCallback = (elm) => {
             // since they would have been removed when disconnected
             addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
             // fire off connectedCallback() on component instance
-            fireConnectedCallback(hostRef.$lazyInstance$);
+            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+                fireConnectedCallback(hostRef.$lazyInstance$);
+            }
+            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+                hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
+            }
         }
         endConnected();
     }
 };
-const disconnectedCallback = (elm) => {
+const disconnectInstance = (instance) => {
+    {
+        safeCall(instance, 'disconnectedCallback');
+    }
+};
+const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
-        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
-        {
-            safeCall(instance, 'disconnectedCallback');
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+            disconnectInstance(hostRef.$lazyInstance$);
+        }
+        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+            hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
         }
     }
 };
@@ -1537,6 +1656,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     }
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
+            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
@@ -1550,7 +1670,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$listeners$ = compactMeta[3];
             }
             {
-                cmpMeta.$watchers$ = {};
+                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
@@ -1664,13 +1784,40 @@ const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !==
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
+/**
+ * A WeakMap mapping runtime component references to their corresponding host reference
+ * instances.
+ */
 const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
@@ -1679,11 +1826,11 @@ const registerHost = (elm, cmpMeta) => {
     }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-    return hostRefs.set(elm, hostRef);
+    addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$);
+    return hostRefs.set(hostElement, hostRef);
 };
 const isMemberInElement = (elm, memberName) => memberName in elm;
 const consoleError = (e, el) => (0, console.error)(e, el);

package/dist/esm/{index-1fc4b1ff.js → index-a0a2924b.js}

@@ -1,4 +1,4 @@
-import { h } from './index-a1f4c438.js';
+import { h } from './index-284464b7.js';
 
 const FontAwesomeIcon = props => {
   const width = props.icon.icon[0];

package/dist/esm/loader.js

@@ -1,9 +1,9 @@
-import { b as bootstrapLazy } from './index-a1f4c438.js';
-export { s as setNonce } from './index-a1f4c438.js';
+import { b as bootstrapLazy } from './index-284464b7.js';
+export { s as setNonce } from './index-284464b7.js';
 
 const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return bootstrapLazy([["uofg-alert",[[1,"uofg-alert"]]],["uofg-modal",[[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",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32],"isSubContainerOverflowing":[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);
+  if (typeof window === 'undefined') return undefined;
+  return bootstrapLazy([["uofg-alert",[[1,"uofg-alert"]]],["uofg-card",[[1,"uofg-card",{"href":[1]}]]],["uofg-modal",[[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]},null,{"isOpen":["handleIsOpenChange"]}]]],["uofg-back-to-top_4",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32],"isSubContainerOverflowing":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-footer",{"extraLinks":[32]}],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]},null,{"isExpanded":["handleIsExpandedChange"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/uofg-alert.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h } from './index-a1f4c438.js';
-import { F as FontAwesomeIcon, a as faCircleExclamation } from './index-1fc4b1ff.js';
+import { r as registerInstance, h } from './index-284464b7.js';
+import { F as FontAwesomeIcon, a as faCircleExclamation } from './index-a0a2924b.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}";
 

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, F as Fragment, g as getElement, c as createEvent, H as Host } from './index-a1f4c438.js';
-import { F as FontAwesomeIcon, f as faChevronUp } from './index-1fc4b1ff.js';
+import { r as registerInstance, h, g as getElement, c as createEvent, H as Host } from './index-284464b7.js';
+import { F as FontAwesomeIcon, f as faChevronUp } from './index-a0a2924b.js';
 import { W as WEB_ANIMATIONS_SUPPORTED, P as PREFERS_REDUCED_MOTION } from './utils-cfa32fa2.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}";
@@ -24,20 +24,6 @@ const UofgBackToTop = class {
 };
 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) {
-    registerInstance(this, hostRef);
-    this.href = undefined;
-  }
-  render() {
-    const Body = () => (h(Fragment, null, h("div", { id: "uofg-card-img" }, h("slot", { name: "img" })), h("div", { id: "uofg-card-content" }, h("slot", { name: "title" }), h("slot", { name: "subtitle" }), h("slot", { name: "body" })), h("div", { id: "uofg-card-footer" }, h("slot", { name: "footer" }))));
-    return this.href ? (h("a", { href: this.href, id: "uofg-card" }, h(Body, null))) : (h("div", { id: "uofg-card" }, 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"/>
@@ -162,7 +148,7 @@ var width = 576;
 var height = 512;
 var aliases = [];
 var unicode = 'f4be';
-var svgPathData = 'M148 76.6C148 34.3 182.3 0 224.6 0c20.3 0 39.8 8.1 54.1 22.4l9.3 9.3 9.3-9.3C311.6 8.1 331.1 0 351.4 0C393.7 0 428 34.3 428 76.6c0 20.3-8.1 39.8-22.4 54.1L302.1 234.1c-7.8 7.8-20.5 7.8-28.3 0L170.4 130.7C156.1 116.4 148 96.9 148 76.6zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z';
+var svgPathData = 'M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z';
 
 exports.definition = {
   prefix: prefix,
@@ -539,7 +525,7 @@ var width = 448;
 var height = 512;
 var aliases = ["twitter-square"];
 var unicode = 'f081';
-var svgPathData = '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 svgPathData = 'M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM351.3 199.3v0c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3 .6 10.4 .8 15.8 .8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8 .2 5.7 .2 8.5z';
 
 exports.definition = {
   prefix: prefix,
@@ -620,17 +606,33 @@ exports.svgPathData = svgPathData;
 exports.aliases = aliases;
 });
 
-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;width:-moz-max-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;line-height:1.2}#uofg-footer-content{display:grid;grid-template-columns:1fr;gap:2rem;width:100%;max-width:1320px}.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 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-container{display:flex}#uofg-footer-links{display:grid;height:100%;grid-template-columns:1fr}#uofg-footer-links svg{color:#ffc72a}#uofg-footer-address{font-style:normal;white-space:nowrap}#uofg-footer-address a{color:#69a3b9}@media (min-width: 570px){#uofg-footer-content{grid-template-columns:1fr 1fr}#uofg-footer-links-container{grid-column-start:1;grid-column-end:3}#uofg-footer-links{grid-template-columns:1fr 1fr;width:100%}#uofg-footer-address{grid-row:1;grid-column:2}}@media (min-width: 962px){#uofg-footer-content{grid-template-columns:0.5fr 1fr 0.5fr;justify-items:center;gap:2rem 2rem}#uofg-footer-links-container{grid-row:unset;grid-column:unset;justify-content:center;gap:0}#uofg-footer-links{gap:0 8rem;width:auto}#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;width:-moz-max-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;flex-direction:column;justify-content:center;align-items:center;background-color:#000;color:#fff;line-height:1.2}#uofg-footer-extra-links-container{display:flex;justify-content:center;align-items:center;width:100%;background-color:#f5f7fa}#uofg-footer-extra-links{display:flex;flex-direction:column;width:85%;align-items:center;justify-content:center;padding:1.25rem 1rem;color:#0074c1}#uofg-footer-extra-links>li>a{display:flex;justify-content:center;padding:1rem 0;width:100%;transition-property:color;transition-duration:0.2s;transition-timing-function:ease-in-out;border-bottom:2px solid transparent}#uofg-footer-extra-links>li>a:hover,#uofg-footer-extra-links>li>a:focus{color:black}#uofg-footer-extra-links>li:not(:last-child)>a{border-bottom:2px solid #bdc8ca}#uofg-footer-content{display:grid;grid-template-columns:1fr;gap:2rem;width:100%;padding:2rem;max-width:1320px}.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 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-container{display:flex}#uofg-footer-links{display:grid;height:100%;grid-template-columns:1fr}#uofg-footer-links svg{color:#ffc72a}#uofg-footer-address{font-style:normal;white-space:nowrap}#uofg-footer-address a{color:#69a3b9}@media (min-width: 570px){#uofg-footer-extra-links{flex-direction:row;flex-wrap:wrap;width:100%;max-width:1320px;padding:2rem 1rem;gap:1rem}#uofg-footer-extra-links>li>a{width:auto;padding:0 1rem 0 0;border-bottom:none !important}#uofg-footer-extra-links>li:not(:last-child)>a{border-right:2px solid rgba(0, 0, 0, 0.15)}#uofg-footer-content{grid-template-columns:1fr 1fr}#uofg-footer-links-container{grid-column-start:1;grid-column-end:3}#uofg-footer-links{grid-template-columns:1fr 1fr;width:100%}#uofg-footer-address{grid-row:1;grid-column:2}}@media (min-width: 962px){#uofg-footer-content{grid-template-columns:0.5fr 1fr 0.5fr;justify-items:center;gap:2rem 2rem}#uofg-footer-links-container{grid-row:unset;grid-column:unset;justify-content:center;gap:0}#uofg-footer-links{gap:0 8rem;width:auto}#uofg-footer-address{grid-row:unset;grid-column:unset}}";
 
 const SocialLink = props => (h("li", null, h("a", { href: props.url, "aria-label": props.name }, h(FontAwesomeIcon, { icon: props.icon }))));
 const FooterLink = props => (h("li", null, h("a", { href: props.url, title: props.title }, h(FontAwesomeIcon, { icon: props.icon }), h("span", null, props.text))));
 const UofgFooter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.extraLinks = [];
+  }
+  connectedCallback() {
+    var _a;
+    this.updateExtraLinks();
+    (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
+      this.updateExtraLinks();
+    }));
+    this.observer.observe(this.el, { childList: true, subtree: true });
+  }
+  updateExtraLinks() {
+    var _a;
+    this.extraLinks = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
+      .filter(child => child.tagName === 'A')
+      .map(child => ({ text: child.textContent, href: child.getAttribute('href') }));
   }
   render() {
-    return (h("footer", { id: "uofg-footer" }, h("div", { id: "uofg-footer-content" }, h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), h("ul", { id: "uofg-footer-social-links" }, h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare.faTwitterSquare }), h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare.faFacebookSquare }), h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram.faInstagram }), h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube.faYoutube }), h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin.faLinkedin }), h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok.faTiktok })), h("a", { href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), h("a", { href: "//www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), h("div", { id: "uofg-footer-links-container" }, h("ul", { id: "uofg-footer-links", class: "uofg-footer-content-separator" }, h(FooterLink, { text: "Accessibility", url: "https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g", icon: faUniversalAccess.faUniversalAccess }), h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey.faKey }), h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/sitemap", icon: faSitemap.faSitemap }), h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck.faCircleCheck }), 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." }), h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase.faBriefcase }), h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendar.faCalendar }), h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendar.faCalendar }), h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList.faList }), h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart.faHandHoldingHeart }))), h("address", { id: "uofg-footer-address", class: "uofg-footer-content-separator" }, h("strong", null, "University of Guelph"), h("span", null, "50 Stone Road East,"), h("span", null, "Guelph, Ontario, Canada"), h("span", null, "N1G 2W1"), h("a", { href: "tel:1-519-824-4120" }, h(FontAwesomeIcon, { icon: faPhoneFlip.faPhoneFlip }), h("span", null, "519-824-4120"))))));
+    return (h("footer", { id: "uofg-footer" }, h("div", { id: "uofg-footer-extra-links-container" }, this.extraLinks.length > 0 && (h("ul", { id: "uofg-footer-extra-links" }, this.extraLinks.map(link => (h("li", null, h("a", { href: link.href }, link.text))))))), h("div", { id: "uofg-footer-content" }, h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), h("ul", { id: "uofg-footer-social-links" }, h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare.faTwitterSquare }), h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare.faFacebookSquare }), h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram.faInstagram }), h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube.faYoutube }), h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin.faLinkedin }), h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok.faTiktok })), h("a", { href: "https://www.uoguelph.ca/web/socialmedia/" }, "Social Media Directory"), h("a", { href: "//www.uoguelph.ca/web/" }, "\u00A9 ", new Date().getFullYear(), " University of Guelph")), h("div", { id: "uofg-footer-links-container" }, h("ul", { id: "uofg-footer-links", class: "uofg-footer-content-separator" }, h(FooterLink, { text: "Accessibility", url: "https://www.uoguelph.ca/diversity-human-rights/accessibility-u-g", icon: faUniversalAccess.faUniversalAccess }), h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey.faKey }), h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/sitemap", icon: faSitemap.faSitemap }), h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck.faCircleCheck }), 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." }), h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase.faBriefcase }), h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendar.faCalendar }), h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendar.faCalendar }), h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList.faList }), h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart.faHandHoldingHeart }))), h("address", { id: "uofg-footer-address", class: "uofg-footer-content-separator" }, h("strong", null, "University of Guelph"), h("span", null, "50 Stone Road East,"), h("span", null, "Guelph, Ontario, Canada"), h("span", null, "N1G 2W1"), h("a", { href: "tel:1-519-824-4120" }, h(FontAwesomeIcon, { icon: faPhoneFlip.faPhoneFlip }), h("span", null, "519-824-4120"))))));
   }
+  get el() { return getElement(this); }
 };
 UofgFooter.style = uofgFooterCss;
 
@@ -793,7 +795,7 @@ exports.svgPathData = svgPathData;
 exports.aliases = aliases;
 });
 
-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:1000;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 - 1320px) / 2)}#uofg-header-top-content-container{height:4rem;background-color:white;color:black;z-index:3;font-size:1.9rem}#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:10rem}#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%}#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}#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:2.2rem;border-bottom:7px solid transparent;padding-top:7px;transition-property:color, border-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-full-main-content>ul>li>a>svg,#uofg-header-full-main-content>a>svg,#uofg-header-full-main-content>uofg-menu>[slot=button]>svg{transition-property: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{color:#ffc72a;border-color:#ffc72a}#uofg-header-full-main-content>ul>li>a:hover>svg,#uofg-header-full-main-content>ul>li>a:focus-visible>svg,#uofg-header-full-main-content>a:hover>svg,#uofg-header-full-main-content>a:focus-visible>svg,#uofg-header-full-main-content>uofg-menu>[slot=button]:hover>svg,#uofg-header-full-main-content>uofg-menu>[slot=button]:focus-visible>svg{color:white}#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;font-size:2rem;white-space:nowrap;justify-content:flex-start}#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;white-space:normal}#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-sub-content{display:flex;margin-left:auto}#uofg-header-full-sub-content,#uofg-header-reduced-sub-content{height:100%}#uofg-header-full-sub-content a,#uofg-header-full-sub-content uofg-menu>[slot=button],#uofg-header-reduced-sub-content a,#uofg-header-reduced-sub-content uofg-menu>[slot=button]{padding:0 1.25rem}#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;margin-left:auto}#uofg-header-reduced-sub-content>uofg-menu{position:static;margin-left:auto}#uofg-header-reduced-sub-content>uofg-menu.overflowed{position:relative}#uofg-header-reduced-sub-content>uofg-menu.overflowed>[slot=content]{width:40rem}#uofg-header-reduced-sub-content>uofg-menu>[slot=button]{font-size:2rem;padding:0 1.5rem;text-align:left}#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%;white-space:normal}#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);text-align:left}#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}@media screen and (max-width: 1320px){#uofg-header-decorative-img{position:static}}@media screen and (min-width: 1320px) and (max-width: calc(1320px + 8.5rem)){#uofg-header-logo{position:absolute;left:0;margin-left:8.5rem}}";
+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:1000;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 - 1320px) / 2)}#uofg-header-top-content-container{height:4rem;background-color:white;color:black;z-index:3;font-size:1.9rem}#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:10rem}#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%}#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}#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%;font-size:2.2rem;border-bottom:7px solid transparent;padding:7px 1.5rem 0;transition-property:color, border-color;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-header-full-main-content>ul>li>a>svg,#uofg-header-full-main-content>a>svg,#uofg-header-full-main-content>uofg-menu>[slot=button]>svg{transition-property: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{color:#ffc72a;border-color:#ffc72a}#uofg-header-full-main-content>ul>li>a:hover>svg,#uofg-header-full-main-content>ul>li>a:focus-visible>svg,#uofg-header-full-main-content>a:hover>svg,#uofg-header-full-main-content>a:focus-visible>svg,#uofg-header-full-main-content>uofg-menu>[slot=button]:hover>svg,#uofg-header-full-main-content>uofg-menu>[slot=button]:focus-visible>svg{color:white}#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{font-size:2rem}#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] a{padding:1rem}#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:1rem;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:1rem;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:1rem;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;font-size:2rem;white-space:nowrap;justify-content:flex-start}#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;white-space:normal}#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-sub-content{display:flex;margin-left:auto}#uofg-header-full-sub-content,#uofg-header-reduced-sub-content{height:100%}#uofg-header-full-sub-content a,#uofg-header-full-sub-content uofg-menu>[slot=button],#uofg-header-reduced-sub-content a,#uofg-header-reduced-sub-content uofg-menu>[slot=button]{padding:0 1.25rem}#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;margin-left:auto}#uofg-header-reduced-sub-content>uofg-menu{position:static;margin-left:auto}#uofg-header-reduced-sub-content>uofg-menu.overflowed{position:relative}#uofg-header-reduced-sub-content>uofg-menu.overflowed>[slot=content]{width:40rem}#uofg-header-reduced-sub-content>uofg-menu>[slot=button]{font-size:2rem;padding:0 1.5rem;text-align:left}#uofg-header-reduced-sub-content>uofg-menu>[slot=content]{background-color:white;color:black;padding:2rem;overflow-y:auto;max-height:calc(\n        100vh - 1rem\n      );width:100%;white-space:normal}#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);text-align:left}#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}@media screen and (max-width: 1320px){#uofg-header-decorative-img{position:static}}@media screen and (min-width: 1320px) and (max-width: calc(1320px + $decorative-img-width)){#uofg-header-logo{position:absolute;left:0;margin-left:8.5rem}}";
 
 const TopLinks = () => (h("ul", null, h("li", null, h("a", { href: "https://uoguelph.ca/apply/" }, "APPLY")), h("li", null, h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))));
 const HelloMenu = props => (h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, h("button", { slot: "button" }, h("span", null, "HELLO!"), h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), h("ul", { slot: "content" }, h("li", null, h("a", { href: "https://uoguelph.ca/future-students" }, "Future Students")), h("li", null, h("a", { href: "https://www.uoguelph.ca/students" }, "Current Students")), h("li", null, h("a", { href: "https://alumni.uoguelph.ca/" }, "Alumni & Donors")), h("li", null, h("a", { href: "https://www.uoguelph.ca/faculty" }, "Faculty & Staff")), h("li", null, h("a", { href: "https://cecs.uoguelph.ca/employers-institutions" }, "Employers & Partners")))));
@@ -1127,4 +1129,4 @@ const UofgMenu = class {
   }; }
 };
 
-export { UofgBackToTop as uofg_back_to_top, UofgCard as uofg_card, UofgFooter as uofg_footer, UofgHeader as uofg_header, UofgMenu as uofg_menu };
+export { UofgBackToTop as uofg_back_to_top, UofgFooter as uofg_footer, UofgHeader as uofg_header, UofgMenu as uofg_menu };

package/dist/esm/uofg-card.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, F as Fragment } from './index-284464b7.js';
+
+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) {
+    registerInstance(this, hostRef);
+    this.href = undefined;
+  }
+  render() {
+    const Body = () => (h(Fragment, null, h("div", { id: "uofg-card-img" }, h("slot", { name: "img" })), h("div", { id: "uofg-card-content" }, h("slot", { name: "title" }), h("slot", { name: "subtitle" }), h("slot", { name: "body" })), h("div", { id: "uofg-card-footer" }, h("slot", { name: "footer" }))));
+    return this.href ? (h("a", { href: this.href, id: "uofg-card" }, h(Body, null))) : (h("div", { id: "uofg-card" }, h(Body, null)));
+  }
+};
+UofgCard.style = uofgCardCss;
+
+export { UofgCard as uofg_card };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a1f4c438.js';
-import { F as FontAwesomeIcon, b as faTimes } from './index-1fc4b1ff.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-284464b7.js';
+import { F as FontAwesomeIcon, b as faTimes } from './index-a0a2924b.js';
 import { g as getAllFocusableElements } from './utils-cfa32fa2.js';
 
 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, white);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}#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%)}@media (prefers-reduced-motion: reduce){#uofg-modal-content{transition:none}}";