@ni/nimble-components 11.0.1 → 11.0.4

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

@@ -2252,7 +2252,7 @@ const nd=od.compose({baseName:"menu-button",template:t=>X`
         <${t.tagFor(ed)}
             part="button"
             appearance="${t=>t.appearance}"
-            content-hidden="${t=>t.contentHidden}"
+            ?content-hidden="${t=>t.contentHidden}"
             ?checked="${t=>t.open}"
             ?disabled="${t=>t.disabled}"
             aria-haspopup="true"
@@ -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;
@@ -2629,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 {
@@ -2678,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;
@@ -3388,6 +3469,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 +3496,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 +3514,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 +3561,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 +3602,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 +3687,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 +3724,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 +3745,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 {