@ni/nimble-components 32.8.1 → 32.8.2

package/dist/all-components-bundle.js

@@ -20371,12 +20371,11 @@ so this becomes the fallback color for the slot */ ''}
 `;
 
   const styles$L = css `
-    ${display('inline-flex')}
+    ${display('inline-grid')}
     ${styles$M}
 
     :host {
         font: ${bodyFont};
-        align-items: center;
         cursor: pointer;
         outline: none;
         ${userSelectNone}
@@ -20387,8 +20386,14 @@ so this becomes the fallback color for the slot */ ''}
         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;
@@ -20513,27 +20518,29 @@ so this becomes the fallback color for the slot */ ''}
         @click="${(x, c) => x.clickHandler(c.event)}"
         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>