@aurodesignsystem-dev/auro-dialog 0.0.0-pr87.1 → 0.0.0-pr87.2

package/demo/api.md

@@ -30,12 +30,12 @@ The auro-dialog appears above the page and requires the user's attention.
 
 ## Slots
 
-| Name                    | Description                                      |
-|-------------------------|--------------------------------------------------|
-| `ariaLabel.closeButton` | Text to describe the close button for screen readers. Default: "Close". |
-| [content](#content)               | Injects content into the body of the modal       |
-| [footer](#footer)                | Used for action options, e.g. buttons            |
-| [header](#header)                | Text to display as the header of the modal       |
+| Name                     | Description                                      |
+|--------------------------|--------------------------------------------------|
+| `ariaLabel.dialog.close` | Text to describe the "x" icon close button for screen readers. Default: "Close". |
+| [content](#content)                | Injects content into the body of the modal       |
+| [footer](#footer)                 | Used for action options, e.g. buttons            |
+| [header](#header)                 | Text to display as the header of the modal       |
 
 ## CSS Shadow Parts
 
@@ -724,7 +724,7 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 
 ### Close button aria-label slot
 
-To customize the aria-label text for the close button, use the `ariaLabel.closeButton` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
+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/ariaLabelSlot.html) -->
@@ -733,7 +733,7 @@ To customize the aria-label text for the close button, use the `ariaLabel.closeB
     <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
   </div>
   <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
-    <span slot="ariaLabel.closeButton">This will be the new aria label for the close button</span>
+    <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
     <span slot="content">
       <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
       <div class="unformattedWrapper">
@@ -754,7 +754,7 @@ To customize the aria-label text for the close button, use the `ariaLabel.closeB
   <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
 </div>
 <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
-  <span slot="ariaLabel.closeButton">This will be the new aria label for the close button</span>
+  <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
   <span slot="content">
     <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
     <div class="unformattedWrapper">

package/demo/auro-dialog.min.js

@@ -569,7 +569,7 @@ const ESCAPE_KEYCODE = 27;
  * @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
- * @slot ariaLabel.closeButton - Text to describe the close button for screen readers. Default: "Close".
+ * @slot ariaLabel.dialog.close - Text to describe the "x" icon close button for screen readers. Default: "Close".
  * @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
@@ -789,7 +789,7 @@ getCloseButton() {
     ? u$2``
     : u$2`
       <${this.buttonTag}
-        aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.closeButton') || 'Close'}"
+        aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.dialog.close') || 'Close'}"
         variant="ghost"
         shape="circle"
         size="sm"
@@ -818,7 +818,7 @@ getCloseButton() {
 
     return u$2`
       <!-- Hidden slot for close button aria-label -->
-      <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
+      <slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
 
       <div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
 

package/dist/{auro-dialog-Dc744HtV.js → auro-dialog-CccN7rFW.js}

@@ -81,7 +81,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{classMap as a}from"li
 `,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;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{modal:{type:Boolean},unformatted:{type:Boolean,reflect:!0},open:{type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}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=document.createEvent("HTMLEvents");e.initEvent("toggle",!0,!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.closeButton")||"Close"}"
+        aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
         variant="ghost"
         shape="circle"
         size="sm"
@@ -95,7 +95,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{classMap as a}from"li
       </${this.buttonTag}>
     `}render(){const e={dialogOverlay:!0,"dialogOverlay--modal":this.modal&&this.open,"dialogOverlay--open":this.open,util_displayHidden:!this.open},t={dialog:!0,"dialog--open":this.open};return i`
       <!-- Hidden slot for close button aria-label -->
-      <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
+      <slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
 
       <div class="${a(e)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
 

package/dist/index.d.ts

@@ -86,7 +86,7 @@ class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,cl
 `,Y=css`: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 LitElement{constructor(){super(),this.modal=false,this.unformatted=false;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 {modal:{type:Boolean},unformatted:{type:Boolean,reflect:true},open:{type:Boolean,reflect:true},triggerElement:{attribute:false}}}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=document.createEvent("HTMLEvents");e.initEvent("toggle",true,false),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=false;}handleKeydown({key:e,keyCode:t}){!this.open||this.modal||"Escape"!==e&&27!==t||(this.open=false);}focus(){this.open&&this.dialog.focus();}static get styles(){return [J,Q,K,Y]}getCloseButton(){return this.modal?html``:html`
       <${this.buttonTag}
-        aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.closeButton")||"Close"}"
+        aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.dialog.close")||"Close"}"
         variant="ghost"
         shape="circle"
         size="sm"
@@ -100,7 +100,7 @@ class l{registerComponent(e,t){customElements.get(e)||customElements.define(e,cl
       </${this.buttonTag}>
     `}render(){const e={dialogOverlay:true,"dialogOverlay--modal":this.modal&&this.open,"dialogOverlay--open":this.open,util_displayHidden:!this.open},t={dialog:true,"dialog--open":this.open};return html`
       <!-- Hidden slot for close button aria-label -->
-      <slot name="ariaLabel.closeButton" hidden @slotchange=${this.requestUpdate}></slot>
+      <slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
 
       <div class="${classMap(e)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
 

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroDialog}from"./auro-dialog-Dc744HtV.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-CccN7rFW.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-Dc744HtV.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-CccN7rFW.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-pr87.1",
+  "version": "0.0.0-pr87.2",
   "description": "auro-dialog HTML custom element",
   "repository": {
     "type": "git",