# lit-material

> A Material Design 3 web component collection built with Lit — one package per component, no shared
> mega-bundle, no required adapter layer, SSR-ready.

lit-material is a pnpm + Turborepo monorepo published as independently installable `@lit-material/*` npm
packages (one per component), plus a handful of app-shell primitives (router, state store, context, data
fetching, form validation) and a scaffolding CLI. Every component reads its visual design from
`@lit-material/tokens`'s CSS custom properties, is tested against both a real browser and `@lit-labs/ssr`, and
is documented with a live demo in `apps/docs`. Each package's own README is the source of truth for its API and
scope cuts — read it before assuming something is missing or unimplemented.

## Components

- [Button](https://github.com/bohdaq/lit-material/tree/main/packages/button): Filled, outlined, text, elevated, tonal. `lit-material-action-list` — `align="start|end|between"`, `compact`, `label` (role=group); nest for groups.
- [Icon Button](https://github.com/bohdaq/lit-material/tree/main/packages/icon-button): Standard + toggle variants.
- [FAB](https://github.com/bohdaq/lit-material/tree/main/packages/fab): Floating action button.
- [Text Field](https://github.com/bohdaq/lit-material/tree/main/packages/text-field): Single-line + `lit-material-textarea` multi-line, filled + outlined, validation states; `lit-material-number-field` (−/+ steppers, min/max/step, unit, range errors in words); `lit-material-input-group` joins outlined fields, selects and buttons.
- [Checkbox](https://github.com/bohdaq/lit-material/tree/main/packages/checkbox): Checked, indeterminate, error, form participation.
- [Radio](https://github.com/bohdaq/lit-material/tree/main/packages/radio): Grouped selection, error, form participation.
- [Switch](https://github.com/bohdaq/lit-material/tree/main/packages/switch): On/off toggle, optional thumb icons, form participation.
- [Slider](https://github.com/bohdaq/lit-material/tree/main/packages/slider): Single value, native `<input type="range">`-based.
- [Select](https://github.com/bohdaq/lit-material/tree/main/packages/select): `lit-material-select` + `lit-material-select-option`.
- [Chip](https://github.com/bohdaq/lit-material/tree/main/packages/chip): Assist, filter, input, suggestion variants; `lit-material-chip-input` (`.values`, Enter/comma/paste adds, `validator`, `change` `{values}`).
- [Segmented Button](https://github.com/bohdaq/lit-material/tree/main/packages/segmented-button): Single-select or multi-select connected button row.
- [Card](https://github.com/bohdaq/lit-material/tree/main/packages/card): Elevated, filled, outlined; optionally interactive.
- [Carousel](https://github.com/bohdaq/lit-material/tree/main/packages/carousel): Scroll-snap based, with overlaid nav buttons.
- [List](https://github.com/bohdaq/lit-material/tree/main/packages/list): `lit-material-list` + `lit-material-list-item`.
- [Data Table](https://github.com/bohdaq/lit-material/tree/main/packages/data-table): Sortable, selectable, paginated, resizable, virtualized.
- [Badge](https://github.com/bohdaq/lit-material/tree/main/packages/badge): Small dot or large numeric/text badge.
- [Divider](https://github.com/bohdaq/lit-material/tree/main/packages/divider): Horizontal or vertical, optionally inset.
- [Tooltip](https://github.com/bohdaq/lit-material/tree/main/packages/tooltip): Plain tooltip, built on the native Popover API.
- [Dialog](https://github.com/bohdaq/lit-material/tree/main/packages/dialog): Built on the native `<dialog>` element. `lit-material-about-dialog` — `product-name`, slots `logo`/default (details)/`legal`, `show()`/`close()`.
- [Sheet](https://github.com/bohdaq/lit-material/tree/main/packages/sheet): Side sheet and bottom sheet; same native `<dialog>` foundation.
- [Menu](https://github.com/bohdaq/lit-material/tree/main/packages/menu): Built on the native Popover API. `lit-material-app-launcher` — grid button + menu of `lit-material-list-item href` apps; `searchable`, `label`.
- [Search](https://github.com/bohdaq/lit-material/tree/main/packages/search): Search bar and docked search view; view built on the native Popover API.
- [Snackbar](https://github.com/bohdaq/lit-material/tree/main/packages/snackbar): Built on the native Popover API.
- [Tabs](https://github.com/bohdaq/lit-material/tree/main/packages/tabs): `lit-material-tabs` + `lit-material-tab`, optional `lit-material-tab-panel` siblings paired by index.
- [Top App Bar](https://github.com/bohdaq/lit-material/tree/main/packages/top-app-bar): Center-aligned, small, medium, large.
- [Navigation](https://github.com/bohdaq/lit-material/tree/main/packages/navigation): Navigation drawer, rail, and bottom bar; adaptive navigation picks one by window width.
- [Progress](https://github.com/bohdaq/lit-material/tree/main/packages/progress): Linear and circular progress indicators, usage meter for quotas (warning/critical thresholds).
- [Date Picker](https://github.com/bohdaq/lit-material/tree/main/packages/date-picker): Modal or docked date picker and date range picker.
- [Time Picker](https://github.com/bohdaq/lit-material/tree/main/packages/time-picker): Clock-dial dialog, 12- or 24-hour.
- [Autocomplete](https://github.com/bohdaq/lit-material/tree/main/packages/autocomplete): Text field with a filtered, data-driven option list.
- [Accordion](https://github.com/bohdaq/lit-material/tree/main/packages/accordion): Expansion panels, single- or multi-expand.
- [Stepper](https://github.com/bohdaq/lit-material/tree/main/packages/stepper): Wizard-progress indicator, horizontal or vertical, linear or free.
- [Tree](https://github.com/bohdaq/lit-material/tree/main/packages/tree): Hierarchical expand-collapse list, single- or multi-select.
- [Avatar](https://github.com/bohdaq/lit-material/tree/main/packages/avatar): Image, initials, or icon fallback.
- [Skeleton](https://github.com/bohdaq/lit-material/tree/main/packages/skeleton): Loading placeholder — text, circular, rectangular, rounded.
- [Rating](https://github.com/bohdaq/lit-material/tree/main/packages/rating): Star rating, native range input foundation, hover preview.
- [Speed Dial](https://github.com/bohdaq/lit-material/tree/main/packages/speed-dial): Expandable FAB menu, built on the Popover API.
- [Breadcrumbs](https://github.com/bohdaq/lit-material/tree/main/packages/breadcrumbs): Nav landmark showing the current page's place in a hierarchy.
- [Toolbar](https://github.com/bohdaq/lit-material/tree/main/packages/toolbar): Grouped controls above a piece of content, with a trailing spacer.
- [Panel](https://github.com/bohdaq/lit-material/tree/main/packages/panel): Generic content container with optional header/footer bands.
- [Sidebar](https://github.com/bohdaq/lit-material/tree/main/packages/sidebar): Two-pane layout — fixed-width side panel next to flexible content.
- [Page](https://github.com/bohdaq/lit-material/tree/main/packages/page): App-shell grid: header row plus a sidebar/main-content row.
- [Drawer](https://github.com/bohdaq/lit-material/tree/main/packages/drawer): Non-modal, persistent overlay panel — e.g. a notification drawer.
- [Description List](https://github.com/bohdaq/lit-material/tree/main/packages/description-list): Metadata display — a set of term/description pairs.
- [Data List](https://github.com/bohdaq/lit-material/tree/main/packages/data-list): Flexible, multi-cell rows, optionally expandable.
- [Simple List](https://github.com/bohdaq/lit-material/tree/main/packages/simple-list): Plain, lightweight list of links or buttons.
- [Alert](https://github.com/bohdaq/lit-material/tree/main/packages/alert): Persistent inline/page-level banner — distinct from the snackbar toast.
- [Code Block](https://github.com/bohdaq/lit-material/tree/main/packages/code-block): Monospace code container with a copy button and optional truncation; `lit-material-code-field` edits YAML/JSON (line numbers, Tab indent, `language="json"` or `validator` check).
- [File Upload](https://github.com/bohdaq/lit-material/tree/main/packages/file-upload): Drag-and-drop or click-to-browse file picking, single or multiple.
- [Timestamp](https://github.com/bohdaq/lit-material/tree/main/packages/timestamp): Absolute or live-updating relative date/time display.
- [Popover](https://github.com/bohdaq/lit-material/tree/main/packages/popover): Richer, click-triggered overlay content — distinct from the tooltip.
- [Icon](https://github.com/bohdaq/lit-material/tree/main/packages/icon): Sizing/colour wrapper for any icon; `registerIcons({ name: svg })` then `<lit-material-icon name>` or `icon(name)`.
- [Overflow Menu](https://github.com/bohdaq/lit-material/tree/main/packages/overflow-menu): Responsive action row that collapses overflow into a kebab menu.
- [Color Scheme](https://github.com/bohdaq/lit-material/tree/main/packages/color-scheme): `lit-material-color-scheme-toggle` (light/dark, or light/dark/system with `cycle`), `setColorScheme()`, `colorSchemeBootScript()` for a no-flash `<head>` script.
- [Clipboard](https://github.com/bohdaq/lit-material/tree/main/packages/clipboard): `copyText()` (Clipboard API with execCommand fallback, resolves ok), `lit-material-copy-button` (`value` or `for`), `lit-material-clipboard-copy` (read-only value + copy, `masked`).
- [Confirm](https://github.com/bohdaq/lit-material/tree/main/packages/confirm): `await confirm({ headline, message, confirmLabel, destructive, requireText })` resolves true/false; `lit-material-confirm-dialog` element.
- [Key/value editor](https://github.com/bohdaq/lit-material/tree/main/packages/key-value): `lit-material-key-value-editor` — `.entries` `{key,value}[]`, `change` event, `toObject()`, `checkValidity()`, `key-pattern`, `mask-values`; `parseKeyValues()` for `.env` paste.
- [Split panel](https://github.com/bohdaq/lit-material/tree/main/packages/split-panel): `lit-material-split-panel` — slots `start`/`end`, `position` %, `min`/`max`, `orientation`; separator keyboard (arrows, Home/End, Enter collapse); `change` `{position}`.
- [Format](https://github.com/bohdaq/lit-material/tree/main/packages/format): functions `formatBytes`, `formatNumber`, `formatDuration`, `formatCpu`, `parseQuantity("512Mi")` — Intl-based, Node/SSR safe.
- [Sortable](https://github.com/bohdaq/lit-material/tree/main/packages/sortable): `lit-material-sortable` — wraps items (`data-sort-id`, `[data-sort-handle]`); fires `sort` `{from, to, fromList, toList}`, app reorders data; `group` for cross-list; `layout="grid"` for card grids/rows; keyboard Space/arrows.
- [Jump links](https://github.com/bohdaq/lit-material/tree/main/packages/jump-links): `lit-material-jump-links` — `links` `{id,text,depth?}[]` (property, or JSON attribute for SSR) or `for="<container id>"`; anchors + `aria-current="location"` scrollspy; `offset` for sticky headers.
- [Truncate](https://github.com/bohdaq/lit-material/tree/main/packages/truncate): `lit-material-truncate` — `value`, `position="end|middle"`, `tail-length`; reflects `truncated`, sets `title` while cut.
- [Back to top](https://github.com/bohdaq/lit-material/tree/main/packages/back-to-top): `lit-material-back-to-top` — `threshold`, `target` (id: link + scroll + focus), `label`; reflects `visible`; reduced-motion aware.
- [Inline edit](https://github.com/bohdaq/lit-material/tree/main/packages/inline-edit): `lit-material-inline-edit` — `value`, `label`, `.save` (async, return/throw a message to stay open), `.validator`, `change` `{value, previous}`.
- [Dual list selector](https://github.com/bohdaq/lit-material/tree/main/packages/dual-list): `lit-material-dual-list-selector` — `.items` `{value,label,disabled?}[]`, `.selected`, `filterable`, `change` `{selected}`; listbox keyboard support.
- [Status](https://github.com/bohdaq/lit-material/tree/main/packages/status): Icon + label coloured by state (ok, warning, error, info, neutral) — never colour alone.
- [Stat](https://github.com/bohdaq/lit-material/tree/main/packages/stat): Dashboard tile: label, large tabular value, caption or trend.
- [Empty State](https://github.com/bohdaq/lit-material/tree/main/packages/empty-state): Headline, guidance and actions in place of a blank view.
- [Log Viewer](https://github.com/bohdaq/lit-material/tree/main/packages/log-viewer): Monospace line stream that follows the newest line, with pause, highlighting and a line cap.
- [Table](https://github.com/bohdaq/lit-material/tree/main/packages/table): Data-driven semantic `<table>`: caption, headers, numeric and monospace columns.
- [Chart](https://github.com/bohdaq/lit-material/tree/main/packages/chart): Line chart, bar chart (with one highlighted item) and sparkline: crosshair tooltip, keyboard access, screen-reader table.

## App shell

- [Router](https://github.com/bohdaq/lit-material/tree/main/packages/router): Path matching, an SPA route outlet, a route-reading controller.
- [Store](https://github.com/bohdaq/lit-material/tree/main/packages/store): A dependency-free, Redux-shaped state store.
- [Core](https://github.com/bohdaq/lit-material/tree/main/packages/core): Ripple/focus-ring controllers, `themeContext`, `localeContext`.
- [Task](https://github.com/bohdaq/lit-material/tree/main/packages/task): A reactive controller for async work (data fetching).
- [Form](https://github.com/bohdaq/lit-material/tree/main/packages/form): A reactive controller tracking a `<form>`'s aggregate validity.
- [create-lit-material-app](https://github.com/bohdaq/lit-material/tree/main/packages/create-lit-material-app): `npm create lit-material-app` — a scaffolded starting point with the above wired together.
- [Tokens](https://github.com/bohdaq/lit-material/tree/main/packages/tokens): Color, type, shape, elevation, and motion design tokens every component reads from. Opt-in `css/typography.css`: `.md-typescale-<role>-<size>` classes and `.lit-material-content` prose (include via `unsafeCSS` inside shadow roots).

## Guides

- [README](https://github.com/bohdaq/lit-material/blob/main/README.md): Why Lit/lit-material, install instructions, the full package list, and development commands.
- [Building apps guide](https://lit.rws8.tech/guides/building-apps/): Router + store + context + task + form wired together in one example.

## Optional

- [Docs site](https://lit.rws8.tech/): Every component's live demo, install line, size and API tables, plus guides and the theme builder. Source at [apps/site](https://github.com/bohdaq/lit-material/tree/main/apps/site).
- [App-shell demo](https://github.com/bohdaq/lit-material/tree/main/apps/app-shell-demo): A small runnable app showing router/store/context together (private, unpublished).
- [License](https://github.com/bohdaq/lit-material/blob/main/LICENSE): MIT.