fix(card-group): support RTL borders & padding

[jkaeser]

Related Ticket(s)

Closes #11755

Description

We programmatically set borders & padding for cards within <dds-card-group> elements, and we've only been accounting for LTR writing directions. This PR uses logical properties so these borders and paddings look correct in RTL documents.

While working on this I noticed an issue where certain tracked elements could be undefined, causing an error that halts execution. Ultimately this resulted in the "empty" elements we generate for certain card groups to fail to be created, and the dark gray background appearing when it shouldn't. I fixed this with simple optional accessors.

Testing

Verify the borders and gaps between Cards appear correctly in the Card Group story in the RTL deploy preview. Compare to the Card Group in the default deploy preview if necessary.

Specifically check that no background is visible in the last row's empty space when using the "Outlined cards (1px border)" Grid mode option.

Changelog

Changed

• <dds-card-group> children will receive correct border & padding values in RTL writing mode documents.
• Prevents undefined elements from halting code execution and causing gray background to show when it shouldn't.

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[ibmdotcom-bot]

Deploy preview created for package Carbon Web Components:
https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[ibmdotcom-bot]

Deploy preview created for package Carbon web components (RTL):
https://carbon-web-components-rtl.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[ibmdotcom-bot]

Deploy preview created for package Web Components (RTL):
https://ibmdotcom-web-components-rtl.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11760/index.html

Built with commit: 9d3eb1e46fc1cd5263a05d6137171a81c3c4cb7b

[m4olivei]

Looks good! Nice work.

[oliviaflory]

@jkaeser cc @andy-blum

The text looks great!

The only thing that looks off is the arrow icons.

1. My understanding is directional icons would be mirrored (see examples attached)
2. The arrow icon in the card group has a 32px right padding on it which makes it not align with the text as expected, it's floating in the card

Extra space to the right of the arrow or CTA

Expectation

[jkaeser]

@oliviaflory Good catch! This got merged before I could address it, but that's okay. Matt has fixed the arrow direction problem in #11748, which should be merged soon. I believe that only leaves the extra spacing to the right to fix. I'll open up an issue for it.

Thanks for taking a look at this one!

[jkaeser]

Created #11762 for the spacing issue.