@ni/nimble-components 21.6.2 → 21.6.4

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 22 Feb 2024 00:57:15 GMT
+   * Generated on Thu, 22 Feb 2024 23:53:10 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -20060,9 +20060,8 @@
 `;
 
   const template$w = html `
-    ${'' /* Explicitly set role to work around Lighthouse error. See https://github.com/ni/nimble/issues/1650. */}
-    <section role="region" aria-labelledby="title-slot">
-        <slot name="title" id="title-slot"></slot>
+    <section aria-labelledby="title-slot">
+        <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
     </section>
 `;
@@ -21310,6 +21309,10 @@
         display: flex;
     }
 
+    dialog${focusVisible} {
+        outline: 2px solid ${borderHoverColor};
+    }
+
     header {
         min-height: 48px;
         padding: 24px 24px 0px 24px;
@@ -21401,6 +21404,7 @@
             role="dialog"
             part="control"
             @cancel="${(x, c) => x.cancelHandler(c.event)}"
+            @close="${x => x.closeHandler()}"
             aria-labelledby="header"
         >
             <header id="header">
@@ -21480,8 +21484,7 @@
               throw new Error('Dialog is not open');
           }
           this.dialogElement.close();
-          this.resolveShow(reason);
-          this.resolveShow = undefined;
+          this.doResolveShow(reason);
       }
       slottedFooterElementsChanged(_prev, next) {
           this.footerIsEmpty = !next?.length;
@@ -21494,11 +21497,29 @@
               event.preventDefault();
           }
           else {
-              this.resolveShow(UserDismissed);
-              this.resolveShow = undefined;
+              this.doResolveShow(UserDismissed);
           }
           return true;
       }
+      /**
+       * @internal
+       */
+      closeHandler() {
+          if (this.resolveShow) {
+              // If
+              // - the browser implements dialogs with the CloseWatcher API, and
+              // - the user presses ESC without first interacting with the dialog (e.g. clicking, scrolling),
+              // the cancel event is not fired, but the close event still is, and the dialog just closes.
+              this.doResolveShow(UserDismissed);
+          }
+      }
+      doResolveShow(reason) {
+          if (!this.resolveShow) {
+              throw new Error('Do not call doResolveShow unless there is a promise to resolve');
+          }
+          this.resolveShow(reason);
+          this.resolveShow = undefined;
+      }
   }
   // We want the member to match the name of the constant
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -21685,6 +21706,7 @@
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
         @cancel="${(x, c) => x.cancelHandler(c.event)}"
+        @close="${x => x.closeHandler()}"
     >
         <div class="dialog-contents">
             <slot></slot>
@@ -21755,6 +21777,26 @@
           }
           return true;
       }
+      /**
+       * @internal
+       */
+      closeHandler() {
+          if (this.resolveShow) {
+              // If
+              // - the browser implements dialogs with the CloseWatcher API, and
+              // - the user presses ESC without first interacting with the drawer (e.g. clicking, scrolling),
+              // the cancel event is not fired, but the close event still is, and the drawer just closes.
+              // The animation is never started, so there is no animation end listener to clean up.
+              this.doResolveShow(UserDismissed);
+          }
+      }
+      doResolveShow(reason) {
+          if (!this.resolveShow) {
+              throw new Error('Do not call doResolveShow unless there is a promise to resolve');
+          }
+          this.resolveShow(reason);
+          this.resolveShow = undefined;
+      }
       openDialog() {
           this.dialog.showModal();
           this.triggerAnimation();
@@ -21777,8 +21819,7 @@
               this.dialog.classList.remove('closing');
               this.dialog.close();
               this.closing = false;
-              this.resolveShow(this.closeReason);
-              this.resolveShow = undefined;
+              this.doResolveShow(this.closeReason);
           }
       }
   }