@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/docs/timeline.json

@@ -33,6 +33,7 @@
     "tone": [
       "secondary",
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -140,127 +141,127 @@
           "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."
+          "purpose": "Owns the axes, the messages, the time zone and the query container that reflows the line. Carries data-ui=\"timeline\" and each axis as an attribute. It is not a 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."
+          "purpose": "The pill that holds new events until the reader asks for them. It appears when freshCount rises above zero and stays mounted afterwards, hidden at zero with the last count as text, so it leaves with a transition. It sits before the list and outside the feed, is announced once per count change, and pressing it moves focus to the first revealed event."
         },
         {
           "part": "list",
-          "element": "ol, ou div com role=\"feed\"",
+          "element": "ol, or div with 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."
+          "purpose": "The ordered list, or the APG feed when mode=\"feed\". Carries the name, aria-busy while loading, and the four feed keys — only the list sees every article."
         },
         {
           "part": "group",
-          "element": "li, ou div no feed",
+          "element": "li, or div in the 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."
+          "purpose": "A period: the heading and its own list. The line breaks at it. Carries data-open, the only mutable state of the family."
         },
         {
           "part": "group-label",
-          "element": "h2 a h6, por level",
+          "element": "h2 to h6, by level",
           "required": false,
-          "purpose": "O nome do período, como heading do nível declarado na raiz ou no grupo."
+          "purpose": "The period name, as a heading of the level declared on the root or on the group."
         },
         {
           "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)."
+          "purpose": "Inside the heading of a collapsible group: aria-expanded, aria-controls pointing to the list, and the period name followed by \", Show events\" or \", Hide events\" (the expand and collapse messages, with their own separator)."
         },
         {
           "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."
+          "purpose": "The trigger’s chevron, the chevron-down glyph inside an icon, which rotates between down and up."
         },
         {
           "part": "group-list",
-          "element": "ol, ou div no feed",
+          "element": "ol, or div in the 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."
+          "purpose": "The list of a group. Receives hidden when the group closes, and the events stay in the DOM: a feed that lost them would lose the reader’s position."
         },
         {
           "part": "item",
-          "element": "li, ou article no feed",
+          "element": "li, or article in the 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."
+          "purpose": "An event, and the element where each state is written: data-current, data-complete, data-loading, data-connector, data-side, data-tone, data-variant. In the feed it is a focusable article with position, set size, label and description."
         },
         {
           "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."
+          "purpose": "The other side of the line. With placement=\"end\" it is a fixed-width column before the line, where the time lives in the classic reading; with alternate it takes the side the body does not take."
         },
         {
           "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."
+          "purpose": "The column of the marker and the line, stretched to the height of the event. It keeps the line at the center of the marker, whether the marker is a dot or an 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."
+          "purpose": "The marker on the line, centered on the first line of the title. Empty, it draws a dot the size of the spinner; with a glyph or an avatar it draws a badge; loading draws the spinner in place of the dot; complete, without a consumer marker, receives the check glyph (an icon with data-check) cut out of the disc and stays a dot."
         },
         {
           "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."
+          "purpose": "The line from the marker to the next event, aria-hidden. The last event of each list does not draw it. Dashed on the future side of the current event, with 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."
+          "purpose": "The body: title and time on the first line, actor below, description, whatever the consumer writes, and the actions."
         },
         {
           "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."
+          "purpose": "The event name, and the first id of aria-labelledby in the feed. The current state is read after it, in a visually-hidden element."
         },
         {
           "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."
+          "purpose": "Who did it: an avatar and a name. Enters the article label after the title."
         },
         {
           "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."
+          "purpose": "When it happened. Always writes datetime with the machine value; the text is formatted by the locale and the timeZone, or replaced by timeLabel, and a relative reading keeps the absolute one in title."
         },
         {
           "part": "description",
           "element": "div",
           "required": false,
-          "purpose": "A segunda linha, e o aria-describedby do artigo no feed."
+          "purpose": "The second line, and the article’s aria-describedby in the 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."
+          "purpose": "The row of controls below the description. An event with actions is not actionable as a whole: each action is its own target."
         },
         {
           "part": "more",
-          "element": "button, ou div enquanto carrega",
+          "element": "button, or div while loading",
           "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."
+          "purpose": "The end of what was loaded, when growing is not none. A button that asks for more, or, with scroll, a sentinel that asks when it enters the scroller; while loading it shows the ring and the message."
         },
         {
           "part": "empty",
           "element": "div",
           "required": false,
-          "purpose": "O que fica no lugar da lista quando não há eventos e nada está a carregar."
+          "purpose": "What takes the place of the list when there are no events and nothing is loading."
         }
       ],
       "api": [
@@ -269,301 +270,301 @@
           "type": "'list' | 'feed'",
           "defaultValue": "list",
           "appliesTo": "Timeline",
-          "description": "Uma lista ordenada, ou o padrão Feed do APG"
+          "description": "An ordered list, or the APG Feed pattern"
         },
         {
           "name": "orientation",
           "type": "'vertical' | 'horizontal'",
           "defaultValue": "vertical",
           "appliesTo": "Timeline",
-          "description": "Uma coluna, ou uma fila que rola e reflui"
+          "description": "A column, or a row that scrolls and reflows"
         },
         {
           "name": "placement",
           "type": "'end' | 'start' | 'alternate'",
           "defaultValue": "end",
           "appliesTo": "Timeline",
-          "description": "De que lado da linha o corpo vive"
+          "description": "Which side of the line the body lives on"
         },
         {
           "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"
+          "description": "What the list is; decides where autoComplete cuts. Never reorders the array"
         },
         {
           "name": "variant",
           "type": "'solid' | 'outline' | 'subtle' | 'plain'",
           "defaultValue": "subtle",
           "appliesTo": "Timeline",
-          "description": "A aparência do marcador, herdada pelos eventos"
+          "description": "The marker appearance, inherited by the events"
         },
         {
           "name": "tone",
-          "type": "'secondary' | 'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "Timeline",
-          "description": "O tom do marcador, herdado pelos eventos"
+          "description": "The marker tone, inherited by the events"
         },
         {
           "name": "size",
           "type": "'sm' | 'md' | 'lg'",
           "defaultValue": "md",
           "appliesTo": "Timeline",
-          "description": "O passo do marcador e do tipo"
+          "description": "The step of the marker and the type"
         },
         {
           "name": "growing",
           "type": "'none' | 'button' | 'scroll'",
           "defaultValue": "none",
           "appliesTo": "Timeline",
-          "description": "Como o fim do carregado pede mais"
+          "description": "How the end of what was loaded asks for more"
         },
         {
           "name": "timeFormat",
           "type": "'absolute' | 'relative'",
           "defaultValue": "absolute",
           "appliesTo": "Timeline",
-          "description": "Como a hora é escrita; relative guarda o absoluto em title"
+          "description": "How the time is written; relative keeps the absolute value in title"
         },
         {
           "name": "locale",
           "type": "string",
           "defaultValue": "—",
           "appliesTo": "Timeline",
-          "description": "BCP 47 para as horas; sem ele, o da língua em vigor (SlottedProvider)"
+          "description": "BCP 47 for the times; without it, the current locale (SlottedProvider)"
         },
         {
           "name": "timeZone",
           "type": "string",
           "defaultValue": "—",
           "appliesTo": "Timeline",
-          "description": "O fuso em que um instante é escrito; sem ele, o do runtime"
+          "description": "The time zone an instant is written in; without it, the runtime’s"
         },
         {
           "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"
+          "description": "The instant a relative reading counts from, in epoch milliseconds; without it, the clock at render"
         },
         {
           "name": "level",
           "type": "2 | 3 | 4 | 5 | 6",
           "defaultValue": "3",
           "appliesTo": "Timeline",
-          "description": "O nível dos headings dos grupos"
+          "description": "The level of the group headings"
         },
         {
           "name": "reflow",
           "type": "boolean",
           "defaultValue": "true",
           "appliesTo": "Timeline",
-          "description": "Se horizontal e alternate refluem abaixo de trinta rems"
+          "description": "Whether horizontal and alternate reflow below thirty rems"
         },
         {
           "name": "autoComplete",
           "type": "boolean",
           "defaultValue": "false",
           "appliesTo": "Timeline",
-          "description": "Marca concluídos os eventos do lado passado do atual, e traceja o futuro"
+          "description": "Marks the events on the past side of the current one complete, and dashes the future"
         },
         {
           "name": "loading",
           "type": "boolean",
           "defaultValue": "false",
           "appliesTo": "Timeline",
-          "description": "Mais eventos a caminho: aria-busy no feed, anel no fim"
+          "description": "More events on the way: aria-busy on the feed, ring at the end"
         },
         {
           "name": "freshCount",
           "type": "number",
           "defaultValue": "0",
           "appliesTo": "Timeline",
-          "description": "Quantos eventos novos a pílula segura"
+          "description": "How many new events the pill holds"
         },
         {
           "name": "count",
           "type": "number",
           "defaultValue": "—",
           "appliesTo": "Timeline",
-          "description": "O total, para aria-setsize; sem ele, -1 enquanto pode crescer"
+          "description": "The total, for aria-setsize; without it, -1 while the list can grow"
         },
         {
           "name": "label",
           "type": "string",
           "defaultValue": "—",
           "appliesTo": "Timeline",
-          "description": "O nome acessível da lista"
+          "description": "The accessible name of the list"
         },
         {
           "name": "labelledBy",
           "type": "string",
           "defaultValue": "—",
           "appliesTo": "Timeline",
-          "description": "O id do elemento que nomeia a lista"
+          "description": "The id of the element that names the list"
         },
         {
           "name": "empty",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "Timeline",
-          "description": "O que fica no lugar da lista vazia"
+          "description": "What takes the place of the empty list"
         },
         {
           "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"
+          "description": "Words over the catalog of the current locale, key by key: the family’s seven messages"
         },
         {
           "name": "label",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineGroup",
-          "description": "O nome do período, como heading"
+          "description": "The period name, as a heading"
         },
         {
           "name": "collapsible",
           "type": "boolean",
           "defaultValue": "false",
           "appliesTo": "TimelineGroup",
-          "description": "Se o heading é um botão que dobra o grupo"
+          "description": "Whether the heading is a button that folds the group"
         },
         {
           "name": "open",
           "type": "boolean",
           "defaultValue": "—",
           "appliesTo": "TimelineGroup",
-          "description": "Presente é controlado, para a vida do grupo"
+          "description": "Present means controlled, for the life of the group"
         },
         {
           "name": "defaultOpen",
           "type": "boolean",
           "defaultValue": "true",
           "appliesTo": "TimelineGroup",
-          "description": "Onde um grupo não controlado começa, lido uma vez"
+          "description": "Where an uncontrolled group starts, read once"
         },
         {
           "name": "level",
           "type": "2 | 3 | 4 | 5 | 6",
           "defaultValue": "—",
           "appliesTo": "TimelineGroup",
-          "description": "O nível deste heading, sobre o da raiz"
+          "description": "The level of this heading, over the root’s"
         },
         {
           "name": "title",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "O nome do evento"
+          "description": "The event name"
         },
         {
           "name": "description",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "A segunda linha"
+          "description": "The second line"
         },
         {
           "name": "actor",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "Quem o fez"
+          "description": "Who did it"
         },
         {
           "name": "time",
           "type": "PlainDateTime | string",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "Quando: instante ISO ou valor de parede"
+          "description": "When: ISO instant or wall-clock value"
         },
         {
           "name": "timeLabel",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "O texto no lugar da hora formatada"
+          "description": "The text in place of the formatted time"
         },
         {
           "name": "marker",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "O que o marcador segura no lugar do ponto"
+          "description": "What the marker holds in place of the dot"
         },
         {
           "name": "opposite",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "O outro lado da linha"
+          "description": "The other side of the line"
         },
         {
           "name": "actions",
           "type": "ReactNode",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "A fila de controlos"
+          "description": "The row of controls"
         },
         {
           "name": "current",
           "type": "boolean",
           "defaultValue": "false",
           "appliesTo": "TimelineItem",
-          "description": "O evento em que o leitor está: aria-current"
+          "description": "The event the reader is at: aria-current"
         },
         {
           "name": "complete",
           "type": "boolean",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "Concluído; vence a derivação"
+          "description": "Complete; wins over the derivation"
         },
         {
           "name": "loading",
           "type": "boolean",
           "defaultValue": "false",
           "appliesTo": "TimelineItem",
-          "description": "Ainda a chegar: o marcador roda o anel"
+          "description": "Still arriving: the marker spins the ring"
         },
         {
           "name": "connector",
           "type": "'solid' | 'dashed' | 'none'",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "A linha depois deste evento"
+          "description": "The line after this event"
         },
         {
           "name": "side",
           "type": "'start' | 'end'",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "O lado em alternate; paridade sem ele"
+          "description": "The side under alternate; parity without it"
         },
         {
           "name": "tone",
           "type": "TimelineTone",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "O tom deste evento, sobre o da raiz"
+          "description": "The tone of this event, over the root’s"
         },
         {
           "name": "variant",
           "type": "TimelineVariant",
           "defaultValue": "—",
           "appliesTo": "TimelineItem",
-          "description": "A aparência deste evento, sobre a da raiz"
+          "description": "The appearance of this event, over the root’s"
         },
         {
           "name": "value",
           "type": "PlainDateTime | string",
           "defaultValue": "—",
           "appliesTo": "TimelineTime",
-          "description": "O valor de máquina, escrito em datetime"
+          "description": "The machine value, written in datetime"
         }
       ],
       "composition": [
@@ -572,61 +573,61 @@
           "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."
+          "description": "Replaces the rendered element. Every data attribute is handed over, and a feed article keeps its role."
         },
         {
           "name": "ref",
           "type": "Ref<HTMLElement>",
           "defaultValue": "—",
-          "appliesTo": "todas as partes",
-          "description": "Alcança o elemento"
+          "appliesTo": "every part",
+          "description": "Reaches the element"
         },
         {
           "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"
+          "appliesTo": "inside a Timeline",
+          "description": "The resolved axes, the messages, and focusItem(index) — moving focus to a feed article, the action a prop does not express"
         },
         {
           "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"
+          "appliesTo": "anywhere",
+          "description": "The time part alone, for an opposite column or a table cell; reads the root when there is one"
         },
         {
           "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"
+          "appliesTo": "Application",
+          "description": "Decides the fourteen once for everything below; a prop on the timeline wins"
         }
       ],
       "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."
+          "when": "On TimelineGroup, before the group opens or closes. The request carries the previous value, the reason — pointer, keyboard or programmatic — and the source event; cancelling it moves nothing."
         },
         {
           "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."
+          "when": "When the reader presses the load-more button, or when the sentinel enters the scroller under growing=\"scroll\". There is no value to hold: the consumer appends to the 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."
+          "when": "When the reader presses the new-events pill. The consumer joins the events it was holding to the array and sets freshCount to 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."
+        "In list the list is an ol and each event an li: the sequence and the set size come from the platform without a line of ARIA, and the keyboard is that of the links and buttons the consumer writes. There is no invented role on a list that does not grow.",
+        "In feed the list is role=\"feed\" and each event an article with tabindex=\"0\", aria-posinset, aria-setsize — the declared total, the loaded count when the list does not grow, -1 when it can grow — aria-labelledby with title, actor and time in that order, and aria-describedby with the description. It is the APG Feed pattern item by item, and an li does not accept the article role: so the element changes with the mode.",
+        "The current event carries aria-current=\"true\" and a visually-hidden element with the current message after the title, because not every screen reader speaks aria-current inside an article. Complete and loading are shapes — a disc with a check, the spinner ring — and not colors only.",
+        "A collapsible group is the Disclosure pattern: the heading contains a button with aria-expanded and aria-controls, and the closed list receives hidden without leaving the DOM. The button name is the period followed by \", Show events\" or \", Hide events\": the expand and collapse messages bring their own separator.",
+        "The time is always a time element with datetime, the value the screen reader and the search engine read; the text follows the declared locale and time zone, and a relative reading leaves the absolute one in title.",
+        "New events are announced in polite once per count change, and stay behind a button until the reader asks for them, so nothing moves under what is being read."
       ]
     }
   },
@@ -708,6 +709,11 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid",
@@ -730,121 +736,121 @@
     {
       "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.",
+      "note": "Every axis on an invoice, moved by the controls below the stage. Switch mode to feed and the same list becomes focusable articles.",
       "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",
+      "source": "<Timeline label=\"Invoice activity\" locale=\"en-US\" timeZone=\"America/Sao_Paulo\">\n  <TimelineItem\n    actor=\"Ana Ribeiro\"\n    description=\"Draft INV-4821 for Solaris Freight.\"\n    time=\"2026-09-08T09:12:00Z\"\n    title=\"Invoice created\"\n  />\n  <TimelineItem current time=\"2026-09-14T10:32:00Z\" title=\"Paid\" 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.",
+      "title": "A feed that is a feed",
+      "note": "With mode=\"feed\" the list is role=\"feed\" and each event an article with aria-posinset, aria-setsize and the label read from the title, the actor and the time. Tab stops on each article; PageDown and PageUp jump between them.",
       "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",
+      "source": "<Timeline count={120} growing=\"button\" label=\"Activity\" 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ó.",
+      "title": "Which side of the line",
+      "note": "end is the default; start mirrors the row; alternate puts the line in the middle and the events take turns. The opposite part always takes the side the body does not take, and below thirty rems alternate falls back to one side.",
       "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",
+      "source": "<Timeline placement=\"alternate\">\n  <TimelineItem\n    opposite={<TimelineTime value=\"2026-06-02T00:00:00Z\" />}\n    title=\"2.12 — Recurring invoices\"\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.",
+      "title": "A row of events",
+      "note": "horizontal turns the line on its side, with equal columns that scroll on the inline axis when there are more events than width. Below thirty rems of its own width it becomes a column again; reflow={false} turns that off.",
       "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.",
+      "title": "The order is declared, never reversed",
+      "note": "order says what the list is and does not reorder the array: the consumer sorts. The order decides where autoComplete cuts — in oldest-first the past is before the current event, in newest-first after it.",
       "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",
+      "source": "<Timeline autoComplete order=\"newest-first\">\n  <TimelineItem title=\"Delivered\" />\n  <TimelineItem current title=\"In transit\" />\n  <TimelineItem title=\"Packed\" />\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.",
+      "title": "What an event can be",
+      "note": "Each state is a shape as well as a color: pending is the shape of the variant, current is a filled disc with a ring, complete is a filled disc with a cut-out check, loading is the spinner at the size of the dot. autoComplete derives complete for the past side of the current event and dashes the future.",
       "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",
+      "source": "<Timeline autoComplete tone=\"accent\">\n  <TimelineItem title=\"Order confirmed\" />\n  <TimelineItem current title=\"In transit\" />\n  <TimelineItem title=\"Out for delivery\" />\n  <TimelineItem loading title=\"Delivered\" />\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.",
+      "title": "Appearance and size",
+      "note": "variant on the root or per event: outline separates the marker from the line in any scheme, solid fills, subtle is a background with a thin edge, plain is the dot without a ring for a row of small events. tone paints the marker with one of the five tones; size picks the step.",
       "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",
+      "source": "<Timeline size=\"sm\" variant=\"plain\">\n  <TimelineItem title=\"Commit 4f2a\" />\n  <TimelineItem title=\"Tests failed\" 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.",
+      "title": "Grouping by period",
+      "note": "The consumer groups, because the period belongs to the domain. A group is a heading of the declared level over its own list; collapsible turns the heading into a button with aria-expanded, and the closed list stays in the DOM with 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",
+      "source": "<Timeline level={3}>\n  <TimelineGroup collapsible label=\"Today\">\n    <TimelineItem title=\"Paid\" />\n  </TimelineGroup>\n  <TimelineGroup collapsible defaultOpen={false} label=\"Last week\">\n    <TimelineItem title=\"Sent\" />\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.",
+      "title": "Loading more",
+      "note": "growing=\"button\" puts a button at the end of what was loaded and asks with pointer or keyboard; growing=\"scroll\" asks with scroll when the end enters the scroller. While loading, the end shows the ring and the root is 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.",
+      "title": "New events while the reader reads",
+      "note": "A feed that inserts at the top pushes what is being read. With freshCount, the family holds the new events behind a pill, announces the count in polite, and onReveal is the moment the consumer joins them to the array. The pill leaves with a transition, and focus that was on it moves to the first revealed event.",
       "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.",
+      "title": "Machine time, explicit time zone",
+      "note": "time accepts an ISO instant with a zone designator, written in the declared timeZone, or a wall-clock value without a zone, written as it is. datetime always carries the machine value; timeFormat=\"relative\" writes \"2 hours ago\" and keeps the absolute value in 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",
+      "source": "<SlottedProvider locale=\"en-US\">\n  <TimelineDefaultsProvider now={Date.now()} timeZone=\"America/Sao_Paulo\">\n    <Timeline timeFormat=\"relative\">\n      <TimelineItem time=\"2026-09-14T10:32:00Z\" title=\"Paid\" />\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.",
+      "title": "Content the family did not choose",
+      "note": "A nine-word title, an unbreakable reference, an Arabic title, an avatar in the marker, an event without a title. The marker never leaves the first line and the line never leaves the center.",
       "language": "tsx",
-      "source": "<TimelineItem\n  marker={<Avatar name=\"Ana Ribeiro\" />}\n  title=\"Aprovou a cotação revista do programa de remessas\"\n/>;\n",
+      "source": "<TimelineItem\n  marker={<Avatar name=\"Ana Ribeiro\" />}\n  title=\"Approved the revised quote for the shipment program\"\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.",
+      "title": "Composition",
+      "note": "The title is whatever the consumer gives it — a Link — and the actions are buttons of the button family. Expandable content is a Collapsible inside the body. useTimeline() gives focusItem for the feed, and TimelineDefaultsProvider decides once for the application.",
       "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",
+      "source": "<TimelineItem\n  actions={<Button size=\"sm\">Retry</Button>}\n  title={<Link href=\"/invoices/4821\">Payment failed</Link>}\n>\n  <Collapsible variant=\"plain\">\n    <Collapsible.Trigger>View the issuer response</Collapsible.Trigger>\n    <Collapsible.Panel>Code 05: do not honor.</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.",
+      "title": "No events",
+      "note": "Without items and without loading, the empty part takes the place of the list with the family message or with whatever the consumer projects — a result-state, for example.",
       "language": "tsx",
-      "source": "<Timeline empty={<ResultState status=\"empty\" title=\"Ainda sem eventos\" />} />;\n",
+      "source": "<Timeline empty={<ResultState status=\"empty\" title=\"No events yet\" />} />;\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.",
+      "title": "Keyboard",
+      "note": "In list the keyboard is the platform’s: Tab goes through the links and buttons of the body. In feed, Tab stops on each article, PageDown and PageUp jump between articles, Control+End and Control+Home leave the feed for the next or previous focusable element.",
       "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",
+      "source": "// \"Paid, Solaris Freight, 2 hours ago, article 1 of 3\" — title, actor and time,\n// and the position, because each article carries aria-labelledby and aria-posinset.\n<Timeline label=\"Activity\" mode=\"feed\">\n  {events}\n</Timeline>;\n",
       "verdict": "excerpt"
     }
   ]