@slotted/react 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/docs/timeline.md

@@ -21,14 +21,14 @@ import {
 Excerpt — not a complete module
 
 ```tsx
-<Timeline label="Atividade da fatura" locale="pt-BR" timeZone="America/Sao_Paulo">
+<Timeline label="Invoice activity" locale="en-US" timeZone="America/Sao_Paulo">
   <TimelineItem
     actor="Ana Ribeiro"
-    description="Rascunho INV-4821 para Solaris Fretes."
+    description="Draft INV-4821 for Solaris Freight."
     time="2026-09-08T09:12:00Z"
-    title="Fatura criada"
+    title="Invoice created"
   />
-  <TimelineItem current time="2026-09-14T10:32:00Z" title="Paga" tone="success" />
+  <TimelineItem current time="2026-09-14T10:32:00Z" title="Paid" tone="success" />
 </Timeline>;
 ```
 
@@ -38,13 +38,13 @@ Excerpt — not a complete module
 | --- | --- | --- |
 | `root` | div | yes |
 | `fresh` | button | no |
-| `list` | ol, ou div com role="feed" | yes |
-| `group` | li, ou div no feed | no |
-| `group-label` | h2 a h6, por level | no |
+| `list` | ol, or div with role="feed" | yes |
+| `group` | li, or div in the feed | no |
+| `group-label` | h2 to h6, by level | no |
 | `group-trigger` | button | no |
 | `group-indicator` | span | no |
-| `group-list` | ol, ou div no feed | no |
-| `item` | li, ou article no feed | yes |
+| `group-list` | ol, or div in the feed | no |
+| `item` | li, or article in the feed | yes |
 | `opposite` | div | no |
 | `rail` | div | yes |
 | `marker` | span | yes |
@@ -55,69 +55,69 @@ Excerpt — not a complete module
 | `time` | time | no |
 | `description` | div | no |
 | `actions` | div | no |
-| `more` | button, ou div enquanto carrega | no |
+| `more` | button, or div while loading | no |
 | `empty` | div | no |
 
 ## Props
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `mode` | `'list' \| 'feed'` | list | Timeline | Uma lista ordenada, ou o padrão Feed do APG |
-| `orientation` | `'vertical' \| 'horizontal'` | vertical | Timeline | Uma coluna, ou uma fila que rola e reflui |
-| `placement` | `'end' \| 'start' \| 'alternate'` | end | Timeline | De que lado da linha o corpo vive |
-| `order` | `'oldest-first' \| 'newest-first'` | oldest-first | Timeline | O que a lista é; decide onde autoComplete corta. Nunca reordena o array |
-| `variant` | `'solid' \| 'outline' \| 'subtle' \| 'plain'` | subtle | Timeline | A aparência do marcador, herdada pelos eventos |
-| `tone` | `'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger'` | secondary | Timeline | O tom do marcador, herdado pelos eventos |
-| `size` | `'sm' \| 'md' \| 'lg'` | md | Timeline | O passo do marcador e do tipo |
-| `growing` | `'none' \| 'button' \| 'scroll'` | none | Timeline | Como o fim do carregado pede mais |
-| `timeFormat` | `'absolute' \| 'relative'` | absolute | Timeline | Como a hora é escrita; relative guarda o absoluto em title |
-| `locale` | `string` | — | Timeline | BCP 47 para as horas; sem ele, o da língua em vigor (SlottedProvider) |
-| `timeZone` | `string` | — | Timeline | O fuso em que um instante é escrito; sem ele, o do runtime |
-| `now` | `number` | — | Timeline | O instante de que uma leitura relativa conta, em milissegundos de época; sem ele, o relógio na renderização |
-| `level` | `2 \| 3 \| 4 \| 5 \| 6` | 3 | Timeline | O nível dos headings dos grupos |
-| `reflow` | `boolean` | true | Timeline | Se horizontal e alternate refluem abaixo de trinta rems |
-| `autoComplete` | `boolean` | false | Timeline | Marca concluídos os eventos do lado passado do atual, e traceja o futuro |
-| `loading` | `boolean` | false | Timeline | Mais eventos a caminho: aria-busy no feed, anel no fim |
-| `freshCount` | `number` | 0 | Timeline | Quantos eventos novos a pílula segura |
-| `count` | `number` | — | Timeline | O total, para aria-setsize; sem ele, -1 enquanto pode crescer |
-| `label` | `string` | — | Timeline | O nome acessível da lista |
-| `labelledBy` | `string` | — | Timeline | O id do elemento que nomeia a lista |
-| `empty` | `ReactNode` | — | Timeline | O que fica no lugar da lista vazia |
-| `messages` | `PartialMessages<TimelineMessages>` | — | Timeline | Palavras sobre o catálogo da língua em vigor, chave a chave: as sete mensagens da família |
-| `label` | `ReactNode` | — | TimelineGroup | O nome do período, como heading |
-| `collapsible` | `boolean` | false | TimelineGroup | Se o heading é um botão que dobra o grupo |
-| `open` | `boolean` | — | TimelineGroup | Presente é controlado, para a vida do grupo |
-| `defaultOpen` | `boolean` | true | TimelineGroup | Onde um grupo não controlado começa, lido uma vez |
-| `level` | `2 \| 3 \| 4 \| 5 \| 6` | — | TimelineGroup | O nível deste heading, sobre o da raiz |
-| `title` | `ReactNode` | — | TimelineItem | O nome do evento |
-| `description` | `ReactNode` | — | TimelineItem | A segunda linha |
-| `actor` | `ReactNode` | — | TimelineItem | Quem o fez |
-| `time` | `PlainDateTime \| string` | — | TimelineItem | Quando: instante ISO ou valor de parede |
-| `timeLabel` | `ReactNode` | — | TimelineItem | O texto no lugar da hora formatada |
-| `marker` | `ReactNode` | — | TimelineItem | O que o marcador segura no lugar do ponto |
-| `opposite` | `ReactNode` | — | TimelineItem | O outro lado da linha |
-| `actions` | `ReactNode` | — | TimelineItem | A fila de controlos |
-| `current` | `boolean` | false | TimelineItem | O evento em que o leitor está: aria-current |
-| `complete` | `boolean` | — | TimelineItem | Concluído; vence a derivação |
-| `loading` | `boolean` | false | TimelineItem | Ainda a chegar: o marcador roda o anel |
-| `connector` | `'solid' \| 'dashed' \| 'none'` | — | TimelineItem | A linha depois deste evento |
-| `side` | `'start' \| 'end'` | — | TimelineItem | O lado em alternate; paridade sem ele |
-| `tone` | `TimelineTone` | — | TimelineItem | O tom deste evento, sobre o da raiz |
-| `variant` | `TimelineVariant` | — | TimelineItem | A aparência deste evento, sobre a da raiz |
-| `value` | `PlainDateTime \| string` | — | TimelineTime | O valor de máquina, escrito em datetime |
-| `render` | `(props) => ReactNode` | — | Timeline, TimelineGroup, TimelineItem | Substitui o elemento renderizado. Todo atributo de dados é entregue, e um article do feed leva o seu role. |
-| `ref` | `Ref<HTMLElement>` | — | todas as partes | Alcança o elemento |
-| `useTimeline()` | `() => TimelineContextValue` | — | dentro de uma Timeline | 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 |
-| `TimelineTime` | `{ value, format, locale, timeZone, now }` | — | em qualquer sítio | A parte time sozinha, para uma coluna opposite ou uma célula de tabela; lê a raiz quando há uma |
-| `TimelineDefaultsProvider` | `mode \| orientation \| placement \| order \| variant \| tone \| size \| growing \| timeFormat \| timeZone \| now \| level` | — | Aplicação | Decide os catorze uma vez para tudo por baixo; uma prop na linha do tempo ganha |
+| `mode` | `'list' \| 'feed'` | list | Timeline | An ordered list, or the APG Feed pattern |
+| `orientation` | `'vertical' \| 'horizontal'` | vertical | Timeline | A column, or a row that scrolls and reflows |
+| `placement` | `'end' \| 'start' \| 'alternate'` | end | Timeline | Which side of the line the body lives on |
+| `order` | `'oldest-first' \| 'newest-first'` | oldest-first | Timeline | What the list is; decides where autoComplete cuts. Never reorders the array |
+| `variant` | `'solid' \| 'outline' \| 'subtle' \| 'plain'` | subtle | Timeline | The marker appearance, inherited by the events |
+| `tone` | `'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | Timeline | The marker tone, inherited by the events |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | Timeline | The step of the marker and the type |
+| `growing` | `'none' \| 'button' \| 'scroll'` | none | Timeline | How the end of what was loaded asks for more |
+| `timeFormat` | `'absolute' \| 'relative'` | absolute | Timeline | How the time is written; relative keeps the absolute value in title |
+| `locale` | `string` | — | Timeline | BCP 47 for the times; without it, the current locale (SlottedProvider) |
+| `timeZone` | `string` | — | Timeline | The time zone an instant is written in; without it, the runtime’s |
+| `now` | `number` | — | Timeline | The instant a relative reading counts from, in epoch milliseconds; without it, the clock at render |
+| `level` | `2 \| 3 \| 4 \| 5 \| 6` | 3 | Timeline | The level of the group headings |
+| `reflow` | `boolean` | true | Timeline | Whether horizontal and alternate reflow below thirty rems |
+| `autoComplete` | `boolean` | false | Timeline | Marks the events on the past side of the current one complete, and dashes the future |
+| `loading` | `boolean` | false | Timeline | More events on the way: aria-busy on the feed, ring at the end |
+| `freshCount` | `number` | 0 | Timeline | How many new events the pill holds |
+| `count` | `number` | — | Timeline | The total, for aria-setsize; without it, -1 while the list can grow |
+| `label` | `string` | — | Timeline | The accessible name of the list |
+| `labelledBy` | `string` | — | Timeline | The id of the element that names the list |
+| `empty` | `ReactNode` | — | Timeline | What takes the place of the empty list |
+| `messages` | `PartialMessages<TimelineMessages>` | — | Timeline | Words over the catalog of the current locale, key by key: the family’s seven messages |
+| `label` | `ReactNode` | — | TimelineGroup | The period name, as a heading |
+| `collapsible` | `boolean` | false | TimelineGroup | Whether the heading is a button that folds the group |
+| `open` | `boolean` | — | TimelineGroup | Present means controlled, for the life of the group |
+| `defaultOpen` | `boolean` | true | TimelineGroup | Where an uncontrolled group starts, read once |
+| `level` | `2 \| 3 \| 4 \| 5 \| 6` | — | TimelineGroup | The level of this heading, over the root’s |
+| `title` | `ReactNode` | — | TimelineItem | The event name |
+| `description` | `ReactNode` | — | TimelineItem | The second line |
+| `actor` | `ReactNode` | — | TimelineItem | Who did it |
+| `time` | `PlainDateTime \| string` | — | TimelineItem | When: ISO instant or wall-clock value |
+| `timeLabel` | `ReactNode` | — | TimelineItem | The text in place of the formatted time |
+| `marker` | `ReactNode` | — | TimelineItem | What the marker holds in place of the dot |
+| `opposite` | `ReactNode` | — | TimelineItem | The other side of the line |
+| `actions` | `ReactNode` | — | TimelineItem | The row of controls |
+| `current` | `boolean` | false | TimelineItem | The event the reader is at: aria-current |
+| `complete` | `boolean` | — | TimelineItem | Complete; wins over the derivation |
+| `loading` | `boolean` | false | TimelineItem | Still arriving: the marker spins the ring |
+| `connector` | `'solid' \| 'dashed' \| 'none'` | — | TimelineItem | The line after this event |
+| `side` | `'start' \| 'end'` | — | TimelineItem | The side under alternate; parity without it |
+| `tone` | `TimelineTone` | — | TimelineItem | The tone of this event, over the root’s |
+| `variant` | `TimelineVariant` | — | TimelineItem | The appearance of this event, over the root’s |
+| `value` | `PlainDateTime \| string` | — | TimelineTime | The machine value, written in datetime |
+| `render` | `(props) => ReactNode` | — | Timeline, TimelineGroup, TimelineItem | Replaces the rendered element. Every data attribute is handed over, and a feed article keeps its role. |
+| `ref` | `Ref<HTMLElement>` | — | every part | Reaches the element |
+| `useTimeline()` | `() => TimelineContextValue` | — | inside a Timeline | The resolved axes, the messages, and focusItem(index) — moving focus to a feed article, the action a prop does not express |
+| `TimelineTime` | `{ value, format, locale, timeZone, now }` | — | anywhere | The time part alone, for an opposite column or a table cell; reads the root when there is one |
+| `TimelineDefaultsProvider` | `mode \| orientation \| placement \| order \| variant \| tone \| size \| growing \| timeFormat \| timeZone \| now \| level` | — | Application | Decides the fourteen once for everything below; a prop on the timeline wins |
 
 ## Events
 
 | Name | Payload | When |
 | --- | --- | --- |
-| `onOpenChange` | `(open: boolean, request: ChangeRequest<boolean>)` | 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. |
-| `onLoadMore` | `(reason: "pointer" \| "keyboard" \| "scroll", event?)` | 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. |
-| `onReveal` | `(reason: "pointer" \| "keyboard", event?)` | 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. |
+| `onOpenChange` | `(open: boolean, request: ChangeRequest<boolean>)` | 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. |
+| `onLoadMore` | `(reason: "pointer" \| "keyboard" \| "scroll", event?)` | 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. |
+| `onReveal` | `(reason: "pointer" \| "keyboard", event?)` | When the reader presses the new-events pill. The consumer joins the events it was holding to the array and sets freshCount to zero. |
 
 ## Axes and defaults
 
@@ -128,7 +128,7 @@ Excerpt — not a complete module
 | `placement` | `end`, `start`, `alternate` | `end` |
 | `order` | `oldest-first`, `newest-first` | `oldest-first` |
 | `variant` | `solid`, `outline`, `subtle`, `plain` | `subtle` |
-| `tone` | `secondary`, `accent`, `success`, `warning`, `danger` | `secondary` |
+| `tone` | `secondary`, `accent`, `info`, `success`, `warning`, `danger` | `secondary` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `connector` | `solid`, `dashed`, `none` | — |
 | `growing` | `none`, `button`, `scroll` | `none` |
@@ -137,36 +137,36 @@ Excerpt — not a complete module
 
 ## Rules
 
-- 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.
 
 ## 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`
+`--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-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`, `--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
 
-### Um feed que é um feed
+### A feed that is a feed
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
-<Timeline count={120} growing="button" label="Atividade" mode="feed" onLoadMore={load}>
+<Timeline count={120} growing="button" label="Activity" mode="feed" onLoadMore={load}>
   {events.map((event) => (
     <TimelineItem key={event.id} {...event} />
   ))}
 </Timeline>;
 ```
 
-### De que lado da linha
+### Which side of the line
 
-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ó.
+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.
 
 Excerpt — not a complete module
 
@@ -174,14 +174,14 @@ Excerpt — not a complete module
 <Timeline placement="alternate">
   <TimelineItem
     opposite={<TimelineTime value="2026-06-02T00:00:00Z" />}
-    title="2.12 — Faturas recorrentes"
+    title="2.12 — Recurring invoices"
   />
 </Timeline>;
 ```
 
-### Uma fila de eventos
+### A row of events
 
-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.
+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.
 
 Excerpt — not a complete module
 
@@ -191,68 +191,68 @@ Excerpt — not a complete module
 </Timeline>;
 ```
 
-### A ordem é declarada, nunca invertida
+### The order is declared, never reversed
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
 <Timeline autoComplete order="newest-first">
-  <TimelineItem title="Entregue" />
-  <TimelineItem current title="Em trânsito" />
-  <TimelineItem title="Embalado" />
+  <TimelineItem title="Delivered" />
+  <TimelineItem current title="In transit" />
+  <TimelineItem title="Packed" />
 </Timeline>;
 ```
 
-### O que um evento pode ser
+### What an event can be
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
 <Timeline autoComplete tone="accent">
-  <TimelineItem title="Pedido confirmado" />
-  <TimelineItem current title="Em trânsito" />
-  <TimelineItem title="Saiu para entrega" />
-  <TimelineItem loading title="Entregue" />
+  <TimelineItem title="Order confirmed" />
+  <TimelineItem current title="In transit" />
+  <TimelineItem title="Out for delivery" />
+  <TimelineItem loading title="Delivered" />
 </Timeline>;
 ```
 
-### Aparência e tamanho
+### Appearance and size
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
 <Timeline size="sm" variant="plain">
   <TimelineItem title="Commit 4f2a" />
-  <TimelineItem title="Falha nos testes" tone="danger" variant="solid" />
+  <TimelineItem title="Tests failed" tone="danger" variant="solid" />
 </Timeline>;
 ```
 
-### Agrupar por período
+### Grouping by period
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
 <Timeline level={3}>
-  <TimelineGroup collapsible label="Hoje">
-    <TimelineItem title="Paga" />
+  <TimelineGroup collapsible label="Today">
+    <TimelineItem title="Paid" />
   </TimelineGroup>
-  <TimelineGroup collapsible defaultOpen={false} label="Semana passada">
-    <TimelineItem title="Enviada" />
+  <TimelineGroup collapsible defaultOpen={false} label="Last week">
+    <TimelineItem title="Sent" />
   </TimelineGroup>
 </Timeline>;
 ```
 
-### Carregar mais
+### Loading more
 
-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.
+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.
 
 Excerpt — not a complete module
 
@@ -262,9 +262,9 @@ Excerpt — not a complete module
 </Timeline>;
 ```
 
-### Eventos novos enquanto o leitor lê
+### New events while the reader reads
 
-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.
+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.
 
 Excerpt — not a complete module
 
@@ -274,73 +274,73 @@ Excerpt — not a complete module
 </Timeline>;
 ```
 
-### Hora de máquina, fuso explícito
+### Machine time, explicit time zone
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
-<SlottedProvider locale="pt-BR">
+<SlottedProvider locale="en-US">
   <TimelineDefaultsProvider now={Date.now()} timeZone="America/Sao_Paulo">
     <Timeline timeFormat="relative">
-      <TimelineItem time="2026-09-14T10:32:00Z" title="Paga" />
+      <TimelineItem time="2026-09-14T10:32:00Z" title="Paid" />
     </Timeline>
   </TimelineDefaultsProvider>
 </SlottedProvider>;
 ```
 
-### Conteúdo que a família não escolheu
+### Content the family did not choose
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
 <TimelineItem
   marker={<Avatar name="Ana Ribeiro" />}
-  title="Aprovou a cotação revista do programa de remessas"
+  title="Approved the revised quote for the shipment program"
 />;
 ```
 
-### Composição
+### Composition
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
 <TimelineItem
-  actions={<Button size="sm">Repetir</Button>}
-  title={<Link href="/faturas/4821">Pagamento falhou</Link>}
+  actions={<Button size="sm">Retry</Button>}
+  title={<Link href="/invoices/4821">Payment failed</Link>}
 >
   <Collapsible variant="plain">
-    <Collapsible.Trigger>Ver resposta do emissor</Collapsible.Trigger>
-    <Collapsible.Panel>Código 05: não honrar.</Collapsible.Panel>
+    <Collapsible.Trigger>View the issuer response</Collapsible.Trigger>
+    <Collapsible.Panel>Code 05: do not honor.</Collapsible.Panel>
   </Collapsible>
 </TimelineItem>;
 ```
 
-### Sem eventos
+### No events
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
-<Timeline empty={<ResultState status="empty" title="Ainda sem eventos" />} />;
+<Timeline empty={<ResultState status="empty" title="No events yet" />} />;
 ```
 
-### Teclado
+### Keyboard
 
-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.
+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.
 
 Excerpt — not a complete module
 
 ```tsx
-// "Paga, Solaris Fretes, há 2 horas, artigo 1 de 3" — título, ator e hora,
-// e a posição, porque cada artigo leva aria-labelledby e aria-posinset.
-<Timeline label="Atividade" mode="feed">
+// "Paid, Solaris Freight, 2 hours ago, article 1 of 3" — title, actor and time,
+// and the position, because each article carries aria-labelledby and aria-posinset.
+<Timeline label="Activity" mode="feed">
   {events}
 </Timeline>;
 ```

package/dist/docs/toast.json

@@ -27,6 +27,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -253,7 +254,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "accent",
           "appliesTo": "toast.show",
           "description": "Which of the five semantic colours the message speaks in, and which mark it draws"
@@ -506,6 +507,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",

package/dist/docs/toast.md

@@ -73,7 +73,7 @@ export default function ToastBasic() {
 | `pauseWhenHidden` | `boolean` | true | ToastRegion | A hidden tab holds every clock. A five-second message shown to a tab nobody is looking at was never shown |
 | `hotkey` | `string` | F6 | ToastRegion | The key that moves focus into the region, written the way a reader says it — F6, Alt+T, Shift+F8 |
 | `messages` | `Partial<ToastMessages>` | — | ToastRegion | Words laid over the language in force, key by key: the name a reader finds the region by in their landmark list, and what the hotkey lands in (label), and what each close control announces (close) |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | accent | toast.show | Which of the five semantic colours the message speaks in, and which mark it draws |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | accent | toast.show | Which of the five semantic colours the message speaks in, and which mark it draws |
 | `variant` | `'raised' \| 'soft' \| 'solid'` | raised | toast.show | How that colour is painted. raised keeps the neutral surface and puts the tone in the mark, which is what a box floating over unknown content should do |
 | `priority` | `'polite' \| 'assertive'` | polite | toast.show | How loudly the announcer says it. Never inferred from the tone: a danger message a background job produced must not cut into a sentence |
 | `dismissible` | `boolean` | true | toast.show | Renders the control that closes the message. A touch reader has no Escape key, so the pointer needs a target |
@@ -110,7 +110,7 @@ export default function ToastBasic() {
 | `placement` | `top-start`, `top`, `top-end`, `bottom-start`, `bottom`, `bottom-end` | `bottom-end` |
 | `attach` | `portal`, `viewport`, `inline` | `portal` |
 | `stacking` | `list`, `stack` | `list` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `raised`, `soft`, `solid` | `raised` |
 | `priority` | `polite`, `assertive` | `polite` |
 | `dismissible` | `true`, `false` | `true` |
@@ -133,7 +133,7 @@ export default function ToastBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-toast-actions-gap`, `--slotted-toast-border-color`, `--slotted-toast-border-width`, `--slotted-toast-close-radius`, `--slotted-toast-close-size`, `--slotted-toast-column-gap`, `--slotted-toast-font-family`, `--slotted-toast-gap`, `--slotted-toast-measure`, `--slotted-toast-offset`, `--slotted-toast-padding-block`, `--slotted-toast-padding-inline`, `--slotted-toast-progress-size`, `--slotted-toast-radius`, `--slotted-toast-row-gap`, `--slotted-toast-shadow`, `--slotted-toast-stack-fade`, `--slotted-toast-stack-step`, `--slotted-toast-state-layer-active`, `--slotted-toast-state-layer-hover`, `--slotted-toast-surface`, `--slotted-toast-text`, `--slotted-toast-text-gap`, `--slotted-toast-text-muted`, `--slotted-toast-title-font-family`, `--slotted-toast-title-font-weight`, `--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-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`, `--slotted-z-index-toast`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-toast-actions-gap`, `--slotted-toast-border-color`, `--slotted-toast-border-width`, `--slotted-toast-close-radius`, `--slotted-toast-close-size`, `--slotted-toast-column-gap`, `--slotted-toast-font-family`, `--slotted-toast-gap`, `--slotted-toast-measure`, `--slotted-toast-offset`, `--slotted-toast-padding-block`, `--slotted-toast-padding-inline`, `--slotted-toast-progress-size`, `--slotted-toast-radius`, `--slotted-toast-row-gap`, `--slotted-toast-shadow`, `--slotted-toast-stack-fade`, `--slotted-toast-stack-step`, `--slotted-toast-state-layer-active`, `--slotted-toast-state-layer-hover`, `--slotted-toast-surface`, `--slotted-toast-text`, `--slotted-toast-text-gap`, `--slotted-toast-text-muted`, `--slotted-toast-title-font-family`, `--slotted-toast-title-font-weight`, `--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-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`, `--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`, `--slotted-z-index-toast`
 
 ## Examples