basic-web-components

<bwc-accordion default-value='["two"]'>
  <details slot="item" data-value="one">
    <summary>One</summary>
    <div>One content</div>
  </details>
  <details slot="item" data-value="two">
    <summary>Two</summary>
    <div>Two content</div>
  </details>
</bwc-accordion>

<bwc-modal>
  <button slot="trigger">Open dialog</button>
  <dialog slot="popup">
    <header data-modal-header>
      <h2 data-title>Confirm changes?</h2>
      <button data-close title="Close">×</button>
    </header>
    <div data-modal-content>
      <p data-description>Backdrop click or Escape also closes.</p>
    </div>
    <div data-modal-actions>
      <button data-close>Cancel</button>
      <button data-action data-close>Confirm</button>
    </div>
  </dialog>
</bwc-modal>

<div>
  <bwc-popover side="bottom" side-offset="8">
  <button slot="trigger">Options</button>
  <div slot="popup">
    <p>Popover content</p>
    <button data-close>Close</button>
  </div>
  </bwc-popover>
</div>

<div>
  <bwc-tooltip side="top" align="center" side-offset="8" delay="300" close-delay="150" close-on-click="false">
    <button slot="trigger">Save</button>
    <div slot="popup">Saves the current file<span data-arrow></span></div>
  </bwc-tooltip>
</div>

<div>
  <bwc-preview-card side="bottom" align="start" side-offset="8" delay="300" close-delay="150">
    <a slot="trigger" href="./popover.html">Popover docs</a>
    <div slot="popup">Floating panels without focus traps.<span data-arrow></span></div>
  </bwc-preview-card>
</div>

<div>
  <bwc-menu side="bottom" align="start" side-offset="8" align-offset="0">
    <button slot="trigger">Options</button>
    <div slot="popup">
      <button data-menu-item>Edit</button>
      <button data-menu-item>Delete</button>
      <button data-menu-item data-disabled>Archive</button>
      <span data-arrow></span>
    </div>
  </bwc-menu>
</div>

<div>
  <bwc-context-menu side="bottom" align="start" side-offset="8">
    <div slot="trigger">Right-click me</div>
    <div slot="popup">
      <button data-menu-item>Copy</button>
      <button data-menu-item>Paste</button>
      <span data-arrow></span>
    </div>
  </bwc-context-menu>
</div>

<div>
  <bwc-select placeholder="Pick a fruit" side="bottom" align="start" side-offset="8" match-trigger-width>
    <button slot="trigger"><span data-value></span> <span data-icon>▾</span></button>
    <div slot="popup">
      <div data-option data-value="apple">Apple</div>
      <div data-option data-value="banana">Banana</div>
      <div data-option data-value="cherry" data-disabled>Cherry</div>
      <span data-arrow></span>
    </div>
  </bwc-select>
</div>

<div>
  <label for="demo-switch-button">Notifications</label>
  <bwc-switch default-checked></bwc-switch>
</div>

<bwc-otp length="4" validation-type="numeric" name="demo-code"></bwc-otp>

<bwc-tabs default-value="one">
  <div slot="list">
    <button value="one">One</button>
    <button value="two">Two</button>
  </div>
  <section slot="panel" data-value="one">One panel</section>
  <section slot="panel" data-value="two">Two panel</section>
</bwc-tabs>

<bwc-slide-out>
  <button slot="trigger">Open panel</button>
  <nav slot="panel">
    <a href="./accordion.html">Accordion</a>
    <button data-close>Close</button>
  </nav>
</bwc-slide-out>

<bwc-alert-dialog>
  <button slot="trigger">Discard draft</button>
  <div slot="popup">
    <header data-alert-header>
      <h2 data-title>Discard draft?</h2>
      <button data-close title="Close">×</button>
    </header>
    <div data-alert-content>
      <p data-description>You can't undo this action.</p>
    </div>
    <div data-alert-actions>
      <button data-cancel>Cancel</button>
      <button data-action>Discard</button>
    </div>
  </div>
</bwc-alert-dialog>

<div>
  
  <bwc-toast-region position="bottom-right" limit="3" duration="5000">
    <bwc-toast type="success" default-open>
      <header data-toast-header>
        <div data-title>Saved</div>
        <button data-close title="Close">×</button>
      </header>
      <div data-description>Your changes are live.</div>
    </bwc-toast>
  </bwc-toast-region>
</div>

<bwc-menubar>
  <bwc-menu side-offset="8">
    <button slot="trigger">File</button>
    <div slot="popup">
      <button data-menu-item>New</button>
      <button data-menu-item>Open</button>
    </div>
  </bwc-menu>
  <bwc-menu side-offset="8">
    <button slot="trigger">Edit</button>
    <div slot="popup">
      <button data-menu-item>Undo</button>
    </div>
  </bwc-menu>
</bwc-menubar>

<bwc-navigation-menu delay="200" close-delay="150" side-offset="8">
  <button data-nav-trigger data-value="overview">Overview</button>
  <div data-nav-panel data-value="overview">
    <a href="./accordion.html">Quick start<span>Build accessible disclosure groups.</span></a>
    <a href="./modal.html">Accessibility<span>Review focus and dismissal behavior.</span></a>
    <span data-arrow></span>
  </div>
  <button data-nav-trigger data-value="handbook">Handbook</button>
  <div data-nav-panel data-value="handbook">
    <a href="./styling.html">Styling<span>Theme every component with ten variables.</span></a>
    <span data-arrow></span>
  </div>
</bwc-navigation-menu>