@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/docs/code-block.json

@@ -0,0 +1,616 @@
+{
+  "family": "code-block",
+  "ui": "code-block",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Highlighted source code with copy and line limits."
+  },
+  "axes": {
+    "lineNumbers": [
+      "false",
+      "true"
+    ],
+    "copy": [
+      "true",
+      "false"
+    ],
+    "copyRemoved": [
+      "false",
+      "true"
+    ]
+  },
+  "members": {
+    "codeBlock": {
+      "nativeElement": "div",
+      "defaults": {
+        "language": "text",
+        "lineNumbers": false,
+        "start": 1,
+        "copy": true,
+        "copyRemoved": false,
+        "defaultWrap": false,
+        "defaultRevealed": false,
+        "loading": false
+      },
+      "capabilities": [
+        "content",
+        "pressed",
+        "revealed",
+        "copyable",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "pressed",
+        "revealed",
+        "complete",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "header",
+        "icon",
+        "title",
+        "language",
+        "actions",
+        "wrap",
+        "copy",
+        "body",
+        "pre",
+        "code",
+        "line",
+        "text",
+        "number",
+        "marker",
+        "token",
+        "reveal"
+      ]
+    }
+  },
+  "docs": {
+    "codeBlock": {
+      "imports": {
+        "source": "import {\n  SlCodeBlock,\n  SlCodeBlockAction,\n  SlCodeBlockLine,\n  provideCodeBlockDefaults,\n} from '@slotted/angular/code-block';\nimport { fromPrismTokens, fromShikiTokens } from '@slotted/core/code';",
+        "selector": "[slCodeBlock], [slCodeBlockAction], ng-template[slCodeBlockLine]",
+        "exportAs": "slCodeBlock"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "A moldura: o fundo afundado, a aresta e o raio que prose já desenha numa cerca. Carrega data-ui=\"code-block\", data-language, data-wrap, data-revealed, data-line-numbers, data-loading, data-marks e os quatro valores de runtime."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": false,
+          "purpose": "O nome do ficheiro, a linguagem no fim e os controles. Existe quando há título, linguagem, cópia ou ações do consumidor. Mantém a direção da página."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "O glifo da espécie do ficheiro ao lado do título, escolhido por fileKind a partir do nome."
+        },
+        {
+          "part": "title",
+          "element": "span",
+          "required": false,
+          "purpose": "O nome do ficheiro, em mono, truncado com reticências. É o nome da região de rolagem."
+        },
+        {
+          "part": "language",
+          "element": "span",
+          "required": false,
+          "purpose": "A linguagem em maiúsculas pequenas, no fim do cabeçalho."
+        },
+        {
+          "part": "actions",
+          "element": "div",
+          "required": false,
+          "purpose": "Os controles: os do consumidor, projetados por slCodeBlockAction, o wrap e o copy. Sem cabeçalho flutua sobre a primeira linha, no fundo do bloco."
+        },
+        {
+          "part": "wrap",
+          "element": "button",
+          "required": false,
+          "purpose": "aria-pressed: quebra as linhas na caixa. Desenhado só enquanto uma linha transborda, ou enquanto já está quebrado."
+        },
+        {
+          "part": "copy",
+          "element": "button",
+          "required": false,
+          "purpose": "O controle de description-list: escreve o código, não o DOM, sem as linhas removidas; data-complete por dois segundos com o check no lugar das folhas."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": true,
+          "purpose": "Um scroll-area vestido como data-ui: a região com nome e parada de tabulação só enquanto o código transborda, a barra da plataforma, o véu na ponta."
+        },
+        {
+          "part": "pre",
+          "element": "pre",
+          "required": true,
+          "purpose": "white-space: pre, direction: ltr seja qual for a página, pre-wrap sob data-wrap."
+        },
+        {
+          "part": "code",
+          "element": "code",
+          "required": true,
+          "purpose": "class=\"language-<x>\", a convenção da especificação HTML; uma grelha de linhas."
+        },
+        {
+          "part": "line",
+          "element": "span",
+          "required": true,
+          "purpose": "Uma linha da grelha: número, marcador, texto. data-line, data-mark e data-dim; --slotted-code-block-indent sob wrap."
+        },
+        {
+          "part": "number",
+          "element": "span",
+          "required": true,
+          "purpose": "O número, aria-hidden e não selecionável; escondido sem lineNumbers, mas no DOM, para nada se mover ao ligar."
+        },
+        {
+          "part": "marker",
+          "element": "span",
+          "required": true,
+          "purpose": "A coluna do sinal: + e − nas linhas de diff, escritos por CSS e fora de qualquer seleção."
+        },
+        {
+          "part": "text",
+          "element": "span",
+          "required": true,
+          "purpose": "A corrida de tokens da linha, a terceira coluna. É o que um ng-template slCodeBlockLine substitui."
+        },
+        {
+          "part": "token",
+          "element": "span",
+          "required": false,
+          "purpose": "Um token com escopo, data-token entre os doze; um token sem escopo é texto puro."
+        },
+        {
+          "part": "reveal",
+          "element": "button",
+          "required": false,
+          "purpose": "\"Show n more lines\" quando collapseAfter esconde linhas; \"Show less\" quando reveladas. Escape no bloco revelado dobra-o."
+        }
+      ],
+      "api": [
+        {
+          "name": "code",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "A fonte, como texto. Nunca HTML"
+        },
+        {
+          "name": "language",
+          "type": "string",
+          "defaultValue": "text",
+          "appliesTo": "CodeBlock",
+          "description": "data-language e class=\"language-<x>\""
+        },
+        {
+          "name": "highlight",
+          "type": "CodeHighlighter | null",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "O motor; null recusa o do injector"
+        },
+        {
+          "name": "tokens",
+          "type": "CodeLine[]",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Linhas já tokenizadas pelo consumidor"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "O nome do ficheiro no cabeçalho, e o nome da região"
+        },
+        {
+          "name": "fileName",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "O nome para o glifo, quando o título não é o nome"
+        },
+        {
+          "name": "lineNumbers",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "CodeBlock",
+          "description": "O contador na goteira"
+        },
+        {
+          "name": "start",
+          "type": "number",
+          "defaultValue": "1",
+          "appliesTo": "CodeBlock",
+          "description": "O número da primeira linha"
+        },
+        {
+          "name": "marks",
+          "type": "CodeMarks",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "highlight, add, remove, focus, error, warning — intervalos \"1,4-6\" ou listas"
+        },
+        {
+          "name": "wrap",
+          "type": "model<boolean | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "[(wrap)]: presente é controlado, para a vida do bloco"
+        },
+        {
+          "name": "defaultWrap",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "CodeBlock",
+          "description": "Onde um bloco não controlado começa"
+        },
+        {
+          "name": "collapseAfter",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Linhas visíveis antes do controle de revelar"
+        },
+        {
+          "name": "revealed",
+          "type": "model<boolean | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "[(revealed)]: presente é controlado"
+        },
+        {
+          "name": "defaultRevealed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "CodeBlock",
+          "description": "Onde um bloco não controlado começa"
+        },
+        {
+          "name": "maxLines",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Linhas antes de o corpo rolar"
+        },
+        {
+          "name": "copy",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "CodeBlock",
+          "description": "O controle de cópia"
+        },
+        {
+          "name": "copyRemoved",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "CodeBlock",
+          "description": "Mantém as linhas removidas na cópia"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "CodeBlock",
+          "description": "Skeletons na altura de seis linhas, aria-busy, sem cópia"
+        },
+        {
+          "name": "tabSize",
+          "type": "number",
+          "defaultValue": "2",
+          "appliesTo": "CodeBlock",
+          "description": "Largura de um tab, para o indent da continuação"
+        },
+        {
+          "name": "messages",
+          "type": "PartialMessages<CodeBlockMessages>",
+          "defaultValue": "—",
+          "appliesTo": "slCodeBlock",
+          "description": "As palavras da família sobre o idioma em vigor, chave a chave"
+        },
+        {
+          "name": "ng-template[slCodeBlockLine]",
+          "type": "projeção",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Substitui a corrida de tokens de cada linha; recebe os tokens, o número, a marca e o esmaecer"
+        },
+        {
+          "name": "[slCodeBlockAction]",
+          "type": "projeção",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Controles do consumidor ao lado de copy e wrap"
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs",
+          "type": "slCodeBlock",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Alcança a instância a partir da template: #block=\"slCodeBlock\" e block.copyCode() ou block.scrollToLine(12)"
+        },
+        {
+          "name": "ng-template[slCodeBlockLine]",
+          "type": "let-tokens, let-number=\"number\", let-mark=\"mark\", let-dim=\"dim\"",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "A linha à maneira da aplicação; a goteira fica da família"
+        },
+        {
+          "name": "[slCodeBlockAction]",
+          "type": "ng-content",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Um \"Run\" ou um \"Open in editor\" ao lado dos controles"
+        },
+        {
+          "name": "provideCodeBlockDefaults()",
+          "type": "highlight | lineNumbers | copy",
+          "defaultValue": "—",
+          "appliesTo": "Injector",
+          "description": "O motor carregado uma vez, para todos os blocos por baixo; um input no bloco ganha"
+        },
+        {
+          "name": "slTabs",
+          "type": "composição",
+          "defaultValue": "—",
+          "appliesTo": "em volta",
+          "description": "Vários ficheiros: um bloco por painel"
+        },
+        {
+          "name": "id, aria-*, data-*, (keydown)",
+          "type": "atributos nativos",
+          "defaultValue": "—",
+          "appliesTo": "CodeBlock",
+          "description": "Ficam no elemento host; o listener do consumidor corre a par do da família"
+        }
+      ],
+      "events": [
+        {
+          "name": "(wrapChangeRequest)",
+          "payload": "ChangeRequest<boolean>",
+          "when": "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."
+        },
+        {
+          "name": "(revealedChangeRequest)",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Antes de o bloco revelar ou dobrar as linhas escondidas; [(revealed)] é o valor. A razão é pointer, keyboard, escape ou programmatic."
+        },
+        {
+          "name": "(copyRequest)",
+          "payload": "{ value, copied, reason, source }",
+          "when": "Depois de o controle, ou copyCode(), escrever na área de transferência. copied é false quando a plataforma recusou."
+        },
+        {
+          "name": "(highlightError)",
+          "payload": "unknown",
+          "when": "Quando o motor rejeita. O texto puro fica."
+        }
+      ],
+      "accessibility": [
+        "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 é."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thick",
+    "--slotted-border-width-thin",
+    "--slotted-code-attribute",
+    "--slotted-code-block-border-color",
+    "--slotted-code-block-color",
+    "--slotted-code-block-color-muted",
+    "--slotted-code-block-font-family",
+    "--slotted-code-block-font-size",
+    "--slotted-code-block-inset-block",
+    "--slotted-code-block-inset-inline",
+    "--slotted-code-block-line-height",
+    "--slotted-code-block-radius",
+    "--slotted-code-block-surface",
+    "--slotted-code-block-tab-size",
+    "--slotted-code-comment",
+    "--slotted-code-constant",
+    "--slotted-code-function",
+    "--slotted-code-keyword",
+    "--slotted-code-number",
+    "--slotted-code-property",
+    "--slotted-code-punctuation",
+    "--slotted-code-string",
+    "--slotted-code-tag",
+    "--slotted-code-type",
+    "--slotted-code-variable",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-mono",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-highlight-tint-opacity",
+    "--slotted-line-height-md",
+    "--slotted-radius-md",
+    "--slotted-radius-sm",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Um ficheiro TypeScript com título, números de linha e um intervalo realçado, movido pelos controlos por baixo do palco.",
+      "language": "html",
+      "source": "<div\n  slCodeBlock\n  [code]=\"source\"\n  language=\"ts\"\n  lineNumbers\n  [marks]=\"{ highlight: '5-6' }\"\n  title=\"group.ts\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "highlight",
+      "title": "Texto primeiro, tokens quando chegam",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"source\" [highlight]=\"tokenise\" language=\"ts\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "engines",
+      "title": "Prism e Shiki entram pelos mapeamentos",
+      "note": "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.",
+      "language": "ts",
+      "source": "const prism = (code, lang) => fromPrismTokens(Prism.tokenize(code, Prism.languages[lang]));\nconst shiki = async (code, lang) =>\n  fromShikiTokens(\n    await codeToTokens(code, { includeExplanation: 'scopeName', lang, theme: 'none' }),\n  );\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "lineNumbers",
+      "title": "Números de linha",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"source\" language=\"ts\" lineNumbers start=\"98\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "marks",
+      "title": "Linhas marcadas",
+      "note": "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.",
+      "language": "html",
+      "source": "<div\n  slCodeBlock\n  [code]=\"source\"\n  language=\"sh\"\n  [marks]=\"{ error: '3', highlight: '1', warning: [4] }\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "diff",
+      "title": "Um diff",
+      "note": "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.",
+      "language": "html",
+      "source": "<div\n  slCodeBlock\n  [code]=\"source\"\n  language=\"css\"\n  lineNumbers\n  [marks]=\"{ add: '4-6', remove: '2-3' }\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "focus",
+      "title": "Foco numa parte do bloco",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"source\" language=\"json\" [marks]=\"{ focus: '3-6' }\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "wrap",
+      "title": "Quebrar linhas longas",
+      "note": "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.",
+      "language": "html",
+      "source": "<div\n  slCodeBlock\n  [code]=\"command\"\n  defaultWrap\n  language=\"sh\"\n  (wrapChangeRequest)=\"log($event.reason)\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "title",
+      "title": "Um ficheiro com nome",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"rows\" language=\"csv\" title=\"orders-2026-09.csv\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "collapse",
+      "title": "Dobrado atrás de \"Show more\"",
+      "note": "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.",
+      "language": "html",
+      "source": "<div\n  slCodeBlock\n  [code]=\"source\"\n  collapseAfter=\"6\"\n  language=\"json\"\n  [(revealed)]=\"revealed\"\n  (revealedChangeRequest)=\"track($event.value)\"\n></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "maxLines",
+      "title": "Rolar além de um máximo",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"log\" language=\"text\" lineNumbers maxLines=\"12\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "copy",
+      "title": "Copiar",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"source\" (copyRequest)=\"$event.copied && toast('Copiado')\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "loading",
+      "title": "Código a caminho, e nenhum código",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock code=\"\" loading title=\"deploy.log\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Conteúdo que a família não escolheu",
+      "note": "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.",
+      "language": "html",
+      "source": "<div slCodeBlock [code]=\"'<script>alert(1)</script>'\" language=\"html\"></div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Composição",
+      "note": "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.",
+      "language": "ts",
+      "source": "providers: [provideCodeBlockDefaults({ highlight: shiki, lineNumbers: true })];\n\n// <div slCodeBlock [code]=\"a\" language=\"ts\" title=\"a.ts\"></div>\n// <div slCodeBlock [code]=\"b\" language=\"css\" title=\"a.css\">\n//   <button slCodeBlockAction slButton size=\"xs\" variant=\"ghost\">Run</button>\n// </div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Teclado",
+      "note": "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.",
+      "language": "html",
+      "source": "<!-- \"group.ts, region\" — o título, porque o corpo só é uma região com nome enquanto o código transborda. -->\n<div slCodeBlock [code]=\"wide\" language=\"ts\" title=\"group.ts\"></div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}