@ksmv/ui-checks 0.28.2 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.30.0 - 2026-10-30
+
+- **A `Surface` arranja os filhos, como o `Card`** (#606). Em todos os tons, o arranjo dos filhos pela `className` (`flex`, `grid`, `gap-*`, `space-*`, `items-*`, `justify-*` e as propriedades de `style` equivalentes) passa a ser livre em `components/override`. O fundo, o padding e a borda continuam exigindo `data-ui-override`.
+- **Um arquivo de tema fora do `include` é erro de configuração** (#608). Quando um arquivo de `themes[].files` existe mas o `include` o deixa de fora, a saída é 2, com a mensagem que diz qual arquivo acrescentar. Antes, as declarações dele não eram lidas, e o tema aparecia como incompleto e os pares como sem cobertura, sem dizer por quê. Vale também para um tema com `computedEvidence`, porque a regra de forma e as declarações leem o arquivo. **Quem aponta o tema em `node_modules`** acrescenta o arquivo ao `include`.
+- **Spread de props escritas** (#608). Em `tokens/contrast`, um spread de objeto literal em JSX, ou da escolha entre dois (`{...(pronto ? { onBuscar } : {})}`), em que nenhuma prop é `className`, `class`, `style`, `dangerouslySetInnerHTML` ou de cor, passa a ficar coberto. Os outros spreads continuam sem cobertura.
+- **Contratos:** sem mudança, tema `3.12.0` e contraste `20.0.0`.
+
+## 0.29.0 - 2026-10-28
+
+- **Contratos de tema 3.12.0 e contraste 20.0.0** empacotados.
+  - O tema acrescenta o derivado opcional `--ui-surface-chrome`, que vem de `--ui-surface-subtle` (454 derivados). É o fundo da moldura do app, a `Surface tone="chrome"`.
+  - O tema também troca o padrão de `--ui-action-secondary-border`: ele passa a vir de `--ui-action-secondary-text`, e não mais de `--ui-border-control`. **Um tema que pinta o secundário cheio, com texto claro, e não declara a borda** passa a reprovar `action-secondary-boundary`: declare a borda.
+  - O contraste acrescenta quatorze pares sobre a moldura, com o contexto terminado em `-chrome`: o texto primário e o secundário, o link, o texto do fantasma (sozinho, no hover e no ativo), o botão de texto e o hover dele, o ícone do fantasma e o hover dele, a borda do pressionado e a do hover dele, a borda do secundário e o contador do `SideNav` (635 pares). Nenhum par saiu e nenhum limiar baixou.
+- **Quem usa `computedEvidence` precisa capturar a evidência de novo.**
+
 ## 0.28.2 - 2026-10-28
 
 - **Sai junto com o `@ksmv/ui-react` 0.28.2, sem mudança nas regras:** os contratos continuam tema 3.11.0 e contraste 19.0.0. A correção da posição dos painéis em RTL não muda nenhuma cor do contrato (ver o CHANGELOG do `@ksmv/ui-react`).

package/README.md

@@ -45,7 +45,9 @@ export default defineConfig({
 
 O valor de `selector` deve ser **textualmente idêntico** ao seletor escrito no CSS, inclusive nas aspas. O verificador não tenta provar que grafias diferentes são equivalentes.
 
-`include` precisa encontrar arquivos: nenhum arquivo analisado é falha, não sucesso. `exclude` e `suppressions` são opcionais.
+`include` precisa encontrar arquivos: nenhum arquivo analisado é falha, não sucesso. `exclude` e `suppressions` são opcionais. Os arquivos de `themes[].files` são lidos como os outros do `include`. Por isso, um tema de fora da pasta do app, como `node_modules/@ksmv/ui-react/dist/themes/neutral.css`, também entra no `include`. Desde a 0.30.0, um arquivo de tema que existe mas fica fora do `include` é erro de configuração (saída 2), com a mensagem que diz qual arquivo acrescentar. Antes, o tema aparecia como incompleto e os pares como sem cobertura, sem dizer por quê. Vale também para um tema com `computedEvidence`: a regra de forma e as declarações continuam lendo o arquivo.
+
+Um spread em JSX (`{...props}`) fica sem cobertura em `tokens/contrast`, porque pode levar `className`, `style` ou uma cor que a regra não lê. Desde a 0.30.0, o spread de props escritas no código, seja um objeto literal ou a escolha entre dois (`{...(pronto ? { onBuscar } : {})}`), em que nenhuma é `className`, `class`, `style`, `dangerouslySetInnerHTML` ou uma propriedade de cor, fica coberto.
 
 ## Baseline
 
@@ -176,7 +178,7 @@ components: {
 ```
 
 - **Livre:** o que encaixa o componente no pai — margem, largura, item de flex/grid (`flex-1`, `self-*`, `col-span-*`…), posição, `z-*`, visibilidade (`hidden`, `sr-only`) e alinhamento do texto. No `style`, as propriedades equivalentes.
-- **Exige `data-ui-override="motivo"` no mesmo elemento:** aparência (cor, fundo, borda, raio, sombra, fonte, altura, padding, `gap-*`, `overflow-*`), arranjo interno (`flex`, `grid-cols-*`, `justify-*`, `items-*`, `block`) e qualquer classe fora do catálogo, inclusive classes próprias do produto. Exceção, desde a 0.24.0: o `Card` é um bloco cujos filhos o consumidor arranja pela `className`, como a casa, então nele o arranjo dos filhos é livre (`block`, `flex`, `grid`, `space-x-*`, `space-y-*`, `gap-*`, `flex-col`, `grid-cols-*`, `items-*`, `justify-*` e afins, e as propriedades de `style` equivalentes, com o `display` só nos valores de arranjo escritos no código: `block`, `flex`, `inline-flex`, `grid`, `inline-grid` e `flow-root`; `contents`, `none` ou um valor em variável exigem a marca); uma divisória entre os filhos (`divide-*`), um fundo ou um padding continuam exigindo a marca. Também exigem a marca `className` ou `style` que a regra não consegue ler e props repassadas depois de `className` ou `style`.
+- **Exige `data-ui-override="motivo"` no mesmo elemento:** aparência (cor, fundo, borda, raio, sombra, fonte, altura, padding, `gap-*`, `overflow-*`), arranjo interno (`flex`, `grid-cols-*`, `justify-*`, `items-*`, `block`) e qualquer classe fora do catálogo, inclusive classes próprias do produto. Exceção, desde a 0.24.0: o `Card` é um bloco cujos filhos o consumidor arranja pela `className`, como a casa, e desde a 0.30.0 a `Surface` também, em todos os tons. Então nos dois o arranjo dos filhos é livre (`block`, `flex`, `grid`, `space-x-*`, `space-y-*`, `gap-*`, `flex-col`, `grid-cols-*`, `items-*`, `justify-*` e afins, e as propriedades de `style` equivalentes, com o `display` só nos valores de arranjo escritos no código: `block`, `flex`, `inline-flex`, `grid`, `inline-grid` e `flow-root`; `contents`, `none` ou um valor em variável exigem a marca); uma divisória entre os filhos (`divide-*`), um fundo ou um padding continuam exigindo a marca. Também exigem a marca `className` ou `style` que a regra não consegue ler e props repassadas depois de `className` ou `style`.
 - **Relatório:** sem marca, é uma violação (saída 1), que pode entrar em baseline durante a migração. Com marca, o elemento aparece em `overrides`, com o motivo.
 - **Arquivos:** os do `components.include` recebem só esta regra. Um arquivo que também está no `include` principal recebe as duas coisas, e aí a cobertura dinâmica volta a valer nele.
 - **O que a regra não vê:** um componente do produto que repassa props para um componente da biblioteca, e CSS do produto que mira as classes internas `.ui-*`; props repassadas sozinhas ou antes de `className`/`style` (`<Button {...props} />`); componente usado como valor (`const X = Button; <X />`); arquivos que não compilam — aparecem como erro operacional de parse (saída 2) e não são analisados pela regra.

package/dist/contrast-contract.json

@@ -1,5 +1,5 @@
 {
-  "contractVersion": "19.0.0",
+  "contractVersion": "20.0.0",
   "schemaVersion": 3,
   "pairs": [
     { "foreground": "--ui-action-primary-text", "background": "--ui-action-primary-bg", "minimum": 4.5, "context": "normal-text" },
@@ -622,6 +622,20 @@
     {"foreground": "--ui-reply-draft-author", "background": "--ui-surface", "minimum": 4.5, "context": "reply-draft-author"},
     {"foreground": "--ui-progress-ring-text", "background": "--ui-surface", "minimum": 4.5, "context": "progress-ring-text"},
     {"foreground": "--ui-progress-ring-text", "background": "--ui-surface-raised", "minimum": 4.5, "context": "progress-ring-text-raised"},
-    {"foreground": "--ui-progress-ring-text", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "progress-ring-text-subtle"}
+    {"foreground": "--ui-progress-ring-text", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "progress-ring-text-subtle"},
+    { "foreground": "--ui-text-primary", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "body-text-chrome" },
+    { "foreground": "--ui-text-secondary", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "secondary-text-chrome" },
+    { "foreground": "--ui-link-text", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "link-text-chrome" },
+    { "foreground": "--ui-action-ghost-text", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "normal-text-chrome" },
+    { "foreground": "--ui-action-ghost-text-hover", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "normal-text-hover-chrome" },
+    { "foreground": "--ui-action-ghost-text-hover", "background": "--ui-action-ghost-bg-active", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "normal-text-active-chrome" },
+    { "foreground": "--ui-text-button-text", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "text-button-text-chrome" },
+    { "foreground": "--ui-text-button-text-hover", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "text-button-text-hover-chrome" },
+    { "foreground": "--ui-icon-button-ghost-text", "background": "--ui-surface-chrome", "minimum": 3, "context": "icon-button-ghost-icon-chrome" },
+    { "foreground": "--ui-icon-button-ghost-text-hover", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 3, "context": "icon-button-ghost-icon-hover-chrome" },
+    { "foreground": "--ui-button-pressed-bg", "background": "--ui-surface-chrome", "minimum": 3, "context": "button-pressed-boundary-chrome" },
+    { "foreground": "--ui-button-pressed-bg-hover", "background": "--ui-surface-chrome", "minimum": 3, "context": "button-pressed-boundary-hover-chrome" },
+    { "foreground": "--ui-action-secondary-border", "background": "--ui-surface-chrome", "minimum": 3, "context": "action-secondary-boundary-chrome" },
+    { "foreground": "--ui-side-nav-count-text", "background": "--ui-side-nav-count-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-count-text-chrome" }
   ]
 }

package/dist/rules/overrideCatalog.js

@@ -82,8 +82,11 @@ const arrangementUtilities = [
     /^(?:items|justify-items|place-items)-(?:start|end|center|baseline|stretch|normal)$/u,
     /^(?:justify|content|place-content)-(?:start|end|center|between|around|evenly|stretch|normal|baseline)$/u,
 ];
-// The library's components that arrange their children by the consumer's className.
-export const arrangingComponents = new Set(["Card"]);
+// The library's components that arrange their children by the consumer's
+// className: the Card, and since 0.30.0 the Surface in every tone, whose
+// panels and frames the apps lay out as the house does (a request of the
+// conselhos).
+export const arrangingComponents = new Set(["Card", "Surface"]);
 export function classifyClass(token, component) {
     const utility = utilityOf(token);
     if (freeUtilities.some((pattern) => pattern.test(utility)))

package/dist/rules/tokenContrast.js

@@ -1,4 +1,4 @@
-import { isComputedPropertyName, isIdentifier, isJsxAttribute, isJsxExpression, isObjectLiteralExpression, isPropertyAssignment, isJsxSpreadAttribute, isStringLiteralLikeNode, } from "typescript/unstable/ast";
+import { isComputedPropertyName, isConditionalExpression, isIdentifier, isJsxAttribute, isJsxExpression, isObjectLiteralExpression, isPropertyAssignment, isJsxSpreadAttribute, isParenthesizedExpression, isShorthandPropertyAssignment, isStringLiteralLikeNode, } from "typescript/unstable/ast";
 import { composite, contrastRatio, faded, isColorBearingProperty, mix, paintOver, resolveColor, } from "../color.js";
 import { parseContrastManifest, } from "../contracts.js";
 import { createThemeCollector } from "./theme.js";
@@ -89,6 +89,28 @@ function propertyName(node) {
         ? node.expression.text
         : undefined;
 }
+// A spread whose props are written out in the source, as an object literal or
+// a choice between two (`{...(ready ? { onSearch } : {})}`), and none of them
+// carries a style: nothing in it can paint (a request of the login, 0.30.0).
+// Any other spread, or one that may pass className, style or a color, still
+// needs computed coverage; class too, which a custom element, or a component
+// that passes it on, renders, and dangerouslySetInnerHTML, whose markup may
+// carry its own classes and colors.
+const styleProps = new Set(["className", "class", "style", "dangerouslySetInnerHTML"]);
+function spreadsNoStyle(node) {
+    if (isParenthesizedExpression(node))
+        return spreadsNoStyle(node.expression);
+    if (isConditionalExpression(node))
+        return spreadsNoStyle(node.whenTrue) && spreadsNoStyle(node.whenFalse);
+    if (!isObjectLiteralExpression(node))
+        return false;
+    return node.properties.every((property) => {
+        if (!isPropertyAssignment(property) && !isShorthandPropertyAssignment(property))
+            return false;
+        const name = propertyName(property.name);
+        return name !== undefined && !styleProps.has(name) && !isColorBearingProperty(name);
+    });
+}
 function dynamicStyleResult(file) {
     const result = { uncovered: [], violations: [] };
     if (!file.sourceFile) {
@@ -96,7 +118,7 @@ function dynamicStyleResult(file) {
     }
     const sourceFile = file.sourceFile;
     const visit = (node) => {
-        if (isJsxSpreadAttribute(node)) {
+        if (isJsxSpreadAttribute(node) && !spreadsNoStyle(node.expression)) {
             const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile));
             result.uncovered.push({
                 column: position.character + 1,

package/dist/scan.js

@@ -1,4 +1,4 @@
-import { glob, readFile as readFileFromDisk } from "node:fs/promises";
+import { glob, readFile as readFileFromDisk, stat } from "node:fs/promises";
 import { extname, relative, resolve } from "node:path";
 import postcss from "postcss";
 import { computeLineStarts, createScanner, LanguageVariant, SyntaxKind, } from "typescript/unstable/ast";
@@ -290,6 +290,26 @@ export async function runChecks(config, options = {}) {
     }))
         .sort((left, right) => left.path.localeCompare(right.path));
     report.filesDiscovered = includedBeforeExcludes.length;
+    // A theme's files are read as any other file of include: one that exists
+    // but include leaves out would report the theme as incomplete and every pair
+    // unresolved, with nothing saying why (measured by the login, 0.30.0). With
+    // computed evidence too: the shape rule and the declarations read the file.
+    for (const theme of config.themes ?? []) {
+        for (const file of theme.files) {
+            const absolute = resolve(root, file);
+            if (selected.has(absolute))
+                continue;
+            const exists = await stat(absolute).then((found) => found.isFile(), () => false);
+            if (!exists)
+                continue;
+            report.operationalErrors.push({
+                code: "config",
+                message: includedBeforeExcludes.includes(absolute)
+                    ? `Theme ${theme.name} file ${toPosixPath(relative(root, absolute))} is removed by exclude: its declarations are not read. Take it out of exclude.`
+                    : `Theme ${theme.name} file ${toPosixPath(relative(root, absolute))} is not matched by include: its declarations are not read. Add it to include.`,
+            });
+        }
+    }
     const componentPaths = config.components
         ? (await discoverFiles(root, config.components.include, config.components.exclude)).filter((path) => extname(path).toLowerCase() !== ".css")
         : [];

package/dist/theme-contract.json

@@ -1,5 +1,5 @@
 {
-  "contractVersion": "3.11.0",
+  "contractVersion": "3.12.0",
   "schemaVersion": 2,
   "prefix": "--ui-",
   "required": [
@@ -79,7 +79,7 @@
     "--ui-numeric-ring-info-bg": { "kind": "literal", "value": "transparent" },
     "--ui-numeric-ring-info-text": { "kind": "token", "token": "--ui-text-primary" },
     "--ui-numeric-ring-info-border": { "kind": "token", "token": "--ui-status-info" },
-    "--ui-action-secondary-border": { "kind": "token", "token": "--ui-border-control" },
+    "--ui-action-secondary-border": { "kind": "token", "token": "--ui-action-secondary-text" },
     "--ui-status-success-border": { "kind": "token", "token": "--ui-status-success" },
     "--ui-status-warning-border": { "kind": "token", "token": "--ui-status-warning" },
     "--ui-status-danger-border": { "kind": "token", "token": "--ui-status-danger" },
@@ -405,6 +405,7 @@
     "--ui-board-drop-bg": { "kind": "token", "token": "--ui-action-soft-accent-bg" },
     "--ui-board-drop-border": { "kind": "token", "token": "--ui-action-primary-bg" },
     "--ui-surface-inverse-end": { "kind": "token", "token": "--ui-surface-inverse" },
+    "--ui-surface-chrome": { "kind": "token", "token": "--ui-surface-subtle" },
     "--ui-checkbox-circle-bg": { "kind": "literal", "value": "transparent" },
     "--ui-checkbox-circle-hover": { "kind": "token", "token": "--ui-control-checked-bg" },
     "--ui-checkbox-circle-border": { "kind": "token", "token": "--ui-checkbox-border" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ksmv/ui-checks",
-  "version": "0.28.2",
+  "version": "0.30.0",
   "description": "Static and computed quality checks for semantic UI token contracts.",
   "keywords": ["accessibility", "design-tokens", "quality", "static-analysis"],
   "license": "Apache-2.0",