@ni/nimble-components 10.0.9 → 11.0.2

package/dist/esm/text-field/styles.js

@@ -15,6 +15,10 @@ export const styles = css `
         --webkit-user-select: none;
         color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
+        --ni-private-height-within-border: calc(
+            ${controlHeight} - 2 * ${borderWidth}
+        );
     }
 
     :host([disabled]) {
@@ -38,22 +42,10 @@ export const styles = css `
         flex-direction: row;
         border-radius: 0px;
         font: inherit;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
         align-items: center;
-        --ni-private-hover-bottom-border-width: 2px;
+        justify-content: center;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
-        border-bottom-width: var(--ni-private-bottom-border-width);
         gap: calc(${standardPadding} / 2);
-        padding-bottom: calc(
-            var(--ni-private-hover-bottom-border-width) -
-                var(--ni-private-bottom-border-width)
-        );
-    }
-
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
     }
 
     :host(.invalid) .root {
@@ -68,21 +60,6 @@ export const styles = css `
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    .root:hover {
-        --ni-private-bottom-border-width: var(
-            --ni-private-hover-bottom-border-width
-        );
-        border-bottom-color: ${borderHoverColor};
-    }
-
-    :host([readonly]) .root:hover {
-        --ni-private-bottom-border-width: 1px;
-    }
-
-    :host([disabled]) .root:hover {
-        --ni-private-bottom-border-width: 1px;
-    }
-
     .root:focus-within {
         border-bottom-color: ${borderHoverColor};
     }
@@ -130,10 +107,7 @@ export const styles = css `
         background: transparent;
         color: inherit;
         padding: 0px;
-        height: calc(
-            ${controlHeight} - ${borderWidth} -
-                var(--ni-private-hover-bottom-border-width)
-        );
+        height: ${controlHeight};
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
@@ -177,6 +151,36 @@ export const styles = css `
         display: contents;
     }
 
+    [part='end']::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        [part='end']::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(.invalid) [part='end']::after {
+        border-bottom-color: ${failColor};
+    }
+
+    :host(:hover) [part='end']::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) [part='end']::after,
+    :host([readonly]:hover) [part='end']::after {
+        width: 0px;
+    }
+
     .error-content {
         display: none;
     }
@@ -232,46 +236,33 @@ export const styles = css `
     }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.underline, css `
             .root {
-                --ni-private-bottom-border-width: 1px;
+                border-bottom-width: ${borderWidth};
+            }
+
+            .control {
+                height: var(--ni-private-height-within-border);
                 padding-top: ${borderWidth};
                 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);
-                --ni-private-bottom-border-width: 0px;
-                padding-top: ${borderWidth};
-                padding-left: ${borderWidth};
-                padding-right: ${borderWidth};
             }
 
-            .root:focus-within {
-                --ni-private-bottom-border-width: 1px;
-            }
-
-            .root:focus-within:hover {
-                --ni-private-bottom-border-width: var(
-                    --ni-private-hover-bottom-border-width
-                );
+            .control {
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
             }
 
+            .root:focus-within,
             :host(.invalid) .root {
-                --ni-private-bottom-border-width: 1px;
+                border-bottom-width: ${borderWidth};
             }
 
-            :host(.invalid) .root:hover {
-                --ni-private-bottom-border-width: var(
-                    --ni-private-hover-bottom-border-width
-                );
+            .root:focus-within .control,
+            :host(.invalid) .control {
+                height: calc(${controlHeight} - ${borderWidth});
             }
 
             :host([readonly]) .root {
@@ -282,28 +273,20 @@ export const styles = css `
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
             }
-
-            :host([disabled]) .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
-
-            :host(.invalid[disabled]) .root {
-                --ni-private-bottom-border-width: 1px;
-            }
         `), appearanceBehavior(TextFieldAppearance.outline, css `
             .root {
-                --ni-private-bottom-border-width: 1px;
                 border-width: ${borderWidth};
-                border-bottom-width: var(--ni-private-bottom-border-width);
+            }
+
+            .control {
+                height: var(--ni-private-height-within-border);
             }
 
             :host(.invalid) .errortext {
                 top: calc(${controlHeight} - ${borderWidth});
             }
         `), appearanceBehavior(TextFieldAppearance.frameless, css `
-            .root {
-                --ni-private-bottom-border-width: 0px;
-                padding-top: ${borderWidth};
+            .control {
                 padding-left: ${borderWidth};
                 padding-right: ${borderWidth};
             }
@@ -311,10 +294,6 @@ export const styles = css `
             :host([readonly]) .root {
                 border-color: transparent;
             }
-
-            .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
         `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {

package/dist/esm/text-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;oBAElC,eAAe;;;;;;;;;;;;;;+BAcJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;;;;;+BAYhB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;cA0BxC,aAAa,MAAM,WAAW;;;;;;;;;;;;;;;;;;UAkBlC;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;kBAgBpB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGQ,WAAW;gCACV,WAAW;iCACV,WAAW;;;;qCAIP,qBAAqB;;;;;;SAMjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;yCAKrB,qBAAqB;;;;;;;;;;SAUrD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGS,WAAW;;;;;4BAKf,aAAa,MAAM,WAAW;;SAEjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGQ,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;SAUnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;;;;+BAIJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBpC,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAEgB,WAAW;;;;;+BAKnB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;+BAKnB,aAAa,MAAM,WAAW;;;;yCAIpB,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAES,WAAW;;;;;;;;4BAQf,aAAa,MAAM,WAAW;;SAEjD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAES,WAAW;iCACV,WAAW;;;;;;SAMnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "10.0.9",
+  "version": "11.0.2",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",