@uoguelph/web-components 0.0.30 → 1.0.0

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

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ff6a2049.js');
+const index$1 = require('./index-5114bde1.js');
+const utils = require('./utils-582c8cb9.js');
+
+const uofgModalCss = ":host{visibility:visible !important;position:relative !important;z-index:100000 !important}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}#uofg-modal{display:flex;position:fixed;top:0;left:0;z-index:10000;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5);visibility:hidden;opacity:0;transition-property:opacity, visibility;transition-duration:0.2s;transition-timing-function:ease-in-out}#uofg-modal.open{visibility:visible;opacity:1}#uofg-modal-dismiss{display:flex;justify-content:center;align-items:center;position:absolute;top:2rem;right:2rem;padding:0.5rem;height:3.5rem;width:3.5rem;font-size:2rem;line-height:1;color:var(--uofg-modal-dismiss-color, white);z-index:2}#uofg-modal-dismiss>svg{display:block;height:1em;fill:currentColor}#uofg-modal-content{position:absolute;width:fit-content;height:fit-content;width:-moz-max-content;height:-moz-max-content;padding:2rem;max-width:100%;max-height:100%;left:50%;transform:translate(-50%, -50px);z-index:1;overflow:auto;transition-property:transform;transition-duration:0.2s;transition-timing-function:ease-in-out}@media (prefers-reduced-motion: reduce){#uofg-modal-content{transition:none}}#uofg-modal-content.centered{top:50%;transform:translate(-50%, calc(-50% - 50px))}#uofg-modal.open #uofg-modal-content{visibility:visible;opacity:1;transform:translate(-50%, 0)}#uofg-modal.open #uofg-modal-content.centered{transform:translate(-50%, -50%)}";
+
+const UofgModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.opened = index.createEvent(this, "opened", 2);
+    this.closed = index.createEvent(this, "closed", 2);
+    this.inertElements = [];
+    this.label = undefined;
+    this.alertDialog = false;
+    this.centered = false;
+    this.staticBackdrop = false;
+    this.autoOpen = false;
+    this.isOpen = false;
+  }
+  connectedCallback() {
+    // Bind event handlers so that 'this' is always the component instance.
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleFocusOut = this.handleFocusOut.bind(this);
+    if (this.autoOpen) {
+      this.isOpen = true;
+    }
+  }
+  disconnectedCallback() {
+    // Just in case the modal is removed from the DOM before it is closed, make sure to remove the inert attribute from all elements that we marked as inert when the modal was opened.
+    for (const element of this.inertElements) {
+      element.removeAttribute('inert');
+    }
+  }
+  handleClick(e) {
+    if (!this.staticBackdrop && e.target === e.currentTarget) {
+      this.isOpen = false;
+    }
+  }
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isOpen = false;
+    }
+  }
+  handleFocusOut(e) {
+    var _a;
+    if (!this.isOpen)
+      return; // Don't do anything if the modal is closed.
+    const relatedTarget = e.relatedTarget;
+    // If the focus is moving outside of the modal
+    if (!this.container.contains(relatedTarget) && !this.el.contains(relatedTarget)) {
+      e.preventDefault();
+      // If the focus is moving away from the dismiss button, focus the last focusable element in the modal.
+      if (e.target === this.dismissButton) {
+        const focusableElements = utils.getAllFocusableElements(this.el);
+        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+      else {
+        // Otherwise, focus the dismiss button.
+        this.dismissButton.focus();
+      }
+    }
+  }
+  handleIsOpenChange(newValue) {
+    if (newValue === true) {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            // Focus the container element when the modal is opened, so that the screen reader's will announce the modal when it opens.
+            this.container.focus();
+          });
+        });
+      });
+      // Mark outer elements as inert when the modal is open.
+      let current = this.el;
+      // We want to mark all elements outside of the modal as inert, so we need to traverse up the DOM tree until we reach the body element.
+      while (current !== null && current !== document.body) {
+        const parent = current.parentElement;
+        // If parent is null, then we may be inside a shadow root. If so, we get the host element and continue traversing up the DOM tree.
+        if (parent === null) {
+          const root = current.getRootNode();
+          if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+          }
+        }
+        if (parent !== null) {
+          for (const child of parent.children) {
+            if (child !== current && !child.inert) {
+              // Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
+              child.inert = true;
+              this.inertElements.push(child);
+            }
+          }
+        }
+        current = parent;
+        this.opened.emit();
+      }
+    }
+    else {
+      // Remove the inert attribute from all elements that we marked as inert when the modal was opened.
+      for (const element of this.inertElements) {
+        element.removeAttribute('inert');
+      }
+      // Clear the array of inert elements. This is important because we don't want to keep a reference to elements as they may be removed from the DOM and we could cause a memory leak.
+      this.inertElements = [];
+      this.closed.emit();
+    }
+    // Prevent scrolling of the body when the modal is open.
+    document.body.style.overflow = newValue ? 'hidden' : '';
+  }
+  render() {
+    return (index.h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, index.h("div", { id: "uofg-modal-content", part: "content", class: { centered: this.centered } }, index.h("button", { id: "uofg-modal-dismiss", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, index.h(index$1.FontAwesomeIcon, { icon: index$1.faTimes })), index.h("slot", null))));
+  }
+  /**
+   * Get the current state of the modal.
+   * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
+   */
+  async getState() {
+    return this.isOpen;
+  }
+  /**
+   * Set the state of the modal.
+   * @param value The new state, set it to true to open the modal, or false to close the modal.
+   */
+  async setState(value) {
+    this.isOpen = value;
+  }
+  /**
+   * Toggle the state of the modal.
+   * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
+    return this.isOpen;
+  }
+  /**
+   * Closes the modal.
+   * @returns empty Promise.
+   */
+  async close() {
+    this.isOpen = false;
+  }
+  /**
+   * Opens the modal.
+   * @returns empty Promise.
+   */
+  async open() {
+    this.isOpen = true;
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["handleIsOpenChange"]
+  }; }
+};
+UofgModal.style = uofgModalCss;
+
+exports.uofg_modal = UofgModal;

package/dist/cjs/uofg-web-components.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-52617c57.js');
+const index = require('./index-ff6a2049.js');
 
 /*
  Stencil Client Patch Browser v4.0.1 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["uofg-alert_6.cjs",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-alert"],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-footer"],[1,"uofg-modal",{"label":[1],"alertDialog":[4,"alert-dialog"],"centered":[4],"staticBackdrop":[4,"static-backdrop"],"autoOpen":[4,"auto-open"],"isOpen":[32],"getState":[64],"setState":[64],"toggle":[64],"close":[64],"open":[64]}],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]}]]]], options);
+  return index.bootstrapLazy([["uofg-alert.cjs",[[1,"uofg-alert"]]],["uofg-modal.cjs",[[1,"uofg-modal",{"label":[1],"alertDialog":[4,"alert-dialog"],"centered":[4],"staticBackdrop":[4,"static-backdrop"],"autoOpen":[4,"auto-open"],"isOpen":[32],"getState":[64],"setState":[64],"toggle":[64],"close":[64],"open":[64]}]]],["uofg-back-to-top_5.cjs",[[1,"uofg-header",{"pageTitle":[1,"page-title"],"pageUrl":[1,"page-url"],"isFullSize":[32],"pageSpecificContent":[32]},[[9,"resize","updateFullSize"]]],[1,"uofg-back-to-top",{"threshold":[2],"isVisible":[32]},[[9,"scroll","onScroll"]]],[1,"uofg-card",{"href":[1]}],[1,"uofg-footer"],[0,"uofg-menu",{"autoCollapse":[4,"auto-collapse"],"isExpanded":[32],"getExpanded":[64],"setExpanded":[64],"toggle":[64],"collapse":[64],"expand":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/utils-582c8cb9.js

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

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/uofg-alert/uofg-alert.js",
     "components/uofg-back-to-top/uofg-back-to-top.js",
+    "components/uofg-card/uofg-card.js",
     "components/uofg-footer/uofg-footer.js",
     "components/uofg-header/uofg-header.js",
     "components/uofg-menu/uofg-menu.js",

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

@@ -1,12 +1,37 @@
+* {
+  box-sizing: border-box;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: unset;
+}
+ul > li {
+  display: contents;
+}
+
+:focus-visible {
+  outline: 2px solid #ffc72a;
+  outline-offset: 0.5rem;
+}
+
 :host {
   display: block;
   max-width: 100rem;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 #uofg-alert {
   display: flex;
   flex-direction: column;
@@ -19,7 +44,7 @@
   font-size: 2.25rem;
   padding: 2rem;
   color: white;
-  background-color: #c10631;
+  background-color: #c20430;
 }
 #uofg-alert-title > svg {
   margin-right: 1rem;

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

@@ -0,0 +1,95 @@
+* {
+  box-sizing: border-box;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: unset;
+}
+ul > li {
+  display: contents;
+}
+
+:focus-visible {
+  outline: 2px solid #ffc72a;
+  outline-offset: 0.5rem;
+}
+
+:host {
+  display: block;
+  width: 300px;
+  margin: 1rem;
+}
+
+#uofg-card {
+  display: flex;
+  flex-direction: column;
+  background-color: #f1f8fa;
+  font-size: 1.6rem;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+a#uofg-card {
+  border: 1px solid transparent;
+  transition-property: border-color;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+a#uofg-card:hover, a#uofg-card:focus, a#uofg-card:focus-within {
+  border-color: #69a3b9;
+}
+
+#uofg-card-img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+#uofg-card-img > slot::slotted(img) {
+  width: 100%;
+  object-fit: cover;
+  transition-property: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+a#uofg-card:hover #uofg-card-img > slot::slotted(img), a#uofg-card:focus #uofg-card-img > slot::slotted(img), a#uofg-card:focus-within #uofg-card-img > slot::slotted(img) {
+  transform: scale(1.1);
+}
+
+#uofg-card-content {
+  padding: 1rem;
+}
+#uofg-card-content > slot[name=title]::slotted(*) {
+  font-size: 2.25rem;
+  font-weight: normal;
+  margin: 0;
+  padding: 1rem 0;
+}
+#uofg-card-content > slot[name=subtitle]::slotted(*) {
+  font-size: 1.8rem;
+  font-weight: normal;
+  margin: 0;
+  padding: 1rem 0;
+}
+#uofg-card-content > slot[name=body]::slotted(*) {
+  font-size: 1.6rem;
+  font-weight: normal;
+  margin: 0;
+}
+
+#uofg-card-footer {
+  background-color: #bedae3;
+}

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

@@ -0,0 +1,43 @@
+import { Fragment, h } from "@stencil/core";
+export class UofgCard {
+  constructor() {
+    this.href = undefined;
+  }
+  render() {
+    const Body = () => (h(Fragment, null, h("div", { id: "uofg-card-img" }, h("slot", { name: "img" })), h("div", { id: "uofg-card-content" }, h("slot", { name: "title" }), h("slot", { name: "subtitle" }), h("slot", { name: "body" })), h("div", { id: "uofg-card-footer" }, h("slot", { name: "footer" }))));
+    return this.href ? (h("a", { href: this.href, id: "uofg-card" }, h(Body, null))) : (h("div", { id: "uofg-card" }, h(Body, null)));
+  }
+  static get is() { return "uofg-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["uofg-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["uofg-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The URL the card should link to. If this property is set, the card will be rendered as an anchor (\"a\" tag)."
+        },
+        "attribute": "href",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -1,10 +1,3 @@
-:host {
-  display: block;
-  width: 100%;
-  font-size: 1.6rem;
-  font-family: sans-serif;
-}
-
 :focus-visible {
   outline: 2px solid #ffc72a;
   outline-offset: 0.5rem;
@@ -34,6 +27,13 @@ ul > li {
   display: contents;
 }
 
+:host {
+  display: block;
+  width: 100%;
+  font-size: 1.6rem;
+  font-family: sans-serif;
+}
+
 a {
   display: flex;
   align-items: center;

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

@@ -1,5 +1,6 @@
-:host {
-  height: auto !important;
+:focus-visible {
+  outline: 2px solid #ffc72a;
+  outline-offset: 0.5rem;
 }
 
 * {
@@ -26,6 +27,10 @@ ul > li {
   display: contents;
 }
 
+:host {
+  height: auto !important;
+}
+
 a {
   display: flex;
   align-items: center;
@@ -81,8 +86,8 @@ uofg-menu > [slot=content] {
   z-index: 1;
   min-width: 20rem;
   right: 0;
-  background-color: #fff;
-  color: #000;
+  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);
 }
 
@@ -107,8 +112,8 @@ uofg-menu > [slot=content] {
 
 #uofg-header-top-content-container {
   height: 3.5rem;
-  background-color: #fff;
-  color: #000;
+  background-color: white;
+  color: black;
   z-index: 3;
 }
 #uofg-header-top-content-container > ul {
@@ -121,7 +126,7 @@ uofg-menu > [slot=content] {
   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;
+  background-color: #dddddd;
 }
 #uofg-header-top-content-container > uofg-menu {
   height: 100%;
@@ -129,19 +134,19 @@ uofg-menu > [slot=content] {
 #uofg-header-top-content-container > uofg-menu > [slot=button] {
   padding: 0 1rem;
   background-color: #ffc72a;
-  color: #000;
+  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: #000;
+  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: #ddd;
-  color: #000;
+  background-color: #dddddd;
+  color: black;
 }
 #uofg-header-top-content-container > uofg-menu > [slot=content] a {
   height: 100%;
@@ -154,8 +159,8 @@ uofg-menu > [slot=content] {
 
 #uofg-header-main-content-container {
   height: 5rem;
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   z-index: 2;
 }
 #uofg-header-main-content-container > * {
@@ -243,15 +248,15 @@ uofg-menu > [slot=content] {
 #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;
+  background-color: #333333;
   color: #ffc72a;
 }
 #uofg-header-full-main-content > uofg-menu > [slot=button] {
   color: #ffc72a;
 }
 #uofg-header-full-main-content > uofg-menu > [slot=content] {
-  color: #000;
-  background-color: #fff;
+  color: black;
+  background-color: white;
   padding: 2rem;
   width: 35rem;
 }
@@ -276,16 +281,16 @@ uofg-menu > [slot=content] {
 #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;
+  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: #fff;
-  color: #000;
+  background-color: white;
+  color: black;
   width: 100%;
   padding: 1rem 2rem 2rem;
 }
@@ -337,12 +342,12 @@ uofg-menu > [slot=content] {
 }
 #uofg-header-main-menu uofg-menu.uofg-header-hello-you-menu > [slot=button] {
   background-color: #ffc72a;
-  color: #000;
+  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: #000;
+  color: black;
 }
 #uofg-header-main-menu ul > li > a {
   padding: 0.75rem;
@@ -359,8 +364,8 @@ uofg-menu > [slot=content] {
 
 #uofg-header-sub-content-container {
   height: 4rem;
-  background-color: #ddd;
-  color: #000;
+  background-color: #dddddd;
+  color: black;
   z-index: 1;
 }
 #uofg-header-sub-content-container #uofg-header-page-title {
@@ -380,12 +385,12 @@ uofg-menu > [slot=content] {
 }
 #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;
+  color: black;
 }
 #uofg-header-sub-content-container uofg-menu > [slot=content] {
   position: absolute;
-  background-color: #ddd;
-  color: #000;
+  background-color: #dddddd;
+  color: black;
 }
 #uofg-header-sub-content-container uofg-menu > [slot=content] > li:not(:last-child) > a {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -405,7 +410,7 @@ uofg-menu > [slot=content] {
 }
 #uofg-header-sub-content-container a:hover, #uofg-header-sub-content-container a:focus-visible {
   background-color: #ffc72a;
-  color: #000;
+  color: black;
 }
 
 #uofg-header-full-sub-content,
@@ -441,8 +446,8 @@ uofg-menu > [slot=content] {
   padding: 0 1.5rem;
 }
 #uofg-header-reduced-sub-content > uofg-menu > [slot=content] {
-  background-color: #fff;
-  color: #000;
+  background-color: white;
+  color: black;
   padding: 2rem;
   overflow-y: auto;
   max-height: calc(100vh - 5rem - 4rem);
@@ -464,7 +469,7 @@ uofg-menu > [slot=content] {
 }
 #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;
+  color: black;
 }
 #uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu {
   height: auto;
@@ -479,7 +484,7 @@ uofg-menu > [slot=content] {
 }
 #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;
+  color: black;
 }
 #uofg-header-reduced-sub-content > uofg-menu > [slot=content] uofg-menu > [slot=button][aria-expanded=true] > svg {
   transform: rotate(180deg);

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

@@ -66,9 +66,9 @@ ul > li {
   font-size: 2rem;
   line-height: 1;
   /**
-  * @prop --uofg-modal-dismiss-color: The color of the dismiss button's icon (Default is #fff)
+  * @prop --uofg-modal-dismiss-color: The color of the dismiss button's icon (Default is white)
   */
-  color: var(--uofg-modal-dismiss-color, #fff);
+  color: var(--uofg-modal-dismiss-color, white);
   z-index: 2;
 }
 #uofg-modal-dismiss > svg {

package/dist/components/index.d.ts

@@ -3,6 +3,8 @@ export { UofgAlert as UofgAlert } from '../types/components/uofg-alert/uofg-aler
 export { defineCustomElement as defineCustomElementUofgAlert } from './uofg-alert';
 export { UofgBackToTop as UofgBackToTop } from '../types/components/uofg-back-to-top/uofg-back-to-top';
 export { defineCustomElement as defineCustomElementUofgBackToTop } from './uofg-back-to-top';
+export { UofgCard as UofgCard } from '../types/components/uofg-card/uofg-card';
+export { defineCustomElement as defineCustomElementUofgCard } from './uofg-card';
 export { UofgFooter as UofgFooter } from '../types/components/uofg-footer/uofg-footer';
 export { defineCustomElement as defineCustomElementUofgFooter } from './uofg-footer';
 export { UofgHeader as UofgHeader } from '../types/components/uofg-header/uofg-header';

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { UofgAlert, defineCustomElement as defineCustomElementUofgAlert } from './uofg-alert.js';
 export { UofgBackToTop, defineCustomElement as defineCustomElementUofgBackToTop } from './uofg-back-to-top.js';
+export { UofgCard, defineCustomElement as defineCustomElementUofgCard } from './uofg-card.js';
 export { UofgFooter, defineCustomElement as defineCustomElementUofgFooter } from './uofg-footer.js';
 export { UofgHeader, defineCustomElement as defineCustomElementUofgHeader } from './uofg-header.js';
 export { UofgMenu, defineCustomElement as defineCustomElementUofgMenu } from './uofg-menu.js';

package/dist/components/uofg-alert.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { F as FontAwesomeIcon } from './font-awesome-icon.js';
 import { f as faCircleExclamation } from './index2.js';
 
-const uofgAlertCss = ":host{display:block;max-width:100rem}*{box-sizing:border-box}#uofg-alert{display:flex;flex-direction:column;font-size:2rem}#uofg-alert-title{display:flex;align-items:center;font-size:2.25rem;padding:2rem;color:white;background-color:#c10631}#uofg-alert-title>svg{margin-right:1rem;fill:currentColor;height:1.5em}#uofg-alert-body{display:flex;flex-direction:column;padding:1.5rem 2rem;background-color:white}#uofg-alert-body slot[name=subtitle]::slotted(*){font-size:2rem;margin-bottom:2rem;font-weight:bold}#uofg-alert-body slot[name=message]::slotted(*){font-size:1.6rem}#uofg-alert-footer{display:flex;padding:1rem 2rem;background-color:#dddddd;font-size:1.4rem}";
+const uofgAlertCss = "*{box-sizing:border-box}button{border:none;background-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none;padding:0;margin:unset}ul>li{display:contents}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}:host{display:block;max-width:100rem}#uofg-alert{display:flex;flex-direction:column;font-size:2rem}#uofg-alert-title{display:flex;align-items:center;font-size:2.25rem;padding:2rem;color:white;background-color:#c20430}#uofg-alert-title>svg{margin-right:1rem;fill:currentColor;height:1.5em}#uofg-alert-body{display:flex;flex-direction:column;padding:1.5rem 2rem;background-color:white}#uofg-alert-body slot[name=subtitle]::slotted(*){font-size:2rem;margin-bottom:2rem;font-weight:bold}#uofg-alert-body slot[name=message]::slotted(*){font-size:1.6rem}#uofg-alert-footer{display:flex;padding:1rem 2rem;background-color:#dddddd;font-size:1.4rem}";
 
 const UofgAlert$1 = /*@__PURE__*/ proxyCustomElement(class UofgAlert extends HTMLElement {
   constructor() {