Overlays: Form Integrations

export const selectRich = () => html`
  <demo-overlay-system>
    <button slot="invoker">Open Dialog</button>
    <div slot="content" class="demo-overlay">
      <h1>Select Rick example</h1>
      <lion-select-rich name="favoriteColor" label="Favorite color">
        <lion-option .choiceValue=${'red'}>Red</lion-option>
        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
      </lion-select-rich>
      <p>
        You can close this dialog here:
        <button
          class="close-button"
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </p>
    </div>
  </demo-overlay-system>
`;

export const inputDatepicker = () => html`
  <demo-overlay-system>
    <button slot="invoker">Open Dialog</button>
    <div slot="content" class="demo-overlay">
      <h1>Input Datepicker example</h1>
      <lion-input-datepicker name="date" label="Date"></lion-input-datepicker>
      <p>
        You can close this dialog here:
        <button
          class="close-button"
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </p>
    </div>
  </demo-overlay-system>
`;