@ksmv/ui-checks 0.31.0 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.33.0 - 2026-11-01
+
+- **Contratos:** tema `3.14.0` e contraste `22.0.0`, de 661 para 685 pares, para o `SideNav` da 0.33.0 (#652, #653). O ícone de aviso passa a ser medido em `--ui-side-nav-warning-icon`, e todo par novo mede um token da própria peça, que o tema pode declarar sem mudar o resto do app. **Quem tem tema próprio mede de novo.**
+
+## 0.32.0 - 2026-11-01
+
+- **Regra `components/native-date`** (#643). Vale o último atributo que escreve o `type`, inclusive num spread literal aninhado: `type="date" {...{ type: "text" }}` não acusa mais, e um `{ type }` abreviado conta como valor desconhecido.
+- **`h-lh` livre na `Surface`** (#643), como as outras alturas.
+- **Contratos:** tema `3.13.0` e contraste `21.0.0`, com 26 pares novos, para o `SideNav` da 0.32.0. **Quem tem tema próprio mede de novo.**
+
 ## 0.31.0 - 2026-10-31
 
 - **Regra opcional `components/native-date`** (#634). `components.nativeDates: true` recusa `type="date"` e `type="datetime-local"` literais em JSX. Fica desligada por padrão, até cada app ligar.

package/dist/contrast-contract.json

@@ -1,5 +1,5 @@
 {
-  "contractVersion": "20.0.0",
+  "contractVersion": "22.0.0",
   "schemaVersion": 3,
   "pairs": [
     { "foreground": "--ui-action-primary-text", "background": "--ui-action-primary-bg", "minimum": 4.5, "context": "normal-text" },
@@ -636,6 +636,56 @@
     { "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" }
+    { "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" },
+    { "foreground": "--ui-side-nav-danger-text", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-danger-detail-chrome" },
+    { "foreground": "--ui-side-nav-danger-text", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-danger-detail-hover-chrome" },
+    { "foreground": "--ui-side-nav-danger-text", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-danger-detail-row" },
+    { "foreground": "--ui-side-nav-warning-text", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-warning-detail-chrome" },
+    { "foreground": "--ui-side-nav-warning-text", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-warning-detail-hover-chrome" },
+    { "foreground": "--ui-side-nav-warning-text", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-warning-detail-row" },
+    { "foreground": "--ui-side-nav-warning-icon", "background": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-warning-icon-chrome" },
+    { "foreground": "--ui-side-nav-warning-icon", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-warning-icon-hover-chrome" },
+    { "foreground": "--ui-side-nav-warning-icon", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-warning-icon-row" },
+    { "foreground": "--ui-action-ghost-text", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-row-ghost" },
+    { "foreground": "--ui-text-primary", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-row-primary" },
+    { "foreground": "--ui-text-secondary", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-row-secondary" },
+    { "foreground": "--ui-text-button-text", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-row-text-button" },
+    { "foreground": "--ui-text-button-muted-text", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-row-text-button-muted" },
+    { "foreground": "--ui-action-ghost-text-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 4.5, "context": "side-nav-row-ghost-on-inverse" },
+    { "foreground": "--ui-action-ghost-text-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 4.5, "context": "side-nav-row-ghost-on-inverse-end" },
+    { "foreground": "--ui-text-primary-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 4.5, "context": "side-nav-row-primary-on-inverse" },
+    { "foreground": "--ui-text-primary-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 4.5, "context": "side-nav-row-primary-on-inverse-end" },
+    { "foreground": "--ui-text-secondary-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 4.5, "context": "side-nav-row-secondary-on-inverse" },
+    { "foreground": "--ui-text-secondary-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 4.5, "context": "side-nav-row-secondary-on-inverse-end" },
+    { "foreground": "--ui-text-button-text-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 4.5, "context": "side-nav-row-text-button-on-inverse" },
+    { "foreground": "--ui-text-button-text-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 4.5, "context": "side-nav-row-text-button-on-inverse-end" },
+    { "foreground": "--ui-side-nav-danger-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-danger-on-inverse" },
+    { "foreground": "--ui-side-nav-danger-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-danger-on-inverse-end" },
+    { "foreground": "--ui-side-nav-warning-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-warning-on-inverse" },
+    { "foreground": "--ui-side-nav-warning-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-warning-on-inverse-end" },
+    { "foreground": "--ui-side-nav-icon", "background": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-icon-chrome" },
+    { "foreground": "--ui-side-nav-icon-hover", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-icon-hover-chrome" },
+    { "foreground": "--ui-side-nav-icon", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-icon-row" },
+    { "foreground": "--ui-side-nav-icon-hover", "background": "--ui-action-ghost-bg-hover", "over": "--ui-side-nav-row-bg", "minimum": 3, "context": "side-nav-icon-tile" },
+    { "foreground": "--ui-side-nav-success-text", "background": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-success-chrome" },
+    { "foreground": "--ui-side-nav-success-text", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-success-hover-chrome" },
+    { "foreground": "--ui-side-nav-success-text", "background": "--ui-side-nav-row-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-success-row" },
+    { "foreground": "--ui-side-nav-success-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-success-on-inverse" },
+    { "foreground": "--ui-side-nav-success-on-inverse", "background": "--ui-side-nav-row-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-success-on-inverse-end" },
+    { "foreground": "--ui-side-nav-success-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-success-hover-on-inverse" },
+    { "foreground": "--ui-side-nav-success-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-success-hover-on-inverse-end" },
+    { "foreground": "--ui-side-nav-warning-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-warning-hover-on-inverse" },
+    { "foreground": "--ui-side-nav-warning-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-warning-hover-on-inverse-end" },
+    { "foreground": "--ui-side-nav-danger-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-danger-hover-on-inverse" },
+    { "foreground": "--ui-side-nav-danger-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-danger-hover-on-inverse-end" },
+    { "foreground": "--ui-side-nav-current-text", "background": "--ui-side-nav-current-bg", "over": "--ui-surface-chrome", "minimum": 4.5, "context": "side-nav-current-text" },
+    { "foreground": "--ui-side-nav-current-border", "background": "--ui-surface", "minimum": 3, "context": "side-nav-current-border" },
+    { "foreground": "--ui-side-nav-current-border", "background": "--ui-surface-chrome", "minimum": 3, "context": "side-nav-current-border-chrome" },
+    { "foreground": "--ui-side-nav-success-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-success-rest-on-inverse" },
+    { "foreground": "--ui-side-nav-success-on-inverse", "background": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-success-rest-on-inverse-end" },
+    { "foreground": "--ui-side-nav-warning-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-warning-rest-on-inverse" },
+    { "foreground": "--ui-side-nav-warning-on-inverse", "background": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-warning-rest-on-inverse-end" },
+    { "foreground": "--ui-side-nav-danger-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-row-danger-rest-on-inverse" },
+    { "foreground": "--ui-side-nav-danger-on-inverse", "background": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-row-danger-rest-on-inverse-end" }
   ]
 }

package/dist/rules/nativeDate.js

@@ -1,4 +1,4 @@
-import { isJsxAttribute, isJsxExpression, isJsxOpeningElement, isJsxSelfClosingElement, isJsxSpreadAttribute, isObjectLiteralExpression, isPropertyAssignment, isStringLiteralLikeNode, } from "typescript/unstable/ast";
+import { isJsxAttribute, isJsxExpression, isJsxOpeningElement, isJsxSelfClosingElement, isJsxSpreadAttribute, isObjectLiteralExpression, isPropertyAssignment, isShorthandPropertyAssignment, isSpreadAssignment, isStringLiteralLikeNode, } from "typescript/unstable/ast";
 import { propertyKey, unwrapTypeWrappers } from "./componentOverride.js";
 const nativeDateTypes = new Set(["date", "datetime-local"]);
 function literalOf(initializer) {
@@ -6,6 +6,20 @@ function literalOf(initializer) {
     const written = expression && unwrapTypeWrappers(expression);
     return written && isStringLiteralLikeNode(written) ? written.text : undefined;
 }
+// What a literal object writes to the type, in order: the last key or nested
+// literal spread that writes it is the one that holds.
+function typeWrittenByObject(object) {
+    return [...object.properties].reduce((written, property) => {
+        if (isPropertyAssignment(property) && propertyKey(property.name) === "type")
+            return literalOf(property.initializer) ?? "";
+        // A shorthand { type } is a variable, which the rule does not read.
+        if (isShorthandPropertyAssignment(property) && propertyKey(property.name) === "type")
+            return "";
+        if (isSpreadAssignment(property) && isObjectLiteralExpression(property.expression))
+            return typeWrittenByObject(property.expression) ?? written;
+        return written;
+    }, undefined);
+}
 // The native date fields follow the machine's language, so the same screen
 // shows mm/dd on one and dd/mm on another: the house's are DateInput, and the
 // formatters for text. Optional, since an app turns it on when its fields have
@@ -20,24 +34,19 @@ export function createNativeDateRule() {
             const sourceFile = file.sourceFile;
             if (!sourceFile)
                 return result;
-            const typeOf = (attribute) => {
+            // What an attribute writes to the type: nothing, a literal, or a value
+            // the rule cannot read (""), which takes the place of an earlier literal.
+            const typeWrittenBy = (attribute) => {
                 if (isJsxAttribute(attribute)) {
-                    return attribute.name.getText(sourceFile) === "type" ? literalOf(attribute.initializer) : undefined;
+                    return attribute.name.getText(sourceFile) === "type" ? (literalOf(attribute.initializer) ?? "") : undefined;
                 }
-                if (!isJsxSpreadAttribute(attribute) || !isObjectLiteralExpression(attribute.expression))
-                    return undefined;
-                // The last key is the one that holds.
-                const property = [...attribute.expression.properties]
-                    .reverse()
-                    .find((entry) => isPropertyAssignment(entry) && propertyKey(entry.name) === "type");
-                return property && isPropertyAssignment(property) ? literalOf(property.initializer) : undefined;
+                return isJsxSpreadAttribute(attribute) && isObjectLiteralExpression(attribute.expression) ? typeWrittenByObject(attribute.expression) : undefined;
             };
             const visit = (node) => {
                 if (isJsxOpeningElement(node) || isJsxSelfClosingElement(node)) {
-                    for (const attribute of node.attributes.properties) {
-                        const type = typeOf(attribute)?.toLowerCase();
-                        if (type === undefined || !nativeDateTypes.has(type))
-                            continue;
+                    // As in JSX, the last attribute that writes the type is the one that holds.
+                    const type = node.attributes.properties.reduce((written, attribute) => typeWrittenBy(attribute) ?? written, undefined)?.toLowerCase();
+                    if (type !== undefined && nativeDateTypes.has(type)) {
                         const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile));
                         result.violations.push({
                             anchor: `${node.tagName.getText(sourceFile)}|${type}`,

package/dist/rules/overrideCatalog.js

@@ -89,7 +89,7 @@ const arrangementUtilities = [
 export const arrangingComponents = new Set(["Card", "Surface"]);
 // The Surface's own height, for a panel or a frame that fills its room
 // (0.31.0, a request of the conselhos).
-const surfaceHeight = new RegExp(`^h-(?:${num}|${frac}|px|auto|full|screen|svh|lvh|dvh|min|max|fit|${arb})$`, "u");
+const surfaceHeight = new RegExp(`^h-(?:${num}|${frac}|px|auto|full|screen|svh|lvh|dvh|lh|min|max|fit|${arb})$`, "u");
 export function classifyClass(token, component) {
     const utility = utilityOf(token);
     if (freeUtilities.some((pattern) => pattern.test(utility)))

package/dist/theme-contract.json

@@ -1,5 +1,5 @@
 {
-  "contractVersion": "3.12.0",
+  "contractVersion": "3.14.0",
   "schemaVersion": 2,
   "prefix": "--ui-",
   "required": [
@@ -336,10 +336,24 @@
     "--ui-steps-complete-bg": { "kind": "token", "token": "--ui-surface-subtle" },
     "--ui-steps-track-filled": { "kind": "token", "token": "--ui-action-primary-bg" },
     "--ui-steps-track-empty": { "kind": "token", "token": "--ui-border-control" },
-    "--ui-side-nav-count-bg": { "kind": "token", "token": "--ui-surface-subtle" },
+    "--ui-side-nav-count-bg": { "kind": "token", "token": "--ui-action-ghost-bg-hover" },
     "--ui-side-nav-count-text": { "kind": "token", "token": "--ui-text-secondary" },
     "--ui-side-nav-count-bg-on-inverse": { "kind": "literal", "value": "transparent" },
     "--ui-side-nav-count-text-on-inverse": { "kind": "token", "token": "--ui-text-secondary-on-inverse" },
+    "--ui-side-nav-row-bg": { "kind": "token", "token": "--ui-surface" },
+    "--ui-side-nav-row-bg-on-inverse": { "kind": "token", "token": "--ui-surface-tile-bg" },
+    "--ui-side-nav-icon": { "kind": "token", "token": "--ui-action-ghost-text" },
+    "--ui-side-nav-icon-hover": { "kind": "token", "token": "--ui-action-ghost-text-hover" },
+    "--ui-side-nav-warning-icon": { "kind": "token", "token": "--ui-status-warning" },
+    "--ui-side-nav-success-text": { "kind": "token", "token": "--ui-status-success-text" },
+    "--ui-side-nav-warning-text": { "kind": "token", "token": "--ui-status-warning-text" },
+    "--ui-side-nav-danger-text": { "kind": "token", "token": "--ui-status-danger-text" },
+    "--ui-side-nav-success-on-inverse": { "kind": "token", "token": "--ui-status-success-on-inverse" },
+    "--ui-side-nav-warning-on-inverse": { "kind": "token", "token": "--ui-status-warning-on-inverse" },
+    "--ui-side-nav-danger-on-inverse": { "kind": "token", "token": "--ui-status-danger-on-inverse" },
+    "--ui-side-nav-current-bg": { "kind": "token", "token": "--ui-action-soft-accent-bg" },
+    "--ui-side-nav-current-text": { "kind": "token", "token": "--ui-action-soft-accent-text" },
+    "--ui-side-nav-current-border": { "kind": "token", "token": "--ui-action-soft-accent-border" },
     "--ui-side-nav-count-dot": { "kind": "token", "token": "--ui-status-info" },
     "--ui-side-nav-count-dot-ring": { "kind": "token", "token": "--ui-surface" },
     "--ui-side-nav-count-dot-on-inverse": { "kind": "token", "token": "--ui-status-info-on-inverse" },

package/package.json

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