@ni/nimble-components 33.3.0 → 33.4.0

package/dist/all-components-bundle.min.js

@@ -12466,6 +12466,10 @@ const KB="outline",YB="block",XB=Mt`
         color: ${Gc};
     }
 
+    :host([disabled][appearance-readonly]) {
+        color: ${Wc};
+    }
+
     .label {
         display: block;
         color: ${pd};
@@ -12476,6 +12480,10 @@ const KB="outline",YB="block",XB=Mt`
         color: ${fd};
     }
 
+    :host([disabled][appearance-readonly]) .label {
+        color: ${pd};
+    }
+
     .container {
         display: flex;
         justify-content: center;
@@ -12551,6 +12559,10 @@ const KB="outline",YB="block",XB=Mt`
         border-color: rgba(${cl}, 0.1);
     }
 
+    :host([disabled][appearance-readonly]) .control {
+        cursor: text;
+    }
+
     :host([error-visible]) .control {
         border-bottom-color: ${dl};
     }
@@ -12563,10 +12575,14 @@ const KB="outline",YB="block",XB=Mt`
         color: ${pd};
     }
 
-    .control[disabled]::placeholder {
+    :host([disabled]) .control::placeholder {
         color: ${fd};
     }
 
+    :host([disabled][appearance-readonly]) .control::placeholder {
+        color: ${pd};
+    }
+
     :host([resize='both']) .control {
         resize: both;
     }
@@ -12606,6 +12622,11 @@ const KB="outline",YB="block",XB=Mt`
                 background-color: rgba(${cl}, 0.1);
             }
 
+            :host([disabled][appearance-readonly]) .control {
+                border-color: rgba(${cl}, 0.1);
+                background-color: transparent;
+            }
+
             :host([error-visible][disabled]) .control {
                 border-bottom-color: ${dl};
             }
@@ -12618,7 +12639,7 @@ const KB="outline",YB="block",XB=Mt`
         <slot ${ie("defaultSlottedNodes")}></slot>
     </label>
 `)
-class QB extends(Ug(hv(ws))){constructor(){super(...arguments),this.appearance=KB,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.onResize())),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}onTextAreaInput(){this.handleTextInput(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(t,e){super.valueChanged(t,e),this.queueUpdateScrollbarWidth()}onResize(){this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate((()=>this.updateScrollbarWidth()))))}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}}t([ft],QB.prototype,"appearance",void 0),t([C],QB.prototype,"scrollbarWidth",void 0)
+class QB extends(Ug(hv(ws))){constructor(){super(...arguments),this.appearance=KB,this.appearanceReadOnly=!1,this.scrollbarWidth=-1,this.updateScrollbarWidthQueued=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.onResize())),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}onTextAreaInput(){this.handleTextInput(),this.queueUpdateScrollbarWidth()}placeholderChanged(){this.queueUpdateScrollbarWidth()}valueChanged(t,e){super.valueChanged(t,e),this.queueUpdateScrollbarWidth()}onResize(){this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}queueUpdateScrollbarWidth(){this.$fastController.isConnected&&(this.updateScrollbarWidthQueued||(this.updateScrollbarWidthQueued=!0,b.queueUpdate((()=>this.updateScrollbarWidth()))))}updateScrollbarWidth(){this.updateScrollbarWidthQueued=!1,this.scrollbarWidth=this.control.offsetWidth-this.control.clientWidth}}t([ft],QB.prototype,"appearance",void 0),t([ft({attribute:"appearance-readonly",mode:"boolean"})],QB.prototype,"appearanceReadOnly",void 0),t([C],QB.prototype,"scrollbarWidth",void 0)
 const tP=QB.compose({baseName:"text-area",baseClass:ws,template:()=>Q`
     ${JB}
     <div class="container">