@ni/nimble-components 17.0.3 → 17.0.5

package/dist/all-components-bundle.js

@@ -20730,18 +20730,25 @@
         background: ${applicationBackgroundColor};
         border: ${borderWidth} solid ${popupBorderColor};
         margin: 0;
-        padding: 4px;
-        min-width: 168px;
+        min-width: 176px;
         width: max-content;
         box-shadow: ${elevation2BoxShadow};
     }
+
+    slot {
+        padding: 4px;
+        display: block;
+    }
+
     :host([slot='submenu']) {
         margin: 0 calc(${smallPadding} * 2);
     }
+
     ::slotted(*) {
         padding-left: 8px;
         padding-right: 8px;
     }
+
     ::slotted(hr) {
         box-sizing: content-box;
         height: 2px;
@@ -20750,6 +20757,7 @@
         background: ${borderColor};
         opacity: 0.1;
     }
+
     ::slotted(header) {
         display: flex;
         font: ${groupHeaderFont};
@@ -20758,7 +20766,11 @@
         padding-top: ${smallPadding};
         padding-bottom: ${smallPadding};
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            slot {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
+        `));
 
     /**
      * A nimble-styled menu
@@ -25148,12 +25160,46 @@
     .header-row {
         display: flex;
         flex-direction: row;
+        background: ${applicationBackgroundColor};
+        position: relative;
     }
 
     .header {
         flex: 1;
     }
-`;
+
+    .row {
+        background: ${applicationBackgroundColor};
+        position: relative;
+    }
+
+    .row::before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+    }
+
+    .row:hover::before {
+        background: ${fillHoverColor};
+    }
+`.withBehaviors(themeBehavior(Theme.color, css `
+            .header-row::before {
+                content: '';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                background: ${fillHoverColor};
+            }
+
+            .row::before {
+                background: ${fillHoverColor};
+            }
+
+            .row:hover::before {
+                background: ${hexToRgbaCssColor(White, 0.15)};
+            }
+        `));
 
     const styles$c = css `
     ${display('flex')}
@@ -25161,10 +25207,10 @@
     :host {
         height: ${controlHeight};
         align-items: center;
-        background: ${applicationBackgroundColor};
         padding: 0px calc(${standardPadding} / 2);
         font: ${tableHeaderFont};
         color: ${tableHeaderFontColor};
+        text-transform: uppercase;
     }
 `;
 
@@ -25193,15 +25239,10 @@
 
     :host {
         height: ${controlHeight};
-        background: ${applicationBackgroundColor};
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
     }
-
-    :host(:hover) .cell {
-        background: ${fillHoverColor};
-    }
 `;
 
     const styles$a = css `
@@ -25360,6 +25401,7 @@
             ${when(x => x.columns.length > 0, html `
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
+                        class="row"
                         :dataRecord="${x => x.record}"
                         :columns="${(_, c) => c.parent.columns}"
                     >