@ni/nimble-components 11.0.0 → 11.0.3

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;
@@ -18696,36 +18729,66 @@
         font: ${bodyFont};
         height: ${controlHeight};
         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;
+        bottom: calc(
+            var(--ni-private-hover-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(${focusVisible})::before {
         width: 100%;
-        ${
-/*
- * The --max-height custom property is defined by fast-foundation.
- * See: https://github.com/microsoft/fast/blob/af1f8736ae9ff54a7449324bad952865981d1ece/packages/web-components/fast-foundation/src/select/select.ts#L199
- */ ''}
-        max-height: calc(var(--max-height) - ${controlHeight});
-        z-index: 1;
-        padding: 4px;
-        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
-        border: 1px solid ${popupBorderColor};
-        background-color: ${applicationBackgroundColor};
-        background-clip: padding-box;
     }
 
-    .listbox[hidden] {
-        display: none;
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        justify-self: center;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(:hover)::after,
+    :host(${focusVisible})::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover)::after {
+        width: 0px;
     }
 
     .control {
@@ -18746,23 +18809,40 @@
     }
 
     :host(.open:not(:hover)) .control {
-        border-bottom: ${borderWidth} solid ${borderHoverColor};
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
-    }
-
-    :host(:hover) .control {
-        border-bottom: 2px solid ${borderHoverColor};
-        padding-bottom: 0px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        border-bottom-color: ${borderHoverColor};
     }
 
     :host([disabled]) .control,
     :host([disabled]) .control:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        padding-bottom: 1px;
+        border-bottom-color: ${bodyDisabledFontColor};
         color: ${bodyDisabledFontColor};
     }
 
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        --ni-private-listbox-padding: ${smallPadding};
+        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 ${popupBoxShadowColor};
+        border: 1px solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+        background-clip: padding-box;
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
     :host([open][position='above']) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -18841,6 +18921,7 @@
                 return;
             }
             super.setPositioning();
+            this.updateListboxMaxHeightCssVariable();
         }
         // Workaround for https://github.com/microsoft/fast/issues/5773
         slottedOptionsChanged(prev, next) {
@@ -18850,6 +18931,14 @@
                 this.value = value;
             }
         }
+        maxHeightChanged() {
+            this.updateListboxMaxHeightCssVariable();
+        }
+        updateListboxMaxHeightCssVariable() {
+            if (this.listbox) {
+                this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
+            }
+        }
     }
     const nimbleSelect = Select.compose({
         baseName: 'select',
@@ -19464,6 +19553,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]) {
@@ -19487,22 +19580,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 {
@@ -19517,21 +19598,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};
     }
@@ -19579,10 +19645,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;
@@ -19626,6 +19689,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;
     }
@@ -19681,46 +19774,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 {
@@ -19731,28 +19811,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};
             }
@@ -19760,10 +19832,6 @@
             :host([readonly]) .root {
                 border-color: transparent;
             }
-
-            .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
         `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {