@ni/nimble-components 11.0.2 → 11.0.3

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

@@ -2662,35 +2662,66 @@ const hd=mt`
         font: ${Jn};
         height: ${yn};
         position: relative;
+        justify-content: center;
         user-select: none;
         min-width: 250px;
         outline: none;
         vertical-align: top;
+        --ni-private-hover-indicator-width: 2px;
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
     }
 
-    .listbox {
-        box-sizing: border-box;
-        display: inline-flex;
-        flex-direction: column;
-        left: 0;
-        overflow-y: auto;
+    :host::before {
+        content: '';
         position: absolute;
-        width: 100%;
-        --ni-private-listbox-padding: 4px;
-        max-height: calc(
-            var(--ni-private-select-max-height) - 2 *
-                var(--ni-private-listbox-padding)
+        bottom: calc(
+            var(--ni-private-hover-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
         );
-        z-index: 1;
-        padding: var(--ni-private-listbox-padding);
-        box-shadow: 0px 3px 3px ${wn};
-        border: 1px solid ${xn};
-        background-color: ${an};
-        background-clip: padding-box;
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${fn}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${Fr} ease-in;
     }
 
-    .listbox[hidden] {
-        display: none;
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(${Hc})::before {
+        width: 100%;
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${fn}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${Fr} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(:hover)::after,
+    :host(${Hc})::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover)::after {
+        width: 0px;
     }
 
     .control {
@@ -2711,23 +2742,40 @@ const hd=mt`
     }
 
     :host(.open:not(:hover)) .control {
-        border-bottom: ${_n} solid ${fn};
-        transition: border-bottom ${Fr}, padding-bottom ${Fr};
-    }
-
-    :host(:hover) .control {
-        border-bottom: 2px solid ${fn};
-        padding-bottom: 0px;
-        transition: border-bottom ${Fr}, padding-bottom ${Fr};
+        border-bottom-color: ${fn};
     }
 
     :host([disabled]) .control,
     :host([disabled]) .control:hover {
-        border-bottom: ${_n} solid ${tr};
-        padding-bottom: 1px;
+        border-bottom-color: ${tr};
         color: ${tr};
     }
 
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        --ni-private-listbox-padding: ${$n};
+        max-height: calc(
+            var(--ni-private-select-max-height) - 2 *
+                var(--ni-private-listbox-padding)
+        );
+        z-index: 1;
+        padding: var(--ni-private-listbox-padding);
+        box-shadow: 0px 3px 3px ${wn};
+        border: 1px solid ${xn};
+        background-color: ${an};
+        background-clip: padding-box;
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
     :host([open][position='above']) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;