import { registerTermUIElement } from "1ch";

registerTermUIElement();

<term-ui width="62" mode="dark">
  <section gap="1">
    <article title="deploy v2.4.1">
      <progress label="build" value="100" max="100"></progress>
      <progress label="tests" value="94" max="100"></progress>
      <progress label="cover" value="82" max="100"></progress>
    </article>
    <figure height="4" fill>4,7,5,12,9,14,8,11</figure>
  </section>
</term-ui>

const term = document.querySelector("term-ui");
term.addEventListener("termui-action", (event) => {
  const action = (event as CustomEvent).detail;
  // update your app state here
});