# @teasim/astra

## 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.