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

package/docs/import-export-center.json

@@ -0,0 +1,836 @@
+{
+  "family": "import-export-center",
+  "ui": "import-export-center",
+  "binding": "angular",
+  "catalog": {
+    "group": "Feedback",
+    "summary": "Import and export jobs with progress."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md"
+    ],
+    "level": [
+      "2",
+      "3",
+      "4"
+    ],
+    "growing": [
+      "none",
+      "button"
+    ],
+    "timeFormat": [
+      "relative",
+      "absolute"
+    ],
+    "status": [
+      "ready",
+      "error"
+    ],
+    "direction": [
+      "import",
+      "export"
+    ],
+    "jobStatus": [
+      "queued",
+      "running",
+      "succeeded",
+      "failed",
+      "canceled"
+    ],
+    "outcome": [
+      "success",
+      "partial",
+      "failed",
+      "canceled"
+    ]
+  },
+  "members": {
+    "importExportCenter": {
+      "nativeElement": "section",
+      "defaults": {
+        "size": "md",
+        "level": "2",
+        "growing": "none",
+        "timeFormat": "relative",
+        "status": "ready",
+        "view": "all",
+        "loading": false,
+        "hasMore": false
+      },
+      "capabilities": [
+        "current",
+        "open",
+        "removable",
+        "status",
+        "live",
+        "size",
+        "loading",
+        "content",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "focus-visible",
+        "expanded",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "title",
+        "count",
+        "tools",
+        "clear",
+        "actions",
+        "views",
+        "list",
+        "job",
+        "visual",
+        "body",
+        "heading",
+        "job-title",
+        "meta",
+        "file-name",
+        "name",
+        "extension",
+        "time",
+        "status",
+        "mark",
+        "status-label",
+        "stage",
+        "progress",
+        "progress-text",
+        "summary",
+        "message",
+        "controls",
+        "download",
+        "cancel",
+        "retry",
+        "toggle",
+        "chevron",
+        "job-actions",
+        "remove",
+        "details",
+        "counts",
+        "files",
+        "file",
+        "errors",
+        "errors-note",
+        "more",
+        "empty",
+        "error",
+        "footer"
+      ]
+    }
+  },
+  "docs": {
+    "importExportCenter": {
+      "imports": {
+        "source": "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"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "section[slImportExportCenter]",
+          "required": true,
+          "purpose": "The region, named by the title unless the consumer names it. It carries data-ui, the axes as data attributes, data-loading and data-status=\"error\", and it is the container every width decision reads."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": true,
+          "purpose": "The row above the views: the title on the start side, the tools at the end. A tool that wraps lands at the end of the next line."
+        },
+        {
+          "part": "title",
+          "element": "h2, h3 or h4 per level",
+          "required": true,
+          "purpose": "The title message, the words the region and the list are named by, with the count after them."
+        },
+        {
+          "part": "count",
+          "element": "span",
+          "required": false,
+          "purpose": "How many jobs are queued or running, in the accent pair and tabular figures. Absent at nought."
+        },
+        {
+          "part": "tools",
+          "element": "div",
+          "required": false,
+          "purpose": "The family’s clear and the consumer’s actions, one group that wraps as one so the title keeps its line."
+        },
+        {
+          "part": "clear",
+          "element": "span around button[slButton]",
+          "required": false,
+          "purpose": "The ghost Button that emits removeRequest for every finished, removable job of the view, with the reason clear. Absent when none is finished."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "The consumer’s own controls, projected with slImportExportCenterActions: an Importar button that opens a dialog holding upload, an Exportar button that opens the format dialog."
+        },
+        {
+          "part": "views",
+          "element": "div around a Tabs list",
+          "required": false,
+          "purpose": "The strip over views — tabs with its list alone and no track, every tab naming the list with aria-controls. Absent when views holds one entry."
+        },
+        {
+          "part": "list",
+          "element": "ul",
+          "required": true,
+          "purpose": "The jobs, named by the title, aria-busy while loading, tabindex=\"-1\" so focus can land on it when the last job leaves."
+        },
+        {
+          "part": "job",
+          "element": "li",
+          "required": false,
+          "purpose": "One job, carrying data-key, data-direction, data-status, data-outcome once finished, data-expired and data-expanded. Below 42rem the tile and a column of words; from 42rem a row of the list’s grid."
+        },
+        {
+          "part": "visual",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The file-kind tile: the kind’s colour from upload’s File kind scale and the kind’s glyph knocked out of it, so a CSV is the same tile in the field it was chosen from and in the job that imports it."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": false,
+          "purpose": "The column that shrinks: heading, status, progress, summary and message. From 42rem it lets its parts into the job’s grid."
+        },
+        {
+          "part": "heading",
+          "element": "div",
+          "required": false,
+          "purpose": "The job’s name and the line of what it is about."
+        },
+        {
+          "part": "job-title",
+          "element": "a when job.href, span otherwise",
+          "required": false,
+          "purpose": "The job’s name, and the second half of every control’s accessible name. The span takes tabindex=\"-1\" so reveal() and a withdrawn control can land on it."
+        },
+        {
+          "part": "meta",
+          "element": "p",
+          "required": false,
+          "purpose": "Direction, format, the file, its size, the actor and the time, each a plain span in the line’s direction; a drawn dot between two items is clipped at the start of a wrapped line."
+        },
+        {
+          "part": "file-name",
+          "element": "span dir=\"auto\"",
+          "required": false,
+          "purpose": "The name and its extension as one bidi-isolated run in the name’s own direction."
+        },
+        {
+          "part": "name",
+          "element": "span",
+          "required": false,
+          "purpose": "The stem, shrinking to an ellipsis before the extension."
+        },
+        {
+          "part": "extension",
+          "element": "span",
+          "required": false,
+          "purpose": "The last dot and what follows it, which does not shrink."
+        },
+        {
+          "part": "time",
+          "element": "time",
+          "required": false,
+          "purpose": "datetime holds the ISO value; the words are relative — há 3 h — with the absolute reading in title, or absolute under timeFormat=\"absolute\". finishedAt once finished, createdAt before."
+        },
+        {
+          "part": "status",
+          "element": "div",
+          "required": false,
+          "purpose": "A grid of two columns: the mark, and the words beside it. The words never wrap under the mark. Its id describes every control of the job."
+        },
+        {
+          "part": "mark",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "An Icon with the status glyph — clock, circle-check, circle-alert, circle-x, circle — or spinner while running, the line’s own size, centred on the band between the cap height and the x-height."
+        },
+        {
+          "part": "status-label",
+          "element": "span",
+          "required": false,
+          "purpose": "The word for the state — Concluído com 12 erros — and the stage after it, one run that wraps inside its column."
+        },
+        {
+          "part": "stage",
+          "element": "span",
+          "required": false,
+          "purpose": "The consumer’s phrase for the phase, in the muted voice, on one line ending in an ellipsis; the whole phrase is in title and in the DOM."
+        },
+        {
+          "part": "progress",
+          "element": "div",
+          "required": false,
+          "purpose": "While running: progress-indicator at its small step, named by the job title, indeterminate without a value, and the text under it."
+        },
+        {
+          "part": "progress-text",
+          "element": "span",
+          "required": false,
+          "purpose": "Processed of total in the job’s unit, the percentage, and the time left — the server’s eta, or the family’s estimate after three updates over five seconds."
+        },
+        {
+          "part": "summary",
+          "element": "p",
+          "required": false,
+          "purpose": "The counts of a finished job in one line: processed of total, created, updated, skipped."
+        },
+        {
+          "part": "message",
+          "element": "p",
+          "required": false,
+          "purpose": "The job’s message — why it failed — in the outcome’s tone; otherwise the deadline or the denial of its result in the muted voice."
+        },
+        {
+          "part": "controls",
+          "element": "div",
+          "required": false,
+          "purpose": "What jobControls returns, in order: download or retry, cancel, toggle, the consumer’s job-actions, remove at the far end. Under the status column from 42rem."
+        },
+        {
+          "part": "download",
+          "element": "span around a[slButtonLink] or button[slButton]",
+          "required": false,
+          "purpose": "An a[slButtonLink] with download when the file has an href, a button that emits downloadRequest when it has none. Baixar erros when the file is the report of a partial import."
+        },
+        {
+          "part": "cancel",
+          "element": "span around button[slButton]",
+          "required": false,
+          "purpose": "Emits cancelRequest. Absent under cancelable: false."
+        },
+        {
+          "part": "retry",
+          "element": "span around button[slButton]",
+          "required": false,
+          "purpose": "Emits retryRequest: Tentar de novo after a failure or a cancel, Gerar novamente on an export whose result expired."
+        },
+        {
+          "part": "toggle",
+          "element": "span around button[slButton]",
+          "required": false,
+          "purpose": "The Disclosure button: Detalhes in both states, aria-expanded and aria-controls the details. Present only when the job has a count, a file or a failed row."
+        },
+        {
+          "part": "chevron",
+          "element": "span in the button’s end slot",
+          "required": false,
+          "purpose": "An Icon with chevron-down, turning half a turn while the details are shown."
+        },
+        {
+          "part": "job-actions",
+          "element": "span",
+          "required": false,
+          "purpose": "The consumer’s ng-template[slImportExportJobActions], rendered with the job as its context, after the family’s controls."
+        },
+        {
+          "part": "remove",
+          "element": "button[slImportExportControl]",
+          "required": false,
+          "purpose": "The family’s icon button, named Remover do histórico by aria-label and a tooltip, described by the job title. Only on a finished job."
+        },
+        {
+          "part": "details",
+          "element": "div role=\"region\"",
+          "required": false,
+          "purpose": "What the toggle shows, named by the toggle: counts, files and failed rows, on the sunken ground with the family’s rule."
+        },
+        {
+          "part": "counts",
+          "element": "dl",
+          "required": false,
+          "purpose": "Total, processed, created, updated, skipped and failed, in that order, leaving out what the job does not state."
+        },
+        {
+          "part": "files",
+          "element": "ul",
+          "required": false,
+          "purpose": "The original file, the result and the report of failed rows, each with its availability."
+        },
+        {
+          "part": "file",
+          "element": "li",
+          "required": false,
+          "purpose": "One file: its role, its name, its size, its deadline or denial, and a download while it is available. data-availability says which."
+        },
+        {
+          "part": "errors",
+          "element": "div around a Table",
+          "required": false,
+          "purpose": "The rows that failed — row, message, column, value — in a framed table whose box scrolls past sixteen rem."
+        },
+        {
+          "part": "errors-note",
+          "element": "p",
+          "required": false,
+          "purpose": "Mostrando 50 de 12.000 when errorCount is larger than the rows sent."
+        },
+        {
+          "part": "more",
+          "element": "button",
+          "required": false,
+          "purpose": "growing=\"button\" with hasMore: emits loadMoreRequest; says Carregando and refuses a second press while loading."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "In place of the list when the view has nothing: a result-state with the view’s words, or the consumer’s slImportExportCenterEmpty."
+        },
+        {
+          "part": "error",
+          "element": "div",
+          "required": false,
+          "purpose": "status=\"error\": a result-state with the control that emits reloadRequest, in place of the list."
+        },
+        {
+          "part": "footer",
+          "element": "div[slImportExportCenterFooter]",
+          "required": false,
+          "purpose": "The consumer’s footer: the link from a popover to the whole page."
+        }
+      ],
+      "api": [
+        {
+          "name": "jobs",
+          "type": "readonly ImportExportJob[]",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The consumer’s jobs, required. The family changes none of them"
+        },
+        {
+          "name": "view",
+          "type": "string | undefined",
+          "defaultValue": "all",
+          "appliesTo": "SlImportExportCenter",
+          "description": "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"
+        },
+        {
+          "name": "defaultView",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The view an unbound centre starts on"
+        },
+        {
+          "name": "views",
+          "type": "readonly { value, label }[]",
+          "defaultValue": "all, import, export",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The strip’s entries; one entry draws no strip"
+        },
+        {
+          "name": "expanded",
+          "type": "readonly string[] | undefined",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The keys whose details are shown, as a model: [(expanded)] two-way"
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The keys an unbound centre starts with shown"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md'",
+          "defaultValue": "md",
+          "appliesTo": "SlImportExportCenter, provideImportExportCenterDefaults",
+          "description": "sm for a popover or a drawer, with a floor width; md for a page"
+        },
+        {
+          "name": "level",
+          "type": "'2' | '3' | '4'",
+          "defaultValue": "2",
+          "appliesTo": "SlImportExportCenter, provideImportExportCenterDefaults",
+          "description": "The rank of the title’s heading"
+        },
+        {
+          "name": "growing",
+          "type": "'none' | 'button'",
+          "defaultValue": "none",
+          "appliesTo": "SlImportExportCenter, provideImportExportCenterDefaults",
+          "description": "Whether the history grows by a more button; drawn while hasMore"
+        },
+        {
+          "name": "hasMore",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlImportExportCenter",
+          "description": "Whether another page of history exists"
+        },
+        {
+          "name": "timeFormat",
+          "type": "'relative' | 'absolute'",
+          "defaultValue": "relative",
+          "appliesTo": "SlImportExportCenter, provideImportExportCenterDefaults",
+          "description": "How createdAt and finishedAt are written. A deadline is always a date"
+        },
+        {
+          "name": "status",
+          "type": "'ready' | 'error'",
+          "defaultValue": "ready",
+          "appliesTo": "SlImportExportCenter",
+          "description": "error replaces the list with the page whose control emits reloadRequest"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlImportExportCenter",
+          "description": "aria-busy on the list and data-loading on the root; skeleton jobs while nothing is loaded, more waiting otherwise"
+        },
+        {
+          "name": "locale, timeZone, now",
+          "type": "string, string, number",
+          "defaultValue": "the language in force, the runtime’s zone",
+          "appliesTo": "SlImportExportCenter (all three), provideImportExportCenterDefaults (timeZone)",
+          "description": "What numbers, sizes, times and deadlines are written with, and the moment they count from"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ImportExportCenterMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter, jobToasts",
+          "description": "Words laid over the language in force, key by key: every word the family writes, the announcer says and a toast shows"
+        },
+        {
+          "name": "slImportExportCenterActions, slImportExportCenterEmpty, slImportExportCenterFooter",
+          "type": "content slots",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The consumer’s header controls; the view’s empty page; the footer"
+        },
+        {
+          "name": "ng-template[slImportExportJobActions]",
+          "type": "TemplateRef<{ $implicit: ImportExportJob }>",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "The consumer’s controls for one job, after the family’s"
+        },
+        {
+          "name": "exportAs",
+          "type": "slImportExportCenter",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "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"
+        },
+        {
+          "name": "provideImportExportCenterDefaults",
+          "type": "{ size, level, growing, timeFormat, timeZone }",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The decisions an application takes once. A centre that states any of them itself still wins"
+        },
+        {
+          "name": "host attributes",
+          "type": "section",
+          "defaultValue": "—",
+          "appliesTo": "SlImportExportCenter",
+          "description": "aria-*, data-*, class and listeners stay on the section; a static aria-label or aria-labelledby replaces the title wiring"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "viewRequest",
+          "payload": "ChangeRequest<string | undefined>",
+          "when": "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."
+        },
+        {
+          "name": "viewChange",
+          "payload": "string | undefined",
+          "when": "The model’s own output after an accepted move: what [(view)] binds."
+        },
+        {
+          "name": "expandedRequest",
+          "payload": "ChangeRequest<readonly string[] | undefined>",
+          "when": "Before a job’s details show or hide: the toggle (pointer, keyboard) or reveal() (programmatic)."
+        },
+        {
+          "name": "expandedChange",
+          "payload": "readonly string[] | undefined",
+          "when": "The model’s own output after an accepted request: what [(expanded)] binds."
+        },
+        {
+          "name": "cancelRequest",
+          "payload": "{ key, reason, event, cancelled, cancel() }",
+          "when": "When the reader presses Cancelar on a queued or running job — reasons pointer, keyboard."
+        },
+        {
+          "name": "retryRequest",
+          "payload": "{ key, reason, event, cancelled, cancel() }",
+          "when": "When the reader presses Tentar de novo or Gerar novamente — reasons pointer, keyboard."
+        },
+        {
+          "name": "removeRequest",
+          "payload": "{ keys, reason, event, cancelled, cancel() }",
+          "when": "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)."
+        },
+        {
+          "name": "downloadRequest",
+          "payload": "{ key, file, reason, event, cancelled, cancel() }",
+          "when": "Before a download; file is source, result or errors. With an href the link navigates unless cancelled; without one the consumer produces the file."
+        },
+        {
+          "name": "openRequest",
+          "payload": "{ key, reason, event, cancelled, cancel() }",
+          "when": "Before the title’s link navigates to job.href; cancel() keeps the reader here."
+        },
+        {
+          "name": "loadMoreRequest",
+          "payload": "{ reason, event, cancelled, cancel() }",
+          "when": "When the reader presses more — reasons pointer, keyboard. Not while loading."
+        },
+        {
+          "name": "reloadRequest",
+          "payload": "{ reason, event, cancelled, cancel() }",
+          "when": "When the reader presses the error page’s control under status=\"error\"."
+        },
+        {
+          "name": "jobToasts(jobs, { actions, messages })",
+          "payload": "a function called in an injection context",
+          "when": "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."
+        }
+      ],
+      "accessibility": [
+        "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": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Six jobs of Vale Norte Distribuidora over a store that answers every output, and a server that moves the running import forward. Cancel it, retry the failed export, open the catalogue’s details, remove a finished job, and watch the queued export start when the import ends.",
+      "language": "html",
+      "source": "<section\n  slImportExportCenter\n  [jobs]=\"store.jobs()\"\n  (cancelRequest)=\"store.cancel($event.key)\"\n  (removeRequest)=\"store.remove($event.keys)\"\n  (retryRequest)=\"store.retry($event.key)\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "anatomy",
+      "title": "Every part, written out",
+      "note": "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.",
+      "language": "html",
+      "source": "<section\n  slImportExportCenter\n  growing=\"button\"\n  hasMore\n  [defaultExpanded]=\"['catalog-autumn']\"\n  [jobs]=\"jobs\"\n>\n  <div slImportExportCenterActions>…</div>\n  <div slImportExportCenterFooter>\n    <a slLink href=\"/jobs\">Ver todos os jobs</a>\n  </div>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "statuses",
+      "title": "Five statuses, four outcomes",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter [jobs]=\"jobs\" [views]=\"[]\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "progress",
+      "title": "Progress, in the job’s unit",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter [jobs]=\"running\" [views]=\"[]\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "errors",
+      "title": "Rows that failed",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter [defaultExpanded]=\"['catalog-autumn']\" [jobs]=\"sampled\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "files",
+      "title": "Deadlines and permission",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter timeFormat=\"absolute\" [jobs]=\"files\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "views",
+      "title": "Views",
+      "note": "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.",
+      "language": "html",
+      "source": "<section\n  slImportExportCenter\n  [jobs]=\"view() === 'mine' ? mine : jobs\"\n  [views]=\"views\"\n  [(view)]=\"view\"\n  (viewRequest)=\"refuseArchived($event)\"\n></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "intake",
+      "title": "Starting a job",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter [jobs]=\"store.jobs()\">\n  <div slImportExportCenterActions>\n    <button slButton [slDialogTrigger]=\"importer\">Importar</button>\n    <button slButton [slDialogTrigger]=\"exporter\">Exportar</button>\n  </div>\n</section>\n<sl-dialog #importer=\"slDialog\">\n  <div slDialogBody>\n    <div slUpload accept=\".csv,.xlsx\" [adapter]=\"send\"></div>\n  </div>\n</sl-dialog>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "toasts",
+      "title": "The toast points at the job",
+      "note": "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.",
+      "language": "html",
+      "source": "<ng-template #view let-message>\n  <button slButton size=\"sm\" (click)=\"reveal(message)\">Ver</button>\n</ng-template>\n<section slImportExportCenter #centre=\"slImportExportCenter\" [jobs]=\"jobs()\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hosts",
+      "title": "In a popover, on a page",
+      "note": "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.",
+      "language": "html",
+      "source": "<ng-container slPopover>\n  <button slButton slPopoverTrigger>Jobs</button>\n  <ng-template slPopoverLayer>\n    <div slPopoverContent aria-label=\"Importações e exportações\">\n      <section slImportExportCenter size=\"sm\" [jobs]=\"jobs\"></section>\n    </div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "The first wait, and the next page",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter loading [jobs]=\"[]\"></section>\n<section slImportExportCenter growing=\"button\" hasMore loading [jobs]=\"jobs\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Nothing yet, and a list that failed",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter defaultView=\"export\" [jobs]=\"[]\"></section>\n<section slImportExportCenter status=\"error\" [jobs]=\"[]\" (reloadRequest)=\"refetch()\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Two sizes",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter size=\"sm\" [jobs]=\"jobs\"></section>\n<section slImportExportCenter size=\"md\" [jobs]=\"jobs\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter [jobs]=\"jobs\">\n  <ng-template slImportExportJobActions let-job>\n    <a slLink [href]=\"shareUrl(job)\">Partilhar</a>\n  </ng-template>\n</section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "defaults",
+      "title": "Defaults, once",
+      "note": "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.",
+      "language": "html",
+      "source": "<section slImportExportCenter [jobs]=\"jobs\"></section>\n<section slImportExportCenter size=\"md\" [jobs]=\"jobs\"></section>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "Keyboard and focus",
+      "note": "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.",
+      "language": "html",
+      "source": "<section\n  slImportExportCenter\n  [jobs]=\"store.jobs()\"\n  (cancelRequest)=\"store.cancel($event.key)\"\n  (removeRequest)=\"store.remove($event.keys)\"\n></section>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}