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

package/docs/markdown.md

@@ -44,48 +44,48 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tree` | `MarkdownNode \| null` | — | [slMarkdown] | O documento em mdast; nunca HTML |
-| `size` | `'md' \| 'lg' \| 'xl'` | lg | [slMarkdown] | O degrau de tipo da região, de prose |
-| `flow` | `'tight' \| 'normal' \| 'loose'` | normal | [slMarkdown] | O espaço entre blocos, de prose |
-| `status` | `'ready' \| 'error'` | ready | [slMarkdown] | error troca o documento pela parte error |
-| `loading` | `boolean` | false | [slMarkdown] | Um parágrafo de espera, depois do delay do skeleton |
-| `streaming` | `boolean` | false | [slMarkdown] | aria-busy enquanto a fonte chega |
-| `external` | `'new-tab' \| 'same-tab'` | new-tab | [slMarkdown] | Onde abre um link que sai da aplicação |
-| `headingAnchors` | `boolean` | false | [slMarkdown] | Um permalink em cada título |
-| `headingOffset` | `number` | 0 | [slMarkdown] | Somado ao nível de cada título, até seis |
-| `idPrefix` | `string` |  | [slMarkdown] | Antes de cada id gerado; obrigatório com duas regiões na página |
-| `alerts` | `boolean` | true | [slMarkdown] | Lê > [!NOTE] e os irmãos como alert |
-| `allow` | `string[]` | CommonMark + GFM sem html | [slMarkdown] | Os tipos mdast desenhados |
-| `unwrapDisallowed` | `boolean` | false | [slMarkdown] | Um tipo recusado entrega os filhos ao pai |
-| `transformUrl` | `(url, kind, node) => string \| null` | safeUrl | [slMarkdown] | A política de URL; null recusa |
-| `isExternal` | `(href) => boolean` | isExternalUrl | [slMarkdown] | Se um link sai da aplicação |
-| `messages` | `PartialMessages<MarkdownMessages>` | — | [slMarkdown] | As palavras da família sobre o idioma em vigor, chave a chave |
-| `editableTasks` | `boolean` | false | [slMarkdown] | Liga os checkboxes das tarefas; um output não diz se alguém o ouve |
-| `retryable` | `boolean` | false | [slMarkdown] | Desenha o botão de repetir na parte error |
-| `ng-template[slMarkdownNode]` | `kind \| type` | — | conteúdo | Substitui o elemento de um tipo conhecido, ou desenha um tipo desconhecido; recebe o elemento preparado |
-| `[slMarkdownChildren]` | `MarkdownElement` | — | ng-container | Desenha os filhos de um elemento dentro de um template, sem elemento próprio |
-| `[slMarkdownEmpty]` | `conteúdo projetado` | — | conteúdo | O conteúdo da parte empty |
-| `exportAs` | `slMarkdown` | — | [slMarkdown] | document(): os headings e as notas, com os ids da página |
-| `provideMarkdownDefaults` | `external \| headingAnchors \| alerts \| allow \| transformUrl \| isExternal` | — | Aplicação | Decidido uma vez para todos os documentos por baixo; um input 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 |
-| `id, aria-*, data-*` | `atributos nativos` | — | [slMarkdown] | Ficam no elemento do consumidor |
+| `tree` | `MarkdownNode \| null` | — | [slMarkdown] | The document in mdast; never HTML |
+| `size` | `'md' \| 'lg' \| 'xl'` | lg | [slMarkdown] | The region’s type step, from prose |
+| `flow` | `'tight' \| 'normal' \| 'loose'` | normal | [slMarkdown] | The space between blocks, from prose |
+| `status` | `'ready' \| 'error'` | ready | [slMarkdown] | error replaces the document with the error part |
+| `loading` | `boolean` | false | [slMarkdown] | A waiting paragraph, after the skeleton delay |
+| `streaming` | `boolean` | false | [slMarkdown] | aria-busy while the source arrives |
+| `external` | `'new-tab' \| 'same-tab'` | new-tab | [slMarkdown] | Where a link that leaves the application opens |
+| `headingAnchors` | `boolean` | false | [slMarkdown] | A permalink on every heading |
+| `headingOffset` | `number` | 0 | [slMarkdown] | Added to the level of each heading, up to six |
+| `idPrefix` | `string` |  | [slMarkdown] | Before each generated id; required with two regions on the page |
+| `alerts` | `boolean` | true | [slMarkdown] | Reads > [!NOTE] and its siblings as alert |
+| `allow` | `string[]` | CommonMark + GFM without html | [slMarkdown] | The mdast types drawn |
+| `unwrapDisallowed` | `boolean` | false | [slMarkdown] | A refused type hands its children to the parent |
+| `transformUrl` | `(url, kind, node) => string \| null` | safeUrl | [slMarkdown] | The URL policy; null refuses |
+| `isExternal` | `(href) => boolean` | isExternalUrl | [slMarkdown] | Whether a link leaves the application |
+| `messages` | `PartialMessages<MarkdownMessages>` | — | [slMarkdown] | The family’s words over the current locale, key by key |
+| `editableTasks` | `boolean` | false | [slMarkdown] | Turns on the task checkboxes; an output does not say whether anyone listens to it |
+| `retryable` | `boolean` | false | [slMarkdown] | Draws the retry button in the error part |
+| `ng-template[slMarkdownNode]` | `kind \| type` | — | content | Replaces the element of a known type, or draws an unknown type; receives the prepared element |
+| `[slMarkdownChildren]` | `MarkdownElement` | — | ng-container | Draws the children of an element inside a template, without an element of its own |
+| `[slMarkdownEmpty]` | `projected content` | — | content | The content of the empty part |
+| `exportAs` | `slMarkdown` | — | [slMarkdown] | document(): the headings and the notes, with the page’s ids |
+| `provideMarkdownDefaults` | `external \| headingAnchors \| alerts \| allow \| transformUrl \| isExternal` | — | Application | Decided once for every document below; an input 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 |
+| `id, aria-*, data-*` | `native attributes` | — | [slMarkdown] | Stay on the consumer’s element |
 
 ## Events
 
 | Name | Payload | When |
 | --- | --- | --- |
-| `taskChange` | `{ index, checked, offset, request }` | Quando o leitor marca ou desmarca uma tarefa com editableTasks ligado, com a razão pointer ou keyboard em request. A caixa não se move: a árvore nova do consumidor é que a move. |
-| `retry` | `'pointer' \| 'keyboard'` | Quando o leitor pressiona o botão de repetir da parte error, desenhado com retryable. |
+| `taskChange` | `{ index, checked, offset, request }` | When the reader checks or unchecks a task with editableTasks on, with the reason pointer or keyboard in request. The box does not move: the consumer’s new tree moves it. |
+| `retry` | `'pointer' \| 'keyboard'` | When the reader presses the retry button of the error part, drawn with retryable. |
 
 ## 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 editableTasks é 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 editableTasks 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
 
@@ -93,9 +93,9 @@ Excerpt — not a complete module
 
 ## 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
 
@@ -103,21 +103,21 @@ Excerpt — not a complete module
 <div slMarkdown headingAnchors [tree]="tree"></div>
 ```
 
-### 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
 
@@ -128,9 +128,9 @@ await deploy({ env: 'production' });
 ```
 ````
 
-### Listas de tarefas
+### Task lists
 
-Sem editableTasks 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 editableTasks 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
 
@@ -143,9 +143,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### 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
 
@@ -154,9 +154,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
 
@@ -164,9 +164,9 @@ Excerpt — not a complete module
 <div slMarkdown [messages]="{ footnotes: 'Notas' }" [tree]="tree"></div>
 ```
 
-### 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
 
@@ -174,9 +174,9 @@ Excerpt — not a complete module
 <div slMarkdown [isExternal]="isOwnDomainInternal" [tree]="tree"></div>
 ```
 
-### 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
 
@@ -189,9 +189,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### Renderizadores e extensões
+### Renderers and extensions
 
-ng-template[slMarkdownNode] com o nome de um tipo conhecido substitui o seu elemento — aqui o link vira o routerLink da aplicação — e slMarkdownChildren desenha os filhos no lugar. Com o nome de um tipo desconhecido, desenha esse tipo: aqui uma menção a uma pessoa, que um passo sobre a árvore criou. Um tipo sem renderizador não aparece.
+ng-template[slMarkdownNode] with the name of a known type replaces its element — here the link becomes the application’s routerLink — and slMarkdownChildren draws the children in place. With the name of an unknown type, it draws that type: here a mention of a person, which a pass over the tree created. A type without a renderer does not appear.
 
 Excerpt — not a complete module
 
@@ -206,9 +206,9 @@ Excerpt — not a complete module
 </div>
 ```
 
-### 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
 
@@ -221,9 +221,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### 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 conteúdo projetado em slMarkdownEmpty; status="error" troca o documento por uma mensagem e, com retryable, um botão que emite retry.
+loading draws a three-line paragraph after the skeleton delay, in the region’s typography; empty writes messages.empty or the content projected in slMarkdownEmpty; status="error" replaces the document with a message and, with retryable, a button that emits retry.
 
 Excerpt — not a complete module
 
@@ -236,18 +236,18 @@ Excerpt — not a complete module
   [tree]="tree()"
   (retry)="reload()"
 >
-  <span slMarkdownEmpty>Este serviço ainda não tem runbook.</span>
+  <span slMarkdownEmpty>This service has no runbook yet.</span>
 </div>
 ```
 
-### Numa página de documentação
+### On a documentation page
 
-slContainer dá a medida, prepareMarkdown dá o índice com os mesmos ids que a página desenha — e exportAs dá o mesmo document() a partir do template —, e provideMarkdownDefaults diz uma vez, em português, o que a família escreve.
+slContainer gives the measure, prepareMarkdown gives the table of contents with the same ids the page draws — and exportAs gives the same document() from the template —, and provideMarkdownDefaults says once, in Portuguese, what the family writes.
 
 Excerpt — not a complete module
 
 ```html
-<nav aria-label="Nesta página">
+<nav aria-label="On this page">
   @for (heading of outline.headings; track heading.id) {
     <a [href]="'#' + heading.id">{{ heading.text }}</a>
   }
@@ -255,9 +255,9 @@ Excerpt — not a complete module
 <div slContainer size="measure"><div slMarkdown headingAnchors [tree]="tree"></div></div>
 ```
 
-### 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/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",
@@ -269,6 +274,13 @@
           "appliesTo": "sl-menu",
           "description": "The width of the surface and the height of its items."
         },
+        {
+          "name": "width",
+          "type": "'content' | 'anchor'",
+          "defaultValue": "content",
+          "appliesTo": "sl-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/docs/menu.md

@@ -69,6 +69,7 @@ export class MenuBasic {}
 | `value` | `string \| undefined` | — | sl-menu, sl-menu-radio-group, button[slMenuRadioItem] | On an sl-menu inside sl-menubar, the name the bar knows it by; a menu on its own needs none. On sl-menu-radio-group, the chosen value, bound with [(value)]. On a radio item, the value the item stands for. |
 | `checked` | `model<boolean>` | false | button[slMenuCheckboxItem] | Whether the option is on. Bind [(checked)] to read and write it. |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | sl-menu | The width of the surface and the height of its items. |
+| `width` | `'content' \| 'anchor'` | content | sl-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 | sl-menu | The edge of the trigger the surface opens from. inline-start and inline-end follow the reading direction. |
 | `align` | `'start' \| 'center' \| 'end'` | start | sl-menu | Where the surface sits along that edge. |
 | `mount` | `'active' \| 'lazy' \| 'eager'` | active | sl-menu | When the surface is in the document: only while open, from the first open on, or from the start. A surface kept while closed carries inert. |
@@ -122,6 +123,7 @@ export class 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/docs/message.json

@@ -36,6 +36,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -473,7 +474,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "slBubble",
           "description": "The tone. Falls back to the row (end is accent), then the token"
@@ -681,6 +682,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/docs/message.md

@@ -97,7 +97,7 @@ Excerpt — not a complete module
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `variant` | `'solid' \| 'soft' \| 'outline' \| 'plain'` | soft | slBubble | The painting. Falls back to the row (end is solid, thread is plain), then the token |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | slBubble | The tone. Falls back to the row (end is accent), then the token |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | slBubble | The tone. Falls back to the row (end is accent), then the token |
 | `maxLines` | `number` | — | slBubble | Lines shown before the text is clamped behind “Show more” |
 | `revealed` | `boolean (model)` | false | slBubble | The clamped text shown whole; two-way with [(revealed)] |
 | `defaultRevealed` | `boolean` | false | slBubble | An unbound [revealed] is the starting state; the component then holds it |
@@ -140,7 +140,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
 
@@ -158,7 +158,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/docs/multi-select.json

@@ -912,6 +912,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/docs/multi-select.md

@@ -206,7 +206,7 @@ export class 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/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/docs/notification-center.md

@@ -100,7 +100,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
@@ -113,7 +113,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/docs/number-field.json

@@ -387,6 +387,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/docs/number-field.md

@@ -130,7 +130,7 @@ export class 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/docs/otp-input.json

@@ -315,6 +315,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/docs/otp-input.md

@@ -97,7 +97,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/docs/page-header.json

@@ -95,7 +95,7 @@
           "part": "root",
           "element": "the header carrying slPageHeader",
           "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",
@@ -221,7 +221,7 @@
           "part": "progress",
           "element": "the consumer’s element carrying slPageHeaderProgress, holding one [slProgressBar] at placement=\"edge-end\"",
           "required": false,
-          "purpose": "A refresh of what is already on screen. A row one hairline tall and the header’s whole width, written after the controls and before the tabs: there the bar covers the line the pill straddles, and with no tabs the root’s own hairline. It draws nothing while loading is true or inside a region that is aria-busy."
+          "purpose": "A refresh of what is already on screen. A row one hairline tall and the header’s whole width, wherever it is written among the parts: the bar covers the line the pill straddles when a pill stands over the tabs, and the root’s own hairline otherwise. It draws nothing while loading is true or inside a region that is aria-busy."
         }
       ],
       "api": [
@@ -403,6 +403,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",
@@ -525,7 +526,7 @@
     {
       "id": "progress",
       "title": "A refresh of what is on screen",
-      "note": "slPageHeaderProgress 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": "slPageHeaderProgress 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": "html",
       "source": "<header slPageHeader>\n  <div slPageHeaderTitleArea>…</div>\n  <div slPageHeaderControls>…</div>\n  <div slPageHeaderProgress [loading]=\"refreshing()\"></div>\n  <div slPageHeaderTabs>…</div>\n</header>\n",
       "verdict": "excerpt"

package/docs/page-header.md

@@ -107,7 +107,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
 
@@ -260,7 +260,7 @@ Excerpt — not a complete module
 
 ### A refresh of what is on screen
 
-slPageHeaderProgress 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.
+slPageHeaderProgress 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