[ripple] add built-in "selected" state

[DRiFTy17]

Describe the feature: It is common for interactive elements to also provide a "selected" state. This is essentially the same same ripple styles we see now with a persistent background color that uses the primary theme as seen in the example below on a <forge-card>:

In dark mode it looks like this:

Describe any alternatives you've considered: This can currently be achieved with the following:

We should potentially look to add this as a built-in selected property on the <forge-ripple> component itself for convenience.

HTML:

<forge-card tabindex="1" role="button" outlined class="my-card my-card--selected">
  <forge-ripple></forge-ripple>
  My selected card
</forge-card>

Sass:

.my-card {
  cursor: pointer;
  @include ripple-theme.states-selected(primary);

  &--selected {
    --mdc-theme-on-surface: var(--mdc-theme-primary);
    --forge-theme-border-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-primary);
  }
}

Additional information: While this is common on cards, it can be applied to any element. The "selected" state of a ripple is essentially the persistent background color only, and we would still need design system guidance to help with the reset of the colors. It may make sense to also add a selected property to the <forge-card> as well to use along side the ripple (essentialy provides the cursor and border styles) but this may be too specific...