fix(checkbox): label gap

- make sure that the label is hidden on first rander if there is no slotted content
- move the gap to the base part since label part is no longer added to that element,

Author: desig9stein

src/components/checkbox/checkbox-base.ts

@@ -87,6 +87,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
 
   protected override createRenderRoot() {
     const root = super.createRenderRoot();
+    this.hideLabel = isEmpty(this.label);
 
     root.addEventListener('slotchange', () => {
       this.hideLabel = isEmpty(this.label);

src/components/checkbox/checkbox.ts

@@ -122,8 +122,7 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           .hidden=${this.hideLabel}
           part=${partNameMap({ label: true, checked })}
           id=${this.labelId}
-        >
-          <slot></slot>
+          ><slot></slot>
         </span>
       </label>
       ${this.renderValidatorContainer()}

src/components/checkbox/themes/checkbox.base.scss

@@ -40,6 +40,10 @@ $mark-length: 24;
     transition: color .2s ease-in-out;
 }
 
+[part~='base'] {
+    gap: rem(8px);
+}
+
 [part~='indicator'] {
     display: flex;
     position: absolute;
@@ -65,7 +69,6 @@ label {
     align-items: center;
     cursor: pointer;
     flex-flow: row nowrap;
-    gap: rem(8px);
 }
 
 [part='indicator checked'] {