@aurodesignsystem/auro-dialog 1.0.7 → 1.0.9

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

@@ -37,11 +37,11 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e
  * SPDX-License-Identifier: BSD-3-Clause
  */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return w}});
 
-var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl:0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0);background:rgba(0, 0, 0, 0.2)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:block;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header svg{fill:var(--ds-color-text-secondary-default, #626b79)}.dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}.dialog-header--action:hover{cursor:pointer}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;
+var styleCss = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.util_inlinePaddingNone--left{padding-left:0}.util_inlinePaddingNone--right{padding-right:0}.util_inlineMarginNone--left{margin-left:0}.util_inlineMarginNone--right{margin-right:0}.util_inlinePadding25--left{padding-left:.125rem}.util_inlinePadding25--right{padding-right:.125rem}.util_inlineMargin25--left{margin-left:.125rem}.util_inlineMargin25--right{margin-right:.125rem}.util_inlinePadding50--left{padding-left:.25rem}.util_inlinePadding50--right{padding-right:.25rem}.util_inlineMargin50--left{margin-left:.25rem}.util_inlineMargin50--right{margin-right:.25rem}.util_inlinePadding100--left{padding-left:.5rem}.util_inlinePadding100--right{padding-right:.5rem}.util_inlineMargin100--left{margin-left:.5rem}.util_inlineMargin100--right{margin-right:.5rem}.util_inlinePadding200--left{padding-left:1rem}.util_inlinePadding200--right{padding-right:1rem}.util_inlineMargin200--left{margin-left:1rem}.util_inlineMargin200--right{margin-right:1rem}.util_inlinePadding300--left{padding-left:1.5rem}.util_inlinePadding300--right{padding-right:1.5rem}.util_inlineMargin300--left{margin-left:1.5rem}.util_inlineMargin300--right{margin-right:1.5rem}.util_inlinePadding400--left{padding-left:2rem}.util_inlinePadding400--right{padding-right:2rem}.util_inlineMargin400--left{margin-left:2rem}.util_inlineMargin400--right{margin-right:2rem}.util_inlinePadding500--left{padding-left:2.5rem}.util_inlinePadding500--right{padding-right:2.5rem}.util_inlineMargin500--left{margin-left:2.5rem}.util_inlineMargin500--right{margin-right:2.5rem}.util_inlinePadding600--left{padding-left:3rem}.util_inlinePadding600--right{padding-right:3rem}.util_inlineMargin600--left{margin-left:3rem}.util_inlineMargin600--right{margin-right:3rem}.util_inlinePadding700--left{padding-left:3.5rem}.util_inlinePadding700--right{padding-right:3.5rem}.util_inlineMargin700--left{margin-left:3.5rem}.util_inlineMargin700--right{margin-right:3.5rem}.util_inlinePadding800--left{padding-left:4rem}.util_inlinePadding800--right{padding-right:4rem}.util_inlineMargin800--left{margin-left:4rem}.util_inlineMargin800--right{margin-right:4rem}.util_inlinePadding900--left{padding-left:4.5rem}.util_inlinePadding900--right{padding-right:4.5rem}.util_inlineMargin900--left{margin-left:4.5rem}.util_inlineMargin900--right{margin-right:4.5rem}.util_inlinePadding1000--left{padding-left:5rem}.util_inlinePadding1000--right{padding-right:5rem}.util_inlineMargin1000--left{margin-left:5rem}.util_inlineMargin1000--right{margin-right:5rem}.util_stackPaddingNone--top{padding-top:0}.util_stackPaddingNone--bottom{padding-bottom:0}.util_stackMarginNone--top{margin-top:0}.util_stackMarginNone--bottom{margin-bottom:0}.util_stackPadding25--top{padding-top:.125rem}.util_stackPadding25--bottom{padding-bottom:.125rem}.util_stackMargin25--top{margin-top:.125rem}.util_stackMargin25--bottom{margin-bottom:.125rem}.util_stackPadding50--top{padding-top:.25rem}.util_stackPadding50--bottom{padding-bottom:.25rem}.util_stackMargin50--top{margin-top:.25rem}.util_stackMargin50--bottom{margin-bottom:.25rem}.util_stackPadding100--top{padding-top:.5rem}.util_stackPadding100--bottom{padding-bottom:.5rem}.util_stackMargin100--top{margin-top:.5rem}.util_stackMargin100--bottom{margin-bottom:.5rem}.util_stackPadding200--top{padding-top:1rem}.util_stackPadding200--bottom{padding-bottom:1rem}.util_stackMargin200--top{margin-top:1rem}.util_stackMargin200--bottom{margin-bottom:1rem}.util_stackPadding300--top{padding-top:1.5rem}.util_stackPadding300--bottom{padding-bottom:1.5rem}.util_stackMargin300--top{margin-top:1.5rem}.util_stackMargin300--bottom{margin-bottom:1.5rem}.util_stackPadding400--top{padding-top:2rem}.util_stackPadding400--bottom{padding-bottom:2rem}.util_stackMargin400--top{margin-top:2rem}.util_stackMargin400--bottom{margin-bottom:2rem}.util_stackPadding500--top{padding-top:2.5rem}.util_stackPadding500--bottom{padding-bottom:2.5rem}.util_stackMargin500--top{margin-top:2.5rem}.util_stackMargin500--bottom{margin-bottom:2.5rem}.util_stackPadding600--top{padding-top:3rem}.util_stackPadding600--bottom{padding-bottom:3rem}.util_stackMargin600--top{margin-top:3rem}.util_stackMargin600--bottom{margin-bottom:3rem}.util_stackPadding700--top{padding-top:3.5rem}.util_stackPadding700--bottom{padding-bottom:3.5rem}.util_stackMargin700--top{margin-top:3.5rem}.util_stackMargin700--bottom{margin-bottom:3.5rem}.util_stackPadding800--top{padding-top:4rem}.util_stackPadding800--bottom{padding-bottom:4rem}.util_stackMargin800--top{margin-top:4rem}.util_stackMargin800--bottom{margin-bottom:4rem}.util_stackPadding900--top{padding-top:4.5rem}.util_stackPadding900--bottom{padding-bottom:4.5rem}.util_stackMargin900--top{margin-top:4.5rem}.util_stackMargin900--bottom{margin-bottom:4.5rem}.util_stackPadding1000--top{padding-top:5rem}.util_stackPadding1000--bottom{padding-bottom:5rem}.util_stackMargin1000--top{margin-top:5rem}.util_stackMargin1000--bottom{margin-bottom:5rem}:host{--insetPaddingXl:0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}.dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0);background:rgba(0, 0, 0, 0.2)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}.dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);transition:all .3s ease-in-out}@media screen and (min-width: 768px){.dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}.dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){.dialog{max-width:986px}}.dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}.dialog-header svg{fill:var(--ds-color-text-secondary-default, #626b79)}.dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}.dialog-header--action:hover{cursor:pointer}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}:host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}`;
 
 var styleUnformattedCss = i$3`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;
 
-var closeIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"x-lg","category":"interface","deprecated":false,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\"><title/><path d=\"m5.397 5.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l5.47-5.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l5.47 5.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-5.47 5.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-5.47-5.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
+var closeIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"x-lg","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\"><title/><path d=\"m5.397 5.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l5.47-5.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l5.47 5.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-5.47 5.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-5.47-5.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
 
 // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -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);
+      }
+    });
+  });
+}