Web Awesome

<!-- progress bar -->
<div class="wa-stack">
  <h4 class="wa-heading-s">Whoaaa, we're half way there…</h4>

  <wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
</div>

<!-- callouts -->
<wa-callout variant="success" appearance="filled">
  <wa-icon
    slot="icon"
    family="duotone"
    variant="regular"
    name="user-bounty-hunter"
    style="font-size: var(--wa-font-size-l);"
  ></wa-icon>

  <div class="wa-split">
    <span>This is the way.</span>
    <wa-button variant="success" size="small">
      Follow the Creed
    </wa-button>
  </div>
</wa-callout>

<wa-callout variant="warning" appearance="filled">
  <wa-icon
    slot="icon"
    family="duotone"
    variant="regular"
    name="space-station-moon"
    style="font-size: var(--wa-font-size-l);"
  ></wa-icon>

  <div class="wa-split">
    <span>That's no moon.</span>
    <wa-button variant="warning" size="small">
      Turn Around
    </wa-button>
  </div>
</wa-callout>

<!-- badges -->
<wa-button appearance="filled" size="small">
  Jedi
  <wa-badge pill variant="success">0</wa-badge>
</wa-button>

<wa-button appearance="filled" size="small">
  Sith
  <wa-badge pill variant="danger" attention="pulse">2</wa-badge>
</wa-button>

<wa-button appearance="filled" size="small">
  Chosen
  <wa-badge pill variant="neutral">1</wa-badge>
</wa-button>

<wa-button appearance="filled" size="small">
  Episodes
  <wa-badge pill variant="neutral" attention="bounce">6</wa-badge>
</wa-button>

<!-- line chart -->
<wa-line-chart
  id="line-the-beef"
  label="The Beef's Beefs + Beefs"
  description="Avg. sandos per day, cousin fights, and Fak brothers on payroll."
  x-label="Month"
  y-label="Count"
  without-animation
>
</wa-line-chart>

<script type="module">
  customElements.whenDefined('wa-line-chart').then(() => {
    const chart = document.querySelector('#line-the-beef');

    chart.config = {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          { label: 'Sandos per Day', data: [14, 17, 16, 18, 21, 19] },
          { label: 'Cousin Fights', data: [4, 3, 2, 7, 5, 4] },
          { label: 'Fak Brothers', data: [1, 1, 2, 2, 3, 4] },
        ],
      },
    };
  });
</script>

<!-- buttons -->
<wa-button variant="danger">
  <wa-icon slot="start" name="hand"></wa-icon>
  Stop!
</wa-button>

<wa-button>
  <wa-icon slot="start" name="hammer"></wa-icon>
  Hammer Time!
</wa-button>

<wa-button variant="neutral" appearance="outlined" disabled>
  <wa-icon slot="end" name="ban"></wa-icon>
  Can't Touch This!
</wa-button>

<wa-button variant="brand" appearance="filled" pill>
  <wa-icon slot="start" name="hand-peace"></wa-icon>
  Quit
</wa-button>

<!-- button groups -->
<wa-button-group label="History">
  <wa-button appearance="filled" id="undo-button">
    <wa-icon name="undo" variant="solid" label="Undo"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="redo-button">
    <wa-icon name="redo" variant="solid" label="Redo"></wa-icon>
  </wa-button>
</wa-button-group>

<wa-button-group label="Formatting">
  <wa-button appearance="filled" id="button-bold">
    <wa-icon name="bold" variant="solid" label="Bold"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-italic">
    <wa-icon name="italic" variant="solid" label="Italic"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-underline">
    <wa-icon name="underline" variant="solid" label="Underline"></wa-icon>
  </wa-button>
</wa-button-group>

<wa-button-group label="Alignment">
  <wa-button appearance="filled" id="button-align-left">
    <wa-icon name="align-left" variant="solid" label="Align Left"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-align-center">
    <wa-icon name="align-center" variant="solid" label="Align Center"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-align-right">
    <wa-icon name="align-right" variant="solid" label="Align Right"></wa-icon>
  </wa-button>
</wa-button-group>

<wa-button-group label="Other">
  <wa-button appearance="filled" id="button-ask-clippy">
    <wa-icon name="paperclip" variant="solid" label="Ask Clippy"></wa-icon>
  </wa-button>

  <wa-button appearance="filled" id="button-trash-it">
    <wa-icon name="trash-can" variant="solid" label="Trash It"></wa-icon>
  </wa-button>
</wa-button-group>

<!-- dropdowns -->
<wa-dropdown>
  <wa-button appearance="filled" slot="trigger" with-caret>Export</wa-button>

  <wa-dropdown-item>
    Documents
    <wa-dropdown-item slot="submenu" value="pdf">PDF</wa-dropdown-item>
    <wa-dropdown-item slot="submenu" value="docx">Word Document</wa-dropdown-item>
  </wa-dropdown-item>

  <wa-dropdown-item>
    Spreadsheets
    <wa-dropdown-item slot="submenu">
      Excel Formats
      <wa-dropdown-item slot="submenu" value="xlsx">Excel (.xlsx)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="xls">Excel 97-2003 (.xls)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="csv">CSV (.csv)</wa-dropdown-item>
    </wa-dropdown-item>

    <wa-dropdown-item slot="submenu">
      Other Formats
      <wa-dropdown-item slot="submenu" value="ods">OpenDocument (.ods)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="tsv">Tab-separated (.tsv)</wa-dropdown-item>
      <wa-dropdown-item slot="submenu" value="json">JSON (.json)</wa-dropdown-item>
    </wa-dropdown-item>

    <wa-dropdown-item slot="submenu" value="numbers">Apple Numbers</wa-dropdown-item>
  </wa-dropdown-item>

  <wa-divider></wa-divider>

  <wa-dropdown-item>
    Options
    <wa-dropdown-item slot="submenu" type="checkbox" value="compress">Compress files</wa-dropdown-item>
    <wa-dropdown-item slot="submenu" type="checkbox" checked value="metadata">Include metadata</wa-dropdown-item>
    <wa-dropdown-item slot="submenu" type="checkbox" value="password">Password protect</wa-dropdown-item>
  </wa-dropdown-item>
</wa-dropdown>

<wa-button-group label="Example Save Button">
  <wa-button appearance="filled" variant="brand">Save</wa-button>

  <wa-dropdown placement="bottom-end">
    <wa-button appearance="filled" slot="trigger" variant="brand">
      <wa-icon name="chevron-down" label="More options"></wa-icon>
    </wa-button>

    <wa-dropdown-item>Save</wa-dropdown-item>

    <wa-dropdown-item>Save as…</wa-dropdown-item>

    <wa-dropdown-item>Save all</wa-dropdown-item>
  </wa-dropdown>
</wa-button-group>

<!-- slider -->
<wa-slider label="Scale" name="scale" min="0" max="100" value="50" size="small" with-tooltip></wa-slider>

<!-- color picker -->
<wa-color-picker id="example-color-picker" size="small" value="f46a45" opacity>
  <span slot="label" class="wa-visually-hidden">Set a Color Label</span>
</wa-color-picker>

<wa-tooltip for="example-color-picker">Set a Color Label</wa-tooltip>

<!-- form -->
<form class="wa-stack wa-gap-l">
  <wa-input name="email" type="email" label="Email" placeholder="[email protected]" required>
    <wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
  </wa-input>

  <wa-input type="password" label="Password" placeholder="********" password-toggle required>
    <wa-icon slot="start" name="lock" variant="regular"></wa-icon>
  </wa-input>

  <wa-checkbox>Preserve my essence + login for next time</wa-checkbox>

  <div class="wa-flank:end wa-gap-2xl">
    <wa-button type="submit" variant="brand">
      Log In
      <wa-icon slot="end" name="arrow-right"></wa-icon>
    </wa-button>

    <wa-button type="reset" variant="neutral" appearance="plain">
      Forgot Password?
    </wa-button>
  </div>
</form>

<!-- rating + switch -->
<div class="wa-split wa-gap-xl wa-align-items-end">
  <div class="wa-stack">
    <h4 class="wa-heading-s">How was your chariot ride, Gaius?</h4>

    <span><wa-rating label="Your Rating" size="large"></wa-rating></span>
  </div>

  <wa-switch>Share with the driver?</wa-switch>
</div>