Skip to content

Shipping

@teasim/astro

Accessible elements that render the markup you would have written, and carry their behaviour with them.

npm install @teasim/astro
Target
Content sites
Style
Yours
Deps
None

Surface

Elements that render markup, not opinions.

Each part is meant to stay legible, reviewable, and easy to change later.

Elements

77 families
Accordion, dialog, menu, table, carousel — each rendering the markup you would have written by hand.

Recipes

Named parts
Every family exposes a recipe whose parts you can override, and caller classes merge last.

State

The browser's, not a script's
Disclosure is a details element and a modal is a dialog. The runtime binds on top when there is one.

Access

Checked, not claimed
Accessible names, focus rings that clear three to one, and a forced-colours fallback on every control.

Style

No stylesheet shipped
Your TeaCSS build scans the package and generates exactly the classes your markup used.

Deps

None taken
No external runtime dependencies at all — where a browser primitive exists, it is used directly.

What it is

A component library that renders semantic HTML and stops there. An accordion is a details element. A dialog is a dialog element. The exclusive-group behaviour when accordion items share a name is the browser’s, not a script’s.

What it refuses to do

It ships no stylesheet. A library that ships CSS decides how your site looks, and that is a borrowed decision that is expensive to undo. Instead every family exposes a named recipe — accordionRecipe, buttonRecipe — whose parts you can override, and caller classes merge last.

It also takes no external dependencies. Not a utility library, not a focus trap, not a positioning engine. Where a browser primitive exists the package uses it, and where one does not the behaviour lives in a small shared runtime.

The shape of a family

Every family follows the same conventions, so learning one teaches the rest:

  • Elements are found by data-slot="family/part", never by class.
  • Variants are named the same words across families — a button, a badge and an alert all answer to primary, outline, ghost.
  • Anything focusable has an accessible name and a visible focus ring that clears 3:1 against the surface behind it.

Getting started

Three steps, and none of them is a migration.

  1. Install the package

    One dependency, and it brings nothing else with it. The package takes no external runtime deps at all.

  2. Point TeaCSS at it

    The package ships no stylesheet. Your application's TeaCSS build scans it and generates exactly the classes you used.

  3. Bind the runtime where you need it

    The open state belongs to the browser. A small delegated runtime binds on top when there is one, and the markup works without it.

Next

Take the parts you need.

Every package stands on its own, and nothing here asks for the whole set.