@ni/ok-components 1.6.0 → 1.6.2

package/dist/all-components-bundle.js

@@ -22244,6 +22244,7 @@ so this becomes the fallback color for the slot */ ''}
     ${styles$1d}
 
     :host {
+        field-sizing: fixed;
         --ni-private-hover-bottom-border-width: 2px;
         --ni-private-bottom-border-width: 1px;
         --ni-private-height-within-border: calc(
@@ -22252,6 +22253,7 @@ so this becomes the fallback color for the slot */ ''}
     }
 
     .control {
+        field-sizing: inherit;
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
@@ -22259,7 +22261,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;
@@ -28115,6 +28122,7 @@ so this becomes the fallback color for the slot */ ''}
         outline: none;
         ${userSelectNone$1}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -28147,6 +28155,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;
@@ -28214,12 +28223,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,
@@ -28317,6 +28331,7 @@ so this becomes the fallback color for the slot */ ''}
 
             :host([full-bleed]) .control {
                 padding-left: 0px;
+                padding-right: 0px;
             }
         `));
 
@@ -81206,6 +81221,8 @@ focus outline in that case.
         outline: none;
         ${userSelectNone$1}
         color: ${bodyFontColor};
+        field-sizing: fixed;
+        min-width: 100px;
         flex-direction: column;
         vertical-align: top;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
@@ -81237,6 +81254,7 @@ focus outline in that case.
         display: flex;
         justify-content: center;
         position: relative;
+        field-sizing: inherit;
         height: 100%;
         width: 100%;
     }
@@ -81281,7 +81299,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;
         ${
@@ -81567,6 +81585,7 @@ focus outline in that case.
         outline: none;
         ${userSelectNone$1}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -81601,6 +81620,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;
@@ -81679,6 +81699,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;
@@ -100155,7 +100176,7 @@ focus outline in that case.
         display: none;
     }
 
-    .messages-anchored.anchor-active {
+    .messages-anchored {
         min-height: 100%;
     }
 
@@ -101339,9 +101360,10 @@ focus outline in that case.
         min-width: ${standardPadding};
         min-height: ${standardPadding};
 
+        flex: 1;
         flex-direction: row;
         justify-content: center;
-        flex-shrink: 0;
+        align-items: center;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }