@ni/nimble-components 8.6.3 → 9.0.2

package/dist/all-components-bundle.js

@@ -16077,8 +16077,7 @@
         position: relative;
         top: 0px;
         bottom: 0px;
-        display: grid;
-        grid-template-rows: max-content auto max-content;
+        display: flex;
         flex-direction: column;
         box-sizing: border-box;
         border-radius: 0px;
@@ -16115,20 +16114,21 @@
 
     ::slotted(header) {
         padding: ${standardPadding};
+        flex: none;
         font: ${titlePlus1Font};
     }
 
     ::slotted(section) {
         padding: ${standardPadding};
-        grid-row: 2;
+        flex: auto;
         overflow-y: auto;
     }
 
     ::slotted(footer) {
         padding: ${standardPadding};
+        flex: none;
         display: flex;
         justify-content: flex-end;
-        grid-row: 3;
         border-top: ${borderWidth} solid ${popupBorderColor};
     }
 `;
@@ -18056,6 +18056,9 @@
         width: max-content;
         box-shadow: 0px 2px 3px ${popupBoxShadowColor};
     }
+    :host([slot='submenu']) {
+        margin: 0 calc(${smallPadding} * 2);
+    }
     ::slotted(*) {
         padding-left: 8px;
         padding-right: 8px;
@@ -18063,7 +18066,7 @@
     ::slotted(hr) {
         box-sizing: content-box;
         height: 2px;
-        margin: 4px;
+        margin: ${smallPadding};
         border: none;
         background: ${borderColor};
         opacity: 0.1;
@@ -18073,8 +18076,8 @@
         font: ${groupHeaderFont};
         color: ${groupHeaderFontColor};
         text-transform: ${groupHeaderTextTransform};
-        padding-top: 4px;
-        padding-bottom: 4px;
+        padding-top: ${smallPadding};
+        padding-bottom: ${smallPadding};
     }
 `;
 
@@ -18108,7 +18111,8 @@
         overflow: visible;
         box-sizing: border-box;
         height: ${controlHeight};
-        grid-template-columns: 0px 1fr;
+        grid-template-columns: 1fr;
+        column-gap: 8px;
         grid-template-rows: 1fr;
         justify-items: start;
         align-items: center;
@@ -18125,10 +18129,13 @@
         outline: 2px solid ${borderHoverColor};
         outline-offset: -2px;
     }
+    :host([expanded]) {
+        background: ${fillHoverColor};
+    }
     :host(:hover) {
         background: ${fillHoverColor};
     }
-    :host(:active) {
+    :host(:active:not([expanded])) {
         background: ${fillSelectedColor};
     }
     :host([disabled]) {
@@ -18139,9 +18146,14 @@
     :host([disabled]:hover) {
         background: transparent;
     }
+    :host(.indent-0[aria-haspopup='menu']) {
+        grid-template-columns: 1fr ${iconSize};
+    }
     :host(.indent-1) {
         grid-template-columns: ${iconSize} 1fr;
-        column-gap: 8px;
+    }
+    :host(.indent-1[aria-haspopup='menu']) {
+        grid-template-columns: ${iconSize} 1fr ${iconSize};
     }
     [part='start'] {
         display: contents;
@@ -18157,6 +18169,18 @@
     :host(.indent-1) .content {
         grid-column: 2;
     }
+    .expand-collapse-glyph-container {
+        grid-row: 1;
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+    :host(.indent-0) .expand-collapse-glyph-container {
+        grid-column: 2;
+    }
+    :host(.indent-1) .expand-collapse-glyph-container {
+        grid-column: 3;
+    }
 `;
 
     /**
@@ -18177,7 +18201,8 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$d
+        styles: styles$d,
+        expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
 
@@ -19228,6 +19253,14 @@
         outline: none;
     }
 
+    .control:disabled {
+        ${
+/* There's an issue with the input element where the ellipsized
+   overflowed text is blank when scrolled into view, so just clip instead.
+   See https://webcompat.com/issues/104481 */ ''}
+        text-overflow: clip;
+    }
+
     .control::selection {
         color: ${controlLabelFontColor};
         background: rgba(${fillSelectedRgbPartialColor}, 0.3);