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

package/docs/timeline.md

@@ -23,23 +23,23 @@ import {
 } from '@slotted/angular/timeline';
 ```
 
-Selector: `[slTimeline], ol[slTimelineList] ou div[slTimelineList], li[slTimelineGroup] ou div[slTimelineGroup], ol[slTimelineGroupList] ou div[slTimelineGroupList], li[slTimelineItem] ou article[slTimelineItem], time[slTimelineTime], [slTimelineTitle], [slTimelineActor], [slTimelineDescription], [slTimelineActions], [slTimelineOpposite], [slTimelineMarker], [slTimelineEmpty]` · exportAs: `slTimeline, slTimelineList, slTimelineGroup, slTimelineGroupList, slTimelineItem, slTimelineTime`
+Selector: `[slTimeline], ol[slTimelineList] or div[slTimelineList], li[slTimelineGroup] or div[slTimelineGroup], ol[slTimelineGroupList] or div[slTimelineGroupList], li[slTimelineItem] or article[slTimelineItem], time[slTimelineTime], [slTimelineTitle], [slTimelineActor], [slTimelineDescription], [slTimelineActions], [slTimelineOpposite], [slTimelineMarker], [slTimelineEmpty]` · exportAs: `slTimeline, slTimelineList, slTimelineGroup, slTimelineGroupList, slTimelineItem, slTimelineTime`
 
 ## Minimal example
 
 Excerpt — not a complete module
 
 ```html
-<div slTimeline label="Atividade da fatura" locale="pt-BR" timeZone="America/Sao_Paulo">
+<div slTimeline label="Invoice activity" locale="en-US" timeZone="America/Sao_Paulo">
   <ol slTimelineList>
     <li
       slTimelineItem
       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"
     ></li>
-    <li slTimelineItem current time="2026-09-14T10:32:00Z" title="Paga" tone="success"></li>
+    <li slTimelineItem current time="2026-09-14T10:32:00Z" title="Paid" tone="success"></li>
   </ol>
 </div>
 ```
@@ -50,13 +50,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 |
@@ -67,67 +67,67 @@ 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 (provideSlotted) |
-| `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 |
-| `aria-label` | `atributo` | — | ol[slTimelineList] | Um nome escrito na lista sobrevive ao da raiz |
-| `messages` | `PartialMessages<TimelineMessages>` | — | Timeline | Palavras sobre o catálogo da língua em vigor, chave a chave: as sete mensagens da família |
-| `label` | `string` | — | TimelineGroup | O nome do período, como heading |
-| `collapsible` | `boolean` | false | TimelineGroup | Se o heading é um botão que dobra o grupo |
-| `open` | `model<boolean \| undefined>` | — | TimelineGroup | [(open)]: 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` | `string` | — | TimelineItem | O nome do evento; ou um elemento [slTimelineTitle] projetado |
-| `description` | `string` | — | TimelineItem | A segunda linha; ou [slTimelineDescription] projetado |
-| `actor` | `string` | — | TimelineItem | Quem o fez; ou [slTimelineActor] projetado |
-| `time` | `PlainDateTime \| string` | — | TimelineItem | Quando: instante ISO ou valor de parede |
-| `timeLabel` | `string` | — | TimelineItem | O texto no lugar da hora formatada |
-| `[slTimelineMarker]` | `projeção` | — | TimelineItem | O que o marcador segura no lugar do ponto |
-| `[slTimelineOpposite]` | `projeção` | — | TimelineItem | O outro lado da linha |
-| `[slTimelineActions]` | `projeção` | — | 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 |
-| `exportAs` | `slTimeline \| slTimelineList \| slTimelineGroup \| slTimelineItem \| slTimelineTime` | — | cada parte | Alcança a instância a partir da template: #list="slTimelineList" e list.focusItem(2) move o foco a um artigo do feed |
-| `ng-content` | `[slTimelineTitle] \| [slTimelineActor] \| [slTimelineDescription] \| [slTimelineActions] \| [slTimelineOpposite] \| [slTimelineMarker] \| [slTimelineEmpty]` | — | TimelineItem, Timeline | Cada parte do corpo como elemento do consumidor, com data-part e id escritos pela diretiva |
-| `time[slTimelineTime]` | `{ 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 |
-| `provideTimelineDefaults()` | `mode \| orientation \| placement \| order \| variant \| tone \| size \| growing \| timeFormat \| timeZone \| now \| level` | — | Injector | Decide os catorze uma vez para tudo por baixo; um input 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 (provideSlotted) |
+| `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 |
+| `aria-label` | `attribute` | — | ol[slTimelineList] | A name written on the list wins over the root’s |
+| `messages` | `PartialMessages<TimelineMessages>` | — | Timeline | Words over the catalog of the current locale, key by key: the family’s seven messages |
+| `label` | `string` | — | TimelineGroup | The period name, as a heading |
+| `collapsible` | `boolean` | false | TimelineGroup | Whether the heading is a button that folds the group |
+| `open` | `model<boolean \| undefined>` | — | TimelineGroup | [(open)]: 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` | `string` | — | TimelineItem | The event name; or a projected [slTimelineTitle] element |
+| `description` | `string` | — | TimelineItem | The second line; or a projected [slTimelineDescription] |
+| `actor` | `string` | — | TimelineItem | Who did it; or a projected [slTimelineActor] |
+| `time` | `PlainDateTime \| string` | — | TimelineItem | When: ISO instant or wall-clock value |
+| `timeLabel` | `string` | — | TimelineItem | The text in place of the formatted time |
+| `[slTimelineMarker]` | `projection` | — | TimelineItem | What the marker holds in place of the dot |
+| `[slTimelineOpposite]` | `projection` | — | TimelineItem | The other side of the line |
+| `[slTimelineActions]` | `projection` | — | 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 |
+| `exportAs` | `slTimeline \| slTimelineList \| slTimelineGroup \| slTimelineItem \| slTimelineTime` | — | every part | Reaches the instance from the template: #list="slTimelineList" and list.focusItem(2) moves focus to a feed article |
+| `ng-content` | `[slTimelineTitle] \| [slTimelineActor] \| [slTimelineDescription] \| [slTimelineActions] \| [slTimelineOpposite] \| [slTimelineMarker] \| [slTimelineEmpty]` | — | TimelineItem, Timeline | Each part of the body as a consumer element, with data-part and id written by the directive |
+| `time[slTimelineTime]` | `{ 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 |
+| `provideTimelineDefaults()` | `mode \| orientation \| placement \| order \| variant \| tone \| size \| growing \| timeFormat \| timeZone \| now \| level` | — | Injector | Decides the fourteen once for everything below; an input on the timeline wins |
 
 ## Events
 
 | Name | Payload | When |
 | --- | --- | --- |
-| `(openRequest)` | `ChangeRequest<boolean>` | Em slTimelineGroup, antes de o grupo abrir ou fechar; [(open)] é a outra metade, o valor. O pedido leva o valor anterior, a razão — pointer, keyboard ou programmatic — e o evento de origem; cancelá-lo não move nada. |
-| `(loadMoreRequest)` | `{ reason: "pointer" \| "keyboard" \| "scroll"; event?: 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. |
-| `(revealRequest)` | `{ reason: "pointer" \| "keyboard"; event?: 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. |
+| `(openRequest)` | `ChangeRequest<boolean>` | On slTimelineGroup, before the group opens or closes; [(open)] is the other half, the value. The request carries the previous value, the reason — pointer, keyboard or programmatic — and the source event; cancelling it moves nothing. |
+| `(loadMoreRequest)` | `{ reason: "pointer" \| "keyboard" \| "scroll"; event?: 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. |
+| `(revealRequest)` | `{ reason: "pointer" \| "keyboard"; event?: 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
 
@@ -138,7 +138,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` |
@@ -147,22 +147,22 @@ 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
 
@@ -171,7 +171,7 @@ Excerpt — not a complete module
   slTimeline
   mode="feed"
   growing="button"
-  label="Atividade"
+  label="Activity"
   [count]="120"
   (loadMoreRequest)="load()"
 >
@@ -183,73 +183,73 @@ Excerpt — not a complete module
 </div>
 ```
 
-### 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
 
 ```html
 <div slTimeline placement="alternate">
   <ol slTimelineList>
-    <li slTimelineItem title="2.12 — Faturas recorrentes">
+    <li slTimelineItem title="2.12 — Recurring invoices">
       <div slTimelineOpposite><time slTimelineTime value="2026-06-02T00:00:00Z"></time></div>
     </li>
   </ol>
 </div>
 ```
 
-### 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
 
 ```html
 <div slTimeline orientation="horizontal" autoComplete>
   <ol slTimelineList>
-    <li slTimelineItem title="Pedido confirmado"></li>
-    <li slTimelineItem current title="Em trânsito"></li>
+    <li slTimelineItem title="Order confirmed"></li>
+    <li slTimelineItem current title="In transit"></li>
   </ol>
 </div>
 ```
 
-### 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
 
 ```html
 <div slTimeline order="newest-first" autoComplete>
   <ol slTimelineList>
-    <li slTimelineItem title="Entregue"></li>
-    <li slTimelineItem current title="Em trânsito"></li>
-    <li slTimelineItem title="Embalado"></li>
+    <li slTimelineItem title="Delivered"></li>
+    <li slTimelineItem current title="In transit"></li>
+    <li slTimelineItem title="Packed"></li>
   </ol>
 </div>
 ```
 
-### 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
 
 ```html
 <div slTimeline tone="accent" autoComplete>
   <ol slTimelineList>
-    <li slTimelineItem title="Pedido confirmado"></li>
-    <li slTimelineItem current title="Em trânsito"></li>
-    <li slTimelineItem title="Saiu para entrega"></li>
-    <li slTimelineItem loading title="Entregue"></li>
+    <li slTimelineItem title="Order confirmed"></li>
+    <li slTimelineItem current title="In transit"></li>
+    <li slTimelineItem title="Out for delivery"></li>
+    <li slTimelineItem loading title="Delivered"></li>
   </ol>
 </div>
 ```
 
-### 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
 
@@ -257,37 +257,37 @@ Excerpt — not a complete module
 <div slTimeline size="sm" variant="plain">
   <ol slTimelineList>
     <li slTimelineItem title="Commit 4f2a"></li>
-    <li slTimelineItem title="Falha nos testes" tone="danger" variant="solid"></li>
+    <li slTimelineItem title="Tests failed" tone="danger" variant="solid"></li>
   </ol>
 </div>
 ```
 
-### 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
 
 ```html
 <div slTimeline [level]="3">
   <ol slTimelineList>
-    <li slTimelineGroup label="Hoje" collapsible>
+    <li slTimelineGroup label="Today" collapsible>
       <ol slTimelineGroupList>
-        <li slTimelineItem title="Paga"></li>
+        <li slTimelineItem title="Paid"></li>
       </ol>
     </li>
-    <li slTimelineGroup label="Semana passada" collapsible [defaultOpen]="false">
+    <li slTimelineGroup label="Last week" collapsible [defaultOpen]="false">
       <ol slTimelineGroupList>
-        <li slTimelineItem title="Enviada"></li>
+        <li slTimelineItem title="Sent"></li>
       </ol>
     </li>
   </ol>
 </div>
 ```
 
-### 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
 
@@ -301,9 +301,9 @@ Excerpt — not a complete module
 </div>
 ```
 
-### 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 (revealRequest) é 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 (revealRequest) 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
 
@@ -317,83 +317,83 @@ Excerpt — not a complete module
 </div>
 ```
 
-### 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
 
 ```ts
 providers: [
-  provideSlotted({ locale: 'pt-BR' }),
+  provideSlotted({ locale: 'en-US' }),
   provideTimelineDefaults({ now: Date.now(), timeZone: 'America/Sao_Paulo' }),
 ];
 
 // <div slTimeline timeFormat="relative">
 //   <ol slTimelineList>
-//     <li slTimelineItem time="2026-09-14T10:32:00Z" title="Paga"></li>
+//     <li slTimelineItem time="2026-09-14T10:32:00Z" title="Paid"></li>
 //   </ol>
 // </div>
 ```
 
-### 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
 
 ```html
-<li slTimelineItem title="Aprovou a cotação revista do programa de remessas">
+<li slTimelineItem title="Approved the revised quote for the shipment program">
   <span slTimelineMarker slAvatar name="Ana Ribeiro"></span>
 </li>
 ```
 
-### 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. exportAs alcança a lista e focusItem(index) para o feed, e provideTimelineDefaults decide uma vez para o injector.
+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. exportAs reaches the list and focusItem(index) for the feed, and provideTimelineDefaults decides once for the injector.
 
 Excerpt — not a complete module
 
 ```html
 <li slTimelineItem>
-  <a slTimelineTitle slLink href="/faturas/4821">Pagamento falhou</a>
+  <a slTimelineTitle slLink href="/invoices/4821">Payment failed</a>
   <div slCollapsible variant="plain">
-    <h4 slCollapsibleHeader><button slCollapsibleTrigger>Ver resposta do emissor</button></h4>
-    <div slCollapsiblePanel>Código 05: não honrar.</div>
+    <h4 slCollapsibleHeader><button slCollapsibleTrigger>View the issuer response</button></h4>
+    <div slCollapsiblePanel>Code 05: do not honor.</div>
   </div>
-  <div slTimelineActions><button slButton size="sm">Repetir</button></div>
+  <div slTimelineActions><button slButton size="sm">Retry</button></div>
 </li>
 ```
 
-### 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
 
 ```html
-<div slTimeline label="Atividade">
+<div slTimeline label="Activity">
   <ol slTimelineList></ol>
   <div slTimelineEmpty slResultState status="empty">
-    <div slResultStateContent><p slResultStateTitle>Ainda sem eventos</p></div>
+    <div slResultStateContent><p slResultStateTitle>No events yet</p></div>
   </div>
 </div>
 ```
 
-### 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
 
 ```html
-<!-- "Paga, Solaris Fretes, há 2 horas, artigo 1 de 3": título, ator e hora, e a posição. -->
-<div slTimeline mode="feed" label="Atividade">
+<!-- "Paid, Solaris Freight, 2 hours ago, article 1 of 3": title, actor and time, and the position. -->
+<div slTimeline mode="feed" label="Activity">
   <div slTimelineList>
     <article
       slTimelineItem
-      title="Paga"
-      actor="Solaris Fretes"
+      title="Paid"
+      actor="Solaris Freight"
       time="2026-09-14T13:32:00Z"
     ></article>
   </div>

package/docs/toast.json

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