@ni/nimble-components 11.9.0 → 11.10.0

package/dist/all-components-bundle.js

@@ -16423,6 +16423,16 @@
     }
     registerIcon('icon-arrow-expander-down', IconArrowExpanderDown);
 
+    ({
+        above: SelectPosition.above,
+        below: SelectPosition.below
+    });
+    const DropdownAppearance = {
+        underline: 'underline',
+        outline: 'outline',
+        block: 'block'
+    };
+
     const styles$m = css `
     ${display('inline-flex')}
 
@@ -16476,10 +16486,6 @@
         transition: width ${smallDelay} ease-in;
     }
 
-    :host(.invalid)::after {
-        border-bottom-color: ${failColor};
-    }
-
     @media (prefers-reduced-motion) {
         :host::after {
             transition-duration: 0s;
@@ -16502,10 +16508,9 @@
         display: flex;
         min-height: 100%;
         width: 100%;
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         background-color: transparent;
-        padding-left: 8px;
-        padding-bottom: 1px;
+        padding: ${borderWidth};
     }
 
     :host(.open:not(:hover)) .control {
@@ -16568,6 +16573,12 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        padding: 0px;
+        padding-left: calc(${standardPadding} / 2);
+    }
+
+    .selected-value[disabled]::placeholder {
+        color: ${bodyDisabledFontColor};
     }
 
     .indicator {
@@ -16607,7 +16618,34 @@
     ::slotted(option) {
         flex: none;
     }
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
+            .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+
+            :host([disabled]) .control {
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+        `), appearanceBehavior(DropdownAppearance.outline, css `
+            .control {
+                border-width: ${borderWidth};
+                padding: 0;
+            }
+        `), appearanceBehavior(DropdownAppearance.block, css `
+            .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+
+            .control:focus-within {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+
+            :host([disabled]) .control {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `));
 
     const styles$l = css `
     .error-icon {
@@ -16654,6 +16692,9 @@
     :host {
         --ni-private-hover-bottom-border-width: 2px;
         --ni-private-bottom-border-width: 1px;
+        --ni-private-height-within-border: calc(
+            ${controlHeight} - 2 * ${borderWidth}
+        );
     }
 
     :host([disabled]) *,
@@ -16662,6 +16703,10 @@
         color: ${bodyDisabledFontColor};
     }
 
+    :host(.invalid)::after {
+        border-bottom-color: ${failColor};
+    }
+
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -16678,8 +16723,9 @@
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    :host(.invalid[disabled]) .control {
-        border-color: ${failColor};
+    :host(.invalid[disabled]) .control,
+    :host(.open.invalid) .control {
+        border-bottom-color: ${failColor};
     }
 
     .selected-value {
@@ -16690,7 +16736,7 @@
         margin: auto 0;
         width: 100%;
         font-size: inherit;
-        padding-left: 0px;
+        height: var(--ni-private-height-within-border);
     }
 
     .selected-value:hover,
@@ -16731,7 +16777,12 @@
     :host(:empty) .listbox {
         display: none;
     }
-`;
+`.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
+            :host(.invalid) .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+        `));
 
     /**
      * A nimble-styed HTML combobox
@@ -16739,6 +16790,7 @@
     class Combobox extends Combobox$1 {
         constructor() {
             super(...arguments);
+            this.appearance = DropdownAppearance.underline;
             this.valueUpdatedByInput = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
@@ -16871,6 +16923,9 @@
             }
         }
     }
+    __decorate([
+        attr
+    ], Combobox.prototype, "appearance", void 0);
     __decorate([
         observable
     ], Combobox.prototype, "dropdownButton", void 0);
@@ -20820,50 +20875,9 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    ({
-        above: SelectPosition.above,
-        below: SelectPosition.below
-    });
-    const DropdownAppearance = {
-        underline: 'underline',
-        outline: 'outline',
-        block: 'block'
-    };
-
     const styles$b = css `
     ${styles$m}
-`.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
-            .control {
-                padding-top: ${borderWidth};
-                padding-left: calc(${borderWidth} + ${standardPadding} / 2);
-                padding-right: ${borderWidth};
-            }
-
-            :host([disabled]) .control {
-                border-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
-        `), appearanceBehavior(DropdownAppearance.outline, css `
-            .control {
-                border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-            }
-
-            :host(.invalid) .errortext {
-                top: calc(${controlHeight} - ${borderWidth});
-            }
-        `), appearanceBehavior(DropdownAppearance.block, css `
-            .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.1);
-                padding-left: calc(${borderWidth} + ${standardPadding} / 2);
-                padding-right: ${borderWidth};
-                padding-bottom: calc(${borderWidth});
-                border-bottom: ${borderWidth}
-                    rgba(${borderRgbPartialColor}, 0.07);
-            }
-
-            :host([disabled]) .control {
-                background-color: rgba(${borderRgbPartialColor}, 0.07);
-            }
-        `));
+`;
 
     /**
      * A nimble-styled HTML select