@aurodesignsystem/auro-dialog 1.0.6 → 1.0.8

package/demo/api.min.js

@@ -0,0 +1,188 @@
+function initBasicExample() {
+  const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
+  const dialog = document.querySelector('#defaultDialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initAccessibilityExample() {
+  const button = document.querySelector('#openAccessibility');
+  const dialog = document.querySelector('#unformattedMdDialog');
+
+  button.addEventListener('click', () => {
+    if (dialog.hasAttribute('open')) {
+      dialog.removeAttribute('open');
+    } else {
+      dialog.setAttribute('open', true);
+    }
+  });
+}
+
+function initDecoupledExample() {
+  const smLgButtons = [document.querySelector('#openSmLg'), document.querySelector('#closeSmLg')];
+  const smLgDialog = document.querySelector('#smLgDialog');
+
+  const mdLgButtons = [document.querySelector('#openMdLg'), document.querySelector('#closeMdLg')];
+  const mdLgDialog = document.querySelector('#mdLgDialog');
+
+  smLgButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (smLgDialog.hasAttribute('open')) {
+        smLgDialog.removeAttribute('open');
+      } else {
+        smLgDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  mdLgButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (mdLgDialog.hasAttribute('open')) {
+        mdLgDialog.removeAttribute('open');
+      } else {
+        mdLgDialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initEditCloseButtonExample() {
+  const button = document.querySelector('#openEditDialog');
+  const dialog = document.querySelector('#unformattedCustomMdDialog');
+
+  button.addEventListener('click', () => {
+    if (dialog.hasAttribute('open')) {
+      dialog.removeAttribute('open');
+    } else {
+      dialog.setAttribute('open', true);
+    }
+  });
+}
+
+function initModalExample() {
+  const defaultButtons = [document.querySelector('#openDefaultModal'), document.querySelector('#closeDefaultModal')];
+  const defaultDialog = document.querySelector('#defaultModalDialog');
+
+  const mediumButtons = [document.querySelector('#openMediumModal'), document.querySelector('#closeMediumModal')];
+  const mediumDialog = document.querySelector('#mediumModalDialog');
+
+  const smallButtons = [document.querySelector('#openSmallModal'), document.querySelector('#closeSmallModal')];
+  const smallDialog = document.querySelector('#smallModalDialog');
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (defaultDialog.hasAttribute('open')) {
+        defaultDialog.removeAttribute('open');
+      } else {
+        defaultDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (mediumDialog.hasAttribute('open')) {
+        mediumDialog.removeAttribute('open');
+      } else {
+        mediumDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (smallDialog.hasAttribute('open')) {
+        smallDialog.removeAttribute('open');
+      } else {
+        smallDialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initPopoverAndDropdownExample() {
+  const buttons = [document.querySelector('#openPopAndDrop'), document.querySelector('#closePopAndDrop')];
+  const dialog = document.querySelector('#popover-dialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initSizeOptionsExample() {
+  const defaultButtons = [document.querySelector('#openDefaultSize'), document.querySelector('#closeDefaultSize')];
+  const defaultDialog = document.querySelector('#defaultSizeDialog');
+
+  const mediumButtons = [document.querySelector('#openMediumSize'), document.querySelector('#closeMediumSize')];
+  const mediumDialog = document.querySelector('#mediumSizeDialog');
+
+  const smallButtons = [document.querySelector('#openSmallSize'), document.querySelector('#closeSmallSize')];
+  const smallDialog = document.querySelector('#smallSizeDialog');
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (defaultDialog.hasAttribute('open')) {
+        defaultDialog.removeAttribute('open');
+      } else {
+        defaultDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (mediumDialog.hasAttribute('open')) {
+        mediumDialog.removeAttribute('open');
+      } else {
+        mediumDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (smallDialog.hasAttribute('open')) {
+        smallDialog.removeAttribute('open');
+      } else {
+        smallDialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    initBasicExample();
+    initAccessibilityExample();
+    initDecoupledExample();
+    initEditCloseButtonExample();
+    initModalExample();
+    initPopoverAndDropdownExample();
+    initSizeOptionsExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };

package/demo/index.js

@@ -0,0 +1,18 @@
+import { initBasicExample } from "../apiExamples/basic";
+import { initCustomExample } from "../apiExamples/custom";
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    initBasicExample();
+    initCustomExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}

package/demo/index.md

@@ -37,16 +37,15 @@ The `<auro-dialog>` component should be used in situations where users may:
 Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
 
 ```javascript
-function toggleDialog(elem) {
-  let dialog = document.querySelector(elem);
-
-  dialog.hasAttribute('open')
-  ? dialog.removeAttribute("open")
-  : (dialog.removeAttribute("open"),
-    dialog.setAttribute("open", true));
+function toggleDialog(dialogID) {
+  const dialog = document.querySelector(dialogID);
+
+  if (dialog.hasAttribute('open')) {
+    dialog.removeAttribute('open');
+  } else {
+    dialog.setAttribute('open', true);
+  }
 }
-
-// This function can be retrieved from https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/toggleDialog.js
 ```
 
 Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.
@@ -79,7 +78,7 @@ It should be noted that the `footer` slot is reserved for the placement of actio
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
   <div>
-    <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
+    <auro-button id="openBasic">Open default dialog</auro-button>
   </div>
   <auro-dialog id="defaultDialog">
     <span slot="header">Default Dialog</span>
@@ -95,7 +94,7 @@ It should be noted that the `footer` slot is reserved for the placement of actio
       </ul>
     </div>
     <div slot="footer">
-      <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
+      <auro-button secondary id="closeBasic">Close</auro-button>
     </div>
   </auro-dialog>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -107,7 +106,7 @@ It should be noted that the `footer` slot is reserved for the placement of actio
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
+  <auro-button id="openBasic">Open default dialog</auro-button>
 </div>
 <auro-dialog id="defaultDialog">
   <span slot="header">Default Dialog</span>
@@ -123,7 +122,7 @@ It should be noted that the `footer` slot is reserved for the placement of actio
     </ul>
   </div>
   <div slot="footer">
-    <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
+    <auro-button secondary id="closeBasic">Close</auro-button>
   </div>
 </auro-dialog>
 ```
@@ -148,7 +147,7 @@ This will create a new custom element that you can use in your HTML that will fu
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/custom.html -->
   <div>
-    <auro-button onClick="toggleDialog('#customDialog')">Open default dialog</auro-button>
+    <auro-button id="openCustom">Open default dialog</auro-button>
   </div>
   <custom-dialog id="customDialog">
     <span slot="header">Default Dialog</span>
@@ -164,7 +163,7 @@ This will create a new custom element that you can use in your HTML that will fu
       </ul>
     </div>
     <div slot="footer">
-      <auro-button secondary onClick="toggleDialog('#customDialog')">Close</auro-button>
+      <auro-button secondary id="closeCustom">Close</auro-button>
     </div>
   </custom-dialog>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -176,7 +175,7 @@ This will create a new custom element that you can use in your HTML that will fu
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#customDialog')">Open default dialog</auro-button>
+  <auro-button id="openCustom">Open default dialog</auro-button>
 </div>
 <custom-dialog id="customDialog">
   <span slot="header">Default Dialog</span>
@@ -192,7 +191,7 @@ This will create a new custom element that you can use in your HTML that will fu
     </ul>
   </div>
   <div slot="footer">
-    <auro-button secondary onClick="toggleDialog('#customDialog')">Close</auro-button>
+    <auro-button secondary id="closeCustom">Close</auro-button>
   </div>
 </custom-dialog>
 ```

package/demo/index.min.js

@@ -0,0 +1,47 @@
+function initBasicExample() {
+  const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
+  const dialog = document.querySelector('#defaultDialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initCustomExample() {
+  const buttons = [document.querySelector('#openCustom'), document.querySelector('#closeCustom')];
+  const dialog = document.querySelector('#defaultDialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    initBasicExample();
+    initCustomExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };

package/dist/accessibility.js

@@ -0,0 +1,12 @@
+export function initAccessibilityExample() {
+  const button = document.querySelector('#openAccessibility');
+  const dialog = document.querySelector('#unformattedMdDialog');
+
+  button.addEventListener('click', () => {
+    if (dialog.hasAttribute('open')) {
+      dialog.removeAttribute('open');
+    } else {
+      dialog.setAttribute('open', true);
+    }
+  });
+}

package/dist/auro-dialog__bundled.js

@@ -194,13 +194,15 @@ class ComponentBase extends s {
 
     const closeButton = this.shadowRoot.getElementById('dialog-close');
 
-    lastFocusableElement.addEventListener('focusout', () => {
-      if (closeButton !== null) { // eslint-disable-line no-negated-condition
-        closeButton.focus();
-      } else {
-        firstFocusableElement.focus();
-      }
-    });
+    if (lastFocusableElement) {
+      lastFocusableElement.addEventListener('focusout', () => {
+        if (closeButton !== null) { // eslint-disable-line no-negated-condition
+          closeButton.focus();
+        } else {
+          firstFocusableElement.focus();
+        }
+      });
+    }
   }
 
   /**

package/dist/basic.js

@@ -0,0 +1,14 @@
+export function initBasicExample() {
+  const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
+  const dialog = document.querySelector('#defaultDialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}

package/dist/componentBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IAkBE;;;;;;;;;;;;;;;MAeC;IAsID,+CAKC;IAxKC;;OAEG;IACH,YAAsE;IAEtE;;OAEG;IACH,YAAmC;IAEnC,eAAkB;IAClB,qBAAwB;IAoB1B,qBASC;IALC,oBAAsD;IAOxD;;;;OAIG;IACH,2BAHW,IAAI,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CAUhB;IAIC,yBAAwD;IAS1D;;;OAGG;IACH,mBAQC;IAPC,wBAA4C;IAS9C;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,wBAeC;IAED;;;OAGG;IACH,2BAIC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IASD;;;OAGG;IACH,uBASC;IAED,+CAuCC;CACF;2BAzQgC,KAAK"}
+{"version":3,"file":"componentBase.d.ts","sourceRoot":"","sources":["../src/componentBase.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH;IAkBE;;;;;;;;;;;;;;;MAeC;IAwID,+CAKC;IA1KC;;OAEG;IACH,YAAsE;IAEtE;;OAEG;IACH,YAAmC;IAEnC,eAAkB;IAClB,qBAAwB;IAoB1B,qBASC;IALC,oBAAsD;IAOxD;;;;OAIG;IACH,2BAHW,IAAI,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CAUhB;IAIC,yBAAwD;IAS1D;;;OAGG;IACH,mBAQC;IAPC,wBAA4C;IAS9C;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,4BAMC;IAED;;;OAGG;IACH,wBAiBC;IAED;;;OAGG;IACH,2BAIC;IAED;;;OAGG;IACH,+BAEC;IADC,cAAiB;IAGnB;;;;OAIG;IACH,sBAIC;IAED;;;;OAIG;IACH,cAIC;IASD;;;OAGG;IACH,uBASC;IAED,+CAuCC;CACF;2BA3QgC,KAAK"}

package/dist/componentBase.js

@@ -159,13 +159,15 @@ export default class ComponentBase extends LitElement {
 
     const closeButton = this.shadowRoot.getElementById('dialog-close');
 
-    lastFocusableElement.addEventListener('focusout', () => {
-      if (closeButton !== null) { // eslint-disable-line no-negated-condition
-        closeButton.focus();
-      } else {
-        firstFocusableElement.focus();
-      }
-    });
+    if (lastFocusableElement) {
+      lastFocusableElement.addEventListener('focusout', () => {
+        if (closeButton !== null) { // eslint-disable-line no-negated-condition
+          closeButton.focus();
+        } else {
+          firstFocusableElement.focus();
+        }
+      });
+    }
   }
 
   /**

package/dist/custom.js

@@ -0,0 +1,14 @@
+export function initCustomExample() {
+  const buttons = [document.querySelector('#openCustom'), document.querySelector('#closeCustom')];
+  const dialog = document.querySelector('#defaultDialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}

package/dist/decoupled.js

@@ -0,0 +1,27 @@
+export function initDecoupledExample() {
+  const smLgButtons = [document.querySelector('#openSmLg'), document.querySelector('#closeSmLg')];
+  const smLgDialog = document.querySelector('#smLgDialog');
+
+  const mdLgButtons = [document.querySelector('#openMdLg'), document.querySelector('#closeMdLg')];
+  const mdLgDialog = document.querySelector('#mdLgDialog');
+
+  smLgButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (smLgDialog.hasAttribute('open')) {
+        smLgDialog.removeAttribute('open');
+      } else {
+        smLgDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  mdLgButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (mdLgDialog.hasAttribute('open')) {
+        mdLgDialog.removeAttribute('open');
+      } else {
+        mdLgDialog.setAttribute('open', true);
+      }
+    });
+  });
+}

package/dist/editCloseButton.js

@@ -0,0 +1,12 @@
+export function initEditCloseButtonExample() {
+  const button = document.querySelector('#openEditDialog');
+  const dialog = document.querySelector('#unformattedCustomMdDialog');
+
+  button.addEventListener('click', () => {
+    if (dialog.hasAttribute('open')) {
+      dialog.removeAttribute('open');
+    } else {
+      dialog.setAttribute('open', true);
+    }
+  });
+}

package/dist/modal.js

@@ -0,0 +1,40 @@
+export function initModalExample() {
+  const defaultButtons = [document.querySelector('#openDefaultModal'), document.querySelector('#closeDefaultModal')];
+  const defaultDialog = document.querySelector('#defaultModalDialog');
+
+  const mediumButtons = [document.querySelector('#openMediumModal'), document.querySelector('#closeMediumModal')];
+  const mediumDialog = document.querySelector('#mediumModalDialog');
+
+  const smallButtons = [document.querySelector('#openSmallModal'), document.querySelector('#closeSmallModal')];
+  const smallDialog = document.querySelector('#smallModalDialog');
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (defaultDialog.hasAttribute('open')) {
+        defaultDialog.removeAttribute('open');
+      } else {
+        defaultDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (mediumDialog.hasAttribute('open')) {
+        mediumDialog.removeAttribute('open');
+      } else {
+        mediumDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (smallDialog.hasAttribute('open')) {
+        smallDialog.removeAttribute('open');
+      } else {
+        smallDialog.setAttribute('open', true);
+      }
+    });
+  });
+}

package/dist/popoverAndDropdown.js

@@ -0,0 +1,14 @@
+export function initPopoverAndDropdownExample() {
+  const buttons = [document.querySelector('#openPopAndDrop'), document.querySelector('#closePopAndDrop')];
+  const dialog = document.querySelector('#popover-dialog');
+
+  buttons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dialog.hasAttribute('open')) {
+        dialog.removeAttribute('open');
+      } else {
+        dialog.setAttribute('open', true);
+      }
+    });
+  });
+}

package/dist/sizeOptions.js

@@ -0,0 +1,40 @@
+export function initSizeOptionsExample() {
+  const defaultButtons = [document.querySelector('#openDefaultSize'), document.querySelector('#closeDefaultSize')];
+  const defaultDialog = document.querySelector('#defaultSizeDialog');
+
+  const mediumButtons = [document.querySelector('#openMediumSize'), document.querySelector('#closeMediumSize')];
+  const mediumDialog = document.querySelector('#mediumSizeDialog');
+
+  const smallButtons = [document.querySelector('#openSmallSize'), document.querySelector('#closeSmallSize')];
+  const smallDialog = document.querySelector('#smallSizeDialog');
+
+  defaultButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (defaultDialog.hasAttribute('open')) {
+        defaultDialog.removeAttribute('open');
+      } else {
+        defaultDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  mediumButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (mediumDialog.hasAttribute('open')) {
+        mediumDialog.removeAttribute('open');
+      } else {
+        mediumDialog.setAttribute('open', true);
+      }
+    });
+  });
+
+  smallButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      if (smallDialog.hasAttribute('open')) {
+        smallDialog.removeAttribute('open');
+      } else {
+        smallDialog.setAttribute('open', true);
+      }
+    });
+  });
+}

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-dialog",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",
@@ -29,39 +29,39 @@
     "@aurodesignsystem/webcorestylesheets": "^5.0.8"
   },
   "devDependencies": {
-    "@alaskaairux/icons": "^4.36.2",
+    "@alaskaairux/icons": "^4.37.0",
     "@aurodesignsystem/auro-library": "^2.5.1",
     "@aurodesignsystem/design-tokens": "^4.3.0",
     "@aurodesignsystem/eslint-config": "^1.3.0",
     "@aurodesignsystem/webcorestylesheets": "^5.0.8",
-    "@commitlint/cli": "^18.5.0",
-    "@commitlint/config-conventional": "^18.5.0",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^11.0.2",
-    "@web/dev-server": "^0.4.2",
+    "@web/dev-server": "^0.4.3",
     "@web/test-runner": "^0.18.0",
     "autoprefixer": "^10.4.17",
     "compression": "^1.7.4",
     "concat": "^1.0.3",
     "concurrently": "^8.2.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.35.1",
+    "core-js": "^3.36.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-jsdoc": "^48.0.6",
-    "husky": "^9.0.10",
+    "eslint-plugin-jsdoc": "^48.2.0",
+    "husky": "^9.0.11",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
-    "nodemon": "^3.0.3",
+    "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",
     "postcss-discard-comments": "^6.0.1",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^4.9.6",
+    "rollup": "^4.12.0",
     "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.70.0",
+    "sass": "^1.71.1",
     "semantic-release": "^23.0.2",
     "stylelint": "^16.2.1",
     "stylelint-config-idiomatic-order": "^10.0.0",

package/src/componentBase.js

@@ -159,13 +159,15 @@ export default class ComponentBase extends LitElement {
 
     const closeButton = this.shadowRoot.getElementById('dialog-close');
 
-    lastFocusableElement.addEventListener('focusout', () => {
-      if (closeButton !== null) { // eslint-disable-line no-negated-condition
-        closeButton.focus();
-      } else {
-        firstFocusableElement.focus();
-      }
-    });
+    if (lastFocusableElement) {
+      lastFocusableElement.addEventListener('focusout', () => {
+        if (closeButton !== null) { // eslint-disable-line no-negated-condition
+          closeButton.focus();
+        } else {
+          firstFocusableElement.focus();
+        }
+      });
+    }
   }
 
   /**