@ni/spright-components 4.1.5 → 4.1.7

package/dist/all-components-bundle.js

@@ -26334,6 +26334,7 @@ so this becomes the fallback color for the slot */ ''}
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([readonly]) .root,
     :host([disabled]) .root {
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
@@ -26375,6 +26376,7 @@ so this becomes the fallback color for the slot */ ''}
         width: 100%;
     }
 
+    :host([readonly]:hover) .root::after,
     :host([disabled]:hover) .root::after {
         width: 0px;
     }
@@ -26455,11 +26457,20 @@ so this becomes the fallback color for the slot */ ''}
             }
 
             :host(:hover) .root {
+                border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
 
+            :host([readonly]) .root,
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
+                border-color: transparent;
+            }
+
+            :host([error-visible][readonly]) .root,
+            :host([error-visible][disabled]) .root {
+                padding-bottom: 0;
+                border-bottom-color: ${failColor};
             }
         `), appearanceBehavior(NumberFieldAppearance.outline, css `
             .root {
@@ -60601,6 +60612,9 @@ img.ProseMirror-separator {
           this.availableViewportHeight = 0;
           this._value = '';
           this.forcedPosition = false;
+          this.selectedOptionObserver = new MutationObserver(() => {
+              this.updateDisplayValue();
+          });
       }
       /**
        * The component is collapsible when in single-selection mode with no size attribute.
@@ -60626,6 +60640,11 @@ img.ProseMirror-separator {
           if (this.open) {
               this.initializeOpenState();
           }
+          this.observeSelectedOptionTextContent();
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.selectedOptionObserver?.disconnect();
       }
       get value() {
           Observable.track(this, 'value');
@@ -61474,6 +61493,7 @@ img.ProseMirror-separator {
       updateValue(shouldEmit) {
           if (this.$fastController.isConnected) {
               this.value = this.firstSelectedOption?.value ?? '';
+              this.observeSelectedOptionTextContent();
           }
           if (shouldEmit) {
               this.$emit('input');
@@ -61524,6 +61544,20 @@ img.ProseMirror-separator {
           this.setPositioning();
           this.focusAndScrollOptionIntoView();
       }
+      observeSelectedOptionTextContent() {
+          this.selectedOptionObserver?.disconnect();
+          if (this.selectedIndex === -1) {
+              return;
+          }
+          const selectedOption = this.firstSelectedOption;
+          if (selectedOption) {
+              this.selectedOptionObserver?.observe(selectedOption, {
+                  characterData: true,
+                  subtree: true,
+                  childList: true
+              });
+          }
+      }
   }
   __decorate$1([
       attr