Visual Tests

<style>
  div.alignment {
    background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  div.alignment::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.5px);
    width: 100%;
    height: 1px;
    background-color: red;
  }
</style>
<div class="wa-stack wa-gap-xl">
  <div class="alignment">
    <wa-switch size="small">Switch</wa-switch>
    <wa-checkbox size="small">Checkbox</wa-checkbox>
    <wa-radio value="1" size="small">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-switch>Switch</wa-switch>
    <wa-checkbox>Checkbox</wa-checkbox>
    <wa-radio value="1">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-switch size="large">Switch</wa-switch>
    <wa-checkbox size="large">Checkbox</wa-checkbox>
    <wa-radio value="1" size="large">Radio</wa-radio>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="small" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="small"></wa-input>
    <wa-select size="small" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="small"></wa-color-picker>
    <wa-button size="small">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="medium" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="medium"></wa-input>
    <wa-select size="medium" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="medium"></wa-color-picker>
    <wa-button size="medium">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-textarea placeholder="textarea" size="large" rows="1"></wa-textarea>
    <wa-input placeholder="input" size="large"></wa-input>
    <wa-select size="large" value="1" multiple>
      <wa-option value="1">Option</wa-option>
    </wa-select>
    <wa-color-picker size="large"></wa-color-picker>
    <wa-button size="large">Button</wa-button>
  </div>
  <div class="alignment">
    <wa-badge>Badge</wa-badge>
    <code>Code</code>
    <kbd>Keyboard</kbd>
    <ins>Inserted</ins>
    <del>Deleted</del>
    <mark>Highlighted</mark>
  </div>
  <div class="alignment">
    <wa-avatar></wa-avatar>
    <wa-rating></wa-rating>
    <wa-icon-button name="gear" label="Settings"></wa-icon-button>
    <wa-spinner></wa-spinner>
  </div>
</div>

<form class="wa-stack">
  <wa-input label="Input" placeholder="Placeholder"></wa-input>
  <wa-select label="Select" value="option-1">
    <wa-option value="option-1">Option 1</wa-option>
    <wa-option value="option-2">Option 2</wa-option>
    <wa-option value="option-3">Option 3</wa-option>
  </wa-select>
  <wa-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
  <wa-radio-group label="Radio group" name="a" value="1">
    <wa-radio value="1">Option 1</wa-radio>
    <wa-radio value="2">Option 2</wa-radio>
    <wa-radio value="3">Option 3</wa-radio>
  </wa-radio-group>
  <wa-checkbox>Checkbox</wa-checkbox>
  <wa-switch>Switch</wa-switch>
  <wa-slider label="Range"></wa-slider>
  <wa-button>Button</wa-button>
</form>

<div class="wa-stack">
  <wa-progress-bar value="50" max="100"></wa-progress-bar>
  <wa-progress-ring value="50" max="100"></wa-progress-ring>
  <wa-spinner></wa-spinner>
</div>