Mates CSS

el.classList.add("open");
el.classList.remove("open");
el.classList.toggle("open");

document.getElementById("m1").classList.add("open");
document.getElementById("m1").classList.remove("open");

// menu / popover / search — same .open class
menu.classList.toggle("open");

:root {
  --m-primary: #0172ad;
  --m-primary-h: #016091;
  --m-primary-a: #014e75;
  --m-on-primary: #ffffff;
  --m-r: 9px;
  --m-fs: 16px;
  --m-font: "Inter", sans-serif;
}

html[data-theme="dark"] { /* or prefers-color-scheme */ }

<button>Default</button>
<button class="btn-primary">Primary</button>
<button class="btn-soft">Soft</button>
<button class="btn-outline">Outline</button>
<button class="btn-ghost">Ghost</button>
<button class="btn-link">Link</button>
<button disabled>Disabled</button>
<a class="btn" href="#">As a link</a>

<button class="btn-sm btn-spin">Loading</button>
<button class="btn-sm">Small</button>
<button class="btn-lg">Large</button>
<button class="btn-elevated btn-primary">Elevated</button>
<button class="btn-close" aria-label="Close"></button>
<button class="btn-icon" aria-label="Add">+</button>
<button class="btn-icon btn-ghost" aria-label="More">⋯</button>
<div class="btn-group">
  <button class="btn-primary">Left</button>
  <button class="btn-primary">Middle</button>
  <button class="btn-primary">Right</button>
</div>

<span class="tag">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-soft-success">active</span>
<span class="tag tag-rounded">Rounded</span>
<span class="tag tag-primary">Removable <span class="tag-x"></span></span>

<label for="email">Email</label>
<input id="email" type="email" placeholder="you@example.com">
<span class="hint">We'll never share it.</span>

<input class="input-success" type="text" value="Looks good">

<div class="m-error">
  <label for="user">Username</label>
  <input id="user" type="text" value="ada!!">
  <span class="hint">Only letters and numbers.</span>
</div>

<label for="plan">Plan</label>
<select id="plan">
  <option>Choose one…</option>
  <option>Free</option>
  <option>Pro</option>
</select>

<label for="notes">Notes</label>
<textarea id="notes" placeholder="Write something…"></textarea>

<label class="choice"><input type="checkbox" checked> Checked</label>
<label class="choice"><input type="checkbox"> Unchecked</label>

<label class="choice"><input type="radio" name="r" checked> Radio A</label>
<label class="choice"><input type="radio" name="r"> Radio B</label>

<label class="switch">
  <input type="checkbox" checked><i></i>
</label>

<label for="volume">Volume</label>
<input type="range" id="volume" min="0" max="100" value="60">

<div class="field">
  <label for="nm">Name</label>
  <input id="nm" type="text">
  <span class="hint">Public.</span>
</div>

<fieldset>
  <legend>Profile</legend>
  <div class="field">
    <label for="fn">Name</label>
    <input id="fn" type="text" placeholder="Ada">
  </div>
</fieldset>

<div class="fgroup">
  <span class="fgroup-label">https://</span>
  <input type="text" value="example.com">
  <button class="btn-primary" type="button">Go</button>
</div>

<div class="input-wrap">
  <span class="input-ico">@</span>
  <input type="text" placeholder="username">
</div>

<div class="input-wrap">
  <input type="password" value="secret12">
  <button type="button" class="pass-toggle">Show</button>
</div>

<div class="search" id="search">
  <input type="search" placeholder="Search commands…">
  <div class="search-panel">
    <a class="menu-item" href="#">Open buttons</a>
    <a class="menu-item" href="#">Open modal</a>
  </div>
</div>
<!-- add .open on .search to show the panel -->

<label class="chip selected"><input type="checkbox" checked> Design</label>
<label class="chip"><input type="checkbox"> Backend</label>
<span class="chip selected">Always on</span>

<span class="rate">
  <input type="radio" name="stars" value="5">
  <input type="radio" name="stars" value="4">
  <input type="radio" name="stars" value="3" checked>
  <input type="radio" name="stars" value="2">
  <input type="radio" name="stars" value="1">
</span>

<div class="seg">
  <label class="seg-item selected"><input type="radio" name="p" checked> Day</label>
  <label class="seg-item"><input type="radio" name="p"> Week</label>
  <label class="seg-item"><input type="radio" name="p"> Month</label>
</div>

<label class="drop">
  <input type="file" hidden>
  <span>Drop files here</span>
  <span class="hint">or click to browse</span>
</label>

<div class="files">
  <div class="file">
    <span class="file-name">brief.pdf</span>
    <span class="file-meta">128 KB</span>
    <button class="btn-close" aria-label="Remove"></button>
  </div>
  <div class="file">
    <span class="file-name">logo.svg</span>
    <span class="file-meta">4 KB</span>
    <button class="btn-close" aria-label="Remove"></button>
  </div>
</div>

<div class="num">
  <button type="button" class="num-btn" aria-label="Decrease">−</button>
  <input type="number" value="2" min="0">
  <button type="button" class="num-btn" aria-label="Increase">+</button>
</div>

<div class="otp">
  <input maxlength="1" inputmode="numeric" aria-label="Digit 1">
  <input maxlength="1" inputmode="numeric" aria-label="Digit 2">
  <input maxlength="1" inputmode="numeric" aria-label="Digit 3">
  <input maxlength="1" inputmode="numeric" aria-label="Digit 4">
</div>

<div class="picks">
  <label class="pick selected">
    <input type="radio" name="plan" checked>
    <span>
      <span class="pick-title">Pro</span>
      <span class="pick-sub">$20 / month</span>
    </span>
  </label>
  <label class="pick">
    <input type="radio" name="plan">
    <span>
      <span class="pick-title">Team</span>
      <span class="pick-sub">$75 / month</span>
    </span>
  </label>
</div>

<div class="card card-hover">
  <div class="card-body">
    <p class="card-title">Card title</p>
    <p class="card-sub">With subtitle</p>
  </div>
  <div class="card-bar">
    <button class="btn-primary btn-sm">Action</button>
    <button class="btn-sm">Cancel</button>
  </div>
</div>

<div class="table-wrap">
  <table class="striped compact">
    <thead><tr><th class="sorted asc">Plan</th><th>Price</th></tr></thead>
    <tbody>
      <tr><td>Free</td><td>$0</td></tr>
      <tr class="selected"><td>Pro</td><td>$20</td></tr>
    </tbody>
  </table>
</div>

<div class="tabs">
  <button class="tab selected">Overview</button>
  <button class="tab">Analytics</button>
  <button class="tab">Settings</button>
</div>
<div class="tabs tabs-line tabs-v">
  <button class="tab selected">Account</button>
  <button class="tab">Billing</button>
  <button class="tab">Team</button>
</div>

<div class="alert">Neutral alert.</div>
<div class="alert alert-primary">
  <div class="alert-head">
    <p class="alert-title">New API</p>
    <div class="alert-actions"><button class="btn-sm">Docs</button></div>
  </div>
  <p>Callout with a title and action.</p>
</div>

<div class="toast">
  <p class="toast-title">Toast</p>
  <p>Neutral dark toast.</p>
</div>
<div class="toast toast-success">
  <p class="toast-title">Success</p>
  <p>Saved.</p>
</div>

<div class="banner">Scheduled maintenance tonight</div>

<div class="skel skel-avatar"></div>
<div class="skel skel-text"></div>
<div class="skel skel-text" style="width:60%"></div>

<i class="spin"></i>
<i class="spin spin-lg"></i>

<div class="empty">
  <p class="empty-title">No projects</p>
  <p class="muted">Create one to get started.</p>
  <div class="empty-actions"><button class="btn-primary btn-sm">New</button></div>
</div>

<div class="result result-ok">
  <span class="result-icon" aria-hidden="true">✓</span>
  <p class="result-title">Paid</p>
  <p class="muted">Invoice #1042</p>
  <div class="result-actions"><button class="btn-sm">Receipt</button></div>
</div>

<button class="tooltip" data-tip="Top tooltip">Top</button>
<button class="tooltip tooltip-b" data-tip="Bottom">Bottom</button>
<button class="tooltip tooltip-r" data-tip="Right">Right</button>

<button onclick="document.getElementById('m1').classList.add('open')">Open</button>
<div id="m1" class="modal">
  <div class="modal-overlay" onclick="this.parentElement.classList.remove('open')"></div>
  <div class="modal-box">
    <div class="modal-head">
      <p class="modal-title">Modal title</p>
      <button class="btn-close" aria-label="Close"
        onclick="this.closest('.modal').classList.remove('open')"></button>
    </div>
    <div class="modal-body">…</div>
    <div class="modal-foot">…</div>
  </div>
</div>

<div class="menu" id="actions">
  <button aria-haspopup="menu"
    onclick="this.parentElement.classList.toggle('open')">Actions</button>
  <div class="menu-panel" role="menu">
    <a class="menu-item" href="#" role="menuitem">Edit</a>
    <a class="menu-item" href="#" role="menuitem">Duplicate</a>
    <hr class="menu-sep">
    <button class="menu-item menu-danger" role="menuitem">Delete</button>
  </div>
</div>

<div class="pop" id="more">
  <button onclick="this.parentElement.classList.toggle('open')">Popover</button>
  <div class="pop-panel">Add .open on .pop.</div>
</div>

<button onclick="document.getElementById('d1').classList.add('open')">Open</button>
<div id="d1" class="drawer">
  <div class="drawer-overlay" onclick="this.parentElement.classList.remove('open')"></div>
  <aside class="drawer-panel">…</aside>
</div>

<div id="s1" class="sheet">
  <div class="sheet-overlay" onclick="this.parentElement.classList.remove('open')"></div>
  <div class="sheet-panel">
    <div class="sheet-handle"></div>
    …
  </div>
</div>

<details>
  <summary>Accordion item one</summary>
  <p>Expand with native details — no JS.</p>
</details>
<details>
  <summary>Accordion item two</summary>
  <p>Another panel.</p>
</details>

<nav class="nav">
  <span class="nav-brand">Mates</span>
  <a href="#" class="selected">Home</a>
  <a href="#">Docs</a>
  <span class="nav-space"></span>
  <span class="avatar avatar-sm">AV</span>
</nav>

<nav class="crumbs">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <span class="current">Button</span>
</nav>

<ol class="steps">
  <li class="step done"><span class="step-dot"></span><span class="step-label">Account</span></li>
  <li class="step current"><span class="step-dot"></span><span class="step-label">Plan</span></li>
  <li class="step"><span class="step-dot"></span><span class="step-label">Pay</span></li>
</ol>
<ol class="steps steps-v">…</ol>

<nav class="sidenav">
  <a class="sidenav-item selected" href="#">Home</a>
  <a class="sidenav-item" href="#">Buttons</a>
  <a class="sidenav-item disabled" href="#">Admin</a>
</nav>

<nav class="bottom-nav" aria-label="Primary">
  <a class="bnav-item selected" href="#">Home</a>
  <a class="bnav-item" href="#">Search</a>
  <a class="bnav-item" href="#">Inbox</a>
  <a class="bnav-item" href="#">Me</a>
</nav>

<nav class="subnav">
  <a class="selected" href="#">Overview</a>
  <a href="#">Members</a>
  <a href="#">Settings</a>
</nav>

<nav class="toc">
  <a class="selected" href="#button">Button</a>
  <a href="#input">Input</a>
  <a href="#table">Table</a>
</nav>

<footer class="footer">© 2026 Mates CSS</footer>

<button class="fab" aria-label="Create">+</button>
<button class="fab fixed" aria-label="Create">+</button>

<span class="avatar avatar-sm">SM</span>
<span class="avatar">AL</span>
<span class="avatar avatar-lg">LG</span>
<span class="avatars" aria-label="Members">
  <span class="avatar avatar-sm">AL</span>
  <span class="avatar avatar-sm">SM</span>
  <span class="avatar avatar-sm">LG</span>
</span>

<p class="status online"><i class="status-dot"></i> Online</p>
<p class="status away"><i class="status-dot"></i> Away</p>
<p class="status"><i class="status-dot busy"></i> Busy</p>

<span class="badge">
  <button class="btn-sm">Inbox</button>
  <i class="badge-n" data-n="8"></i>
</span>

Inbox <span class="count">12</span> · Alerts <span class="count count-danger">3</span>

<progress value="65" max="100"></progress>
<progress aria-label="Loading"></progress>

<div class="list">
  <a class="list-item selected" href="#">Inbox <span class="list-meta">12</span></a>
  <a class="list-item" href="#">Sent <span class="list-meta">3</span></a>
  <a class="list-item disabled" href="#">Archive</a>
</div>

<div class="timeline">
  <div class="tl-item">
    <i class="tl-dot"></i>
    <div class="tl-content"><b>Shipped 0.5</b><p class="muted">Overlays and shell.</p></div>
  </div>
  <div class="tl-item">
    <i class="tl-dot"></i>
    <div class="tl-content"><b>Charts</b><p class="muted">Bars, donut, spark.</p></div>
  </div>
</div>

<div class="stat">
  <span class="stat-label">Revenue</span>
  <span class="stat-val">$24k</span>
  <span class="stat-delta up">+12%</span>
</div>

<dl>
  <dt>Plan</dt><dd>Pro</dd>
  <dt>Seats</dt><dd>8</dd>
</dl>

<dl class="props">
  <dt>Plan</dt><dd>Pro</dd>
  <dt>Seats</dt><dd>8</dd>
</dl>

<div class="msgs">
  <div class="msg">Can you ship today?<span class="msg-meta">Ada · 4:02</span></div>
  <div class="msg msg-out">Yes.<span class="msg-meta">You · 4:03</span></div>
</div>

<figure class="quote">
  <blockquote>Paste it into any stack.</blockquote>
  <figcaption>Sean Freeman</figcaption>
</figure>

<figure class="fig">
  <div class="aspect"></div>
  <figcaption>16×9 product shot</figcaption>
</figure>

<a class="link-card" href="#">
  <span class="link-card-img"></span>
  <span class="link-card-body"><b>Mates CSS</b><span>mates-js.dev</span></span>
</a>

<ul class="tree">
  <li>
    <details open>
      <summary>src</summary>
      <ul>
        <li>
          <details>
            <summary>patterns</summary>
            <ul><li>tree.css</li></ul>
          </details>
        </li>
        <li>buttons.css</li>
        <li>forms.css</li>
      </ul>
    </details>
  </li>
  <li>README.md</li>
  <li>package.json</li>
</ul>

<code>import "mates-css"</code>
<span class="kbd-row"><kbd>⌘</kbd><kbd>K</kbd></span>
<article class="prose">…</article>

<div class="chart-bars" role="img" aria-label="Sales: Mon 65, Tue 90, Wed 45">
  <div class="bar" style="--v: 65"><i data-v="65"></i><span>Mon</span></div>
  <div class="bar" style="--v: 90"><i data-v="90"></i><span>Tue</span></div>
  <div class="bar s2" style="--v: 45"><i data-v="45"></i><span>Wed</span></div>
</div>

<div class="chart-bars" role="img" aria-label="Stacked Q1">
  <div class="bar stacked" style="--v: 100">
    <i>
      <u style="--sv: 45"></u>
      <u class="s2" style="--sv: 30"></u>
      <u class="s3" style="--sv: 25"></u>
    </i>
    <span>Q1</span>
  </div>
  <div class="bar stacked" style="--v: 80">
    <i>
      <u style="--sv: 40"></u>
      <u class="s2" style="--sv: 25"></u>
      <u class="s3" style="--sv: 15"></u>
    </i>
    <span>Q2</span>
  </div>
</div>

<div class="chart-hbars" role="img" aria-label="Skills">
  <div class="hbar" style="--v: 80"><span>Design</span><i></i><b>80</b></div>
  <div class="hbar s2" style="--v: 65"><span>Frontend</span><i></i><b>65</b></div>
</div>

<div class="donut" style="--v1: 42; --v2: 28; --v3: 18; --v4: 12">
  <b>1,204</b>
</div>
<div class="legend legend-v">
  <span><i class="s1"></i>Organic</span>
  <span><i class="s2"></i>Paid</span>
  <span><i class="s3"></i>Referral</span>
</div>

<div class="ring" style="--v: 72"><b>72%</b></div>
<div class="ring s3" style="--v: 45"><b>45%</b></div>

<div class="spark" role="img" aria-label="Rising trend">
  <i style="--v:30"></i><i style="--v:55"></i><i style="--v:40"></i>
  <i style="--v:80"></i><i style="--v:62"></i><i class="s2" style="--v:90"></i>
</div>

<div class="shell">
  <header class="shell-top">…</header>
  <aside class="shell-side">…</aside>
  <main class="shell-main">…</main>
</div>

<div class="split" style="--split: 35%">
  <div class="split-a">A</div>
  <div class="split-b">B</div>
</div>

<div class="m-grid m-grid-cols-3 m-gap-sm">
  <div class="alert">col</div>
  <div class="alert alert-primary">col</div>
  <div class="alert">col</div>
</div>