cc-toggle displays extra margin when inside a grid and when inline

[pdesoyres-cc]

When a <cc-toggle> with an inlined label is inside a gride area, an extra margin is displayed on top of it.

<div class="grid">
  <div class="area1"><cc-toggle inline legend="legend" choices='[{ "label": "on", "value": "on" },{ "label": "off", "value": "off" }]'></cc-toggle></div>
  <div class="area2">area 2</div>
  <div class="area3">area 3</div>
</div>

.grid {
  display: grid;
  grid-template-areas:
            'area1 area3'
            'area2 area3';
  grid-template-columns: 250px 1fr;
  grid-template-rows: max-content 1fr;
  gap: 1em;
}

.area1 {
  grid-area: area1;
  background-color: indianred;
}
.area2 {
  grid-area: area2;
  background-color: steelblue;
}
.area3 {
  grid-area: area3;
  background-color: darkseagreen;
}