@uoguelph/web-components 0.0.17 → 0.0.18

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

@@ -0,0 +1,325 @@
+import { h } from "@stencil/core";
+import { FontAwesomeIcon } from "../../utils/font-awesome-icon";
+import { faTimes } from "@fortawesome/pro-solid-svg-icons";
+import { getAllFocusableElements } from "../../utils/utils";
+export class UofgModal {
+  constructor() {
+    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.handleKeyDown = this.handleKeyDown.bind(this);
+    if (this.autoOpen) {
+      this.isOpen = true;
+    }
+  }
+  handleClick(e) {
+    if (!this.staticBackdrop && e.target === e.currentTarget) {
+      this.isOpen = false;
+    }
+  }
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isOpen = false;
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === 'Tab') {
+      const focusableElements = getAllFocusableElements(this.el);
+      const firstFocusable = this.dismissButton; // The dismiss button is always the first focusable element in the modal.
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+      if (e.target === firstFocusable && e.shiftKey) {
+        e.preventDefault();
+        lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.focus();
+      }
+      else if (e.target === lastFocusable && !e.shiftKey) {
+        e.preventDefault();
+        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+      }
+    }
+  }
+  handleIsOpenChange(newValue) {
+    if (newValue === true) {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
+            this.dismissButton.focus();
+          });
+        });
+      });
+    }
+  }
+  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 }, h("div", { id: "uofg-modal-content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", "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.
+   * @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;
+  }
+  static get is() { return "uofg-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["uofg-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["uofg-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label for the modal. It is recommended that you set this to describe the modal's content.\nThis is required for accessibility."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "alertDialog": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether the modal should be rendered as an alert dialog.\nThis is useful for when you want to use the modal to alert the user of something, rather than to ask the user to make a decision.\nIf this is set to true, the modal will be rendered with a role of \"alertdialog\" instead of \"dialog\"."
+        },
+        "attribute": "alert-dialog",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "centered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether the modal content is centered vertically."
+        },
+        "attribute": "centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "staticBackdrop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether clicking on the backdrop of the modal will close the modal.\nIf this is set to true, clicking on the backdrop will NOT close the modal."
+        },
+        "attribute": "static-backdrop",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "autoOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to determine whether the modal should open automatically when the component is first rendered.\nIt is important to ensure this is only set to true for ONE modal on the page."
+        },
+        "attribute": "auto-open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+  static get methods() {
+    return {
+      "getState": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Get the current state of the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "A promise which will resolve to true when the modal is open, or false when the modal is closed."
+            }]
+        }
+      },
+      "setState": {
+        "complexType": {
+          "signature": "(value: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "value The new state, set it to true to open the modal, or false to close the modal."
+                }],
+              "text": "The new state, set it to true to open the modal, or false to close the modal."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set the state of the modal.",
+          "tags": [{
+              "name": "param",
+              "text": "value The new state, set it to true to open the modal, or false to close the modal."
+            }]
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Toggle the state of the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "A promise which will resolve to true (if the modal opened) or false (if the modal closed)."
+            }]
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Closes the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "empty Promise."
+            }]
+        }
+      },
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Opens the modal.",
+          "tags": [{
+              "name": "returns",
+              "text": "empty Promise."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "isOpen",
+        "methodName": "handleIsOpenChange"
+      }];
+  }
+}

package/dist/collection/utils/utils.js

@@ -0,0 +1,6 @@
+export const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
+export const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+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/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 };

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 /* UofgWebComponents custom elements */
+export { UofgAlert as UofgAlert } from '../types/components/uofg-alert/uofg-alert';
+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 { UofgFooter as UofgFooter } from '../types/components/uofg-footer/uofg-footer';
@@ -7,6 +9,8 @@ export { UofgHeader as UofgHeader } from '../types/components/uofg-header/uofg-h
 export { defineCustomElement as defineCustomElementUofgHeader } from './uofg-header';
 export { UofgMenu as UofgMenu } from '../types/components/uofg-menu/uofg-menu';
 export { defineCustomElement as defineCustomElementUofgMenu } from './uofg-menu';
+export { UofgModal as UofgModal } from '../types/components/uofg-modal/uofg-modal';
+export { defineCustomElement as defineCustomElementUofgModal } from './uofg-modal';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -1,5 +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 { 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';
+export { UofgModal, defineCustomElement as defineCustomElementUofgModal } from './uofg-modal.js';

package/dist/components/index2.js

@@ -1,12 +1,3 @@
-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 }))));
-};
-
 var faTrees = {
   prefix: 'fas',
   iconName: 'trees',
@@ -78,10 +69,16 @@ var faMagnifyingGlass = {
   icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
 };
 var faSearch = faMagnifyingGlass;
+var faXmark = {
+  prefix: 'fas',
+  iconName: 'xmark',
+  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"]
+};
+var faTimes = faXmark;
 var faBriefcase = {
   prefix: 'fas',
   iconName: 'briefcase',
   icon: [512, 512, [128188], "f0b1", "M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 320 512V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM512 288H320v32c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V288z"]
 };
 
-export { FontAwesomeIcon as F, faUniversalAccess as a, faKey as b, faSitemap as c, faCircleCheck as d, faTrees as e, faChevronUp as f, faBriefcase as g, faCalendarRange as h, faList as i, faHandHoldingHeart as j, faPhoneFlip as k, faCaretDown as l, faSearch as m, faRightToBracket as n, faBars as o };
+export { faUniversalAccess as a, faKey as b, faSitemap as c, faCircleCheck as d, faTrees as e, faChevronUp as f, faBriefcase as g, faCalendarRange as h, faList as i, faHandHoldingHeart as j, faPhoneFlip as k, faCaretDown as l, faSearch as m, faRightToBracket as n, faBars as o, faTimes as p };

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

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

package/dist/components/uofg-alert.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { F as FontAwesomeIcon } from './font-awesome-icon.js';
+
+var faCircleExclamation = {
+  prefix: 'far',
+  iconName: 'circle-exclamation',
+  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"]
+};
+
+const uofgAlertCss = ":host{display:block}*{box-sizing:border-box}#uofg-alert{display:flex;flex-direction:column;font-size:2rem}#uofg-alert #uofg-alert-title{display:flex;align-items:center;font-size:2.25rem;padding:2rem;color:white;background-color:#C10631}#uofg-alert #uofg-alert-title>svg{margin-right:1rem;fill:currentColor;height:1.5em}#uofg-alert #uofg-alert-body{display:flex;flex-direction:column;padding:1.5rem 2rem;background-color:white}#uofg-alert #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(*){font-size:1.6rem}#uofg-alert #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() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { id: "uofg-alert" }, h("div", { id: "uofg-alert-title" }, h(FontAwesomeIcon, { icon: faCircleExclamation }), h("slot", { name: "title" })), h("div", { id: "uofg-alert-body" }, h("slot", { name: "subtitle" }), h("slot", { name: "message" })), h("div", { id: "uofg-alert-footer" }, h("slot", { name: "footer" }))));
+  }
+  static get style() { return uofgAlertCss; }
+}, [1, "uofg-alert"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["uofg-alert"];
+  components.forEach(tagName => { switch (tagName) {
+    case "uofg-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, UofgAlert$1);
+      }
+      break;
+  } });
+}
+
+const UofgAlert = UofgAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { UofgAlert, defineCustomElement };

package/dist/components/uofg-back-to-top.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { F as FontAwesomeIcon, f as faChevronUp } from './index2.js';
+import { F as FontAwesomeIcon } from './font-awesome-icon.js';
+import { f as faChevronUp } from './index2.js';
 
 const uofgBackToTopCss = ":host{display:block}:focus-visible{outline:2px solid #ffc72a;outline-offset:0.5rem}#uofg-back-to-top{position:fixed;margin:10px;height:35px;width:35px;right:0;bottom:0;z-index:1000;cursor:pointer;background-color:black;color:white;transition-duration:0.3s;transition-timing-function:ease-in-out;transition-property:opacity, visibility, background-color;opacity:0;visibility:hidden;border-radius:50%;border:1px solid #fff}#uofg-back-to-top:hover{background-color:#d50029}#uofg-back-to-top>svg{width:1em;height:1em;fill:currentColor}#uofg-back-to-top.visible{opacity:1;visibility:visible}";
 

package/dist/components/uofg-footer.js

@@ -1,5 +1,6 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { F as FontAwesomeIcon, a as faUniversalAccess, b as faKey, c as faSitemap, d as faCircleCheck, e as faTrees, g as faBriefcase, h as faCalendarRange, i as faList, j as faHandHoldingHeart, k as faPhoneFlip } from './index2.js';
+import { F as FontAwesomeIcon } from './font-awesome-icon.js';
+import { a as faUniversalAccess, b as faKey, c as faSitemap, d as faCircleCheck, e as faTrees, g as faBriefcase, h as faCalendarRange, i as faList, j as faHandHoldingHeart, k as faPhoneFlip } from './index2.js';
 
 var faSquareTwitter = {
   prefix: 'fab',

package/dist/components/uofg-header.js

@@ -1,5 +1,6 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { F as FontAwesomeIcon, l as faCaretDown, m as faSearch, n as faRightToBracket, o as faBars } from './index2.js';
+import { F as FontAwesomeIcon } from './font-awesome-icon.js';
+import { l as faCaretDown, m as faSearch, n as faRightToBracket, o as faBars } from './index2.js';
 import { d as defineCustomElement$2 } from './uofg-menu2.js';
 
 const PageSpecific = props => {

package/dist/components/uofg-menu2.js

@@ -1,19 +1,9 @@
-import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const WEB_ANIMATIONS_SUPPORTED = 'animate' in HTMLElement.prototype;
-const PREFERS_REDUCED_MOTION = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { W as WEB_ANIMATIONS_SUPPORTED, P as PREFERS_REDUCED_MOTION } from './utils.js';
 
 const DURATION_REGEX = /^(\d*\.?\d+)(s|ms)$/;
 const EASING_FUNCTION_REGEX = /^cubic-bezier\((\s*-?\d*\.?\d+\s*,){3}\s*-?\d*\.?\d+\s*\)$|^steps\(\s*\d+\s*(,\s*(start|end))?\s*\)$/;
-const observer = new MutationObserver(mutations => {
-  for (const mutation of mutations) {
-    mutation.target.dispatchEvent(new CustomEvent('childListChange', { bubbles: false }));
-  }
-});
-const observerConfig = {
-  childList: true,
-};
-const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLElement$1 {
+const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -25,50 +15,31 @@ const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLEle
     this.button = null;
     this.content = null;
     this.contentComputedStyle = null;
+    this.observer = new MutationObserver(this.handleMutation);
     this.isExpanded = false;
     this.autoCollapse = false;
   }
   connectedCallback() {
     // Bind functions so that "this" correctly refers to the component's instance.
-    this.handleChildListChange = this.handleChildListChange.bind(this);
-    this.updateButton = this.updateButton.bind(this);
-    this.updateContent = this.updateContent.bind(this);
-    this.handleButtonClick = this.handleButtonClick.bind(this);
+    this.handleMutation = this.handleMutation.bind(this);
+    this.handleClick = this.handleClick.bind(this);
     this.handleFocusout = this.handleFocusout.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.computedStyle = window.getComputedStyle(this.el);
-    this.isExpanded = false;
-    this.handleChildListChange();
-    observer.observe(this.el, observerConfig);
-  }
-  handleChildListChange() {
-    this.updateButton();
-    this.updateContent();
+    this.handleMutation();
+    this.observer.observe(this.el, { childList: true });
   }
-  handleKeyUp(e) {
-    if (e.key === 'Escape') {
-      this.isExpanded = false;
-      if (e.target !== this.button) {
-        e.stopPropagation();
-        this.isExpanded = false;
-        this.button && this.button.focus();
-      }
-    }
+  disconnectedCallback() {
+    this.observer.disconnect();
   }
-  updateButton() {
-    var _a, _b, _c;
+  handleMutation() {
+    // Update the button element
     const button = this.el.querySelector('[slot="button"]');
-    // Clean up the old button before setting the new one
-    (_a = this.button) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
-    (_b = this.button) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-expanded');
-    (_c = this.button) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
     // Set up the new button
     button === null || button === void 0 ? void 0 : button.setAttribute('aria-expanded', this.isExpanded ? 'true' : 'false');
     button === null || button === void 0 ? void 0 : button.setAttribute('aria-haspopup', 'true');
-    button === null || button === void 0 ? void 0 : button.addEventListener('click', this.handleButtonClick);
     this.button = button;
-  }
-  updateContent() {
+    // Update the content element
     const content = this.el.querySelector('[slot="content"]');
     if (content == null) {
       this.content = null;
@@ -80,8 +51,22 @@ const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLEle
       this.contentComputedStyle = window.getComputedStyle(this.content);
     }
   }
-  handleButtonClick() {
-    this.isExpanded = !this.isExpanded;
+  handleKeyUp(e) {
+    if (e.key === 'Escape') {
+      this.isExpanded = false;
+      if (e.target !== this.button) {
+        e.stopPropagation();
+        this.isExpanded = false;
+        this.button && this.button.focus();
+      }
+    }
+  }
+  handleClick(e) {
+    //Check if the click was on the button or a descendant of the button
+    if (this.button && this.button.contains(e.target)) {
+      this.isExpanded = !this.isExpanded;
+      return;
+    }
   }
   handleFocusout(e) {
     if (this.autoCollapse && !this.el.contains(e.relatedTarget)) {
@@ -207,7 +192,7 @@ const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLEle
     };
   }
   render() {
-    return (h(Host, { tabindex: -1, "data-expanded": this.isExpanded, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp }));
+    return (h(Host, { "data-expanded": this.isExpanded, tabindex: -1, onFocusout: this.handleFocusout, onKeyUp: this.handleKeyUp, onClick: this.handleClick }));
   }
   /**
    * Get the current expanded state of the menu.
@@ -257,7 +242,7 @@ const UofgMenu = /*@__PURE__*/ proxyCustomElement(class UofgMenu extends HTMLEle
     "toggle": [64],
     "collapse": [64],
     "expand": [64]
-  }, [[0, "onChildListChange", "handleChildListChange"]]]);
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

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