@aurodesignsystem/auro-dialog 1.0.7 → 1.0.9

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Semantic Release Automated Changelog
 
+## [1.0.9](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.8...v1.0.9) (2024-04-05)
+
+
+### Bug Fixes
+
+* **scroll:** make dialog content scroll [#15](https://github.com/AlaskaAirlines/auro-dialog/issues/15) ([4f69654](https://github.com/AlaskaAirlines/auro-dialog/commit/4f696542e23d345fe5f1f26215b18e519609e6b8))
+
+## [1.0.8](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.7...v1.0.8) (2024-02-23)
+
+
+### Bug Fixes
+
+* **unformatted:** fix error from unformatted dialog opening ([7371148](https://github.com/AlaskaAirlines/auro-dialog/commit/73711488f5ca69b78dadc89552af89bac88573c2))
+
+
+### Performance Improvements
+
+* **deps:** update deps ([791254c](https://github.com/AlaskaAirlines/auro-dialog/commit/791254c25a0061b8669976754115819f3edb9e49))
+* **min:** update min file system for docsite ([f86089a](https://github.com/AlaskaAirlines/auro-dialog/commit/f86089a8b02bbb1c1aa416e315f6b9fb9a831369))
+
 ## [1.0.7](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.6...v1.0.7) (2024-02-21)
 
 

package/README.md

@@ -90,7 +90,7 @@ import "@aurodesignsystem/auro-dialog";
 
 ```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>
@@ -106,7 +106,7 @@ import "@aurodesignsystem/auro-dialog";
     </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>
 ```
@@ -128,7 +128,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.3.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.8/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@1.0.7/dist/auro-dialog__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@1.0.9/dist/auro-dialog__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -152,7 +152,7 @@ The `<auro-dialog>` component should be used in situations where users may:
 
 ```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>
@@ -168,7 +168,7 @@ The `<auro-dialog>` component should be used in situations where users may:
     </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>
 ```

package/apiExamples/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/apiExamples/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/apiExamples/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/apiExamples/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/apiExamples/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/apiExamples/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/apiExamples/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/apiExamples/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/demo/api.js

@@ -1,15 +1,27 @@
-import { toggleDialog } from "../apiExamples/toggleDialog";
+import { initBasicExample } from "../apiExamples/basic";
+import { initAccessibilityExample } from "../apiExamples/accessibility";
+import { initDecoupledExample } from "../apiExamples/decoupled";
+import { initEditCloseButtonExample } from "../apiExamples/editCloseButton";
+import { initModalExample } from "../apiExamples/modal";
+import { initPopoverAndDropdownExample } from "../apiExamples/popoverAndDropdown";
+import { initSizeOptionsExample } from "../apiExamples/sizeOptions";
 
-export function initDialogApiExamples(initCount) {
+export 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);
     }
   }

package/demo/api.md

@@ -54,7 +54,7 @@
   <!-- 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>
@@ -70,7 +70,7 @@
       </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 -->
@@ -82,7 +82,7 @@
 
 ```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>
@@ -98,7 +98,7 @@
     </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>
 ```
@@ -115,11 +115,11 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/sizeOptions.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/sizeOptions.html -->
   <div>
-    <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
-    <auro-button onClick="toggleDialog('#mediumDialog')">Open medium dialog</auro-button>
-    <auro-button onClick="toggleDialog('#smallDialog')">Open small dialog</auro-button>
+    <auro-button id="openDefaultSize">Open default dialog</auro-button>
+    <auro-button id="openMediumSize">Open medium dialog</auro-button>
+    <auro-button id="openSmallSize">Open small dialog</auro-button>
   </div>
-  <auro-dialog id="defaultDialog">
+  <auro-dialog id="defaultSizeDialog">
     <span slot="header">Default Dialog</span>
     <div slot="content">
       <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -133,10 +133,10 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
       </ul>
     </div>
     <div slot="footer">
-      <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
+      <auro-button secondary id="closeDefaultSize">Close</auro-button>
     </div>
   </auro-dialog>
-  <auro-dialog id="mediumDialog" md>
+  <auro-dialog id="mediumSizeDialog" md>
     <span slot="header">Medium Dialog</span>
     <div slot="content">
       <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -150,10 +150,10 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
       </ul>
     </div>
     <div slot="footer">
-      <auro-button secondary onClick="toggleDialog('#mediumDialog')">Close</auro-button>
+      <auro-button secondary id="closeMediumSize">Close</auro-button>
     </div>
   </auro-dialog>
-  <auro-dialog id="smallDialog" sm>
+  <auro-dialog id="smallSizeDialog" sm>
     <span slot="header">Small Dialog</span>
     <div slot="content">
       <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -167,7 +167,7 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
       </ul>
     </div>
     <div slot="footer">
-      <auro-button secondary onClick="toggleDialog('#smallDialog')">Close</auro-button>
+      <auro-button secondary id="closeSmallSize">Close</auro-button>
     </div>
   </auro-dialog>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -179,11 +179,11 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#defaultDialog')">Open default dialog</auro-button>
-  <auro-button onClick="toggleDialog('#mediumDialog')">Open medium dialog</auro-button>
-  <auro-button onClick="toggleDialog('#smallDialog')">Open small dialog</auro-button>
+  <auro-button id="openDefaultSize">Open default dialog</auro-button>
+  <auro-button id="openMediumSize">Open medium dialog</auro-button>
+  <auro-button id="openSmallSize">Open small dialog</auro-button>
 </div>
-<auro-dialog id="defaultDialog">
+<auro-dialog id="defaultSizeDialog">
   <span slot="header">Default Dialog</span>
   <div slot="content">
     <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -197,10 +197,10 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
     </ul>
   </div>
   <div slot="footer">
-    <auro-button secondary onClick="toggleDialog('#defaultDialog')">Close</auro-button>
+    <auro-button secondary id="closeDefaultSize">Close</auro-button>
   </div>
 </auro-dialog>
-<auro-dialog id="mediumDialog" md>
+<auro-dialog id="mediumSizeDialog" md>
   <span slot="header">Medium Dialog</span>
   <div slot="content">
     <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -214,10 +214,10 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
     </ul>
   </div>
   <div slot="footer">
-    <auro-button secondary onClick="toggleDialog('#mediumDialog')">Close</auro-button>
+    <auro-button secondary id="closeMediumSize">Close</auro-button>
   </div>
 </auro-dialog>
-<auro-dialog id="smallDialog" sm>
+<auro-dialog id="smallSizeDialog" sm>
   <span slot="header">Small Dialog</span>
   <div slot="content">
     <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -231,7 +231,7 @@ The size attribute effects the `width` of the desktop dialog. Its `height` is di
     </ul>
   </div>
   <div slot="footer">
-    <auro-button secondary onClick="toggleDialog('#smallDialog')">Close</auro-button>
+    <auro-button secondary id="closeSmallSize">Close</auro-button>
   </div>
 </auro-dialog>
 ```
@@ -248,9 +248,9 @@ When using this state, the modal dialog must include a button action to dismiss
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/modal.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/modal.html -->
   <div>
-    <auro-button onClick="toggleDialog('#defaultModalDialog')">Open default modal</auro-button>
-    <auro-button onClick="toggleDialog('#mediumModalDialog')">Open medium modal</auro-button>
-    <auro-button onClick="toggleDialog('#smallModalDialog')">Open small modal</auro-button>
+    <auro-button id="openDefaultModal">Open default modal</auro-button>
+    <auro-button id="openMediumModal">Open medium modal</auro-button>
+    <auro-button id="openSmallModal">Open small modal</auro-button>
   </div>
   <auro-dialog id="defaultModalDialog" modal>
     <span slot="header">Default Modal Dialog</span>
@@ -266,7 +266,7 @@ When using this state, the modal dialog must include a button action to dismiss
       </ul>
     </div>
     <div slot="footer">
-      <auro-button onClick="toggleDialog('#defaultModalDialog')">I understand
+      <auro-button id="closeDefaultModal">I understand
         <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
       </auro-button>
     </div>
@@ -285,7 +285,7 @@ When using this state, the modal dialog must include a button action to dismiss
       </ul>
     </div>
     <div slot="footer">
-      <auro-button onClick="toggleDialog('#mediumModalDialog')">I understand
+      <auro-button id="closeMediumModal">I understand
         <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
       </auro-button>
     </div>
@@ -304,7 +304,7 @@ When using this state, the modal dialog must include a button action to dismiss
       </ul>
     </div>
     <div slot="footer">
-      <auro-button onClick="toggleDialog('#smallModalDialog')">I understand
+      <auro-button id="closeSmallModal">I understand
         <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
       </auro-button>
     </div>
@@ -318,9 +318,9 @@ When using this state, the modal dialog must include a button action to dismiss
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#defaultModalDialog')">Open default modal</auro-button>
-  <auro-button onClick="toggleDialog('#mediumModalDialog')">Open medium modal</auro-button>
-  <auro-button onClick="toggleDialog('#smallModalDialog')">Open small modal</auro-button>
+  <auro-button id="openDefaultModal">Open default modal</auro-button>
+  <auro-button id="openMediumModal">Open medium modal</auro-button>
+  <auro-button id="openSmallModal">Open small modal</auro-button>
 </div>
 <auro-dialog id="defaultModalDialog" modal>
   <span slot="header">Default Modal Dialog</span>
@@ -336,7 +336,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </ul>
   </div>
   <div slot="footer">
-    <auro-button onClick="toggleDialog('#defaultModalDialog')">I understand
+    <auro-button id="closeDefaultModal">I understand
       <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
     </auro-button>
   </div>
@@ -355,7 +355,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </ul>
   </div>
   <div slot="footer">
-    <auro-button onClick="toggleDialog('#mediumModalDialog')">I understand
+    <auro-button id="closeMediumModal">I understand
       <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
     </auro-button>
   </div>
@@ -374,7 +374,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </ul>
   </div>
   <div slot="footer">
-    <auro-button onClick="toggleDialog('#smallModalDialog')">I understand
+    <auro-button id="closeSmallModal">I understand
       <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
     </auro-button>
   </div>
@@ -393,8 +393,8 @@ The use of these combinations will set the first value to the dialog for a deskt
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/decoupled.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/decoupled.html -->
   <div>
-    <auro-button onClick="toggleDialog('#smLgDialog')">Open [sm lg] dialog</auro-button>
-    <auro-button onClick="toggleDialog('#smMdDialog')">Open [md lg] dialog</auro-button>
+    <auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
+    <auro-button id="openMdLg">Open [md lg] dialog</auro-button>
   </div>
   <auro-dialog id="smLgDialog" sm lg>
     <span slot="header">Small Modal Dialog</span>
@@ -410,13 +410,13 @@ The use of these combinations will set the first value to the dialog for a deskt
       </ul>
     </div>
     <div slot="footer">
-      <auro-button onClick="toggleDialog('#smLgDialog')">
+      <auro-button id="closeSmLg">
         I understand
         <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
-  <auro-dialog id="smMdDialog" md lg>
+  <auro-dialog id="mdLgDialog" md lg>
     <span slot="header">Medium Modal Dialog</span>
     <div slot="content">
       <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -430,7 +430,7 @@ The use of these combinations will set the first value to the dialog for a deskt
       </ul>
     </div>
     <div slot="footer">
-      <auro-button onClick="toggleDialog('#smMdDialog')">
+      <auro-button id="closeMdLg">
         I understand
         <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
       </auro-button>
@@ -445,8 +445,8 @@ The use of these combinations will set the first value to the dialog for a deskt
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#smLgDialog')">Open [sm lg] dialog</auro-button>
-  <auro-button onClick="toggleDialog('#smMdDialog')">Open [md lg] dialog</auro-button>
+  <auro-button id="openSmLg">Open [sm lg] dialog</auro-button>
+  <auro-button id="openMdLg">Open [md lg] dialog</auro-button>
 </div>
 <auro-dialog id="smLgDialog" sm lg>
   <span slot="header">Small Modal Dialog</span>
@@ -462,13 +462,13 @@ The use of these combinations will set the first value to the dialog for a deskt
     </ul>
   </div>
   <div slot="footer">
-    <auro-button onClick="toggleDialog('#smLgDialog')">
+    <auro-button id="closeSmLg">
       I understand
       <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
-<auro-dialog id="smMdDialog" md lg>
+<auro-dialog id="mdLgDialog" md lg>
   <span slot="header">Medium Modal Dialog</span>
   <div slot="content">
     <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
@@ -482,7 +482,7 @@ The use of these combinations will set the first value to the dialog for a deskt
     </ul>
   </div>
   <div slot="footer">
-    <auro-button onClick="toggleDialog('#smMdDialog')">
+    <auro-button id="closeMdLg">
       I understand
       <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
     </auro-button>
@@ -500,7 +500,7 @@ This is a use case where there is a popover and combobox component inside the di
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/popoverAndDropdown.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/popoverAndDropdown.html -->
   <div>
-    <auro-button onClick="toggleDialog('#popover-dialog')">Open dialog with popover</auro-button>
+    <auro-button id="openPopAndDrop">Open dialog with popover</auro-button>
   </div>
   <auro-dialog id="popover-dialog" sm lg>
     <span slot="header">Small Modal Dialog</span>
@@ -538,7 +538,7 @@ This is a use case where there is a popover and combobox component inside the di
       </auro-combobox>
     </div>
     <div slot="footer">
-      <auro-button onClick="toggleDialog('#popover-dialog')">
+      <auro-button id="closePopAndDrop">
         I understand
         <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
       </auro-button>
@@ -553,7 +553,7 @@ This is a use case where there is a popover and combobox component inside the di
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#popover-dialog')">Open dialog with popover</auro-button>
+  <auro-button id="openPopAndDrop">Open dialog with popover</auro-button>
 </div>
 <auro-dialog id="popover-dialog" sm lg>
   <span slot="header">Small Modal Dialog</span>
@@ -591,7 +591,7 @@ This is a use case where there is a popover and combobox component inside the di
     </auro-combobox>
   </div>
   <div slot="footer">
-    <auro-button onClick="toggleDialog('#popover-dialog')">
+    <auro-button id="closePopAndDrop">
       I understand
       <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
     </auro-button>
@@ -627,7 +627,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accessibility.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/accessibility.html -->
   <div>
-    <auro-button onClick="toggleDialog('#unformattedMdDialog')">Unformatted Medium Dialog</auro-button>
+    <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
   </div>
   <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
     <span slot="content">
@@ -647,7 +647,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#unformattedMdDialog')">Unformatted Medium Dialog</auro-button>
+  <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
 </div>
 <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
   <span slot="content">
@@ -670,7 +670,7 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/editCloseButton.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/editCloseButton.html -->
   <div>
-    <auro-button onClick="toggleDialog('#unformattedCustomMdDialog')">Unformatted w/custom close button</auro-button>
+    <auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
   </div>
   <style>
     .example::part(close-button) {
@@ -697,7 +697,7 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 
 ```html
 <div>
-  <auro-button onClick="toggleDialog('#unformattedCustomMdDialog')">Unformatted w/custom close button</auro-button>
+  <auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
 </div>
 <style>
   .example::part(close-button) {