@ni/nimble-components 35.11.0 → 35.12.0

package/dist/all-components-bundle.js

@@ -22242,6 +22242,7 @@ so this becomes the fallback color for the slot */ ''}
     ${styles$L}
 
     :host {
+        field-sizing: fixed;
         --ni-private-hover-bottom-border-width: 2px;
         --ni-private-bottom-border-width: 1px;
         --ni-private-height-within-border: calc(
@@ -22250,6 +22251,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 
     .control {
+        field-sizing: inherit;
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
@@ -22257,7 +22259,12 @@ so this becomes the fallback color for the slot */ ''}
         border-bottom-color: ${borderHoverColor};
     }
 
+    slot[name='control'] {
+        field-sizing: inherit;
+    }
+
     .selected-value {
+        field-sizing: inherit;
         -webkit-appearance: none;
         background: transparent;
         border: none;
@@ -28105,6 +28112,7 @@ so this becomes the fallback color for the slot */ ''}
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -28137,6 +28145,7 @@ so this becomes the fallback color for the slot */ ''}
         position: relative;
         display: flex;
         flex-direction: row;
+        field-sizing: inherit;
         justify-content: center;
         align-items: center;
         border-radius: 0px;
@@ -28204,12 +28213,17 @@ so this becomes the fallback color for the slot */ ''}
         font: inherit;
         background: transparent;
         color: inherit;
+        field-sizing: inherit;
         height: var(--ni-private-height-within-border);
         width: 100%;
         border: none;
         padding: 0px;
         padding-left: ${mediumPadding};
     }
+    
+    :host([hide-step]) .control {
+        padding-right: ${smallPadding};
+    }
 
     .control:hover,
     .control:focus,
@@ -28307,6 +28321,7 @@ so this becomes the fallback color for the slot */ ''}
 
             :host([full-bleed]) .control {
                 padding-left: 0px;
+                padding-right: 0px;
             }
         `));
 
@@ -81196,6 +81211,8 @@ focus outline in that case.
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
+        min-width: 100px;
         flex-direction: column;
         vertical-align: top;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
@@ -81227,6 +81244,7 @@ focus outline in that case.
         display: flex;
         justify-content: center;
         position: relative;
+        field-sizing: inherit;
         height: 100%;
         width: 100%;
     }
@@ -81271,7 +81289,7 @@ focus outline in that case.
         border-radius: 0px;
         align-items: flex-end;
         border: ${borderWidth} solid transparent;
-        min-width: 100px;
+        field-sizing: inherit;
         min-height: calc(${iconSize} + ${standardPadding});
         padding: 8px;
         ${
@@ -81557,6 +81575,7 @@ focus outline in that case.
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -81591,6 +81610,7 @@ focus outline in that case.
         display: flex;
         flex-direction: row;
         border-radius: 0px;
+        field-sizing: inherit;
         font: inherit;
         align-items: center;
         justify-content: center;
@@ -81669,6 +81689,7 @@ focus outline in that case.
         background: transparent;
         color: inherit;
         padding: 0px;
+        field-sizing: inherit;
         height: var(--ni-private-height-within-border);
         width: 100%;
         margin-top: auto;