@ni/nimble-components 18.12.3 → 18.12.4

package/dist/all-components-bundle.js

@@ -16356,7 +16356,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 21 Apr 2023 15:58:04 GMT
+     * Generated on Tue, 25 Apr 2023 17:52:52 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -16834,7 +16834,7 @@
     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));
     DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
+    const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
     // Component Sizing Tokens
     const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
     const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');
@@ -28179,6 +28179,7 @@
         width: 100%;
         position: relative;
         top: var(--ni-private-table-row-container-top);
+        background-color: ${tableRowBorderColor};
     }
 
     .header-container {
@@ -28221,61 +28222,20 @@
         padding-left: 0px;
     }
 
-    .row {
-        background: ${applicationBackgroundColor};
+    .group-row {
         position: relative;
-        box-sizing: border-box;
     }
 
-    .row::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    :host([selection-mode='single']) .row:hover::before,
-    :host([selection-mode='multiple']) .row:hover::before {
-        background: ${fillHoverColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]::before,
-    :host([selection-mode='multiple']) .row[selected]::before {
-        background: ${fillSelectedColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]:hover::before,
-    :host([selection-mode='multiple']) .row[selected]:hover::before {
-        background: ${fillHoverSelectedColor};
+    .row {
+        position: relative;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            .header-row::before {
+            .table-row-container::before {
                 content: '';
                 width: 100%;
                 height: 100%;
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
                 position: absolute;
-                background: ${fillHoverColor};
-                pointer-events: none;
-            }
-
-            .row::before {
-                background: ${fillHoverColor};
-            }
-
-            :host([selection-mode='single']) .row:hover::before,
-            :host([selection-mode='multiple']) .row:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.15)};
-            }
-
-            :host([selection-mode='single']) .row[selected]::before,
-            :host([selection-mode='multiple']) .row[selected]::before {
-                background: ${hexToRgbaCssColor(White, 0.25)};
-            }
-
-            :host([selection-mode='single']) .row[selected]:hover::before,
-            :host([selection-mode='multiple']) .row[selected]:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
 
@@ -28358,10 +28318,35 @@
     ${display('flex')}
 
     :host {
-        height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         width: fit-content;
         min-width: 100%;
+        background-color: ${applicationBackgroundColor};
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid transparent;
+        box-sizing: border-box;
+        background-clip: padding-box;
+    }
+
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        box-sizing: border-box;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host([selectable]:not([selected]):hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
+    :host([selected])::before {
+        background-color: ${fillSelectedColor};
+    }
+
+    :host([selected]:hover)::before {
+        background-color: ${fillHoverSelectedColor};
     }
 
     .checkbox-container {
@@ -28399,7 +28384,19 @@
     :host([selected]) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host([selectable]:not([selected]):hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+
+            :host([selected])::before {
+                background-color: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selected]:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.2)};
+            }
+        `));
 
     const styles$d = css `
     ${display('grid')}
@@ -28695,11 +28692,8 @@
     :host {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    :host(:hover) {
-        background: ${fillHoverColor};
+        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
+        box-sizing: border-box;
     }
 
     :host([expanded]) .animating,
@@ -28707,6 +28701,19 @@
         transition: ${mediumDelay} ease-in-out;
     }
 
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host(:hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${smallPadding} * 2 + ${standardPadding} * 2 *
@@ -28760,7 +28767,15 @@
     .selection-checkbox::part(label) {
         padding-left: 0px;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
+            }
+        `));
 
     /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore