@ni/spright-components 4.2.4 → 4.2.5

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

@@ -2882,12 +2882,11 @@ const Gg=Mt`
         display: none;
     }
 `,Zg=Mt`
-    ${Vs("inline-flex")}
+    ${Vs("inline-grid")}
     ${Gg}
 
     :host {
         font: ${rd};
-        align-items: center;
         cursor: pointer;
         outline: none;
         ${Pm}
@@ -2898,8 +2897,14 @@ const Gg=Mt`
         cursor: default;
     }
 
-    .container {
+    .outer-container {
+        height: 100%;
+        display: flex;
+        align-items: center;
         position: relative;
+    }
+
+    .container {
         display: grid;
         grid-template-columns: auto 1fr auto;
         grid-template-rows: ${ud} auto;
@@ -3019,25 +3024,27 @@ const Xg=Yg.compose({baseName:"checkbox",baseClass:Vn,template:(t,e)=>Q`
         @click="${(t,e)=>t.clickHandler(e.event)}"
         class="${t=>t.readOnly?"readonly":""} ${t=>t.checked?"checked":""} ${t=>t.indeterminate?"indeterminate":""}"
     >
-        <div part="container" class="container">
-            <div part="control" class="control">
-                <slot name="checked-indicator">
-                    ${e.checkedIndicator||""}
-                </slot>
-                <slot name="indeterminate-indicator">
-                    ${e.indeterminateIndicator||""}
-                </slot>
+        <div class="outer-container">
+            <div part="container" class="container">
+                <div part="control" class="control">
+                    <slot name="checked-indicator">
+                        ${e.checkedIndicator||""}
+                    </slot>
+                    <slot name="indeterminate-indicator">
+                        ${e.indeterminateIndicator||""}
+                    </slot>
+                </div>
+                <label
+                    part="label"
+                    class="${t=>t.defaultSlottedNodes?.length?"label":"label label__hidden"}"
+                >
+                    <slot ${ie("defaultSlottedNodes")}></slot>
+                </label>
+                <${$g}
+                    severity="error"
+                    class="error-icon"
+                ></${$g}>
             </div>
-            <label
-                part="label"
-                class="${t=>t.defaultSlottedNodes?.length?"label":"label label__hidden"}"
-            >
-                <slot ${ie("defaultSlottedNodes")}></slot>
-            </label>
-            <${$g}
-                severity="error"
-                class="error-icon"
-            ></${$g}>
             ${Kg}
         </div>
     </template>