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

package/dist/docs/markdown.md

@@ -40,48 +40,48 @@ const tree = fromMarkedTokens(marked.lexer(source));
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tree` | `MarkdownNode \| null` | — | Markdown | O documento em mdast; nunca HTML |
-| `size` | `'md' \| 'lg' \| 'xl'` | lg | Markdown | O degrau de tipo da região, de prose |
-| `flow` | `'tight' \| 'normal' \| 'loose'` | normal | Markdown | O espaço entre blocos, de prose |
-| `status` | `'ready' \| 'error'` | ready | Markdown | error troca o documento pela parte error |
-| `loading` | `boolean` | false | Markdown | Um parágrafo de espera, depois do delay do skeleton |
-| `streaming` | `boolean` | false | Markdown | aria-busy enquanto a fonte chega |
-| `external` | `'new-tab' \| 'same-tab'` | new-tab | Markdown | Onde abre um link que sai da aplicação |
-| `headingAnchors` | `boolean` | false | Markdown | Um permalink em cada título |
-| `headingOffset` | `number` | 0 | Markdown | Somado ao nível de cada título, até seis |
-| `idPrefix` | `string` |  | Markdown | Antes de cada id gerado; obrigatório com duas regiões na página |
-| `alerts` | `boolean` | true | Markdown | Lê > [!NOTE] e os irmãos como alert |
-| `allow` | `string[]` | CommonMark + GFM sem html | Markdown | Os tipos mdast desenhados |
-| `unwrapDisallowed` | `boolean` | false | Markdown | Um tipo recusado entrega os filhos ao pai |
-| `transformUrl` | `(url, kind, node) => string \| null` | safeUrl | Markdown | A política de URL; null recusa |
-| `isExternal` | `(href) => boolean` | isExternalUrl | Markdown | Se um link sai da aplicação |
-| `renderers` | `MarkdownRenderers` | — | Markdown | Substitui o elemento de um tipo conhecido |
-| `extensions` | `MarkdownExtensions` | — | Markdown | Desenha um tipo que a família não conhece |
-| `messages` | `PartialMessages<MarkdownMessages>` | — | Markdown | As palavras da família sobre o idioma em vigor, chave a chave |
-| `empty` | `ReactNode` | — | Markdown | O conteúdo da parte empty |
-| `render` | `(props) => ReactNode` | — | Markdown | A raiz noutro elemento: article, section |
-| `ref` | `Ref<HTMLDivElement>` | — | Markdown | O elemento da raiz |
-| `MarkdownDefaultsProvider` | `external \| headingAnchors \| alerts \| allow \| transformUrl \| isExternal` | — | Aplicação | Decidido uma vez para todos os documentos por baixo; uma prop ganha |
-| `prepareMarkdown` | `(tree, options) => MarkdownDocument` | — | @slotted/core/markdown | headings para um índice, com os ids da página |
-| `completeMarkdown` | `(source) => string` | — | @slotted/core/markdown | Fecha uma fonte cortada antes do parser |
-| `fromMarkedTokens` | `(tokens) => MarkdownNode` | — | @slotted/core/markdown | O lexer do marked como mdast |
-| `CodeBlockDefaultsProvider` | `highlight` | — | Aplicação | O motor de realce de cada cerca |
-| `id, aria-*, data-*, on*` | `props nativas` | — | Markdown | Chegam à raiz |
+| `tree` | `MarkdownNode \| null` | — | Markdown | The document in mdast; never HTML |
+| `size` | `'md' \| 'lg' \| 'xl'` | lg | Markdown | The region’s type step, from prose |
+| `flow` | `'tight' \| 'normal' \| 'loose'` | normal | Markdown | The space between blocks, from prose |
+| `status` | `'ready' \| 'error'` | ready | Markdown | error replaces the document with the error part |
+| `loading` | `boolean` | false | Markdown | A waiting paragraph, after the skeleton delay |
+| `streaming` | `boolean` | false | Markdown | aria-busy while the source arrives |
+| `external` | `'new-tab' \| 'same-tab'` | new-tab | Markdown | Where a link that leaves the application opens |
+| `headingAnchors` | `boolean` | false | Markdown | A permalink on every heading |
+| `headingOffset` | `number` | 0 | Markdown | Added to the level of each heading, up to six |
+| `idPrefix` | `string` |  | Markdown | Before each generated id; required with two regions on the page |
+| `alerts` | `boolean` | true | Markdown | Reads > [!NOTE] and its siblings as alert |
+| `allow` | `string[]` | CommonMark + GFM without html | Markdown | The mdast types drawn |
+| `unwrapDisallowed` | `boolean` | false | Markdown | A refused type hands its children to the parent |
+| `transformUrl` | `(url, kind, node) => string \| null` | safeUrl | Markdown | The URL policy; null refuses |
+| `isExternal` | `(href) => boolean` | isExternalUrl | Markdown | Whether a link leaves the application |
+| `renderers` | `MarkdownRenderers` | — | Markdown | Replaces the element of a known type |
+| `extensions` | `MarkdownExtensions` | — | Markdown | Draws a type the family does not know |
+| `messages` | `PartialMessages<MarkdownMessages>` | — | Markdown | The family’s words over the current locale, key by key |
+| `empty` | `ReactNode` | — | Markdown | The content of the empty part |
+| `render` | `(props) => ReactNode` | — | Markdown | The root as another element: article, section |
+| `ref` | `Ref<HTMLDivElement>` | — | Markdown | The root element |
+| `MarkdownDefaultsProvider` | `external \| headingAnchors \| alerts \| allow \| transformUrl \| isExternal` | — | Application | Decided once for every document below; a prop wins |
+| `prepareMarkdown` | `(tree, options) => MarkdownDocument` | — | @slotted/core/markdown | headings for a table of contents, with the page’s ids |
+| `completeMarkdown` | `(source) => string` | — | @slotted/core/markdown | Closes a cut source before the parser |
+| `fromMarkedTokens` | `(tokens) => MarkdownNode` | — | @slotted/core/markdown | The marked lexer as mdast |
+| `CodeBlockDefaultsProvider` | `highlight` | — | Application | The highlighting engine of each fence |
+| `id, aria-*, data-*, on*` | `native props` | — | Markdown | Reach the root |
 
 ## Events
 
 | Name | Payload | When |
 | --- | --- | --- |
-| `onTaskChange` | `({ index, checked, offset }, request)` | Quando o leitor marca ou desmarca uma tarefa, com a razão pointer ou keyboard. A caixa não se move: a árvore nova do consumidor é que a move. |
-| `onRetry` | `(reason: 'pointer' \| 'keyboard')` | Quando o leitor pressiona o botão de repetir da parte error. |
+| `onTaskChange` | `({ index, checked, offset }, request)` | When the reader checks or unchecks a task, with the reason pointer or keyboard. The box does not move: the consumer’s new tree moves it. |
+| `onRetry` | `(reason: 'pointer' \| 'keyboard')` | When the reader presses the retry button of the error part. |
 
 ## Rules
 
-- Nenhuma string da fonte chega a innerHTML: a família recebe uma árvore, recusa HTML cru e esquemas executáveis por omissão, e cada elemento é criado pelo framework.
-- Os títulos são títulos de verdade, deslocáveis com headingOffset para caberem no esboço da página; a âncora fica na ordem de tabulação e na árvore de acessibilidade, com o nome "Link to section: <título>".
-- Uma tarefa é um checkbox nomeado pelo texto do item; sem onTaskChange é aria-readonly, não disabled, por isso continua focável e legível.
-- Cada referência de nota tem aria-describedby para o título escondido da secção, e cada retorno diz para qual referência volta; um alerta do GitHub é live="off", porque é conteúdo e não um evento.
-- streaming e loading põem aria-busy na raiz, e o skeleton faz um único anúncio educado; nada move o foco quando o conteúdo chega.
+- No source string reaches innerHTML: the family receives a tree, refuses raw HTML and executable schemes by default, and each element is created by the framework.
+- The headings are real headings, shiftable with headingOffset to fit the page outline; the anchor stays in the tab order and in the accessibility tree, with the name "Link to section: <heading>".
+- A task is a checkbox named by the item’s text; without onTaskChange it is aria-readonly, not disabled, so it stays focusable and readable.
+- Each note reference has aria-describedby pointing to the hidden heading of the section, and each return says which reference it goes back to; a GitHub alert is live="off", because it is content and not an event.
+- streaming and loading put aria-busy on the root, and the skeleton makes a single polite announcement; nothing moves focus when the content arrives.
 
 ## Tokens
 
@@ -89,9 +89,9 @@ const tree = fromMarkedTokens(marked.lexer(source));
 
 ## Examples
 
-### Um documento inteiro
+### A whole document
 
-Títulos com id estável, ênfase, código em linha, listas aninhadas, uma citação e uma régua: tudo em prose, cuja tipografia é a da região. Passe o ponteiro por um título para ver a âncora; com Tab ela aparece também.
+Headings with a stable id, emphasis, inline code, nested lists, a quote and a rule: all in prose, whose typography is the region’s. Hover a heading to see the anchor; with Tab it appears too.
 
 Excerpt — not a complete module
 
@@ -99,21 +99,21 @@ Excerpt — not a complete module
 <Markdown headingAnchors tree={tree} />;
 ```
 
-### Tabelas do GFM
+### GFM tables
 
-O alinhamento :-- e --: chega como start e end, por isso uma tabela vista em RTL mantém os preços contra a aresta onde a leitura termina. Uma tabela mais larga do que a coluna rola dentro da parte scroll de prose, que só ganha tabindex e nome enquanto transborda.
+The :-- and --: alignment arrives as start and end, so a table seen in RTL keeps the prices against the edge where reading ends. A table wider than the column scrolls inside the prose scroll part, which only gains tabindex and a name while it overflows.
 
 Excerpt — not a complete module
 
 ```markdown
-| Plano | Lugares |   Preço |
-| :---- | :-----: | ------: |
-| Team  |   10    | $120.00 |
+| Plan | Seats |   Price |
+| :--- | :---: | ------: |
+| Team |  10   | $120.00 |
 ```
 
-### Cercas com code-block
+### Fences with code-block
 
-Cada cerca é um CodeBlock: a linguagem da info string, e o que vem depois dela — title="…", {2} e showLineNumbers — chega como título, linha realçada e números. O realce de sintaxe é o do CodeBlockDefaultsProvider.
+Each fence is a CodeBlock: the language from the info string, and what comes after it — title="…", {2} and showLineNumbers — arrives as title, highlighted line and numbers. The syntax highlighting is that of the CodeBlockDefaultsProvider.
 
 Excerpt — not a complete module
 
@@ -124,9 +124,9 @@ await deploy({ env: 'production' });
 ```
 ````
 
-### Listas de tarefas
+### Task lists
 
-Sem onTaskChange as caixas são checkbox em readOnly: focáveis, anunciadas como só de leitura. Com ele, marcar uma tarefa pede a mudança com o índice e o offset na fonte; a caixa só se move quando a árvore nova chega.
+Without onTaskChange the boxes are checkboxes in readOnly: focusable, announced as read only. With it, checking a task requests the change with the index and the offset in the source; the box only moves when the new tree arrives.
 
 Excerpt — not a complete module
 
@@ -137,9 +137,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Alertas do GitHub
+### GitHub alerts
 
-> [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] e [!CAUTION] tornam-se alert em reach="section" e live="off" — conteúdo, não anúncio — nos tons accent, success, secondary, warning e danger. alerts={false} devolve a citação.
+> [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] and [!CAUTION] become an alert with reach="section" and live="off" — content, not an announcement — in the tones accent, success, secondary, warning and danger. alerts={false} gives back the quote.
 
 Excerpt — not a complete module
 
@@ -148,9 +148,9 @@ Excerpt — not a complete module
 > A deployment during a migration waits for the migration to finish.
 ```
 
-### Notas de rodapé
+### Footnotes
 
-Numeradas pela primeira referência, com uma seta de retorno por referência dentro do último parágrafo da nota. A secção tem um título escondido que dá nome ao conjunto; uma definição que ninguém referencia não é desenhada, como no GitHub.
+Numbered by the first reference, with one return arrow per reference inside the last paragraph of the note. The section has a hidden heading that names the set; a definition nobody references is not drawn, as on GitHub.
 
 Excerpt — not a complete module
 
@@ -158,9 +158,9 @@ Excerpt — not a complete module
 <Markdown messages={{ footnotes: 'Notas' }} tree={tree} />;
 ```
 
-### Links internos e externos
+### Internal and external links
 
-Um endereço absoluto http(s) sai da aplicação: é um Link com o glifo e a dica de nova aba. Um caminho relativo é um a simples. external="same-tab" mantém a aba; isExternal decide quais hosts são da casa.
+An absolute http(s) address leaves the application: it is a Link with the glyph and the new-tab hint. A relative path is a plain a. external="same-tab" keeps the tab; isExternal decides which hosts belong to the application.
 
 Excerpt — not a complete module
 
@@ -171,9 +171,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Sanitização por construção
+### Sanitization by construction
 
-A família nunca escreve innerHTML. HTML cru não é desenhado; javascript:, data: e as grafias disfarçadas perdem o link e ficam como texto; uma imagem recusada fica como o seu texto alternativo. transformUrl troca a política; allow restringe os tipos.
+The family never writes innerHTML. Raw HTML is not drawn; javascript:, data: and the disguised spellings lose the link and stay as text; a refused image stays as its alternative text. transformUrl swaps the policy; allow restricts the types.
 
 Excerpt — not a complete module
 
@@ -185,9 +185,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Renderizadores e extensões
+### Renderers and extensions
 
-renderers substitui o elemento de um tipo conhecido — aqui o link vira o link do router da aplicação. extensions desenha um tipo que a família não conhece: uma menção @nome que um passo sobre a árvore criou. Um tipo sem renderizador não aparece.
+renderers replaces the element of a known type — here the link becomes the application’s router link. extensions draws a type the family does not know: an @name mention that a pass over the tree created. A type without a renderer does not appear.
 
 Excerpt — not a complete module
 
@@ -201,9 +201,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Uma resposta que ainda está a chegar
+### An answer that is still arriving
 
-completeMarkdown fecha o que o fluxo deixou aberto — a cerca, o **, a crase, o link cortado — antes do parser. Os blocos já desenhados mantêm a chave e não voltam a montar; streaming põe aria-busy na região até ao fim.
+completeMarkdown closes what the stream left open — the fence, the **, the backtick, the cut link — before the parser. The blocks already drawn keep their key and do not mount again; streaming puts aria-busy on the region until the end.
 
 Excerpt — not a complete module
 
@@ -215,9 +215,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Carregando, vazio e erro
+### Loading, empty and error
 
-loading desenha um parágrafo de três linhas depois do delay do skeleton, na tipografia da região; vazio escreve messages.empty ou o nó do consumidor; status="error" troca o documento por uma mensagem e, com onRetry, um botão.
+loading draws a three-line paragraph after the skeleton delay, in the region’s typography; empty writes messages.empty or the consumer’s node; status="error" replaces the document with a message and, with onRetry, a button.
 
 Excerpt — not a complete module
 
@@ -230,9 +230,9 @@ Excerpt — not a complete module
 />;
 ```
 
-### Numa página de documentação
+### On a documentation page
 
-Container dá a medida, prepareMarkdown dá o índice com os mesmos ids que a página desenha, e MarkdownDefaultsProvider diz uma vez, em português, o que a família escreve.
+Container gives the measure, prepareMarkdown gives the table of contents with the same ids the page draws, and MarkdownDefaultsProvider says once, in Portuguese, what the family writes.
 
 Excerpt — not a complete module
 
@@ -246,9 +246,9 @@ const { headings } = prepareMarkdown(tree);
 </MarkdownDefaultsProvider>;
 ```
 
-### Teclado e leitor de ecrã
+### Keyboard and screen reader
 
-Tab percorre as âncoras dos títulos, os links, uma tabela que rola, os controlos de um bloco de código, as tarefas editáveis e os retornos das notas. A família não acrescenta tecla nenhuma: cada parada é de uma família composta.
+Tab goes through the heading anchors, the links, a table that scrolls, the controls of a code block, the editable tasks and the footnote returns. The family adds no key: each stop belongs to a composed family.
 
 Excerpt — not a complete module
 

package/dist/docs/menu.json

@@ -12,6 +12,10 @@
       "md",
       "lg"
     ],
+    "width": [
+      "content",
+      "anchor"
+    ],
     "side": [
       "bottom",
       "top",
@@ -84,6 +88,7 @@
       "nativeElement": "div",
       "defaults": {
         "size": "md",
+        "width": "content",
         "side": "bottom",
         "align": "start",
         "mount": "active",
@@ -309,6 +314,13 @@
           "appliesTo": "Menu",
           "description": "The width of the surface and the height of its items."
         },
+        {
+          "name": "width",
+          "type": "'content' | 'anchor'",
+          "defaultValue": "content",
+          "appliesTo": "Menu",
+          "description": "content: the surface takes its own measure; anchor: it is exactly as wide as its trigger, capped by the available width. A submenu is always content."
+        },
         {
           "name": "side",
           "type": "'top' | 'bottom' | 'inline-start' | 'inline-end' | 'left' | 'right'",

package/dist/docs/menu.md

@@ -74,6 +74,7 @@ export default function MenuBasic() {
 | `defaultValue` | `string` | — | MenuRadioGroup | The value an uncontrolled group starts with. |
 | `onValueChange` | `(value, request) => void` | — | MenuRadioGroup | Called before the chosen value changes, with pointer or keyboard as the reason. |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | Menu | The width of the surface and the height of its items. |
+| `width` | `'content' \| 'anchor'` | content | Menu | content: the surface takes its own measure; anchor: it is exactly as wide as its trigger, capped by the available width. A submenu is always content. |
 | `side` | `'top' \| 'bottom' \| 'inline-start' \| 'inline-end' \| 'left' \| 'right'` | bottom | Menu | The edge of the trigger the surface opens from. inline-start and inline-end follow the reading direction. |
 | `align` | `'start' \| 'center' \| 'end'` | start | Menu | Where the surface sits along that edge. |
 | `anchor` | `PositionerAnchor \| null` | — | Menu | What the surface is positioned against instead of the trigger, such as a table row or a point. Focus still returns to the trigger. |
@@ -130,6 +131,7 @@ export default function MenuBasic() {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
+| `width` | `content`, `anchor` | `content` |
 | `side` | `bottom`, `top`, `inline-start`, `inline-end`, `left`, `right` | `bottom` |
 | `align` | `start`, `center`, `end` | `start` |
 | `mount` | `active`, `lazy`, `eager` | `active` |

package/dist/docs/message.json

@@ -36,6 +36,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -483,7 +484,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "Bubble",
           "description": "The tone. Falls back to the row (end is accent), then the provider"
@@ -698,6 +699,11 @@
     "--slotted-tone-danger-solid-active",
     "--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-on-solid",
     "--slotted-tone-secondary-solid",
     "--slotted-tone-secondary-subtle-active",

package/dist/docs/message.md

@@ -95,7 +95,7 @@ Excerpt — not a complete module
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `variant` | `'solid' \| 'soft' \| 'outline' \| 'plain'` | soft | Bubble | The painting. Falls back to the row (end is solid, thread is plain), then the provider |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | Bubble | The tone. Falls back to the row (end is accent), then the provider |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | Bubble | The tone. Falls back to the row (end is accent), then the provider |
 | `maxLines` | `number` | — | Bubble | Lines shown before the text is clamped behind “Show more” |
 | `revealed` | `boolean` | — | Bubble | The clamped text shown whole. Present means controlled |
 | `defaultRevealed` | `boolean` | false | Bubble | Whether an uncontrolled clamp starts open |
@@ -139,7 +139,7 @@ Excerpt — not a complete module
 | `actionsVisibility` | `always`, `hover` | `hover` |
 | `status` | `sending`, `sent`, `delivered`, `read`, `failed`, `streaming` | — |
 | `variant` | `solid`, `soft`, `outline`, `plain` | `soft` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `secondary` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `secondary` |
 
 ## Rules
 
@@ -157,7 +157,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--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-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-xs`, `--slotted-message-avatar-size`, `--slotted-message-bubble-padding-block`, `--slotted-message-bubble-padding-inline`, `--slotted-message-bubble-radius`, `--slotted-message-bubble-radius-joined`, `--slotted-message-bubble-share`, `--slotted-message-column-gap`, `--slotted-message-retry-state-layer`, `--slotted-message-run-gap`, `--slotted-message-stack-gap`, `--slotted-message-state-layer-active`, `--slotted-message-state-layer-hover`, `--slotted-message-thread-avatar-size`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--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-solid-active`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--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-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-md`, `--slotted-avatar-size-sm`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--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-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-xs`, `--slotted-message-avatar-size`, `--slotted-message-bubble-padding-block`, `--slotted-message-bubble-padding-inline`, `--slotted-message-bubble-radius`, `--slotted-message-bubble-radius-joined`, `--slotted-message-bubble-share`, `--slotted-message-column-gap`, `--slotted-message-retry-state-layer`, `--slotted-message-run-gap`, `--slotted-message-stack-gap`, `--slotted-message-state-layer-active`, `--slotted-message-state-layer-hover`, `--slotted-message-thread-avatar-size`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-surface-raised`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--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-solid-active`, `--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-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--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
 

package/dist/docs/multi-select.json

@@ -940,6 +940,7 @@
     "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/dist/docs/multi-select.md

@@ -214,7 +214,7 @@ export default function MultiSelectBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--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-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--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-line-height-sm`, `--slotted-multi-select-action-active-background`, `--slotted-multi-select-action-color`, `--slotted-multi-select-action-hover-background`, `--slotted-multi-select-action-size`, `--slotted-multi-select-arrow-color`, `--slotted-multi-select-autofill-background`, `--slotted-multi-select-background`, `--slotted-multi-select-border-color`, `--slotted-multi-select-color`, `--slotted-multi-select-content-border-color`, `--slotted-multi-select-content-padding-block`, `--slotted-multi-select-content-padding-inline`, `--slotted-multi-select-content-radius`, `--slotted-multi-select-content-shadow`, `--slotted-multi-select-content-text`, `--slotted-multi-select-content-text-muted`, `--slotted-multi-select-counter-color`, `--slotted-multi-select-counter-complete-color`, `--slotted-multi-select-disabled-background`, `--slotted-multi-select-disabled-border-color`, `--slotted-multi-select-disabled-color`, `--slotted-multi-select-field-basis`, `--slotted-multi-select-field-min`, `--slotted-multi-select-highlight`, `--slotted-multi-select-highlight-active`, `--slotted-multi-select-highlight-ring`, `--slotted-multi-select-hover-border-color`, `--slotted-multi-select-icon-size-min`, `--slotted-multi-select-invalid-border-color`, `--slotted-multi-select-invalid-edge-width`, `--slotted-multi-select-invalid-focus-ring-color`, `--slotted-multi-select-item-radius`, `--slotted-multi-select-measure`, `--slotted-multi-select-open-border-color`, `--slotted-multi-select-placeholder-color`, `--slotted-multi-select-plain-hover-background`, `--slotted-multi-select-radius`, `--slotted-multi-select-readonly-background`, `--slotted-multi-select-selected-color`, `--slotted-multi-select-separator-color`, `--slotted-multi-select-shadow`, `--slotted-multi-select-subtle-background`, `--slotted-multi-select-subtle-border-color`, `--slotted-multi-select-subtle-hover-background`, `--slotted-multi-select-surface`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--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-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--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-line-height-sm`, `--slotted-multi-select-action-active-background`, `--slotted-multi-select-action-color`, `--slotted-multi-select-action-hover-background`, `--slotted-multi-select-action-size`, `--slotted-multi-select-arrow-color`, `--slotted-multi-select-autofill-background`, `--slotted-multi-select-background`, `--slotted-multi-select-border-color`, `--slotted-multi-select-color`, `--slotted-multi-select-content-border-color`, `--slotted-multi-select-content-padding-block`, `--slotted-multi-select-content-padding-inline`, `--slotted-multi-select-content-radius`, `--slotted-multi-select-content-shadow`, `--slotted-multi-select-content-text`, `--slotted-multi-select-content-text-muted`, `--slotted-multi-select-counter-color`, `--slotted-multi-select-counter-complete-color`, `--slotted-multi-select-disabled-background`, `--slotted-multi-select-disabled-border-color`, `--slotted-multi-select-disabled-color`, `--slotted-multi-select-field-basis`, `--slotted-multi-select-field-min`, `--slotted-multi-select-highlight`, `--slotted-multi-select-highlight-active`, `--slotted-multi-select-highlight-ring`, `--slotted-multi-select-hover-border-color`, `--slotted-multi-select-icon-size-min`, `--slotted-multi-select-invalid-border-color`, `--slotted-multi-select-invalid-edge-width`, `--slotted-multi-select-invalid-focus-ring-color`, `--slotted-multi-select-item-radius`, `--slotted-multi-select-measure`, `--slotted-multi-select-open-border-color`, `--slotted-multi-select-placeholder-color`, `--slotted-multi-select-plain-hover-background`, `--slotted-multi-select-radius`, `--slotted-multi-select-readonly-background`, `--slotted-multi-select-selected-color`, `--slotted-multi-select-separator-color`, `--slotted-multi-select-shadow`, `--slotted-multi-select-subtle-background`, `--slotted-multi-select-subtle-border-color`, `--slotted-multi-select-subtle-hover-background`, `--slotted-multi-select-surface`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 

package/dist/docs/notification-center.json

@@ -32,6 +32,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -511,6 +512,9 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-solid",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",

package/dist/docs/notification-center.md

@@ -97,7 +97,7 @@ Excerpt — not a complete module
 | `growing` | `none`, `button`, `scroll` | `none` |
 | `arrivals` | `hold`, `show` | `hold` |
 | `timeFormat` | `relative`, `absolute` | `relative` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | — |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | — |
 | `controls` | `both`, `read`, `dismiss`, `none` | `both` |
 
 ## Rules
@@ -110,7 +110,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-avatar-size-sm`, `--slotted-avatar-size-xs`, `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-line-height`, `--slotted-control-padding-inline-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-highlight-tint-opacity`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-notification-center-background`, `--slotted-notification-center-border`, `--slotted-notification-center-description-clamp`, `--slotted-notification-center-gap-md`, `--slotted-notification-center-gap-sm`, `--slotted-notification-center-inset-block-md`, `--slotted-notification-center-inset-block-sm`, `--slotted-notification-center-inset-inline-md`, `--slotted-notification-center-inset-inline-sm`, `--slotted-notification-center-min-inline-size-sm`, `--slotted-notification-center-scrollbar-thumb-color`, `--slotted-notification-center-scrollbar-track-color`, `--slotted-notification-center-title-clamp`, `--slotted-notification-center-title-size-md`, `--slotted-notification-center-title-size-sm`, `--slotted-radius-full`, `--slotted-space-1`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--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-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-avatar-size-sm`, `--slotted-avatar-size-xs`, `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-line-height`, `--slotted-control-padding-inline-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-highlight-tint-opacity`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-notification-center-background`, `--slotted-notification-center-border`, `--slotted-notification-center-description-clamp`, `--slotted-notification-center-gap-md`, `--slotted-notification-center-gap-sm`, `--slotted-notification-center-inset-block-md`, `--slotted-notification-center-inset-block-sm`, `--slotted-notification-center-inset-inline-md`, `--slotted-notification-center-inset-inline-sm`, `--slotted-notification-center-min-inline-size-sm`, `--slotted-notification-center-scrollbar-thumb-color`, `--slotted-notification-center-scrollbar-track-color`, `--slotted-notification-center-title-clamp`, `--slotted-notification-center-title-size-md`, `--slotted-notification-center-title-size-sm`, `--slotted-radius-full`, `--slotted-space-1`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--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-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/number-field.json

@@ -388,6 +388,7 @@
     "--slotted-border-subtle",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/dist/docs/number-field.md

@@ -108,7 +108,7 @@ export default function NumberFieldBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--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-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-number-field-action-size`, `--slotted-number-field-adornment-color`, `--slotted-number-field-background`, `--slotted-number-field-border-color`, `--slotted-number-field-color`, `--slotted-number-field-disabled-background`, `--slotted-number-field-disabled-border-color`, `--slotted-number-field-disabled-color`, `--slotted-number-field-hover-border-color`, `--slotted-number-field-icon-size-min`, `--slotted-number-field-invalid-border-color`, `--slotted-number-field-invalid-edge-width`, `--slotted-number-field-invalid-focus-ring-color`, `--slotted-number-field-placeholder-color`, `--slotted-number-field-plain-hover-background`, `--slotted-number-field-radius`, `--slotted-number-field-readonly-background`, `--slotted-number-field-readonly-border-color`, `--slotted-number-field-scrub-active-color`, `--slotted-number-field-shadow`, `--slotted-number-field-stepper-active-background`, `--slotted-number-field-stepper-color`, `--slotted-number-field-stepper-disabled-background`, `--slotted-number-field-stepper-disabled-color`, `--slotted-number-field-stepper-hover-background`, `--slotted-number-field-stepper-size`, `--slotted-number-field-subtle-background`, `--slotted-number-field-subtle-border-color`, `--slotted-number-field-subtle-hover-background`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--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-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-number-field-action-size`, `--slotted-number-field-adornment-color`, `--slotted-number-field-background`, `--slotted-number-field-border-color`, `--slotted-number-field-color`, `--slotted-number-field-disabled-background`, `--slotted-number-field-disabled-border-color`, `--slotted-number-field-disabled-color`, `--slotted-number-field-hover-border-color`, `--slotted-number-field-icon-size-min`, `--slotted-number-field-invalid-border-color`, `--slotted-number-field-invalid-edge-width`, `--slotted-number-field-invalid-focus-ring-color`, `--slotted-number-field-placeholder-color`, `--slotted-number-field-plain-hover-background`, `--slotted-number-field-radius`, `--slotted-number-field-readonly-background`, `--slotted-number-field-readonly-border-color`, `--slotted-number-field-scrub-active-color`, `--slotted-number-field-shadow`, `--slotted-number-field-stepper-active-background`, `--slotted-number-field-stepper-color`, `--slotted-number-field-stepper-disabled-background`, `--slotted-number-field-stepper-disabled-color`, `--slotted-number-field-stepper-hover-background`, `--slotted-number-field-stepper-size`, `--slotted-number-field-subtle-background`, `--slotted-number-field-subtle-border-color`, `--slotted-number-field-subtle-hover-background`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/otp-input.json

@@ -313,6 +313,7 @@
     "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-gap-lg",
     "--slotted-control-gap-md",

package/dist/docs/otp-input.md

@@ -89,7 +89,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-2xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-weight-medium`, `--slotted-otp-input-autofill-background`, `--slotted-otp-input-background`, `--slotted-otp-input-border-color`, `--slotted-otp-input-caret-width`, `--slotted-otp-input-color`, `--slotted-otp-input-current-border-color`, `--slotted-otp-input-disabled-background`, `--slotted-otp-input-disabled-border-color`, `--slotted-otp-input-disabled-color`, `--slotted-otp-input-font-weight`, `--slotted-otp-input-group-gap`, `--slotted-otp-input-hover-border-color`, `--slotted-otp-input-invalid-border-color`, `--slotted-otp-input-invalid-edge-width`, `--slotted-otp-input-invalid-focus-ring-color`, `--slotted-otp-input-mask-size`, `--slotted-otp-input-placeholder-color`, `--slotted-otp-input-radius`, `--slotted-otp-input-readonly-background`, `--slotted-otp-input-selection-background`, `--slotted-otp-input-separator-color`, `--slotted-otp-input-separator-size`, `--slotted-otp-input-shadow`, `--slotted-otp-input-subtle-background`, `--slotted-otp-input-subtle-border-color`, `--slotted-otp-input-subtle-hover-background`, `--slotted-radius-full`, `--slotted-space-4`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-2xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-weight-medium`, `--slotted-otp-input-autofill-background`, `--slotted-otp-input-background`, `--slotted-otp-input-border-color`, `--slotted-otp-input-caret-width`, `--slotted-otp-input-color`, `--slotted-otp-input-current-border-color`, `--slotted-otp-input-disabled-background`, `--slotted-otp-input-disabled-border-color`, `--slotted-otp-input-disabled-color`, `--slotted-otp-input-font-weight`, `--slotted-otp-input-group-gap`, `--slotted-otp-input-hover-border-color`, `--slotted-otp-input-invalid-border-color`, `--slotted-otp-input-invalid-edge-width`, `--slotted-otp-input-invalid-focus-ring-color`, `--slotted-otp-input-mask-size`, `--slotted-otp-input-placeholder-color`, `--slotted-otp-input-radius`, `--slotted-otp-input-readonly-background`, `--slotted-otp-input-selection-background`, `--slotted-otp-input-separator-color`, `--slotted-otp-input-separator-size`, `--slotted-otp-input-shadow`, `--slotted-otp-input-subtle-background`, `--slotted-otp-input-subtle-border-color`, `--slotted-otp-input-subtle-hover-background`, `--slotted-radius-full`, `--slotted-space-4`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/page-header.json

@@ -93,7 +93,7 @@
           "part": "root",
           "element": "header, or the element render returns",
           "required": true,
-          "purpose": "The family: sticky with a negative offset the size of the header area, carrying data-ui=\"page-header\", the four axes, data-expanded, data-revealed, data-loading and the measured facts data-scrolled, data-stuck and data-compact. Below 600 pixels of its own width it carries data-compact, is not sticky and scrolls away with the page. It is its own container, so the rows reflow on its own inline size."
+          "purpose": "The family: sticky with a negative offset the size of the header area, carrying data-ui=\"page-header\", the four axes, data-expanded, data-revealed, data-loading and the measured facts data-scrolled, data-stuck and data-compact. In a frame narrower than 600 pixels — a phone — it carries data-compact, is not sticky and scrolls away with the page. It is its own container, so the rows reflow on its own inline size."
         },
         {
           "part": "title-area",
@@ -412,6 +412,7 @@
     "--slotted-line-height-md",
     "--slotted-line-height-sm",
     "--slotted-line-height-xl",
+    "--slotted-page-header-backdrop-filter",
     "--slotted-page-header-background",
     "--slotted-page-header-border",
     "--slotted-page-header-control-size",
@@ -534,7 +535,7 @@
     {
       "id": "progress",
       "title": "A refresh of what is on screen",
-      "note": "PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms. With tabs that line is the one the pill straddles, never the tab strip’s edge; without them it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.",
+      "note": "PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms, wherever it is written among the parts. With a pill over the tabs that line is the one the pill straddles, never the tab strip’s edge; otherwise it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.",
       "language": "tsx",
       "source": "<PageHeader>\n  <PageHeaderTitleArea>…</PageHeaderTitleArea>\n  <PageHeaderControls>…</PageHeaderControls>\n  <PageHeaderProgress loading={isRefetching} />\n  <PageHeaderTabs>…</PageHeaderTabs>\n</PageHeader>;\n",
       "verdict": "excerpt"

package/dist/docs/page-header.md

@@ -105,7 +105,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--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-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--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-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-page-header-backdrop-filter`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -287,7 +287,7 @@ Excerpt — not a complete module
 
 ### A refresh of what is on screen
 
-PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms. With tabs that line is the one the pill straddles, never the tab strip’s edge; without them it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.
+PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms, wherever it is written among the parts. With a pill over the tabs that line is the one the pill straddles, never the tab strip’s edge; otherwise it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.
 
 Excerpt — not a complete module
 

package/dist/docs/page.json

@@ -219,6 +219,7 @@
       "accessibility": [
         "The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. landmark=\"none\" is for the page that is not the document’s — inside a drawer, a dialog or the detail pane of a master–detail layout — and it renders a div so the document keeps one main.",
         "The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise. A reader walking the page’s controls finds “Page actions” before the buttons in it.",
+        "Content outside PageBody receives no inset: the inset lives on the body, so content written straight into Page is drawn against the viewport edges. In development, Page warns once when it holds content and no PageBody.",
         "The outline is typography’s. The body is one HeadingLevel deeper than the header, so a Section written directly in it takes h2 under the header’s h1, and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.",
         "The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.",
         "Scrolling is the platform’s. The page never writes a scroll position, and under scroll=\"self\" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus."

package/dist/docs/page.md

@@ -64,6 +64,7 @@ Excerpt — not a complete module
 
 - The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. landmark="none" is for the page that is not the document’s — inside a drawer, a dialog or the detail pane of a master–detail layout — and it renders a div so the document keeps one main.
 - The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise. A reader walking the page’s controls finds “Page actions” before the buttons in it.
+- Content outside PageBody receives no inset: the inset lives on the body, so content written straight into Page is drawn against the viewport edges. In development, Page warns once when it holds content and no PageBody.
 - The outline is typography’s. The body is one HeadingLevel deeper than the header, so a Section written directly in it takes h2 under the header’s h1, and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.
 - The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.
 - Scrolling is the platform’s. The page never writes a scroll position, and under scroll="self" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus.