@ni/spright-components 6.2.0 → 6.3.0

package/dist/all-components-bundle.js

@@ -93780,6 +93780,11 @@ focus outline in that case.
         border: ${borderWidth} solid ${applicationBackgroundColor};
     }
 
+    :host([appearance='overlay']) {
+        background: none;
+        border-color: transparent;
+    }
+
     .messages {
         flex: 1;
         display: flex;
@@ -93792,6 +93797,10 @@ focus outline in that case.
         overflow-y: auto;
     }
 
+    :host([appearance='overlay']) .messages {
+        background: none;
+    }
+
     .input {
         padding: ${borderWidth} ${standardPadding} ${standardPadding}
             ${standardPadding};
@@ -93813,12 +93822,20 @@ focus outline in that case.
 `;
   /* eslint-enable @typescript-eslint/indent */
 
+  /**
+   * Appearances of chat conversation.
+   * @public
+   */
+  const ChatConversationAppearance = {
+      default: undefined};
+
   /**
    * A Spright component for displaying a series of chat messages
    */
   class ChatConversation extends FoundationElement {
       constructor() {
           super(...arguments);
+          this.appearance = ChatConversationAppearance.default;
           /** @internal */
           this.inputEmpty = true;
       }
@@ -93826,6 +93843,9 @@ focus outline in that case.
           this.inputEmpty = !next?.length;
       }
   }
+  __decorate([
+      attr
+  ], ChatConversation.prototype, "appearance", void 0);
   __decorate([
       observable
   ], ChatConversation.prototype, "inputEmpty", void 0);
@@ -93847,12 +93867,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 +93883,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 +93931,7 @@ focus outline in that case.
     }
 
     .send-button {
-        grid-row: 2;
-        grid-column: 2;
+        align-self: flex-end;
         width: 80px;
         margin: ${mediumPadding};
     }