@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/import-export-center.md

@@ -0,0 +1,359 @@
+<!-- index: ./index.md -->
+# import-export-center
+
+`data-ui="import-export-center"` · Import and export jobs with progress.
+
+## Import
+
+```tsx
+import { ImportExportCenter, ImportExportCenterDefaultsProvider, useJobToasts } from '@slotted/react';
+```
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter
+  jobs={jobs}
+  onCancel={(key) => cancel(key)}
+  onRemove={({ keys }) => remove(keys)}
+  onRetry={(key) => retry(key)}
+/>;
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | section, or the element render returns | yes |
+| `header` | div | yes |
+| `title` | h2, h3 or h4 per level | yes |
+| `count` | span | no |
+| `tools` | div | no |
+| `clear` | span around a Button | no |
+| `actions` | div | no |
+| `views` | div around a Tabs list | no |
+| `list` | ul | yes |
+| `job` | li | no |
+| `visual` | span, aria-hidden | no |
+| `body` | div | no |
+| `heading` | div | no |
+| `job-title` | a when job.href, span otherwise | no |
+| `meta` | p | no |
+| `file-name` | span dir="auto" | no |
+| `name` | span | no |
+| `extension` | span | no |
+| `time` | time | no |
+| `status` | div | no |
+| `mark` | span, aria-hidden | no |
+| `status-label` | span | no |
+| `stage` | span | no |
+| `progress` | div | no |
+| `progress-text` | span | no |
+| `summary` | p | no |
+| `message` | p | no |
+| `controls` | div | no |
+| `download` | span around a ButtonLink or a Button | no |
+| `cancel` | span around a Button | no |
+| `retry` | span around a Button | no |
+| `toggle` | span around a Button | no |
+| `chevron` | span in the button’s end slot | no |
+| `job-actions` | span | no |
+| `remove` | button | no |
+| `details` | div role="region" | no |
+| `counts` | dl | no |
+| `files` | ul | no |
+| `file` | li | no |
+| `errors` | div around a Table | no |
+| `errors-note` | p | no |
+| `more` | button | no |
+| `empty` | div | no |
+| `error` | div | no |
+| `footer` | div | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `jobs` | `readonly ImportExportJob[]` | — | ImportExportCenter | The consumer’s jobs: key, direction, title, status, format, stage, progress, eta, counts, errors, errorCount, message, source, result, errorsFile, actor, createdAt, finishedAt, href, cancelable, retryable, removable. The family changes none of them |
+| `view` | `string` | all | ImportExportCenter | Present means the consumer owns the view. all shows every job, import and export filter by direction, any other value shows what the consumer gave |
+| `defaultView` | `string` | — | ImportExportCenter | The view an uncontrolled centre starts on, read once |
+| `views` | `readonly { value, label }[]` | all, import, export | ImportExportCenter | The strip’s entries; one entry draws no strip |
+| `expanded` | `readonly string[]` | — | ImportExportCenter | Present means the consumer owns which jobs show their details |
+| `defaultExpanded` | `readonly string[]` | — | ImportExportCenter | The keys an uncontrolled centre starts with shown, read once |
+| `size` | `'sm' \| 'md'` | md | ImportExportCenter, ImportExportCenterDefaultsProvider | sm for a popover or a drawer, with a floor width; md for a page |
+| `level` | `'2' \| '3' \| '4'` | 2 | ImportExportCenter, ImportExportCenterDefaultsProvider | The rank of the title’s heading |
+| `growing` | `'none' \| 'button'` | none | ImportExportCenter, ImportExportCenterDefaultsProvider | Whether the history grows by a more button; the button is drawn while hasMore |
+| `hasMore` | `boolean` | false | ImportExportCenter | Whether another page of history exists |
+| `timeFormat` | `'relative' \| 'absolute'` | relative | ImportExportCenter, ImportExportCenterDefaultsProvider | How createdAt and finishedAt are written. A deadline is always a date |
+| `status` | `'ready' \| 'error'` | ready | ImportExportCenter | error replaces the list with the page whose control asks onReload |
+| `loading` | `boolean` | false | ImportExportCenter | aria-busy on the list and data-loading on the root; skeleton jobs while nothing is loaded, more waiting otherwise |
+| `locale, timeZone, now` | `string, string, number` | the language in force, the runtime’s zone | ImportExportCenter (all three), ImportExportCenterDefaultsProvider (timeZone) | What numbers, sizes, times and deadlines are written with, and the moment they count from. State now for a stable server render |
+| `messages` | `Partial<ImportExportCenterMessages>` | — | ImportExportCenter, useJobToasts | Words laid over the language in force, key by key: every word the family writes, the announcer says and a toast shows |
+| `actions, empty, footer` | `ReactNode` | — | ImportExportCenter | The consumer’s header controls; the view’s empty page; the footer |
+| `renderJobActions` | `(job) => ReactNode` | — | ImportExportCenter | The consumer’s controls for one job, after the family’s |
+| `render` | `(props) => ReactNode` | — | ImportExportCenter | Substitutes the root element and hands it every attribute, the ref callback included |
+| `ref` | `Ref<ImportExportCenterHandle>` | — | ImportExportCenter | element; focus(), on the first job’s first control; reveal(key), which shows the job’s details, returns to all if the view hides it, scrolls it into view and focuses its title |
+| `ImportExportCenterDefaultsProvider` | `{ size, level, growing, timeFormat, timeZone }` | — | a subtree | The decisions an application takes once. A centre that states any of them itself still wins |
+| `native props` | `ComponentPropsWithRef<"section">` | — | ImportExportCenter | aria-*, data-*, className, style and handlers reach the section; a consumer’s aria-label or aria-labelledby replaces the title wiring |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `onViewChange` | `(view: string, request: ChangeRequest<string>)` | Before the view moves: a tab (pointer, keyboard) or reveal() of a job the view hides (programmatic). cancel() refuses the move. |
+| `onExpandedChange` | `(keys: readonly string[], request: ChangeRequest<readonly string[]>)` | Before a job’s details show or hide: the toggle (pointer, keyboard) or reveal() (programmatic). A key that leaves jobs leaves an uncontrolled set on the next render. |
+| `onCancel` | `(key: string, request: { reason, source, cancelled, cancel() })` | When the reader presses Cancelar on a queued or running job — reasons pointer, keyboard. The store stops the job and answers by changing its status. |
+| `onRetry` | `(key: string, request)` | When the reader presses Tentar de novo or Gerar novamente — reasons pointer, keyboard. |
+| `onRemove` | `({ keys }, request)` | When the reader presses remove on a finished job (pointer, keyboard) or clear in the header (clear, with every finished removable key of the view). |
+| `onDownload` | `({ key, file }, request)` | Before a download — the primary control or a file in the details; file is source, result or errors. With an href the link navigates unless cancelled; without one the consumer produces the file here. |
+| `onOpen` | `(key: string, request)` | Before the title’s link navigates to job.href — reasons pointer, keyboard; cancel() keeps the reader here. |
+| `onLoadMore` | `(request)` | When the reader presses more — reasons pointer, keyboard. Not while loading. |
+| `onReload` | `(request)` | When the reader presses the error page’s control under status="error" — reasons pointer, keyboard. |
+| `useJobToasts(jobs, { toaster, onView, messages })` | `a hook; onView(key)` | On every change of jobs after the first: one toast per job that started, finished, finished with failed rows or failed, under the id import-export-center:<key>. View calls onView. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `size` | `sm`, `md` | `md` |
+| `level` | `2`, `3`, `4` | `2` |
+| `growing` | `none`, `button` | `none` |
+| `timeFormat` | `relative`, `absolute` | `relative` |
+| `status` | `ready`, `error` | `ready` |
+| `direction` | `import`, `export` | — |
+| `jobStatus` | `queued`, `running`, `succeeded`, `failed`, `canceled` | — |
+| `outcome` | `success`, `partial`, `failed`, `canceled` | — |
+
+## Rules
+
+- No WAI-ARIA Authoring Practices pattern covers a job centre, so the platform is the pattern: the root is a section named by its heading, the jobs a native ul of li, every control a real button or link. The toggle follows the Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): Enter and Space show and hide the details, aria-expanded says which, aria-controls names the region the details are, and the words stay Detalhes in both states.
+- Every control of a job is named by its own words and the job title — aria-labelledby holds both ids, so a reader hears Baixar Faturas do 3.º trimestre and not five Baixar in a row — and described by the job’s status line. The remove control is an icon, so its name is aria-label and a tooltip shows the same words on hover, on keyboard focus and on a press held on touch.
+- A job reaching another state is announced once, politely, through the shared live announcer — Importação Contatos do CRM concluída com 12 erros — and nothing is said on the first render or while the bar moves; the bar is a progressbar named by the job title with the progress text as aria-valuetext for a reader who asks. A toast from useJobToasts carries the same sentence, which the announcer does not repeat.
+- Focus never falls to the body. A job that finishes while focus is on Cancelar keeps focus in the job, on its first remaining control or on its title; a removed job hands focus to the same control of the job now in its place, then of the one before, then to the list — focusDestination in @slotted/core/import-export-center decides it for both bindings.
+- Colour never says a state alone: the outcome has a word and a mark as well as a tone, every mark a circle or a clock, and partial is a warning with its failed-row count in the words. Under forced colours the tile keeps its square as an edge, the marks draw in the system’s ink, and a running mark that turns stops under reduced motion while the bar still says how far the job is.
+
+## Tokens
+
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-line-height`, `--slotted-control-padding-inline-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-import-export-center-background`, `--slotted-import-export-center-border`, `--slotted-import-export-center-errors-max-block-size`, `--slotted-import-export-center-gap-md`, `--slotted-import-export-center-gap-sm`, `--slotted-import-export-center-inset-block-md`, `--slotted-import-export-center-inset-block-sm`, `--slotted-import-export-center-inset-inline-md`, `--slotted-import-export-center-inset-inline-sm`, `--slotted-import-export-center-min-inline-size-sm`, `--slotted-import-export-center-status-column`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-solid`, `--slotted-tone-success-text`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-text`, `--slotted-upload-kind-archive`, `--slotted-upload-kind-audio`, `--slotted-upload-kind-document`, `--slotted-upload-kind-foreground`, `--slotted-upload-kind-image`, `--slotted-upload-kind-other`, `--slotted-upload-kind-pdf`, `--slotted-upload-kind-presentation`, `--slotted-upload-kind-spreadsheet`, `--slotted-upload-kind-video`
+
+## Examples
+
+### Every part, written out
+
+The header with its count, clear and the consumer’s two actions; the strip; a running job with its bar; a partial import with its details open — counts, the original file, the report and the failed rows; growing by button; a footer. Every part the contract names, in one box.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter
+  actions={<ImportActions />}
+  defaultExpanded={['catalog-autumn']}
+  footer={<Link href="/jobs">Ver todos os jobs</Link>}
+  growing="button"
+  hasMore
+  jobs={jobs}
+/>;
+```
+
+### Five statuses, four outcomes
+
+Queued, running, succeeded, succeeded with failed rows, failed and cancelled, each with its word, its mark and its tone. The partial row is derived: the store wrote succeeded and counts.failed 12, and the family refused to paint it green.
+
+Excerpt — not a complete module
+
+```tsx
+const catalog: ImportExportJob = {
+  counts: { failed: 12, processed: 2988, total: 3000 },
+  direction: 'import',
+  key: 'catalog-autumn',
+  status: 'succeeded',
+  title: 'Catálogo de produtos',
+};
+```
+
+### Progress, in the job’s unit
+
+Rows with a percentage and the server’s eta; bytes in the size scale; a bare percentage; an indeterminate bar that says only its stage; and a job whose time left the family estimates from the updates it saw. The bar is progress-indicator at its small step and says nothing aloud.
+
+Excerpt — not a complete module
+
+```tsx
+const jobs: ImportExportJob[] = [
+  { ...rows, eta: '2026-09-25T14:03:00Z', progress: { max: 5000, value: 1204 } },
+  { ...bytes, progress: { max: 10_000_000, unit: 'bytes', value: 2_500_000 } },
+  { ...waiting, progress: {}, stage: 'Preparando o arquivo' },
+];
+```
+
+### Rows that failed
+
+A partial import with its details open: the counts, the report download as the job’s primary control, and a table of the rows the store sent — the message second, so it stays in view when the table scrolls sideways — with Mostrando 5 de 1.284 because the store sent a sample.
+
+Excerpt — not a complete module
+
+```tsx
+const catalog: ImportExportJob = {
+  ...job,
+  errorCount: 1284,
+  errors: firstPage,
+  errorsFile: { href: '/imports/481/errors.csv', name: 'catalogo-erros.csv' },
+};
+```
+
+### Deadlines and permission
+
+An export whose file expired offers Gerar novamente in place of Baixar and says when it expired; an export still available says until when; an import whose original the reader may not download says why in the consumer’s words, and draws no control for it.
+
+Excerpt — not a complete module
+
+```tsx
+const result: JobFile = { expiresAt: '2026-09-08T10:00:00Z', href, name: 'nfe.zip' };
+const source: JobFile = {
+  denied: 'Só quem importou o arquivo ou um administrador pode baixar o original.',
+  name: 'precos-atacado.csv',
+};
+```
+
+### Views
+
+The built-in Todos, Importações and Exportações, filtered by direction; below, the consumer’s own views — Minhas is the consumer’s query, so the family shows the jobs it is given — held in the consumer’s state, which refuses Arquivados with request.cancel().
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter
+  jobs={view === 'mine' ? mine : jobs}
+  onViewChange={(next, request) => {
+    if (next === 'archived') request.cancel();
+    else setView(next);
+  }}
+  view={view}
+  views={views}
+/>;
+```
+
+### Starting a job
+
+Importar opens a dialog with upload as its dropzone; its adapter sends the bytes and the store creates the job, which appears at the top of the list. Exportar opens a dialog with the format and the file name. The centre starts nothing itself and never transfers a byte.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter
+  actions={
+    <>
+      <ImportDialog onUploaded={(file) => store.createImport(file)} />
+      <ExportDialog onConfirm={(format) => store.createExport(format)} />
+    </>
+  }
+  jobs={store.jobs}
+/>;
+```
+
+### The toast points at the job
+
+useJobToasts in the shell raises one toast per job when it starts and replaces it when it finishes, under the job’s key; View reveals the job in the centre — details open, title focused. The toast carries no progress, no cancel and no download.
+
+Excerpt — not a complete module
+
+```tsx
+useJobToasts(jobs, {
+  onView: (key) => {
+    navigate('/jobs');
+    centre.current?.reveal(key);
+  },
+});
+```
+
+### In a popover, on a page
+
+The same jobs in a popover under the top bar, at size sm with a footer link to the page, and on the page at md, where from 42rem every job is a row of one grid and the states line up in one column.
+
+Excerpt — not a complete module
+
+```tsx
+<Popover>
+  <PopoverTrigger render={(props) => <Button {...props}>Jobs</Button>} />
+  <PopoverLayer>
+    <PopoverContent aria-label="Importações e exportações">
+      <ImportExportCenter footer={<SeeAll />} jobs={jobs} size="sm" />
+    </PopoverContent>
+  </PopoverLayer>
+</Popover>;
+```
+
+### The first wait, and the next page
+
+Three skeleton jobs with the anatomy of a job — the tile, the name, the meta line — stand in the boxes the jobs will occupy while the list is busy; with jobs already shown, more says Carregando and refuses a second press.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter jobs={[]} loading />;
+<ImportExportCenter growing="button" hasMore jobs={jobs} loading />;
+```
+
+### Nothing yet, and a list that failed
+
+An empty view draws the view’s own words — Nenhuma exportação — or the consumer’s empty; a list the store could not load draws the error page whose control asks onReload.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter defaultView="export" jobs={[]} />;
+<ImportExportCenter jobs={[]} onReload={() => refetch()} status="error" />;
+```
+
+### Two sizes
+
+sm for the popover and the drawer: the small type steps, tighter insets, a floor width so a panel sized to its content does not collapse; md for the page. The controls keep the button family’s small step in both.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter jobs={jobs} size="sm" />;
+<ImportExportCenter jobs={jobs} size="md" />;
+```
+
+### Content the family did not choose
+
+A title of fourteen words, a file name of ninety characters that keeps its extension, an Arabic report in a left-to-right page, a stage longer than the line, a million rows, and a job with the consumer’s own action.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter
+  jobs={jobs}
+  renderJobActions={(job) =>
+    job.direction === 'export' ? <Link href={shareUrl(job)}>Partilhar</Link> : null
+  }
+/>;
+```
+
+### Defaults, once
+
+ImportExportCenterDefaultsProvider sets the size, the rank, the time format and the zone for a whole application — here with absolute times; the second centre states size="md" itself and wins. The words and the locale come from SlottedProvider.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenterDefaultsProvider level="3" size="sm" timeFormat="absolute">
+  <App />
+</ImportExportCenterDefaultsProvider>;
+```
+
+### Keyboard and focus
+
+Tab through the controls: every one is named by its words and the job — Cancel Contatos do CRM. Press Cancel: the job ends, the control leaves, and focus stays in the job on its first control. Remove a job: focus goes to the same control of the job in its place.
+
+Excerpt — not a complete module
+
+```tsx
+<ImportExportCenter
+  jobs={jobs}
+  onCancel={(key) => cancel(key)}
+  onRemove={({ keys }) => remove(keys)}
+/>;
+```

package/dist/docs/index.md

@@ -0,0 +1,141 @@
+# Slotted for React
+
+Each family is documented in `./<family>.md`.
+
+## Actions
+- action-bar: Row of actions that overflow into a menu.
+- button: Button, link button, icon button and toggle button.
+- button-group: Buttons joined into one control.
+- fullscreen: Enters and leaves fullscreen for an element.
+- split-button: Main action with a menu of alternatives.
+- toggle: Button that stays pressed or unpressed.
+- toggle-group: Set of toggles, single or multiple.
+- toolbar: Group of controls with arrow-key navigation.
+
+## Forms
+- calendar: Month grid for choosing a date or a range.
+- cascader: Picks a value from nested option columns.
+- checkbox: Box that turns one option on or off.
+- checkbox-group: Set of checkboxes under one label.
+- color-picker: Color panel and color field in four notations.
+- combobox: Text input that filters a list of options.
+- currency-field: Number input for amounts in a currency.
+- date-field: Typed date input split into segments.
+- date-picker: Date field with a calendar popover.
+- date-range-picker: Start and end dates with a calendar popover.
+- datetime-field: Typed date and time input in segments.
+- datetime-picker: Date and time field with a picker popover.
+- datetime-range-picker: Start and end date-times with a picker.
+- entity-picker: Searches and picks remote records like people.
+- field: Label, control, help and error for one input.
+- field-group: Fieldset that groups related fields.
+- form: Form with validation, error summary and submit.
+- listbox: List of options for single or multiple choice.
+- multi-select: Picks several options shown as tags.
+- number-field: Number input with steppers and formatting.
+- otp-input: One-time code split across several boxes.
+- prompt-composer: Multi-line message input with send and tools.
+- radio-group: Set of radios for one choice.
+- rating: Star rating input, display and summary.
+- segmented-control: Row of exclusive options, one selected.
+- select: Picks one option from a popup list.
+- slider: Picks a value or range along a track.
+- switch: Toggle that turns a setting on or off.
+- tags-input: Text input that collects values as tags.
+- text-field: Single-line text input.
+- textarea: Multi-line text input.
+- time-field: Typed time input split into segments.
+- time-picker: Time field with a picker popover.
+- time-range-picker: Start and end times with a picker.
+- transfer: Moves items between two lists.
+- upload: Picks or drops files and shows their progress.
+- wizard: Multi-step form with validation per step.
+
+## Data display
+- attachment: File that belongs to a message or record.
+- avatar: Image or initials that stand for a person.
+- avatar-group: Overlapping avatars with an overflow count.
+- badge: Short label or count attached to an element.
+- carousel: Slides that scroll one page at a time.
+- chart: Line, bar, area, pie and scatter charts.
+- code-block: Highlighted source code with copy and line limits.
+- column-manager: Shows, hides, orders and pins table columns.
+- data-grid: Table that sorts, filters and selects records.
+- data-list: Records as stacked label and value items.
+- description-list: Term and value pairs for record details.
+- event-calendar: Month, week, day and list views of events.
+- filter-bar: Search and filter chips that build a query.
+- highlight: Marks matches of a query inside text.
+- icon: Sized glyph with an optional tone.
+- image: Image with loading, error and fit states.
+- kbd: Keyboard key or shortcut.
+- list: Vertical list of items with sections.
+- list-item: Row with media, text, metadata and actions.
+- markdown: Renders Markdown with an element allowlist.
+- message: Chat message with author, bubble and actions.
+- message-scroller: Scrolling log of messages that follows new ones.
+- prose: Styles long-form HTML text.
+- saved-views: Named, saved sets of filters for a list.
+- sparkline: Tiny inline trend chart.
+- stat-card: Key figure with label, change and trend.
+- status-indicator: Colored mark and label for a status.
+- table: Semantic table with sorting, filters and selection.
+- tag: Label for a category, removable or selectable.
+- timeline: Events in time order with markers.
+- typography: Text and heading with type scale steps.
+
+## Feedback
+- alert: Static message with a tone, icon and actions.
+- import-export-center: Import and export jobs with progress.
+- inline-message: Short status message next to content.
+- loading-overlay: Veil and indicator over a loading region.
+- notification-center: Read and unread notifications with actions.
+- progress-indicator: Progress bar or ring, known or indeterminate.
+- result-state: Empty, no-results, error or success state.
+- skeleton: Placeholder shapes while content loads.
+- toast: Temporary notification with optional action.
+
+## Navigation
+- breadcrumb: Trail of links to the current page's ancestors.
+- command-palette: Searchable dialog of commands and destinations.
+- link: Text link to another page or resource.
+- menubar: Horizontal bar of menus, as in desktop apps.
+- navigation-menu: Site sections that open panels of links.
+- pagination: Moves between pages of results.
+- side-navigation: Vertical navigation with groups and counts.
+- stepper: Shows progress through ordered steps.
+- table-of-contents: Links to page headings with the current one.
+- tabs: Switches between panels of related content.
+- top-navigation: Application header with brand, search and account.
+- tree: Hierarchy of items that expand and select.
+
+## Overlays
+- action-sheet: Bottom sheet of short actions for touch.
+- context-menu: Menu opened by right click on a target.
+- dialog: Modal dialog and alert dialog.
+- drawer: Panel that slides in from an edge.
+- hover-card: Preview card that opens on hover or focus.
+- menu: List of actions opened from a trigger.
+- popover: Floating panel anchored to a trigger.
+- tooltip: Short label shown on hover or focus.
+- tour: Guided steps anchored to elements.
+
+## Layout
+- accordion: Stacked sections that expand and collapse.
+- app-shell: Application frame with header, nav, main and aside.
+- aspect-ratio: Box that keeps its content at a fixed ratio.
+- card: Bordered surface that groups related content.
+- collapsible: One region whose content shows or hides.
+- container: Centers content at a maximum width.
+- dashboard-grid: Grid of widgets that reorder and resize.
+- detail-panel: Record summary, metadata, sections and actions.
+- divider: Line that separates content.
+- grid: Columns that reflow by available width.
+- inline: Row of items with gaps that wraps.
+- page: Page body with width, scroll and footer.
+- page-header: Page title, description and actions.
+- scroll-area: Scrolling region with styled scrollbars.
+- section: Titled block of content within a page.
+- splitter: Resizable panes divided by a handle.
+- stack: Column of items with a gap.
+- visually-hidden: Hides content visually, keeps it for readers.