[feat] <rh-tile> border accent

[markcaron]

Description

There are no shadow parts for <rh-tile>, and we will need one to accommodate some custom styles, like having a red border top.

Suggested solution

Add a container shadow part

Screenshots

No response

Example API

rh-tile::part(container) {
  border-top: var(--rh-border-width-lg, 3px) solid var(--rh-color-accent-brand-on-light, #ee0000);
}

Additional context

No response

[markcaron]

Adding for posterity and context:

I created this ticket so that we could handle some customized components in mockups/designs that we've seen come up over the last year, including the Get Started Dashboard's 1, 2, 3 "tiles":

The original thought I proposed about adding a shadow part, like outer or container, was to make the API consistent with <rh-card> assuming the preference would be to make these a simple patterned CSS customization rather than adding a defined variant.

After discussing with the team, we're going to expose a couple new custom props to handle the border-top customization in lieu of adding a new variant (for now, at least) or the shadow part "sledgehammer" approach.

Closing this in favor of #1719