@ni/nimble-components 33.5.0 → 33.6.0

package/dist/all-components-bundle.js

@@ -20581,6 +20581,10 @@ so this becomes the fallback color for the slot */ ''}
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${controlLabelFontColor};
+    }
+
     .control {
         align-items: center;
         cursor: pointer;
@@ -20602,6 +20606,11 @@ so this becomes the fallback color for the slot */ ''}
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        color: ${bodyFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.3);
+    }
+
     :host([error-visible]) .control,
     :host([error-visible][open]) .control,
     :host([error-visible][disabled]) .control {
@@ -20623,8 +20632,11 @@ so this becomes the fallback color for the slot */ ''}
         padding-left: ${mediumPadding};
     }
 
-    .selected-value[disabled]::placeholder {
-        color: ${bodyDisabledFontColor};
+    :host([disabled][appearance-readonly]) .selected-value {
+        cursor: text;
+        user-select: text;
+        -webkit-user-select: text;
+        padding-right: ${smallPadding};
     }
 
     .indicator {
@@ -20636,6 +20648,10 @@ so this becomes the fallback color for the slot */ ''}
         align-items: center;
     }
 
+    :host([disabled][appearance-readonly]) .indicator {
+        display: none;
+    }
+
     .indicator slot[name='indicator'] svg {
         width: ${iconSize};
         height: ${iconSize};
@@ -20737,10 +20753,6 @@ so this becomes the fallback color for the slot */ ''}
                 border-bottom-width: ${borderWidth};
                 padding-bottom: 0;
             }
-
-            :host([disabled]) .control {
-                border-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
         `), appearanceBehavior(DropdownAppearance.outline, css `
             .control {
                 border-width: ${borderWidth};
@@ -20805,12 +20817,6 @@ so this becomes the fallback color for the slot */ ''}
         );
     }
 
-    :host([disabled]) *,
-    :host([disabled]) {
-        ${userSelectNone}
-        color: ${bodyDisabledFontColor};
-    }
-
     .control {
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
@@ -20837,6 +20843,18 @@ so this becomes the fallback color for the slot */ ''}
         outline: none;
     }
 
+    .selected-value::placeholder {
+        color: ${placeholderFontColor};
+    }
+
+    :host([disabled]) .selected-value::placeholder {
+        color: ${bodyDisabledFontColor};
+    }
+
+    :host([disabled][appearance-readonly]) .selected-value::placeholder {
+        color: ${placeholderFontColor};
+    }
+
     [part='indicator'] {
         display: none;
     }
@@ -20847,6 +20865,10 @@ so this becomes the fallback color for the slot */ ''}
         padding-right: ${smallPadding};
     }
 
+    :host([disabled][appearance-readonly]) .end-slot-container {
+        display: none;
+    }
+
     .separator {
         display: inline;
         width: 2px;
@@ -21039,6 +21061,7 @@ so this becomes the fallback color for the slot */ ''}
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
+          this.appearanceReadOnly = false;
           /**
            * The open attribute.
            */
@@ -21634,6 +21657,9 @@ so this becomes the fallback color for the slot */ ''}
   __decorate([
       attr
   ], Combobox.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'appearance-readonly', mode: 'boolean' })
+  ], Combobox.prototype, "appearanceReadOnly", void 0);
   __decorate([
       attr({ attribute: 'autocomplete', mode: 'fromView' })
   ], Combobox.prototype, "autocomplete", void 0);
@@ -60686,6 +60712,10 @@ img.ProseMirror-separator {
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .selected-value.placeholder {
+        color: ${placeholderFontColor};
+    }
+
     .selected-value {
         order: 1;
     }
@@ -61237,6 +61267,7 @@ img.ProseMirror-separator {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
+          this.appearanceReadOnly = false;
           this.filterMode = FilterMode.none;
           this.clearable = false;
           this.loadingVisible = false;
@@ -62222,6 +62253,9 @@ img.ProseMirror-separator {
   __decorate([
       attr
   ], Select.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'appearance-readonly', mode: 'boolean' })
+  ], Select.prototype, "appearanceReadOnly", void 0);
   __decorate([
       attr({ attribute: 'position' })
   ], Select.prototype, "positionAttribute", void 0);