@uoguelph/web-components 0.0.7

package/dist/components/uofg-footer.js

@@ -0,0 +1,100 @@
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { F as FontAwesomeIcon, f as faUniversalAccess, a as faKey, b as faSitemap, c as faCircleCheck, d as faTrees, e as faBriefcase, g as faCalendarRange, h as faList, i as faHandHoldingHeart, j as faPhoneFlip } from './index2.js';
+
+var faSquareTwitter = {
+  prefix: 'fab',
+  iconName: 'square-twitter',
+  icon: [448, 512, ["twitter-square"], "f081", "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"]
+};
+var faTwitterSquare = faSquareTwitter;
+var faTiktok = {
+  prefix: 'fab',
+  iconName: 'tiktok',
+  icon: [448, 512, [], "e07b", "M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"]
+};
+var faSquareFacebook = {
+  prefix: 'fab',
+  iconName: 'square-facebook',
+  icon: [448, 512, ["facebook-square"], "f082", "M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"]
+};
+var faFacebookSquare = faSquareFacebook;
+var faLinkedin = {
+  prefix: 'fab',
+  iconName: 'linkedin',
+  icon: [448, 512, [], "f08c", "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"]
+};
+var faInstagram = {
+  prefix: 'fab',
+  iconName: 'instagram',
+  icon: [448, 512, [], "f16d", "M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"]
+};
+var faYoutube = {
+  prefix: 'fab',
+  iconName: 'youtube',
+  icon: [576, 512, [61802], "f167", "M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"]
+};
+
+const SocialLink = (props) => (h("li", null,
+  h("a", { href: props.url, "aria-label": props.name },
+    h(FontAwesomeIcon, { icon: props.icon }))));
+const SocialLinks = () => (h("ul", { id: "uofg-footer-social-links" },
+  h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare }),
+  h(SocialLink, { name: "Facebook", url: "https://www.facebook.com/uofguelph", icon: faFacebookSquare }),
+  h(SocialLink, { name: "Instagram", url: "https://www.instagram.com/uofguelph/", icon: faInstagram }),
+  h(SocialLink, { name: "Youtube", url: "https://www.youtube.com/user/uofguelph", icon: faYoutube }),
+  h(SocialLink, { name: "LinkedIn", url: "https://www.linkedin.com/school/university-of-guelph/", icon: faLinkedin }),
+  h(SocialLink, { name: "TikTok", url: "https://www.tiktok.com/@uofguelph", icon: faTiktok })));
+
+const FooterLink = (props) => (h("li", null,
+  h("a", { href: props.url, title: props.title },
+    h(FontAwesomeIcon, { icon: props.icon }),
+    h("span", null, props.text))));
+const FooterLinks = () => (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 }),
+  h(FooterLink, { text: "Privacy", url: "https://www.uoguelph.ca/web/privacy/", icon: faKey }),
+  h(FooterLink, { text: "Site Map", url: "https://www.uoguelph.ca/site-map/", icon: faSitemap }),
+  h(FooterLink, { text: "Status Page", url: "https://uoguelph.statuspage.io/", icon: faCircleCheck }),
+  h(FooterLink, { text: "Land Acknowledgement", url: "https://www.uoguelph.ca/land-acknowledgement/", icon: faTrees, 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 }),
+  h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendarRange }),
+  h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendarRange }),
+  h(FooterLink, { text: "Program Plans", url: "https://admission.uoguelph.ca/programs", icon: faList }),
+  h(FooterLink, { text: "Give to U of G", url: "https://www.alumni.uoguelph.ca/give-to-guelph/how-to-give", icon: faHandHoldingHeart })));
+
+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"/>
+</svg>
+`;
+
+const uofgFooterCss = ":host{display:block;width:100%;font-size:1.6rem;font-family:sans-serif}*{box-sizing:border-box}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}a{display:flex;align-items:center;gap:0.5rem;border-bottom:2px dotted transparent;transition-property:border-color;width:fit-content;color:inherit;transition-duration:200ms;transition-timing-function:ease-in-out;text-decoration:none;white-space:nowrap;padding-bottom:0.2rem}a:hover,a:focus{border-color:currentColor}svg{fill:currentColor;height:1.6rem}ul{list-style:none;padding:0;margin:unset}ul 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:1370px}@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;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;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 UofgFooter$1 = /*@__PURE__*/ proxyCustomElement(class UofgFooter extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  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(SocialLinks, null), 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(FooterLinks, null), 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 }), h("span", null, "519-824-4120"))))));
+  }
+  static get style() { return uofgFooterCss; }
+}, [1, "uofg-footer"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["uofg-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "uofg-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, UofgFooter$1);
+      }
+      break;
+  } });
+}
+
+const UofgFooter = UofgFooter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UofgFooter, defineCustomElement };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UofgHeader extends Components.UofgHeader, HTMLElement {}
+export const UofgHeader: {
+  prototype: UofgHeader;
+  new (): UofgHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/uofg-header.js

@@ -0,0 +1,156 @@
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { F as FontAwesomeIcon, k as faCaretDown, l as faSearch, m as faRightToBracket, n as faBars } from './index2.js';
+import { d as defineCustomElement$2 } from './uofg-menu2.js';
+
+const PageSpecific = (props) => {
+  var _a;
+  return (h("ul", { class: "uofg-header-page-specific" }, (_a = props.content) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    if (!item) {
+      return null;
+    }
+    if ('text' in item) {
+      return (h("li", null,
+        h("a", Object.assign({ href: item.href }, item.attributes), item.text)));
+    }
+    return (h("li", null,
+      h("uofg-menu", { autoCollapse: props.autoCollapseMenus },
+        h("button", { slot: "button" },
+          h("span", null, item.title),
+          h(FontAwesomeIcon, { icon: faCaretDown })),
+        h("ul", { slot: "content", role: "menu" }, item.links.map((link) => (h("li", null,
+          h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
+  }).filter(Boolean)));
+};
+
+const Decoration = `<svg viewBox="0 0 68 90" xmlns="http://www.w3.org/2000/svg"><path d="M23.131 0l44.847 90H0V0" fill="#d41728"/><path d="M23.131 0l16.03 32.044L55.1 0" fill="#ffc500"/></svg>`;
+
+const FullSizeLogo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 90"><path d="M0 0h150v90H0V0z"/><path fill="#fff" d="M116 25.5s-1.3-.4-1.3 2.6V39c0 1.7.4 2.6 1.7 2.6v.9h-5.6v-.9c0-.4 1.8 0 1.8-1.7V28.6c0-3-2.6-3-2.6-3s-.5-1 .8-1h5.2l.4.5-.4.4m-57.8 19l-6-15.5c-1.4-3.5-2.7-3.5-2.7-3.5s0-.8 1.3-.8h5.6l-.4.8c-.9 0-1.7.9-.9 3L58.6 39l3.5-8.6c.8-3 .4-3.9-1-4.3-1.2-.9-.3-1.3-.3-1.3h5.1v.8c-1.3 0-2.1 3.5-2.6 4.8L58.6 44l-.4.4m19 7c-.5.8-1 .8-2.2.8l-3 .4v-5.2h4.7s1.8 0 2.2 1.8c.4 1.7 1.7.4 1.3-.5l-.5-3H68.1c-1.7 0-.9.9-.9.9s2.2 0 2.2 3v10.8c0 1.7-1.3 1.7-1.7 2.2-.5.4 0 .4.4.4h12l.5-3.9s0-1.3-.9 0c-.8 1.3-.8 2.6-3.8 2.6s-4-.4-4-1.3v-6s.5-1 1.4-1H75s1.7.5 2.2 2.3l.4-.5V52l-.4-.5M91 24.7c1.7 0 3.4 1.7 3.4 3.9 0 2.5-3 4.3-4.7 4.3 0 0 2.1 1.3 4.7 5.6 2.6 3.9 5.2 4.7 7.8 5.2 1.3 0 3.4-.5 5.6-1.8 1.7-.8.4.5.4.5 0 .4-3 2.6-6.9 2.6-5.2 0-8.2-4-9.9-6.5l-3.5-4.8c-.8-.8-2.1-.4-2.1-.4v6.5s0 1.3 1.3 1.3c1.3.4.4.8.4.8H82v-.4c0-.4 1.7 0 1.7-1.7V28.6c.5-3-2.1-3.5-2.1-3.5l1.3-.4H91M89.2 26l-3.4.4v5.2l3 .4 2.2-.9.8-2.1c0-1.3-.8-2.6-2.6-3z"/><path fill="#fff" d="M109.1 24.7h-1.3l-3.9-.5c-3 0-5.6 2.6-5.6 4.8 0 2.6 1.7 4.3 4.8 4.7 2.5.9 4.3 1.3 4.3 4 0 2-2.2 3-4 3a5.9 5.9 0 01-4.7-3c-.8-1-.4-1.8-.4-1.8l-.9.4v3c-.4 1 2.2 3 5.7 3 4.3 0 6.9-2 6.9-6.4 0-3.5-4.4-4.3-5.7-4.3-1.2 0-3.4-1.3-3.4-3 0-1.8 2.2-2.6 3.4-2.6 1.8 0 2.6.4 3.5 1.3l.4 1.7h.9l-.4-2.6.4-1.7m9.5.4h10l1.6-.4.5.8V29c0 .4-.9.9-.9 0-.4-2.2-.8-2.6-2.6-2.6-.8 0-2.1 0-2.1.9v13c0 .8 1.7 1.2 2.1 1.2l-.4.9h-6s-.5-.9.4-.9c.8 0 1.3-1.3 1.3-1.7V27.3s.4-.9-.9-.9c-1.7 0-3-.4-3.4 2.6-.5.4-.9.9-.9 0v-3.5c-.4-.8 0-.8 1.3-.4M31 45.8h.8v3c-1.3 0-1.3-.8-1.3-1.3 0-.4-2.1.5-3.8 2.2-1.8 1.3-2.2 3-2.2 3s2.2 0 2.6-.8l.4.4v3l-.8.5s.8-2.2-1.3-2.2H24s-.9 4.3-3.5 6.9c-2.6 2.6-6 3.5-8.2 1.7v-.8l2.6.8c1.7 0 3.9-.8 5.2-3.4l2.1-5.2h-.8v-.9h1.3s.4-2.1 2.6-3.9c1.7-1.3 3.4-2.5 5.6-3m16.8 0v6l-.9.5s-.8-3.9-3.4-4.3c-2.2-.5-5.6-.5-7 1.3a12.4 12.4 0 00-2.5 8.2c0 4.7.9 9.5 7.3 9.5 3.5 0 3.5-3 3.5-2.6v-4.8c0-.4-1.3-1.3-2.6-1.3l.4-.8h7.8v.8s-2.2.5-2.2 1.8v6l-4.7 2.2c-2.2 1.3-1.7 1.3-3.9 1.3S32.3 68.3 31 64c-1.3-4.4-1.3-10 2.1-14.7 2.2-3 5.2-4 8.7-4l3.9.5 1.7-.4.4.4m2.6 0H56v.9s-1.7.4-1.7 1.3v10.3c0 2.2 2.1 3.5 3.9 3.5 1.3 0 4.7-1.3 4.7-4.3V48c0-.5-.4-1.3-2.1-1.3l.4-.9h4.7v.9s-1.3.4-1.3 1.3v8.6c0 3.9-3 7-6.4 7-4.3 0-6.5-1.8-6.5-5.3V47.5l-1.7-.8c-.9 0 .4-.9.4-.9m31 0H88l-.4.9s-1.7-.4-1.7 2.1v11.7c0 .4-.4.9.9 1.3l4.7-.4c1.7-.9 2.2-2.6 2.2-2.6h.4l-.4 3.9c0 .8-.5.4-1.8.4H81.5v-.4s1.7 0 1.7-3.5V48c0-1.7-1.3-.9-2.2-1.3l.5-.9m13.4.5l5.1-.5c2.6 0 4.3 0 6 .9a4 4 0 011.8 3.4c0 1.8-1.3 3-2.2 4-1.7 1.2-3 1.2-6.4.8v6c0 .5.8 1.3 2.1 1.3l-.4.9h-6l.4-.4 1.3-1.8V48.4c0-.4-.5-1.3-1.7-1.3v-.8m4.3 6.9s0 .8 3 .8c1.7 0 3-2.1 3-3.4 0-1.3-1.3-2.6-2.6-3h-3.4v5.6zm24.6 9.9v-.4s-1.3 0-1.3-2.2v-13c0-.8 1.7-1.2 1.7-1.2v-.5h-5.6l-.4.9s1.7 0 1.7 1.3v4.7h-7.4l-.4-.4V48c0-1.3 1.3-1.3 1.3-1.3v-.9h-5.2l-.4.9s1.7-.4 1.7.8v13c0 .9-.4 2.2-1.3 2.2v.4h5.2s.9-.4 0-.9c-.9 0-1.3-.4-1.3-1.7v-6l.5-.5h7.3v6.5c0 1.7-.9 1.7-1.3 2.2v.4h5.2M20.2 29c0-2.6-.9-3.5-3.5-3.5-.4-.4.5-.8.5-.8h7.3v.4c0 .4-2.2-.4-2.2 3.5v12c0 2.6-1.7 4.4-1.7 4.4-1.3 1.7-3.4 3-6.9 3-8.6 0-8.6-6.5-8.6-6.5V29c0-2.2 0-3.5-2.6-3.5l.4-.8h7.8v.8c-.4 0-2.2-.4-2.2 3.5v10.8c0 3.9 2.6 6 6 6 3.5 0 5.7-2.1 5.7-5.2V29M40 29c0-3.9 1.8-3 1.8-3.5v-.8l-5.2.4s-.9.4 0 .4c2.1.5 2.1 1.3 2.1 3.5v8.6c-.4.5-8.6-11.6-8.6-11.6l-.4-1.3h-3.9l-.4.8c2.6 0 2.6.9 2.6 3.5v9c0 4-2.2 3-2.2 3.5v.9H31s1.3-.9.4-.9c-2.6 0-2.2-.9-2.2-3.4v-8.7s8.2 10.4 9.1 13.4c0 0 .4.9.9.4l.4-.4.4-.9V29m32.4 4l3-.5c.9 0 1.8 1.3 1.8 2.2 0 .9.8 0 .8-.4v-3.5c0-.8-.4-.4-.8-.4l-1.8 1.3h-3v-5.2h4.8s1.7 0 2.5 1.7c.5 1.3 1 .5.5-.4l-.5-3H68.1l-.9.8s2.6 0 2.6 2.6v11.2c0 1.8-2.1 1.8-2.1 1.8l.8.8H79s1.3.5 1.7 0l.4-3.8s0-1-.8 0c-.5.4-.5 2.5-4 2.5-3 0-3.8-.4-3.8-1.3V33m69.5 9.5l.9-.5c.4-.4 0-.4-.5-.4-.4 0-1.3-.4-1.3-1.7V35l3.5-6.4.4-.9c.5-.9.9-1.7 1.7-1.7l1-.5v-.4h-5.3c-.4 0-.8 0-.4.4l1.3.5c.4 0 .9.8.4 1.7l-3.4 5.6-3.5-5.6c-.4-.9-.4-1.7.5-1.7l.8-.5v-.4h-6s-.9 0 0 .4l1.3.9 5.1 9v4.4c0 1.3-.4 1.7-.8 1.7l-.9.4 1.3.5h3.9m5.2-19.5H2l.8-.8h145l-.8.8m-99.7 5.2c0-2.6 1.3-2.6 1.3-2.6l.4-.4h-5.2l-.4-.4c-1.3 0-.9.8-.9.8s2.2 0 2.2 3v11.3c0 1.7-1.3 1.7-1.3 1.7v.9h5.2l.4-.9c-1.3 0-1.7-.4-1.7-2.6V28.1m76.4 37.6H50.4l.4-.5h73.4l-.4.5M14.6 54c-.5.9-1.3 1.8-1.3 3-.9 3.5 1.7 3.5 3 3.5 1.7-.4 3.9-2.6 4.3-5.6.4-3.9-3.4-3.9-6-.9m3.4 3c-.8 1.3-1.3 2.2-2.6 1.8-1.3 0-.8-2.2.5-4 .8-1.2 2.6-1.6 3-.8.4.9 0 2.2-.9 3z"/></svg>`;
+
+const ReducedSizeLogo = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0 0h100v100H0V0z"/><path fill="#fff" d="M74.6 54.9l-.7 2c2.4 0 5.6 1.4 5.6 2.9v9.5c0-.2-.2 5.4-7.8 5.4-13.7 0-15.6-10-15.6-20 0-6.7 2.4-13 5.8-17 3.4-3.8 9.8-3.6 15-3 5 .4 6.8 8.7 6.8 8.7l1.7-.5.2-13.2s-.7-.7-1.2-.5c-.5.3-2.4 1-3.7 1-1 0-4.6-.7-8.3-.7-6.6 0-13 1.4-17.8 8a32 32 0 00-3.4 6.1V28c0-8 4.1-6.3 4.6-7 .5-1.3.5-1.3-.2-1.5H39.9s-2 1.4-.7 1.4c5.4.5 7.6 2.5 7.6 7.4v25.4c0 6.6-5.1 10.5-12.5 10.5C27 64.2 22 59.5 22 51.5v-23c0-8 4.1-6.6 4.4-7.6.7-1 .7-1.2 0-1.2 0 0-9.3.5-16.2 0 0 0-2 1.5-.7 1.5 5.4.5 5.4 2.9 5.4 8v26.2s-.5 13.9 17.8 13.9c7.8 0 12.5-3.2 15-6.4l1.1-1.7c.3 2.5.8 5 1.5 7.1 3 9.6 14 12.2 17.6 12.2 4.6 0 4.6 0 8.8-2.9 2.2-1.2 10.2-4.4 10.2-4.4V59.8c0-2.2 4-3.2 4-3.2l.2-1.7H74.6z"/></svg>`;
+
+const GlobalLinks = () => (h("ul", { class: "uofg-header-global-links" },
+  h("li", null,
+    h("a", { href: "/new-header/about" }, "About")),
+  h("li", null,
+    h("a", { href: "/new-header/academics" }, "Academics")),
+  h("li", null,
+    h("a", { href: "/new-header/admissions" }, "Admissions")),
+  h("li", null,
+    h("a", { href: "/new-header/research" }, "Research")),
+  h("li", null,
+    h("a", { href: "/new-header/student-life" }, "Student Life"))));
+
+const HelloYou = (props) => (h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse },
+  h("button", { slot: "button" },
+    h("span", null, "Hello, YOU!"),
+    h(FontAwesomeIcon, { icon: faCaretDown })),
+  h("ul", { slot: "content" },
+    h("li", null,
+      h("a", { href: "/new-header/future-students" }, "Future Students")),
+    h("li", null,
+      h("a", { href: "/new-header/current-students" }, "Current Students")),
+    h("li", null,
+      h("a", { href: "/new-header/alumni-and-donors" }, "Alumni & Donors")),
+    h("li", null,
+      h("a", { href: "/new-header/staff-and-faculty" }, "Staff & Faculty")),
+    h("li", null,
+      h("a", { href: "/new-header/parents-and-visitors" }, "Parents & Visitors")),
+    h("li", null,
+      h("a", { href: "/new-header/employers-and-partners" }, "Employers & Partners")))));
+
+const SearchBar = () => (h("form", { class: "uofg-header-search-bar", method: "get", role: "search", action: "https://uoguelph.ca/search/" },
+  h("input", { type: "text", name: "q" }),
+  h("input", { type: "hidden", name: "cx", value: "002616817380988741256:tp3ks5ha2dw" }),
+  h("input", { type: "hidden", name: "cof", value: "FORID:11" }),
+  h("input", { type: "hidden", name: "ie", value: "UTF-8" }),
+  h("button", { class: "uofg-search-bar-button", "aria-label": "Search", type: "submit" },
+    h(FontAwesomeIcon, { icon: faSearch }))));
+
+const uofgHeaderCss = "*{box-sizing:border-box}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}a{display:flex;align-items:center;text-decoration:none;color:inherit;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}ul{list-style:none;margin:0;padding:0}ul>li{display:contents}button{border:none;background:none;cursor:pointer;font-size:inherit;font-family:inherit;color:inherit;transition-property:color, background-color;transition-duration:0.2s;transition-timing-function:ease-in-out}button[type=submit]{display:flex;align-items:center;justify-content:center;background-color:#d50029;color:#fff;padding:0.5rem;font-size:inherit;font-family:inherit}input[type=text],input[type=password]{background-color:#eff6f7;border:1px solid #69a3b9;padding:1rem;color:#555555;font-size:inherit;font-family:inherit}input[type=text]:focus-visible,input[type=text]:focus,input[type=password]:focus-visible,input[type=password]:focus{outline:none;background-color:#fffdf7}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-search-menu .uofg-header-search-bar{display:flex;align-items:center;justify-content:center}.uofg-header-search-menu .uofg-header-search-bar>input{flex:1}.uofg-header-search-menu .uofg-header-search-bar>button[type=submit]{width:4rem;height:4rem}#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 UofgHeader$1 = /*@__PURE__*/ proxyCustomElement(class UofgHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.pageTitle = '';
+    this.pageUrl = '';
+    this.isFullSize = false;
+    this.pageSpecificContent = undefined;
+  }
+  connectedCallback() {
+    var _a;
+    this.updateFullSize();
+    this.updatePageSpecificContent();
+    (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
+      this.updatePageSpecificContent();
+    }));
+    this.observer.observe(this.el, { childList: true });
+  }
+  updateFullSize() {
+    this.isFullSize = window.innerWidth >= 1024;
+  }
+  updatePageSpecificContent() {
+    var _a;
+    const aToPageSpecificLink = (a) => {
+      const attributes = {};
+      a.getAttributeNames()
+        .filter((name) => name !== 'href')
+        .forEach((name) => (attributes[name] = a.getAttribute(name)));
+      return {
+        href: a.getAttribute('href'),
+        text: a.textContent,
+        attributes
+      };
+    };
+    const firstChild = (_a = this.el) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    const root = (firstChild === null || firstChild === void 0 ? void 0 : firstChild.tagName) == 'TEMPLATE' ? firstChild === null || firstChild === void 0 ? void 0 : firstChild.content : this.el;
+    this.pageSpecificContent = Array.from(root.children)
+      .filter((child) => child.tagName === 'A' || child.tagName === 'UL')
+      .map((child) => {
+      switch (child.tagName) {
+        case 'A':
+          return aToPageSpecificLink(child);
+        case 'UL':
+          return {
+            title: child.getAttribute('data-title'),
+            links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink)
+          };
+      }
+    });
+  }
+  render() {
+    return (h("header", { id: "uofg-header" }, this.isFullSize && (h("div", { id: "uofg-header-top-content-container" }, h("ul", null, h("li", null, h("a", { href: "https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg" }, "GIVE")), h("li", null, h("a", { href: "/new-header/apply" }, "APPLY")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))), h(HelloYou, { autoCollapse: true }))), h("div", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize } }, h("div", { id: "uofg-header-logo-container" }, this.isFullSize && h("div", { id: "uofg-header-decorative-img", innerHTML: Decoration }), 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 ? (h("div", { id: "uofg-header-full-main-content", class: "uofg-header-main-content" }, h(GlobalLinks, null), h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })), h("uofg-menu", { class: "uofg-header-search-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Search Menu" }, h(FontAwesomeIcon, { icon: faSearch })), h("div", { slot: "content" }, h("span", null, "Search the University of Guelph"), h(SearchBar, null))))) : (h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })), h("uofg-menu", { class: "uofg-header-search-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Search Menu" }, h(FontAwesomeIcon, { icon: faSearch })), h("div", { slot: "content" }, h("span", null, "Search the University of Guelph"), h(SearchBar, null))), h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu" }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h("span", null, "University of Guelph"), h(GlobalLinks, null), h(HelloYou, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (h("div", { id: "uofg-header-sub-content-container" }, this.pageTitle &&
+      (this.pageUrl ? (h("a", { id: "uofg-header-page-title", href: this.pageUrl }, this.pageTitle)) : (h("span", { id: "uofg-header-page-title" }, this.pageTitle))), this.isFullSize ? (h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, h(PageSpecific, { content: this.pageSpecificContent, autoCollapseMenus: true }))) : (h("div", { id: "uofg-header-reduced-sub-content", class: "uofg-header-sub-content" }, h("uofg-menu", { id: "uofg-header-sub-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h(PageSpecific, { content: this.pageSpecificContent })))))))));
+  }
+  get el() { return this; }
+  static get style() { return uofgHeaderCss; }
+}, [1, "uofg-header", {
+    "pageTitle": [1, "page-title"],
+    "pageUrl": [1, "page-url"],
+    "isFullSize": [32],
+    "pageSpecificContent": [32]
+  }, [[9, "resize", "updateFullSize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["uofg-header", "uofg-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "uofg-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, UofgHeader$1);
+      }
+      break;
+    case "uofg-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const UofgHeader = UofgHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UofgHeader, defineCustomElement };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface UofgMenu extends Components.UofgMenu, HTMLElement {}
+export const UofgMenu: {
+  prototype: UofgMenu;
+  new (): UofgMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/uofg-menu.js

@@ -0,0 +1,6 @@
+import { U as UofgMenu$1, d as defineCustomElement$1 } from './uofg-menu2.js';
+
+const UofgMenu = UofgMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UofgMenu, defineCustomElement };

package/dist/components/uofg-menu2.js

@@ -0,0 +1,264 @@
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
+const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
+const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
+const observer = new MutationObserver((mutations) => {
+  for (const mutation of mutations) {
+    mutation.target.dispatchEvent(new CustomEvent('childListChange', { bubbles: false }));
+  }
+});
+const observerConfig = {
+  childList: true
+};
+const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.expanded = createEvent(this, "expanded", 2);
+    this.collapsed = createEvent(this, "collapsed", 2);
+    this.animationStarted = createEvent(this, "animationStarted", 2);
+    this.animationEnded = createEvent(this, "animationEnded", 2);
+    this.computedStyle = null;
+    this.button = null;
+    this.content = null;
+    this.contentComputedStyle = null;
+    this.isExpanded = false;
+    this.autoCollapse = false;
+  }
+  connectedCallback() {
+    // Bind functions so that "this" correctly refers to the component's instance.
+    this.handleChildListChange = this.handleChildListChange.bind(this);
+    this.updateButton = this.updateButton.bind(this);
+    this.updateContent = this.updateContent.bind(this);
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.handleFocusout = this.handleFocusout.bind(this);
+    this.computedStyle = window.getComputedStyle(this.el);
+    this.isExpanded = false;
+    this.handleChildListChange();
+    observer.observe(this.el, observerConfig);
+  }
+  handleChildListChange() {
+    this.updateButton();
+    this.updateContent();
+  }
+  updateButton() {
+    var _a, _b, _c;
+    const button = this.el.querySelector('[slot="button"]');
+    // Clean up the old button before setting the new one
+    (_a = this.button) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
+    (_b = this.button) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-expanded');
+    (_c = this.button) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
+    // Set up the new button
+    button === null || button === void 0 ? void 0 : button.setAttribute('aria-expanded', this.isExpanded ? 'true' : 'false');
+    button === null || button === void 0 ? void 0 : button.setAttribute('aria-haspopup', 'true');
+    button === null || button === void 0 ? void 0 : button.addEventListener('click', this.handleButtonClick);
+    this.button = button;
+  }
+  updateContent() {
+    const content = this.el.querySelector('[slot="content"]');
+    if (content == null) {
+      this.content = null;
+      this.contentComputedStyle = null;
+    }
+    else {
+      this.content = content;
+      this.content.style.display = this.isExpanded ? '' : 'none';
+      this.contentComputedStyle = window.getComputedStyle(this.content);
+    }
+  }
+  handleButtonClick() {
+    this.isExpanded = !this.isExpanded;
+  }
+  handleFocusout(e) {
+    if (this.autoCollapse && !this.el.contains(e.relatedTarget)) {
+      this.isExpanded = false;
+    }
+  }
+  handleIsExpandedChange(newValue) {
+    var _a, _b, _c;
+    (_a = this.button) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', newValue ? 'true' : 'false');
+    newValue ? this.expanded.emit() : this.collapsed.emit();
+    // No content is slotted, so we don't need to do anything else.
+    if (this.content == null) {
+      return;
+    }
+    // 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') {
+      this.content.style.display = newValue ? '' : 'none';
+      return;
+    }
+    // Check if we are in the middle of an animation.
+    const animations = (_b = this.content) === null || _b === void 0 ? void 0 : _b.getAnimations().filter((animation) => animation.id === 'uofg-menu-animation');
+    // If we are, then we want to reverse the existing one rather than starting a new animation.
+    if (animations.length > 0) {
+      animations === null || animations === void 0 ? void 0 : animations.forEach((animation) => animation.reverse());
+      return;
+    }
+    let animationDef;
+    const options = {
+      id: 'uofg-menu-animation',
+      duration: this.getAnimationDuration(),
+      fill: 'none',
+      easing: this.getAnimationEasing(),
+      direction: newValue ? 'normal' : 'reverse'
+    };
+    // Need to remove display none, otherwise keyframe values won't be calculated correctly.
+    this.content.style.display = '';
+    switch (type) {
+      case 'fade':
+        animationDef = this.fadeAnimation();
+        break;
+      case 'slide':
+        animationDef = this.slideAnimation();
+        break;
+      default:
+        animationDef = this.fadeAnimation();
+    }
+    // We can start the animation.
+    this.animationStarted.emit(newValue);
+    (_c = this.content) === null || _c === void 0 ? void 0 : _c.animate(animationDef.keyframes, options).finished.finally(() => {
+      var _a;
+      // Once the animation is done (or something went wrong during it), we update the content's display style.
+      if (this.content) {
+        this.content.style.display = this.isExpanded ? '' : 'none';
+        (_a = animationDef.callback) === null || _a === void 0 ? void 0 : _a.call(animationDef);
+        this.animationEnded.emit(this.isExpanded);
+      }
+    });
+  }
+  getAnimationType() {
+    var _a;
+    const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-type')) || '';
+    switch (str) {
+      case 'slide':
+      case 'fade':
+        return str;
+      default:
+        return 'none';
+    }
+  }
+  getAnimationDuration() {
+    var _a;
+    const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-duration')) || '';
+    const matches = DURATION_REGEX.exec(str);
+    if (matches == null) {
+      return 200;
+    }
+    return Number.parseFloat(matches[1]) * (matches[2] == 's' ? 1000 : 1);
+  }
+  getAnimationEasing() {
+    var _a;
+    const str = ((_a = this.computedStyle) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--uofg-menu-animation-easing')) || '';
+    switch (str) {
+      case 'linear':
+      case 'ease':
+      case 'ease-in':
+      case 'ease-out':
+      case 'ease-in-out':
+      case 'step-start':
+      case 'step-end':
+        return str;
+      default:
+        return EASING_FUNCTION_REGEX.test(str) ? str : 'ease-in-out';
+    }
+  }
+  fadeAnimation() {
+    return { keyframes: [{ opacity: 0 }, { opacity: 1 }] };
+  }
+  slideAnimation() {
+    var _a, _b, _c, _d, _e;
+    this.content && (this.content.style.overflowY = 'hidden');
+    return {
+      keyframes: [
+        {
+          height: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          marginTop: 0,
+          marginBottom: 0
+        },
+        {
+          height: ((_a = this.contentComputedStyle) === null || _a === void 0 ? void 0 : _a.height) || 0,
+          paddingTop: ((_b = this.contentComputedStyle) === null || _b === void 0 ? void 0 : _b.paddingTop) || 0,
+          paddingBottom: ((_c = this.contentComputedStyle) === null || _c === void 0 ? void 0 : _c.paddingBottom) || 0,
+          marginTop: ((_d = this.contentComputedStyle) === null || _d === void 0 ? void 0 : _d.marginTop) || 0,
+          marginBottom: ((_e = this.contentComputedStyle) === null || _e === void 0 ? void 0 : _e.marginBottom) || 0
+        }
+      ],
+      callback: () => {
+        this.content && (this.content.style.overflowY = '');
+      }
+    };
+  }
+  render() {
+    return h(Host, { tabindex: -1, "data-expanded": this.isExpanded, onFocusout: this.handleFocusout });
+  }
+  /**
+   * Get the current expanded state of the menu.
+   * @returns A promise which will resolve to the current expanded state.
+   */
+  async getExpanded() {
+    return this.isExpanded;
+  }
+  /**
+   * Set the expanded state of the menu.
+   * @param value The new expanded state.
+   */
+  async setExpanded(value) {
+    this.isExpanded = value;
+  }
+  /**
+   * Toggle the expanded state of the menu.
+   * @returns A promise which will resolve to the new expanded state.
+   */
+  async toggle() {
+    this.isExpanded = !this.isExpanded;
+    return this.isExpanded;
+  }
+  /**
+   * Collapse the menu. This is the same as setting the expanded state to false.
+   * @returns empty Promise.
+   */
+  async collapse() {
+    this.isExpanded = false;
+  }
+  /**
+   * Expand the menu. This is the same as setting the expanded state to true.
+   * @returns empty Promise.
+   */
+  async expand() {
+    this.isExpanded = true;
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "isExpanded": ["handleIsExpandedChange"]
+  }; }
+}, [0, "uofg-menu", {
+    "autoCollapse": [4, "auto-collapse"],
+    "isExpanded": [32],
+    "getExpanded": [64],
+    "setExpanded": [64],
+    "toggle": [64],
+    "collapse": [64],
+    "expand": [64]
+  }, [[0, "onChildListChange", "handleChildListChange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["uofg-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "uofg-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, UofgMenu);
+      }
+      break;
+  } });
+}
+
+export { UofgMenu as U, defineCustomElement as d };