<h3>Button</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-button&gt;</code></th>
    <th><code>&lt;button&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-button>Button</wa-button>
      </td>
      <td>
        <button>Button</button>
      </td>
    </tr>
    <tr>
      <th><code>accent</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="accent">Brand</wa-button>
          <wa-button variant="neutral" appearance="accent">Neutral</wa-button>
          <wa-button variant="success" appearance="accent">Success</wa-button>
          <wa-button variant="warning" appearance="accent">Warning</wa-button>
          <wa-button variant="danger" appearance="accent">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <button class="wa-brand wa-accent">Brand</button>
          <button class="wa-neutral wa-accent">Neutral</button>
          <button class="wa-success wa-accent">Success</button>
          <button class="wa-warning wa-accent">Warning</button>
          <button class="wa-danger wa-accent">Danger</button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code> + <code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
          <wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
          <wa-button variant="success" appearance="filled outlined">Success</wa-button>
          <wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
          <wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <button class="wa-brand wa-filled wa-outlined">Brand</button>
          <button class="wa-neutral wa-filled wa-outlined">Neutral</button>
          <button class="wa-success wa-filled wa-outlined">Success</button>
          <button class="wa-warning wa-filled wa-outlined">Warning</button>
          <button class="wa-danger wa-filled wa-outlined">Danger</button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="filled">Brand</wa-button>
          <wa-button variant="neutral" appearance="filled">Neutral</wa-button>
          <wa-button variant="success" appearance="filled">Success</wa-button>
          <wa-button variant="warning" appearance="filled">Warning</wa-button>
          <wa-button variant="danger" appearance="filled">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <button class="wa-brand wa-filled">Brand</button>
          <button class="wa-neutral wa-filled">Neutral</button>
          <button class="wa-success wa-filled">Success</button>
          <button class="wa-warning wa-filled">Warning</button>
          <button class="wa-danger wa-filled">Danger</button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="outlined">Brand</wa-button>
          <wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
          <wa-button variant="success" appearance="outlined">Success</wa-button>
          <wa-button variant="warning" appearance="outlined">Warning</wa-button>
          <wa-button variant="danger" appearance="outlined">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <button class="wa-brand wa-outlined">Brand</button>
          <button class="wa-neutral wa-outlined">Neutral</button>
          <button class="wa-success wa-outlined">Success</button>
          <button class="wa-warning wa-outlined">Warning</button>
          <button class="wa-danger wa-outlined">Danger</button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>plain</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="plain">Brand</wa-button>
          <wa-button variant="neutral" appearance="plain">Neutral</wa-button>
          <wa-button variant="success" appearance="plain">Success</wa-button>
          <wa-button variant="warning" appearance="plain">Warning</wa-button>
          <wa-button variant="danger" appearance="plain">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <button class="wa-brand wa-plain">Brand</button>
          <button class="wa-neutral wa-plain">Neutral</button>
          <button class="wa-success wa-plain">Success</button>
          <button class="wa-warning wa-plain">Warning</button>
          <button class="wa-danger wa-plain">Danger</button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>small</code></th>
      <td>
        <wa-button size="small">Small</wa-button>
      </td>
      <td>
        <button class="wa-size-s">Small</button>
      </td>
    </tr>
    <tr>
      <th><code>medium</code></th>
      <td>
        <wa-button size="medium">Medium</wa-button>
      </td>
      <td>
        <button class="wa-size-m">Medium</button>
      </td>
    </tr>
    <tr>
      <th><code>large</code></th>
      <td>
        <wa-button size="large">Large</wa-button>
      </td>
      <td>
        <button class="wa-size-l">Large</button>
      </td>
    </tr>
    <tr>
      <th><code>pill</code></th>
      <td>
        <wa-button pill>Pill</wa-button>
      </td>
      <td>
        <button class="wa-pill">Pill</button>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Checkbox</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-checkbox&gt;</code></th>
    <th><code>&lt;input type="checkbox"&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-checkbox>Checkbox</wa-checkbox>
      </td>
      <td>
        <label><input type="checkbox"></input> Checkbox</label>
      </td>
    </tr>
    <tr>
      <th><code>checked</code></th>
      <td>
        <wa-checkbox checked>Checkbox</wa-checkbox>
      </td>
      <td>
        <label><input type="checkbox" checked></input> Checkbox</label>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Color Picker</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-color-picker&gt;</code></th>
    <th><code>&lt;input type="color"&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-color-picker label="Color Picker" value="#ffa07a"></wa-color-picker>
      </td>
      <td>
        <label>Color Picker <input type="color" value="#ffa07a"></input></label>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Details</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-details&gt;</code></th>
    <th><code>&lt;details&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-details summary="Summary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </wa-details>
      </td>
      <td>
        <details>
          <summary>Summary</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </details>
      </td>
    </tr>
    <tr>
      <th><code>dir="rtl"</code></th>
      <td>
        <wa-details summary="تبديلني" lang="ar" dir="rtl">
          استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
        </wa-details>
      </td>
      <td>
        <details lang="ar" dir="rtl">
          <summary>تبديلني</summary>
          <p>استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن</p>
        </details>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Input</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-input&gt;</code></th>
    <th><code>&lt;input&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-input label="Input" placeholder="Placeholder"></wa-input>
      </td>
      <td>
        <label>Input <input type="text" placeholder="Placeholder"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>type="password"</code></th>
      <td>
        <wa-input label="Input (password)" type="password"></wa-input>
      </td>
      <td>
        <label>Input (password) <input type="password"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>type="date"</code></th>
      <td>
        <wa-input label="Input (date)" type="date"></wa-input>
      </td>
      <td>
        <label>Input (date) <input type="date"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>type="time"</code></th>
      <td>
        <wa-input label="Input (time)" type="time"></wa-input>
      </td>
      <td>
        <label>Input (time) <input type="time"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <wa-input label="Input (filled)" placeholder="Placeholder" appearance="filled"></wa-input>
      </td>
      <td>
        <label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>small</code></th>
      <td>
        <wa-input label="Input (small)" placeholder="Placeholder" size="small"></wa-input>
      </td>
      <td>
        <label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>medium</code></th>
      <td>
        <wa-input label="Input (medium)" placeholder="Placeholder" size="medium"></wa-input>
      </td>
      <td>
        <label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
      </td>
    </tr>
    <tr>
      <th><code>large</code></th>
      <td>
        <wa-input label="Input (large)" placeholder="Placeholder" size="large"></wa-input>
      </td>
      <td>
        <label class="wa-size-l">Input (large) <input type="text" placeholder="Placeholder"></input></label>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Progress Bar</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-progress-bar&gt;</code></th>
    <th><code>&lt;progress&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-progress-bar value="50" max="100"></wa-progress-bar>
      </td>
      <td>
        <progress value="50" max="100"></progress>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Radio</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-radio&gt;</code></th>
    <th><code>&lt;input type="radio"&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-radio>Radio</wa-radio>
      </td>
      <td>
        <label><input type="radio"></input> Radio</label>
      </td>
    </tr>
    <tr>
      <th><code>checked</code></th>
      <td>
        <wa-radio-group value="1">
          <wa-radio value="1">Radio</wa-radio>
        </wa-radio-group>
      </td>
      <td>
        <label><input type="radio" checked></input> Radio</label>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Select</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-select&gt;</code></th>
    <th><code>&lt;select&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-select label="Select" value="1">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <label>Select 
          <select value="1">
            <option value="1">Option</option>
          </select>
        </label>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <wa-select label="Select (filled)" value="1" appearance="filled">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <label>Select (filled) 
          <select class="wa-filled" value="1">
            <option value="1">Option</option>
          </select>
        </label>
      </td>
    </tr>
    <tr>
      <th><code>small</code></th>
      <td>
        <wa-select label="Select (small)" value="1" size="small">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <label class="wa-size-s">Select (small) 
          <select value="1">
            <option value="1">Option</option>
          </select>
        </label>
      </td>
    </tr>
    <tr>
      <th><code>medium</code></th>
      <td>
        <wa-select label="Select (medium)" value="1" size="medium">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <label class="wa-size-m">Select (medium) 
          <select value="1">
            <option value="1">Option</option>
          </select>
        </label>
      </td>
    </tr>
    <tr>
      <th><code>large</code></th>
      <td>
        <wa-select label="Select (large)" value="1" size="large">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <label class="wa-size-l">Select (large) 
          <select value="1">
            <option value="1">Option</option>
          </select>
        </label>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Slider</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-slider&gt;</code></th>
    <th><code>&lt;input type="range"&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-slider label="Slider"></wa-slider>
      </td>
      <td>
        <label>Slider <input type="range"></input></label>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Textarea</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>&lt;wa-textarea&gt;</code></th>
    <th><code>&lt;textarea&gt;</code></th>
  </thead>
  <tbody>
    <tr>
      <th><em>default</em></th>
      <td>
        <wa-textarea label="Textarea" placeholder="Placeholder" rows="2"></wa-textarea>
      </td>
      <td>
        <label>Textarea <textarea placeholder="Placeholder" rows="2"></textarea></label>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <wa-textarea label="Textarea (filled)" placeholder="Placeholder" appearance="filled" rows="2"></wa-textarea>
      </td>
      <td>
        <label>Textarea (filled) <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
      </td>
    </tr>
    <tr>
      <th><code>small</code></th>
      <td>
        <wa-textarea label="Textarea (small)" placeholder="Placeholder" size="small" rows="2"></wa-textarea>
      </td>
      <td>
        <label class="wa-size-s">Textarea (small) <textarea placeholder="Placeholder" rows="2"></textarea></label>
      </td>
    </tr>
    <tr>
      <th><code>medium</code></th>
      <td>
        <wa-textarea label="Textarea (medium)" placeholder="Placeholder" size="medium" rows="2"></wa-textarea>
      </td>
      <td>
        <label class="wa-size-m">Textarea (medium) <textarea placeholder="Placeholder" rows="2"></textarea></label>
      </td>
    </tr>
    <tr>
      <th><code>large</code></th>
      <td>
        <wa-textarea label="Textarea (large)" placeholder="Placeholder" size="large" rows="2"></wa-textarea>
      </td>
      <td>
        <label class="wa-size-l">Textarea (large) <textarea placeholder="Placeholder" rows="2"></textarea></label>
      </td>
    </tr>
  </tbody>
</table>
</div>