@ni/nimble-components 15.0.0 → 15.1.0

package/dist/all-components-bundle.js

@@ -16793,6 +16793,10 @@
         width: calc(100% - 8px);
     }
 
+    :host([error-visible]):before {
+        border-bottom-color: ${failColor};
+    }
+
     :host::after {
         content: '';
         position: absolute;
@@ -16816,6 +16820,10 @@
         width: 100%;
     }
 
+    :host([error-visible]):after {
+        border-bottom-color: ${failColor};
+    }
+
     :host([disabled]:hover)::after {
         width: 0px;
     }
@@ -16842,6 +16850,12 @@
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host([error-visible]) .control,
+    :host([error-visible][open]) .control,
+    :host([error-visible][disabled]) .control {
+        border-bottom-color: ${failColor};
+    }
+
     .listbox {
         box-sizing: border-box;
         display: inline-flex;
@@ -17022,10 +17036,6 @@
         color: ${bodyDisabledFontColor};
     }
 
-    :host([error-visible])::after {
-        border-bottom-color: ${failColor};
-    }
-
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -17034,19 +17044,6 @@
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([error-visible]) .control {
-        border-bottom: var(--ni-private-bottom-border-width) solid ${failColor};
-    }
-
-    :host([disabled]) .control {
-        border-color: rgba(${borderRgbPartialColor}, 0.1);
-    }
-
-    :host([error-visible][disabled]) .control,
-    :host([error-visible][open]) .control {
-        border-bottom-color: ${failColor};
-    }
-
     .selected-value {
         -webkit-appearance: none;
         background: transparent;
@@ -20317,7 +20314,32 @@
 
     const styles$b = css `
     ${styles$n}
-`;
+    ${styles$m}
+
+    ${
+/* We are using flex `order` to define the visual ordering of the selected value,
+ error icon, and dropdown arrow because they are not "interactive" i.e. part of the tab order */ ''}
+    [part='selected-value'] {
+        order: 1;
+    }
+
+    [part='indicator'] {
+        order: 3;
+    }
+
+    .error-icon {
+        order: 2;
+    }
+
+    .end {
+        display: contents;
+    }
+`.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
+            :host([error-visible]) .control {
+                border-bottom-width: ${borderWidth};
+                padding-bottom: 0;
+            }
+        `));
 
     /**
      * A nimble-styled HTML select
@@ -20326,6 +20348,7 @@
         constructor() {
             super(...arguments);
             this.appearance = DropdownAppearance.underline;
+            this.errorVisible = false;
         }
         // Workaround for https://github.com/microsoft/fast/issues/5123
         setPositioning() {
@@ -20357,12 +20380,25 @@
     __decorate([
         attr
     ], Select.prototype, "appearance", void 0);
+    __decorate([
+        attr({ attribute: 'error-text' })
+    ], Select.prototype, "errorText", void 0);
+    __decorate([
+        attr({ attribute: 'error-visible', mode: 'boolean' })
+    ], Select.prototype, "errorVisible", void 0);
     const nimbleSelect = Select.compose({
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
         styles: styles$b,
-        indicator: arrowExpanderDown16X16.data
+        indicator: arrowExpanderDown16X16.data,
+        end: html `
+        <${DesignSystem.tagFor(IconExclamationMark)}
+            severity="error"
+            class="error-icon"
+        ></${DesignSystem.tagFor(IconExclamationMark)}>
+        ${errorTextTemplate}
+    `
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());