@ni/nimble-components 33.11.0 → 33.12.0

package/dist/all-components-bundle.js

@@ -16000,6 +16000,7 @@
       dividerBackgroundColor: 'divider-background-color',
       headerBackgroundColor: 'header-background-color',
       sectionBackgroundColor: 'section-background-color',
+      sectionBackgroundImage: 'section-background-image',
       buttonFillPrimaryColor: 'button-fill-primary-color',
       buttonPrimaryFontColor: 'button-primary-font-color',
       buttonFillAccentColor: 'button-fill-accent-color',
@@ -16032,6 +16033,7 @@
       largePadding: 'large-padding',
       labelHeight: 'label-height',
       borderWidth: 'border-width',
+      dividerWidth: 'divider-width',
       iconSize: 'icon-size',
       groupHeaderTextTransform: 'group-header-text-transform',
       drawerWidth: 'drawer-width',
@@ -16250,7 +16252,12 @@
   const applicationBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.applicationBackgroundColor)).withDefault((element) => getColorForTheme(element, White, Black85, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.headerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black7, Black88, ForestGreen));
   DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
-  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
+  DesignToken.create(styleNameFromTokenName(tokenNames.sectionBackgroundImage)).withDefault((element) => {
+      const start = getColorForTheme(element, Black15, Black82, ForestGreen);
+      const end = getColorForTheme(element, hexToRgbaCssColor(Black15, 0), hexToRgbaCssColor(Black82, 0), hexToRgbaCssColor(ForestGreen, 0));
+      return `linear-gradient(${start}, ${end})`;
+  });
+  DesignToken.create(styleNameFromTokenName(tokenNames.dividerBackgroundColor)).withDefault((element) => getColorForTheme(element, hexToRgbaCssColor(Black91, 0.2), hexToRgbaCssColor(Black15, 0.2), hexToRgbaCssColor(White, 0.2)));
   const fillSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.2));
   const fillSelectedRgbPartialColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillSelectedRgbPartialColor)).withDefault((element) => hexToRgbPartial(getFillSelectedColorForTheme(element)));
   const fillHoverSelectedColor = DesignToken.create(styleNameFromTokenName(tokenNames.fillHoverSelectedColor)).withDefault((element) => hexToRgbaCssColor(getFillSelectedColorForTheme(element), 0.15));
@@ -16313,6 +16320,7 @@
   const largePadding = DesignToken.create(styleNameFromTokenName(tokenNames.largePadding)).withDefault('24px');
   DesignToken.create(styleNameFromTokenName(tokenNames.labelHeight)).withDefault('16px');
   const borderWidth = DesignToken.create(styleNameFromTokenName(tokenNames.borderWidth)).withDefault('1px');
+  DesignToken.create(styleNameFromTokenName(tokenNames.dividerWidth)).withDefault('2px');
   const iconSize = DesignToken.create(styleNameFromTokenName(tokenNames.iconSize)).withDefault('16px');
   const drawerWidth = DesignToken.create(styleNameFromTokenName(tokenNames.drawerWidth)).withDefault('784px');
   const dialogSmallWidth = DesignToken.create(styleNameFromTokenName(tokenNames.dialogSmallWidth)).withDefault('400px');
@@ -74761,6 +74769,10 @@ focus outline in that case.
     }
 
     [part='end'] {
+        display: none;
+    }
+
+    [part='end'].end {
         margin-left: auto;
         display: flex;
     }