@ni/nimble-components 7.4.3 → 7.7.0

package/dist/all-components-bundle.js

@@ -13675,22 +13675,44 @@
         color: ${bodyDisabledFontColor};
     }
 
+    slot[name='checked-indicator'],
+    slot[name='indeterminate-indicator'] {
+        display: none;
+    }
+
     slot[name='checked-indicator'] svg {
         height: ${iconSize};
         width: ${iconSize};
         overflow: visible;
     }
 
+    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
+        display: contents;
+    }
+
     slot[name='checked-indicator'] path {
         fill: ${borderColor};
-        opacity: 0;
     }
 
-    :host([aria-checked='true']) slot[name='checked-indicator'] path {
-        opacity: 1;
+    :host([disabled]) slot[name='checked-indicator'] path {
+        fill: rgba(${borderRgbPartialColor}, 0.3);
     }
 
-    :host([disabled]) slot[name='checked-indicator'] path {
+    slot[name='indeterminate-indicator'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        overflow: visible;
+    }
+
+    :host(.indeterminate) slot[name='indeterminate-indicator'] {
+        display: contents;
+    }
+
+    slot[name='indeterminate-indicator'] path {
+        fill: ${borderColor};
+    }
+
+    :host([disabled]) slot[name='indeterminate-indicator'] path {
         fill: rgba(${borderRgbPartialColor}, 0.3);
     }
 `;
@@ -13705,7 +13727,8 @@
         baseClass: Checkbox$1,
         template: checkboxTemplate,
         styles: styles$h,
-        checkedIndicator: check16X16.data
+        checkedIndicator: check16X16.data,
+        indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
@@ -14932,6 +14955,7 @@
             this.propertiesToWatch = ['hidden', 'location', 'state'];
             this.animationDurationMilliseconds = animationDurationWhenDisabledMilliseconds;
         }
+        /** @internal */
         connectedCallback() {
             // disable trapFocus before super.connectedCallback as FAST Dialog will immediately queue work to
             // change focus if it's true before connectedCallback
@@ -14949,6 +14973,7 @@
             this.propertyChangeSubscriber = subscriber;
             this.propertyChangeNotifier = notifier;
         }
+        /** @internal */
         disconnectedCallback() {
             super.disconnectedCallback();
             this.cancelCurrentAnimation();
@@ -14970,8 +14995,16 @@
             // Not calling super.hide() as that will immediately hide the drawer, whereas 'Closing' state will animate
             this.state = DrawerState.Closing;
         }
+        /**
+         * Handler for overlay clicks (user-initiated dismiss requests) only.
+         * @internal
+         */
         dismiss() {
-            if (!this.preventDismiss) {
+            const shouldDismiss = this.$emit('cancel', {}, 
+            // Aligned with the configuration of HTMLDialogElement cancel event:
+            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event
+            { bubbles: false, cancelable: true, composed: false });
+            if (shouldDismiss && !this.preventDismiss) {
                 super.dismiss();
                 this.hide();
             }
@@ -17931,25 +17964,29 @@
     }
 
     [part='end'] {
+        display: contents;
+    }
+
+    .error-content {
         display: none;
     }
 
-    :host(.invalid) [part='end'] {
+    :host(.invalid) .error-content {
         display: contents;
     }
 
-    :host(.invalid) [part='end'] svg {
+    :host(.invalid) .error-content svg {
         height: ${iconSize};
         width: ${iconSize};
         padding-right: 8px;
         flex: none;
     }
 
-    :host(.invalid) [part='end'] path {
+    :host(.invalid) .error-content path {
         fill: ${failColor};
     }
 
-    :host([disabled]) [part='end'] path {
+    :host([disabled]) .error-content path {
         fill: ${bodyDisabledFontColor};
     }
 
@@ -17980,6 +18017,15 @@
     :host([disabled]) .errortext {
         color: ${bodyDisabledFontColor};
     }
+
+    [part='actions'] {
+        display: contents;
+    }
+
+    slot[name='actions']::slotted(*) {
+        margin-right: 8px;
+        ${controlHeight.cssCustomProperty}: 24px;
+    }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
             .root {
                 --ni-private-bottom-border-width: 1px;
@@ -18086,10 +18132,13 @@
             delegatesFocus: true
         },
         end: html `
-        ${exclamationMark16X16.data}
+        <span class="error-content">${exclamationMark16X16.data}</span>
+        <span part="actions">
+            <slot name="actions"></slot>
+        </span>
         <div
             id="errortext"
-            class="errortext"
+            class="errortext error-content"
             title="${x => x.errorText}"
             aria-live="polite"
         >