@ni/nimble-components 8.0.1 → 8.1.0

package/dist/all-components-bundle.js

@@ -18129,6 +18129,7 @@
         TextFieldAppearance["Underline"] = "underline";
         TextFieldAppearance["Outline"] = "outline";
         TextFieldAppearance["Block"] = "block";
+        TextFieldAppearance["Frameless"] = "frameless";
     })(TextFieldAppearance || (TextFieldAppearance = {}));
 
     const styles$4 = css `
@@ -18185,11 +18186,8 @@
         border-bottom-color: ${failColor};
     }
 
-    :host([readonly]:not([disabled])) .root {
-        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);
-        padding: 0px;
-        padding-bottom: 1px;
-        background-color: transparent;
+    :host([readonly]) .root {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
     :host([disabled]) .root {
@@ -18203,6 +18201,10 @@
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([readonly]) .root:hover {
+        --ni-private-bottom-border-width: 1px;
+    }
+
     :host([disabled]) .root:hover {
         --ni-private-bottom-border-width: 1px;
     }
@@ -18302,10 +18304,6 @@
         white-space: nowrap;
     }
 
-    :host(.invalid[readonly]:not([disabled])) .errortext {
-        top: calc(${controlHeight} - ${borderWidth});
-    }
-
     :host(.invalid) .error-text:empty {
         display: none;
     }
@@ -18329,6 +18327,14 @@
                 padding-left: ${borderWidth};
                 padding-right: ${borderWidth};
             }
+
+            :host([disabled]) .root {
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+
+            :host([disabled]) .root:hover {
+                --ni-private-bottom-border-width: 1px;
+            }
         `), appearanceBehavior(TextFieldAppearance.Block, css `
             .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
@@ -18358,6 +18364,11 @@
                 );
             }
 
+            :host([readonly]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+                border-color: transparent;
+            }
+
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
             }
@@ -18379,6 +18390,21 @@
             :host(.invalid) .errortext {
                 top: calc(${controlHeight} - ${borderWidth});
             }
+        `), appearanceBehavior(TextFieldAppearance.Frameless, css `
+            .root {
+                --ni-private-bottom-border-width: 0px;
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            :host([readonly]) .root {
+                border-color: transparent;
+            }
+
+            .root:hover {
+                --ni-private-bottom-border-width: 0px;
+            }
         `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {