@aurodesignsystem/auro-dialog 1.0.7 → 1.0.8

package/demo/api.min.js

@@ -1,25 +1,188 @@
-function toggleDialog(dialogID) {
-  const dialog = document.querySelector(dialogID);
+function initBasicExample() {
+  const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
+  const dialog = document.querySelector('#defaultDialog');
 
-  if (dialog.hasAttribute('open')) {
-    dialog.removeAttribute('open');
-  } else {
-    dialog.setAttribute('open', true);
-  }
+  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 initDialogApiExamples(initCount) {
+function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    toggleDialog();
-  } catch (error) {
+    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(() => {
-        initDialogApiExamples(initCount + 1);
+        initExamples(initCount + 1);
       }, 100);
     }
   }
 }
 
+export { initExamples };

package/demo/index.js

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

package/demo/index.md

@@ -78,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>
@@ -94,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 -->
@@ -106,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>
@@ -122,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>
 ```
@@ -147,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>
@@ -163,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 -->
@@ -175,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>
@@ -191,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

@@ -1,25 +1,47 @@
-function toggleDialog(dialogID) {
-  const dialog = document.querySelector(dialogID);
+function initBasicExample() {
+  const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
+  const dialog = document.querySelector('#defaultDialog');
 
-  if (dialog.hasAttribute('open')) {
-    dialog.removeAttribute('open');
-  } else {
-    dialog.setAttribute('open', true);
-  }
+  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 initDialogIndexExamples(initCount) {
+function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    toggleDialog();
-  } catch (error) {
+    initBasicExample();
+    initCustomExample();
+  } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
-        initDialogIndexExamples(initCount + 1);
+        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.7",
+  "version": "1.0.8",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@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",
@@ -50,18 +50,18 @@
     "copyfiles": "^2.4.1",
     "core-js": "^3.36.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-jsdoc": "^48.1.0",
+    "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.12.0",
     "rollup-plugin-serve": "^1.1.1",
-    "sass": "^1.71.0",
+    "sass": "^1.71.1",
     "semantic-release": "^23.0.2",
     "stylelint": "^16.2.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
@@ -134,12 +134,11 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler build:api build:docs postinstall build:demoScripts types",
+    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler build:api build:docs postinstall types",
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/auro-dialog.js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node scripts/generateDocs.mjs",
-    "build:demoScripts": "node scripts/prepExampleFiles.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --no-source-map src:src",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",

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();
+        }
+      });
+    }
   }
 
   /**