@ni/spright-components 5.2.1 → 5.2.3

package/dist/all-components-bundle.js

@@ -26381,7 +26381,10 @@ so this becomes the fallback color for the slot */ ''}
 
     :host([disabled]) {
         color: ${bodyDisabledFontColor};
-        cursor: default;
+    }
+
+    :host([disabled][appearance-readonly]) {
+        color: ${bodyFontColor};
     }
 
     .label {
@@ -26394,6 +26397,10 @@ so this becomes the fallback color for the slot */ ''}
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${controlLabelFontColor};
+    }
+
     .root {
         position: relative;
         display: flex;
@@ -26479,14 +26486,22 @@ so this becomes the fallback color for the slot */ ''}
         outline: none;
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     .control::placeholder {
         color: ${controlLabelFontColor};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${controlLabelFontColor};
+    }
+
     .controls {
         display: contents;
     }
@@ -26648,6 +26663,7 @@ so this becomes the fallback color for the slot */ ''}
       constructor() {
           super(...arguments);
           this.appearance = NumberFieldAppearance.underline;
+          this.appearanceReadOnly = false;
       }
       connectedCallback() {
           super.connectedCallback();
@@ -26658,6 +26674,9 @@ so this becomes the fallback color for the slot */ ''}
   __decorate([
       attr
   ], NumberField.prototype, "appearance", void 0);
+  __decorate([
+      attr({ attribute: 'appearance-readonly', mode: 'boolean' })
+  ], NumberField.prototype, "appearanceReadOnly", void 0);
   /**
    * A function that returns a number-field registration for configuring the component with a DesignSystem.
    *
@@ -74554,6 +74573,10 @@ focus outline in that case.
         color: ${bodyDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) {
+        color: ${bodyFontColor};
+    }
+
     .label {
         display: block;
         color: ${controlLabelFontColor};
@@ -74564,6 +74587,10 @@ focus outline in that case.
         color: ${controlLabelDisabledFontColor};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${controlLabelFontColor};
+    }
+
     .container {
         display: flex;
         justify-content: center;
@@ -74640,6 +74667,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};
     }
@@ -74652,10 +74683,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;
     }
@@ -74695,6 +74730,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};
             }
@@ -74777,6 +74817,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
@@ -74847,6 +74888,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);
@@ -75017,6 +75061,10 @@ focus outline in that case.
         text-overflow: clip;
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     .control::placeholder {
         color: ${controlLabelFontColor};
     }