Correct the position of error text on the nimble-checkbox (#2486)

# Pull Request

## 🤨 Rationale

The vertical spacing between the checkbox and its error text is
incorrect, so this PR is fixing it. According to [the visual design
spec](https://www.figma.com/design/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?node-id=1295-63171&node-type=frame&t=ODewc6hH8Cq1LC4n-0),
the error text on the checkbox should be 2px below the checkbox's height
(likely 32px or 24px based on the control height token). However, it was
incorrectly implemented to put the error text 2px below the checkbox
control (i.e. the square indicator).

## 👩‍💻 Implementation

Update the template & styling for the checkbox to position the
error-text correctly.

## 🧪 Testing

Manually tested
Verified chromatic diffs look correct

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

change/@ni-nimble-components-fc952a0e-3831-4c76-b9f3-98273cbeb66c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Correct the position of error text on the nimble-checkbox",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/checkbox/styles.ts

@@ -21,12 +21,11 @@ import { userSelectNone } from '../utilities/style/user-select';
 import { styles as errorStyles } from '../patterns/error/styles';
 
 export const styles = css`
-    ${display('inline-flex')}
+    ${display('inline-grid')}
     ${errorStyles}
 
     :host {
         font: ${bodyFont};
-        align-items: center;
         cursor: pointer;
         outline: none;
         ${userSelectNone}
@@ -37,8 +36,14 @@ export const styles = css`
         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: ${bodyFontLineHeight} auto;

packages/nimble-components/src/checkbox/template.ts

@@ -22,27 +22,29 @@ CheckboxOptions
         @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
         class="${x => (x.readOnly ? 'readonly' : '')} ${x => (x.checked ? 'checked' : '')} ${x => (x.indeterminate ? 'indeterminate' : '')}"
     >
-        <div part="container" class="container">
-            <div part="control" class="control">
-                <slot name="checked-indicator">
-                    ${definition.checkedIndicator || ''}
-                </slot>
-                <slot name="indeterminate-indicator">
-                    ${definition.indeterminateIndicator || ''}
-                </slot>
-            </div>
-            <label
-                part="label"
-                class="${x => (x.defaultSlottedNodes?.length
+        <div class="outer-container">
+            <div part="container" class="container">
+                <div part="control" class="control">
+                    <slot name="checked-indicator">
+                        ${definition.checkedIndicator || ''}
+                    </slot>
+                    <slot name="indeterminate-indicator">
+                        ${definition.indeterminateIndicator || ''}
+                    </slot>
+                </div>
+                <label
+                    part="label"
+                    class="${x => (x.defaultSlottedNodes?.length
         ? 'label'
         : 'label label__hidden')}"
-            >
-                <slot ${slotted('defaultSlottedNodes')}></slot>
-            </label>
-            <${iconExclamationMarkTag}
-                severity="error"
-                class="error-icon"
-            ></${iconExclamationMarkTag}>
+                >
+                    <slot ${slotted('defaultSlottedNodes')}></slot>
+                </label>
+                <${iconExclamationMarkTag}
+                    severity="error"
+                    class="error-icon"
+                ></${iconExclamationMarkTag}>
+            </div>
             ${errorTextTemplate}
         </div>
     </template>