Possible card modifications

[KonnorRogers]

Would there be any interest in the following modifications for sl-card:

• <sl-card layout="rtl"> Right to left (horizontal) layout
• <sl-card layout="ltr"> Left to right (horizontal) layout
• <sl-card layout="reverse" Image at the bottom instead of the top

Also, I noticed its not possible to set the card background with a CSS variable.

I noticed the background is set like this:

background-color: var(--sl-color-gray-900);

and was curious if itd be worth having a scoped variable for card backgrounds.

[claviska]

Would there be any interest in the following modifications for sl-card

I think it makes sense if the logic doesn't get too crazy. The card's base uses flex so it might be pretty easy to do. I'd probably avoid rtl and ltr to prevent confusion with directionality, though.

I'd be curious to know if these orientations can be applied using existing ::part selectors.

Also, I noticed its not possible to set the card background with a CSS variable.

You can target the background using sl-card::part(base), so I'm not sure a custom property is necessary. I generally try to use a custom property when a value is reused within a component so it can't be easily targeted with a single part. This isn't set in stone, but I've tried to outline how I use them here: https://shoelace.style/resources/contributing?id=when-to-use-a-css-custom-property-vs-a-css-part

As always, I'm open to feedback and relaxing conventions when it makes sense.

[KonnorRogers]

hmm.... I hadnt thought about that....Let me do some fiddling around and see where I get. Thanks Cory! I could also probably just mess around with flex-orders as well to get a reverse layout (image on bottom)

[KonnorRogers]

Sigh...its totally simple to do modifications like this:

sl-card::part(base) {
  background: red;
  flex-direction: column-reverse; /* can also change this to row or row-reverse */
}

[claviska]

Neat. https://jsfiddle.net/claviska/3ujz6eft/

Still couldn't hurt to have helper props to make this a bit easier.