@ni/nimble-components 11.5.0 → 11.6.0

package/dist/all-components-bundle.js

@@ -16283,10 +16283,7 @@
     :host::before {
         content: '';
         position: absolute;
-        bottom: calc(
-            var(--ni-private-hover-indicator-width) +
-                var(--ni-private-indicator-lines-gap)
-        );
+        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));
         width: 0px;
         height: 0px;
         justify-self: center;
@@ -20494,14 +20491,59 @@
     });
     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$l}
-`;
+`.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-styed HTML select
+     * A nimble-styled HTML select
      */
     class Select extends Select$1 {
+        constructor() {
+            super(...arguments);
+            this.appearance = DropdownAppearance.underline;
+        }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
             if (!this.$fastController.isConnected) {
@@ -20529,6 +20571,9 @@
             }
         }
     }
+    __decorate([
+        attr
+    ], Select.prototype, "appearance", void 0);
     const nimbleSelect = Select.compose({
         baseName: 'select',
         baseClass: Select$1,