@ni/spright-components 6.1.0 → 6.2.1

package/dist/all-components-bundle.js

@@ -18359,6 +18359,14 @@
       name: 'pot_with_lid_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 4V2H5v2H2v1h12V4ZM6 4V3h4v1Zm-4 9h1v1h10v-1h1V6H2Z" class="cls-1"/></svg>`,
   };
+  const print = {
+      name: 'print',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.55 10.6H8V10h2.25zm-5.3.4-.5 1h6.5l-.5-1zM14 11h-1l1 2v1H2v-1l1-2H2V6l1-2h1V2h8v2h1l1 2zM5 5h6V3H5zm8 8-2-4H5l-2 4zm0-6h-1v1h1z" class="cls-1"/></svg>`,
+  };
+  const qrcodeRead = {
+      name: 'qrcode_read',
+      data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 4v2H4V4zm6 0h-2v2h2zm-8 8h2v-2H4zM3 3h2V2H2v3h1zm10-1h-2v1h2v2h1V2zm0 11h-2v1h3v-3h-1zM3 11H2v3h3v-1H3zm7-3H9v1h1zM8 9V7H7v1H6v1h1v1h2V9zm4 3v-1h-1v1zm-1-2h1V7h-2v1h1v1h-1v1H9v1h2zm-4 2h2v-1H7zM5 7H4v2h1V8h1V7zm2-1H6v1h1zm1-2H7v1h1v1h1V4zm1 2v1h1V6z" class="cls-1"/></svg>`,
+  };
   const question16X16 = {
       name: 'question_16_x_16',
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.303 5.594a3.3 3.3 0 0 1-.195 1.176 2.6 2.6 0 0 1-.549.885 4 4 0 0 1-.852.672 7.5 7.5 0 0 1-1.121.54v1.501H6.27V8.15q.467-.125.845-.256a3.2 3.2 0 0 0 .793-.429 2.1 2.1 0 0 0 .608-.612 1.45 1.45 0 0 0 .22-.791 1.04 1.04 0 0 0-.423-.939 2.16 2.16 0 0 0-1.195-.28 3.3 3.3 0 0 0-1.068.204 4.9 4.9 0 0 0-1.09.526h-.263V3.566a8 8 0 0 1 1.296-.372A8.2 8.2 0 0 1 7.77 3a4.2 4.2 0 0 1 2.579.718 2.24 2.24 0 0 1 .954 1.876M8.77 13H6.112v-1.737H8.77Z" class="cls-1"/></svg>`,
@@ -24332,6 +24340,30 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-pot-with-lid', IconPotWithLid);
 
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'print' icon
+   */
+  class IconPrint extends Icon {
+      constructor() {
+          super(print);
+      }
+  }
+  registerIcon('icon-print', IconPrint);
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'qrcodeRead' icon
+   */
+  class IconQrcodeRead extends Icon {
+      constructor() {
+          super(qrcodeRead);
+      }
+  }
+  registerIcon('icon-qrcode-read', IconQrcodeRead);
+
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -93815,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%;
 
@@ -93829,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;
@@ -93853,8 +93911,7 @@ focus outline in that case.
     }
 
     .send-button {
-        grid-row: 2;
-        grid-column: 2;
+        align-self: flex-end;
         width: 80px;
         margin: ${mediumPadding};
     }