@ni/nimble-components 11.0.1 → 11.0.2

package/dist/all-components-bundle.min.js

@@ -2444,6 +2444,7 @@ const ld=mt`
         user-select: none;
         color: ${Zn};
         height: calc(${kn} + ${yn});
+        --ni-private-hover-indicator-width: calc(${_n} + 1px);
     }
 
     :host([disabled]) {
@@ -2451,32 +2452,71 @@ const ld=mt`
         cursor: default;
     }
 
+    .label {
+        display: flex;
+        color: ${gr};
+        font: ${vr};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
+        justify-content: center;
         border-radius: 0px;
         border-bottom: ${_n} solid rgba(${pn}, 0.3);
-        padding-bottom: 1px;
-        transition: border-bottom ${Fr}, padding-bottom ${Fr};
+        gap: calc(${Cn} / 2);
+    }
+
+    .root:focus-within {
+        border-bottom-color: ${fn};
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${_n} solid ${tr};
+    }
+
+    .root::before {
+        ${""}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    .root::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${_n});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${fn}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${Fr} ease-in;
     }
 
     @media (prefers-reduced-motion) {
-        .root {
+        .root::after {
             transition-duration: 0s;
         }
     }
 
-    .root:hover {
-        border-bottom: 2px solid ${fn};
-        padding-bottom: 0px;
+    :host(.invalid) .root::after {
+        border-bottom-color: ${vn};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${_n} solid ${tr};
-        padding-bottom: 1px;
+    :host(:hover) .root::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .root::after {
+        width: 0px;
+    }
+
+    [part='start'] {
+        display: contents;
     }
 
     .control {
@@ -2484,11 +2524,10 @@ const ld=mt`
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        height: calc(${yn} - ${_n});
         width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
         border: none;
+        padding: 0px;
     }
 
     .control:hover,
@@ -2515,12 +2554,6 @@ const ld=mt`
         color: ${tr};
     }
 
-    .label {
-        display: flex;
-        color: ${gr};
-        font: ${vr};
-    }
-
     .controls {
         display: flex;
         flex-direction: column;
@@ -3388,6 +3421,10 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
         --webkit-user-select: none;
         color: ${Zn};
         height: calc(${kn} + ${yn});
+        --ni-private-hover-indicator-width: calc(${_n} + 1px);
+        --ni-private-height-within-border: calc(
+            ${yn} - 2 * ${_n}
+        );
     }
 
     :host([disabled]) {
@@ -3411,22 +3448,10 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
         flex-direction: row;
         border-radius: 0px;
         font: inherit;
-        transition: border-bottom ${Fr}, padding-bottom ${Fr};
         align-items: center;
-        --ni-private-hover-bottom-border-width: 2px;
+        justify-content: center;
         border: 0px solid rgba(${pn}, 0.3);
-        border-bottom-width: var(--ni-private-bottom-border-width);
         gap: calc(${Cn} / 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 {
@@ -3441,21 +3466,6 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
         border-color: rgba(${pn}, 0.1);
     }
 
-    .root:hover {
-        --ni-private-bottom-border-width: var(
-            --ni-private-hover-bottom-border-width
-        );
-        border-bottom-color: ${fn};
-    }
-
-    :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: ${fn};
     }
@@ -3503,10 +3513,7 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
         background: transparent;
         color: inherit;
         padding: 0px;
-        height: calc(
-            ${yn} - ${_n} -
-                var(--ni-private-hover-bottom-border-width)
-        );
+        height: ${yn};
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
@@ -3547,6 +3554,36 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
         display: contents;
     }
 
+    [part='end']::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${_n});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${fn}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${Fr} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        [part='end']::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(.invalid) [part='end']::after {
+        border-bottom-color: ${vn};
+    }
+
+    :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;
     }
@@ -3602,46 +3639,33 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
     }
 `.withBehaviors(Tc(Sd,mt`
             .root {
-                --ni-private-bottom-border-width: 1px;
+                border-bottom-width: ${_n};
+            }
+
+            .control {
+                height: var(--ni-private-height-within-border);
                 padding-top: ${_n};
                 padding-left: ${_n};
                 padding-right: ${_n};
             }
-
-            :host([disabled]) .root {
-                border-color: rgba(${pn}, 0.1);
-            }
-
-            :host([disabled]) .root:hover {
-                --ni-private-bottom-border-width: 1px;
-            }
         `),Tc(Ed,mt`
             .root {
                 background-color: rgba(${pn}, 0.1);
-                --ni-private-bottom-border-width: 0px;
-                padding-top: ${_n};
-                padding-left: ${_n};
-                padding-right: ${_n};
             }
 
-            .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: ${_n};
+                padding-right: ${_n};
             }
 
+            .root:focus-within,
             :host(.invalid) .root {
-                --ni-private-bottom-border-width: 1px;
+                border-bottom-width: ${_n};
             }
 
-            :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(${yn} - ${_n});
             }
 
             :host([readonly]) .root {
@@ -3652,28 +3676,20 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
             :host([disabled]) .root {
                 background-color: rgba(${pn}, 0.07);
             }
-
-            :host([disabled]) .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
-
-            :host(.invalid[disabled]) .root {
-                --ni-private-bottom-border-width: 1px;
-            }
         `),Tc(Ad,mt`
             .root {
-                --ni-private-bottom-border-width: 1px;
                 border-width: ${_n};
-                border-bottom-width: var(--ni-private-bottom-border-width);
+            }
+
+            .control {
+                height: var(--ni-private-height-within-border);
             }
 
             :host(.invalid) .errortext {
                 top: calc(${yn} - ${_n});
             }
         `),Tc(Md,mt`
-            .root {
-                --ni-private-bottom-border-width: 0px;
-                padding-top: ${_n};
+            .control {
                 padding-left: ${_n};
                 padding-right: ${_n};
             }
@@ -3681,10 +3697,6 @@ const Sd="underline",Ad="outline",Ed="block",Md="frameless",Hd=mt`
             :host([readonly]) .root {
                 border-color: transparent;
             }
-
-            .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
         `),Gr(mt`
             ${""}
             .control::-ms-reveal {