@ni/nimble-components 11.12.0 → 11.13.1

package/dist/all-components-bundle.js

@@ -14419,6 +14419,22 @@
     	return {red, green, blue, alpha};
     }
 
+    /**
+     * Convert a hexadecimal color string to an RGBA CSS color string
+     * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
+     * @param hexValue Hex color (with or without a starting '#')
+     * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
+     * @returns An rgba()-formatted CSS color string
+     */
+    function hexToRgbaCssColor(hexValue, alpha) {
+        const { red, green, blue } = hexRgb(hexValue);
+        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+    }
+
+    const modalBackdropColorThemeLight = hexToRgbaCssColor(Black, 0.3);
+    const modalBackdropColorThemeDark = hexToRgbaCssColor(Black, 0.6);
+    const modalBackdropColorThemeColor = hexToRgbaCssColor(Black, 0.6);
+
     const Theme = {
         light: 'light',
         dark: 'dark',
@@ -14448,6 +14464,7 @@
         informationColor: 'information-color',
         borderHoverColor: 'border-hover-color',
         iconColor: 'icon-color',
+        modalBackdropColor: 'modal-backdrop-color',
         popupBoxShadowColor: 'popup-box-shadow-color',
         popupBorderColor: 'popup-border-color',
         controlHeight: 'control-height',
@@ -14681,18 +14698,6 @@
         .withPrefix('nimble')
         .register(nimbleDesignSystemProvider());
 
-    /**
-     * Convert a hexadecimal color string to an RGBA CSS color string
-     * Example: 'ff0102' or '#ff0102' to 'rgba(255, 1, 2, 1)'
-     * @param hexValue Hex color (with or without a starting '#')
-     * @param alpha CSS alpha value between 0 (transparent) and 1 (opaque)
-     * @returns An rgba()-formatted CSS color string
-     */
-    function hexToRgbaCssColor(hexValue, alpha) {
-        const { red, green, blue } = hexRgb(hexValue);
-        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-    }
-
     // Color Tokens
     const actionRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.actionRgbPartialColor)).withDefault((element) => hexToRgbPartial(getColorForTheme(element, Black91, Black15, White)));
     const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
@@ -14713,6 +14718,7 @@
     const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, White));
     // Component Color Tokens
     const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
+    const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
     const popupBoxShadowColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBoxShadowColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black75, Black85, Black85), 0.3));
     const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
@@ -14824,6 +14830,18 @@
     function getFillDownColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
     }
+    function getModalBackdropForTheme(element) {
+        switch (theme.getValueFor(element)) {
+            case Theme.light:
+                return modalBackdropColorThemeLight;
+            case Theme.dark:
+                return modalBackdropColorThemeDark;
+            case Theme.color:
+                return modalBackdropColorThemeColor;
+            default:
+                return modalBackdropColorThemeLight;
+        }
+    }
 
     /**
      * Subscription for {@link ThemeStyleSheetBehavior}
@@ -16069,6 +16087,13 @@
         outline: none;
         border: none;
         box-sizing: border-box;
+        transition: box-shadow ${smallDelay};
+    }
+
+    @media (prefers-reduced-motion) {
+        :host {
+            transition-duration: 0s;
+        }
     }
 
     :host(:hover) {
@@ -16095,7 +16120,6 @@
         cursor: inherit;
         font: inherit;
         outline: none;
-        transition: box-shadow ${smallDelay};
         padding: 0px;
     }
 
@@ -16159,12 +16183,6 @@
     slot[name='end'] {
         display: none;
     }
-
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
-        }
-    }
 `.withBehaviors(themeBehavior(Theme.light, css `
                 :host {
                     --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
@@ -16998,7 +17016,24 @@
         box-shadow: 0px 2px 3px ${popupBoxShadowColor};
         max-width: 50%;
     }
-`;
+`.withBehaviors(
+    /*
+     * We cannot use the modalBackdropColor token directly because the backdrop
+     * element is not a descendant of the nimble-theme-provider element.
+     */
+    themeBehavior(Theme.light, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeLight};
+            }
+        `), themeBehavior(Theme.dark, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeDark};
+            }
+        `), themeBehavior(Theme.color, css `
+            dialog::backdrop {
+                background: ${modalBackdropColorThemeColor};
+            }
+        `));
 
     const template$5 = html `
     <template>
@@ -18228,7 +18263,7 @@
     .overlay {
         position: fixed;
         inset: 0px;
-        background: ${popupBorderColor};
+        background: ${modalBackdropColor};
         touch-action: none;
     }
 
@@ -21060,7 +21095,6 @@
 
     :host([aria-checked='true']) .checked-indicator-spacer {
         flex-grow: 1;
-        transition: flex-grow ${smallDelay} ease-in-out;
     }
 
     .checked-indicator {
@@ -21115,7 +21149,6 @@
 
     :host([aria-checked='true']) .checked-indicator-inner {
         opacity: 1;
-        transition: opacity ${smallDelay} ease-in-out;
     }
 
     slot[name='checked-message']::slotted(*) {