# Slab

> Slab is a headless Web Component library, published as `slab-elements`. Each element handles the hard parts — keyboard and focus, ARIA, form participation, events — on top of the native element it maps to. What it looks like is up to you: style it from the outside with `::part()` and `:state()`, or subclass it and make it your own.

Install it with `pnpm add slab-elements lit`, then import the elements you need, like `slab-elements/dialog.js`, which registers `<slab-dialog>`. Every element is built on a native element (or an ARIA role when the platform doesn't have one) and follows the keyboard patterns in the ARIA Authoring Practices Guide.

Each component's page also shows a styled version, `<slab-styled-*>`. That's not in the package — it's an example to copy into a project and make your own, and the page includes its source.

## Docs

- [Introduction](https://slab-elements.dev/index.md): what Slab is, and how to install, use, and style it
- [Get started](https://slab-elements.dev/get-started.md): installing, importing, frameworks, forms, styling, subclassing, translating, TypeScript, and browsers
- [Components](https://slab-elements.dev/components.md): every element, grouped

## Overlays

- [Alert](https://slab-elements.dev/components/alert.md): An inline message that gets announced when it shows up. Put it on the page empty, then fill it in when there's something to say.
- [Dialog](https://slab-elements.dev/components/dialog.md): A modal dialog built on the native `<dialog>`. Focus stays inside, Escape closes it, and the rest of the page goes inert — the platform does the heavy lifting.
- [Drawer](https://slab-elements.dev/components/drawer.md): A non-modal dialog for a side panel. The page behind it stays usable.
- [Popover](https://slab-elements.dev/components/popover.md): Content that pops up beside the element that opened it, in the top layer, and gets dismissed the way a native popover does.
- [Toast](https://slab-elements.dev/components/toast.md): A polite heads-up that something just happened. It lives on the page up front, so screen readers actually hear it.
- [Tooltip](https://slab-elements.dev/components/tooltip.md): A short description that shows up beside an element on hover and focus.

## Disclosure

- [Accordion](https://slab-elements.dev/components/accordion.md): A group of Disclosures where opening one can close the others. Great for FAQs.
- [Disclosure](https://slab-elements.dev/components/disclosure.md): Show and hide content behind a summary. It's a native `<details>` with a few extras.

## Navigation

- [Breadcrumb](https://slab-elements.dev/components/breadcrumb.md): The trail of links to the current page, as an ordered list in a navigation landmark. Separators are yours to add.
- [Menu](https://slab-elements.dev/components/menu.md): A button that opens a list of actions. It's the APG's menu button, keyboard and all.
- [Pagination](https://slab-elements.dev/components/pagination.md): Buttons for moving between pages, with an ellipsis for the ones it doesn't show.
- [Tabs](https://slab-elements.dev/components/tabs.md): Tabs and their Panels, with one Panel showing at a time.
- [Toolbar](https://slab-elements.dev/components/toolbar.md): A group of controls that Tab reaches once, with the arrow keys to move between them.
- [Tree](https://slab-elements.dev/components/tree.md): A nested list of items that expand and collapse, to pick one or more from.

## Selection

- [Combobox](https://slab-elements.dev/components/combobox.md): A text input that filters a list of Options as you type.
- [Listbox](https://slab-elements.dev/components/listbox.md): A list of Options to pick one or more from, right on the page instead of in a popup.
- [Select](https://slab-elements.dev/components/select.md): A button that opens a list of Options to pick one or more from. It submits just like a `<select>`.

## Form

- [Checkbox](https://slab-elements.dev/components/checkbox.md): A checkbox built on the native one, with an indeterminate state and real form validation.
- [Checkbox Group](https://slab-elements.dev/components/checkbox-group.md): A set of Checkboxes with one label, one value, and one validity between them.
- [Date Field](https://slab-elements.dev/components/date-field.md): A date field built on the native date input. The browser brings its own picker.
- [Field](https://slab-elements.dev/components/field.md): A label wired up to a control of your own. Bring any input, select, or element you like.
- [File Drop](https://slab-elements.dev/components/file-drop.md): A file input you can also drop files onto. One list of files, either way.
- [Form](https://slab-elements.dev/components/form.md): A `<form>` that Slab's controls submit, reset, and validate with — just like native ones.
- [Number](https://slab-elements.dev/components/number.md): A number field built on the native one, with stepping and validation included.
- [Radio Group](https://slab-elements.dev/components/radio-group.md): A set of Radios with one label, one value, and exactly one checked.
- [Slider](https://slab-elements.dev/components/slider.md): A single-thumb slider built on the native range input.
- [Switch](https://slab-elements.dev/components/switch.md): An on and off toggle built on a native checkbox with the switch role.
- [Text Field](https://slab-elements.dev/components/text-field.md): A single-line text field built on the native input, validation and all.
- [Textarea](https://slab-elements.dev/components/textarea.md): A multi-line text field built on the native textarea.

## Data

- [Calendar](https://slab-elements.dev/components/calendar.md): A month of days to pick from. It's the grid from the APG's date picker, with all the keyboard support you'd expect.
- [Meter](https://slab-elements.dev/components/meter.md): A measurement in a known range, like disk usage. It tells you which region the value's in, so your design can show it.
- [Progress](https://slab-elements.dev/components/progress.md): How far along a task is, or just that it's happening when you don't know yet. That's your spinner, too.

## Optional

- [Source](https://github.com/ynotdraw/slab-elements): the repository, with the components in `src` and the styled examples in `src/styled`