@ni/spright-components 3.0.2 → 3.0.4

package/dist/all-components-bundle.js

@@ -16032,7 +16032,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 06 Aug 2024 15:57:06 GMT
+   * Generated on Fri, 09 Aug 2024 14:52:14 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16154,29 +16154,6 @@
   const MediumDelay = "0.15s"; // Medium animation delay for control state change animation
   const LargeDelay = "0.25s"; // Long animation delay used for control state change animation
 
-  /**
-   * Convert a hexadecimal color string to an RGBA CSS color string
-   * Example: '#ff0102' to 'rgba(255, 1, 2, 1)'
-   * @param hexValue Hex color (with 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 { r, g, b } = parseColorHexRGB(hexValue);
-      return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${alpha})`;
-  }
-
-  /**
-   * Static tokens to use for styling the `::backdrop` pseduo-element of an HTML dialog, which
-   * does not have access to CSS custom properties.
-   *
-   * See https://github.com/whatwg/fullscreen/issues/124
-   */
-  const modalBackdropColorThemeLightStatic = hexToRgbaCssColor(Black, 0.3);
-  const modalBackdropColorThemeDarkStatic = hexToRgbaCssColor(Black, 0.6);
-  const modalBackdropColorThemeColorStatic = hexToRgbaCssColor(Black, 0.6);
-  const largeDelayStatic = LargeDelay;
-
   const Theme = {
       light: 'light',
       dark: 'dark',
@@ -16637,6 +16614,18 @@
       .register(nimbleDesignSystemProvider());
   const themeProviderTag = 'nimble-theme-provider';
 
+  /**
+   * Convert a hexadecimal color string to an RGBA CSS color string
+   * Example: '#ff0102' to 'rgba(255, 1, 2, 1)'
+   * @param hexValue Hex color (with 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 { r, g, b } = parseColorHexRGB(hexValue);
+      return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${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));
@@ -16658,7 +16647,7 @@
   const borderHoverColor = DesignToken.create(styleNameFromTokenName(tokenNames.borderHoverColor)).withDefault((element) => getColorForTheme(element, DigitalGreenLight, PowerGreen, White));
   // Component Color Tokens
   const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.iconColor)).withDefault((element) => getColorForTheme(element, Black91, Black15, White));
-  DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
+  const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
   const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
   const cardBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.cardBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
   DesignToken.create(styleNameFromTokenName(tokenNames.graphGridlineColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.2));
@@ -16827,13 +16816,13 @@
   function getModalBackdropForTheme(element) {
       switch (theme.getValueFor(element)) {
           case Theme.light:
-              return modalBackdropColorThemeLightStatic;
+              return hexToRgbaCssColor(Black, 0.3);
           case Theme.dark:
-              return modalBackdropColorThemeDarkStatic;
+              return hexToRgbaCssColor(Black, 0.6);
           case Theme.color:
-              return modalBackdropColorThemeColorStatic;
+              return hexToRgbaCssColor(Black, 0.6);
           default:
-              return modalBackdropColorThemeLightStatic;
+              return hexToRgbaCssColor(Black, 0.3);
       }
   }
 
@@ -21796,6 +21785,10 @@ so this becomes the fallback color for the slot */ ''}
         outline: 2px solid ${borderHoverColor};
     }
 
+    dialog::backdrop {
+        background: ${modalBackdropColor};
+    }
+
     header {
         min-height: 48px;
         padding: 24px 24px 0px 24px;
@@ -21861,24 +21854,7 @@ so this becomes the fallback color for the slot */ ''}
     :host([footer-hidden]) footer {
         display: none;
     }
-`.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: ${modalBackdropColorThemeLightStatic};
-            }
-        `), themeBehavior(Theme.dark, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeDarkStatic};
-            }
-        `), themeBehavior(Theme.color, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeColorStatic};
-            }
-        `));
+`;
 
   const template$y = html `
     <template>
@@ -22072,9 +22048,12 @@ so this becomes the fallback color for the slot */ ''}
         }
     }
 
+    dialog::backdrop {
+        background: ${modalBackdropColor};
+    }
+
     dialog.animating::backdrop {
-        animation: ni-private-drawer-fade-in-keyframes ${largeDelayStatic}
-            ease-in;
+        animation: ni-private-drawer-fade-in-keyframes ${largeDelay} ease-in;
     }
 
     dialog.closing::backdrop {
@@ -22167,24 +22146,7 @@ so this becomes the fallback color for the slot */ ''}
         justify-content: flex-end;
         border-top: 2px solid rgba(${actionRgbPartialColor}, 0.1);
     }
-`.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: ${modalBackdropColorThemeLightStatic};
-            }
-        `), themeBehavior(Theme.dark, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeDarkStatic};
-            }
-        `), themeBehavior(Theme.color, css `
-            dialog::backdrop {
-                background: ${modalBackdropColorThemeColorStatic};
-            }
-        `));
+`;
 
   const template$x = html `
     <dialog