@ni/spright-components 6.2.0 → 6.2.1

package/dist/all-components-bundle.js

@@ -93847,12 +93847,14 @@ focus outline in that case.
     :host {
         width: 100%;
         height: auto;
+        outline: none;
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     .container {
-        display: grid;
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 1fr auto;
+        display: flex;
+        flex-direction: column;
+        position: relative;
         width: 100%;
         height: 100%;
 
@@ -93861,10 +93863,34 @@ focus outline in that case.
         box-shadow: ${elevation2BoxShadow};
     }
 
-    textarea {
-        grid-row: 1;
-        grid-column: 1 / 3;
+    .container::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        align-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    :host(:hover) .container::after {
+        width: 100%;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    :host(:focus-within) .container {
+        border-bottom-color: ${borderHoverColor};
+    }
 
+    @media (prefers-reduced-motion) {
+        .container::after {
+            transition-duration: 0s;
+        }
+    }
+
+    textarea {
         font: ${bodyFont};
         color: ${bodyFontColor};
         background-color: transparent;
@@ -93885,8 +93911,7 @@ focus outline in that case.
     }
 
     .send-button {
-        grid-row: 2;
-        grid-column: 2;
+        align-self: flex-end;
         width: 80px;
         margin: ${mediumPadding};
     }