@ni/spright-components 6.2.0 → 6.2.1

package/dist/all-components-bundle.min.js

@@ -15237,12 +15237,14 @@ const DJ=Mt`
     :host {
         width: 100%;
         height: auto;
+        outline: none;
+        --ni-private-hover-indicator-width: calc(${Vl} + 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%;
 
@@ -15251,10 +15253,34 @@ const DJ=Mt`
         box-shadow: ${Kl};
     }
 
-    textarea {
-        grid-row: 1;
-        grid-column: 1 / 3;
+    .container::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${Vl});
+        width: 0px;
+        height: 0px;
+        align-self: center;
+        border-bottom: ${Cl}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${nh} ease-in;
+    }
+
+    :host(:hover) .container::after {
+        width: 100%;
+        transition: width ${nh} ease-in;
+    }
+
+    :host(:focus-within) .container {
+        border-bottom-color: ${Cl};
+    }
 
+    @media (prefers-reduced-motion) {
+        .container::after {
+            transition-duration: 0s;
+        }
+    }
+
+    textarea {
         font: ${Qc};
         color: ${td};
         background-color: transparent;
@@ -15275,8 +15301,7 @@ const DJ=Mt`
     }
 
     .send-button {
-        grid-row: 2;
-        grid-column: 2;
+        align-self: flex-end;
         width: 80px;
         margin: ${Ll};
     }