[feat] <rh-alert> add ability for instances to toast themselves

[KamiQuasi]

Description

Problem: The RhAlert class is not always readily available, or able to be (re)imported, which restricts access to the .toast() function.

Suggested solution

• Add the ability for <rh-alert> component instances to .toast() themselves.
• Update documentation for the toast functionality to explain more details

const newAlert = document.createElement('rh-alert');
newAlert.toast();

In the instance toast() function, the component would call

const message = this.shadowRoot.querySelector('slot:not([name])').textContent;
const heading = this.shadowRoot.querySelector('slot[name="header"]').textContent;
RhAlert.toast({
  message: message,
  heading: heading,
  state: this.state
});

Screenshots

No response

Example API

Additional context

No response

[bennypowers]

toast needs to be static because it creates and destroys instances of alert.

Users who for one reason or another are unwilling or unable to import from a bare specifier can use whenDefined:

const RhAlert = await customElements.whenDefined('rh-alert')
RhAlert.toast(...)

[bennypowers]

discussed in chat, we might want to let toast() accept any lit renderable (template result, dom node, string, etc)

const message = document.createElement('a');
message.href = './confirm';
message.textContent = 'Confirm';

RhAlert.toast({
  heading: html`<strong>Rich</strong> <em>text</em>`,
  message
});

or whatever