@ni/nimble-components 11.4.1 → 11.5.0

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

@@ -2894,6 +2894,7 @@ const Xd=class extends li{}.compose({baseName:"menu-item",baseClass:li,template:
 js.getOrCreate().withPrefix("nimble").register(Xd())
 const Yd="underline",Gd="outline",Qd="block",Jd=mt`
     ${so("inline-block")}
+    ${Mh}
 
     :host {
         font: ${_r};
@@ -2902,6 +2903,9 @@ const Yd="underline",Gd="outline",Qd="block",Jd=mt`
         color: ${zr};
         height: calc(${Qn} + ${Xn});
         --ni-private-hover-indicator-width: calc(${Jn} + 1px);
+        --ni-private-height-within-border: calc(
+            ${Xn} - 2 * ${Jn}
+        );
     }
 
     :host([disabled]) {
@@ -2925,9 +2929,10 @@ const Yd="underline",Gd="outline",Qd="block",Jd=mt`
         display: flex;
         flex-direction: row;
         justify-content: center;
+        align-items: center;
         border-radius: 0px;
         border: 0px solid rgba(${Dn}, 0.3);
-        gap: calc(${Gn} / 2);
+        padding: ${Jn};
     }
 
     .root:focus-within {
@@ -2938,6 +2943,10 @@ const Yd="underline",Gd="outline",Qd="block",Jd=mt`
         border-color: rgba(${Dn}, 0.1);
     }
 
+    :host(.invalid) .root {
+        border-bottom-color: ${Fn};
+    }
+
     .root::before {
         ${""}
         content: ' ';
@@ -2984,10 +2993,11 @@ const Yd="underline",Gd="outline",Qd="block",Jd=mt`
         font: inherit;
         background: transparent;
         color: inherit;
-        height: ${Xn};
+        height: var(--ni-private-height-within-border);
         width: 100%;
         border: none;
         padding: 0px;
+        padding-left: calc(${Gn} / 2);
     }
 
     .control:hover,
@@ -3006,45 +3016,54 @@ const Yd="underline",Gd="outline",Qd="block",Jd=mt`
         color: ${Nr};
     }
 
-    .control:focus-within::placeholder {
-        opacity: 1;
-    }
-
     .control[disabled]::placeholder {
         color: ${Ir};
     }
 
     .controls {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-        align-items: center;
+        display: contents;
+    }
+
+    ${""}
+    .step-up {
+        order: 3;
+        padding-right: calc(${Gn} / 4);
+    }
+
+    .step-down {
+        order: 2;
     }
 
     .step-up-down-button {
         ${Xn.cssCustomProperty}: 24px;
     }
+
+    [part='end'] {
+        display: contents;
+    }
+
+    .error-icon {
+        order: 1;
+        padding-right: calc(${Gn} / 4);
+    }
 `.withBehaviors(fh(Yd,mt`
             .root {
                 border-bottom-width: ${Jn};
-                padding-top: ${Jn};
-                padding-left: ${Jn};
-                padding-right: ${Jn};
-            }
-
-            .control {
-                height: calc(${Xn} - 2 * ${Jn});
+                padding-bottom: 0;
             }
         `),fh(Qd,mt`
             .root {
                 background-color: rgba(${Dn}, 0.1);
-                padding-left: ${Jn};
-                padding-right: ${Jn};
             }
 
             .root:focus-within,
             :host(.invalid) .root {
                 border-bottom-width: ${Jn};
+                padding-bottom: 0;
+            }
+
+            :host(:hover) .root {
+                padding-bottom: 0;
             }
 
             :host([disabled]) .root {
@@ -3053,13 +3072,10 @@ const Yd="underline",Gd="outline",Qd="block",Jd=mt`
         `),fh(Gd,mt`
             .root {
                 border-width: ${Jn};
-            }
-
-            .control {
-                height: calc(${Xn} - 2 * ${Jn});
+                padding: 0;
             }
         `))
-class Zd extends fi{constructor(){super(...arguments),this.appearance=Yd}connectedCallback(){super.connectedCallback(),this.control.setAttribute("role","spinbutton")}}kn([ot],Zd.prototype,"appearance",void 0)
+class Zd extends fi{constructor(){super(...arguments),this.appearance=Yd}connectedCallback(){super.connectedCallback(),this.control.setAttribute("role","spinbutton")}}kn([ot],Zd.prototype,"appearance",void 0),kn([ot({attribute:"error-text"})],Zd.prototype,"errorText",void 0)
 const tu=Zd.compose({baseName:"number-field",baseClass:fi,template:(t,e)=>X`
     <template class="${t=>t.readOnly?"readonly":""}">
         <label
@@ -3155,6 +3171,11 @@ const tu=Zd.compose({baseName:"number-field",baseClass:fi,template:(t,e)=>X`
             "Increment"
             <nimble-icon-add slot="start"></nimble-icon-add>
         </nimble-button>
+    `,end:X`
+        <nimble-icon-exclamation-mark
+            class="error-icon fail"
+        ></nimble-icon-exclamation-mark>
+        ${Ih}
     `})
 js.getOrCreate().withPrefix("nimble").register(tu())
 const eu=mt`
@@ -3820,6 +3841,7 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
         justify-content: center;
         border: 0px solid rgba(${Dn}, 0.3);
         gap: calc(${Gn} / 2);
+        padding: ${Jn};
     }
 
     :host([readonly]) .root {
@@ -3881,7 +3903,7 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
         background: transparent;
         color: inherit;
         padding: 0px;
-        height: ${Xn};
+        height: var(--ni-private-height-within-border);
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
@@ -3910,10 +3932,6 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
         color: ${Nr};
     }
 
-    .control:not([readonly]):focus-within::placeholder {
-        opacity: 1;
-    }
-
     .control[disabled]::placeholder {
         color: ${Ir};
     }
@@ -3962,13 +3980,7 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
 `.withBehaviors(fh(xu,mt`
             .root {
                 border-bottom-width: ${Jn};
-            }
-
-            .control {
-                height: var(--ni-private-height-within-border);
-                padding-top: ${Jn};
-                padding-left: ${Jn};
-                padding-right: ${Jn};
+                padding-bottom: 0;
             }
         `),fh($u,mt`
             .root {
@@ -3983,11 +3995,11 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
             .root:focus-within,
             :host(.invalid) .root {
                 border-bottom-width: ${Jn};
+                padding-bottom: 0;
             }
 
-            .root:focus-within .control,
-            :host(.invalid) .control {
-                height: calc(${Xn} - ${Jn});
+            :host(:hover) .root {
+                padding-bottom: 0;
             }
 
             :host([readonly]) .root {
@@ -4001,10 +4013,7 @@ const xu="underline",yu="outline",$u="block",Cu="frameless",ku=mt`
         `),fh(yu,mt`
             .root {
                 border-width: ${Jn};
-            }
-
-            .control {
-                height: var(--ni-private-height-within-border);
+                padding: 0;
             }
         `),fh(Cu,mt`
             .control {