@ni/nimble-components 33.3.0 → 33.5.0

package/dist/all-components-bundle.js

@@ -26360,7 +26360,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 +26568,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 +26673,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 +26685,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);
@@ -74573,6 +74587,10 @@ focus outline in that case.
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) {
+        color: ${bodyFontColor};
+    }
+
     .label {
         display: block;
         color: ${controlLabelFontColor};
@@ -74583,6 +74601,10 @@ focus outline in that case.
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${controlLabelFontColor};
+    }
+
     .container {
         display: flex;
         justify-content: center;
@@ -74659,6 +74681,10 @@ focus outline in that case.
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     :host([error-visible]) .control {
         border-bottom-color: ${failColor};
     }
@@ -74671,10 +74697,14 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${controlLabelFontColor};
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }
@@ -74714,6 +74744,11 @@ focus outline in that case.
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
             }
 
+            :host([disabled][appearance-readonly]) .control {
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+                background-color: transparent;
+            }
+
             :host([error-visible][disabled]) .control {
                 border-bottom-color: ${failColor};
             }
@@ -74796,6 +74831,7 @@ focus outline in that case.
            * HTML Attribute: appearance
            */
           this.appearance = TextAreaAppearance.outline;
+          this.appearanceReadOnly = false;
           /**
            * The width of the vertical scrollbar, if displayed.
            * @internal
@@ -74866,6 +74902,9 @@ focus outline in that case.
   __decorate([
       attr
   ], TextArea.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'appearance-readonly', mode: 'boolean' })
+  ], TextArea.prototype, "appearanceReadOnly", void 0);
   __decorate([
       observable
   ], TextArea.prototype, "scrollbarWidth", void 0);