@ni/nimble-components 11.0.1 → 11.0.2

package/dist/all-components-bundle.js

@@ -18561,6 +18561,7 @@
         user-select: none;
         color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
@@ -18568,32 +18569,71 @@
         cursor: default;
     }
 
+    .label {
+        display: flex;
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
+        justify-content: center;
         border-radius: 0px;
         border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-        padding-bottom: 1px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        gap: calc(${standardPadding} / 2);
+    }
+
+    .root:focus-within {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    }
+
+    .root::before {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    .root::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) {
-        .root {
+        .root::after {
             transition-duration: 0s;
         }
     }
 
-    .root:hover {
-        border-bottom: 2px solid ${borderHoverColor};
-        padding-bottom: 0px;
+    :host(.invalid) .root::after {
+        border-bottom-color: ${failColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        padding-bottom: 1px;
+    :host(:hover) .root::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .root::after {
+        width: 0px;
+    }
+
+    [part='start'] {
+        display: contents;
     }
 
     .control {
@@ -18601,11 +18641,10 @@
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        height: calc(${controlHeight} - ${borderWidth});
         width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
         border: none;
+        padding: 0px;
     }
 
     .control:hover,
@@ -18632,12 +18671,6 @@
         color: ${bodyDisabledFontColor};
     }
 
-    .label {
-        display: flex;
-        color: ${controlLabelFontColor};
-        font: ${controlLabelFont};
-    }
-
     .controls {
         display: flex;
         flex-direction: column;
@@ -19472,6 +19505,10 @@
         --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]) {
@@ -19495,22 +19532,10 @@
         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 {
@@ -19525,21 +19550,6 @@
         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};
     }
@@ -19587,10 +19597,7 @@
         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;
@@ -19634,6 +19641,36 @@
         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;
     }
@@ -19689,46 +19726,33 @@
     }
 `.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 {
@@ -19739,28 +19763,20 @@
             :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};
             }
@@ -19768,10 +19784,6 @@
             :host([readonly]) .root {
                 border-color: transparent;
             }
-
-            .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
         `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {