Remove gap between Checkbox or Toggle and summary, if there is no summary (#688)

* Remove gap between Checkbox or Toggle and summary if there is no summary

* Update .changeset/cool-hornets-talk.md

Co-authored-by: clintcs <[email protected]>

---------

Co-authored-by: clintcs <[email protected]>

Author: danwenzel

.changeset/cool-hornets-talk.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': patch
+---
+
+- A Checkbox or Toggle without a summary no longer has extra space to the right.

src/checkbox.test.basics.ts

@@ -16,7 +16,7 @@ it('registers itself', async () => {
 
 it('is accessible', async () => {
   const host = await fixture<GlideCoreCheckbox>(
-    html`<glide-core-checkbox label="Label" tooltip="Tooltip">
+    html`<glide-core-checkbox label="Label" summary="Summary" tooltip="Tooltip">
       <div slot="description">Description</div>
     </glide-core-checkbox>`,
   );

src/checkbox.ts

@@ -368,7 +368,11 @@ export default class GlideCoreCheckbox
               </div>
             </div>
 
-            <div id="summary" slot="summary">${this.summary}</div>
+            ${when(
+              this.summary,
+              () =>
+                html`<div id="summary" slot="summary">${this.summary}</div>`,
+            )}
 
             <div id="description" slot="description">
               <slot

src/toggle.test.basics.ts

@@ -14,7 +14,7 @@ it('registers itself', async () => {
 
 it('is accessible', async () => {
   const host = await fixture<GlideCoreToggle>(
-    html`<glide-core-toggle label="Label" tooltip="Tooltip">
+    html`<glide-core-toggle label="Label" summary="Summary" tooltip="Tooltip">
       <div slot="description">Description</div>
     </glide-core-toggle>`,
   );

src/toggle.ts

@@ -3,6 +3,7 @@ import { html, LitElement } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './toggle.styles.js';
 import shadowRootMode from './library/shadow-root-mode.js';
@@ -118,7 +119,10 @@ export default class GlideCoreToggle extends LitElement {
           />
         </div>
 
-        <div slot="summary" id="summary">${this.summary}</div>
+        ${when(
+          this.summary,
+          () => html`<div id="summary" slot="summary">${this.summary}</div>`,
+        )}
 
         <slot
           class="description"