Window

Use <dialog open> (or .mb-window) with a <header> as the title bar. This very page is a window.

<dialog open>
  <header>
    <h1>-- Window title</h1>
    <button aria-label="Close">✕</button>
  </header>
  <main>…content…</main>
</dialog>

Tabs

A <nav> with links or buttons. The active tab is declared with aria-current (or aria-selected="true"), not with classes. The <section> immediately after becomes the panel with the orange line.

<nav>
  <a href="#">Master data</a>
  <a href="#" aria-current="page">Case data</a>
  <a href="#">12 Attachments</a>
</nav>
<section>…panel…</section>

Form rows

Every <p> inside a <form> is a dense (flex) row of labels and fields. Field width is controlled with the size attribute, the old-fashioned way. The lookup button is <button class="mb-lookup">, decoded descriptions are <output>. Utilities: .mb-right pushes to the right, .mb-grow takes the remaining space.

<form>
  <p>
    <label for="cod">Code:</label>
    <input id="cod" size="6" value="00042" readonly>
    <button class="mb-lookup" aria-label="Search"></button>
    <output>GENERAL SECRETARIAT</output>
  </p>
</form>

Fields

<input>, <select> and <textarea> have the inset border and the monospace bold value. readonly and disabled turn grey by themselves. Checkboxes and radios are squared off by regulation.

<input size="12" value="00042" readonly>
<select><option>In progress</option></select>
<label><input type="checkbox" checked> Privacy signed</label>

States and highlights

The semantic heart of the library: <mark> is the warning yellow, <ins> the ok green, <em> the bold red alert. Dates are <time>, computed values <output>. To colour a field, use the .mb-mark / .mb-ok / .mb-due variants directly on the input.

<mark>awaiting room confirmation</mark>
<ins>Confirmed</ins>
<em>Privacy documents missing!!</em>
<input class="mb-due" value="17/06/2026" readonly>
<output><time datetime="2026-06-05">05/06/2026</time></output>

Buttons and button bar

The <button>s are 3D-raised and "sink" when pressed. .mb-primary is the cyan variant. The button bar at the bottom of the window is a <menu>: buttons after .mb-right align to the right.

<menu>
  <li><button>Change Location</button></li>
  <li><button class="mb-right">Summary Print</button></li>
  <li><button disabled>OK</button></li>
  <li><button class="mb-primary">Cancel</button></li>
</menu>

Modals and dropdowns

A <dialog> opened with showModal() becomes a centered modal window with a retro tramato backdrop — no extra markup, the library styles dialog:modal and ::backdrop for you. A <details class="mb-dropdown"> with a <summary> and a <menu> is a drop-down menu that needs no JavaScript at all.

<button data-open="dlg">Open…</button>
<dialog id="dlg">…</dialog>   <!-- dlg.showModal() -->

<details class="mb-dropdown">
  <summary>Actions</summary>
  <menu><li><button>Print</button></li>…</menu>
</details>

The dropdown is pure HTML/CSS (native <details> toggle). Only opening a modal needs one line of script — the library ships zero JS.

Tables

<table>s have a flat grid, grey headers and rows that select in navy blue on mouse hover.

<table>
  <thead><tr><th>No.</th><th>Date</th></tr></thead>
  <tbody><tr><td>17</td><td>03/06/2026</td></tr></tbody>
</table>

Retro extras

Block progress with <progress>, grooved <hr> separators, collapsible groups with <details>, groupings with <fieldset>.

<progress max="100" value="60">60%</progress>
<details open>
  <summary>Last record data</summary>
  <fieldset><legend>Outcomes</legend>…</fieldset>
</details>

Theming

All colours are custom properties with the --mb- prefix: override them on :root to change era without touching the library.

:root {
  --mb-window: #f5f4f1;     /* near-white window interior */
  --mb-face: #d8d4cf;       /* grey of fields and buttons */
  --mb-tab: #1058a8;        /* blue tab */
  --mb-tab-active: #e8501e; /* active orange tab */
  --mb-mark: #ffff00;       /* yellow highlight */
  --mb-ok: #39e639;         /* green highlight */
  --mb-due: #b8e2e2;        /* cyan highlight */
  --mb-alert: #e60000;      /* red alert */
  --mb-primary: #8ed8d8;    /* cyan primary button */
}