mica

<m-vstack> — vertical flow

<m-hstack> — one row; add wrap to allow wrapping

<m-zstack> — layering; paint order is DOM order

Per-layer placement is just place-self on the child — light DOM means the platform is the escape hatch.

<m-grid> — responsive, no media queries

<m-sidecar> — fixed + flexible pair, stacks when narrow

<m-switcher> — row ↔ column at a threshold

<m-reel> — horizontal scroll with snap

<m-frame> — hold a ratio, crop media to fit

<m-cover> — center the principal, pin the edges

Defaults to min-block-size: 100svh; scaled down here via --min-height. An h1 is principal by default; mark another child with data-principal to override it.

The scales — for eyeballing the ramps (toggle OS dark mode)

Each step should be distinguishable from its neighbors; 6–8 should read as borders on 1–3; 11 should be readable text on 1–3.

Contrast spot-checks: muted text (11) on surface-raised (2) on-accent on accent-9 border (6) on surface (1)

Buttons — native <button>, styled directly

data-variant accepts primary, ghost, or danger; data-size accepts small or large.

Status roles (hue knobs, no scales): danger success warn warn solid

Fields — native inputs, zero classes

Checks — drawn controls, native semantics

All three are native <input>s — keyboard, forms, and state stay native. role="switch" gives the track its matching on/off semantics.

Segmented control — native radio group

Fused labels around native radios: arrows, keyboard, forms, and AT semantics come from the browser. No script and no ARIA reconstruction.

Stepper — framed sequence controls

Mica fuses the frame; native buttons provide focus, keyboard, and disabled behavior. Labels, events, routing, and value changes stay in the application.

Visually hidden — announced, not seen

There is a hidden sentence at the end of this paragraph. This text is off-screen but present in the accessibility tree. Sighted readers see nothing; a screen reader reads it in place.

Skip to content — the skip link before this dash is hidden until it takes focus. Tab to it, or press Tab from the address bar, and it appears.

The same rule hides the radios inside m-segmented, where the label is the visible control.

Badge — quiet metadata

Informational only. For an interactive chip, compose a real button rather than making a badge pretend to be a control.

Avatar — initials, native images, optional deterministic paint

AN AL AN AL GH MI

Initials and direct img children need no script. avatar.js locally derives color and features from the blobatar seed; contained opts out of the full-bleed treatment.

Skeleton — quiet loading placeholders

Each empty box reserves consumer-defined space while the surrounding region owns loading state and announcements. Reduced-motion users get a static fill.

Stat grid — semantic summaries in a fused frame

Position

3rdEastern Conference

Played

24League matches

Wins

1458% win rate

Goal difference

+18

Next match

Aug 29vs. Northbridge

A native description list keeps each label associated with its value. Intrinsic columns wrap without a media query; .stat remains the individual-item styling hook.

Progress & meter — thin bars, status-graded meter

Content — tables, lists, code. Zero classes.

Inline code gets a chip; press ⌘K for nothing.

<m-vstack gap="lg">
  <button data-variant="primary">Submit</button>
</m-vstack>

Delete the stylesheet and it still works — that is the demo.

The hr above is a thematic break — Markdown emits one for every ---, so prose-heavy pages get them constantly. Mica replaces the browser's beveled groove with a quiet rule.

Dialog — modal & drawer, zero JS

Open, focus trap, Esc, backdrop, close — browser + invoker commands. No script anywhere in this section.

Accordion — details + summary, exclusive via name

Popover, menu & tooltip — zero JS

<m-toast> — display only; queueing is JS-enhanced

With toast.js: open toasts stack upward, auto-dismiss (hover to pause), and toast() spawns them from code. Position is the app-level token --toast-position — the picker sets it on :root; every open toast obeys.

Tabs — m-tabs + tabs.js (JS-enhanced)

The underline variant uses the same behavior. In a narrow rail, labels stay on one line, the nav scrolls horizontally, and edge markers show whichever direction has more tabs:

Combobox — m-combobox + combobox.js (JS-enhanced)

Type to filter; arrows + Enter to pick. Without the module this is a native datalist — functional autocomplete, just unstylable.

Escape hatch — arbitrary values via custom properties

<m-vstack style="--gap: 2.75rem"> — attributes and custom properties are the same mechanism.