@slotted/react 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/docs/filter-bar.md

@@ -68,49 +68,49 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `fields` | `FilterBarField[]` | — | FilterBar | Os campos filtráveis: key, label, kind, icon (nome de glifo ou nó), operators, pinned, required, defaultValue, section, options, searchable |
-| `value` | `FilterGroup \| null` | — | FilterBar | A árvore que o consumidor possui. Presente é controlado, para a vida da barra |
-| `defaultValue` | `FilterGroup \| null` | — | FilterBar | Onde uma barra não controlada começa, lida uma vez |
-| `query` | `string` | — | FilterBar | A busca global, controlada |
-| `defaultQuery` | `string` |  | FilterBar | A busca com que uma barra não controlada começa |
-| `presets` | `FilterBarPreset[]` | — | FilterBar | As vistas guardadas: key, label, value |
-| `preset` | `string \| null` | — | FilterBar | A vista corrente, controlada |
-| `defaultPreset` | `string \| null` | null | FilterBar | A vista com que começa |
-| `open` | `boolean` | — | FilterBar | Se o construtor está aberto, controlado |
-| `defaultOpen` | `boolean` | false | FilterBar | Se começa aberto |
-| `revealed` | `boolean` | — | FilterBar | Se os chips dobrados estão à vista, controlado |
-| `defaultRevealed` | `boolean` | false | FilterBar | Se começam à vista |
-| `apply` | `'live' \| 'manual'` | live | FilterBar | Pede a cada edição, ou edita um rascunho até Apply |
-| `sticky` | `boolean` | false | FilterBar | Cola sob o cabeçalho da página e soma a sua altura ao que segue |
-| `container` | `Element \| null` | — | FilterBar | Um pai só para o drawer do construtor, em vez da raiz de portal partilhada |
-| `size` | `'sm' \| 'md' \| 'lg'` | md | FilterBar | O passo dos controles |
-| `queryDelay` | `number` | 320 | FilterBar | Milissegundos que a busca e um operando de texto esperam sob live |
-| `chipLimit` | `number` | 6 | FilterBar | Chips à vista antes de dobrar |
-| `shortcut` | `string \| null` | null | FilterBar | A tecla do documento que foca a busca, fora de um campo editável |
-| `disabled` | `boolean` | false | FilterBar | Desliga todos os controles |
-| `readOnly` | `boolean` | false | FilterBar | Cada condição alcançável e legível, nenhuma alterável: sem X, add, clear nem pills vazios |
-| `loading` | `boolean` | false | FilterBar | Mantém a largura, desliga Apply, spinner no lugar da contagem |
-| `count` | `number` | — | FilterBar | Quantas linhas o filtro manteve |
-| `total` | `number` | — | FilterBar | Quantas há |
-| `messages` | `Partial<FilterBarMessages>` | — | FilterBar | Palavras sobre as da língua em vigor, chave a chave: o nome do landmark (bar), os controles, os nomes dos chips, a contagem e os anúncios |
-| `renderOperand` | `(props: FilterBarOperandProps) => ReactNode` | — | FilterBar | Substitui o controle do operando; undefined mantém o da espécie |
-| `children` | `ReactNode` | — | FilterBar | Os controles do consumidor no slot end |
-| `renderOperand` | `(props) => ReactNode` | — | FilterBar | A costura que a rodada 12 usa em table: date-range-picker num between, tags-input num conjunto grande |
-| `children` | `ReactNode` | — | FilterBar | O slot end: uma ordenação, um seletor de colunas, fora do anel da toolbar |
-| `ref` | `Ref<FilterBarHandle>` | — | FilterBar | focusSearch(), open(), root — as ações que uma prop não exprime |
-| `FilterBarDefaultsProvider` | `apply \| chipLimit \| queryDelay \| shortcut \| size` | — | Aplicação | Decide uma vez para tudo por baixo; uma prop na barra ganha |
-| `onKeyDown, id, aria-*, data-*` | `props nativas` | — | FilterBar | Chegam à raiz; o handler do consumidor corre antes do da família |
+| `fields` | `FilterBarField[]` | — | FilterBar | The filterable fields: key, label, kind, icon (glyph name or node), operators, pinned, required, defaultValue, section, options, searchable |
+| `value` | `FilterGroup \| null` | — | FilterBar | The tree the consumer owns. Present means controlled, for the life of the bar |
+| `defaultValue` | `FilterGroup \| null` | — | FilterBar | Where an uncontrolled bar starts, read once |
+| `query` | `string` | — | FilterBar | The global search, controlled |
+| `defaultQuery` | `string` |  | FilterBar | The search an uncontrolled bar starts with |
+| `presets` | `FilterBarPreset[]` | — | FilterBar | The saved views: key, label, value |
+| `preset` | `string \| null` | — | FilterBar | The current view, controlled |
+| `defaultPreset` | `string \| null` | null | FilterBar | The view it starts with |
+| `open` | `boolean` | — | FilterBar | Whether the builder is open, controlled |
+| `defaultOpen` | `boolean` | false | FilterBar | Whether it starts open |
+| `revealed` | `boolean` | — | FilterBar | Whether the folded chips are in view, controlled |
+| `defaultRevealed` | `boolean` | false | FilterBar | Whether they start in view |
+| `apply` | `'live' \| 'manual'` | live | FilterBar | Requests on every edit, or edits a draft until Apply |
+| `sticky` | `boolean` | false | FilterBar | Sticks under the page header and adds its height to what follows |
+| `container` | `Element \| null` | — | FilterBar | A parent for the builder drawer only, instead of the shared portal root |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | FilterBar | The step of the controls |
+| `queryDelay` | `number` | 320 | FilterBar | Milliseconds the search and a text operand wait under live |
+| `chipLimit` | `number` | 6 | FilterBar | Chips in view before folding |
+| `shortcut` | `string \| null` | null | FilterBar | The document key that focuses the search, outside an editable field |
+| `disabled` | `boolean` | false | FilterBar | Turns off every control |
+| `readOnly` | `boolean` | false | FilterBar | Every condition reachable and readable, none changeable: no X, add, clear or empty pills |
+| `loading` | `boolean` | false | FilterBar | Keeps the width, turns off Apply, spinner in place of the count |
+| `count` | `number` | — | FilterBar | How many rows the filter kept |
+| `total` | `number` | — | FilterBar | How many there are |
+| `messages` | `Partial<FilterBarMessages>` | — | FilterBar | Words over those of the current locale, key by key: the landmark name (bar), the controls, the chip names, the count and the announcements |
+| `renderOperand` | `(props: FilterBarOperandProps) => ReactNode` | — | FilterBar | Replaces the operand control; undefined keeps the one for the kind |
+| `children` | `ReactNode` | — | FilterBar | The consumer’s controls in the end slot |
+| `renderOperand` | `(props) => ReactNode` | — | FilterBar | The seam table uses: date-range-picker on a between, tags-input on a large set |
+| `children` | `ReactNode` | — | FilterBar | The end slot: a sort, a column picker, outside the toolbar ring |
+| `ref` | `Ref<FilterBarHandle>` | — | FilterBar | focusSearch(), open(), root — the actions a prop does not express |
+| `FilterBarDefaultsProvider` | `apply \| chipLimit \| queryDelay \| shortcut \| size` | — | Application | Decides once for everything below; a prop on the bar wins |
+| `onKeyDown, id, aria-*, data-*` | `native props` | — | FilterBar | Reach the root; the consumer’s handler runs before the family’s |
 
 ## Events
 
 | Name | Payload | When |
 | --- | --- | --- |
-| `onValueChange` | `(value: FilterGroup \| null, request)` | Antes de a árvore mover. A razão é pointer, keyboard, clear, remove, select, submit ou programmatic; cancelar não move nada. A árvore chega normalizada: sem regras incompletas, null quando nada resta. |
-| `onQueryChange` | `(query: string, request)` | Depois de queryDelay sob live, ou com submit sob manual; clear quando Escape ou o X do campo a limpam. |
-| `onPresetChange` | `(preset: string \| null, request)` | Quando uma vista é escolhida no select, com select; clear quando o select é esvaziado. |
-| `onPresetSave` | `(value: FilterGroup \| null)` | Quando o leitor pressiona "Save as view…" no construtor. A família não guarda: pergunta. |
-| `onOpenChange` | `(open: boolean, request)` | Antes de o construtor abrir ou fechar: pointer, keyboard, escape, outsidePress, dismiss, submit, programmatic. |
-| `onRevealedChange` | `(revealed: boolean, request)` | Antes de os chips dobrados aparecerem ou voltarem a dobrar. |
+| `onValueChange` | `(value: FilterGroup \| null, request)` | Before the tree moves. The reason is pointer, keyboard, clear, remove, select, submit or programmatic; cancelling moves nothing. The tree arrives normalized: no incomplete rules, null when nothing is left. |
+| `onQueryChange` | `(query: string, request)` | After queryDelay under live, or with submit under manual; clear when Escape or the field’s X clears it. |
+| `onPresetChange` | `(preset: string \| null, request)` | When a view is chosen in the select, with select; clear when the select is emptied. |
+| `onPresetSave` | `(value: FilterGroup \| null)` | When the reader presses "Save as view…" in the builder. The family does not save: it asks. |
+| `onOpenChange` | `(open: boolean, request)` | Before the builder opens or closes: pointer, keyboard, escape, outsidePress, dismiss, submit, programmatic. |
+| `onRevealedChange` | `(revealed: boolean, request)` | Before the folded chips appear or fold again. |
 
 ## Axes and defaults
 
@@ -122,12 +122,12 @@ Excerpt — not a complete module
 
 ## Rules
 
-- A raiz é role="search", não role="toolbar": o padrão Toolbar do APG pede que uma toolbar evite controles que precisam das setas, e o campo de busca é um. A busca é a primeira parada de tabulação e a toolbar a segunda — duas paradas sejam quantos forem os campos; a nota do APG para toolbars de várias linhas deixa as setas passar de linha em linha.
-- Um chip é role="group" com o nome "<campo>: <frase>", a mesma frase que describeFilter dá ao anúncio de table, e ", incomplete" enquanto falta o valor. O operador tem aria-haspopup="menu", o valor aria-haspopup="dialog" e o nome com a lista inteira, o X "Remove <campo>". Delete e Backspace em qualquer segmento removem com a razão remove e o foco vai ao segmento do mesmo papel no chip seguinte, ao anterior, ou ao Add filter.
-- Um pill tem aria-haspopup="dialog"; sob readOnly a toolbar leva aria-description="Read only" e os segmentos guardam a paragem com aria-disabled, e um valor bloqueado nomeia a lista inteira que o popover já não mostra.
-- A contagem é a própria região viva, em polite, por isso o efeito de um filtro é ouvido; aplicar, limpar, remover um chip e escolher uma vista são anunciados pelo live-announcer partilhado.
-- O construtor é um drawer: modal, Escape fecha e descarta, o foco volta ao gatilho. Cada grupo é um fieldset com legend, cada regra três controles nomeados — Field, Operator, Value ou From e To.
-- Abaixo de 36rem o operador, more, add e clear saem do anel de foco com visibility hidden, não só do desenho: uma parada onde nada se vê é uma parada que não existe. Os cartões fechados do construtor tiram os três controles do anel da mesma forma; a frase do cartão tem aria-expanded e aria-controls.
+- The root is role="search", not role="toolbar": the APG Toolbar pattern asks a toolbar to avoid controls that need the arrows, and the search field is one. The search is the first tab stop and the toolbar the second — two stops however many fields there are; the APG note on multi-row toolbars lets the arrows move from row to row.
+- A chip is role="group" named "<field>: <phrase>", the same phrase describeFilter gives to the table announcement, and ", incomplete" while the value is missing. The operator has aria-haspopup="menu", the value aria-haspopup="dialog" and the name with the whole list, the X "Remove <field>". Delete and Backspace on any segment remove with the reason remove and focus goes to the segment of the same role on the next chip, the previous one, or Add filter.
+- A pill has aria-haspopup="dialog"; under readOnly the toolbar carries aria-description="Read only" and the segments keep their stop with aria-disabled, and a locked value names the whole list the popover no longer shows.
+- The count is itself the live region, in polite, so the effect of a filter is heard; applying, clearing, removing a chip and choosing a view are announced by the shared live-announcer.
+- The builder is a drawer: modal, Escape closes and discards, focus returns to the trigger. Each group is a fieldset with a legend, each rule three named controls — Field, Operator, Value or From and To.
+- Below 36rem the operator, more, add and clear leave the focus ring with visibility hidden, not only the drawing: a stop where nothing is seen is a stop that does not exist. The builder’s closed cards take the three controls out of the ring the same way; the card’s phrase has aria-expanded and aria-controls.
 
 ## Tokens
 
@@ -135,9 +135,9 @@ Excerpt — not a complete module
 
 ## Examples
 
-### A barra sobre a tabela, e a mesma regra nos dois sítios
+### The bar over the table, and the same rule in both places
 
-A árvore é aplicada pelo consumidor com createFilterGroupPredicate e createSearchPredicate; a tabela abaixo encolhe e a contagem diz quanto. O filtro de coluna de Status no cabeçalho edita o mesmo objeto que o chip de Status da barra.
+The consumer applies the tree with createFilterGroupPredicate and createSearchPredicate; the table below shrinks and the count says by how much. The Status column filter in the header edits the same object as the bar’s Status chip.
 
 Excerpt — not a complete module
 
@@ -147,9 +147,9 @@ const find = createSearchPredicate(query, (row, field) => row[field], ['customer
 const kept = orders.filter((row) => keep(row) && find(row));
 ```
 
-### Campos fixados: um lugar tracejado que vira chip
+### Pinned fields: a dashed place that becomes a chip
 
-pinned deixa o campo sempre à vista. Sem condição é um pill tracejado com + e o nome — um lugar à espera de ser preenchido; premido, dá lugar ao chip do campo, no mesmo sítio, incompleto e com o popover do valor aberto. Remover a condição devolve o pill.
+pinned keeps the field always in view. Without a condition it is a dashed pill with + and the name — a place waiting to be filled; pressed, it gives way to the field’s chip, in the same place, incomplete and with the value popover open. Removing the condition brings the pill back.
 
 Excerpt — not a complete module
 
@@ -168,9 +168,9 @@ const FIELDS = [
 ];
 ```
 
-### Cada condição escrita em segmentos
+### Each condition written in segments
 
-Um chip é a frase da condição em segmentos: o campo com o seu glifo, o operador mais leve, o valor, e o X. O operador abre um menu, o valor um popover só com o operando — mudar a comparação não reabre os valores. Uma lista longa escreve dois valores e o resto em número (Paid, Refunded +2), inteira no nome e no title; uma lista de um lê-se como igualdade. Add filter cria o chip de imediato, tracejado até ter valor, e fora do valor emitido até lá. Além de chipLimit os chips dobram atrás de +n more.
+A chip is the condition’s phrase in segments: the field with its glyph, the lighter operator, the value, and the X. The operator opens a menu, the value a popover with the operand only — changing the comparison does not reopen the values. A long list writes two values and the rest as a number (Paid, Refunded +2), whole in the name and the title; a list of one reads as equality. Add filter creates the chip at once, dashed until it has a value, and left out of the emitted value until then. Beyond chipLimit the chips fold behind +n more.
 
 Excerpt — not a complete module
 
@@ -178,9 +178,9 @@ Excerpt — not a complete module
 <FilterBar chipLimit={6} defaultRevealed={false} fields={FIELDS} value={filter} />;
 ```
 
-### O construtor num drawer
+### The builder in a drawer
 
-Add filter, um chip de grupo ou Filters (n) abrem a árvore inteira num drawer; num telefone o drawer sobe de baixo como uma folha. Com mais de 30rem cada regra é uma linha de campo, operador, operando e X; com menos, um cartão com a frase que se expande no lugar, um de cada vez. Apply pede a árvore com a razão submit, Cancel e Escape descartam.
+Add filter, a group chip or Filters (n) open the whole tree in a drawer; on a phone the drawer rises from the bottom as a sheet. Wider than 30rem each rule is a row of field, operator, operand and X; narrower, a card with the phrase that expands in place, one at a time. Apply requests the tree with the reason submit, Cancel and Escape discard.
 
 Excerpt — not a complete module
 
@@ -195,9 +195,9 @@ const bar = useRef<FilterBarHandle>(null);
 bar.current?.open();
 ```
 
-### Grupos E/OU aninhados
+### Nested AND/OR groups
 
-Um grupo dentro de um grupo é uma caixa sobre a superfície afundada, com a junção oposta e o caixote que o remove; num construtor estreito passa a um trilho na aresta inicial, que custa dez pixels por nível em vez de oitenta. Na barra aparece como um chip só, com a frase entre parênteses, que abre o construtor.
+A group inside a group is a box over the sunken surface, with the opposite join and the trash that removes it; in a narrow builder it becomes a rail on the start edge, which costs ten pixels per level instead of eighty. On the bar it appears as a single chip, with the phrase in parentheses, that opens the builder.
 
 Excerpt — not a complete module
 
@@ -227,9 +227,9 @@ const filter = {
 };
 ```
 
-### Aplicar em lote
+### Applying in a batch
 
-Com apply="manual" cada edição vai a um rascunho: a raiz fica data-dirty, Reset descarta, Apply pede a árvore e a query com a razão submit. Enter num operando aplica. É o Go do Fiori e o batch do Carbon.
+With apply="manual" each edit goes to a draft: the root becomes data-dirty, Reset discards, Apply requests the tree and the query with the reason submit. Enter on an operand applies. It is the Go of Fiori and the batch of Carbon.
 
 Excerpt — not a complete module
 
@@ -242,9 +242,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Um campo obrigatório com default
+### A required field with a default
 
-required fixa o campo e dá-lhe um defaultValue: Clear devolve-o ao default em vez de o apagar, o chip não tem X, e um Apply com o campo sem valor é recusado — o chip fica tracejado e data-invalid, a mensagem é anunciada.
+required pins the field and gives it a defaultValue: Clear returns it to the default instead of erasing it, the chip has no X, and an Apply with the field empty is refused — the chip stays dashed and data-invalid, and the message is announced.
 
 Excerpt — not a complete module
 
@@ -259,9 +259,9 @@ const company = {
 };
 ```
 
-### Vistas guardadas
+### Saved views
 
-presets aparece como um select no fim da barra: escolher uma substitui a árvore com a razão select; editar depois mantém a vista escolhida e marca a raiz data-dirty. Guardar é da aplicação — onPresetSave entrega a árvore, o nome é ela que pergunta.
+presets appears as a select at the end of the bar: choosing one replaces the tree with the reason select; editing afterwards keeps the chosen view and marks the root data-dirty. Saving belongs to the application — onPresetSave hands over the tree, and the application asks for the name.
 
 Excerpt — not a complete module
 
@@ -275,9 +275,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### A busca global
+### The global search
 
-A query é o único campo que não pertence a nenhuma coluna. Debounced por queryDelay sob live; Escape limpa com a razão clear; shortcut é a tecla do documento que chega ao campo, desenhada dentro dele com kbd — e escondida onde a entrada primária é um ecrã táctil, onde não há tecla para carregar.
+The query is the only field that belongs to no column. Debounced by queryDelay under live; Escape clears with the reason clear; shortcut is the document key that reaches the field, drawn inside it with kbd — and hidden where the primary input is a touch screen, where there is no key to press.
 
 Excerpt — not a complete module
 
@@ -285,9 +285,9 @@ Excerpt — not a complete module
 <FilterBar fields={FIELDS} onQueryChange={setQuery} query={query} queryDelay={120} shortcut="/" />;
 ```
 
-### O estado numa URL
+### The state in a URL
 
-toFilterBarParams escreve f=and(…) e q=; fromFilterBarParams lê-os de volta, e um f.<coluna> escrito por uma tabela sem barra vira um grupo de primeiro nível. parseFilterGroup é total: um marcador de uma versão antiga degrada para nenhum filtro.
+toFilterBarParams writes f=and(…) and q=; fromFilterBarParams reads them back, and an f.<column> written by a table without a bar becomes a top-level group. parseFilterGroup is total: a marker from an older version degrades to no filter.
 
 Excerpt — not a complete module
 
@@ -297,9 +297,9 @@ history.replaceState(null, '', `?${params}`);
 const restored = fromFilterBarParams(location.search);
 ```
 
-### A contagem como região viva
+### The count as a live region
 
-count e total são os números do consumidor, escritos nas figuras da língua em vigor. A parte é aria-live="polite", por isso uma mudança no filtro é ouvida como o seu efeito; com loading a contagem dá lugar a um spinner e aria-busy.
+count and total are the consumer’s numbers, written in the figures of the current locale. The part is aria-live="polite", so a change in the filter is heard as its effect; with loading the count gives way to a spinner and aria-busy.
 
 Excerpt — not a complete module
 
@@ -307,9 +307,9 @@ Excerpt — not a complete module
 <FilterBar count={128} fields={FIELDS} loading={fetching} total={3412} />;
 ```
 
-### Num telefone: uma linha que desliza e uma folha
+### On a phone: a row that scrolls sideways and a sheet
 
-Abaixo de 36rem a busca fica em cima e a barra passa a uma linha que desliza: Filters (n) primeiro, todos os chips — também os dobrados —, depois os pills vazios; o chip cortado na borda diz que a linha continua. Cada chip tem três alvos: o campo, o valor com as palavras do operador, o X. Tocar num valor, num pill ou em Filters abre o construtor como folha, com o cartão da regra aberto. Redimensione o palco.
+Below 36rem the search sits on top and the bar becomes a row that scrolls sideways: Filters (n) first, every chip — the folded ones too —, then the empty pills; the chip cut at the edge says the row continues. Each chip has three targets: the field, the value with the operator’s words, the X. Tapping a value, a pill or Filters opens the builder as a sheet, with the rule’s card open. Resize the stage.
 
 Excerpt — not a complete module
 
@@ -319,9 +319,9 @@ Excerpt — not a complete module
 </div>;
 ```
 
-### Colada sob o cabeçalho da página
+### Stuck under the page header
 
-sticky lê --slotted-page-sticky-top, cola a barra aí, e soma a própria altura à propriedade no elemento pai para o que vem a seguir — uma tabela com cabeçalho colado para debaixo da barra, não debaixo do título.
+sticky reads --slotted-page-sticky-top, sticks the bar there, and adds its own height to the property on the parent element for what comes next — a table with a sticky header sticks below the bar, not below the title.
 
 Excerpt — not a complete module
 
@@ -332,9 +332,9 @@ Excerpt — not a complete module
 </>;
 ```
 
-### Desabilitada, a carregar, só leitura
+### Disabled, loading, read only
 
-disabled desliga todos os controles e mantém a largura; loading mantém os controles, desliga Apply e põe o spinner no lugar da contagem; readOnly deixa cada condição alcançável e legível — os segmentos guardam a paragem com aria-disabled — e não desenha X, add, clear nem pills vazios.
+disabled turns off every control and keeps the width; loading keeps the controls, turns off Apply and puts the spinner in place of the count; readOnly leaves every condition reachable and readable — the segments keep their stop with aria-disabled — and draws no X, add, clear or empty pills.
 
 Excerpt — not a complete module
 
@@ -346,9 +346,9 @@ Excerpt — not a complete module
 </>;
 ```
 
-### Conteúdo que a família não escolheu
+### Content the family did not choose
 
-Um valor de onze itens escreve dois e o resto em número, inteiro no title e no nome acessível; um valor longo trunca a 12rem; um rótulo árabe ao lado de uma data ISO não reordena a data, porque campo, operador e valor são corridas isoladas; um campo desconhecido é um chip inválido, removível.
+A value of eleven items writes two and the rest as a number, whole in the title and in the accessible name; a long value truncates at 12rem; an Arabic label next to an ISO date does not reorder the date, because field, operator and value are isolated runs; an unknown field is an invalid, removable chip.
 
 Excerpt — not a complete module
 
@@ -360,14 +360,14 @@ Excerpt — not a complete module
 />;
 ```
 
-### Teclado
+### Keyboard
 
-Tab: a busca, depois a barra — duas paragens. As setas percorrem cada controle da barra, segmento a segmento, de linha em linha e espelhadas em RTL; Home e End nas pontas. Enter no operador abre o menu, no valor o popover; Delete em qualquer segmento remove a condição com a razão remove e o foco vai ao mesmo segmento do chip seguinte; Escape limpa a busca ou fecha a superfície.
+Tab: the search, then the bar — two stops. The arrows move through every control of the bar, segment by segment, from row to row and mirrored in RTL; Home and End at the ends. Enter on the operator opens the menu, on the value the popover; Delete on any segment removes the condition with the reason remove and focus goes to the same segment of the next chip; Escape clears the search or closes the surface.
 
 Excerpt — not a complete module
 
 ```tsx
-// "Amount filter removed" — e o foco segue para o chip seguinte, ou para
-// Add filter quando não sobra nenhum.
+// "Amount filter removed" — and focus moves to the next chip, or to
+// Add filter when none is left.
 <FilterBar fields={FIELDS} onValueChange={(next, request) => request.reason === 'remove'} />;
 ```

package/dist/docs/guidelines/async-feedback.md

@@ -106,3 +106,13 @@ Why: Without it the reader reloads the browser, which loses the scroll, the open
 Do: Put an icon button named "Refresh" in the header's actions toolbar with its menu counterpart, in its `loading` state until the answer (AF-03); bind the page's `loading` to "reading again while a record is shown", so the body takes `aria-busy` and draws no placeholder.
 Don't: Offer Refresh on a record nothing else writes, or clear the record and draw its skeleton on every read after the first.
 Check: Press Refresh on a record another writer changes: the values stay, the page body is busy until the answer, and the button waits on it.
+
+### AF-08 · A write refreshes every view it changed
+
+Level: MUST
+Applies to: every control that writes — a create, an edit, a delete, a categorisation — and every region on any screen whose figures the write can change
+Rule: A successful write marks stale every query whose answer the write can change, and the regions on screen read again; an application that cannot list them marks every query stale; a region that reads again keeps its rows and dims them (LP-06).
+Why: Categorising a transaction left the category totals and the rules' coverage at their old figures until a reload, and the reader reloaded after every action to trust the screen.
+Do: Beside each write, list the queries its answer changes — the record, the lists it appears in, the totals and counts over them — and invalidate them on success; where the list cannot be stated, invalidate every query after a successful write.
+Don't: Refresh only the region the control stands in, or rely on the next navigation to read the other figures again.
+Check: Perform each write: every figure on screen that the write changes shows the new value without a reload.

package/dist/docs/guidelines/composition.md

@@ -110,13 +110,7 @@ Check: For every axis a screen passes to a family, the screen can name what it a
 
 ### CP-07 · A page's width is its type's
 
-Level: SHOULD
-Applies to: every `page`
-Rule: A list page is `bleed` with `fill`; a record, a dashboard and an overview keep the default `wide`; a create or edit form is `content`; a page of preferences read as prose is `measure`.
-Why: The page's width is the one measure its header and its body share, and a form capped in its own stylesheet ran its body to 736 pixels under a header of 1280, so the two end edges did not meet.
-Do: Set the width on the page and nowhere else; a form with a table of lines keeps `content` and lets the table's columns truncate.
-Don't: Cap a form's body with a width of the screen's own, or leave a form at `wide` so its fields run the length of a monitor.
-Check: On every form the header's end edge and the body's end edge are the same line.
+Status: retired · rewritten as CP-10, which gives every destination one width
 
 ### CP-08 · A control that changes mode keeps every box where it was
 
@@ -137,3 +131,13 @@ Why: Mounting a region of families in the click's task blocks the next paint, an
 Do: Keep the selection state urgent and hand the region the deferred value; mount only the selected panel, with mount active.
 Don't: Set the selection and the region from one state update inside the click handler, or mount every panel to make switching look instant.
 Check: Switch the control with the CPU throttled 4× in Chrome: the selection marker moves in the next frame, and the Performance panel shows no long task between the click and that paint.
+
+### CP-10 · Every destination has one width
+
+Level: SHOULD
+Applies to: every `page`
+Rule: Every destination of the navigation — a list, a record, a dashboard, an overview — is `full`, so moving between destinations never moves the column's edges; a create or edit form is `wide` and lays its fields out in a grid of the form's own; a page of preferences read as prose is `measure`.
+Why: A list at `bleed`, a record at `wide` and a form at `content` moved the column's edges on every move between destinations, and a form 56rem wide stood narrow in a desktop frame; the owner read the pages as squeezed and without a pattern.
+Do: Set `full` on every destination and `wide` on every form, on the page and nowhere else; a list keeps `fill` (LP-12); a form arranges its fields in a `grid` within that width.
+Don't: Give each page type a measure of its own, or cap a form's body with a width of the screen's own.
+Check: Move between two destinations of the navigation: the header's and the body's start and end edges stay on the same lines.

package/dist/docs/guidelines/index.md

@@ -11,6 +11,7 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | AF-05 | MAY | A control's indicator may be delayed by the family's loading delay, so a request that answers first shows no indicator; a region's placeholders are never delayed. | `async-feedback.md` |
 | AF-06 | SHOULD | The application states one minimum duration for the whole product: once placeholders are painted they stay for it, even when the answer has already arrived. | `async-feedback.md` |
 | AF-07 | SHOULD | The page offers Refresh among the header's actions, and a refresh keeps the values on screen, marks the page busy and replaces them when the answer arrives. | `async-feedback.md` |
+| AF-08 | MUST | A successful write marks stale every query whose answer the write can change, and the regions on screen read again; an application that cannot list them marks every query stale; a region that reads again keeps its rows and dims them (LP-06). | `async-feedback.md` |
 | BR-01 | SHOULD | The branch a reader chose is the list's heading and its `breadcrumb`; the filter bar keeps the facets and holds no pill for it. | `browsing.md` |
 | BR-02 | MUST | The query covers the branch and every node beneath it, and the page states how many nodes that is beside how many records they hold. | `browsing.md` |
 | BR-03 | MUST | The number on a row is one of the two and the screen says which; where a node holds records of its own and has nodes under it, the second number is said apart from the first. | `browsing.md` |
@@ -27,9 +28,9 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | CP-04 | MAY | When the families' anatomies have been read and none of them answers the problem, the screen writes an element of its own rather than bending a family into a shape it does not have. | `composition.md` |
 | CP-05 | MUST | Every value the element paints comes from the theme — space, type, ink, border, radius, elevation and motion — where the theme has a token for it; a literal is written only beside a comment that says what decided it and why no token covers it. | `composition.md` |
 | CP-06 | SHOULD | A screen states a state once. Where the family has a state for it, the screen sets that state and adds nothing louder beside it. | `composition.md` |
-| CP-07 | SHOULD | A list page is `bleed` with `fill`; a record, a dashboard and an overview keep the default `wide`; a create or edit form is `content`; a page of preferences read as prose is `measure`. | `composition.md` |
 | CP-08 | MUST | Switching the mode changes the words and the values in the region, never the size, the line count or the position of any box in it or around it; text whose length differs between modes stands on one line, cut with an ellipsis and read whole from its title. | `composition.md` |
 | CP-09 | MUST | The control's own state — the selected tab, the pressed segment — updates in the interaction's frame; the region renders from a deferred value (in React, useDeferredValue or startTransition) and states aria-busy while the shown value lags the selected one. | `composition.md` |
+| CP-10 | SHOULD | Every destination of the navigation — a list, a record, a dashboard, an overview — is `full`, so moving between destinations never moves the column's edges; a create or edit form is `wide` and lays its fields out in a grid of the form's own; a page of preferences read as prose is `measure`. | `composition.md` |
 | CV-01 | MUST | From 600 pixels the conversation fills its region and scrolls on its own with the composer under it, and the record's context scrolls on its own beside it or behind a tab of the header; below 600 pixels the page scrolls, the composer is stuck to the bottom of the screen, and the record opens on its last message. | `conversations.md` |
 | CV-02 | SHOULD | A running clock says the business time left and the hour it falls due in the organization's zone, a passed one by how much and when it was due, a paused one that it is stopped and why; a queue's row says the span alone, and no clock is ever said in raw minutes. | `conversations.md` |
 | CV-03 | SHOULD | Each queue is a view of the list's `filter-bar`, a tree of the bar's own fields, labelled with the count of the rows it opens on; choosing it writes its pills, and editing a pill leaves a view the bar marks as changed. | `conversations.md` |
@@ -74,11 +75,15 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | LP-12 | MUST | From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls. | `list-pages.md` |
 | LP-13 | SHOULD | The mark takes the `sm` `size`; the default `md` belongs to a record's header and to a region with room around it. | `list-pages.md` |
 | LP-14 | MUST | A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows. | `list-pages.md` |
+| LP-15 | SHOULD | A grid that stands on the page's surface beside other blocks takes the `framed` `variant`; a grid that is the page's only body under a `bleed` page may stay `ruled`; `plain` is for a grid inside a `card` or a panel that already draws the frame. | `list-pages.md` |
+| LP-16 | SHOULD | A list page's header holds a subheading that says what the list covers, the control of the period when the list reads one, the page's figures for that period in the header area as label-over-figure pairs, and the primary action as the last, solid control; a refresh control is an icon button and never the only action. | `list-pages.md` |
+| LP-17 | SHOULD | The column of kind `actions` stays pinned to the end, which is the grid's default, and the row header is pinned to the start with `pinned: 'start'` when it is the first column; no other column is pinned without a reason the page states. | `list-pages.md` |
 | OV-01 | SHOULD | The figure leads to the list page of the records it counts, and that list opens with the figure's condition applied as the bar's own pills, which the reader removes like any other. | `overviews.md` |
 | OV-02 | SHOULD | Below 600 pixels the figures are one `list` of rows that are destinations — label, comparison, number — followed by the records to act on, the work in flight, the charts, and the history last. | `overviews.md` |
 | OV-03 | SHOULD | Where the reader's scope holds one category, the chart is not drawn and one sentence states the numbers it would have compared. | `overviews.md` |
 | OV-04 | SHOULD | The thresholds are stated once in words beside the figures, and a figure past one says so in its own comparison line, on the line the placeholder reserves. | `overviews.md` |
 | OV-05 | SHOULD | A chart takes the `card` `variant` when it is one of two or more peer tiles in one grid with no section heading of its own, and stays `plain` when it is the body of a titled section or the only content of a tab. | `overviews.md` |
+| OV-06 | SHOULD | The cards of one row carry a label of at most three words, the figure, and the same optional parts on every card — a comparison of one line on each, or on none. | `overviews.md` |
 | OE-01 | MUST | An element of the application's own reads only tokens of the groups `../tokens.md` lists for the application. | `own-elements.md` |
 | OE-02 | MUST | Where two states hold at once, the element paints the ground, the edge and the text colour of the stronger, in the order `disabled`, `loading`, `readonly`, `invalid`, `checked`, `selected`, `pressed`, `current`, `complete`, `active`, `hover`; the focus ring of OE-03 is drawn over every state. | `own-elements.md` |
 | OE-03 | MUST | In its `focus-visible` state the element draws an outline of `--slotted-focus-ring-width` in `--slotted-focus-ring-color`, offset by `--slotted-focus-ring-offset`. | `own-elements.md` |

package/dist/docs/guidelines/list-pages.md

@@ -174,3 +174,33 @@ Why: `table` mounts every cell: a hundred rows of twenty columns measured 93 ms
 Do: Give the store's list a `data-grid` with its query, and keep `table` for the bounded sets inside a record or a document.
 Don't: Render an unbounded store into a `table`, or page a `table` to keep it under a hundred rows where the grid's window would have kept the whole set reachable.
 Check: Every list over an unbounded store is a `data-grid`; every `table` on a page renders a set the page bounds.
+
+### LP-15 · A grid on the page's surface is framed
+
+Level: SHOULD
+Applies to: a `data-grid` or a `table` on a list page, a record or an overview
+Rule: A grid that stands on the page's surface beside other blocks takes the `framed` `variant`; a grid that is the page's only body under a `bleed` page may stay `ruled`; `plain` is for a grid inside a `card` or a panel that already draws the frame.
+Why: `ruled`, the grid's default, draws rules between rows and no outer edge, and on a raised page surface every grid read as a bare slab beside blocks that have edges.
+Do: Give every grid that shares the page with a header area, a filter bar or other blocks the `framed` `variant`, and leave `ruled` to the full-bleed list whose edges are the page's.
+Don't: Leave the variant at its default on a page whose width is not `bleed`, or frame a grid a second time inside a card.
+Check: Every `data-grid` with no `variant` stands on a page whose `width` is `bleed`; every grid inside a `card` is `plain`.
+
+### LP-16 · A list's header says what the list covers
+
+Level: SHOULD
+Applies to: the `page-header` of a list page
+Rule: A list page's header holds a subheading that says what the list covers, the control of the period when the list reads one, the page's figures for that period in the header area as label-over-figure pairs, and the primary action as the last, solid control; a refresh control is an icon button and never the only action.
+Why: A header with a heading and a refresh icon left the period and the totals with no place, and the reader learned what the list covered only by reading its rows.
+Do: Write the `page-header`'s `subheading` part for what the list covers, the period's control and the figures in its `header-area` as `figure` parts, and end its `actions` with the solid primary action; the refresh stands before it as the `button` family's `iconButton`.
+Don't: Leave a list's header as a heading alone, put its figures in a row of cards above the grid, or make a refresh icon the header's only control.
+Check: Every list page's header has a subheading, its figures in the header area, and a solid primary action last; no header's only control is a refresh.
+
+### LP-17 · The row header and the row's actions stay in the frame
+
+Level: SHOULD
+Applies to: a `data-grid` whose columns can scroll sideways
+Rule: The column of kind `actions` stays pinned to the end, which is the grid's default, and the row header is pinned to the start with `pinned: 'start'` when it is the first column; no other column is pinned without a reason the page states.
+Why: When the columns scrolled sideways the row's menu left the frame, and on a narrow frame the reader scrolled away from the actions to reach them.
+Do: Keep the `actions` column at its default pin, write `pinned: 'start'` on a row header that is the first column, and pin nothing else.
+Don't: Unpin the actions column, or pin a column the reader did not ask to keep in view.
+Check: In a frame narrower than the grid's columns, scrolled to the end, every row's actions cell is in view, and so is the row header when it is the first column.

package/dist/docs/guidelines/overviews.md

@@ -64,3 +64,13 @@ Why: The section's heading and its space already frame a chart that is its body,
 Do: Give a plain chart a `title` that names the measure and not the section's words again; in a grid of peer tiles, let the chart's title be the tile's title and share the row's height, as `stat-card` always does.
 Don't: Frame every chart by habit, or leave a chart plain among framed tiles where it reads as the page's background.
 Check: For each chart, name what frames it: a titled section (plain) or a grid of peers (card); a chart with neither frame, or with both, is a finding.
+
+### OV-06 · The stat-cards of one row share their structure
+
+Level: SHOULD
+Applies to: a row of `stat-card`s on an overview or a record page
+Rule: The cards of one row carry a label of at most three words, the figure, and the same optional parts on every card — a comparison of one line on each, or on none.
+Why: One card with a long label and a wrapping comparison beside three cards with a label and a value made four boxes of the tallest card's height, three of them mostly empty, and the row read as broken.
+Do: Give every card a short label, its figure and one comparison line; detail that only one card has goes into its comparison or a tooltip.
+Don't: Lengthen one card's label to carry its detail, or give one card of the row a part the others lack.
+Check: In every row of `stat-card`s, every label has three words or fewer, and either every card has a comparison or none does.