@uoguelph/web-components 0.0.25 → 0.0.27

package/dist/collection/components/uofg-alert/uofg-alert.css

@@ -12,7 +12,8 @@
   flex-direction: column;
   font-size: 2rem;
 }
-#uofg-alert #uofg-alert-title {
+
+#uofg-alert-title {
   display: flex;
   align-items: center;
   font-size: 2.25rem;
@@ -20,26 +21,28 @@
   color: white;
   background-color: #c10631;
 }
-#uofg-alert #uofg-alert-title > svg {
+#uofg-alert-title > svg {
   margin-right: 1rem;
   fill: currentColor;
   height: 1.5em;
 }
-#uofg-alert #uofg-alert-body {
+
+#uofg-alert-body {
   display: flex;
   flex-direction: column;
   padding: 1.5rem 2rem;
   background-color: white;
 }
-#uofg-alert #uofg-alert-body slot[name=subtitle]::slotted(*) {
+#uofg-alert-body slot[name=subtitle]::slotted(*) {
   font-size: 2rem;
   margin-bottom: 2rem;
   font-weight: bold;
 }
-#uofg-alert #uofg-alert-body slot[name=message]::slotted(*) {
+#uofg-alert-body slot[name=message]::slotted(*) {
   font-size: 1.6rem;
 }
-#uofg-alert #uofg-alert-footer {
+
+#uofg-alert-footer {
   display: flex;
   padding: 1rem 2rem;
   background-color: #dddddd;

package/dist/collection/components/uofg-footer/uofg-footer.css

@@ -5,13 +5,33 @@
   font-family: sans-serif;
 }
 
+:focus-visible {
+  outline: 2px solid #ffc72a;
+  outline-offset: 0.5rem;
+}
+
 * {
   box-sizing: border-box;
 }
 
-:focus-visible {
-  outline: 2px solid #ffc72a;
-  outline-offset: 0.5rem;
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: unset;
+}
+ul > li {
+  display: contents;
 }
 
 a {
@@ -19,14 +39,13 @@ a {
   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;
+  transition-property: border-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 a:hover, a:focus {
   border-color: currentColor;
@@ -37,12 +56,7 @@ svg {
   height: 1.6rem;
 }
 
-ul {
-  list-style: none;
-  padding: 0;
-  margin: unset;
-}
-ul li {
+li {
   display: contents;
 }
 
@@ -60,7 +74,7 @@ ul li {
   grid-template-columns: 1fr;
   gap: 2rem;
   width: 100%;
-  max-width: 1370px;
+  max-width: 1500px;
 }
 @media (min-width: 570px) {
   #uofg-footer-content {
@@ -84,6 +98,8 @@ ul li {
 
 #uofg-footer-improve-life {
   transition-property: opacity;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
   border: 0;
 }
 #uofg-footer-improve-life > svg {
@@ -103,6 +119,8 @@ ul li {
 }
 #uofg-footer-social-links a {
   transition-property: color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
   border: 0;
 }
 #uofg-footer-social-links a:hover, #uofg-footer-social-links a:focus {

package/dist/collection/components/uofg-footer/uofg-footer.js

@@ -1,12 +1,27 @@
 import { h } from "@stencil/core";
 import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
-import { SocialLinks } from "./social-links";
-import { FooterLinks } from "./footer-links";
-import { faPhoneFlip } from "@fortawesome/free-solid-svg-icons";
 import improveLifeLogo from "./improve-life.svg";
+import { faBriefcase } from "@fortawesome/free-solid-svg-icons/faBriefcase";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
+import { faCircleCheck } from "@fortawesome/free-solid-svg-icons/faCircleCheck";
+import { faHandHoldingHeart } from "@fortawesome/free-solid-svg-icons/faHandHoldingHeart";
+import { faKey } from "@fortawesome/free-solid-svg-icons/faKey";
+import { faList } from "@fortawesome/free-solid-svg-icons/faList";
+import { faSitemap } from "@fortawesome/free-solid-svg-icons/faSitemap";
+import { faTree } from "@fortawesome/free-solid-svg-icons/faTree";
+import { faUniversalAccess } from "@fortawesome/free-solid-svg-icons/faUniversalAccess";
+import { faPhoneFlip } from "@fortawesome/free-solid-svg-icons/faPhoneFlip";
+import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons/faFacebookSquare";
+import { faInstagram } from "@fortawesome/free-brands-svg-icons/faInstagram";
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons/faLinkedin";
+import { faTiktok } from "@fortawesome/free-brands-svg-icons/faTiktok";
+import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons/faTwitterSquare";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons/faYoutube";
+const SocialLink = props => (h("li", null, h("a", { href: props.url, "aria-label": props.name }, h(FontAwesomeIcon, { icon: props.icon }))));
+const FooterLink = props => (h("li", null, h("a", { href: props.url, title: props.title }, h(FontAwesomeIcon, { icon: props.icon }), h("span", null, props.text))));
 export class UofgFooter {
   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"))))));
+    return (h("footer", { id: "uofg-footer" }, h("div", { id: "uofg-footer-content" }, h("div", { id: "uofg-footer-social", class: "uofg-footer-content-separator" }, h("a", { id: "uofg-footer-improve-life", href: "//www.uoguelph.ca/improve-life", "aria-label": "Improve Life", innerHTML: improveLifeLogo }), h("ul", { id: "uofg-footer-social-links" }, h(SocialLink, { name: "Twitter", url: "https://twitter.com/uofg", icon: faTwitterSquare }), 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 })), 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("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: faTree, title: "The University of Guelph resides on the treaty lands and territory of the Mississaugas of the Credit. We recognize that today this gathering place is home to many First Nations, Inuit and M\u00E9tis peoples and acknowledging them reminds us of our collective responsibility to the land where we learn and work." }), h(FooterLink, { text: "Careers", url: "https://www.uoguelph.ca/hr/careers-guelph/current-opportunities", icon: faBriefcase }), h(FooterLink, { text: "Undergraduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/undergraduate/current/", icon: faCalendar }), h(FooterLink, { text: "Graduate Calendar", url: "https://www.uoguelph.ca/registrar/calendars/graduate/current/", icon: faCalendar }), 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 })), 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 is() { return "uofg-footer"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/uofg-header/uofg-header.css

@@ -6,30 +6,38 @@
   box-sizing: border-box;
 }
 
-:focus-visible {
-  outline: 2px solid #ffc72a;
-  outline-offset: 0.5rem;
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
 }
 
 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;
+  text-decoration: none;
 }
 
 ul {
   list-style: none;
-  margin: 0;
   padding: 0;
+  margin: unset;
 }
 ul > li {
   display: contents;
 }
 
+a {
+  display: flex;
+  align-items: center;
+  transition-property: color, background-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+
+li {
+  display: contents;
+}
+
 button {
   border: none;
   background: none;
@@ -44,32 +52,6 @@ button {
   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;
@@ -375,52 +357,6 @@ uofg-menu > [slot=content] {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-/*
-.uofg-header-account-menu {
-  .uofg-header-single-sign-on {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 1rem;
-
-    label {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    > input[type='text'],
-    > input[type='password'] {
-      height: 4rem;
-      width: 100%;
-    }
-
-    > button[type='submit'] {
-      height: 4rem;
-      width: 100%;
-      margin-top: 1rem;
-    }
-
-    > a {
-      color: #69a3b9;
-      text-decoration: underline;
-    }
-  }
-}
-*/
-.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;

package/dist/collection/components/uofg-header/uofg-header.js

@@ -1,13 +1,29 @@
 import { h } from "@stencil/core";
-import { PageSpecific, } from "./page-specific";
 import Decoration from "./decoration.svg";
-import FullSizeLogo from "./logo-full-size.svg";
-import ReducedSizeLogo from "./logo-reduced-size.svg";
-import { GlobalLinks } from "./global-links";
+import FullSizeLogo from "./logo-full.svg";
+import ReducedSizeLogo from "./logo-reduced.svg";
 import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
-import { faBars, faRightToBracket, faSearch } from "@fortawesome/free-solid-svg-icons";
-import { HelloYou } from "./hello-you";
-import { SearchBar } from "./search";
+import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
+import { faRightToBracket } from "@fortawesome/free-solid-svg-icons/faRightToBracket";
+import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
+const TopLinks = () => (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: "https://uoguelph.ca/apply" }, "APPLY")), h("li", null, h("a", { href: "https://news.uoguelph.ca/" }, "NEWS"))));
+const HelloYouMenu = props => (h("uofg-menu", { class: "uofg-header-hello-you-menu", "auto-collapse": props.autoCollapse }, h("button", { slot: "button", "aria-label": "Hello, YOU! menu" }, h("span", null, "Hello, YOU!"), h(FontAwesomeIcon, { icon: 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://uoguelph.ca/current-students" }, "Current Students")), h("li", null, h("a", { href: "https://uoguelph.ca/alumni-and-donors" }, "Alumni & Donors")), h("li", null, h("a", { href: "https://uoguelph.ca/staff-and-faculty" }, "Staff & Faculty")), h("li", null, h("a", { href: "https://uoguelph.ca/parents-and-visitors" }, "Parents & Visitors")), h("li", null, h("a", { href: "https://uoguelph.ca/employers-and-partners" }, "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://uoguelph.ca/academics" }, "Academics")), h("li", null, h("a", { href: "https://uoguelph.ca/admissions" }, "Admissions")), h("li", null, h("a", { href: "https://uoguelph.ca/research" }, "Research")), h("li", null, h("a", { href: "https://uoguelph.ca/student-life" }, "Student Life"))));
+const AccountLink = () => (h("a", { href: "https://uoguelph.ca/intranet", "aria-label": "University of Guelph Intranet" }, h(FontAwesomeIcon, { icon: faRightToBracket })));
+const SearchLink = () => (h("a", { href: "https://uoguelph.ca/search", "aria-label": "Search University of Guelph" }, h(FontAwesomeIcon, { icon: 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 })), 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)));
+};
 export class UofgHeader {
   constructor() {
     this.pageTitle = '';
@@ -55,8 +71,8 @@ export class UofgHeader {
     });
   }
   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: "https://uoguelph.ca/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 })))))))));
+    return (h("header", { id: "uofg-header" }, this.isFullSize && (h("div", { id: "uofg-header-top-content-container" }, h(TopLinks, null), h(HelloYouMenu, { 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(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 })), h("div", { slot: "content" }, h("span", null, "University of Guelph"), h(MainLinks, null), h(HelloYouMenu, { 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, 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 }, h("button", { slot: "button", "aria-label": this.pageTitle + ' Menu' }, h(FontAwesomeIcon, { icon: faBars })), h("div", { slot: "content" }, h(PageSpecific, { content: this.pageSpecificContent })))))))));
   }
   static get is() { return "uofg-header"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/uofg-menu/uofg-menu.js

@@ -77,7 +77,7 @@ export class UofgMenu {
     // Determine what animation type the user wants.
     const type = this.getAnimationType();
     // If Web Animations API isn't supported, or the user requested no animation, we can simply set display style
-    if (!WEB_ANIMATIONS_SUPPORTED || PREFERS_REDUCED_MOTION || type === 'none') {
+    if (!WEB_ANIMATIONS_SUPPORTED() || PREFERS_REDUCED_MOTION() || type === 'none') {
       this.content.style.display = newValue ? '' : 'none';
       return;
     }

package/dist/collection/components/uofg-modal/uofg-modal.css

@@ -6,12 +6,33 @@
 
 :focus-visible {
   outline: 2px solid #ffc72a;
+  outline-offset: 0.5rem;
 }
 
 * {
   box-sizing: border-box;
 }
 
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: unset;
+}
+ul > li {
+  display: contents;
+}
+
 #uofg-modal {
   display: flex;
   position: fixed;
@@ -23,11 +44,16 @@
   background-color: rgba(0, 0, 0, 0.5);
   visibility: hidden;
   opacity: 0;
-  transition-duration: 0.3s;
+  transition-property: opacity, visibility;
+  transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
-  transition-property: visibility, opacity;
 }
-#uofg-modal #uofg-modal-dismiss {
+#uofg-modal.open {
+  visibility: visible;
+  opacity: 1;
+}
+
+#uofg-modal-dismiss {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -40,41 +66,40 @@
   font-size: 2rem;
   line-height: 1;
   color: var(--uofg-modal-dismiss-color, #fff);
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
   z-index: 2;
 }
-#uofg-modal #uofg-modal-dismiss > svg {
+#uofg-modal-dismiss > svg {
   display: block;
   height: 1em;
   fill: currentColor;
 }
-#uofg-modal > #uofg-modal-content {
+
+#uofg-modal-content {
   position: absolute;
   width: fit-content;
   height: fit-content;
+  width: -moz-max-content;
+  height: -moz-max-content;
   padding: 2rem;
   max-width: 100%;
   max-height: 100%;
   left: 50%;
-  transition: transform 0.3s ease-in-out;
   transform: translate(-50%, -50px);
   z-index: 1;
+  overflow: auto;
+  transition-property: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  #uofg-modal > #uofg-modal-content {
+  #uofg-modal-content {
     transition: none;
   }
 }
-#uofg-modal > #uofg-modal-content.centered {
+#uofg-modal-content.centered {
   top: 50%;
   transform: translate(-50%, calc(-50% - 50px));
 }
-#uofg-modal.open {
-  visibility: visible;
-  opacity: 1;
-}
 #uofg-modal.open #uofg-modal-content {
   visibility: visible;
   opacity: 1;

package/dist/collection/components/uofg-modal/uofg-modal.js

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
 import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { getAllFocusableElements } from "../../utils/utils";
+import { getAllFocusableElements, IS_INERT_SUPPORTED } from "../../utils/utils";
 export class UofgModal {
   constructor() {
+    this.inertElements = [];
     this.label = undefined;
     this.alertDialog = false;
     this.centered = false;
@@ -20,6 +21,12 @@ export class UofgModal {
       this.isOpen = true;
     }
   }
+  disconnectedCallback() {
+    // Just in case the modal is removed from the DOM before it is closed, make sure to remove the inert attribute from all elements that we marked as inert when the modal was opened.
+    for (const element of this.inertElements) {
+      element.removeAttribute('inert');
+    }
+  }
   handleClick(e) {
     if (!this.staticBackdrop && e.target === e.currentTarget) {
       this.isOpen = false;
@@ -61,12 +68,44 @@ export class UofgModal {
           });
         });
       });
+      // Mark outer elements as inert when the modal is open.
+      let current = this.el;
+      // We want to mark all elements outside of the modal as inert, so we need to traverse up the DOM tree until we reach the body element.
+      while (current !== null && current !== document.body) {
+        const parent = current.parentElement;
+        // If parent is null, then we may be inside a shadow root. If so, we get the host element and continue traversing up the DOM tree.
+        if (parent === null) {
+          const root = current.getRootNode();
+          if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+          }
+        }
+        if (parent !== null) {
+          for (const child of parent.children) {
+            if (child !== current && !child.inert) {
+              // Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
+              child.inert = true;
+              this.inertElements.push(child);
+            }
+          }
+        }
+        current = parent;
+      }
+    }
+    else {
+      // Remove the inert attribute from all elements that we marked as inert when the modal was opened.
+      for (const element of this.inertElements) {
+        element.removeAttribute('inert');
+      }
+      // Clear the array of inert elements. This is important because we don't want to keep a reference to elements as they may be removed from the DOM and we could cause a memory leak.
+      this.inertElements = [];
     }
     // Prevent scrolling of the body when the modal is open.
     document.body.style.overflow = newValue ? 'hidden' : '';
   }
   render() {
-    return (h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.isOpen ? (this.alertDialog ? 'alertdialog' : 'dialog') : '', "aria-modal": this.isOpen, "aria-label": this.label, "aria-hidden": !this.isOpen, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, ref: (el) => (this.container = el) }, h("div", { id: "uofg-modal-content", part: "content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { icon: faTimes })), h("slot", null))));
+    return (h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: IS_INERT_SUPPORTED() ? undefined : this.handleKeyDown, ref: (el) => (this.container = el) }, h("div", { id: "uofg-modal-content", part: "content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { icon: faTimes })), h("slot", null))));
   }
   /**
    * Get the current state of the modal.

package/dist/collection/utils/utils.js

@@ -1,5 +1,12 @@
-export const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
-export const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const WEB_ANIMATIONS_SUPPORTED = () => {
+  return typeof window !== 'undefined' && 'animate' in HTMLElement.prototype;
+};
+export const PREFERS_REDUCED_MOTION = () => {
+  return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+export const IS_INERT_SUPPORTED = () => {
+  return typeof window !== 'undefined' && 'inert' in HTMLElement.prototype;
+};
 export const getAllFocusableElements = (container) => {
   const query = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [contenteditable], audio[controls], video[controls], details, summary, [tabindex]:not([tabindex="-1"])';
   return Array.from(container.querySelectorAll(query));

package/dist/components/_commonjsHelpers.js

@@ -0,0 +1,15 @@
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { createCommonjsModule as c };

package/dist/components/font-awesome-icon.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core/internal/client';
+
+const FontAwesomeIcon = props => {
+  const width = props.icon.icon[0];
+  const height = props.icon.icon[1];
+  const iconPathData = props.icon.icon[4];
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}` }, Array.isArray(iconPathData) ? (iconPathData.map(path => h("path", { d: path }))) : (h("path", { d: iconPathData }))));
+};
+
+export { FontAwesomeIcon as F };