imeimi static components

Live example + its markup. A JS tag means the component needs imeimi.js.

Tokens

Surfaces — the four grounds every other token is measured against

--c-bg

--c-surface

--c-surface-sunken

--c-surface-raised

Borders — 1px decoration, so the ratios below are reported, not enforced

--c-border

--c-border-strong

--c-border-subtle

Text — every ratio is against the worst surface the role is allowed on. --c-text-subtle is decorative glyphs only and is documented as sub-AA

--c-text

--c-text-strong

--c-text-muted

--c-text-subtle

Accent & focus ring — the ring ink is the accent itself, not a pale tint of it: a focus indicator is non-text UI and needs 3:1, which no pale tint reaches at any alpha

--c-accent

--c-accent-hover

--c-accent-border

--c-ring

--c-on-accent

Status — three roles per state (text / bg / border), so a component never synthesises a tint with alpha over a surface it can’t know. The -bg is opaque

--c-info-text

--c-info-bg

--c-info-border

--c-success-text

--c-success-bg

--c-success-border

--c-warning-text

--c-warning-bg

--c-warning-border

--c-danger-text

--c-danger-bg

--c-danger-border

Status back-compat aliases — deprecated. Each is byte-identical to its -text role and no component references them; they exist so a v2.0–v2.2 consumer override keeps working

--c-success

--c-warning

--c-danger

Control fills & dimmer ink — the two colors that are deliberately the same in both themes: a thumb sits on its own track, and a dimmer is ink rather than a surface

--c-switch-thumb

--c-backdrop

Code surface and its syntax palette — checked against the code surface, not the page

--c-code-bg

--c-code-text

--c-code-border

--c-hl-comment

--c-hl-keyword

--c-hl-entity

--c-hl-string

--c-hl-constant

Type — the two family stacks. These live in base.css rather than tokens.css because they are not themed, and the woff2 files behind them come from the separately-versioned fonts track, which a page links on its own

--font-sans Sphinx of black quartz, judge my vow — 0123456789

--font-mono const n = 0123; // il1 O0 — fixed pitch

Corner radius — five steps; every component radius goes through one of them, never a literal

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-full

Elevation — one drop shadow per floating tier. These are the only color-carrying tokens with an explicit .dark pair: a shadow must stay dark in both themes, only deeper

--shadow-raisedmenus, toasts

--shadow-overlaypicker popovers

--shadow-modaldialogs

--shadow-floatfloating action button

--shadow-thumbslider / switch thumb

--shadow-draweroff-canvas edge

Focus rings — four widths of one halo. Every component ring references one of these instead of hand-rolling a box-shadow; the alphas are the floor that keeps the composite at or above 3:1 on every surface

--ring-shadowbuttons, toggles

--ring-shadow-fieldtext fields (softer)

--ring-shadow-thicksmall round thumbs

--ring-shadow-compactdense grids (calendar cells)

Layer order — the values stay unique so overlapping chrome never ties and falls back to DOM order

--z-headersticky site header
--z-backdropthe dimmer behind a drawer
--z-sidebarthe off-canvas drawer itself
--z-popovermenus and picker panels — above the drawer
--z-toasttoast stack
--z-tooltiptooltips — above everything, they are transient

Motion, control density & shell

--dur-fastcolor, opacity, border, box-shadow
--dur-basegeometry: drawer slide, transform, toast in/out
--control-pyshared control padding-block
--control-pxshared control padding-inline
--control-lhexplicit on every control — the body 1.65 would make it 44.4px
--shell-header-hrendered site-header height; the sidebar’s sticky offset
--disabled-opacitythe one disabled-state opacity

Icons

Class is icon- + the name below, sized with font-size — e.g. <span class="icon-copy"></span>

alert-circle

alert-triangle

arrow-down

arrow-left

arrow-right

arrow-up

bell

book

bookmark

calendar

camera

check

check-circle

chevron-down

chevron-left

chevron-right

chevron-up

clock

cloud

code

compass

copy

credit-card

database

download

edit

external-link

eye

eye-off

file

filter

flag

folder

folder-open

globe

grid

heart

help-circle

home

image

info

link

list

lock

log-in

log-out

mail

map

map-pin

message-circle

message-square

mic

minus

moon

more-horizontal

more-vertical

navigation

notepad

paperclip

pause

phone

play

plus

qr-code

refresh-cw

reset

save

send

settings

shopping-cart

star

stop

sun

tag

thumbs-down

thumbs-up

trash

trophy

unlock

upload

user

video

wifi

x-circle

<span class="icon-search"></span>
<span class="icon-search icon--lg"></span>
<span class="icon-search" style="font-size:2.5rem"></span>
<button class="btn btn--ghost"><span class="icon icon-search"></span> inherits the button's font-size</button>

States

Every cell forces its state through the component’s own hook — an attribute, a property set from script, or a class the component defines. :hover, :active and :focus-visible get no forced cell: a pseudo-class is set by the user agent, and faking one here would mean this page repainting the component it is supposed to show. The last row is live — point at it, then Tab into it.

Button

default

:disabled

[aria-disabled]

Field

default

[aria-invalid]

:disabled

Radio

default

:checked

:disabled

Switch

default

:checked

:disabled

Tab

default

[aria-selected]

Select option

default

[aria-selected]

Dropdown item

default

[aria-disabled]

List group row

default

Assets

[aria-current]

Assets

.is-active

Assets

:disabled

Pagination

default

[aria-current]

.is-disabled

Nav link

default

Components

.active

Components

Breadcrumb

link

[aria-current]

Card

--interactive

Open

[aria-disabled]

Archived

Dropzone

default

Drop here

.is-dragover

Drop here

Copy button

resting (hover it)

ok()

.is-copied

ok()

Live only

:hover / :active

:focus-visible

:focus

<button class="btn btn--primary" disabled>            <!-- :disabled -->
<button class="btn btn--ghost" aria-disabled="true">  <!-- an <a> has no :disabled -->
<input class="field" aria-invalid="true">             <!-- error, independent of :focus -->
<input class="checkbox" checked>                      <!-- :checked -->
<input class="checkbox">                              <!-- el.indeterminate = true (script only) -->
<button class="tab" aria-selected="true">
<button class="select-option" aria-selected="true">
<a class="list-group__item" aria-current="page">       <!-- .is-active only paints; it announces nothing -->
<a class="pagination-link is-disabled">
<a class="nav-link active">
<label class="dropzone is-dragover">                  <!-- upload.js toggles it -->
<button class="code-copy is-copied">                  <!-- copy.js toggles it for 1.4 s -->

Accordion

What is imeimi static?

A shared design-asset CDN.

How do I use it?

Link the stylesheet and reference a class.

<div class="accordion">
  <details open><summary>What is imeimi static?</summary><div class="accordion__body">A shared design-asset CDN.</div></details>
  <details><summary>How do I use it?</summary><div class="accordion__body">Link the stylesheet and reference a class.</div></details>
</div>

Alert

Note

An informational message.

Saved successfully.

Double-check your input.

Something went wrong.

<div class="alert alert--info">
  <p class="alert__title"><span class="icon icon-info"></span> Note</p>
  <p>An informational message.</p>
</div>
<div class="alert alert--success"><p><span class="icon icon-check-circle"></span> Saved successfully.</p></div>
<div class="alert alert--warning"><p><span class="icon icon-alert-triangle"></span> Double-check your input.</p></div>
<div class="alert alert--danger"><p><span class="icon icon-alert-circle"></span> Something went wrong.</p></div>

Avatar

<span class="avatar">IM</span>
<span class="avatar"><img src="sample.svg" alt=""></span>
<span class="avatar" style="font-size:1.4rem">42</span>

Badge

42 new beta AC TLE WA

<span class="badge">42</span>
<span class="badge badge--primary">new</span>
<span class="badge badge--info">beta</span>
<span class="badge badge--success">AC</span>
<span class="badge badge--warning">TLE</span>
<span class="badge badge--danger">WA</span>

Button

<button class="btn btn--primary"><span class="icon icon-check"></span> Primary</button>
<button class="btn btn--ghost"><span class="icon icon-copy"></span> Ghost</button>
<button class="btn btn--ghost btn--icon" aria-label="close"><span class="icon icon-x"></span></button>
<button class="btn btn--primary" disabled>Disabled</button>
<button class="btn btn--icon btn--floating" aria-label="Back to top"><span class="icon icon-arrow-up"></span></button>

Card

Put card--interactive on a real <a href> or <button> — a <div> with a click handler is neither focusable nor announced.

Components style appearance only — sizing and layout stay yours.

Open the demo

Hover lifts it; Tab shows the focus ring.

Archived

aria-disabled plus tabindex="-1" — the opacity is only the cue, never the enforcement.

<div class="card" style="width:15rem">
  <div class="card__header">imeimi.css</div>
  <div class="card__body"><p style="margin:0">Components style appearance only — sizing and layout stay yours.</p></div>
  <div class="card__footer">Served immutable from a pinned version dir.</div>
</div>

<a class="card card--interactive" href="#card" style="width:15rem">
  <div class="card__body">
    <p style="margin:0 0 .25rem;font-weight:600">Open the demo <span class="icon icon-arrow-right"></span></p>
    <p style="margin:0;color:rgb(var(--c-text-muted));font-size:.875rem">Hover lifts it; Tab shows the focus ring.</p>
  </div>
</a>

<a class="card card--interactive" href="#card" aria-disabled="true" tabindex="-1" style="width:15rem">
  <div class="card__body">
    <p style="margin:0 0 .25rem;font-weight:600">Archived</p>
    <p style="margin:0;color:rgb(var(--c-text-muted));font-size:.875rem">aria-disabled plus tabindex="-1" — the opacity is only the cue, never the enforcement.</p>
  </div>
</a>

Checkbox & radio

Subscribe Remember me Free Pro

<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="checkbox" type="checkbox" checked> Subscribe
</label>
<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="checkbox" type="checkbox"> Remember me
</label>
<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="radio" type="radio" name="plan" checked> Free
</label>
<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="radio" type="radio" name="plan"> Pro
</label>

Code block JS

clamp.cpp

// constrain a value to a range
#include <algorithm>

int clamp(int n, int lo, int hi) {
  return std::min(hi, std::max(lo, n));  // long lines scroll horizontally inside the code block when they overflow
}

<div class="code-block">
  <div class="code-filename">clamp.cpp</div>
  <pre><code><span class="hljs-comment">// constrain a value to a range</span>
<span class="hljs-meta">#include <span class="hljs-string">&lt;algorithm&gt;</span></span>

<span class="hljs-type">int</span> <span class="hljs-title">clamp</span>(<span class="hljs-type">int</span> n, <span class="hljs-type">int</span> lo, <span class="hljs-type">int</span> hi) {
  <span class="hljs-keyword">return</span> <span class="hljs-built_in">std</span>::<span class="hljs-built_in">min</span>(hi, <span class="hljs-built_in">std</span>::<span class="hljs-built_in">max</span>(lo, n));  <span class="hljs-comment">// long lines scroll horizontally inside the code block when they overflow</span>
}</code><button class="btn btn--icon code-copy" type="button" aria-label="Copy" data-copy><span class="icon icon-copy"></span></button></pre>
</div>

// running sum
auto total = std::accumulate(v.begin(), v.end(), 0);

<div class="code-block">
  <pre><code><span class="hljs-comment">// running sum</span>
<span class="hljs-keyword">auto</span> total = <span class="hljs-built_in">std</span>::<span class="hljs-built_in">accumulate</span>(v.<span class="hljs-built_in">begin</span>(), v.<span class="hljs-built_in">end</span>(), <span class="hljs-number">0</span>);</code><button class="btn btn--icon code-copy" type="button" aria-label="Copy" data-copy><span class="icon icon-copy"></span></button></pre>
</div>

Highlighting is a five-role palette, not forty colors: every .hljs-* class below resolves to one of these token roles, so a highlighter only has to emit the standard classes.

--c-hl-comment.hljs-comment .hljs-quote
--c-hl-keyword.hljs-keyword .hljs-selector-tag .hljs-subst .hljs-doctag .hljs-formula .hljs-type
--c-hl-entity.hljs-title .hljs-section .hljs-selector-id .hljs-selector-class .hljs-tag .hljs-name
--c-hl-string.hljs-string .hljs-char .hljs-regexp .hljs-link .hljs-meta .hljs-string
--c-hl-constant.hljs-number .hljs-literal .hljs-variable .hljs-template-variable .hljs-attr .hljs-attribute .hljs-meta .hljs-built_in .hljs-builtin-name .hljs-symbol .hljs-bullet
--c-code-text.hljs-operator .hljs-punctuation .hljs-params
emphasis.hljs-emphasis .hljs-strong

Color picker JS

<div class="color-picker" data-color-picker data-value="#3b82f6"></div>

Control density JS

.btn, .field, .select-trigger and .stepper all ship the shared --control-py / --control-px / --control-lh default, so they are the same 42 px tall on one row. Override the trio, or each control, with your own utilities.

<div style="display:flex;flex-wrap:wrap;gap:.75rem;align-items:center">
  <button class="btn btn--primary" type="button">Save</button>
  <input class="field" placeholder="Filename" style="width:9rem">
  <div class="select" data-select>
    <button class="select-trigger" type="button" data-select-trigger>
      <span data-select-label></span><span class="icon icon-chevron-down"></span>
    </button>
    <div class="select-menu" data-select-menu>
      <button class="select-option" type="button" role="option" data-value="css" aria-selected="true">imeimi.css</button>
      <button class="select-option" type="button" role="option" data-value="js">imeimi.js</button>
    </div>
  </div>
  <div class="stepper" data-stepper>
    <input class="stepper-input" type="number" value="1" min="0">
    <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
  </div>
</div>

Date picker JS

<div class="date-picker" data-date-picker data-value="2026-06-14"></div>

Divider

Above the line

Below the line

Draft Edited 2 min ago 3 files

<div style="width:100%">
  <p style="margin:0">Above the line</p>
  <hr class="divider">
  <p style="margin:0">Below the line</p>
</div>

<div style="display:flex;align-items:center">
  <span>Draft</span>
  <span class="divider--vertical"></span>
  <span>Edited 2 min ago</span>
  <span class="divider--vertical"></span>
  <span>3 files</span>
</div>

Dropdown JS

<div class="dropdown" data-dropdown>
  <button class="btn btn--ghost" data-dropdown-trigger>Menu <span class="icon icon-chevron-down"></span></button>
  <div class="dropdown-menu" data-dropdown-menu>
    <button class="dropdown-item">Edit</button>
    <button class="dropdown-item">Duplicate</button>
    <div class="dropdown-sep"></div>
    <button class="dropdown-item">Delete</button>
  </div>
</div>

.dropdown-menu--end right-aligns the panel under a trigger near the viewport edge. Both menus below are static .open markup without data-dropdown, so they stay open together — the real widget allows one open menu at a time.

<div class="dropdown open">
  <button class="btn btn--ghost">Left-aligned <span class="icon icon-chevron-down"></span></button>
  <div class="dropdown-menu">
    <button class="dropdown-item">Rename</button>
    <button class="dropdown-item" aria-disabled="true">Move</button>
  </div>
</div>

<div class="dropdown open">
  <button class="btn btn--ghost">Right-aligned <span class="icon icon-chevron-down"></span></button>
  <div class="dropdown-menu dropdown-menu--end">
    <button class="dropdown-item">Rename</button>
    <button class="dropdown-item" aria-disabled="true">Move</button>
  </div>
</div>

Empty state

The icon is decorative and gets no label, so the title carries the whole message. If the block appears asynchronously, put aria-live="polite" on the region that swaps, not on .empty-state.

No assets yet

Cut a version and it will show up here.

<div class="empty-state">
  <span class="empty-state__icon icon-folder-open"></span>
  <p class="empty-state__title">No assets yet</p>
  <p class="empty-state__desc">Cut a version and it will show up here.</p>
  <div class="empty-state__actions">
    <button class="btn btn--primary" type="button"><span class="icon icon-plus"></span>Add one</button>
    <button class="btn btn--ghost" type="button">Learn more</button>
  </div>
</div>

Nothing matched “xyzzy”

Try a shorter query.

<div class="card" style="width:24rem">
  <div class="card__header">Library</div>
  <div class="empty-state">
    <span class="empty-state__icon icon-search"></span>
    <p class="empty-state__title">Nothing matched &ldquo;xyzzy&rdquo;</p>
    <p class="empty-state__desc">Try a shorter query.</p>
  </div>
</div>

Field

<input class="field" placeholder="Email address">
<div style="position:relative;display:inline-block">
  <input class="field" type="password" value="correcthorse" style="padding-right:2.4rem">
  <button class="btn btn--icon" type="button" data-pw aria-label="Show password"
    style="position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:rgb(var(--c-text-muted))">
    <span class="icon icon-eye"></span>
  </button>
</div>
<textarea class="field" style="width:13rem;height:4rem">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</textarea>

File upload JS

Drop images here or click to browse

<label class="dropzone" data-dropzone>
  <span class="icon icon-upload"></span>
  <span>Drop images here or click to browse</span>
  <input type="file" accept="image/*" multiple>
  <div class="dropzone-preview" data-dropzone-preview></div>
  <div class="dropzone-files" data-dropzone-files></div>
</label>

Footer

The bar ships full-width; the container (max-width, centering) is yours — the example carries one on .site-footer__inner.

<footer class="site-footer">
  <div class="site-footer__inner" style="margin:0 auto;max-width:72rem">imeimi static &mdash; component gallery</div>
</footer>

Form field

CSS can't wire these up: you own the for/id pair, the aria-describedby list pointing at the help and error ids, and aria-invalid="true" while the error stands.

Display name

Shown next to your submissions.

We only use this to sign you in.

That address looks incomplete.

Theme

Follow the system Always dark

<div class="form-field" style="width:16rem">
  <label class="form-label" for="f-name">Display name</label>
  <input class="field" id="f-name" value="imeimi" aria-describedby="f-name-help">
  <p class="form-help" id="f-name-help">Shown next to your submissions.</p>
</div>

<div class="form-field" style="width:16rem">
  <label class="form-label form-label--required" for="f-mail">Email</label>
  <input class="field" id="f-mail" type="email" value="imeimi@" required
         aria-invalid="true" aria-describedby="f-mail-help f-mail-err">
  <p class="form-help" id="f-mail-help">We only use this to sign you in.</p>
  <p class="form-error" id="f-mail-err">
    <span class="icon icon-alert-circle"></span>That address looks incomplete.
  </p>
</div>

<fieldset class="form-fieldset" style="width:16rem">
  <legend class="form-legend">Theme</legend>
  <div class="form-field">
    <label style="display:inline-flex;gap:.5rem;align-items:center">
      <input class="radio" type="radio" name="pref-theme" checked> Follow the system
    </label>
    <label style="display:inline-flex;gap:.5rem;align-items:center">
      <input class="radio" type="radio" name="pref-theme"> Always dark
    </label>
  </div>
</fieldset>

Header

Sticky at --z-header: 10, full-width like the footer. The example below is pinned in place by the gallery’s own stylesheet so a second sticky bar doesn’t ride over the page header — that position is the only thing this page overrides.

<header class="site-header">
  <div class="site-header__inner" style="margin:0 auto;max-width:72rem">
    <a class="site-header__brand" href="/"><span class="icon icon-code"></span> imeimi static</a>
    <div style="display:flex;gap:.5rem;align-items:center">
      <a class="btn btn--ghost" href="/demo">Components</a>
      <button class="btn btn--ghost btn--icon" type="button" aria-label="Switch to dark mode"><span class="icon icon-moon"></span></button>
    </div>
  </div>
</header>

Image

<img class="image" src="sample.svg" alt="landscape" style="width:16rem">
<img class="image image--cover" src="sample.svg" alt="" style="width:6rem;height:6rem">

Kbd

Ctrl + C Esc

<kbd>Ctrl</kbd> + <kbd>C</kbd>
<span class="kbd">Esc</span>

Link

Documentation Explicit .link — same skin, for an anchor a parent reset flattened

<a href="#">Documentation</a>
<span><a class="link" href="#">Explicit .link</a> — same skin, for an anchor a parent reset flattened</span>

List group

Mark the current row with aria-current — .is-active is the styling-only fallback and announces nothing. The focus ring is an inset outline because the group clips its overflow.

Plain row
Assets
Tokens

<ul class="list-group" style="width:16rem">
  <li class="list-group__item"><span class="icon icon-file"></span>Plain row</li>
  <li><a class="list-group__item list-group__item--interactive" href="#list-group"><span class="icon icon-folder"></span>Assets</a></li>
  <li><a class="list-group__item list-group__item--interactive" href="#list-group"
         aria-current="page"><span class="icon icon-tag"></span>Tokens</a></li>
  <li><button class="list-group__item list-group__item--interactive" type="button" disabled>
    <span class="icon icon-trash"></span>Archive
  </button></li>
</ul>

Modal JS

<button class="btn btn--primary" data-modal-open="demo-modal">Open modal</button>
<dialog class="modal" id="demo-modal">
  <h2 class="modal__title">Delete file?</h2>
  <p>This action cannot be undone.</p>
  <div class="modal__actions">
    <button class="btn btn--ghost" data-modal-close>Cancel</button>
    <button class="btn btn--primary" data-modal-close>Delete</button>
  </div>
</dialog>

Nav links

Appearance only — display and padding are yours, which is why the rows below sit in a page-owned layout rule rather than arriving pre-spaced.

<nav style="width:13rem">
  <a class="nav-link active" href="#">Overview</a>
  <a class="nav-link" href="#">Components</a>
  <a class="nav-link" href="#">Tokens</a>
</nav>

Overlay

The dimmer behind a drawer or a panel. Same ink and the same 0.45 opacity as .modal::backdrop. It is position: fixed over the whole viewport, so the box below scopes it — geometry only.

Panel content

The dimmer sits above this at --z-backdrop: 40 and below the drawer or dialog you open on top of it.

<!-- your JS toggles .visible; there is no other state -->
<div class="backdrop" id="nav-backdrop"></div>

Pagination

<nav class="pagination">
  <a href="#" class="is-disabled"><span class="icon icon-chevron-left"></span></a>
  <a href="#">1</a>
  <a href="#" aria-current="page">2</a>
  <a href="#">3</a>
  <a href="#"><span class="icon icon-chevron-right"></span></a>
</nav>

Progress

<progress class="progress" value="40" max="100"></progress>
<progress class="progress" value="75" max="100"></progress>
<progress class="progress"></progress>

Prose

1.Getting started#

Pin the stylesheet and reference a component such as .btn in your markup.

Simplicity is the ultimate sophistication.

Pretendard for text
JetBrains Mono for code

const greeting = "hello";

<article class="prose">
  <h2><span class="section-number">1.</span>Getting started<a class="heading-anchor" href="#prose">#</a></h2>
  <p>Pin the stylesheet and reference a <a href="#">component</a> such as <code>.btn</code> in your markup.</p>
  <blockquote>Simplicity is the ultimate sophistication.</blockquote>
  <ul><li>Pretendard for text</li><li>JetBrains Mono for code</li></ul>
  <pre><code>const greeting = "hello";</code></pre>
  <figure class="md-img"><img src="sample.svg" alt="a single figure"></figure>
  <div class="md-gallery">
    <figure class="md-img"><img src="sample.svg" alt=""></figure>
    <figure class="md-img"><img src="sample.svg" alt=""></figure>
  </div>
</article>

Select JS

<div class="select" data-select>
  <button class="select-trigger" type="button" data-select-trigger>
    <span data-select-label></span><span class="icon icon-chevron-down"></span>
  </button>
  <div class="select-menu" data-select-menu>
    <button class="select-option" type="button" role="option" data-value="a" aria-selected="true">Option A</button>
    <button class="select-option" type="button" role="option" data-value="b">Option B</button>
    <button class="select-option" type="button" role="option" data-value="c">Option C</button>
  </div>
</div>

Sidebar JS

Below the 64 rem shell breakpoint the rail becomes an off-canvas drawer, so the first box scopes the drawer to stay viewable at any window width. The second box needs no such trick — at or above the breakpoint .sidebar is an in-flow rail, which also means that box reads empty on a narrow window.

Main content area.

<button class="btn btn--icon" data-sidebar-toggle aria-controls="nav"><span class="icon icon-menu"></span></button>
<aside id="nav" class="sidebar">
  <div class="sidebar-inner">
    <a class="nav-link active" href="#">Overview</a>
  </div>
</aside>
<div class="backdrop" data-sidebar-backdrop aria-controls="nav"></div>

<aside class="sidebar">
  <div class="sidebar-inner">
    <a class="nav-link active" href="#">Overview</a>
    <a class="nav-link" href="#">Components</a>
  </div>
  <button class="sidebar-expand-btn" type="button" aria-label="Expand"><span class="icon icon-chevron-right"></span></button>
</aside>

<aside class="sidebar collapsed">
  <div class="sidebar-inner">
    <a class="nav-link active" href="#">Overview</a>
  </div>
  <button class="sidebar-expand-btn" type="button" aria-label="Expand"><span class="icon icon-chevron-right"></span></button>
</aside>

Skeleton

<div style="width:100%">
  <div class="skeleton" style="height:5rem"></div>
  <div class="skeleton skeleton--text" style="margin-top:.75rem"></div>
  <div class="skeleton skeleton--text"></div>
  <div class="skeleton skeleton--text"></div>
</div>

Slider JS

<input class="slider" type="range" min="0" max="100" value="40" style="max-width:18rem">

Spinner

<span class="spinner" style="color:rgb(var(--c-accent))"></span>
<span class="spinner" style="font-size:1.5rem"></span>
<span class="spinner spinner--thick" style="font-size:2rem"></span>
<span class="spinner" style="font-size:2rem;--spinner-speed:1.6s"></span>

Stepper JS

<div class="stepper" data-stepper>
  <input class="stepper-input" type="number" value="3" min="0" max="100" step="1">
  <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
</div>

<div class="stepper" data-stepper data-hold-delay="250" data-hold-interval="30">
  <input class="stepper-input" type="number" value="0" step="5">
  <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
</div>

<div class="stepper" data-stepper data-hold="off">
  <input class="stepper-input" type="number" value="0">
  <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
</div>

Summary

What is a disclosure?

A native <details>/<summary> element that toggles its content — no JavaScript needed.

How is it styled?

Just add .details — it only swaps the marker for a chevron. No wrapper box; you lay out the content.

<details class="details" open>
  <summary>What is a disclosure?</summary>
  <p>A native &lt;details&gt;/&lt;summary&gt; element that toggles its content — no JavaScript needed.</p>
</details>
<details class="details">
  <summary>How is it styled?</summary>
  <p>Just add <code>.details</code> — it only swaps the marker for a chevron. No wrapper box; you lay out the content.</p>
</details>

Switch

Notifications Auto-save

<label class="switch"><input type="checkbox" checked><span class="switch__track"></span> Notifications</label>
<label class="switch"><input type="checkbox"><span class="switch__track"></span> Auto-save</label>

Table

Problem	Verdict	Time
A + B	AC	15 ms
Knapsack	TLE	—
Dijkstra	AC	120 ms

<table class="table table--hover">
  <thead><tr><th>Problem</th><th>Verdict</th><th>Time</th></tr></thead>
  <tbody>
    <tr><td>A + B</td><td>AC</td><td>15 ms</td></tr>
    <tr><td>Knapsack</td><td>TLE</td><td>&mdash;</td></tr>
    <tr><td>Dijkstra</td><td>AC</td><td>120 ms</td></tr>
  </tbody>
</table>

Track	Latest
imeimi	v2.3.0
favicon	v1.0.0
fonts	v1.0.0
—	—

<table class="table table--striped">
  <thead><tr><th>Track</th><th>Latest</th></tr></thead>
  <tbody>
    <tr><td>imeimi</td><td>v2.3.0</td></tr>
    <tr><td>favicon</td><td>v1.0.0</td></tr>
    <tr><td>fonts</td><td>v1.0.0</td></tr>
    <tr><td>&mdash;</td><td>&mdash;</td></tr>
  </tbody>
</table>

Tabs JS

Overview panel.

<div class="tabs" data-tabs>
  <div class="tablist" role="tablist">
    <button class="tab" role="tab" aria-controls="tb1" aria-selected="true">Overview</button>
    <button class="tab" role="tab" aria-controls="tb2">Usage</button>
    <button class="tab" role="tab" aria-controls="tb3">API</button>
  </div>
  <div class="tab-panel" id="tb1" role="tabpanel">Overview panel.</div>
  <div class="tab-panel" id="tb2" role="tabpanel" hidden>Usage panel.</div>
  <div class="tab-panel" id="tb3" role="tabpanel" hidden>API panel.</div>
</div>

Toast JS

<button class="btn btn--primary" onclick="imeimiToast.show('Saved to library', { type: 'success' })">success</button>
<button class="btn btn--ghost" onclick="imeimiToast.show('Pinned to v2.3.0', { type: 'info' })">info</button>
<button class="btn btn--ghost" onclick="imeimiToast.show('This version is immutable', { type: 'warning' })">warning</button>
<button class="btn btn--ghost" onclick="imeimiToast.show('Upload failed', { type: 'danger' })">danger</button>
<button class="btn btn--ghost" onclick="imeimiToast.show('Stays until dismissed', { duration: 0 })">duration: 0</button>

Tooltip

<button class="btn btn--ghost" data-tooltip="Tooltip on top">Hover me</button>
<button class="btn btn--ghost" data-tooltip="Below" data-tooltip-pos="bottom">And me</button>

Tree

src
- css
- js
  - dropdown.js
  - select.js
- icons
  - home.svg

<ul class="tree">
  <li><details open>
    <summary>src</summary>
    <ul>
      <li class="tree__file">css</li>
      <li><details>
        <summary>js</summary>
        <ul>
          <li class="tree__file">dropdown.js</li>
          <li class="tree__file">select.js</li>
        </ul>
      </details></li>
      <li><details>
        <summary>icons</summary>
        <ul><li class="tree__file">home.svg</li></ul>
      </details></li>
    </ul>
  </details></li>
</ul>