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

package/dist/docs/timeline.json

@@ -0,0 +1,851 @@
+{
+  "family": "timeline",
+  "ui": "timeline",
+  "binding": "react",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Events in time order with markers."
+  },
+  "axes": {
+    "mode": [
+      "list",
+      "feed"
+    ],
+    "orientation": [
+      "vertical",
+      "horizontal"
+    ],
+    "placement": [
+      "end",
+      "start",
+      "alternate"
+    ],
+    "order": [
+      "oldest-first",
+      "newest-first"
+    ],
+    "variant": [
+      "solid",
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "tone": [
+      "secondary",
+      "accent",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "connector": [
+      "solid",
+      "dashed",
+      "none"
+    ],
+    "growing": [
+      "none",
+      "button",
+      "scroll"
+    ],
+    "timeFormat": [
+      "absolute",
+      "relative"
+    ],
+    "level": [
+      "2",
+      "3",
+      "4",
+      "5",
+      "6"
+    ]
+  },
+  "members": {
+    "timeline": {
+      "nativeElement": "div",
+      "defaults": {
+        "mode": "list",
+        "orientation": "vertical",
+        "placement": "end",
+        "order": "oldest-first",
+        "variant": "subtle",
+        "tone": "secondary",
+        "size": "md",
+        "growing": "none",
+        "timeFormat": "absolute",
+        "level": 3,
+        "reflow": true,
+        "autoComplete": false,
+        "loading": false,
+        "freshCount": 0,
+        "defaultOpen": true,
+        "collapsible": false
+      },
+      "capabilities": [
+        "open",
+        "orientation",
+        "placement",
+        "appearance",
+        "size",
+        "loading",
+        "live",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "loading",
+        "current",
+        "complete"
+      ],
+      "parts": [
+        "root",
+        "fresh",
+        "list",
+        "group",
+        "group-label",
+        "group-trigger",
+        "group-indicator",
+        "group-list",
+        "item",
+        "opposite",
+        "rail",
+        "marker",
+        "connector",
+        "content",
+        "title",
+        "actor",
+        "time",
+        "description",
+        "actions",
+        "more",
+        "empty"
+      ]
+    }
+  },
+  "docs": {
+    "timeline": {
+      "imports": {
+        "source": "import {\n  Timeline,\n  TimelineDefaultsProvider,\n  TimelineGroup,\n  TimelineItem,\n  TimelineTime,\n  useTimeline,\n} from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "É dono dos eixos, das mensagens, do fuso e do contentor de query que reflui a linha. Carrega data-ui=\"timeline\" e cada eixo como atributo. Não é um landmark."
+        },
+        {
+          "part": "fresh",
+          "element": "button",
+          "required": false,
+          "purpose": "A pílula que segura os eventos novos até o leitor os pedir. Aparece quando freshCount passa de zero e fica montada depois disso, com hidden a zero e a última contagem como texto, para sair com transição. Fica antes da lista e fora do feed, é anunciada uma vez por mudança de contagem, e quem a pressiona passa para o primeiro evento revelado."
+        },
+        {
+          "part": "list",
+          "element": "ol, ou div com role=\"feed\"",
+          "required": true,
+          "purpose": "A lista ordenada, ou o feed do APG quando mode=\"feed\". Carrega o nome, aria-busy enquanto carrega, e as quatro teclas do feed — só a lista vê todos os artigos."
+        },
+        {
+          "part": "group",
+          "element": "li, ou div no feed",
+          "required": false,
+          "purpose": "Um período: o heading e a sua própria lista. A linha quebra nele. Carrega data-open, o único estado mutável da família."
+        },
+        {
+          "part": "group-label",
+          "element": "h2 a h6, por level",
+          "required": false,
+          "purpose": "O nome do período, como heading do nível declarado na raiz ou no grupo."
+        },
+        {
+          "part": "group-trigger",
+          "element": "button",
+          "required": false,
+          "purpose": "Dentro do heading de um grupo collapsible: aria-expanded, aria-controls para a lista, e o nome do período seguido de \", Show events\" ou \", Hide events\" (as mensagens expand e collapse, com o seu próprio separador)."
+        },
+        {
+          "part": "group-indicator",
+          "element": "span",
+          "required": false,
+          "purpose": "O chevron do gatilho, o glifo chevron-down dentro de um icon, que roda entre baixo e cima."
+        },
+        {
+          "part": "group-list",
+          "element": "ol, ou div no feed",
+          "required": false,
+          "purpose": "A lista de um grupo. Recebe hidden quando o grupo fecha, e os eventos ficam no DOM: um feed que os perdesse perdia a posição do leitor."
+        },
+        {
+          "part": "item",
+          "element": "li, ou article no feed",
+          "required": true,
+          "purpose": "Um evento, e o elemento onde cada estado é escrito: data-current, data-complete, data-loading, data-connector, data-side, data-tone, data-variant. No feed é um article focável com posição, tamanho do conjunto, rótulo e descrição."
+        },
+        {
+          "part": "opposite",
+          "element": "div",
+          "required": false,
+          "purpose": "O outro lado da linha. Em placement=\"end\" é uma coluna de largura fixa antes da linha, onde a hora vive na leitura clássica; em alternate ocupa o lado que o corpo não ocupa."
+        },
+        {
+          "part": "rail",
+          "element": "div",
+          "required": true,
+          "purpose": "A coluna do marcador e da linha, esticada à altura do evento. É o que mantém a linha no centro do marcador, seja ele um ponto ou um avatar."
+        },
+        {
+          "part": "marker",
+          "element": "span",
+          "required": true,
+          "purpose": "O marcador sobre a linha, centrado na primeira linha do título. Vazio desenha um ponto do tamanho do spinner; com glifo ou avatar desenha um emblema; loading desenha o spinner no lugar do ponto; complete, sem marcador do consumidor, recebe o glifo check (um icon com data-check) vazado no disco e continua ponto."
+        },
+        {
+          "part": "connector",
+          "element": "span",
+          "required": false,
+          "purpose": "A linha do marcador ao evento seguinte, aria-hidden. O último evento de cada lista não a desenha. Tracejada do lado futuro do evento atual, com autoComplete."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "O corpo: título e hora na primeira linha, ator por baixo, descrição, o que o consumidor escrever e as ações."
+        },
+        {
+          "part": "title",
+          "element": "div",
+          "required": false,
+          "purpose": "O nome do evento, e o primeiro id de aria-labelledby no feed. O estado current é lido a seguir a ele, numa visually-hidden."
+        },
+        {
+          "part": "actor",
+          "element": "div",
+          "required": false,
+          "purpose": "Quem o fez: um avatar e um nome. Entra no rótulo do artigo a seguir ao título."
+        },
+        {
+          "part": "time",
+          "element": "time",
+          "required": false,
+          "purpose": "Quando aconteceu. Escreve sempre datetime com o valor de máquina; o texto é formatado pelo locale e pelo timeZone, ou substituído por timeLabel, e uma leitura relativa guarda a absoluta em title."
+        },
+        {
+          "part": "description",
+          "element": "div",
+          "required": false,
+          "purpose": "A segunda linha, e o aria-describedby do artigo no feed."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "A fila de controlos sob a descrição. Um evento com ações não é acionável por inteiro: cada ação é um alvo próprio."
+        },
+        {
+          "part": "more",
+          "element": "button, ou div enquanto carrega",
+          "required": false,
+          "purpose": "O fim do que foi carregado, quando growing não é none. Um botão que pede mais, ou, em scroll, uma sentinela que pede quando entra no rolador; enquanto loading mostra o anel e a mensagem."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "O que fica no lugar da lista quando não há eventos e nada está a carregar."
+        }
+      ],
+      "api": [
+        {
+          "name": "mode",
+          "type": "'list' | 'feed'",
+          "defaultValue": "list",
+          "appliesTo": "Timeline",
+          "description": "Uma lista ordenada, ou o padrão Feed do APG"
+        },
+        {
+          "name": "orientation",
+          "type": "'vertical' | 'horizontal'",
+          "defaultValue": "vertical",
+          "appliesTo": "Timeline",
+          "description": "Uma coluna, ou uma fila que rola e reflui"
+        },
+        {
+          "name": "placement",
+          "type": "'end' | 'start' | 'alternate'",
+          "defaultValue": "end",
+          "appliesTo": "Timeline",
+          "description": "De que lado da linha o corpo vive"
+        },
+        {
+          "name": "order",
+          "type": "'oldest-first' | 'newest-first'",
+          "defaultValue": "oldest-first",
+          "appliesTo": "Timeline",
+          "description": "O que a lista é; decide onde autoComplete corta. Nunca reordena o array"
+        },
+        {
+          "name": "variant",
+          "type": "'solid' | 'outline' | 'subtle' | 'plain'",
+          "defaultValue": "subtle",
+          "appliesTo": "Timeline",
+          "description": "A aparência do marcador, herdada pelos eventos"
+        },
+        {
+          "name": "tone",
+          "type": "'secondary' | 'accent' | 'success' | 'warning' | 'danger'",
+          "defaultValue": "secondary",
+          "appliesTo": "Timeline",
+          "description": "O tom do marcador, herdado pelos eventos"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Timeline",
+          "description": "O passo do marcador e do tipo"
+        },
+        {
+          "name": "growing",
+          "type": "'none' | 'button' | 'scroll'",
+          "defaultValue": "none",
+          "appliesTo": "Timeline",
+          "description": "Como o fim do carregado pede mais"
+        },
+        {
+          "name": "timeFormat",
+          "type": "'absolute' | 'relative'",
+          "defaultValue": "absolute",
+          "appliesTo": "Timeline",
+          "description": "Como a hora é escrita; relative guarda o absoluto em title"
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "BCP 47 para as horas; sem ele, o da língua em vigor (SlottedProvider)"
+        },
+        {
+          "name": "timeZone",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "O fuso em que um instante é escrito; sem ele, o do runtime"
+        },
+        {
+          "name": "now",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "O instante de que uma leitura relativa conta, em milissegundos de época; sem ele, o relógio na renderização"
+        },
+        {
+          "name": "level",
+          "type": "2 | 3 | 4 | 5 | 6",
+          "defaultValue": "3",
+          "appliesTo": "Timeline",
+          "description": "O nível dos headings dos grupos"
+        },
+        {
+          "name": "reflow",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Timeline",
+          "description": "Se horizontal e alternate refluem abaixo de trinta rems"
+        },
+        {
+          "name": "autoComplete",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Timeline",
+          "description": "Marca concluídos os eventos do lado passado do atual, e traceja o futuro"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Timeline",
+          "description": "Mais eventos a caminho: aria-busy no feed, anel no fim"
+        },
+        {
+          "name": "freshCount",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Timeline",
+          "description": "Quantos eventos novos a pílula segura"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "O total, para aria-setsize; sem ele, -1 enquanto pode crescer"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "O nome acessível da lista"
+        },
+        {
+          "name": "labelledBy",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "O id do elemento que nomeia a lista"
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "O que fica no lugar da lista vazia"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<TimelineMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Timeline",
+          "description": "Palavras sobre o catálogo da língua em vigor, chave a chave: as sete mensagens da família"
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineGroup",
+          "description": "O nome do período, como heading"
+        },
+        {
+          "name": "collapsible",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TimelineGroup",
+          "description": "Se o heading é um botão que dobra o grupo"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "TimelineGroup",
+          "description": "Presente é controlado, para a vida do grupo"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "TimelineGroup",
+          "description": "Onde um grupo não controlado começa, lido uma vez"
+        },
+        {
+          "name": "level",
+          "type": "2 | 3 | 4 | 5 | 6",
+          "defaultValue": "—",
+          "appliesTo": "TimelineGroup",
+          "description": "O nível deste heading, sobre o da raiz"
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "O nome do evento"
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "A segunda linha"
+        },
+        {
+          "name": "actor",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "Quem o fez"
+        },
+        {
+          "name": "time",
+          "type": "PlainDateTime | string",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "Quando: instante ISO ou valor de parede"
+        },
+        {
+          "name": "timeLabel",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "O texto no lugar da hora formatada"
+        },
+        {
+          "name": "marker",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "O que o marcador segura no lugar do ponto"
+        },
+        {
+          "name": "opposite",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "O outro lado da linha"
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "A fila de controlos"
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TimelineItem",
+          "description": "O evento em que o leitor está: aria-current"
+        },
+        {
+          "name": "complete",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "Concluído; vence a derivação"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TimelineItem",
+          "description": "Ainda a chegar: o marcador roda o anel"
+        },
+        {
+          "name": "connector",
+          "type": "'solid' | 'dashed' | 'none'",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "A linha depois deste evento"
+        },
+        {
+          "name": "side",
+          "type": "'start' | 'end'",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "O lado em alternate; paridade sem ele"
+        },
+        {
+          "name": "tone",
+          "type": "TimelineTone",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "O tom deste evento, sobre o da raiz"
+        },
+        {
+          "name": "variant",
+          "type": "TimelineVariant",
+          "defaultValue": "—",
+          "appliesTo": "TimelineItem",
+          "description": "A aparência deste evento, sobre a da raiz"
+        },
+        {
+          "name": "value",
+          "type": "PlainDateTime | string",
+          "defaultValue": "—",
+          "appliesTo": "TimelineTime",
+          "description": "O valor de máquina, escrito em datetime"
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Timeline, TimelineGroup, TimelineItem",
+          "description": "Substitui o elemento renderizado. Todo atributo de dados é entregue, e um article do feed leva o seu role."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "todas as partes",
+          "description": "Alcança o elemento"
+        },
+        {
+          "name": "useTimeline()",
+          "type": "() => TimelineContextValue",
+          "defaultValue": "—",
+          "appliesTo": "dentro de uma Timeline",
+          "description": "Os eixos resolvidos, as mensagens, e focusItem(index) — mover o foco a um artigo do feed, a ação que uma prop não exprime"
+        },
+        {
+          "name": "TimelineTime",
+          "type": "{ value, format, locale, timeZone, now }",
+          "defaultValue": "—",
+          "appliesTo": "em qualquer sítio",
+          "description": "A parte time sozinha, para uma coluna opposite ou uma célula de tabela; lê a raiz quando há uma"
+        },
+        {
+          "name": "TimelineDefaultsProvider",
+          "type": "mode | orientation | placement | order | variant | tone | size | growing | timeFormat | timeZone | now | level",
+          "defaultValue": "—",
+          "appliesTo": "Aplicação",
+          "description": "Decide os catorze uma vez para tudo por baixo; uma prop na linha do tempo ganha"
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Em TimelineGroup, antes de o grupo abrir ou fechar. O pedido leva o valor anterior, a razão — pointer, keyboard ou programmatic — e o evento de origem; cancelá-lo não move nada."
+        },
+        {
+          "name": "onLoadMore",
+          "payload": "(reason: \"pointer\" | \"keyboard\" | \"scroll\", event?)",
+          "when": "Quando o leitor pressiona o botão de carregar mais, ou quando a sentinela entra no rolador em growing=\"scroll\". Não há valor a segurar: o consumidor acrescenta ao array."
+        },
+        {
+          "name": "onReveal",
+          "payload": "(reason: \"pointer\" | \"keyboard\", event?)",
+          "when": "Quando o leitor pressiona a pílula de eventos novos. O consumidor junta os eventos que segurava ao array e põe freshCount a zero."
+        }
+      ],
+      "accessibility": [
+        "Em list a lista é uma ol e cada evento um li: a sequência e o tamanho do conjunto vêm da plataforma sem uma linha de ARIA, e o teclado é o dos links e botões que o consumidor escrever. Não há papel inventado numa lista que não cresce.",
+        "Em feed a lista é role=\"feed\" e cada evento um article com tabindex=\"0\", aria-posinset, aria-setsize — o total declarado, o carregado quando não cresce, -1 quando pode crescer — aria-labelledby com título, ator e hora por esta ordem, e aria-describedby com a descrição. É o padrão Feed do APG item a item, e um li não admite o papel article: por isso o elemento muda com o modo.",
+        "O evento atual leva aria-current=\"true\" e uma visually-hidden com a mensagem current a seguir ao título, porque nem todo leitor de ecrã diz aria-current dentro de um artigo. Concluído e a carregar são formas — um disco com check, o anel do spinner — e não só cores.",
+        "Um grupo collapsible é o padrão Disclosure: o heading contém um button com aria-expanded e aria-controls, e a lista fechada recebe hidden sem sair do DOM. O nome do botão é o período seguido de \", Show events\" ou \", Hide events\": as mensagens expand e collapse trazem o seu próprio separador.",
+        "A hora é sempre um elemento time com datetime, o valor que o leitor de ecrã e o motor de busca leem; o texto é do locale e do fuso declarados, e uma leitura relativa deixa a absoluta em title.",
+        "Os eventos novos são anunciados em polite uma vez por mudança de contagem, e ficam atrás de um botão até o leitor os pedir, para nada se mover debaixo do que está a ser lido."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-avatar-size-xs",
+    "--slotted-border-strong",
+    "--slotted-border-subtle",
+    "--slotted-border-width-medium",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-line-height",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-duration-instant",
+    "--slotted-duration-medium",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-radius-full",
+    "--slotted-space-1",
+    "--slotted-space-12",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-surface",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-timeline-color",
+    "--slotted-timeline-color-muted",
+    "--slotted-timeline-connector-color",
+    "--slotted-timeline-connector-thickness",
+    "--slotted-timeline-content-gap",
+    "--slotted-timeline-core-ratio",
+    "--slotted-timeline-font-family",
+    "--slotted-timeline-font-size",
+    "--slotted-timeline-gap",
+    "--slotted-timeline-group-gap",
+    "--slotted-timeline-group-weight",
+    "--slotted-timeline-item-gap",
+    "--slotted-timeline-line-gap",
+    "--slotted-timeline-line-height",
+    "--slotted-timeline-marker-border",
+    "--slotted-timeline-marker-surface",
+    "--slotted-timeline-meta-font-size",
+    "--slotted-timeline-opposite-size",
+    "--slotted-timeline-radius",
+    "--slotted-timeline-state-layer-active",
+    "--slotted-timeline-state-layer-hover",
+    "--slotted-timeline-time-font-size",
+    "--slotted-timeline-title-weight",
+    "--slotted-timeline-track-min",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-danger-on-solid",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-border",
+    "--slotted-tone-secondary-on-solid",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-border",
+    "--slotted-tone-success-on-solid",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-border",
+    "--slotted-tone-warning-on-solid",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Todos os eixos numa fatura, movidos pelos controlos por baixo do palco. Troque mode para feed e a mesma lista passa a artigos focáveis.",
+      "language": "tsx",
+      "source": "<Timeline label=\"Atividade da fatura\" locale=\"pt-BR\" timeZone=\"America/Sao_Paulo\">\n  <TimelineItem\n    actor=\"Ana Ribeiro\"\n    description=\"Rascunho INV-4821 para Solaris Fretes.\"\n    time=\"2026-09-08T09:12:00Z\"\n    title=\"Fatura criada\"\n  />\n  <TimelineItem current time=\"2026-09-14T10:32:00Z\" title=\"Paga\" tone=\"success\" />\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "feed",
+      "title": "Um feed que é um feed",
+      "note": "Com mode=\"feed\" a lista é role=\"feed\" e cada evento um article com aria-posinset, aria-setsize e o rótulo lido do título, do ator e da hora. Tab para em cada artigo; PageDown e PageUp saltam entre eles.",
+      "language": "tsx",
+      "source": "<Timeline count={120} growing=\"button\" label=\"Atividade\" mode=\"feed\" onLoadMore={load}>\n  {events.map((event) => (\n    <TimelineItem key={event.id} {...event} />\n  ))}\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "placement",
+      "title": "De que lado da linha",
+      "note": "end é a omissão; start espelha a fila; alternate põe a linha ao meio e os eventos revezam-se. A parte opposite ocupa sempre o lado que o corpo não ocupa, e abaixo de trinta rems alternate volta a um lado só.",
+      "language": "tsx",
+      "source": "<Timeline placement=\"alternate\">\n  <TimelineItem\n    opposite={<TimelineTime value=\"2026-06-02T00:00:00Z\" />}\n    title=\"2.12 — Faturas recorrentes\"\n  />\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "orientation",
+      "title": "Uma fila de eventos",
+      "note": "horizontal põe a linha de lado, com colunas iguais que rolam no eixo em linha quando há mais eventos do que largura. Abaixo de trinta rems da sua própria largura volta a ser uma coluna; reflow={false} desliga isso.",
+      "language": "tsx",
+      "source": "<Timeline autoComplete orientation=\"horizontal\">\n  {stages}\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "order",
+      "title": "A ordem é declarada, nunca invertida",
+      "note": "order diz o que a lista é e não reordena o array: o consumidor ordena. É a ordem que decide onde autoComplete corta — em oldest-first o passado está antes do atual, em newest-first depois.",
+      "language": "tsx",
+      "source": "<Timeline autoComplete order=\"newest-first\">\n  <TimelineItem title=\"Entregue\" />\n  <TimelineItem current title=\"Em trânsito\" />\n  <TimelineItem title=\"Embalado\" />\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "statuses",
+      "title": "O que um evento pode ser",
+      "note": "Cada estado é uma forma além de uma cor: pendente é a forma do variant, atual é um disco cheio com um anel, concluído é um disco cheio com um check vazado, a carregar é o spinner do tamanho do ponto. autoComplete deriva concluído para o lado passado do atual e traceja o futuro.",
+      "language": "tsx",
+      "source": "<Timeline autoComplete tone=\"accent\">\n  <TimelineItem title=\"Pedido confirmado\" />\n  <TimelineItem current title=\"Em trânsito\" />\n  <TimelineItem title=\"Saiu para entrega\" />\n  <TimelineItem loading title=\"Entregue\" />\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "appearance",
+      "title": "Aparência e tamanho",
+      "note": "variant na raiz ou por evento: outline separa o marcador da linha em qualquer esquema, solid enche, subtle é um fundo com aresta fina, plain é o ponto sem anel para uma fila de eventos pequenos. tone pinta o marcador com um dos cinco tons; size escolhe o passo.",
+      "language": "tsx",
+      "source": "<Timeline size=\"sm\" variant=\"plain\">\n  <TimelineItem title=\"Commit 4f2a\" />\n  <TimelineItem title=\"Falha nos testes\" tone=\"danger\" variant=\"solid\" />\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "groups",
+      "title": "Agrupar por período",
+      "note": "O consumidor agrupa, porque o período é do domínio. Um grupo é um heading do nível declarado sobre a sua própria lista; collapsible faz do heading um botão com aria-expanded, e a lista fechada fica no DOM com hidden.",
+      "language": "tsx",
+      "source": "<Timeline level={3}>\n  <TimelineGroup collapsible label=\"Hoje\">\n    <TimelineItem title=\"Paga\" />\n  </TimelineGroup>\n  <TimelineGroup collapsible defaultOpen={false} label=\"Semana passada\">\n    <TimelineItem title=\"Enviada\" />\n  </TimelineGroup>\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "growing",
+      "title": "Carregar mais",
+      "note": "growing=\"button\" põe um botão no fim do carregado e pede com pointer ou keyboard; growing=\"scroll\" pede com scroll quando o fim entra no rolador. Enquanto loading, o fim mostra o anel e a raiz fica aria-busy.",
+      "language": "tsx",
+      "source": "<Timeline growing=\"button\" loading={pending} onLoadMore={(reason) => fetchMore()}>\n  {events}\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "fresh",
+      "title": "Eventos novos enquanto o leitor lê",
+      "note": "Um feed que insere no topo empurra o que está a ser lido. Com freshCount, a família segura os novos atrás de uma pílula, anuncia a contagem em polite, e onReveal é o momento em que o consumidor os junta ao array. A pílula sai com transição, e o foco que estava nela passa ao primeiro evento revelado.",
+      "language": "tsx",
+      "source": "<Timeline freshCount={held.length} mode=\"feed\" onReveal={() => setEvents([...held, ...events])}>\n  {events}\n</Timeline>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "timestamps",
+      "title": "Hora de máquina, fuso explícito",
+      "note": "time aceita um instante ISO com designador de fuso, escrito no timeZone declarado, ou um valor de parede sem fuso, escrito como está. datetime leva sempre o valor de máquina; timeFormat=\"relative\" escreve \"há 2 horas\" e guarda o absoluto em title.",
+      "language": "tsx",
+      "source": "<SlottedProvider locale=\"pt-BR\">\n  <TimelineDefaultsProvider now={Date.now()} timeZone=\"America/Sao_Paulo\">\n    <Timeline timeFormat=\"relative\">\n      <TimelineItem time=\"2026-09-14T10:32:00Z\" title=\"Paga\" />\n    </Timeline>\n  </TimelineDefaultsProvider>\n</SlottedProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Conteúdo que a família não escolheu",
+      "note": "Um título de nove palavras, uma referência sem quebra, um título em árabe, um avatar no marcador, um evento sem título. O marcador nunca sai da primeira linha e a linha nunca sai do centro.",
+      "language": "tsx",
+      "source": "<TimelineItem\n  marker={<Avatar name=\"Ana Ribeiro\" />}\n  title=\"Aprovou a cotação revista do programa de remessas\"\n/>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composição",
+      "note": "O título é o que o consumidor lhe der — um Link — e as ações são botões da família button. Conteúdo expansível é um Collapsible dentro do corpo. useTimeline() dá focusItem para o feed, e TimelineDefaultsProvider decide uma vez para a aplicação.",
+      "language": "tsx",
+      "source": "<TimelineItem\n  actions={<Button size=\"sm\">Repetir</Button>}\n  title={<Link href=\"/faturas/4821\">Pagamento falhou</Link>}\n>\n  <Collapsible variant=\"plain\">\n    <Collapsible.Trigger>Ver resposta do emissor</Collapsible.Trigger>\n    <Collapsible.Panel>Código 05: não honrar.</Collapsible.Panel>\n  </Collapsible>\n</TimelineItem>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "empty",
+      "title": "Sem eventos",
+      "note": "Sem itens e sem loading, a parte empty toma o lugar da lista com a mensagem da família ou com o que o consumidor projetar — um result-state, por exemplo.",
+      "language": "tsx",
+      "source": "<Timeline empty={<ResultState status=\"empty\" title=\"Ainda sem eventos\" />} />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Teclado",
+      "note": "Em list o teclado é o da plataforma: Tab atravessa os links e botões do corpo. Em feed, Tab para em cada artigo, PageDown e PageUp saltam entre artigos, Control+End e Control+Home saem do feed para o focável seguinte ou anterior.",
+      "language": "tsx",
+      "source": "// \"Paga, Solaris Fretes, há 2 horas, artigo 1 de 3\" — título, ator e hora,\n// e a posição, porque cada artigo leva aria-labelledby e aria-posinset.\n<Timeline label=\"Atividade\" mode=\"feed\">\n  {events}\n</Timeline>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}