@aurodesignsystem/auro-dialog 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Semantic Release Automated Changelog
 
+# [2.2.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v2.1.0...v2.2.0) (2024-11-01)
+
+
+### Features
+
+* apply latest token ds-auro-icon-size [#28](https://github.com/AlaskaAirlines/auro-dialog/issues/28) ([a0f0f45](https://github.com/AlaskaAirlines/auro-dialog/commit/a0f0f451866f435e12e769dafdadffe056927973))
+* update auro-icon package [#28](https://github.com/AlaskaAirlines/auro-dialog/issues/28) ([7eb9665](https://github.com/AlaskaAirlines/auro-dialog/commit/7eb96656f66fa619f0a0d38ef4d126c4e7f68d7d))
+
+
+### Performance Improvements
+
+* update dependencies ([af459cf](https://github.com/AlaskaAirlines/auro-dialog/commit/af459cfd5db990bb930df17facbad18bd24ae4fd))
+
+# [2.1.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v2.0.1...v2.1.0) (2024-10-25)
+
+
+### Features
+
+* **api:** add register static method [#26](https://github.com/AlaskaAirlines/auro-dialog/issues/26) ([a5882af](https://github.com/AlaskaAirlines/auro-dialog/commit/a5882af95970c0973bd97eed2a86c653948c8ef3))
+
+
+### Performance Improvements
+
+* update dependency versions ([ac77559](https://github.com/AlaskaAirlines/auro-dialog/commit/ac775591e2aa2bbd07a06e90434410f4398684ae))
+
 ## [2.0.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v2.0.0...v2.0.1) (2024-10-08)
 
 

package/demo/api.js

@@ -5,6 +5,9 @@ import { initEditCloseButtonExample } from "../apiExamples/editCloseButton";
 import { initModalExample } from "../apiExamples/modal";
 import { initPopoverAndDropdownExample } from "../apiExamples/popoverAndDropdown";
 import { initSizeOptionsExample } from "../apiExamples/sizeOptions";
+import { AuroDialog } from '../src/auro-dialog.js';
+
+AuroDialog.register();
 
 export function initExamples(initCount) {
   initCount = initCount || 0;

package/demo/api.min.js

@@ -1,3 +1,11 @@
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { css, LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+
 function initBasicExample() {
   const buttons = [document.querySelector('#openBasic'), document.querySelector('#closeBasic')];
   const dialog = document.querySelector('#defaultDialog');
@@ -164,6 +172,336 @@ function initSizeOptionsExample() {
   });
 }
 
+var styleCss = css`*,*: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)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.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)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0)}.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;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)}.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--action{margin:0;padding:0}.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([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 = css`[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 colorCss = css`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width: 768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}`;
+
+var tokensCss = css`:host{--ds-auro-dialog-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, rgba(0, 0, 0, 0.5));--ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+
+var buttonVersion = '8.1.0';
+
+var iconVersion = '6.0.1';
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+const ESCAPE_KEYCODE = 27,
+  FOCUS_TIMEOUT = 50;
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-dialog appear above the page and require the user's attention.
+ *
+ * @attr {Boolean} modal - Modal dialog restricts the user to take an action (no default close actions)
+ * @attr {Boolean} unformatted - Unformatted dialog window, edge-to-edge fill for content
+ * @attr {Boolean} sm - Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
+ * @attr {Boolean} md - Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
+ * @attr {Boolean} onDark - Sets close icon to white for dark backgrounds
+ * @attr {Boolean} open - Sets state of dialog to open
+ * @prop {HTMLElement} triggerElement - The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
+ * @slot header - Text to display as the header of the modal
+ * @slot content - Injects content into the body of the modal
+ * @slot footer - Used for action options, e.g. buttons
+ * @function toggleViewable - toggles the 'open' property on the element
+ * @event toggle - Event fires when the element is closed
+ * @csspart close-button - adjust position of the close X icon in the dialog window
+ * @csspart dialog-overlay - apply CSS on the overlay of the dialog
+ * @csspart dialog - apply CSS to the entire dialog
+ * @csspart dialog-header - apply CSS to the header of the dialog
+ * @csspart dialog-content - apply CSS to the content of the dialog
+ * @csspart dialog-footer - apply CSS to the footer of the dialog
+ */
+
+class ComponentBase extends LitElement {
+  constructor() {
+    super();
+
+    this.modal = false;
+    this.unformatted = false;
+
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  static get properties() {
+    return {
+      modal: { type: Boolean },
+      unformatted: {
+        type: Boolean,
+        reflect: true
+      },
+      open: {
+        type: Boolean,
+        reflect: true
+      },
+      triggerElement: {
+        attribute: false
+      }
+    };
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-dialog');
+
+    const slot = this.shadowRoot.querySelector("#footer"),
+      slotWrapper = this.shadowRoot.querySelector("#footerWrapper");
+
+    this.dialog = this.shadowRoot.getElementById('dialog');
+
+    if (!this.unformatted && slot.assignedNodes().length === 0) {
+      slotWrapper.classList.remove("dialog-footer");
+    }
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.openDialog();
+      } else {
+        this.closeDialog();
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.keydownEventHandler = this.handleKeydown.bind(this);
+    window.addEventListener('keydown', this.keydownEventHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('keydown', this.keydownEventHandler);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  openDialog() {
+    this.defaultTrigger = document.activeElement;
+
+    setTimeout(() => {
+      this.focus();
+
+      this.handleFocusLoss();
+    }, FOCUS_TIMEOUT);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  closeDialog() {
+    this.dispatchToggleEvent();
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  dispatchToggleEvent() {
+    // replace with Event constructor once IE support dropped
+    const toggleEvent = document.createEvent("HTMLEvents");
+
+    toggleEvent.initEvent("toggle", true, false);
+    this.dispatchEvent(toggleEvent);
+  }
+
+  /**
+   * @private
+   * @returns {void} Determines if dropdown bib should be closed on focus change.
+   */
+  handleFocusLoss() {
+    const focusable = [...this.querySelectorAll('button, auro-button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
+
+    const firstFocusableElement = focusable[0];
+    const lastFocusableElement = focusable[focusable.length - 1];
+
+    const closeButton = this.shadowRoot.getElementById('dialog-close');
+
+    if (lastFocusableElement) {
+      lastFocusableElement.addEventListener('focusout', () => {
+        if (closeButton !== null) {
+          closeButton.focus();
+        } else {
+          firstFocusableElement.focus();
+        }
+      });
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleOverlayClick() {
+    if (this.open && !this.modal) {
+      this.handleCloseButtonClick();
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleCloseButtonClick() {
+    this.open = false;
+  }
+
+  /**
+   * @private
+   * @param {KeyboardEvent} event - The keyboard event containing the key and keyCode.
+   * @returns {void}
+   */
+  handleKeydown({ key, keyCode }) {
+    if (this.open && !this.modal && (key === 'Escape' || keyCode === ESCAPE_KEYCODE)) {
+      this.open = false;
+    }
+  }
+
+  /**
+   * Focus the dialog.
+   * @private
+   * @returns {void}
+   */
+  focus() {
+    if (this.open) {
+      this.dialog.focus();
+    }
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      styleUnformattedCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  /**
+   * @private
+   * @returns {TemplateResult} - The close button template.
+   */
+  getCloseButton() {
+    return this.modal
+      ? html``
+      : html`
+        <${this.buttonTag} variant="flat" ?onDark=${this.hasAttribute('onDark')} class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
+          <${this.iconTag} customColor category="interface" name="x-lg"></${this.iconTag}>
+          <span class="util_displayHiddenVisually">Close</span>
+        </${this.buttonTag}>
+      `;
+  }
+
+  render() {
+    const classes = {
+        'dialogOverlay': true,
+        'dialogOverlay--modal': this.modal && this.open,
+        'dialogOverlay--open': this.open,
+        'util_displayHidden': !this.open
+      },
+
+      contentClasses = {
+        'dialog': true,
+        'dialog--open': this.open
+      };
+
+    return html`
+      <div class="${classMap(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
+
+      <div role="dialog" id="dialog" class="${classMap(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
+        ${this.unformatted
+        ? html`
+          <slot name="content"></slot>
+          ${this.getCloseButton()}
+        `
+        : html`
+          <div class="dialog-header" part="dialog-header">
+            <h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
+              <slot name="header">Default header ...</slot>
+            </h1>
+            ${this.getCloseButton()}
+          </div>
+          <div class="dialog-content" part="dialog-content">
+            <slot name="content"></slot>
+          </div>
+          <div class="dialog-footer" id="footerWrapper" part="dialog-footer">
+            <slot name="footer" id="footer"></slot>
+          </div>
+        `
+      }
+      </div>
+    `;
+  }
+}
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// build the component class
+class AuroDialog extends ComponentBase {
+  // constructor() {
+  //   super();
+  // }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      // use custom accessors on base class
+      open: {
+        ...super.properties.open,
+        noAccessor: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [super.styles];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-dialog"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroDialog.register("custom-dialog") // this will register this element to <custom-dialog/>
+   *
+   */
+  static register(name = "auro-dialog") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
+  }
+}
+
+AuroDialog.register();
+
 function initExamples(initCount) {
   initCount = initCount || 0;
 

package/demo/index.js

@@ -1,6 +1,11 @@
 import { initBasicExample } from "../apiExamples/basic";
 import { initCustomExample } from "../apiExamples/custom";
 
+import { AuroDialog } from '../src/auro-dialog.js';
+
+AuroDialog.register();
+AuroDialog.register('custom-dialog');
+
 export function initExamples(initCount) {
   initCount = initCount || 0;
 

package/demo/index.md

@@ -132,15 +132,14 @@ Having a closing statement about your example helps to really complete the thoug
 
 ## Recommended Use and Version Control
 
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-dialog` custom element is defined automatically.
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-dialog` custom element is defined automatically.
 
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroDialog.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroDialog } from './src/auro-dialog.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-dialog', AuroDialog);
+AuroDialog.register('custom-dialog');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-dialog` element.