@ni/nimble-components 11.4.0 → 11.6.0

package/dist/all-components-bundle.js

@@ -14835,13 +14835,13 @@
         }
     }
     function getWarningColorForTheme(element) {
-        return getColorForTheme(element, Warning100LightUi, Warning100DarkUi, Warning100DarkUi);
+        return getColorForTheme(element, Warning100LightUi, Warning100DarkUi, White);
     }
     function getFailColorForTheme(element) {
-        return getColorForTheme(element, Fail100LightUi, Fail100DarkUi, Fail100DarkUi);
+        return getColorForTheme(element, Fail100LightUi, Fail100DarkUi, White);
     }
     function getPassColorForTheme(element) {
-        return getColorForTheme(element, Pass100LightUi, Pass100DarkUi, Pass100DarkUi);
+        return getColorForTheme(element, Pass100LightUi, Pass100DarkUi, White);
     }
     function getDefaultLineColorForTheme(element) {
         return getColorForTheme(element, Black91, Black15, White);
@@ -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;
@@ -20244,6 +20241,7 @@
 
     const styles$c = css `
     ${display('inline-block')}
+    ${styles$k}
 
     :host {
         font: ${bodyFont};
@@ -20252,6 +20250,9 @@
         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]) {
@@ -20275,9 +20276,10 @@
         display: flex;
         flex-direction: row;
         justify-content: center;
+        align-items: center;
         border-radius: 0px;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
-        gap: calc(${standardPadding} / 2);
+        padding: ${borderWidth};
     }
 
     .root:focus-within {
@@ -20288,6 +20290,10 @@
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host(.invalid) .root {
+        border-bottom-color: ${failColor};
+    }
+
     .root::before {
         ${ /* Empty string causes alignment issue */''}
         content: ' ';
@@ -20334,10 +20340,11 @@
         font: inherit;
         background: transparent;
         color: inherit;
-        height: ${controlHeight};
+        height: var(--ni-private-height-within-border);
         width: 100%;
         border: none;
         padding: 0px;
+        padding-left: calc(${standardPadding} / 2);
     }
 
     .control:hover,
@@ -20356,45 +20363,55 @@
         color: ${controlLabelFontColor};
     }
 
-    .control:focus-within::placeholder {
-        opacity: 1;
-    }
-
     .control[disabled]::placeholder {
         color: ${bodyDisabledFontColor};
     }
 
     .controls {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
+        display: contents;
+    }
+
+    ${
+/* We are using flex `order` to define the visual ordering of the inc/dec buttons and the invalid icon because they are not "interactive" i.e. part of the tab order */ ''}
+    .step-up {
+        order: 3;
+        padding-right: calc(${standardPadding} / 4);
+    }
+
+    .step-down {
+        order: 2;
     }
 
     .step-up-down-button {
         ${controlHeight.cssCustomProperty}: 24px;
     }
+
+    [part='end'] {
+        display: contents;
+    }
+
+    .error-icon {
+        order: 1;
+        padding-right: calc(${standardPadding} / 4);
+    }
 `.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
             .root {
                 border-bottom-width: ${borderWidth};
-                padding-top: ${borderWidth};
-                padding-left: ${borderWidth};
-                padding-right: ${borderWidth};
-            }
-
-            .control {
-                height: calc(${controlHeight} - 2 * ${borderWidth});
+                padding-bottom: 0;
             }
         `), appearanceBehavior(NumberFieldAppearance.block, css `
             .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
-                padding-left: ${borderWidth};
-                padding-right: ${borderWidth};
             }
 
             .root:focus-within,
             :host(.invalid) .root {
                 border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+
+            :host(:hover) .root {
+                padding-bottom: 0;
             }
 
             :host([disabled]) .root {
@@ -20403,10 +20420,7 @@
         `), appearanceBehavior(NumberFieldAppearance.outline, css `
             .root {
                 border-width: ${borderWidth};
-            }
-
-            .control {
-                height: calc(${controlHeight} - 2 * ${borderWidth});
+                padding: 0;
             }
         `));
 
@@ -20427,6 +20441,9 @@
     __decorate([
         attr
     ], NumberField.prototype, "appearance", void 0);
+    __decorate([
+        attr({ attribute: 'error-text' })
+    ], NumberField.prototype, "errorText", void 0);
     /**
      * A function that returns a number-field registration for configuring the component with a DesignSystem.
      *
@@ -20464,18 +20481,69 @@
             "Increment"
             <nimble-icon-add slot="start"></nimble-icon-add>
         </nimble-button>
+    `,
+        end: html `
+        <nimble-icon-exclamation-mark
+            class="error-icon fail"
+        ></nimble-icon-exclamation-mark>
+        ${errorTextTemplate}
     `
     });
     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) {
@@ -20503,6 +20571,9 @@
             }
         }
     }
+    __decorate([
+        attr
+    ], Select.prototype, "appearance", void 0);
     const nimbleSelect = Select.compose({
         baseName: 'select',
         baseClass: Select$1,
@@ -21148,6 +21219,7 @@
         justify-content: center;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         gap: calc(${standardPadding} / 2);
+        padding: ${borderWidth};
     }
 
     :host([readonly]) .root {
@@ -21209,7 +21281,7 @@
         background: transparent;
         color: inherit;
         padding: 0px;
-        height: ${controlHeight};
+        height: var(--ni-private-height-within-border);
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
@@ -21241,10 +21313,6 @@
         color: ${controlLabelFontColor};
     }
 
-    .control:not([readonly]):focus-within::placeholder {
-        opacity: 1;
-    }
-
     .control[disabled]::placeholder {
         color: ${bodyDisabledFontColor};
     }
@@ -21293,13 +21361,7 @@
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.underline, css `
             .root {
                 border-bottom-width: ${borderWidth};
-            }
-
-            .control {
-                height: var(--ni-private-height-within-border);
-                padding-top: ${borderWidth};
-                padding-left: ${borderWidth};
-                padding-right: ${borderWidth};
+                padding-bottom: 0;
             }
         `), appearanceBehavior(TextFieldAppearance.block, css `
             .root {
@@ -21314,11 +21376,11 @@
             .root:focus-within,
             :host(.invalid) .root {
                 border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
             }
 
-            .root:focus-within .control,
-            :host(.invalid) .control {
-                height: calc(${controlHeight} - ${borderWidth});
+            :host(:hover) .root {
+                padding-bottom: 0;
             }
 
             :host([readonly]) .root {
@@ -21332,10 +21394,7 @@
         `), appearanceBehavior(TextFieldAppearance.outline, css `
             .root {
                 border-width: ${borderWidth};
-            }
-
-            .control {
-                height: var(--ni-private-height-within-border);
+                padding: 0;
             }
         `), appearanceBehavior(TextFieldAppearance.frameless, css `
             .control {