@ni/nimble-components 33.4.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);
@@ -26360,7 +26386,8 @@ so this becomes the fallback color for the slot */ ''}
   const NumberFieldAppearance = {
       underline: 'underline',
       outline: 'outline',
-      block: 'block'
+      block: 'block',
+      frameless: 'frameless'
   };
 
   const styles$y = css `
@@ -26567,6 +26594,15 @@ so this becomes the fallback color for the slot */ ''}
                 border-width: ${borderWidth};
                 padding: 0;
             }
+        `), appearanceBehavior(NumberFieldAppearance.frameless, css `
+            .root {
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            :host([full-bleed]) .control {
+                padding-left: 0px;
+            }
         `));
 
   const labelTemplate$4 = createRequiredVisibleLabelTemplate(html `<label
@@ -26663,6 +26699,7 @@ so this becomes the fallback color for the slot */ ''}
       constructor() {
           super(...arguments);
           this.appearance = NumberFieldAppearance.underline;
+          this.fullBleed = false;
           this.appearanceReadOnly = false;
       }
       connectedCallback() {
@@ -26674,6 +26711,9 @@ so this becomes the fallback color for the slot */ ''}
   __decorate([
       attr
   ], NumberField.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'full-bleed', mode: 'boolean' })
+  ], NumberField.prototype, "fullBleed", void 0);
   __decorate([
       attr({ attribute: 'appearance-readonly', mode: 'boolean' })
   ], NumberField.prototype, "appearanceReadOnly", void 0);
@@ -60672,6 +60712,10 @@ img.ProseMirror-separator {
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .selected-value.placeholder {
+        color: ${placeholderFontColor};
+    }
+
     .selected-value {
         order: 1;
     }
@@ -61223,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;
@@ -62208,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);