Add support for cds-layout to slotted elements in CdsCard

Describe the bug

Core web components should support cds-layout styles for content projected into cds-card slots. When using CdsCard with a vertical layout, slotted elements do not respond to any of the cds-layout style or spaces.

How to reproduce

Here is a simple stackblitz with one card and several items projected.

Expected behavior

When projecting elements into a cds-card with the attribute cds-layout="vertical align:fill gap:lg" e.g when writing something like this:

    <cds-card
      demo
      cds-layout="vertical align:fill gap:lg"
    >
      <span
        id="confluence-card"
        cds-text="section"
        cds-layout="align:horizontal-center"
      >
        Supported Build Systems
      </span>
      <ul cds-layout="align:stretch">
        <li>GoBuild</li>
        <li>ConcourseCI</li>
      </ul>
      <cds-divider
        cds-layout="align:bottom"
        cds-card-remove-margin
      ></cds-divider>
      <div cds-layout="align:bottom" cds-text="body light">
        Build Insight processes logs from the above build systems to extract
        insight into build health and security information.
      </div>
    </cds-card>

In this case, the children elements (respectively: span, ul, cds-divider, div) should have core styles for: vertical, align:fill and gap:lg applied.

Versions

Clarity project:

[x] Clarity Core
[ ] Clarity Angular/UI

Clarity version:

[ ] v5.x
[x] v6@latest

Framework:

n/a

Other

See CdsNavigation demos for example of expected behavior. Items projected into cds-navigation can use any of the cds-layout tokens to control the layout, spacing and alignment of projected elements. CdsCard should follow this pattern similar to navigation and other components.

vmware-clarity / core