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

package/docs/import-export-center.md

@@ -0,0 +1,345 @@
+<!-- index: ./index.md -->
+# import-export-center
+
+`data-ui="import-export-center"` · Import and export jobs with progress.
+
+## Import
+
+```ts
+import { SlImportExportCenter, SlImportExportCenterActions, SlImportExportCenterEmpty, SlImportExportCenterFooter, SlImportExportJobActions, jobToasts, provideImportExportCenterDefaults } from '@slotted/angular/import-export-center';
+```
+
+Selector: `section[slImportExportCenter], [slImportExportCenterActions], [slImportExportCenterEmpty], [slImportExportCenterFooter], ng-template[slImportExportJobActions]` · exportAs: `slImportExportCenter`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<section
+  slImportExportCenter
+  [jobs]="store.jobs()"
+  (cancelRequest)="store.cancel($event.key)"
+  (removeRequest)="store.remove($event.keys)"
+  (retryRequest)="store.retry($event.key)"
+></section>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | section[slImportExportCenter] | yes |
+| `header` | div | yes |
+| `title` | h2, h3 or h4 per level | yes |
+| `count` | span | no |
+| `tools` | div | no |
+| `clear` | span around button[slButton] | 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[slButtonLink] or button[slButton] | no |
+| `cancel` | span around button[slButton] | no |
+| `retry` | span around button[slButton] | no |
+| `toggle` | span around button[slButton] | no |
+| `chevron` | span in the button’s end slot | no |
+| `job-actions` | span | no |
+| `remove` | button[slImportExportControl] | 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[slImportExportCenterFooter] | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `jobs` | `readonly ImportExportJob[]` | — | SlImportExportCenter | The consumer’s jobs, required. The family changes none of them |
+| `view` | `string \| undefined` | all | SlImportExportCenter | The view, as a model: [(view)] two-way, [view] to read. all shows every job, import and export filter by direction, any other value what the consumer gave |
+| `defaultView` | `string` | — | SlImportExportCenter | The view an unbound centre starts on |
+| `views` | `readonly { value, label }[]` | all, import, export | SlImportExportCenter | The strip’s entries; one entry draws no strip |
+| `expanded` | `readonly string[] \| undefined` | — | SlImportExportCenter | The keys whose details are shown, as a model: [(expanded)] two-way |
+| `defaultExpanded` | `readonly string[]` | — | SlImportExportCenter | The keys an unbound centre starts with shown |
+| `size` | `'sm' \| 'md'` | md | SlImportExportCenter, provideImportExportCenterDefaults | sm for a popover or a drawer, with a floor width; md for a page |
+| `level` | `'2' \| '3' \| '4'` | 2 | SlImportExportCenter, provideImportExportCenterDefaults | The rank of the title’s heading |
+| `growing` | `'none' \| 'button'` | none | SlImportExportCenter, provideImportExportCenterDefaults | Whether the history grows by a more button; drawn while hasMore |
+| `hasMore` | `boolean` | false | SlImportExportCenter | Whether another page of history exists |
+| `timeFormat` | `'relative' \| 'absolute'` | relative | SlImportExportCenter, provideImportExportCenterDefaults | How createdAt and finishedAt are written. A deadline is always a date |
+| `status` | `'ready' \| 'error'` | ready | SlImportExportCenter | error replaces the list with the page whose control emits reloadRequest |
+| `loading` | `boolean` | false | SlImportExportCenter | 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 | SlImportExportCenter (all three), provideImportExportCenterDefaults (timeZone) | What numbers, sizes, times and deadlines are written with, and the moment they count from |
+| `messages` | `Partial<ImportExportCenterMessages>` | — | SlImportExportCenter, jobToasts | Words laid over the language in force, key by key: every word the family writes, the announcer says and a toast shows |
+| `slImportExportCenterActions, slImportExportCenterEmpty, slImportExportCenterFooter` | `content slots` | — | SlImportExportCenter | The consumer’s header controls; the view’s empty page; the footer |
+| `ng-template[slImportExportJobActions]` | `TemplateRef<{ $implicit: ImportExportJob }>` | — | SlImportExportCenter | The consumer’s controls for one job, after the family’s |
+| `exportAs` | `slImportExportCenter` | — | SlImportExportCenter | element; focus(); reveal(key), which shows the job’s details, returns to all if the view hides it, scrolls it into view and focuses its title |
+| `provideImportExportCenterDefaults` | `{ size, level, growing, timeFormat, timeZone }` | — | an injector | The decisions an application takes once. A centre that states any of them itself still wins |
+| `host attributes` | `section` | — | SlImportExportCenter | aria-*, data-*, class and listeners stay on the section; a static aria-label or aria-labelledby replaces the title wiring |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `viewRequest` | `ChangeRequest<string \| undefined>` | Before the view moves: a tab (pointer, keyboard) or reveal() of a job the view hides (programmatic). cancel() refuses the move; accepted, the view model is written. |
+| `viewChange` | `string \| undefined` | The model’s own output after an accepted move: what [(view)] binds. |
+| `expandedRequest` | `ChangeRequest<readonly string[] \| undefined>` | Before a job’s details show or hide: the toggle (pointer, keyboard) or reveal() (programmatic). |
+| `expandedChange` | `readonly string[] \| undefined` | The model’s own output after an accepted request: what [(expanded)] binds. |
+| `cancelRequest` | `{ key, reason, event, cancelled, cancel() }` | When the reader presses Cancelar on a queued or running job — reasons pointer, keyboard. |
+| `retryRequest` | `{ key, reason, event, cancelled, cancel() }` | When the reader presses Tentar de novo or Gerar novamente — reasons pointer, keyboard. |
+| `removeRequest` | `{ keys, reason, event, cancelled, cancel() }` | 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). |
+| `downloadRequest` | `{ key, file, reason, event, cancelled, cancel() }` | Before a download; file is source, result or errors. With an href the link navigates unless cancelled; without one the consumer produces the file. |
+| `openRequest` | `{ key, reason, event, cancelled, cancel() }` | Before the title’s link navigates to job.href; cancel() keeps the reader here. |
+| `loadMoreRequest` | `{ reason, event, cancelled, cancel() }` | When the reader presses more — reasons pointer, keyboard. Not while loading. |
+| `reloadRequest` | `{ reason, event, cancelled, cancel() }` | When the reader presses the error page’s control under status="error". |
+| `jobToasts(jobs, { actions, messages })` | `a function called in an injection context` | On every change of the jobs signal after the first: one toast per job that started, finished, finished with failed rows or failed, under the id import-export-center:<key>, with data { key } for the consumer’s actions template. |
+
+## 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 jobToasts 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
+
+```html
+<section
+  slImportExportCenter
+  growing="button"
+  hasMore
+  [defaultExpanded]="['catalog-autumn']"
+  [jobs]="jobs"
+>
+  <div slImportExportCenterActions>…</div>
+  <div slImportExportCenterFooter>
+    <a slLink href="/jobs">Ver todos os jobs</a>
+  </div>
+</section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter [jobs]="jobs" [views]="[]"></section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter [jobs]="running" [views]="[]"></section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter [defaultExpanded]="['catalog-autumn']" [jobs]="sampled"></section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter timeFormat="absolute" [jobs]="files"></section>
+```
+
+### 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 a two-way model, whose request output refuses Arquivados.
+
+Excerpt — not a complete module
+
+```html
+<section
+  slImportExportCenter
+  [jobs]="view() === 'mine' ? mine : jobs"
+  [views]="views"
+  [(view)]="view"
+  (viewRequest)="refuseArchived($event)"
+></section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter [jobs]="store.jobs()">
+  <div slImportExportCenterActions>
+    <button slButton [slDialogTrigger]="importer">Importar</button>
+    <button slButton [slDialogTrigger]="exporter">Exportar</button>
+  </div>
+</section>
+<sl-dialog #importer="slDialog">
+  <div slDialogBody>
+    <div slUpload accept=".csv,.xlsx" [adapter]="send"></div>
+  </div>
+</sl-dialog>
+```
+
+### The toast points at the job
+
+jobToasts in the shell raises one toast per job when it starts and replaces it when it finishes, under the job’s key; the consumer’s 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
+
+```html
+<ng-template #view let-message>
+  <button slButton size="sm" (click)="reveal(message)">Ver</button>
+</ng-template>
+<section slImportExportCenter #centre="slImportExportCenter" [jobs]="jobs()"></section>
+```
+
+### 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
+
+```html
+<ng-container slPopover>
+  <button slButton slPopoverTrigger>Jobs</button>
+  <ng-template slPopoverLayer>
+    <div slPopoverContent aria-label="Importações e exportações">
+      <section slImportExportCenter size="sm" [jobs]="jobs"></section>
+    </div>
+  </ng-template>
+</ng-container>
+```
+
+### 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
+
+```html
+<section slImportExportCenter loading [jobs]="[]"></section>
+<section slImportExportCenter growing="button" hasMore loading [jobs]="jobs"></section>
+```
+
+### Nothing yet, and a list that failed
+
+An empty view draws the view’s own words — Nenhuma exportação — or the consumer’s slImportExportCenterEmpty; a list the store could not load draws the error page whose control emits reloadRequest.
+
+Excerpt — not a complete module
+
+```html
+<section slImportExportCenter defaultView="export" [jobs]="[]"></section>
+<section slImportExportCenter status="error" [jobs]="[]" (reloadRequest)="refetch()"></section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter size="sm" [jobs]="jobs"></section>
+<section slImportExportCenter size="md" [jobs]="jobs"></section>
+```
+
+### 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
+
+```html
+<section slImportExportCenter [jobs]="jobs">
+  <ng-template slImportExportJobActions let-job>
+    <a slLink [href]="shareUrl(job)">Partilhar</a>
+  </ng-template>
+</section>
+```
+
+### Defaults, once
+
+provideImportExportCenterDefaults 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 provideSlotted.
+
+Excerpt — not a complete module
+
+```html
+<section slImportExportCenter [jobs]="jobs"></section>
+<section slImportExportCenter size="md" [jobs]="jobs"></section>
+```
+
+### 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
+
+```html
+<section
+  slImportExportCenter
+  [jobs]="store.jobs()"
+  (cancelRequest)="store.cancel($event.key)"
+  (removeRequest)="store.remove($event.keys)"
+></section>
+```

package/docs/index.md

@@ -0,0 +1,141 @@
+# Slotted for Angular
+
+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.