Hello, hono & Web Components!

<ui-dialog closedby="any">
  <ui-dialog-trigger><button>Open Dialog</button></ui-dialog-trigger>
  <ui-dialog-content>
    <dialog>
      <ui-dialog-close><button autofocus>close</button></ui-dialog-close>
      <ui-dialog-title><h2>Dialog Title</h2></ui-dialog-title>
      <ui-dialog-description><p>Dialog description</p></ui-dialog-description>
      <p>Dialog content</p>
    </dialog>
  </ui-dialog-content>
</ui-dialog>

<ui-tabs value="tab1">
  <ui-tabs-list loop>
    <ui-tabs-trigger value="tab1"><button>Tab1</button></ui-tabs-trigger>
    <ui-tabs-trigger value="tab2"><button>Tab2</button></ui-tabs-trigger>
  </ui-tabs-list>
  <ui-tabs-panel value="tab1">
    Tab1 content
  </ui-tabs-panel>
  <ui-tabs-panel value="tab2">
    Tab2 content
  </ui-tabs-panel>
</ui-tabs>

<ui-accordion mode="multiple" collapsible>
  <ui-accordion-item>
    <ui-accordion-trigger>
      <button>Open Accordion item</button>
    </ui-accordion-trigger>
    <ui-accordion-content>
      Accordion content
    </ui-accordion-content>
  </ui-accordion-item>
</ui-accordion>