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

package/docs/code-block.md

@@ -58,43 +58,43 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `code` | `string` | — | CodeBlock | A fonte, como texto. Nunca HTML |
-| `language` | `string` | text | CodeBlock | data-language e class="language-<x>" |
-| `highlight` | `CodeHighlighter \| null` | — | CodeBlock | O motor; null recusa o do injector |
-| `tokens` | `CodeLine[]` | — | CodeBlock | Linhas já tokenizadas pelo consumidor |
-| `title` | `string` | — | CodeBlock | O nome do ficheiro no cabeçalho, e o nome da região |
-| `fileName` | `string` | — | CodeBlock | O nome para o glifo, quando o título não é o nome |
-| `lineNumbers` | `boolean` | false | CodeBlock | O contador na goteira |
-| `start` | `number` | 1 | CodeBlock | O número da primeira linha |
-| `marks` | `CodeMarks` | — | CodeBlock | highlight, add, remove, focus, error, warning — intervalos "1,4-6" ou listas |
-| `wrap` | `model<boolean \| undefined>` | — | CodeBlock | [(wrap)]: presente é controlado, para a vida do bloco |
-| `defaultWrap` | `boolean` | false | CodeBlock | Onde um bloco não controlado começa |
-| `collapseAfter` | `number` | — | CodeBlock | Linhas visíveis antes do controle de revelar |
-| `revealed` | `model<boolean \| undefined>` | — | CodeBlock | [(revealed)]: presente é controlado |
-| `defaultRevealed` | `boolean` | false | CodeBlock | Onde um bloco não controlado começa |
-| `maxLines` | `number` | — | CodeBlock | Linhas antes de o corpo rolar |
-| `copy` | `boolean` | true | CodeBlock | O controle de cópia |
-| `copyRemoved` | `boolean` | false | CodeBlock | Mantém as linhas removidas na cópia |
-| `loading` | `boolean` | false | CodeBlock | Skeletons na altura de seis linhas, aria-busy, sem cópia |
-| `tabSize` | `number` | 2 | CodeBlock | Largura de um tab, para o indent da continuação |
-| `messages` | `PartialMessages<CodeBlockMessages>` | — | slCodeBlock | As palavras da família sobre o idioma em vigor, chave a chave |
-| `ng-template[slCodeBlockLine]` | `projeção` | — | CodeBlock | Substitui a corrida de tokens de cada linha; recebe os tokens, o número, a marca e o esmaecer |
-| `[slCodeBlockAction]` | `projeção` | — | CodeBlock | Controles do consumidor ao lado de copy e wrap |
-| `exportAs` | `slCodeBlock` | — | CodeBlock | Alcança a instância a partir da template: #block="slCodeBlock" e block.copyCode() ou block.scrollToLine(12) |
-| `ng-template[slCodeBlockLine]` | `let-tokens, let-number="number", let-mark="mark", let-dim="dim"` | — | CodeBlock | A linha à maneira da aplicação; a goteira fica da família |
-| `[slCodeBlockAction]` | `ng-content` | — | CodeBlock | Um "Run" ou um "Open in editor" ao lado dos controles |
-| `provideCodeBlockDefaults()` | `highlight \| lineNumbers \| copy` | — | Injector | O motor carregado uma vez, para todos os blocos por baixo; um input no bloco ganha |
-| `slTabs` | `composição` | — | em volta | Vários ficheiros: um bloco por painel |
-| `id, aria-*, data-*, (keydown)` | `atributos nativos` | — | CodeBlock | Ficam no elemento host; o listener do consumidor corre a par do da família |
+| `code` | `string` | — | CodeBlock | The source, as text. Never HTML |
+| `language` | `string` | text | CodeBlock | data-language and class="language-<x>" |
+| `highlight` | `CodeHighlighter \| null` | — | CodeBlock | The engine; null refuses the injector’s |
+| `tokens` | `CodeLine[]` | — | CodeBlock | Lines the consumer already tokenized |
+| `title` | `string` | — | CodeBlock | The file name in the header, and the region name |
+| `fileName` | `string` | — | CodeBlock | The name for the glyph, when the title is not the name |
+| `lineNumbers` | `boolean` | false | CodeBlock | The counter in the gutter |
+| `start` | `number` | 1 | CodeBlock | The number of the first line |
+| `marks` | `CodeMarks` | — | CodeBlock | highlight, add, remove, focus, error, warning — ranges "1,4-6" or lists |
+| `wrap` | `model<boolean \| undefined>` | — | CodeBlock | [(wrap)]: present means controlled, for the life of the block |
+| `defaultWrap` | `boolean` | false | CodeBlock | Where an uncontrolled block starts |
+| `collapseAfter` | `number` | — | CodeBlock | Visible lines before the reveal control |
+| `revealed` | `model<boolean \| undefined>` | — | CodeBlock | [(revealed)]: present means controlled |
+| `defaultRevealed` | `boolean` | false | CodeBlock | Where an uncontrolled block starts |
+| `maxLines` | `number` | — | CodeBlock | Lines before the body scrolls |
+| `copy` | `boolean` | true | CodeBlock | The copy control |
+| `copyRemoved` | `boolean` | false | CodeBlock | Keeps the removed lines in the copy |
+| `loading` | `boolean` | false | CodeBlock | Skeletons at the height of six lines, aria-busy, no copy |
+| `tabSize` | `number` | 2 | CodeBlock | Width of a tab, for the continuation indent |
+| `messages` | `PartialMessages<CodeBlockMessages>` | — | slCodeBlock | The family’s words over the current locale, key by key |
+| `ng-template[slCodeBlockLine]` | `projection` | — | CodeBlock | Replaces the token run of each line; receives the tokens, the number, the mark and the dimming |
+| `[slCodeBlockAction]` | `projection` | — | CodeBlock | Consumer controls next to copy and wrap |
+| `exportAs` | `slCodeBlock` | — | CodeBlock | Reaches the instance from the template: #block="slCodeBlock" and block.copyCode() or block.scrollToLine(12) |
+| `ng-template[slCodeBlockLine]` | `let-tokens, let-number="number", let-mark="mark", let-dim="dim"` | — | CodeBlock | The line the application’s way; the gutter stays the family’s |
+| `[slCodeBlockAction]` | `ng-content` | — | CodeBlock | A "Run" or an "Open in editor" next to the controls |
+| `provideCodeBlockDefaults()` | `highlight \| lineNumbers \| copy` | — | Injector | The engine loaded once, for every block below; an input on the block wins |
+| `slTabs` | `composition` | — | around | Several files: one block per panel |
+| `id, aria-*, data-*, (keydown)` | `native attributes` | — | CodeBlock | Stay on the host element; the consumer’s listener runs alongside the family’s |
 
 ## Events
 
 | Name | Payload | When |
 | --- | --- | --- |
-| `(wrapChangeRequest)` | `ChangeRequest<boolean>` | Antes de as linhas quebrarem ou desquebrarem; [(wrap)] é a outra metade, o valor. O pedido leva a razão — pointer, keyboard ou programmatic — e o evento de origem; cancelá-lo não move nada. |
-| `(revealedChangeRequest)` | `ChangeRequest<boolean>` | Antes de o bloco revelar ou dobrar as linhas escondidas; [(revealed)] é o valor. A razão é pointer, keyboard, escape ou programmatic. |
-| `(copyRequest)` | `{ value, copied, reason, source }` | Depois de o controle, ou copyCode(), escrever na área de transferência. copied é false quando a plataforma recusou. |
-| `(highlightError)` | `unknown` | Quando o motor rejeita. O texto puro fica. |
+| `(wrapChangeRequest)` | `ChangeRequest<boolean>` | Before the lines wrap or unwrap; [(wrap)] is the other half, the value. The request carries the reason — pointer, keyboard or programmatic — and the source event; cancelling it moves nothing. |
+| `(revealedChangeRequest)` | `ChangeRequest<boolean>` | Before the block reveals or folds the hidden lines; [(revealed)] is the value. The reason is pointer, keyboard, escape or programmatic. |
+| `(copyRequest)` | `{ value, copied, reason, source }` | After the control, or copyCode(), writes to the clipboard. copied is false when the platform refused. |
+| `(highlightError)` | `unknown` | When the engine rejects. The plain text stays. |
 
 ## Axes and defaults
 
@@ -106,11 +106,11 @@ Excerpt — not a complete module
 
 ## Rules
 
-- O bloco não tem papel: é texto, lido como texto. O role="textbox" com aria-readonly do Carbon num bloco que ninguém edita é recusado por escrito no contrato.
-- O corpo é um scroll-area: role="region", tabindex="0" e um nome — o título, depois aria-label, depois "Code" — só enquanto o código transborda, que é o que SC 2.1.1 e scrollable-region-focusable pedem. As teclas de rolar são as da plataforma; a família não escreve nenhuma.
-- A goteira dos números e dos sinais é aria-hidden e user-select: none: um leitor de ecrã ouve o código e não uma contagem, e uma seleção pelo bloco copia código e nada mais.
-- O controle de cópia anuncia "Copied" ou "Copy failed" pelo live-announcer partilhado e troca o glifo além da cor; o de wrap é aria-pressed; o de revelar leva aria-expanded e aria-controls para o corpo.
-- Um HTML de motor nunca entra: os tokens são texto em spans, e um <script> numa amostra são os seis caracteres que é.
+- The block has no role: it is text, read as text. Carbon’s role="textbox" with aria-readonly on a block nobody edits is refused in writing in the contract.
+- The body is a scroll-area: role="region", tabindex="0" and a name — the title, then aria-label, then "Code" — only while the code overflows, which is what SC 2.1.1 and scrollable-region-focusable ask for. The scroll keys are the platform’s; the family writes none.
+- The gutter of numbers and signs is aria-hidden and user-select: none: a screen reader hears the code and not a count, and a selection across the block copies code and nothing else.
+- The copy control announces "Copied" or "Copy failed" through the shared live-announcer and swaps the glyph as well as the color; the wrap control is aria-pressed; the reveal control carries aria-expanded and aria-controls pointing to the body.
+- Engine HTML never enters: the tokens are text in spans, and a <script> in a sample is the six characters it is.
 
 ## Tokens
 
@@ -118,9 +118,9 @@ Excerpt — not a complete module
 
 ## Examples
 
-### Texto primeiro, tokens quando chegam
+### Text first, tokens when they arrive
 
-O bloco desenha o texto puro no primeiro paint e troca os tokens linha a linha quando o motor responde: a altura não muda, porque cada linha é uma fila da grelha. As cores são a escala --slotted-code-* do tema, e mudam com o esquema.
+The block draws the plain text on the first paint and swaps in the tokens line by line when the engine answers: the height does not change, because each line is a row of the grid. The colors are the theme’s --slotted-code-* scale, and change with the scheme.
 
 Excerpt — not a complete module
 
@@ -128,9 +128,9 @@ Excerpt — not a complete module
 <div slCodeBlock [code]="source" [highlight]="tokenise" language="ts"></div>
 ```
 
-### Prism e Shiki entram pelos mapeamentos
+### Prism and Shiki come in through the mappings
 
-A família não carrega gramática nenhuma. fromPrismTokens dobra os nomes padrão do Prism sobre os doze escopos; fromShikiTokens lê o último escopo TextMate de cada token. Um HTML de motor nunca entra: o que chega é texto em spans.
+The family loads no grammar. fromPrismTokens folds the standard Prism names onto the twelve scopes; fromShikiTokens reads the last TextMate scope of each token. Engine HTML never enters: what arrives is text in spans.
 
 Excerpt — not a complete module
 
@@ -142,9 +142,9 @@ const shiki = async (code, lang) =>
   );
 ```
 
-### Números de linha
+### Line numbers
 
-lineNumbers desenha um contador numa goteira larga o bastante para o último número, medida em ch; start diz por onde começa. A goteira é aria-hidden e user-select: none, por isso uma seleção pelo bloco copia código e nada mais.
+lineNumbers draws a counter in a gutter wide enough for the last number, measured in ch; start says where it begins. The gutter is aria-hidden and user-select: none, so a selection across the block copies code and nothing else.
 
 Excerpt — not a complete module
 
@@ -152,9 +152,9 @@ Excerpt — not a complete module
 <div slCodeBlock [code]="source" language="ts" lineNumbers start="98"></div>
 ```
 
-### Linhas marcadas
+### Marked lines
 
-marks toma intervalos "1,4-6" ou listas de números: highlight tinge com o acento e uma barra na ponta; error e warning com danger e warning. A tinta é do texto do tom a 7,5%, para nenhum escopo cair abaixo de 4,5:1.
+marks takes ranges "1,4-6" or lists of numbers: highlight tints with the accent and a bar at the edge; error and warning with danger and warning. The tint is the tone’s text color at 7.5%, so no scope falls below 4.5:1.
 
 Excerpt — not a complete module
 
@@ -167,9 +167,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### Um diff
+### A diff
 
-add e remove tingem com success e danger e escrevem + e − na goteira, por CSS. O controle de cópia deixa as linhas removidas de fora, porque o código depois da mudança é o que se cola; copyRemoved mantém-nas.
+add and remove tint with success and danger and write + and − in the gutter, by CSS. The copy control leaves the removed lines out, because the code after the change is what gets pasted; copyRemoved keeps them.
 
 Excerpt — not a complete module
 
@@ -183,9 +183,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### Foco numa parte do bloco
+### Focus on one part of the block
 
-focus esmaece e desfoca as linhas fora do intervalo; o bloco levanta o véu com o ponteiro em cima ou o foco dentro, por isso quem quer o resto tem-no. Sob reduced-motion o desfoque sai e o esmaecer fica, porque é a informação.
+focus dims and blurs the lines outside the range; the block lifts the veil with the pointer over it or focus inside, so whoever wants the rest gets it. Under reduced-motion the blur goes and the dimming stays, because the dimming is the information.
 
 Excerpt — not a complete module
 
@@ -193,9 +193,9 @@ Excerpt — not a complete module
 <div slCodeBlock [code]="source" language="json" [marks]="{ focus: '3-6' }"></div>
 ```
 
-### Quebrar linhas longas
+### Wrapping long lines
 
-O controle de wrap só aparece enquanto uma linha transborda — a regra do Docusaurus — e é um botão pressionado. A continuação de uma linha quebrada indenta-se ao próprio indent do código, medido uma vez por linha em ch.
+The wrap control appears only while a line overflows — the Docusaurus rule — and is a pressed button. The continuation of a wrapped line indents to the code’s own indent, measured once per line in ch.
 
 Excerpt — not a complete module
 
@@ -209,9 +209,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### Um ficheiro com nome
+### A named file
 
-title põe o cabeçalho com o nome em mono, o glifo da espécie do ficheiro — uma folha de texto para um .ts, uma folha de tabela para um .csv — e a linguagem no fim. O título é também o nome da região de rolagem.
+title puts up the header with the name in mono, the glyph of the file kind — a text sheet for a .ts, a table sheet for a .csv — and the language at the end. The title is also the name of the scroll region.
 
 Excerpt — not a complete module
 
@@ -219,9 +219,9 @@ Excerpt — not a complete module
 <div slCodeBlock [code]="rows" language="csv" title="orders-2026-09.csv"></div>
 ```
 
-### Dobrado atrás de "Show more"
+### Folded behind "Show more"
 
-collapseAfter esconde o que passa de n linhas atrás de um controle; a última linha visível desvanece-se nele. revealed é o modelo de estado; Escape dentro do bloco revelado dobra-o e mantém o foco. As linhas escondidas ficam no DOM e numa seleção.
+collapseAfter hides what goes past n lines behind a control; the last visible line fades into it. revealed is the state model; Escape inside the revealed block folds it and keeps focus. The hidden lines stay in the DOM and in a selection.
 
 Excerpt — not a complete module
 
@@ -236,9 +236,9 @@ Excerpt — not a complete module
 ></div>
 ```
 
-### Rolar além de um máximo
+### Scrolling past a maximum
 
-maxLines limita a altura do corpo e o scroll-area rola o resto, com a região nomeada e alcançável por Tab. Compõe com collapseAfter: um bloco dobrado a oito e, revelado, rolando além de quarenta.
+maxLines limits the body height and the scroll-area scrolls the rest, with the region named and reachable by Tab. It composes with collapseAfter: a block folded at eight and, revealed, scrolling past forty.
 
 Excerpt — not a complete module
 
@@ -246,19 +246,19 @@ Excerpt — not a complete module
 <div slCodeBlock [code]="log" language="text" lineNumbers maxLines="12"></div>
 ```
 
-### Copiar
+### Copying
 
-O controle escreve o código que o consumidor deu, nunca o texto do DOM: nem números, nem sinais, nem quebras. Terminado, o check fica dois segundos no lugar das folhas e "Copied" é anunciado; copy="false" tira o controle; copyCode() copia sem ele.
+The control writes the code the consumer gave, never the DOM text: no numbers, no signs, no wraps. When done, the check stays two seconds in place of the sheets and "Copied" is announced; copy="false" removes the control; copyCode() copies without it.
 
 Excerpt — not a complete module
 
 ```html
-<div slCodeBlock [code]="source" (copyRequest)="$event.copied && toast('Copiado')"></div>
+<div slCodeBlock [code]="source" (copyRequest)="$event.copied && toast('Copied')"></div>
 ```
 
-### Código a caminho, e nenhum código
+### Code on the way, and no code
 
-loading desenha a moldura à altura de seis linhas com skeletons dentro e aria-busy, sem controle de cópia — não um spinner, que é para uma região que já tem conteúdo. Uma string vazia é uma linha vazia com o seu número.
+loading draws the frame at the height of six lines with skeletons inside and aria-busy, without a copy control — not a spinner, which is for a region that already has content. An empty string is an empty line with its number.
 
 Excerpt — not a complete module
 
@@ -266,9 +266,9 @@ Excerpt — not a complete module
 <div slCodeBlock code="" loading title="deploy.log"></div>
 ```
 
-### Conteúdo que a família não escolheu
+### Content the family did not choose
 
-Uma linha de 400 caracteres rola e, sob wrap, parte-se num token indivisível em vez de escapar da caixa; código árabe numa página RTL lê-se da esquerda para a direita; um <script> na amostra são seis caracteres.
+A 400-character line scrolls and, under wrap, breaks inside an indivisible token instead of escaping the box; Arabic code on an RTL page reads from left to right; a <script> in the sample is six characters.
 
 Excerpt — not a complete module
 
@@ -276,9 +276,9 @@ Excerpt — not a complete module
 <div slCodeBlock [code]="'<script>alert(1)</script>'" language="html"></div>
 ```
 
-### Composição
+### Composition
 
-Vários ficheiros são tabs com um bloco por painel; uma ação do consumidor entra em actions ao lado do copy, por slCodeBlockAction; um ng-template slCodeBlockLine desenha uma linha à maneira da aplicação; provideCodeBlockDefaults entrega o motor uma vez ao injector.
+Several files are tabs with one block per panel; a consumer action goes in actions next to copy, through slCodeBlockAction; an ng-template slCodeBlockLine draws a line the application’s way; provideCodeBlockDefaults hands the engine once to the injector.
 
 Excerpt — not a complete module
 
@@ -291,13 +291,13 @@ providers: [provideCodeBlockDefaults({ highlight: shiki, lineNumbers: true })];
 // </div>
 ```
 
-### Teclado
+### Keyboard
 
-Tab: copy, wrap, reveal, e o corpo quando transborda. No corpo as setas, Page, Home, End e Space são os da plataforma; Enter e Space nos controles; Escape num bloco revelado dobra-o e mantém o foco.
+Tab: copy, wrap, reveal, and the body when it overflows. In the body the arrows, Page, Home, End and Space are the platform’s; Enter and Space on the controls; Escape in a revealed block folds it and keeps focus.
 
 Excerpt — not a complete module
 
 ```html
-<!-- "group.ts, region" — o título, porque o corpo só é uma região com nome enquanto o código transborda. -->
+<!-- "group.ts, region" — the title, because the body is a named region only while the code overflows. -->
 <div slCodeBlock [code]="wide" language="ts" title="group.ts"></div>
 ```

package/docs/combobox.json

@@ -869,6 +869,7 @@
     "--slotted-combobox-surface",
     "--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/combobox.md

@@ -202,7 +202,7 @@ export class ComboboxBasic {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-combobox-action-active-background`, `--slotted-combobox-action-color`, `--slotted-combobox-action-hover-background`, `--slotted-combobox-action-size`, `--slotted-combobox-arrow-color`, `--slotted-combobox-autofill-background`, `--slotted-combobox-background`, `--slotted-combobox-border-color`, `--slotted-combobox-color`, `--slotted-combobox-completion-background`, `--slotted-combobox-completion-color`, `--slotted-combobox-content-border-color`, `--slotted-combobox-content-padding-block`, `--slotted-combobox-content-padding-inline`, `--slotted-combobox-content-radius`, `--slotted-combobox-content-shadow`, `--slotted-combobox-content-text`, `--slotted-combobox-content-text-muted`, `--slotted-combobox-disabled-background`, `--slotted-combobox-disabled-border-color`, `--slotted-combobox-disabled-color`, `--slotted-combobox-highlight`, `--slotted-combobox-highlight-active`, `--slotted-combobox-highlight-ring`, `--slotted-combobox-hover-border-color`, `--slotted-combobox-icon-size-min`, `--slotted-combobox-invalid-border-color`, `--slotted-combobox-invalid-edge-width`, `--slotted-combobox-invalid-focus-ring-color`, `--slotted-combobox-item-radius`, `--slotted-combobox-measure`, `--slotted-combobox-open-border-color`, `--slotted-combobox-placeholder-color`, `--slotted-combobox-plain-hover-background`, `--slotted-combobox-radius`, `--slotted-combobox-readonly-background`, `--slotted-combobox-selected-color`, `--slotted-combobox-separator-color`, `--slotted-combobox-shadow`, `--slotted-combobox-subtle-background`, `--slotted-combobox-subtle-border-color`, `--slotted-combobox-subtle-hover-background`, `--slotted-combobox-surface`, `--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-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-combobox-action-active-background`, `--slotted-combobox-action-color`, `--slotted-combobox-action-hover-background`, `--slotted-combobox-action-size`, `--slotted-combobox-arrow-color`, `--slotted-combobox-autofill-background`, `--slotted-combobox-background`, `--slotted-combobox-border-color`, `--slotted-combobox-color`, `--slotted-combobox-completion-background`, `--slotted-combobox-completion-color`, `--slotted-combobox-content-border-color`, `--slotted-combobox-content-padding-block`, `--slotted-combobox-content-padding-inline`, `--slotted-combobox-content-radius`, `--slotted-combobox-content-shadow`, `--slotted-combobox-content-text`, `--slotted-combobox-content-text-muted`, `--slotted-combobox-disabled-background`, `--slotted-combobox-disabled-border-color`, `--slotted-combobox-disabled-color`, `--slotted-combobox-highlight`, `--slotted-combobox-highlight-active`, `--slotted-combobox-highlight-ring`, `--slotted-combobox-hover-border-color`, `--slotted-combobox-icon-size-min`, `--slotted-combobox-invalid-border-color`, `--slotted-combobox-invalid-edge-width`, `--slotted-combobox-invalid-focus-ring-color`, `--slotted-combobox-item-radius`, `--slotted-combobox-measure`, `--slotted-combobox-open-border-color`, `--slotted-combobox-placeholder-color`, `--slotted-combobox-plain-hover-background`, `--slotted-combobox-radius`, `--slotted-combobox-readonly-background`, `--slotted-combobox-selected-color`, `--slotted-combobox-separator-color`, `--slotted-combobox-shadow`, `--slotted-combobox-subtle-background`, `--slotted-combobox-subtle-border-color`, `--slotted-combobox-subtle-hover-background`, `--slotted-combobox-surface`, `--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-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/currency-field.json

@@ -45,6 +45,10 @@
     "formatOn": [
       "change",
       "commit"
+    ],
+    "appearance": [
+      "control",
+      "display"
     ]
   },
   "members": {
@@ -61,7 +65,8 @@
         "formatOn": "change",
         "currencyDisplay": "symbol",
         "wheel": false,
-        "allowEmpty": false
+        "allowEmpty": false,
+        "appearance": "control"
       },
       "capabilities": [
         "value",
@@ -85,6 +90,7 @@
       ],
       "parts": [
         "root",
+        "symbol",
         "input",
         "start",
         "end",
@@ -115,6 +121,12 @@
           "required": true,
           "purpose": "The control. Holds the formatted amount, the identifier, aria-valuenow in major units and aria-valuetext as the reader sees it. It is type=\"text\" because type=\"number\" empties itself whenever the text is not a valid floating-point number. exportAs=\"slCurrencyFieldInput\" reaches inputElement, increment() and decrement()."
         },
+        {
+          "part": "symbol",
+          "element": "span",
+          "required": false,
+          "purpose": "The currency mark at the display appearance, drawn apart from the digits on the side the locale writes it, muted at the xl step. The input then holds the amount alone and its aria-valuetext carries the mark. Absent under currencyDisplay none and at the control appearance."
+        },
         {
           "part": "start",
           "element": "the element carrying slCurrencyFieldStart",
@@ -195,6 +207,13 @@
           "appliesTo": "slCurrencyField, provideCurrencyFieldDefaults",
           "description": "When the text takes the locale’s shape under entry=\"natural\". change regroups on every keystroke; commit holds the reader’s own text until blur, Enter or a step. Cents-first entry generates the text after every edit, so it decides nothing there"
         },
+        {
+          "name": "appearance",
+          "type": "'control' | 'display'",
+          "defaultValue": "control",
+          "appliesTo": "slCurrencyField",
+          "description": "A field among fields, or the headline amount of an entry sheet: the 4xl step, the mark apart and muted, a rule under the amount instead of a box. size and variant do not apply to display"
+        },
         {
           "name": "align",
           "type": "'end' | 'start'",
@@ -223,6 +242,13 @@
           "appliesTo": "slCurrencyFieldInput",
           "description": "Overrides how many fraction digits the amount is written with, for a unit price quoted finer than the currency’s cent"
         },
+        {
+          "name": "unit",
+          "type": "'major' | 'minor'",
+          "defaultValue": "major",
+          "appliesTo": "slCurrencyFieldInput, provideCurrencyFieldDefaults",
+          "description": "The unit value, defaultValue, min, max, the steps, stepFrom, (valueChange), the form model and the submitted amount are in: major is 12.34, minor the integer 1234 of the currency’s minor unit, which fractionDigits decides when set"
+        },
         {
           "name": "min",
           "type": "number",
@@ -446,8 +472,10 @@
   },
   "tokens": [
     "--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",
@@ -482,6 +510,7 @@
     "--slotted-currency-field-disabled-background",
     "--slotted-currency-field-disabled-border-color",
     "--slotted-currency-field-disabled-color",
+    "--slotted-currency-field-display-font-size",
     "--slotted-currency-field-hover-border-color",
     "--slotted-currency-field-icon-size-min",
     "--slotted-currency-field-invalid-border-color",
@@ -503,6 +532,9 @@
     "--slotted-currency-field-subtle-background",
     "--slotted-currency-field-subtle-border-color",
     "--slotted-currency-field-subtle-hover-background",
+    "--slotted-currency-field-symbol-color",
+    "--slotted-currency-field-symbol-font-size",
+    "--slotted-currency-field-underline-color",
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
@@ -510,10 +542,17 @@
     "--slotted-focus-ring-color-invalid",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-size-4xl",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-letter-spacing-tighter",
+    "--slotted-line-height-4xl",
     "--slotted-radius-none",
     "--slotted-radius-xs",
     "--slotted-space-1",
     "--slotted-space-2",
+    "--slotted-space-3",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/docs/currency-field.md

@@ -38,6 +38,7 @@ Excerpt — not a complete module
 | --- | --- | --- |
 | `root` | the element carrying slCurrencyField | yes |
 | `input` | input[slCurrencyFieldInput], as text with role="spinbutton" | yes |
+| `symbol` | span | no |
 | `start` | the element carrying slCurrencyFieldStart | no |
 | `end` | the element carrying slCurrencyFieldEnd | no |
 | `scrub` | any element carrying slCurrencyFieldScrub, inside an adornment | no |
@@ -55,10 +56,12 @@ Excerpt — not a complete module
 | `defaultValue` | `number \| null` | — | slCurrencyFieldInput | What an uncontrolled control starts from, read once. A Reactive Form writes over it through ControlValueAccessor |
 | `entry` | `'cents' \| 'natural'` | cents | slCurrencyFieldInput, provideCurrencyFieldDefaults | How the reader types. cents is the cash register: digits enter at the minor unit and shift left, the separator is never typed and the caret has one legal position. natural is the spreadsheet, and the model number-field uses. The frame paints what the control resolved |
 | `formatOn` | `'change' \| 'commit'` | change | slCurrencyField, provideCurrencyFieldDefaults | When the text takes the locale’s shape under entry="natural". change regroups on every keystroke; commit holds the reader’s own text until blur, Enter or a step. Cents-first entry generates the text after every edit, so it decides nothing there |
+| `appearance` | `'control' \| 'display'` | control | slCurrencyField | A field among fields, or the headline amount of an entry sheet: the 4xl step, the mark apart and muted, a rule under the amount instead of a box. size and variant do not apply to display |
 | `align` | `'end' \| 'start'` | end | slCurrencyField, provideCurrencyFieldDefaults | Which edge the amount is set against. end by default: a column of amounts is compared on its last digit, and the cents-first caret already lives there |
 | `locale` | `string` | the language in force | slCurrencyFieldInput | BCP 47. It decides the separators, where the symbol goes and the numbering system — never the symbol itself, which is the currency’s |
 | `format` | `Intl.NumberFormatOptions` | — | slCurrencyFieldInput | Any other Intl option: currencySign for accounting parentheses, signDisplay, useGrouping, roundingMode. Every key here wins over the family’s own; style and currency are the family’s |
 | `fractionDigits` | `number` | the currency’s minor units | slCurrencyFieldInput | Overrides how many fraction digits the amount is written with, for a unit price quoted finer than the currency’s cent |
+| `unit` | `'major' \| 'minor'` | major | slCurrencyFieldInput, provideCurrencyFieldDefaults | The unit value, defaultValue, min, max, the steps, stepFrom, (valueChange), the form model and the submitted amount are in: major is 12.34, minor the integer 1234 of the currency’s minor unit, which fractionDigits decides when set |
 | `min` | `number` | — | slCurrencyFieldInput | The smallest amount the control holds, in major units. It disables the decrement button at the bound, gives Home somewhere to go, and is the one thing that refuses a debit: min="0" is why there is no allowNegative |
 | `max` | `number` | — | slCurrencyFieldInput | The largest amount the control holds. It disables the increment button at the bound and gives End somewhere to go |
 | `step` | `number` | 1 | slCurrencyFieldInput | What the arrows and the two buttons move by, in major units: one real, not one centavo |
@@ -107,6 +110,7 @@ Excerpt — not a complete module
 | `clamp` | `blur`, `strict`, `none` | `blur` |
 | `currencyDisplay` | `symbol`, `narrowSymbol`, `code`, `name`, `none` | `symbol` |
 | `formatOn` | `change`, `commit` | `change` |
+| `appearance` | `control`, `display` | `control` |
 
 ## Rules
 
@@ -121,7 +125,7 @@ Excerpt — not a complete module
 
 ## 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-currency-field-action-size`, `--slotted-currency-field-adornment-color`, `--slotted-currency-field-background`, `--slotted-currency-field-border-color`, `--slotted-currency-field-color`, `--slotted-currency-field-disabled-background`, `--slotted-currency-field-disabled-border-color`, `--slotted-currency-field-disabled-color`, `--slotted-currency-field-hover-border-color`, `--slotted-currency-field-icon-size-min`, `--slotted-currency-field-invalid-border-color`, `--slotted-currency-field-invalid-edge-width`, `--slotted-currency-field-invalid-focus-ring-color`, `--slotted-currency-field-placeholder-color`, `--slotted-currency-field-plain-hover-background`, `--slotted-currency-field-radius`, `--slotted-currency-field-readonly-background`, `--slotted-currency-field-readonly-border-color`, `--slotted-currency-field-scrub-active-color`, `--slotted-currency-field-shadow`, `--slotted-currency-field-stepper-active-background`, `--slotted-currency-field-stepper-color`, `--slotted-currency-field-stepper-disabled-background`, `--slotted-currency-field-stepper-disabled-color`, `--slotted-currency-field-stepper-hover-background`, `--slotted-currency-field-stepper-size`, `--slotted-currency-field-subtle-background`, `--slotted-currency-field-subtle-border-color`, `--slotted-currency-field-subtle-hover-background`, `--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-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-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-currency-field-action-size`, `--slotted-currency-field-adornment-color`, `--slotted-currency-field-background`, `--slotted-currency-field-border-color`, `--slotted-currency-field-color`, `--slotted-currency-field-disabled-background`, `--slotted-currency-field-disabled-border-color`, `--slotted-currency-field-disabled-color`, `--slotted-currency-field-display-font-size`, `--slotted-currency-field-hover-border-color`, `--slotted-currency-field-icon-size-min`, `--slotted-currency-field-invalid-border-color`, `--slotted-currency-field-invalid-edge-width`, `--slotted-currency-field-invalid-focus-ring-color`, `--slotted-currency-field-placeholder-color`, `--slotted-currency-field-plain-hover-background`, `--slotted-currency-field-radius`, `--slotted-currency-field-readonly-background`, `--slotted-currency-field-readonly-border-color`, `--slotted-currency-field-scrub-active-color`, `--slotted-currency-field-shadow`, `--slotted-currency-field-stepper-active-background`, `--slotted-currency-field-stepper-color`, `--slotted-currency-field-stepper-disabled-background`, `--slotted-currency-field-stepper-disabled-color`, `--slotted-currency-field-stepper-hover-background`, `--slotted-currency-field-stepper-size`, `--slotted-currency-field-subtle-background`, `--slotted-currency-field-subtle-border-color`, `--slotted-currency-field-subtle-hover-background`, `--slotted-currency-field-symbol-color`, `--slotted-currency-field-symbol-font-size`, `--slotted-currency-field-underline-color`, `--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-font-size-4xl`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-letter-spacing-tighter`, `--slotted-line-height-4xl`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--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/data-grid.examples.md

@@ -2253,7 +2253,7 @@ Excerpt — not a complete module
 
 ### Load more
 
-With an unknown total the footer states the range without one and offers Load more; when the grid windows its rows, loadMore is emitted on its own as the window nears the end.
+With an unknown total the footer states the range without one. loadMore is emitted on its own as the reader nears the end, and the footer says a page is loading; it offers a control only to retry a page that failed (loadMoreFailed). loadMoreTrigger="button" asks only from a Load more control, "both" does the two.
 
 Excerpt — not a complete module
 
@@ -2270,7 +2270,7 @@ Excerpt — not a complete module
 
 ### Empty, no results, error, loading
 
-Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing.
+Three states a body can hold instead of rows, each a result-state: nothing at all; nothing after the filter, with Clear filters; and a failed load, with Try again. A first load draws skeleton rows; a refresh over rows already shown dims them and moves nothing. Zero rows is an answer too: once the grid has drawn the empty state, loading keeps it and draws no skeleton, and loading="initial" asks for the skeleton anyway.
 
 Excerpt — not a complete module