@uoguelph/web-components 1.1.3 → 1.2.0-rc.1

package/dist/components/uofg-header.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { F as FontAwesomeIcon } from './font-awesome-icon.js';
-import { c as createCommonjsModule } from './_commonjsHelpers.js';
 import { d as defineCustomElement$2 } from './uofg-menu2.js';
 
 const Decoration = `<svg viewBox="0 0 68 90" xmlns="http://www.w3.org/2000/svg"><path d="M23.131 0l44.847 90H0V0" fill="#c20430"/><path d="M23.131 0l16.03 32.044L55.1 0" fill="#ffc500"/></svg>`;
@@ -9,7 +8,9 @@ const FullSizeLogo = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserv
 
 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>`;
 
-var faBars = createCommonjsModule(function (module, exports) {
+var faBars = {};
+
+(function (exports) {
 Object.defineProperty(exports, '__esModule', { value: true });
 var prefix = 'fas';
 var iconName = 'bars';
@@ -39,9 +40,11 @@ exports.ligatures = aliases;
 exports.unicode = unicode;
 exports.svgPathData = svgPathData;
 exports.aliases = aliases;
-});
+}(faBars));
+
+var faRightToBracket = {};
 
-var faRightToBracket = createCommonjsModule(function (module, exports) {
+(function (exports) {
 Object.defineProperty(exports, '__esModule', { value: true });
 var prefix = 'fas';
 var iconName = 'right-to-bracket';
@@ -71,9 +74,13 @@ exports.ligatures = aliases;
 exports.unicode = unicode;
 exports.svgPathData = svgPathData;
 exports.aliases = aliases;
-});
+}(faRightToBracket));
+
+var faSearch = {};
+
+var faMagnifyingGlass = {};
 
-var faMagnifyingGlass = createCommonjsModule(function (module, exports) {
+(function (exports) {
 Object.defineProperty(exports, '__esModule', { value: true });
 var prefix = 'fas';
 var iconName = 'magnifying-glass';
@@ -103,34 +110,36 @@ exports.ligatures = aliases;
 exports.unicode = unicode;
 exports.svgPathData = svgPathData;
 exports.aliases = aliases;
-});
+}(faMagnifyingGlass));
 
-var faSearch = createCommonjsModule(function (module, exports) {
+(function (exports) {
 Object.defineProperty(exports, '__esModule', { value: true });
-
+var source = faMagnifyingGlass;
 exports.definition = {
-  prefix: faMagnifyingGlass.prefix,
-  iconName: faMagnifyingGlass.iconName,
+  prefix: source.prefix,
+  iconName: source.iconName,
   icon: [
-    faMagnifyingGlass.width,
-    faMagnifyingGlass.height,
-    faMagnifyingGlass.aliases,
-    faMagnifyingGlass.unicode,
-    faMagnifyingGlass.svgPathData
+    source.width,
+    source.height,
+    source.aliases,
+    source.unicode,
+    source.svgPathData
   ]};
 
 exports.faSearch = exports.definition;
-exports.prefix = faMagnifyingGlass.prefix;
-exports.iconName = faMagnifyingGlass.iconName;
-exports.width = faMagnifyingGlass.width;
-exports.height = faMagnifyingGlass.height;
-exports.ligatures = faMagnifyingGlass.aliases;
-exports.unicode = faMagnifyingGlass.unicode;
-exports.svgPathData = faMagnifyingGlass.svgPathData;
-exports.aliases = faMagnifyingGlass.aliases;
-});
+exports.prefix = source.prefix;
+exports.iconName = source.iconName;
+exports.width = source.width;
+exports.height = source.height;
+exports.ligatures = source.aliases;
+exports.unicode = source.unicode;
+exports.svgPathData = source.svgPathData;
+exports.aliases = source.aliases;
+}(faSearch));
+
+var faCaretDown = {};
 
-var faCaretDown = createCommonjsModule(function (module, exports) {
+(function (exports) {
 Object.defineProperty(exports, '__esModule', { value: true });
 var prefix = 'fas';
 var iconName = 'caret-down';
@@ -160,132 +169,214 @@ exports.ligatures = aliases;
 exports.unicode = unicode;
 exports.svgPathData = svgPathData;
 exports.aliases = aliases;
-});
+}(faCaretDown));
 
-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: 1405px){#uofg-header-logo{position:absolute;left:0;margin-left:8.5rem}}";
+const uofgHeaderCss = "*{box-sizing:border-box}a{text-decoration:none;color:inherit}button{border:none;background:none;cursor:pointer;font-size:inherit;font-family:inherit;color:inherit;line-height:inherit;word-spacing:inherit;letter-spacing:inherit}ul{list-style:none;padding:0;margin:0}uofg-menu{--uofg-menu-animation-type:slide;--uofg-menu-animation-duration:0.2s;--uofg-menu-animation-easing:ease-in-out}@defaults border-spacing{--tw-border-spacing-x:0;--tw-border-spacing-y:0}@defaults transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}@defaults touch-action{}@defaults scroll-snap-type{--tw-scroll-snap-strictness:proximity}@defaults gradient-color-stops{}@defaults font-variant-numeric{}@defaults box-shadow{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}@defaults ring-width{--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}@defaults filter{}@defaults backdrop-filter{}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}.tw-absolute{position:absolute!important}.tw-relative{position:relative!important}.tw-left-0{left:0!important}.tw-left-\\[max\\(calc\\(\\(100\\%-1320px\\)\\/2\\)\\,7\\.5rem\\)\\]{left:max(calc(50% - 660px),7.5rem)!important}.tw-right-0{right:0!important}.tw-top-full{top:100%!important}.tw-z-50{z-index:50!important}.tw-z-\\[1000\\]{z-index:1000!important}.tw-my-4{margin-bottom:1rem!important;margin-top:1rem!important}.tw-mr-auto{margin-right:auto!important}.tw-block{display:block!important}.tw-flex{display:flex!important}.tw-contents{display:contents!important}.tw-aspect-square{aspect-ratio:1/1!important}.tw-h-16{height:4rem!important}.tw-h-\\[10rem\\]{height:10rem!important}.tw-h-\\[5rem\\]{height:5rem!important}.tw-h-auto{height:auto!important}.tw-h-full{height:100%!important}.tw-w-\\[7\\.5rem\\]{width:7.5rem!important}.tw-w-full{width:100%!important}.tw-min-w-\\[20rem\\]{min-width:20rem!important}.tw-flex-col{flex-direction:column!important}.tw-items-center{align-items:center!important}.tw-justify-end{justify-content:flex-end!important}.tw-justify-center{justify-content:center!important}.tw-justify-between{justify-content:space-between!important}.tw-gap-2{gap:.5rem!important}.tw-border-0{border-width:0!important}.tw-border-b{border-bottom-width:1px!important}.tw-border-b-8{border-bottom-width:8px!important}.tw-border-l{border-left-width:1px!important}.tw-border-solid{border-style:solid!important}.tw-border-transparent{border-color:transparent!important}.tw-border-uofg-grey-300{--tw-border-opacity:1!important;border-color:rgb(209 209 209/var(--tw-border-opacity))!important}.tw-border-uofg-grey-400{--tw-border-opacity:1!important;border-color:rgb(180 180 180/var(--tw-border-opacity))!important}.tw-border-uofg-grey-500{--tw-border-opacity:1!important;border-color:rgb(154 154 154/var(--tw-border-opacity))!important}.tw-border-uofg-grey-950{--tw-border-opacity:1!important;border-color:rgb(40 40 40/var(--tw-border-opacity))!important}.tw-bg-black{--tw-bg-opacity:1!important;background-color:rgb(0 0 0/var(--tw-bg-opacity))!important}.tw-bg-uofg-grey{--tw-bg-opacity:1!important;background-color:rgb(221 221 221/var(--tw-bg-opacity))!important}.tw-bg-uofg-yellow{--tw-bg-opacity:1!important;background-color:rgb(255 199 42/var(--tw-bg-opacity))!important}.tw-bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.tw-p-4{padding:1rem!important}.tw-p-5{padding:1.25rem!important}.tw-px-4{padding-left:1rem!important;padding-right:1rem!important}.tw-px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}.tw-px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.tw-px-\\[calc\\(\\(100\\%-1320px\\)\\/2\\)\\]{padding-left:calc(50% - 660px)!important;padding-right:calc(50% - 660px)!important}.tw-pb-6{padding-bottom:1.5rem!important}.tw-pt-8{padding-top:2rem!important}.tw-font-condensed{font-family:Roboto Condensed,Arial,sans-serif!important}.tw-text-2xl{font-size:1.5rem!important;line-height:2rem!important}.tw-text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.tw-text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.tw-font-bold{font-weight:700!important}.tw-text-black{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.tw-text-uofg-yellow{--tw-text-opacity:1!important;color:rgb(255 199 42/var(--tw-text-opacity))!important}.tw-text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}.tw-shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)!important;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.tw-transition-colors{transition-duration:.15s!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.tw-transition-opacity{transition-duration:.15s!important;transition-property:opacity!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.hover\\:tw-border-uofg-yellow:hover{--tw-border-opacity:1!important;border-color:rgb(255 199 42/var(--tw-border-opacity))!important}.hover\\:tw-bg-uofg-grey:hover{--tw-bg-opacity:1!important;background-color:rgb(221 221 221/var(--tw-bg-opacity))!important}.hover\\:tw-bg-uofg-yellow:hover{--tw-bg-opacity:1!important;background-color:rgb(255 199 42/var(--tw-bg-opacity))!important}.hover\\:tw-text-uofg-yellow:hover{--tw-text-opacity:1!important;color:rgb(255 199 42/var(--tw-text-opacity))!important}.hover\\:tw-text-white:hover{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity))!important}.aria-expanded\\:tw-bg-uofg-grey[aria-expanded=true]{--tw-bg-opacity:1!important;background-color:rgb(221 221 221/var(--tw-bg-opacity))!important}.aria-expanded\\:tw-bg-uofg-yellow[aria-expanded=true]{--tw-bg-opacity:1!important;background-color:rgb(255 199 42/var(--tw-bg-opacity))!important}.aria-expanded\\:tw-bg-white[aria-expanded=true]{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.aria-expanded\\:tw-text-black[aria-expanded=true]{--tw-text-opacity:1!important;color:rgb(0 0 0/var(--tw-text-opacity))!important}.hocus\\:tw-opacity-75:focus,.hocus\\:tw-opacity-75:hover{opacity:.75!important}@media (min-width:1024px){.lg\\:tw-relative{position:relative!important}.lg\\:tw-h-16{height:4rem!important}.lg\\:tw-w-\\[30rem\\]{width:30rem!important}.lg\\:tw-border-l-0{border-left-width:0!important}}@media (min-width:1320px){.min-\\[1320px\\]\\:tw-absolute{position:absolute!important}}.\\[\\&\\>a\\]\\:last\\:tw-pb-4:last-child>a{padding-bottom:1rem!important}.\\[\\&\\>li\\]\\:tw-contents>li{display:contents!important}.\\[\\&\\>svg\\]\\:tw-h-\\[1em\\]>svg{height:1em!important}.\\[\\&\\>svg\\]\\:tw-h-full>svg{height:100%!important}.\\[\\&\\>svg\\]\\:tw-fill-current>svg{fill:currentColor!important}.\\[\\&\\>svg\\]\\:tw-transition-transform>svg{transition-duration:.15s!important;transition-property:transform!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.\\[\\&\\>svg\\]\\:aria-expanded\\:tw-rotate-180[aria-expanded=true]>svg{--tw-rotate:180deg!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.\\[\\&\\>uofg-menu\\]\\:last\\:tw-pb-6:last-child>uofg-menu{padding-bottom:1.5rem!important}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}";
+const UofgHeaderStyle0 = uofgHeaderCss;
 
-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")))));
-const MainLinks = () => (h("ul", { class: "uofg-header-global-links" }, h("li", null, h("a", { href: "https://uoguelph.ca/about" }, "About")), h("li", null, h("a", { href: "https://www.uoguelph.ca/explore-all-programs/" }, "Academics")), h("li", null, h("a", { href: "https://uoguelph.ca/admissions" }, "Admission")), h("li", null, h("a", { href: "https://uoguelph.ca/research" }, "Research")), h("li", null, h("a", { href: "https://www.uoguelph.ca/studentexperience/" }, "Student Life"))));
-const AccountLink = () => (h("a", { href: "https://intranet.uoguelph.ca", "aria-label": "University of Guelph Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket.faRightToBracket })));
-const SearchLink = () => (h("a", { href: "https://uoguelph.ca/search", "aria-label": "Search University of Guelph" }, h(FontAwesomeIcon, { icon: faSearch.faSearch })));
-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.autoCollapse }, h("button", { slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), h("ul", { slot: "content" }, item.links.map(link => (h("li", null, h("a", Object.assign({ href: link.href }, link.attributes), link.text))))))));
-  }).filter(Boolean)));
-};
 const TRANSITION_BREAKPOINT = 1024;
 const MAX_CONTENT_WIDTH = 1320;
+const MENU_CHAR_LIMIT = 35;
+const topLinks = [
+    {
+        text: 'GIVE',
+        href: 'https://bbis.alumni.uoguelph.ca/BBIS_Cannon/give/uofg',
+    },
+    {
+        text: 'NEWS',
+        href: 'https://news.uoguelph.ca/',
+    },
+    {
+        text: 'APPLY',
+        href: 'https://uoguelph.ca/apply/',
+        highlight: true,
+    },
+];
+const mainLinks = [
+    {
+        text: 'About',
+        href: 'https://uoguelph.ca/about',
+    },
+    {
+        text: 'Academics',
+        href: 'https://www.uoguelph.ca/explore-all-programs/',
+    },
+    {
+        text: 'Admission',
+        href: 'https://uoguelph.ca/admissions',
+    },
+    {
+        text: 'Research',
+        href: 'https://uoguelph.ca/research',
+    },
+    {
+        text: 'Student Life',
+        href: 'https://www.uoguelph.ca/studentexperience/',
+    },
+];
+const iconButtons = [
+    {
+        text: 'University of Guelph Intranet',
+        href: 'https://intranet.uoguelph.ca/',
+        icon: faRightToBracket.faRightToBracket,
+    },
+    {
+        text: 'Search the University of Guelph',
+        href: 'https://uoguelph.ca/search',
+        icon: faSearch.faSearch,
+    },
+];
+const resources = [
+    {
+        text: 'Future Students',
+        href: 'https://uoguelph.ca/future-students',
+    },
+    {
+        text: 'Current Students',
+        href: 'https://www.uoguelph.ca/students',
+    },
+    {
+        text: 'Alumni & Donors',
+        href: 'https://alumni.uoguelph.ca/',
+    },
+    {
+        text: 'Faculty & Staff',
+        href: 'https://www.uoguelph.ca/faculty',
+    },
+    {
+        text: 'Employers & Partners',
+        href: 'https://cecs.uoguelph.ca/employers-institutions',
+    },
+];
 const UofgHeader$1 = /*@__PURE__*/ proxyCustomElement(class UofgHeader extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.subContainerOverflowWidth = NaN;
-    this.needsOverflowWidthUpdate = false;
-    this.pageTitle = '';
-    this.pageUrl = '';
-    this.isFullSize = false;
-    this.pageSpecificContent = undefined;
-    this.isSubContainerOverflowing = false;
-  }
-  connectedCallback() {
-    var _a;
-    this.updateFullSize();
-    this.updatePageSpecificContent();
-    (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
-      this.updatePageSpecificContent();
-      this.subContainerOverflowWidth = NaN; // Reset overflow width as it will have changed and needs to be recalculated
-      this.needsOverflowWidthUpdate = true;
-    }));
-    this.observer.observe(this.el, { childList: true, subtree: true });
-  }
-  componentDidLoad() {
-    this.updateSubContainerOverflow();
-  }
-  updateFullSize() {
-    this.isFullSize = window.innerWidth >= TRANSITION_BREAKPOINT;
-    this.updateSubContainerOverflow();
-  }
-  updateSubContainerOverflow() {
-    if (this.isFullSize && this.subContainer) {
-      const { clientWidth, scrollWidth } = this.subContainer;
-      if (scrollWidth > clientWidth) {
-        this.subContainerOverflowWidth = scrollWidth;
-      }
-      this.isSubContainerOverflowing = this.subContainerOverflowWidth > Math.min(clientWidth, MAX_CONTENT_WIDTH);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.subContainerOverflowWidth = NaN;
+        this.needsOverflowWidthUpdate = false;
+        this.pageTitle = '';
+        this.pageUrl = '';
+        this.isFullSize = false;
+        this.pageSpecificContent = undefined;
+        this.isSubContainerOverflowing = false;
     }
-  }
-  componentDidRender() {
-    if (this.needsOverflowWidthUpdate) {
-      window.requestAnimationFrame(() => this.updateSubContainerOverflow());
-      this.needsOverflowWidthUpdate = false;
+    connectedCallback() {
+        var _a;
+        this.updateFullSize();
+        this.updatePageSpecificContent();
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new MutationObserver(() => {
+            this.updatePageSpecificContent();
+            this.subContainerOverflowWidth = NaN; // Reset overflow width as it will have changed and needs to be recalculated
+            this.needsOverflowWidthUpdate = true;
+        }));
+        this.observer.observe(this.el, { childList: true, subtree: true });
     }
-  }
-  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,
-      };
-    };
-    this.pageSpecificContent = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.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(TopLinks, null), h(HelloMenu, { autoCollapse: true }))), h("nav", { id: "uofg-header-main-content-container", class: { 'full-height': this.isFullSize }, "aria-label": "Main" }, 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(MainLinks, null), h(AccountLink, null), h(SearchLink, null))) : (h("div", { id: "uofg-header-reduced-main-content", class: "uofg-header-main-content" }, h(AccountLink, null), h(SearchLink, null), h("uofg-menu", { id: "uofg-header-main-menu", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu" }, h(FontAwesomeIcon, { icon: faBars.faBars })), h("div", { slot: "content" }, h("span", null, "University of Guelph"), h(MainLinks, null), h(HelloMenu, { autoCollapse: false })))))), this.pageSpecificContent.length > 0 && (h("nav", { id: "uofg-header-sub-content-container", ref: node => (this.subContainer = node), "aria-label": "Department/Topic" }, 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 && !this.isSubContainerOverflowing ? (h("div", { id: "uofg-header-full-sub-content", class: "uofg-header-sub-content" }, h(PageSpecific, { content: this.pageSpecificContent, autoCollapse: 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, class: { overflowed: this.isSubContainerOverflowing && this.isFullSize } }, h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars.faBars })), h("div", { slot: "content" }, h(PageSpecific, { content: this.pageSpecificContent })))))))));
-  }
-  get el() { return this; }
-  static get style() { return uofgHeaderCss; }
+    componentDidLoad() {
+        this.updateSubContainerOverflow();
+    }
+    updateFullSize() {
+        this.isFullSize = window.innerWidth >= TRANSITION_BREAKPOINT;
+        this.updateSubContainerOverflow();
+    }
+    updateSubContainerOverflow() {
+        if (this.isFullSize && this.subContainer) {
+            const { clientWidth, scrollWidth } = this.subContainer;
+            if (scrollWidth > clientWidth) {
+                this.subContainerOverflowWidth = scrollWidth;
+            }
+            this.isSubContainerOverflowing = this.subContainerOverflowWidth > Math.min(clientWidth, MAX_CONTENT_WIDTH);
+        }
+    }
+    componentDidRender() {
+        if (this.needsOverflowWidthUpdate) {
+            window.requestAnimationFrame(() => this.updateSubContainerOverflow());
+            this.needsOverflowWidthUpdate = false;
+        }
+    }
+    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,
+            };
+        };
+        this.pageSpecificContent = Array.from((_a = this.el) === null || _a === void 0 ? void 0 : _a.children)
+            .filter(child => child.tagName === 'A' || child.tagName === 'UL')
+            .map(child => {
+            switch (child.tagName) {
+                case 'A':
+                    return aToPageSpecificLink(child);
+                case 'UL':
+                    const value = {
+                        title: child.getAttribute('data-title'),
+                        links: Array.from(child.querySelectorAll('a')).map(aToPageSpecificLink),
+                    };
+                    value.wrapContent = value.links.reduce((shouldWrap, link) => {
+                        if (link.text.length > MENU_CHAR_LIMIT) {
+                            shouldWrap = true;
+                        }
+                        return shouldWrap;
+                    }, false);
+                    return value;
+            }
+        })
+            .filter(val => Boolean(val));
+    }
+    render() {
+        var _a, _b;
+        return (h("header", { key: 'bb570df694a4849d2e8b26e44eaff9ac16d59666', class: "tw-relative tw-z-[1000] tw-w-full tw-font-condensed tw-text-2xl tw-text-black" }, this.isFullSize && (h("div", { class: "tw-flex tw-h-16 tw-justify-end tw-bg-white tw-px-[calc((100%-1320px)/2)] tw-text-3xl" }, h("uofg-menu", { class: "tw-relative tw-block tw-h-full", "auto-collapse": true }, h("button", { class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-gap-2 tw-transition-colors hover:tw-bg-uofg-grey aria-expanded:tw-bg-uofg-grey [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current [&>svg]:tw-transition-transform [&>svg]:aria-expanded:tw-rotate-180", slot: "button" }, h("span", null, "Resources"), h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), h("ul", { slot: "content", class: "tw-absolute tw-right-0 tw-top-full tw-z-50 tw-flex tw-min-w-[20rem] tw-flex-col tw-bg-uofg-grey [&>li]:tw-contents" }, resources.map(item => (h("li", null, h("a", { class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-500 tw-p-4 tw-transition-colors hover:tw-bg-uofg-yellow", href: item.href }, item.text)))))), h("ul", { class: "tw-contents [&>li]:tw-contents" }, topLinks.map(item => (h("li", null, h("a", { href: item.href, class: `tw-flex tw-items-center tw-justify-center tw-p-4 tw-transition-colors hover:tw-bg-uofg-grey ${item.highlight ? 'tw-bg-uofg-yellow' : ''}` }, item.text))))))), h("nav", { key: '66342f95b44133c496db437970e73d76617dd46b', class: {
+                'tw-h-[10rem]': this.isFullSize,
+                'tw-h-[5rem]': !this.isFullSize,
+                'tw-relative tw-flex tw-justify-between tw-bg-black tw-px-[calc((100%-1320px)/2)] tw-text-3xl tw-text-white': true,
+            }, "aria-label": "Main" }, h("div", { key: '1c8c8524d7a244f2388eba2ba128d6d4a966f3f4', class: "tw-flex" }, this.isFullSize && (h("div", { class: "tw-left-0 tw-h-full tw-w-[7.5rem] min-[1320px]:tw-absolute [&>svg]:tw-h-full", innerHTML: Decoration })), h("a", { key: '1a1c9c0ebd073fee30522c64260dcd0cf00bb37a', class: "tw-left-[max(calc((100%-1320px)/2),7.5rem)] tw-h-full tw-transition-opacity hocus:tw-opacity-75 min-[1320px]:tw-absolute [&>svg]:tw-h-full", href: "https://www.uoguelph.ca", innerHTML: this.isFullSize ? FullSizeLogo : ReducedSizeLogo, "aria-label": "University of Guelph Home Page" })), this.isFullSize ? (h("ul", { class: "tw-flex tw-items-center tw-justify-center tw-text-4xl [&>li]:tw-contents" }, mainLinks.map(item => (h("li", null, h("a", { href: item.href, class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-b-8 tw-border-solid tw-border-transparent tw-p-4 tw-pt-8 tw-transition-colors hover:tw-border-uofg-yellow hover:tw-text-uofg-yellow" }, item.text)))), iconButtons.map(item => (h("li", null, h("a", { class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-b-8 tw-border-solid tw-border-transparent tw-p-4 tw-pt-8 tw-text-uofg-yellow tw-transition-colors hover:tw-border-uofg-yellow hover:tw-text-white [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", href: item.href, "aria-label": item.text }, h(FontAwesomeIcon, { icon: item.icon }))))))) : (h("div", { class: "tw-flex tw-h-full" }, iconButtons.map(item => (h("a", { class: "tw-flex tw-aspect-square tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-l tw-border-solid tw-border-uofg-grey-950 tw-px-5 tw-transition-colors [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", href: item.href, "aria-label": item.text }, h(FontAwesomeIcon, { icon: item.icon })))), h("uofg-menu", { class: "tw-block tw-h-full", "auto-collapse": true }, h("button", { slot: "button", "aria-label": "Main Menu", class: "tw-flex tw-aspect-square tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-l tw-border-solid tw-border-uofg-grey-950 tw-px-5 tw-transition-colors aria-expanded:tw-bg-white aria-expanded:tw-text-black [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current" }, h(FontAwesomeIcon, { icon: faBars.faBars })), h("div", { slot: "content", class: "tw-absolute tw-left-0 tw-top-full tw-z-50 tw-flex tw-w-full tw-flex-col tw-bg-white tw-px-4 tw-text-black tw-shadow-md" }, h("span", { class: "tw-my-4 tw-text-4xl tw-font-bold" }, "University of Guelph"), h("ul", { class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, mainLinks.concat(topLinks).map(item => (h("li", null, h("a", { href: item.href, class: `tw-w-full tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey ${(item === null || item === void 0 ? void 0 : item.highlight) ? 'tw-bg-uofg-yellow' : ''}` }, item.text))))), h("uofg-menu", { class: "tw-relative tw-block tw-h-full tw-pb-6 tw-text-black", "auto-collapse": false }, h("button", { class: "tw-flex tw-h-auto tw-w-full tw-items-center tw-justify-between tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey aria-expanded:tw-bg-uofg-grey [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current [&>svg]:tw-transition-transform [&>svg]:aria-expanded:tw-rotate-180", slot: "button" }, h("span", null, "Resources"), h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), h("ul", { slot: "content", class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, resources.map(item => (h("li", null, h("a", { class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey", href: item.href }, item.text))))))))))), this.pageSpecificContent.length > 0 && (h("nav", { ref: node => (this.subContainer = node), "aria-label": "Department/Topic", class: "tw-align-items tw-relative tw-flex tw-h-[5rem] tw-justify-end tw-bg-uofg-grey tw-px-[calc((100%-1320px)/2)] tw-text-3xl lg:tw-h-16" }, this.pageTitle &&
+            (this.pageUrl != '' ? (h("a", { class: "tw-mr-auto tw-flex tw-h-full tw-items-center tw-justify-center tw-px-4 tw-font-bold tw-transition-colors hover:tw-bg-uofg-yellow", href: this.pageUrl }, this.pageTitle)) : (h("span", { class: "tw-mr-auto tw-flex tw-h-full tw-items-center tw-justify-center tw-px-4" }, this.pageTitle))), this.isFullSize && !this.isSubContainerOverflowing ? (h("ul", { class: "tw-flex tw-items-center tw-justify-center [&>li]:tw-contents" }, (_a = this.pageSpecificContent) === null || _a === void 0 ? void 0 : _a.map(item => {
+            if ('text' in item) {
+                return (h("li", null, h("a", Object.assign({ class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-transition-colors hover:tw-bg-uofg-yellow", href: item.href }, item.attributes), item.text)));
+            }
+            return (h("li", null, h("uofg-menu", { class: "tw-relative tw-h-full", "auto-collapse": true }, h("button", { class: "tw-flex tw-h-full tw-items-center tw-justify-center tw-gap-2 tw-px-4 tw-transition-colors hover:tw-bg-uofg-yellow aria-expanded:tw-bg-uofg-yellow [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", slot: "button" }, h("span", null, item === null || item === void 0 ? void 0 : item.title), h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), h("ul", { slot: "content", class: {
+                    'tw-absolute tw-right-0 tw-top-full tw-z-50 tw-flex tw-min-w-[20rem] tw-flex-col tw-bg-uofg-grey [&>li]:tw-contents': true,
+                    'wrap-content': item.wrapContent || false,
+                } }, item.links.map(link => (h("li", null, h("a", Object.assign({ class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-500 tw-p-4 tw-transition-colors hover:tw-bg-uofg-yellow", href: link.href }, link.attributes), link.text))))))));
+        }))) : (h("uofg-menu", { class: "tw-block tw-h-full lg:tw-relative", "auto-collapse": true }, h("button", { class: "tw-flex tw-aspect-square tw-h-full tw-items-center tw-justify-center tw-border-0 tw-border-l tw-border-solid tw-border-uofg-grey-300 tw-px-6 tw-transition-colors aria-expanded:tw-bg-uofg-yellow lg:tw-border-l-0 [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars.faBars })), h("ul", { class: "tw-absolute tw-right-0 tw-top-full tw-z-50 tw-flex tw-w-full tw-flex-col tw-bg-white tw-px-4 tw-text-black tw-shadow-md lg:tw-w-[30rem] [&>li]:tw-contents", slot: "content" }, (_b = this.pageSpecificContent) === null || _b === void 0 ? void 0 : _b.map(item => {
+            if ('text' in item) {
+                return (h("li", { class: "[&>a]:last:tw-pb-4" }, h("a", { href: item.href, class: "tw-w-full tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey" }, item.text)));
+            }
+            return (h("li", { class: "[&>uofg-menu]:last:tw-pb-6" }, h("uofg-menu", { class: "tw-relative tw-block tw-h-full tw-text-black", "auto-collapse": false }, h("button", { class: "tw-flex tw-h-auto tw-w-full tw-items-center tw-justify-between tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey aria-expanded:tw-bg-uofg-grey [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current [&>svg]:tw-transition-transform [&>svg]:aria-expanded:tw-rotate-180", slot: "button" }, h("span", null, item.title), h(FontAwesomeIcon, { icon: faCaretDown.faCaretDown })), h("ul", { slot: "content", class: "tw-flex tw-w-full tw-flex-col [&>li]:tw-contents" }, item.links.map(item => (h("li", null, h("a", { class: "tw-border-0 tw-border-b tw-border-solid tw-border-uofg-grey-400 tw-p-5 tw-transition-colors hover:tw-bg-uofg-grey", href: item.href }, item.text))))))));
+        }))))))));
+    }
+    get el() { return this; }
+    static get style() { return UofgHeaderStyle0; }
 }, [1, "uofg-header", {
-    "pageTitle": [1, "page-title"],
-    "pageUrl": [1, "page-url"],
-    "isFullSize": [32],
-    "pageSpecificContent": [32],
-    "isSubContainerOverflowing": [32]
-  }, [[9, "resize", "updateFullSize"]]]);
+        "pageTitle": [1, "page-title"],
+        "pageUrl": [1, "page-url"],
+        "isFullSize": [32],
+        "pageSpecificContent": [32],
+        "isSubContainerOverflowing": [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;
-  } });
+    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;

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

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