@ksmv/ui-checks 0.23.2 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.24.0 - 2026-10-21
4
+
5
+ - **Contratos de tema 3.7.0 e de contraste 15.0.0** empacotados. O de tema ganha 76 derivados opcionais (416 no total); `--ui-message-outgoing-border` passa a derivar de `--ui-message-outgoing-bg`. O de contraste ganha 86 pares, altera 15 e remove um, `toggle-group-segment-border` (536 no total); continua no `schemaVersion` 3. O seletor não pinta mais a borda: o token `--ui-toggle-group-segment-border` permanece no tema sem ser lido, e o estado passa a ser medido por `toggle-group-segment-state`. Atualize o `@ksmv/ui-react` junto.
6
+ - **Novas obrigações de contraste:** texto e ícone do aviso e do estado vazio; rótulo, descrição e ícones do menu também no hover e nos círculos; hover da tabela e do cartão de rádio; trilho e bolinha do interruptor; estado e contador do seletor; texto do selo, bolinha neutra, contador e bolinha do botão; avatar de marca; e marcador do grupo fechado com a página atual no `SideNav`. Pares da caixa redonda, da linha feita e da barra passam a medir as novas cores e camadas pintadas. Os três pares do aviso info leem o fundo próprio dele. Os derivados e as superfícies estão documentados em `docs/architecture/css-contract.md`.
7
+ - **`components-overrides` no `Card` (#461):** arranjar os filhos deixa de exigir `data-ui-override`. Classes de flex/grid, `gap-*`, `space-*` e alinhamento, e propriedades equivalentes de `style`, são livres ali. `display` é livre só nos valores literais de arranjo (`block`, `flex`, `inline-flex`, `grid`, `inline-grid`, `flow-root`), inclusive atrás de `as` ou `satisfies`; `contents`, `none`, um valor dinâmico, aparência, divisórias, fundo e padding continuam exigindo a marca. Os demais componentes mantêm a regra anterior.
8
+ - **Quem usa `computedEvidence` precisa capturar a evidência de novo.** A receita do README passa a coletar também `group` e `over`, além de texto e fundo, para incluir todas as camadas do schema 3. `dotColor` dinâmico continua fora da cobertura, como as demais cores dinâmicas no JSX.
9
+
10
+ ## 0.23.3 - 2026-10-19
11
+
12
+ - **Contratos de tema 3.6.0 e de contraste 14.0.0** empacotados. O de tema ganha dois derivados opcionais, `--ui-list-item-done-description` (de `--ui-text-secondary`) e `--ui-list-item-done-control` (de `--ui-control-checked-bg`), 340 no total. No de contraste, nove pares da linha feita mudam de token, e nenhum entra ou sai (451 no total). A descrição (`list-item-done-description`, nas três superfícies) passa a medir `--ui-list-item-done-description`; o disco (`list-item-done-circle-disc`) e o fundo da marca (`list-item-done-circle-mark`), nas três superfícies, passam a medir `--ui-list-item-done-control`. Atualize o `@ksmv/ui-react` junto.
13
+ - **Quem usa `computedEvidence` precisa capturar a evidência de novo:** os dois contratos mudaram.
14
+ - Quem vem da 0.22.1 sobe direto para a 0.23.3: as mudanças da 0.23.2, logo abaixo, valem também.
15
+
3
16
  ## 0.23.2 - 2026-10-19
4
17
 
5
18
  - **Nem a 0.23.0 nem a 0.23.1 foram publicadas.** A release do `@ksmv/ui-react` parou nas duas, na suíte de navegadores, e as do checks, que saem junto com ela, ficaram retidas no npm sem aprovação. Nada mudou no pacote desde então: de 0.22.1, atualize direto para a 0.23.2. As tags `checks-v0.23.0` e `checks-v0.23.1` existem no repositório, mas não têm versão no registro.
package/README.md CHANGED
@@ -129,7 +129,9 @@ const tokens = [...new Set([
129
129
  ...Object.keys(contracts.theme.derived),
130
130
  ...Object.values(contracts.theme.derived),
131
131
  ...contracts.theme.brandComposition,
132
- ...contracts.contrast.pairs.flatMap(({ background, foreground }) => [background, foreground]),
132
+ // Every layer of each pair: the text, the fill, and, since schema 3, the
133
+ // outer surface and the group's own fill.
134
+ ...contracts.contrast.pairs.flatMap(({ background, foreground, group, over }) => [background, foreground, group, over].filter(Boolean)),
133
135
  ])];
134
136
 
135
137
  const browser = await chromium.launch();
@@ -174,7 +176,7 @@ components: {
174
176
  ```
175
177
 
176
178
  - **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.
177
- - **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. Também exigem a marca `className` ou `style` que a regra não consegue ler e props repassadas depois de `className` ou `style`.
179
+ - **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`.
178
180
  - **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.
179
181
  - **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.
180
182
  - **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.
@@ -1,5 +1,5 @@
1
1
  {
2
- "contractVersion": "13.0.0",
2
+ "contractVersion": "15.0.0",
3
3
  "schemaVersion": 3,
4
4
  "pairs": [
5
5
  { "foreground": "--ui-action-primary-text", "background": "--ui-action-primary-bg", "minimum": 4.5, "context": "normal-text" },
@@ -33,7 +33,7 @@
33
33
  { "foreground": "--ui-loading-indicator-color", "background": "--ui-surface", "minimum": 3, "context": "loading-indicator" },
34
34
  { "foreground": "--ui-status-danger-text", "background": "--ui-surface", "minimum": 4.5, "context": "field-error-text" },
35
35
  { "foreground": "--ui-status-danger", "background": "--ui-surface", "minimum": 3, "context": "invalid-control-boundary" },
36
- { "foreground": "--ui-status-info", "background": "--ui-surface-subtle", "minimum": 3, "context": "progress-indicator" },
36
+ { "foreground": "--ui-status-info", "background": "--ui-progress-track", "minimum": 3, "context": "progress-indicator" },
37
37
  { "foreground": "--ui-text-inverse", "background": "--ui-surface-inverse", "minimum": 4.5, "context": "inverse-text" },
38
38
  { "foreground": "--ui-border-control", "background": "--ui-surface", "minimum": 3, "context": "control-boundary" },
39
39
  { "foreground": "--ui-control-checked-bg", "background": "--ui-surface", "minimum": 3, "context": "checked-control-boundary" },
@@ -155,7 +155,7 @@
155
155
  { "foreground": "--ui-alert-text-success", "background": "--ui-status-success-bg", "minimum": 4.5, "context": "alert-text-success" },
156
156
  { "foreground": "--ui-alert-text-warning", "background": "--ui-status-warning-bg", "minimum": 4.5, "context": "alert-text-warning" },
157
157
  { "foreground": "--ui-alert-text-danger", "background": "--ui-status-danger-bg", "minimum": 4.5, "context": "alert-text-danger" },
158
- { "foreground": "--ui-alert-text-info", "background": "--ui-status-info-bg", "minimum": 4.5, "context": "alert-text-info" },
158
+ { "foreground": "--ui-alert-text-info", "background": "--ui-alert-bg-info", "minimum": 4.5, "context": "alert-text-info" },
159
159
  { "foreground": "--ui-alert-dismiss", "background": "--ui-surface-subtle", "minimum": 3, "context": "alert-dismiss" },
160
160
  { "foreground": "--ui-alert-dismiss", "background": "--ui-alert-dismiss-bg-hover", "over": "--ui-surface-subtle", "minimum": 3, "context": "alert-dismiss-hover" },
161
161
  { "foreground": "--ui-alert-dismiss-success", "background": "--ui-status-success-bg", "minimum": 3, "context": "alert-dismiss-success" },
@@ -164,8 +164,30 @@
164
164
  { "foreground": "--ui-alert-dismiss-warning", "background": "--ui-alert-dismiss-bg-hover", "over": "--ui-status-warning-bg", "minimum": 3, "context": "alert-dismiss-warning-hover" },
165
165
  { "foreground": "--ui-alert-dismiss-danger", "background": "--ui-status-danger-bg", "minimum": 3, "context": "alert-dismiss-danger" },
166
166
  { "foreground": "--ui-alert-dismiss-danger", "background": "--ui-alert-dismiss-bg-hover", "over": "--ui-status-danger-bg", "minimum": 3, "context": "alert-dismiss-danger-hover" },
167
- { "foreground": "--ui-alert-dismiss-info", "background": "--ui-status-info-bg", "minimum": 3, "context": "alert-dismiss-info" },
168
- { "foreground": "--ui-alert-dismiss-info", "background": "--ui-alert-dismiss-bg-hover", "over": "--ui-status-info-bg", "minimum": 3, "context": "alert-dismiss-info-hover" },
167
+ { "foreground": "--ui-alert-dismiss-info", "background": "--ui-alert-bg-info", "minimum": 3, "context": "alert-dismiss-info" },
168
+ { "foreground": "--ui-alert-dismiss-info", "background": "--ui-alert-dismiss-bg-hover", "over": "--ui-alert-bg-info", "minimum": 3, "context": "alert-dismiss-info-hover" },
169
+ { "foreground": "--ui-alert-title", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "alert-title" },
170
+ { "foreground": "--ui-alert-title-success", "background": "--ui-status-success-bg", "minimum": 4.5, "context": "alert-title-success" },
171
+ { "foreground": "--ui-alert-title-warning", "background": "--ui-status-warning-bg", "minimum": 4.5, "context": "alert-title-warning" },
172
+ { "foreground": "--ui-alert-title-danger", "background": "--ui-status-danger-bg", "minimum": 4.5, "context": "alert-title-danger" },
173
+ { "foreground": "--ui-alert-title-info", "background": "--ui-alert-bg-info", "minimum": 4.5, "context": "alert-title-info" },
174
+ { "foreground": "--ui-alert-icon", "background": "--ui-surface-subtle", "minimum": 3, "context": "alert-icon" },
175
+ { "foreground": "--ui-alert-icon-success", "background": "--ui-status-success-bg", "minimum": 3, "context": "alert-icon-success" },
176
+ { "foreground": "--ui-alert-icon-warning", "background": "--ui-status-warning-bg", "minimum": 3, "context": "alert-icon-warning" },
177
+ { "foreground": "--ui-alert-icon-danger", "background": "--ui-status-danger-bg", "minimum": 3, "context": "alert-icon-danger" },
178
+ { "foreground": "--ui-alert-icon-info", "background": "--ui-alert-bg-info", "minimum": 3, "context": "alert-icon-info" },
179
+ { "foreground": "--ui-empty-state-title", "background": "--ui-surface", "minimum": 4.5, "context": "empty-state-title" },
180
+ { "foreground": "--ui-empty-state-title", "background": "--ui-surface-raised", "minimum": 4.5, "context": "empty-state-title-raised" },
181
+ { "foreground": "--ui-empty-state-title", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "empty-state-title-subtle" },
182
+ { "foreground": "--ui-empty-state-title-inline", "background": "--ui-surface", "minimum": 4.5, "context": "empty-state-title-inline" },
183
+ { "foreground": "--ui-empty-state-title-inline", "background": "--ui-surface-raised", "minimum": 4.5, "context": "empty-state-title-inline-raised" },
184
+ { "foreground": "--ui-empty-state-title-inline", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "empty-state-title-inline-subtle" },
185
+ { "foreground": "--ui-empty-state-description", "background": "--ui-surface", "minimum": 4.5, "context": "empty-state-description" },
186
+ { "foreground": "--ui-empty-state-description", "background": "--ui-surface-raised", "minimum": 4.5, "context": "empty-state-description-raised" },
187
+ { "foreground": "--ui-empty-state-description", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "empty-state-description-subtle" },
188
+ { "foreground": "--ui-empty-state-icon", "background": "--ui-surface", "minimum": 3, "context": "empty-state-icon" },
189
+ { "foreground": "--ui-empty-state-icon", "background": "--ui-surface-raised", "minimum": 3, "context": "empty-state-icon-raised" },
190
+ { "foreground": "--ui-empty-state-icon", "background": "--ui-surface-subtle", "minimum": 3, "context": "empty-state-icon-subtle" },
169
191
  { "foreground": "--ui-section-label-text", "background": "--ui-surface", "minimum": 4.5, "context": "section-label-text" },
170
192
  { "foreground": "--ui-section-label-text", "background": "--ui-surface-raised", "minimum": 4.5, "context": "section-label-text-raised" },
171
193
  { "foreground": "--ui-section-label-text", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "section-label-text-subtle" },
@@ -179,6 +201,36 @@
179
201
  { "foreground": "--ui-menu-item-text-warning", "background": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-warning" },
180
202
  { "foreground": "--ui-menu-item-text-danger", "background": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-danger" },
181
203
  { "foreground": "--ui-menu-item-text-info", "background": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-info" },
204
+ { "foreground": "--ui-action-ghost-text-hover", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-hover" },
205
+ { "foreground": "--ui-menu-item-text-accent-hover", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-accent-hover" },
206
+ { "foreground": "--ui-menu-item-text-warning-hover", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-warning-hover" },
207
+ { "foreground": "--ui-menu-item-text-danger-hover", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-text-danger-hover" },
208
+ { "foreground": "--ui-menu-item-description", "background": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-description" },
209
+ { "foreground": "--ui-menu-item-description", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "menu-item-description-hover" },
210
+ { "foreground": "--ui-menu-item-icon", "background": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon" },
211
+ { "foreground": "--ui-menu-item-icon", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-hover" },
212
+ { "foreground": "--ui-menu-item-icon", "background": "--ui-menu-item-icon-bg", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-circle" },
213
+ { "foreground": "--ui-menu-item-icon", "background": "--ui-menu-item-icon-bg", "group": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "opacity": 1, "minimum": 3, "context": "menu-item-icon-circle-hover" },
214
+ { "foreground": "--ui-menu-item-icon-accent", "background": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-accent" },
215
+ { "foreground": "--ui-menu-item-icon-accent", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-accent-hover" },
216
+ { "foreground": "--ui-menu-item-icon-accent", "background": "--ui-menu-item-icon-bg-accent", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-accent-circle" },
217
+ { "foreground": "--ui-menu-item-icon-accent", "background": "--ui-menu-item-icon-bg-accent", "group": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "opacity": 1, "minimum": 3, "context": "menu-item-icon-accent-circle-hover" },
218
+ { "foreground": "--ui-menu-item-icon-brand", "background": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-brand" },
219
+ { "foreground": "--ui-menu-item-icon-brand", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-brand-hover" },
220
+ { "foreground": "--ui-menu-item-icon-brand", "background": "--ui-menu-item-icon-bg-brand", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-brand-circle" },
221
+ { "foreground": "--ui-menu-item-icon-brand", "background": "--ui-menu-item-icon-bg-brand", "group": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "opacity": 1, "minimum": 3, "context": "menu-item-icon-brand-circle-hover" },
222
+ { "foreground": "--ui-menu-item-icon-warning", "background": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-warning" },
223
+ { "foreground": "--ui-menu-item-icon-warning", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-warning-hover" },
224
+ { "foreground": "--ui-menu-item-icon-warning", "background": "--ui-menu-item-icon-bg-warning", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-warning-circle" },
225
+ { "foreground": "--ui-menu-item-icon-warning", "background": "--ui-menu-item-icon-bg-warning", "group": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "opacity": 1, "minimum": 3, "context": "menu-item-icon-warning-circle-hover" },
226
+ { "foreground": "--ui-menu-item-icon-danger", "background": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-danger" },
227
+ { "foreground": "--ui-menu-item-icon-danger", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-danger-hover" },
228
+ { "foreground": "--ui-menu-item-icon-danger", "background": "--ui-menu-item-icon-bg-danger", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-danger-circle" },
229
+ { "foreground": "--ui-menu-item-icon-danger", "background": "--ui-menu-item-icon-bg-danger", "group": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "opacity": 1, "minimum": 3, "context": "menu-item-icon-danger-circle-hover" },
230
+ { "foreground": "--ui-menu-item-icon-info", "background": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-info" },
231
+ { "foreground": "--ui-menu-item-icon-info", "background": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-info-hover" },
232
+ { "foreground": "--ui-menu-item-icon-info", "background": "--ui-menu-item-icon-bg-info", "over": "--ui-surface-raised", "minimum": 3, "context": "menu-item-icon-info-circle" },
233
+ { "foreground": "--ui-menu-item-icon-info", "background": "--ui-menu-item-icon-bg-info", "group": "--ui-menu-item-bg-hover", "over": "--ui-surface-raised", "opacity": 1, "minimum": 3, "context": "menu-item-icon-info-circle-hover" },
182
234
  { "foreground": "--ui-text-primary", "background": "--ui-radio-card-checked-bg", "over": "--ui-surface", "minimum": 4.5, "context": "radio-card-text-checked" },
183
235
  { "foreground": "--ui-text-secondary", "background": "--ui-radio-card-checked-bg", "over": "--ui-surface", "minimum": 4.5, "context": "radio-card-description-checked" },
184
236
  { "foreground": "--ui-text-primary", "background": "--ui-radio-card-checked-bg-danger", "over": "--ui-surface", "minimum": 4.5, "context": "radio-card-text-checked-danger" },
@@ -186,24 +238,34 @@
186
238
  { "foreground": "--ui-radio-card-checked-border-danger", "background": "--ui-surface", "minimum": 3, "context": "radio-card-border-danger" },
187
239
  { "foreground": "--ui-control-checked-bg", "background": "--ui-radio-card-checked-bg", "over": "--ui-surface", "minimum": 3, "context": "radio-card-checked-border" },
188
240
  { "foreground": "--ui-radio-card-checked-border-danger", "background": "--ui-radio-card-checked-bg-danger", "over": "--ui-surface", "minimum": 3, "context": "radio-card-checked-border-danger" },
241
+ { "foreground": "--ui-text-primary", "background": "--ui-radio-card-bg-hover", "over": "--ui-surface", "minimum": 4.5, "context": "radio-card-text-hover" },
242
+ { "foreground": "--ui-text-secondary", "background": "--ui-radio-card-bg-hover", "over": "--ui-surface", "minimum": 4.5, "context": "radio-card-description-hover" },
243
+ { "foreground": "--ui-border-control", "background": "--ui-radio-card-bg-hover", "over": "--ui-surface", "minimum": 3, "context": "radio-card-indicator-hover" },
189
244
  { "foreground": "--ui-table-header-text", "background": "--ui-surface", "minimum": 4.5, "context": "table-header-text" },
190
245
  { "foreground": "--ui-table-header-text", "background": "--ui-surface-raised", "minimum": 4.5, "context": "table-header-text-raised" },
191
246
  { "foreground": "--ui-table-header-text", "background": "--ui-table-header-bg", "minimum": 4.5, "context": "table-header-text-subtle" },
247
+ { "foreground": "--ui-text-primary", "background": "--ui-table-row-bg-hover", "over": "--ui-surface", "minimum": 4.5, "context": "table-row-hover-text" },
248
+ { "foreground": "--ui-text-primary", "background": "--ui-table-row-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "table-row-hover-text-raised" },
249
+ { "foreground": "--ui-text-secondary", "background": "--ui-table-row-bg-hover", "over": "--ui-surface", "minimum": 4.5, "context": "table-row-hover-secondary-text" },
250
+ { "foreground": "--ui-text-secondary", "background": "--ui-table-row-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "table-row-hover-secondary-text-raised" },
192
251
  { "foreground": "--ui-toggle-group-checked-text", "background": "--ui-toggle-group-checked-bg", "minimum": 4.5, "context": "toggle-group-checked-text" },
193
252
  { "foreground": "--ui-toggle-group-checked-text", "background": "--ui-toggle-group-checked-bg-hover", "minimum": 4.5, "context": "toggle-group-checked-text-hover" },
194
253
  { "foreground": "--ui-toggle-group-checked-border", "background": "--ui-surface", "minimum": 3, "context": "toggle-group-checked-border" },
195
254
  { "foreground": "--ui-toggle-group-track-text", "background": "--ui-toggle-group-track-bg", "minimum": 4.5, "context": "toggle-group-track-text" },
196
255
  { "foreground": "--ui-toggle-group-segment-text", "background": "--ui-toggle-group-segment-bg", "minimum": 4.5, "context": "toggle-group-segment-text" },
197
256
  { "foreground": "--ui-toggle-group-segment-text", "background": "--ui-toggle-group-track-bg", "minimum": 4.5, "context": "toggle-group-segment-text-hover" },
198
- { "foreground": "--ui-toggle-group-segment-border", "background": "--ui-toggle-group-segment-bg", "minimum": 3, "context": "toggle-group-segment-border" },
257
+ { "foreground": "--ui-toggle-group-segment-text", "background": "--ui-toggle-group-track-text", "minimum": 3, "context": "toggle-group-segment-state" },
258
+ { "foreground": "--ui-toggle-group-count-text", "background": "--ui-toggle-group-count-bg", "over": "--ui-surface", "minimum": 4.5, "context": "toggle-group-count-text" },
259
+ { "foreground": "--ui-toggle-group-checked-count-text", "background": "--ui-toggle-group-checked-count-bg", "over": "--ui-toggle-group-checked-bg", "minimum": 4.5, "context": "toggle-group-checked-count-text" },
260
+ { "foreground": "--ui-toggle-group-checked-count-text", "background": "--ui-toggle-group-checked-count-bg", "over": "--ui-toggle-group-checked-bg-hover", "minimum": 4.5, "context": "toggle-group-checked-count-text-hover" },
199
261
  { "foreground": "--ui-badge-solid-accent-text", "background": "--ui-badge-solid-accent-bg", "minimum": 4.5, "context": "badge-solid-accent-text" },
200
262
  { "foreground": "--ui-badge-solid-brand-text", "background": "--ui-badge-solid-brand-bg", "minimum": 4.5, "context": "badge-solid-brand-text" },
201
263
  { "foreground": "--ui-status-success-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "status-indicator-success-on-inverse" },
202
264
  { "foreground": "--ui-status-warning-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "status-indicator-warning-on-inverse" },
203
265
  { "foreground": "--ui-status-danger-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "status-indicator-danger-on-inverse" },
204
266
  { "foreground": "--ui-status-info-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "status-indicator-info-on-inverse" },
205
- { "foreground": "--ui-progress-accent", "background": "--ui-surface-subtle", "minimum": 3, "context": "progress-accent" },
206
- { "foreground": "--ui-progress-brand", "background": "--ui-surface-subtle", "minimum": 3, "context": "progress-brand" },
267
+ { "foreground": "--ui-progress-accent", "background": "--ui-progress-track", "minimum": 3, "context": "progress-accent" },
268
+ { "foreground": "--ui-progress-brand", "background": "--ui-progress-track", "minimum": 3, "context": "progress-brand" },
207
269
  { "foreground": "--ui-icon-button-ghost-text", "background": "--ui-icon-button-outlined-bg", "over": "--ui-surface", "minimum": 3, "context": "icon-button-outlined-icon" },
208
270
  { "foreground": "--ui-icon-button-ghost-text", "background": "--ui-icon-button-outlined-bg", "over": "--ui-surface-raised", "minimum": 3, "context": "icon-button-outlined-icon-raised" },
209
271
  { "foreground": "--ui-icon-button-ghost-text", "background": "--ui-icon-button-outlined-bg", "over": "--ui-surface-subtle", "minimum": 3, "context": "icon-button-outlined-icon-subtle" },
@@ -214,6 +276,9 @@
214
276
  { "foreground": "--ui-checkbox-border", "background": "--ui-checkbox-bg", "over": "--ui-surface", "minimum": 3, "context": "checkbox-boundary" },
215
277
  { "foreground": "--ui-checkbox-border", "background": "--ui-surface", "minimum": 3, "context": "checkbox-boundary-surface" },
216
278
  { "foreground": "--ui-checkbox-mark", "background": "--ui-control-checked-bg", "minimum": 3, "context": "checkbox-mark" },
279
+ { "foreground": "--ui-switch-track", "background": "--ui-surface", "minimum": 3, "context": "switch-track" },
280
+ { "foreground": "--ui-switch-thumb", "background": "--ui-switch-track", "over": "--ui-surface", "minimum": 3, "context": "switch-thumb" },
281
+ { "foreground": "--ui-switch-thumb-checked", "background": "--ui-control-checked-bg", "minimum": 3, "context": "switch-thumb-checked" },
217
282
  { "foreground": "--ui-button-pressed-text", "background": "--ui-button-pressed-bg", "minimum": 4.5, "context": "button-pressed-text" },
218
283
  { "foreground": "--ui-button-pressed-text", "background": "--ui-button-pressed-bg-hover", "minimum": 4.5, "context": "button-pressed-text-hover" },
219
284
  { "foreground": "--ui-button-pressed-bg", "background": "--ui-surface", "minimum": 3, "context": "button-pressed-boundary" },
@@ -338,11 +403,11 @@
338
403
  { "foreground": "--ui-button-pressed-bg-hover-on-inverse", "background": "--ui-surface-inverse-end", "minimum": 3, "context": "button-pressed-boundary-hover-on-inverse-end" },
339
404
  { "foreground": "--ui-side-nav-count-text-on-inverse", "background": "--ui-side-nav-count-bg-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 4.5, "context": "side-nav-count-text-on-inverse-end" },
340
405
  { "foreground": "--ui-text-muted-on-inverse", "background": "--ui-surface-inverse-end", "minimum": 4.5, "context": "inverse-muted-text-end" },
341
- { "foreground": "--ui-checkbox-border", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface", "minimum": 3, "context": "checkbox-circle-ring" },
406
+ { "foreground": "--ui-checkbox-circle-border", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface", "minimum": 3, "context": "checkbox-circle-ring" },
342
407
  { "foreground": "--ui-checkbox-circle-hover", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface", "minimum": 3, "context": "checkbox-circle-ring-hover" },
343
- { "foreground": "--ui-checkbox-border", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface-raised", "minimum": 3, "context": "checkbox-circle-ring-raised" },
408
+ { "foreground": "--ui-checkbox-circle-border", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface-raised", "minimum": 3, "context": "checkbox-circle-ring-raised" },
344
409
  { "foreground": "--ui-checkbox-circle-hover", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface-raised", "minimum": 3, "context": "checkbox-circle-ring-hover-raised" },
345
- { "foreground": "--ui-checkbox-border", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface-subtle", "minimum": 3, "context": "checkbox-circle-ring-subtle" },
410
+ { "foreground": "--ui-checkbox-circle-border", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface-subtle", "minimum": 3, "context": "checkbox-circle-ring-subtle" },
346
411
  { "foreground": "--ui-checkbox-circle-hover", "background": "--ui-checkbox-circle-bg", "over": "--ui-surface-subtle", "minimum": 3, "context": "checkbox-circle-ring-hover-subtle" },
347
412
  { "foreground": "--ui-text-primary", "background": "--ui-list-item-success-bg-hover", "over": "--ui-surface", "minimum": 4.5, "context": "list-item-title-success-hover" },
348
413
  { "foreground": "--ui-text-secondary", "background": "--ui-list-item-success-bg-hover", "over": "--ui-surface", "minimum": 4.5, "context": "list-item-description-success-hover" },
@@ -378,23 +443,23 @@
378
443
  { "foreground": "--ui-list-item-title-hover", "background": "--ui-list-item-info-bg", "over": "--ui-surface-raised", "minimum": 4.5, "context": "list-item-link-hover-info-raised" },
379
444
  { "foreground": "--ui-list-item-title-hover", "background": "--ui-list-item-info-bg-hover", "over": "--ui-surface-raised", "minimum": 4.5, "context": "list-item-link-hover-info-hover-raised" },
380
445
  { "foreground": "--ui-list-item-done-title", "background": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-title" },
381
- { "foreground": "--ui-text-secondary", "background": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-description" },
382
- { "foreground": "--ui-control-checked-bg", "background": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-disc" },
383
- { "foreground": "--ui-checkbox-mark", "background": "--ui-control-checked-bg", "group": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-mark" },
446
+ { "foreground": "--ui-list-item-done-description", "background": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-description" },
447
+ { "foreground": "--ui-list-item-done-control", "background": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-disc" },
448
+ { "foreground": "--ui-list-item-done-mark", "background": "--ui-list-item-done-control", "group": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-mark" },
384
449
  { "foreground": "--ui-list-item-done-title", "background": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-title-raised" },
385
- { "foreground": "--ui-text-secondary", "background": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-description-raised" },
386
- { "foreground": "--ui-control-checked-bg", "background": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-disc-raised" },
387
- { "foreground": "--ui-checkbox-mark", "background": "--ui-control-checked-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-mark-raised" },
450
+ { "foreground": "--ui-list-item-done-description", "background": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-description-raised" },
451
+ { "foreground": "--ui-list-item-done-control", "background": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-disc-raised" },
452
+ { "foreground": "--ui-list-item-done-mark", "background": "--ui-list-item-done-control", "group": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-mark-raised" },
388
453
  { "foreground": "--ui-list-item-done-title", "background": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-title-subtle" },
389
- { "foreground": "--ui-text-secondary", "background": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-description-subtle" },
390
- { "foreground": "--ui-control-checked-bg", "background": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-disc-subtle" },
391
- { "foreground": "--ui-checkbox-mark", "background": "--ui-control-checked-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-mark-subtle" },
454
+ { "foreground": "--ui-list-item-done-description", "background": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 4.5, "context": "list-item-done-description-subtle" },
455
+ { "foreground": "--ui-list-item-done-control", "background": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-disc-subtle" },
456
+ { "foreground": "--ui-list-item-done-mark", "background": "--ui-list-item-done-control", "group": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-mark-subtle" },
392
457
  { "foreground": "--ui-list-item-done-ring", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring" },
393
- { "foreground": "--ui-checkbox-circle-hover", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-hover" },
458
+ { "foreground": "--ui-list-item-done-ring-hover", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-hover" },
394
459
  { "foreground": "--ui-list-item-done-ring", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-raised" },
395
- { "foreground": "--ui-checkbox-circle-hover", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-hover-raised" },
460
+ { "foreground": "--ui-list-item-done-ring-hover", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-raised", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-hover-raised" },
396
461
  { "foreground": "--ui-list-item-done-ring", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-subtle" },
397
- { "foreground": "--ui-checkbox-circle-hover", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-hover-subtle" },
462
+ { "foreground": "--ui-list-item-done-ring-hover", "background": "--ui-checkbox-circle-bg", "group": "--ui-surface-subtle", "over": "--ui-surface-subtle", "opacity": 0.75, "minimum": 3, "context": "list-item-done-circle-ring-hover-subtle" },
398
463
  { "foreground": "--ui-steps-upcoming-title", "background": "--ui-surface", "over": "--ui-surface", "opacity": 0.7, "minimum": 4.5, "context": "steps-upcoming-title" },
399
464
  { "foreground": "--ui-steps-upcoming-description", "background": "--ui-surface", "over": "--ui-surface", "opacity": 0.7, "minimum": 4.5, "context": "steps-upcoming-description" },
400
465
  { "foreground": "--ui-steps-upcoming-marker-text", "background": "--ui-steps-upcoming-marker-bg", "group": "--ui-surface", "over": "--ui-surface", "opacity": 0.7, "minimum": 4.5, "context": "steps-upcoming-marker" },
@@ -452,6 +517,26 @@
452
517
  { "foreground": "--ui-message-incoming-audio-wave-unplayed", "background": "--ui-surface-subtle", "minimum": 3, "context": "audio-wave-unplayed-subtle" },
453
518
  { "foreground": "--ui-message-incoming-audio-playhead", "background": "--ui-surface-subtle", "minimum": 3, "context": "audio-playhead-subtle" },
454
519
  { "foreground": "--ui-message-incoming-audio-time", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "audio-time-subtle" },
455
- { "foreground": "--ui-message-incoming-audio-speed-text", "background": "--ui-message-incoming-audio-speed-bg", "over": "--ui-surface-subtle", "minimum": 4.5, "context": "audio-speed-subtle" }
520
+ { "foreground": "--ui-message-incoming-audio-speed-text", "background": "--ui-message-incoming-audio-speed-bg", "over": "--ui-surface-subtle", "minimum": 4.5, "context": "audio-speed-subtle" },
521
+ { "foreground": "--ui-button-pressed-bg", "background": "--ui-surface", "minimum": 3, "context": "side-nav-group-current-marker" },
522
+ { "foreground": "--ui-button-pressed-bg-on-inverse", "background": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-group-current-marker-on-inverse" },
523
+ { "foreground": "--ui-button-pressed-bg-on-inverse", "background": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-group-current-marker-on-inverse-end" },
524
+ { "foreground": "--ui-button-pressed-bg", "background": "--ui-action-ghost-bg-hover", "over": "--ui-surface", "minimum": 3, "context": "side-nav-group-current-marker-hover" },
525
+ { "foreground": "--ui-button-pressed-bg-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse", "minimum": 3, "context": "side-nav-group-current-marker-hover-on-inverse" },
526
+ { "foreground": "--ui-button-pressed-bg-on-inverse", "background": "--ui-action-ghost-bg-hover-on-inverse", "over": "--ui-surface-inverse-end", "minimum": 3, "context": "side-nav-group-current-marker-hover-on-inverse-end" },
527
+ { "foreground": "--ui-badge-text", "background": "--ui-surface-subtle", "minimum": 4.5, "context": "badge-text" },
528
+ { "foreground": "--ui-badge-text-success", "background": "--ui-status-success-bg", "minimum": 4.5, "context": "badge-text-success" },
529
+ { "foreground": "--ui-badge-text-warning", "background": "--ui-status-warning-bg", "minimum": 4.5, "context": "badge-text-warning" },
530
+ { "foreground": "--ui-badge-text-danger", "background": "--ui-status-danger-bg", "minimum": 4.5, "context": "badge-text-danger" },
531
+ { "foreground": "--ui-badge-text-info", "background": "--ui-status-info-bg", "minimum": 4.5, "context": "badge-text-info" },
532
+ { "foreground": "--ui-status-indicator-neutral", "background": "--ui-surface", "minimum": 3, "context": "status-indicator-neutral" },
533
+ { "foreground": "--ui-icon-button-count-text", "background": "--ui-icon-button-count-bg", "minimum": 4.5, "context": "icon-button-count-text" },
534
+ { "foreground": "--ui-icon-button-count-bg", "background": "--ui-icon-button-count-ring", "minimum": 3, "context": "icon-button-count-boundary" },
535
+ { "foreground": "--ui-icon-button-dot", "background": "--ui-icon-button-count-ring", "minimum": 3, "context": "icon-button-dot" },
536
+ { "foreground": "--ui-icon-button-count-text-on-inverse", "background": "--ui-icon-button-count-bg-on-inverse", "minimum": 4.5, "context": "icon-button-count-text-on-inverse" },
537
+ { "foreground": "--ui-icon-button-count-bg-on-inverse", "background": "--ui-icon-button-count-ring-on-inverse", "minimum": 3, "context": "icon-button-count-boundary-on-inverse" },
538
+ { "foreground": "--ui-icon-button-dot-on-inverse", "background": "--ui-icon-button-count-ring-on-inverse", "minimum": 3, "context": "icon-button-dot-on-inverse" },
539
+ { "foreground": "--ui-avatar-brand-text", "background": "--ui-avatar-brand-bg", "over": "--ui-surface", "minimum": 4.5, "context": "avatar-brand-text" },
540
+ { "foreground": "--ui-avatar-brand-text", "background": "--ui-avatar-brand-bg", "over": "--ui-surface-raised", "minimum": 4.5, "context": "avatar-brand-text-raised" }
456
541
  ]
457
542
  }
@@ -220,7 +220,7 @@ export function createComponentOverrideRule({ classHelpers = [], sources = ["@ks
220
220
  return;
221
221
  const reading = readClassExpression(initializer, helpers);
222
222
  for (const token of reading.literals) {
223
- if (classifyClass(token) === "visual")
223
+ if (classifyClass(token, component) === "visual")
224
224
  visual.add(token);
225
225
  }
226
226
  if (reading.unreadableAt) {
@@ -245,8 +245,13 @@ export function createComponentOverrideRule({ classHelpers = [], sources = ["@ks
245
245
  kinds.add("dynamic-style");
246
246
  kindNodes.set("dynamic-style", kindNodes.get("dynamic-style") ?? property);
247
247
  }
248
- else if (classifyStyleProperty(key) === "visual")
249
- styleVisual.add(key);
248
+ else {
249
+ // A literal behind as/satisfies/non-null is still the literal.
250
+ const written = isPropertyAssignment(property) ? unwrapTypeWrappers(property.initializer) : undefined;
251
+ const literal = written && isStringLiteralLikeNode(written) ? written.text : undefined;
252
+ if (classifyStyleProperty(key, component, literal) === "visual")
253
+ styleVisual.add(key);
254
+ }
250
255
  }
251
256
  };
252
257
  for (const attribute of opening.attributes.properties) {
@@ -1,5 +1,6 @@
1
1
  export type OverrideClass = "free" | "visual";
2
2
  /** The utility a class applies, without variants, importance or negative sign. */
3
3
  export declare function utilityOf(token: string): string;
4
- export declare function classifyClass(token: string): OverrideClass;
5
- export declare function classifyStyleProperty(name: string): OverrideClass;
4
+ export declare const arrangingComponents: ReadonlySet<string>;
5
+ export declare function classifyClass(token: string, component?: string): OverrideClass;
6
+ export declare function classifyStyleProperty(name: string, component?: string, value?: string): OverrideClass;
@@ -65,9 +65,32 @@ const freeUtilities = [
65
65
  /^(?:hidden|sr-only|not-sr-only|invisible|visible)$/u,
66
66
  /^text-(?:left|center|right|justify|start|end)$/u,
67
67
  ];
68
- export function classifyClass(token) {
68
+ // Arranging a container's own children, for the library's containers that
69
+ // leave it to the consumer: since 0.24.0 the Card is a block, and the house
70
+ // arranges what is inside it by its className (#461). Display, gaps, flow and
71
+ // alignment of the children are free there; a divider between them, a fill or
72
+ // a padding still change the component.
73
+ const arrangementUtilities = [
74
+ /^(?:block|flex|inline-flex|grid|inline-grid|flow-root)$/u,
75
+ new RegExp(`^space-[xy]-(?:${num}|px|${arb})$`, "u"),
76
+ /^space-[xy]-reverse$/u,
77
+ new RegExp(`^gap(?:-[xy])?-(?:${num}|px|${arb})$`, "u"),
78
+ /^flex-(?:row|row-reverse|col|col-reverse|wrap|wrap-reverse|nowrap)$/u,
79
+ new RegExp(`^grid-(?:cols|rows)-(?:${num}|none|subgrid|${arb})$`, "u"),
80
+ /^grid-flow-(?:row|col|dense|row-dense|col-dense)$/u,
81
+ new RegExp(`^auto-(?:cols|rows)-(?:auto|min|max|fr|${arb})$`, "u"),
82
+ /^(?:items|justify-items|place-items)-(?:start|end|center|baseline|stretch|normal)$/u,
83
+ /^(?:justify|content|place-content)-(?:start|end|center|between|around|evenly|stretch|normal|baseline)$/u,
84
+ ];
85
+ // The library's components that arrange their children by the consumer's className.
86
+ export const arrangingComponents = new Set(["Card"]);
87
+ export function classifyClass(token, component) {
69
88
  const utility = utilityOf(token);
70
- return freeUtilities.some((pattern) => pattern.test(utility)) ? "free" : "visual";
89
+ if (freeUtilities.some((pattern) => pattern.test(utility)))
90
+ return "free";
91
+ if (component !== undefined && arrangingComponents.has(component) && arrangementUtilities.some((pattern) => pattern.test(utility)))
92
+ return "free";
93
+ return "visual";
71
94
  }
72
95
  // Spec §4.2, by property name; kebab-case keys are read as camelCase.
73
96
  const freeStyleProperties = new Set([
@@ -79,7 +102,25 @@ const freeStyleProperties = new Set([
79
102
  "insetBlockStart", "insetBlockEnd", "insetInline", "insetInlineStart", "insetInlineEnd",
80
103
  "top", "right", "bottom", "left", "zIndex", "textAlign", "visibility",
81
104
  ]);
82
- export function classifyStyleProperty(name) {
105
+ // The same arrangement, written as style properties.
106
+ const arrangementStyleProperties = new Set([
107
+ "display", "gap", "rowGap", "columnGap", "flexDirection", "flexWrap", "flexFlow",
108
+ "alignItems", "justifyItems", "placeItems", "justifyContent", "alignContent", "placeContent",
109
+ "gridTemplateColumns", "gridTemplateRows", "gridAutoFlow", "gridAutoColumns", "gridAutoRows",
110
+ ]);
111
+ // The display values that arrange the children, as the utilities above; any
112
+ // other (contents, none, table…) takes the component's box away or changes it.
113
+ const arrangementDisplays = new Set(["block", "flex", "inline-flex", "grid", "inline-grid", "flow-root"]);
114
+ // `value` is the literal text of the property, when the source writes one; a
115
+ // display without it (a variable, an expression) is visual.
116
+ export function classifyStyleProperty(name, component, value) {
83
117
  const camel = name.replace(/-([a-z])/gu, (_, letter) => letter.toUpperCase());
84
- return freeStyleProperties.has(camel) ? "free" : "visual";
118
+ if (freeStyleProperties.has(camel))
119
+ return "free";
120
+ if (component !== undefined && arrangingComponents.has(component) && arrangementStyleProperties.has(camel)) {
121
+ if (camel === "display" && !(value !== undefined && arrangementDisplays.has(value.trim())))
122
+ return "visual";
123
+ return "free";
124
+ }
125
+ return "visual";
85
126
  }
@@ -1,5 +1,5 @@
1
1
  {
2
- "contractVersion": "3.5.0",
2
+ "contractVersion": "3.7.0",
3
3
  "schemaVersion": 2,
4
4
  "prefix": "--ui-",
5
5
  "required": [
@@ -101,6 +101,7 @@
101
101
  "--ui-field-disabled-bg": { "kind": "token", "token": "--ui-surface-subtle" },
102
102
  "--ui-field-disabled-text": { "kind": "token", "token": "--ui-text-muted" },
103
103
  "--ui-button-shadow-color": { "kind": "literal", "value": "transparent" },
104
+ "--ui-card-shadow-color": { "kind": "token", "token": "--ui-button-shadow-color" },
104
105
  "--ui-action-danger-outline-bg": { "kind": "literal", "value": "transparent" },
105
106
  "--ui-action-ghost-text-hover": { "kind": "token", "token": "--ui-action-ghost-text" },
106
107
  "--ui-icon-button-ghost-text": { "kind": "token", "token": "--ui-action-ghost-text" },
@@ -191,6 +192,21 @@
191
192
  "--ui-alert-dismiss-danger": { "kind": "token", "token": "--ui-alert-text-danger" },
192
193
  "--ui-alert-dismiss-info": { "kind": "token", "token": "--ui-alert-text-info" },
193
194
  "--ui-alert-dismiss-bg-hover": { "kind": "literal", "value": "transparent" },
195
+ "--ui-alert-bg-info": { "kind": "token", "token": "--ui-status-info-bg" },
196
+ "--ui-alert-title": { "kind": "token", "token": "--ui-alert-text" },
197
+ "--ui-alert-title-success": { "kind": "token", "token": "--ui-alert-text-success" },
198
+ "--ui-alert-title-warning": { "kind": "token", "token": "--ui-alert-text-warning" },
199
+ "--ui-alert-title-danger": { "kind": "token", "token": "--ui-alert-text-danger" },
200
+ "--ui-alert-title-info": { "kind": "token", "token": "--ui-alert-text-info" },
201
+ "--ui-alert-icon": { "kind": "token", "token": "--ui-text-secondary" },
202
+ "--ui-alert-icon-success": { "kind": "token", "token": "--ui-status-success" },
203
+ "--ui-alert-icon-warning": { "kind": "token", "token": "--ui-status-warning" },
204
+ "--ui-alert-icon-danger": { "kind": "token", "token": "--ui-status-danger" },
205
+ "--ui-alert-icon-info": { "kind": "token", "token": "--ui-status-info" },
206
+ "--ui-empty-state-title": { "kind": "token", "token": "--ui-text-primary" },
207
+ "--ui-empty-state-title-inline": { "kind": "token", "token": "--ui-empty-state-title" },
208
+ "--ui-empty-state-description": { "kind": "token", "token": "--ui-text-secondary" },
209
+ "--ui-empty-state-icon": { "kind": "token", "token": "--ui-text-secondary" },
194
210
  "--ui-section-label-text": { "kind": "token", "token": "--ui-text-secondary" },
195
211
  "--ui-section-label-text-danger": { "kind": "token", "token": "--ui-status-danger-text" },
196
212
  "--ui-section-label-text-warning": { "kind": "token", "token": "--ui-action-warning-outline-text" },
@@ -201,12 +217,32 @@
201
217
  "--ui-menu-item-text-danger": { "kind": "token", "token": "--ui-text-primary" },
202
218
  "--ui-menu-item-text-info": { "kind": "token", "token": "--ui-text-primary" },
203
219
  "--ui-menu-item-icon-bg": { "kind": "token", "token": "--ui-surface-subtle" },
220
+ "--ui-menu-item-bg-hover": { "kind": "token", "token": "--ui-action-ghost-bg-hover" },
221
+ "--ui-menu-item-text-accent-hover": { "kind": "token", "token": "--ui-menu-item-text-accent" },
222
+ "--ui-menu-item-text-warning-hover": { "kind": "token", "token": "--ui-menu-item-text-warning" },
223
+ "--ui-menu-item-text-danger-hover": { "kind": "token", "token": "--ui-menu-item-text-danger" },
224
+ "--ui-menu-item-description": { "kind": "token", "token": "--ui-text-secondary" },
225
+ "--ui-menu-item-icon": { "kind": "token", "token": "--ui-text-primary" },
226
+ "--ui-menu-item-icon-accent": { "kind": "token", "token": "--ui-menu-item-text-accent" },
227
+ "--ui-menu-item-icon-brand": { "kind": "token", "token": "--ui-menu-item-text-brand" },
228
+ "--ui-menu-item-icon-warning": { "kind": "token", "token": "--ui-menu-item-text-warning" },
229
+ "--ui-menu-item-icon-danger": { "kind": "token", "token": "--ui-menu-item-text-danger" },
230
+ "--ui-menu-item-icon-info": { "kind": "token", "token": "--ui-menu-item-text-info" },
231
+ "--ui-menu-item-icon-bg-accent": { "kind": "token", "token": "--ui-menu-item-icon-bg" },
232
+ "--ui-menu-item-icon-bg-brand": { "kind": "token", "token": "--ui-menu-item-icon-bg" },
233
+ "--ui-menu-item-icon-bg-warning": { "kind": "token", "token": "--ui-menu-item-icon-bg" },
234
+ "--ui-menu-item-icon-bg-danger": { "kind": "token", "token": "--ui-menu-item-icon-bg" },
235
+ "--ui-menu-item-icon-bg-info": { "kind": "token", "token": "--ui-menu-item-icon-bg" },
204
236
  "--ui-radio-card-checked-bg": { "kind": "token", "token": "--ui-surface" },
205
237
  "--ui-radio-card-checked-bg-danger": { "kind": "token", "token": "--ui-radio-card-checked-bg" },
206
238
  "--ui-radio-card-checked-border-danger": { "kind": "token", "token": "--ui-status-danger" },
239
+ "--ui-radio-card-border": { "kind": "token", "token": "--ui-border-control" },
240
+ "--ui-radio-card-bg-hover": { "kind": "token", "token": "--ui-surface-subtle" },
207
241
  "--ui-table-header-text": { "kind": "token", "token": "--ui-text-secondary" },
208
242
  "--ui-table-header-bg": { "kind": "token", "token": "--ui-surface-subtle" },
209
243
  "--ui-table-divider": { "kind": "token", "token": "--ui-border" },
244
+ "--ui-table-header-divider": { "kind": "token", "token": "--ui-border-strong" },
245
+ "--ui-table-row-bg-hover": { "kind": "token", "token": "--ui-surface-subtle" },
210
246
  "--ui-toggle-group-checked-bg": { "kind": "token", "token": "--ui-action-primary-bg" },
211
247
  "--ui-toggle-group-checked-bg-hover": { "kind": "token", "token": "--ui-action-primary-bg-hover" },
212
248
  "--ui-toggle-group-checked-text": { "kind": "token", "token": "--ui-action-primary-text" },
@@ -216,6 +252,12 @@
216
252
  "--ui-toggle-group-segment-bg": { "kind": "token", "token": "--ui-surface" },
217
253
  "--ui-toggle-group-segment-text": { "kind": "token", "token": "--ui-text-primary" },
218
254
  "--ui-toggle-group-segment-border": { "kind": "token", "token": "--ui-border-control" },
255
+ "--ui-toggle-group-border": { "kind": "token", "token": "--ui-border" },
256
+ "--ui-toggle-group-border-hover": { "kind": "token", "token": "--ui-toggle-group-checked-border" },
257
+ "--ui-toggle-group-count-bg": { "kind": "token", "token": "--ui-surface-subtle" },
258
+ "--ui-toggle-group-count-text": { "kind": "token", "token": "--ui-text-secondary" },
259
+ "--ui-toggle-group-checked-count-bg": { "kind": "literal", "value": "rgb(0 0 0 / 15%)" },
260
+ "--ui-toggle-group-checked-count-text": { "kind": "token", "token": "--ui-toggle-group-checked-text" },
219
261
  "--ui-badge-solid-accent-bg": { "kind": "token", "token": "--ui-surface-inverse" },
220
262
  "--ui-badge-solid-accent-text": { "kind": "token", "token": "--ui-text-inverse" },
221
263
  "--ui-badge-solid-brand-bg": { "kind": "token", "token": "--ui-action-primary-bg" },
@@ -232,6 +274,10 @@
232
274
  "--ui-checkbox-border": { "kind": "token", "token": "--ui-border-control" },
233
275
  "--ui-checkbox-bg": { "kind": "token", "token": "--ui-surface" },
234
276
  "--ui-checkbox-mark": { "kind": "token", "token": "--ui-control-checked-fg" },
277
+ "--ui-switch-track": { "kind": "token", "token": "--ui-border-control" },
278
+ "--ui-switch-thumb": { "kind": "token", "token": "--ui-surface" },
279
+ "--ui-switch-thumb-checked": { "kind": "token", "token": "--ui-switch-thumb" },
280
+ "--ui-switch-thumb-shadow-color": { "kind": "token", "token": "--ui-button-shadow-color" },
235
281
  "--ui-button-pressed-bg": { "kind": "token", "token": "--ui-action-primary-bg" },
236
282
  "--ui-button-pressed-bg-hover": { "kind": "token", "token": "--ui-action-primary-bg-hover" },
237
283
  "--ui-button-pressed-text": { "kind": "token", "token": "--ui-action-primary-text" },
@@ -276,7 +322,7 @@
276
322
  "--ui-message-assistant-quote-bar": { "kind": "token", "token": "--ui-action-primary-bg" },
277
323
  "--ui-message-assistant-quote-text": { "kind": "token", "token": "--ui-text-secondary" },
278
324
  "--ui-message-outgoing-bg": { "kind": "token", "token": "--ui-action-primary-bg" },
279
- "--ui-message-outgoing-border": { "kind": "token", "token": "--ui-action-primary-bg" },
325
+ "--ui-message-outgoing-border": { "kind": "token", "token": "--ui-message-outgoing-bg" },
280
326
  "--ui-message-outgoing-text": { "kind": "token", "token": "--ui-action-primary-text" },
281
327
  "--ui-message-outgoing-meta": { "kind": "token", "token": "--ui-action-primary-text" },
282
328
  "--ui-message-outgoing-quote-bg": { "kind": "literal", "value": "rgb(0 0 0 / 20%)" },
@@ -324,6 +370,7 @@
324
370
  "--ui-surface-inverse-end": { "kind": "token", "token": "--ui-surface-inverse" },
325
371
  "--ui-checkbox-circle-bg": { "kind": "literal", "value": "transparent" },
326
372
  "--ui-checkbox-circle-hover": { "kind": "token", "token": "--ui-control-checked-bg" },
373
+ "--ui-checkbox-circle-border": { "kind": "token", "token": "--ui-checkbox-border" },
327
374
  "--ui-list-item-border-hover": { "kind": "token", "token": "--ui-border-strong" },
328
375
  "--ui-list-item-success-bg-hover": { "kind": "token", "token": "--ui-list-item-success-bg" },
329
376
  "--ui-list-item-warning-bg-hover": { "kind": "token", "token": "--ui-list-item-warning-bg" },
@@ -333,6 +380,14 @@
333
380
  "--ui-list-item-done-border": { "kind": "token", "token": "--ui-border" },
334
381
  "--ui-list-item-done-title": { "kind": "token", "token": "--ui-text-secondary" },
335
382
  "--ui-list-item-done-ring": { "kind": "token", "token": "--ui-text-secondary" },
383
+ "--ui-list-item-done-description": { "kind": "token", "token": "--ui-text-secondary" },
384
+ "--ui-list-item-done-control": { "kind": "token", "token": "--ui-control-checked-bg" },
385
+ "--ui-list-item-done-ring-hover": { "kind": "token", "token": "--ui-checkbox-circle-hover" },
386
+ "--ui-list-item-done-mark": { "kind": "token", "token": "--ui-checkbox-mark" },
387
+ "--ui-avatar-brand-bg": { "kind": "token", "token": "--ui-action-soft-accent-bg" },
388
+ "--ui-avatar-brand-text": { "kind": "token", "token": "--ui-action-soft-accent-text" },
389
+ "--ui-avatar-brand-border": { "kind": "token", "token": "--ui-action-soft-accent-border" },
390
+ "--ui-progress-track": { "kind": "token", "token": "--ui-surface-subtle" },
336
391
  "--ui-list-item-title-hover": { "kind": "token", "token": "--ui-link-text" },
337
392
  "--ui-steps-complete-marker-bg": { "kind": "token", "token": "--ui-surface" },
338
393
  "--ui-steps-upcoming-title": { "kind": "token", "token": "--ui-text-primary" },
@@ -343,6 +398,7 @@
343
398
  "--ui-media-enlarge-bg": { "kind": "literal", "value": "transparent" },
344
399
  "--ui-media-enlarge-icon": { "kind": "token", "token": "--ui-media-overlay-text" },
345
400
  "--ui-media-enlarge-shadow-color": { "kind": "literal", "value": "transparent" },
401
+ "--ui-media-document-icon-shadow-color": { "kind": "literal", "value": "transparent" },
346
402
  "--ui-message-incoming-document-bg": { "kind": "token", "token": "--ui-surface" },
347
403
  "--ui-message-incoming-document-border": { "kind": "token", "token": "--ui-border" },
348
404
  "--ui-message-incoming-document-text": { "kind": "token", "token": "--ui-text-primary" },
@@ -351,6 +407,7 @@
351
407
  "--ui-message-incoming-document-download-bg-hover": { "kind": "token", "token": "--ui-action-ghost-bg-hover" },
352
408
  "--ui-message-incoming-document-download-icon": { "kind": "token", "token": "--ui-action-ghost-text" },
353
409
  "--ui-message-incoming-document-download-icon-hover": { "kind": "token", "token": "--ui-action-ghost-text-hover" },
410
+ "--ui-message-incoming-document-icon-bg": { "kind": "token", "token": "--ui-surface" },
354
411
  "--ui-message-assistant-document-bg": { "kind": "token", "token": "--ui-surface" },
355
412
  "--ui-message-assistant-document-border": { "kind": "token", "token": "--ui-border" },
356
413
  "--ui-message-assistant-document-text": { "kind": "token", "token": "--ui-text-primary" },
@@ -359,6 +416,7 @@
359
416
  "--ui-message-assistant-document-download-bg-hover": { "kind": "token", "token": "--ui-action-ghost-bg-hover" },
360
417
  "--ui-message-assistant-document-download-icon": { "kind": "token", "token": "--ui-action-ghost-text" },
361
418
  "--ui-message-assistant-document-download-icon-hover": { "kind": "token", "token": "--ui-action-ghost-text-hover" },
419
+ "--ui-message-assistant-document-icon-bg": { "kind": "token", "token": "--ui-surface" },
362
420
  "--ui-message-outgoing-document-bg": { "kind": "token", "token": "--ui-surface" },
363
421
  "--ui-message-outgoing-document-border": { "kind": "token", "token": "--ui-border" },
364
422
  "--ui-message-outgoing-document-text": { "kind": "token", "token": "--ui-text-primary" },
@@ -367,6 +425,7 @@
367
425
  "--ui-message-outgoing-document-download-bg-hover": { "kind": "token", "token": "--ui-action-ghost-bg-hover" },
368
426
  "--ui-message-outgoing-document-download-icon": { "kind": "token", "token": "--ui-action-ghost-text" },
369
427
  "--ui-message-outgoing-document-download-icon-hover": { "kind": "token", "token": "--ui-action-ghost-text-hover" },
428
+ "--ui-message-outgoing-document-icon-bg": { "kind": "token", "token": "--ui-surface" },
370
429
  "--ui-message-incoming-audio-play-bg": { "kind": "token", "token": "--ui-action-primary-bg" },
371
430
  "--ui-message-incoming-audio-play-icon": { "kind": "token", "token": "--ui-action-primary-text" },
372
431
  "--ui-message-incoming-audio-wave-played": { "kind": "token", "token": "--ui-action-primary-bg" },
@@ -391,7 +450,26 @@
391
450
  "--ui-message-outgoing-audio-time": { "kind": "token", "token": "--ui-message-outgoing-meta" },
392
451
  "--ui-message-outgoing-audio-speed-bg": { "kind": "literal", "value": "rgb(0 0 0 / 20%)" },
393
452
  "--ui-message-outgoing-audio-speed-text": { "kind": "token", "token": "--ui-action-primary-text" },
394
- "--ui-audio-play-shadow-color": { "kind": "literal", "value": "transparent" }
453
+ "--ui-audio-play-shadow-color": { "kind": "literal", "value": "transparent" },
454
+ "--ui-badge-text": { "kind": "token", "token": "--ui-text-secondary" },
455
+ "--ui-badge-text-success": { "kind": "token", "token": "--ui-status-success-text" },
456
+ "--ui-badge-text-warning": { "kind": "token", "token": "--ui-status-warning-text" },
457
+ "--ui-badge-text-danger": { "kind": "token", "token": "--ui-status-danger-text" },
458
+ "--ui-badge-text-info": { "kind": "token", "token": "--ui-status-info-text" },
459
+ "--ui-badge-border-success": { "kind": "token", "token": "--ui-status-success-border" },
460
+ "--ui-badge-border-warning": { "kind": "token", "token": "--ui-status-warning-border" },
461
+ "--ui-badge-border-danger": { "kind": "token", "token": "--ui-status-danger-border" },
462
+ "--ui-badge-border-info": { "kind": "token", "token": "--ui-status-info-border" },
463
+ "--ui-status-indicator-neutral": { "kind": "token", "token": "--ui-border-strong" },
464
+ "--ui-board-card-shadow-color": { "kind": "literal", "value": "transparent" },
465
+ "--ui-icon-button-count-bg": { "kind": "token", "token": "--ui-status-danger" },
466
+ "--ui-icon-button-count-text": { "kind": "token", "token": "--ui-surface" },
467
+ "--ui-icon-button-count-ring": { "kind": "token", "token": "--ui-surface" },
468
+ "--ui-icon-button-dot": { "kind": "token", "token": "--ui-icon-button-count-bg" },
469
+ "--ui-icon-button-count-bg-on-inverse": { "kind": "token", "token": "--ui-status-danger-on-inverse" },
470
+ "--ui-icon-button-count-text-on-inverse": { "kind": "token", "token": "--ui-surface-inverse" },
471
+ "--ui-icon-button-count-ring-on-inverse": { "kind": "token", "token": "--ui-surface-inverse" },
472
+ "--ui-icon-button-dot-on-inverse": { "kind": "token", "token": "--ui-icon-button-count-bg-on-inverse" }
395
473
  },
396
474
  "shape": [
397
475
  "--ui-font-body",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ksmv/ui-checks",
3
- "version": "0.23.2",
3
+ "version": "0.24.0",
4
4
  "description": "Static and computed quality checks for semantic UI token contracts.",
5
5
  "keywords": ["accessibility", "design-tokens", "quality", "static-analysis"],
6
6
  "license": "Apache-2.0",