@ni/nimble-components 7.4.1 → 7.5.0

package/dist/all-components-bundle.js

@@ -17644,13 +17644,15 @@
     })(TextAreaAppearance || (TextAreaAppearance = {}));
 
     const styles$4 = css `
-    ${display('inline-block')}
+    ${display('inline-flex')}
 
     :host {
         font: ${bodyFont};
         outline: none;
         user-select: none;
         color: ${bodyFontColor};
+        flex-direction: column;
+        vertical-align: top;
     }
 
     :host([disabled]) {
@@ -17658,7 +17660,7 @@
     }
 
     .label {
-        display: flex;
+        display: block;
         color: ${controlLabelFontColor};
         font: ${controlLabelFont};
     }
@@ -17670,6 +17672,8 @@
     .control {
         -webkit-appearance: none;
         font: inherit;
+        width: 100%;
+        flex-grow: 1;
         outline: none;
         box-sizing: border-box;
         position: relative;
@@ -17719,6 +17723,14 @@
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([cols]) .control {
+        width: auto;
+    }
+
+    :host([rows]) .control {
+        flex: none;
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }
@@ -17919,25 +17931,29 @@
     }
 
     [part='end'] {
+        display: contents;
+    }
+
+    .error-content {
         display: none;
     }
 
-    :host(.invalid) [part='end'] {
+    :host(.invalid) .error-content {
         display: contents;
     }
 
-    :host(.invalid) [part='end'] svg {
+    :host(.invalid) .error-content svg {
         height: ${iconSize};
         width: ${iconSize};
         padding-right: 8px;
         flex: none;
     }
 
-    :host(.invalid) [part='end'] path {
+    :host(.invalid) .error-content path {
         fill: ${failColor};
     }
 
-    :host([disabled]) [part='end'] path {
+    :host([disabled]) .error-content path {
         fill: ${bodyDisabledFontColor};
     }
 
@@ -17968,6 +17984,15 @@
     :host([disabled]) .errortext {
         color: ${bodyDisabledFontColor};
     }
+
+    [part='actions'] {
+        display: contents;
+    }
+
+    slot[name='actions']::slotted(*) {
+        margin-right: 8px;
+        ${controlHeight.cssCustomProperty}: 24px;
+    }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
             .root {
                 --ni-private-bottom-border-width: 1px;
@@ -18074,10 +18099,13 @@
             delegatesFocus: true
         },
         end: html `
-        ${exclamationMark16X16.data}
+        <span class="error-content">${exclamationMark16X16.data}</span>
+        <span part="actions">
+            <slot name="actions"></slot>
+        </span>
         <div
             id="errortext"
-            class="errortext"
+            class="errortext error-content"
             title="${x => x.errorText}"
             aria-live="polite"
         >