nitaimaarek/ui

<h4>Heading</h4>
<p>Body with a <a>link</a>, <strong>bold</strong>,
   <code>inline code</code>, <kbd>Ctrl</kbd>, <mark>mark</mark>.</p>
<ul><li>List items</li></ul>
<blockquote>Quotes.</blockquote>
<h6>Micro heading</h6>   <!-- h5/h6 are mono eyebrows -->

<div class="ui-row">…<span class="ui-spacer"></span>…</div>
<!-- --between --end --center --top --nowrap -->

<div class="ui-stack">…</div>             <!-- --sm --lg -->
<div class="ui-grid ui-grid--4">…</div>   <!-- --2 --4 -->
<div class="ui-container ui-container--narrow">…</div>
<div class="ui-divider"></div>

<button class="ui-btn ui-btn--primary">Primary</button>
<a class="ui-btn ui-btn--outline" href="/x">Outline</a>

<!-- variants: --primary --accent --outline --ghost
               --danger --success --link          -->
<!-- sizes:    --sm --lg --block --pill --icon    -->

<button class="ui-btn" aria-busy="true">Saving</button>
<button class="ui-btn" data-ui-confirm="Sure?">Delete</button>
<span class="ui-btn-group">…</span>

<span class="ui-segmented" data-ui-segmented>
  <button aria-pressed="true">1h</button>
  <button aria-pressed="false">24h</button>
</span>

<div class="ui-field">
  <label for="x">Listen address</label>
  <input id="x" type="text">
  <span class="ui-field__hint">Host and port.</span>
</div>
<div class="ui-field ui-field--invalid">
  … <span class="ui-field__error">Not valid.</span>
</div>
<div class="ui-input-group">
  <input id="v" readonly>
  <button class="ui-btn" data-ui-copy="#v">Copy</button>
</div>
<textarea data-ui-autosize></textarea>

<label class="ui-switch"><input type="checkbox" checked> Stream logs</label>
<label class="ui-check"><input type="checkbox"> Checkbox</label>
<label class="ui-radio"><input type="radio" name="d"> Fast</label>

<div class="ui-slider">
  <div class="ui-slider__head">
    <label for="s">Workers</label>
    <span class="ui-slider__value">6</span>
  </div>
  <input id="s" type="range" min="1" max="16" value="6"
         data-ui-prefix="~" data-ui-suffix=" kbps">
</div>

<select data-ui-select name="service">
  <option>jetson-studio</option>
</select>
<!-- data-ui-search="off" suppresses the search box -->

<div class="ui-dropdown">
  <button class="ui-btn" data-ui-dropdown aria-expanded="false">Actions</button>
  <div class="ui-menu">      <!-- .ui-menu--right aligns right -->
    <div class="ui-menu-label">Service</div>
    <button class="ui-menu-item">Restart</button>
    <div class="ui-menu-sep"></div>
    <a class="ui-menu-item" href="/_status">Open</a>
  </div>
</div>

<div class="ui-tabs" data-ui-tabs>
  <button class="ui-tab" data-ui-tab="t1" aria-selected="true">Source</button>
  <button class="ui-tab" data-ui-tab="t2">Bytecode</button>
</div>
<div class="ui-tabpanel" id="t1">…</div>
<div class="ui-tabpanel" id="t2" hidden>…</div>

<div class="ui-card ui-card--hover">   <!-- --flat --accent -->
  <h4 class="ui-card__title">media-studio</h4>
  <p class="ui-card__sub">yt-dlp + ffmpeg, port 8092.</p>
  <div class="ui-card__foot">…</div>
</div>
<a class="ui-card ui-card--hover" href="/x">Clickable</a>

<div class="ui-stat">
  <span class="ui-stat__value">18</span>
  <span class="ui-stat__label">services</span>
</div>

<span class="ui-badge ui-badge--ok">ok</span>
<!-- --accent --ok --warn --bad --info --solid --pill -->
<span class="ui-badge ui-badge--ok">
  <span class="ui-dot ui-dot--pulse"></span> running
</span>

<span class="ui-chip">wasm
  <button class="ui-chip__x" aria-label="Remove">×</button>
</span>

<span class="ui-avatar">NM</span>
<img class="ui-avatar ui-avatar--round" src="/me.png" alt="">

<div class="ui-scroll-x">
  <table>…</table>
</div>

<div class="ui-alert ui-alert--ok">
  <div><span class="ui-alert__title">Deployed.</span> All checks passed.</div>
</div>
<!-- --ok --warn --bad --info -->

UI.toast("Saved to disk");
UI.toast("Service is back up", "ok");          // ok | warn | bad
UI.toast("Connection lost", {
  type: "bad", title: "Error", duration: 6000
});

<button class="ui-btn" data-ui-modal="#m">Open</button>
<dialog class="ui-modal" id="m"><div class="ui-modal__box">
  <div class="ui-modal__head">
    <h3 class="ui-modal__title">Title</h3>
    <button class="ui-modal__x" data-ui-close>×</button>
  </div>
  <p>Body</p>
  <div class="ui-modal__foot">
    <button class="ui-btn" data-ui-close>Cancel</button>
  </div>
</div></dialog>

await UI.confirm("Restart?", { danger: true });

<button class="ui-btn" data-ui-tip="Explanation">Hover</button>
<!-- data-ui-tip-pos="bottom" | "right" -->

<div class="ui-progress">
  <div class="ui-progress__bar" style="width:42%"></div>
</div>
<div class="ui-progress ui-progress--indeterminate">…</div>
<span class="ui-spinner"></span>   <!-- --lg -->
<div class="ui-skeleton" style="width:45%"></div>