@aurodesignsystem-dev/auro-dialog 0.0.0-pr97.1 → 0.0.0-pr97.3

package/demo/api.js

@@ -1,11 +1,11 @@
 import { initAccessibilityExample } from "../apiExamples/accessibility";
 import { initBasicExample } from "../apiExamples/basic";
 import { initDecoupledExample } from "../apiExamples/decoupled";
-import { initEditCloseButtonExample } from "../apiExamples/part_close-button";
+import { initEditCloseButtonExample } from "../apiExamples/close-button";
 import { initModalExample } from "../apiExamples/modal";
 import { initPopoverAndDropdownExample } from "../apiExamples/popover-and-dropdown";
 import { initSizeOptionsExample } from "../apiExamples/size-options";
-import { initAriaLabelSlotExample } from "../apiExamples/slot_aria-label";
+import { initAriaLabelSlotExample } from "../apiExamples/aria-label";
 
 import "../src/registered"
 
@@ -19,6 +19,9 @@ export function initExamples(initCount) {
     initModalExample();
     initDecoupledExample();
     initPopoverAndDropdownExample();
+    initEditCloseButtonExample();
+    initAriaLabelSlotExample();
+    initAccessibilityExample();
   } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/api.md

@@ -7,17 +7,17 @@ The `auro-dialog` appears on top of the page and presents information that requi
 
 ### Properties & Attributes
 
-| Properties            | Attributes              | Modifiers | Type                   | Default   | Description                                                                                                                                    |
-| --------------------- | ----------------------- | --------- | ---------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| closeButtonAppearance | close-button-appearance |           | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds.                                                          |
-| lg                    | lg                      |           | boolean                |           | Sets the dialog to lg for mobile and the size defined by sm or md for desktop.<br>Must be used in conjunction with sm or md to have an effect. |
-| md                    | md                      |           | boolean                |           | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.                                |
-| modal                 | modal                   |           | boolean                | `false`   | Modal dialog restricts the user to take an action (no default close actions)                                                                   |
-| onDark                | onDark                  |           | boolean                |           | DEPRECATED - use `close-button-appearance="inverse" instead.                                                                                   |
-| open                  | open                    |           | boolean                |           | Sets state of dialog to open                                                                                                                   |
-| sm                    | sm                      |           | boolean                |           | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.                                 |
-| triggerElement        |                         |           | HTMLElement            |           | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.         |
-| unformatted           | unformatted             |           | boolean                | `false`   | Unformatted dialog window, edge-to-edge fill for content                                                                                       |
+| Properties            | Attributes              | Modifiers | Type                   | Default   | Description                                                                                                                                                                          |
+| --------------------- | ----------------------- | --------- | ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| closeButtonAppearance | close-button-appearance |           | `default` \| `inverse` | `default` | Defines whether the close button should be light colored for use on dark backgrounds.                                                                                                |
+| lg                    | lg                      |           | boolean                |           | Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.<br>Must be used in conjunction with sm or md to have an effect. |
+| md                    | md                      |           | boolean                |           | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.                                                                      |
+| modal                 | modal                   |           | boolean                | `false`   | Modal dialog restricts the user to take an action (no default close actions)                                                                                                         |
+| onDark                | onDark                  |           | boolean                |           | DEPRECATED - use `close-button-appearance="inverse" instead.                                                                                                                         |
+| open                  | open                    |           | boolean                |           | Sets state of dialog to open                                                                                                                                                         |
+| sm                    | sm                      |           | boolean                |           | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.                                                                       |
+| triggerElement        |                         |           | HTMLElement            |           | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.                                               |
+| unformatted           | unformatted             |           | boolean                | `false`   | Unformatted dialog window, edge-to-edge fill for content                                                                                                                             |
 
 ### Methods
 
@@ -517,8 +517,8 @@ This property can be used in combination with any other use case of the dialog,
 To customize the aria-label text for the close button, use the `ariaLabel.dialog.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slot_aria-label.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/slot_aria-label.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/aria-label.html -->
   <div>
     <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
   </div>
@@ -536,8 +536,8 @@ To customize the aria-label text for the close button, use the `ariaLabel.dialog
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slot_aria-label.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/slot_aria-label.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/aria-label.html -->
 
 ```html
 <div>
@@ -564,8 +564,8 @@ To customize the aria-label text for the close button, use the `ariaLabel.dialog
 The close button can be targetted via the `close-button` CSS part, e.g. `auro-dialog::part(close-button)`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/part_close-button.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/part_close-button.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/close-button.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/close-button.html -->
   <div>
     <auro-button id="openEditDialog">Unformatted w/custom close button</auro-button>
   </div>
@@ -573,7 +573,6 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
     .example::part(close-button) {
       top: var(--ds-size-400);
       right: var(--ds-size-400);
-      color: var(--ds-color-brand-flamingo-500);
     }
   </style>
   <auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
@@ -589,8 +588,8 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/part_close-button.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/part_close-button.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/close-button.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/close-button.html -->
 
 ```html
 <div>
@@ -600,7 +599,6 @@ The close button can be targetted via the `close-button` CSS part, e.g. `auro-di
   .example::part(close-button) {
     top: var(--ds-size-400);
     right: var(--ds-size-400);
-    color: var(--ds-color-brand-flamingo-500);
   }
 </style>
 <auro-dialog id="unformattedCustomMdDialog" unformatted md lg class="example">
@@ -802,4 +800,4 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
 ```
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->

package/demo/api.min.js

@@ -1,5 +1,18 @@
 import { A as AuroDialog, i as initBasicExample } from './auro-dialog.min.js';
 
+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"),
@@ -34,6 +47,19 @@ function initDecoupledExample() {
   });
 }
 
+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"),
@@ -152,6 +178,19 @@ function initSizeOptionsExample() {
   });
 }
 
+function initAriaLabelSlotExample() {
+  const button = document.querySelector("#openAriaLabelSlot");
+  const dialog = document.querySelector("#ariaLabelMdDialog");
+
+  button.addEventListener("click", () => {
+    if (dialog.hasAttribute("open")) {
+      dialog.removeAttribute("open");
+    } else {
+      dialog.setAttribute("open", true);
+    }
+  });
+}
+
 AuroDialog.register();
 
 function initExamples(initCount) {
@@ -164,6 +203,9 @@ function initExamples(initCount) {
     initModalExample();
     initDecoupledExample();
     initPopoverAndDropdownExample();
+    initEditCloseButtonExample();
+    initAriaLabelSlotExample();
+    initAccessibilityExample();
   } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/auro-dialog.min.js

@@ -533,9 +533,9 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
       </div>
     `}}
 
-var buttonVersion = '12.2.0';
+var buttonVersion = '12.3.0';
 
-var iconVersion = '9.1.0';
+var iconVersion = '9.1.1';
 
 var colorCss = i$5`.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, .375rem);background-color:transparent}
 `;
@@ -608,6 +608,7 @@ class ComponentBase extends i$2 {
       /**
        * Defines whether the close button should be light colored for use on dark backgrounds.
        * @type {'default'|'inverse'}
+       * @default 'default'
        */
       closeButtonAppearance: {
         type: String,
@@ -616,66 +617,66 @@ class ComponentBase extends i$2 {
       },
 
       /**
-       * Modal dialog restricts the user to take an action (no default close actions)
-       */
-      modal: { type: Boolean },
-
-      /**
-       * Unformatted dialog window, edge-to-edge fill for content
+       * Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
+       * Must be used in conjunction with sm or md to have an effect.
        */
-      unformatted: {
+      lg: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * Sets state of dialog to open
+       * Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
        */
-      open: {
+      md: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
-       * @type {HTMLElement}
-      */
-      triggerElement: {
-        type: Object,
-        attribute: false,
-      },
+       * Modal dialog restricts the user to take an action (no default close actions)
+       */
+      modal: { type: Boolean },
 
       /**
-       * Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
+       * DEPRECATED - use `close-button-appearance="inverse" instead.
        */
-      sm: {
+      onDark: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
+       * Sets state of dialog to open
        */
-      md: {
+      open: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * Sets the dialog to lg for mobile and the size defined by sm or md for desktop.
-       * Must be used in conjunction with sm or md to have an effect.
+       * Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
        */
-      lg: {
+      sm: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * DEPRECATED - use `close-button-appearance="inverse" instead.
+       * The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
+       * @type {HTMLElement}
+      */
+      triggerElement: {
+        type: Object,
+        attribute: false
+      },
+
+      /**
+       * Unformatted dialog window, edge-to-edge fill for content
        */
-      onDark: {
+      unformatted: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }

package/demo/index.md

@@ -45,11 +45,11 @@ It should be noted that the `footer` slot is reserved for the placement of actio
 
 ## Example(s)
 
+### Basic
+
 The dialog open state is controlled via the `open` attribute, or by programmatically setting the `open` property to `true`.
 You can see in the example below under the "See Code" section that we are controlling our dialogs by adding and removing the `open` attribute.
 
-### Basic
-
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->

package/dist/{auro-dialog-DCuKG3EH.js → auro-dialog-BGLeu91P.js}

@@ -79,7 +79,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{classMap as a}from"li
 `,J=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.dialog{position:fixed;z-index:-1;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;transition:all .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width:768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@media screen and (min-width:1024px){.dialog{max-width:986px}}.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);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width:768px){:host([sm]) .dialog{top:10%;bottom:unset;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%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width:1024px){:host([md]) .dialog{top:10%;bottom:unset;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}
 `,Q=e`[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)}}
 `,Y=e`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, .2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
-`;class Z extends t{constructor(){super(),this.modal=!1,this.unformatted=!1,this.closeButtonAppearance="default";const e=new d;this.buttonTag=e.generateTag("auro-button","12.2.0",L),this.iconTag=e.generateTag("auro-icon","9.1.0",V),this.runtimeUtils=new l}static get properties(){return{closeButtonAppearance:{type:String,attribute:"close-button-appearance",reflect:!0},modal:{type:Boolean},unformatted:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},triggerElement:{type:Object,attribute:!1},sm:{type:Boolean,reflect:!0},md:{type:Boolean,reflect:!0},lg:{type:Boolean,reflect:!0},onDark:{type:Boolean,reflect:!0}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer")}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog())}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler)}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog)}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement()}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent()}dispatchToggleEvent(){const e=new Event("toggle",{bubbles:!0,cancelable:!1});this.dispatchEvent(e)}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick()}}handleCloseButtonClick(){this.open=!1}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=!1)}focus(){this.open&&this.dialog.focus()}static get styles(){return[J,Q,K,Y]}getCloseButton(){return this.modal?i``:i`
+`;class Z extends t{constructor(){super(),this.modal=!1,this.unformatted=!1,this.closeButtonAppearance="default";const e=new d;this.buttonTag=e.generateTag("auro-button","12.3.0",L),this.iconTag=e.generateTag("auro-icon","9.1.1",V),this.runtimeUtils=new l}static get properties(){return{closeButtonAppearance:{type:String,attribute:"close-button-appearance",reflect:!0},lg:{type:Boolean,reflect:!0},md:{type:Boolean,reflect:!0},modal:{type:Boolean},onDark:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},sm:{type:Boolean,reflect:!0},triggerElement:{type:Object,attribute:!1},unformatted:{type:Boolean,reflect:!0}}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-dialog");const e=this.shadowRoot.querySelector("#footer"),t=this.shadowRoot.querySelector("#footerWrapper");this.dialog=this.shadowRoot.getElementById("dialog"),this.unformatted||0!==e.assignedNodes().length||t.classList.remove("dialog-footer")}updated(e){e.has("open")&&(this.open?this.openDialog():this.closeDialog())}connectedCallback(){super.connectedCallback(),this.keydownEventHandler=this.handleKeydown.bind(this),window.addEventListener("keydown",this.keydownEventHandler)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.keydownEventHandler)}openDialog(){this.defaultTrigger=document.activeElement,this.focusTrap=new p(this.dialog)}onDialogTransitionEnd(){this.open&&this.focusTrap&&this.focusTrap.focusFirstElement()}closeDialog(){this.focusTrap&&(this.focusTrap.disconnect(),this.focusTrap=void 0),this.defaultTrigger&&(this.defaultTrigger.focus(),this.defaultTrigger=void 0),this.dispatchToggleEvent()}dispatchToggleEvent(){const e=new Event("toggle",{bubbles:!0,cancelable:!1});this.dispatchEvent(e)}handleOverlayClick(){if(this.open&&!this.modal){const e=[...this.querySelectorAll("auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]")];[...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),...e.map(e=>e.dropdown)].some(e=>e.isPopoverVisible)||this.handleCloseButtonClick()}}handleCloseButtonClick(){this.open=!1}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=!1)}focus(){this.open&&this.dialog.focus()}static get styles(){return[J,Q,K,Y]}getCloseButton(){return this.modal?i``:i`
       <${this.buttonTag}
         aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
         variant="ghost"

package/dist/index.d.ts

@@ -86,7 +86,7 @@ export type AuroDialogProps = {
   "close-button-appearance"?: AuroDialog['closeButtonAppearance'];
   /** Defines whether the close button should be light colored for use on dark backgrounds. */
   "closeButtonAppearance"?: AuroDialog['closeButtonAppearance'];
-  /** Sets the dialog to lg for mobile and the size defined by sm or md for desktop.
+  /** Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
 Must be used in conjunction with sm or md to have an effect. */
   "lg"?: AuroDialog['lg'];
   /** Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. */
@@ -120,7 +120,7 @@ Must be used in conjunction with sm or md to have an effect. */
  * Component attributes and properties that can be applied to the element or by using JavaScript.
  * 
  * - `close-button-appearance`/`closeButtonAppearance`: Defines whether the close button should be light colored for use on dark backgrounds. 
- * - `lg`: Sets the dialog to lg for mobile and the size defined by sm or md for desktop.
+ * - `lg`: Sets dialog box to large style. Adding both lg and sm/md will set the dialog to lg for mobile and sm/md for desktop.
  * Must be used in conjunction with sm or md to have an effect. 
  * - `md`: Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. 
  * - `modal`: Modal dialog restricts the user to take an action (no default close actions) 

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroDialog}from"./auro-dialog-DCuKG3EH.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";
+export{A as AuroDialog}from"./auro-dialog-BGLeu91P.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i}from"./auro-dialog-DCuKG3EH.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();
+import{A as i}from"./auro-dialog-BGLeu91P.js";import"lit";import"lit/directives/class-map.js";import"lit/static-html.js";import"lit/directives/if-defined.js";i.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-dialog",
-  "version": "0.0.0-pr97.1",
+  "version": "0.0.0-pr97.3",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",
@@ -66,7 +66,11 @@
   "exports": {
     "./package.json": "./package.json",
     "./readme.md": "./README.md",
-    ".": "./dist/registered.js",
+    ".": {
+      "module": "./dist/registered.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/registered.js"
+    },
     "./demo/*.md": "./demo/*.md",
     "./demo/*.js": "./demo/*.min.js",
     "./class": {