@ni/spright-components 6.21.0 → 6.21.2

package/dist/all-components-bundle.js

@@ -22242,6 +22242,7 @@ so this becomes the fallback color for the slot */ ''}
     ${styles$$}
 
     :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;
@@ -28107,6 +28114,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}
@@ -28139,6 +28147,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;
@@ -28206,12 +28215,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,
@@ -28309,6 +28323,7 @@ so this becomes the fallback color for the slot */ ''}
 
             :host([full-bleed]) .control {
                 padding-left: 0px;
+                padding-right: 0px;
             }
         `));
 
@@ -81198,6 +81213,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);
@@ -81229,6 +81246,7 @@ focus outline in that case.
         display: flex;
         justify-content: center;
         position: relative;
+        field-sizing: inherit;
         height: 100%;
         width: 100%;
     }
@@ -81273,7 +81291,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;
         ${
@@ -81559,6 +81577,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}
@@ -81593,6 +81612,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;
@@ -81671,6 +81691,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;
@@ -100146,7 +100167,7 @@ focus outline in that case.
         display: none;
     }
 
-    .messages-anchored.anchor-active {
+    .messages-anchored {
         min-height: 100%;
     }
 
@@ -101330,9 +101351,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};
     }