cssints 0.33.0 → 0.35.0

package/dist/check.mjs

@@ -1,6 +1,6 @@
+import { i as shown, r as ratio, t as luminance } from "./color-BB8ipynT.mjs";
 import { s as ContrastError } from "./registry-8sYvlzyn.mjs";
 import { t as fallbackOf } from "./lowered-DOJEDRFM.mjs";
-import { i as shown, r as ratio, t as luminance } from "./color-BB8ipynT.mjs";
 import { Effect } from "effect";
 // src/check.ts
 /**

package/dist/clay.mjs

@@ -1,7 +1,7 @@
-import { a as registry } from "./registry-8sYvlzyn.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-BbKT-rP-.mjs";
-import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
 import { n as parseColor } from "./color-BB8ipynT.mjs";
+import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-BbKT-rP-.mjs";
+import { a as registry } from "./registry-8sYvlzyn.mjs";
 import { Formatter, Predicate } from "effect";
 import { clampRgb, formatHex } from "culori/fn";
 // src/clay.ts

package/dist/groups/css-anchor-position-1.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { a as GProp, n as GFn } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 type B = {

package/dist/groups/css-anchor-position-2.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { a as GProp, n as GFn, t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 type B = {

package/dist/groups/css-animations-1.d.mts

@@ -1,6 +1,6 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, H as keyframes, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { a as GProp } from "../group-types-DrMdYewQ.mjs";
 import "../group-common-BUdf_ry9.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, H as keyframes, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 type B = {
   id: "css-animations-1";

package/dist/groups/css-animations-2.d.mts

@@ -1,6 +1,6 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, H as keyframes, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { a as GProp } from "../group-types-DrMdYewQ.mjs";
 import "../group-common-BUdf_ry9.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, H as keyframes, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 type B = {
   id: "css-animations-2";

package/dist/groups/css-conditional-3.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 type B = {
   id: "css-conditional-3";

package/dist/groups/css-conditional-4.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 type B = {
   id: "css-conditional-4";

package/dist/groups/css-conditional-5.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { a as GProp, t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 type B = {

package/dist/groups/css-round-display-1.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 type B = {
   id: "css-round-display-1";

package/dist/groups/css2.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { a as GProp, t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 type B = {

package/dist/groups/mediaqueries-4.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 type B = {
   id: "mediaqueries-4";

package/dist/groups/mediaqueries-5.d.mts

@@ -1,5 +1,5 @@
-import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import { t as GCondition } from "../group-types-DrMdYewQ.mjs";
+import { A as ScvValue, B as global, C as CvValue, Dm as Fallback, E as PositionTry, F as cn, G as scv, K as style, M as Steps, N as Wrap, O as QueryWrap, Om as Part, P as attr, Q as ClassValue, R as cv, S as CvProps, V as group, Y as token, Z as within, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as StateWrap, k as ScvConfig, km as Style, l as check, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as firstThatWorks } from "../theme-types-DRObPeMO.mjs";
 import "../group-common-BUdf_ry9.mjs";
 type B = {
   id: "mediaqueries-5";

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { a as registry, d as MacroError, f as MemberError, o as warn, r as forgetKernels, t as Registry } from "./registry-8sYvlzyn.mjs";
 import { A as camel, C as hashClass, D as settled, E as minWidth, F as probed, M as failIn, N as isNode, O as toDecls, P as node, S as edge, T as merged, _ as PSEUDOS, a as createTokens, b as checkVars, c as tokensOf, d as style, f as token, g as PROPS, h as LAYER, i as createGlobalTheme, j as fail, k as VAR, l as CSSTokenValue, m as FUNCTIONS, n as addTheme, o as isDone, p as CONTEXTS, r as check$1, t as DONE, u as isStyle, v as carried, w as isFallback, x as dropsOf, y as chainDecl } from "./theme-BbKT-rP-.mjs";
 import { D as relation, S as addRuntime, _ as addKernel, i as byOrder, n as addGlobal, r as addLayers, y as kernelWarnings } from "./sheet-rwl57DmD.mjs";
-import { n as loweredOf } from "./lowered-DOJEDRFM.mjs";
 import { i as SCV_CALL, l as groups$1, n as CX_CALL, t as CV_CALL } from "./instrument-QGVM1E1B.mjs";
+import { n as loweredOf } from "./lowered-DOJEDRFM.mjs";
 import { checkDeclarationNow, checkQuery, checkSelector, checkValueNow, isDeclarationError } from "@cssints/css-grammar/check";
 import { lackingOf, messageOf } from "@cssints/css-grammar/support";
 import { CSS, CSSColorValue, CSSImageValue, CSSStyleValue, CSSStyleValue as CSSStyleValue$1, CSSUnitValue } from "@cssints/css-grammar/values";

package/dist/plugin.d.mts

@@ -1,3 +1,3 @@
-import { C as Style, S as Part, _ as fn, a as Entry, b as scope, c as Made, d as Scope, f as Table, g as dependsOn, h as arg, i as Css, l as Members, m as append, n as ArgsDef, o as Impl, p as Typed, r as Chain, s as KernelDef, u as Pending, v as inGroup, x as ship, y as lacking } from "./scope-DzQLlev_.mjs";
+import { C as Style, S as Part, _ as fn, a as Entry, b as scope, c as Made, d as Scope, f as Table, g as dependsOn, h as arg, i as Css, l as Members, m as append, n as ArgsDef, o as Impl, p as Typed, r as Chain, s as KernelDef, u as Pending, v as inGroup, x as ship, y as lacking } from "./scope-phC9Hofc.mjs";
 import { a as Kernel, c as ThemeRule, i as GlobalRule, n as Conflict, o as Runtime, r as Decl, s as Ship } from "./author-types-BNEUwM5s.mjs";
 export { type ArgsDef, type Chain, type Conflict, type Css, type Decl, type Entry, type GlobalRule, type Impl, type Kernel, type KernelDef, type Made, type Members, type Part, type Pending, type Runtime, type Scope, type Ship, type Style, type Table, type ThemeRule, type Typed, append, arg, dependsOn, fn, inGroup, lacking, scope, ship };

package/dist/rolldown-runtime-BJohB4LM.mjs

@@ -0,0 +1,13 @@
+import "node:module";
+// \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+export { __exportAll as t };

package/dist/{scope-DzQLlev_.d.mts → scope-phC9Hofc.d.mts}

@@ -1,6 +1,5 @@
 import { r as Decl, s as Ship, t as BcdKey } from "./author-types-BNEUwM5s.mjs";
 import { t as ClassValue } from "./runtime-Cv7hGrWf.mjs";
-import { createRequire } from "node:module";
 import { CSS, CSS as CSS$1, CSSColorValue, CSSColorValue as CSSColorValue$1, CSSImageValue, CSSImageValue as CSSImageValue$1, CSSStyleValue, CSSStyleValue as CSSStyleValue$1, CSSUnitValue, CSSUnitValue as CSSUnitValue$1 } from "@cssints/css-grammar/values";
 import { properties } from "@cssints/css-grammar/mdn";
 import { DTCG_TYPES, DtcgType, Grammar, StyleObject, Syntax, TOKEN_TYPES, Token, TokenFn, TokenName, TokenSetFn, TokenType, ValidSyntax, ValidToken } from "@cssints/css-grammar/token";

package/dist/surface.d.mts

@@ -1,4 +1,4 @@
-import { t as AliasesOf } from "./scope-DzQLlev_.mjs";
+import { t as AliasesOf } from "./scope-phC9Hofc.mjs";
 /**
  * `surface().color(t.color.canvas).lighten(0.06).ink()`: a background that follows from the surface around it, however
  * many plain wrappers sit between. `color(<color>)` is an absolute base (default: the parent surface); `lighten(step)`,

package/dist/tui.mjs

@@ -1,8 +1,8 @@
-import { a as registry } from "./registry-8sYvlzyn.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-BbKT-rP-.mjs";
-import { g as evaluate, h as css } from "./sheet-rwl57DmD.mjs";
-import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
 import { n as parseColor } from "./color-BB8ipynT.mjs";
+import { n as valueOf, t as together } from "./contrast-BB0wimFI.mjs";
+import { g as evaluate, h as css } from "./sheet-rwl57DmD.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-BbKT-rP-.mjs";
+import { a as registry } from "./registry-8sYvlzyn.mjs";
 import { Formatter } from "effect";
 import { clampRgb, formatHex, formatHex8 } from "culori/fn";
 // src/tui.ts

package/dist/vite.mjs

@@ -1,8 +1,8 @@
+import { r as verifyChecks } from "./contrast-BB0wimFI.mjs";
 import { c as EvalError, d as MacroError, f as MemberError, i as forgetWarnings, l as HookError, n as forget, p as SiteMissingError, t as Registry } from "./registry-8sYvlzyn.mjs";
-import { C as fallbackEntries, T as runtimeNames, a as closeNames, b as DERIVED, c as layerEntries, f as themedEntries, l as layerStatements, m as usesDerived, n as addGlobal, o as globalEntries, r as addLayers, s as globalNames, t as LAYERS, u as renderSheet, v as kernelEntries, w as runtimeModule, x as RUNTIME_ID } from "./sheet-rwl57DmD.mjs";
 import { a as instrument, c as writeSite, o as runtimeImport, s as tagged } from "./instrument-QGVM1E1B.mjs";
-import { r as verifyChecks } from "./contrast-BB0wimFI.mjs";
 import { i as serverId, n as gitRoot, o as sessionOf, r as register } from "./devtools-link-DN91p7g5.mjs";
+import { C as fallbackEntries, T as runtimeNames, a as closeNames, b as DERIVED, c as layerEntries, f as themedEntries, l as layerStatements, m as usesDerived, n as addGlobal, o as globalEntries, r as addLayers, s as globalNames, t as LAYERS, u as renderSheet, v as kernelEntries, w as runtimeModule, x as RUNTIME_ID } from "./sheet-rwl57DmD.mjs";
 import { createRequire } from "node:module";
 import { targets as targets$1, useTargets } from "@cssints/css-grammar/support";
 import { Cause, Clock, Config, Data, Effect, Exit, Formatter, Option, Predicate, Result, Schema, Semaphore } from "effect";
@@ -672,6 +672,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false, e
 	const siteOf = /* @__PURE__ */ new Map();
 	let buildMap = false;
 	const callsOf = /* @__PURE__ */ new Map();
+	const sheetEdits = {};
 	const sheet = Effect.fnUntraced(function* (ids = [...usedBy.keys()]) {
 		return yield* renderSheet(ids.flatMap((id) => usedBy.get(id)?.split("\n") ?? []));
 	});
@@ -912,6 +913,7 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false, e
 			yield* drop(file);
 		}
 		yield* Effect.sync(() => forgetWarnings([file]));
+		yield* Effect.sync(() => sheetEdits.last = file);
 		const graph = env.moduleGraph;
 		const affected = [.../* @__PURE__ */ new Set([...depsOf.get(file) ?? [], ...inflight])].flatMap((id) => graph.getModuleById(id) ?? []);
 		yield* Effect.sync(() => affected.forEach((m) => {
@@ -959,6 +961,9 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false, e
 			server = s;
 			if (inner) return;
 			evaluator.server = evaluator.needed ? void 0 : s;
+			s.environments.client.hot.on("cssints:edits:get", (_, client) => {
+				if (sheetEdits.measured) client.send("cssints:edits", sheetEdits.measured);
+			});
 			s.environments.client.hot.on("cssints:sheet", (v) => {
 				if (!s.environments.client.moduleGraph.getModuleById(SHEET)?.transformResult?.code.includes(v)) Effect.runSync(reloadSheet());
 			});
@@ -983,6 +988,15 @@ function cssints({ inner = false, exclude, devtools = false, opencode = false, e
 			if (id === SHEET) {
 				if (build) return LAYERS;
 				const code = runSync(hook("vite.load", id, sheet()));
+				if (this.environment.name === "client" && server) {
+					const classes = new Set([...usedBy.values()].flatMap((v) => v.split("\n"))).size;
+					sheetEdits.measured = {
+						file: sheetEdits.last ? relative(root, sheetEdits.last) : "",
+						bytes: code.length,
+						classes
+					};
+					server.environments.client.hot.send("cssints:edits", sheetEdits.measured);
+				}
 				return {
 					code,
 					map: sheetMap(code, siteOf)

package/docs/API.md

@@ -1230,6 +1230,7 @@ More plugins on `scope()`, each a package of its own with its rules and limits i
 | [`@cssints/layout`](../packages/layout/README.md)           | `stack()`, `cluster()`, `sidebar()`, `switcher()`, `cover()`, `autoGrid()`                                                                    | Every Layout primitives as chain members                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | [`@cssints/fonts`](../packages/fonts/README.md)             | `font(family, { provider, ... })` → `.family()`, `.trim()`                                                                                    | `@font-face` and a metric-matched fallback face; cap-height trimming by `text-box`, else capsize's margins                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | [`@cssints/reset`](../packages/reset/README.md)             | `reset({ media?, prose? })`                                                                                                                   | A modern reset in a top-level `@layer reset` declared before the engine's, below every style; `@cssints/reset/<baseline group>` keeps only the declarations of that group                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [`@cssints/data`](../packages/data/README.md)               | `data()`                                                                                                                                      | `max`, `sum` and `count` of runtime values, computed by layout and printed by a counter                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | [`@cssints/tokens`](../packages/tokens/README.md)           | `/open-props`, `/radix`, `/flexoki`, `/reasonable-colors`, `/madoromi`                                                                        | DTCG data for `createTokens`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | [`@cssints/gradient`](../packages/gradient/README.md)       | `gradient(kind, direction, from, to, easing?, stops?)`                                                                                        | Eased colour stops mixed in oklab at build time                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | [`@cssints/gradient-2d`](../packages/gradient-2d/README.md) | `meshGradient(mesh)`, `freeformGradient(points)`                                                                                              | `mesh-gradient()` / `freeform-gradient()` where the browser has them, else a runtime's canvas (this package's algorithms; lines and shapes not yet)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
@@ -1242,6 +1243,7 @@ More plugins on `scope()`, each a package of its own with its rules and limits i
 | [`@cssints/masonry`](../packages/masonry/README.md)         | `masonry().columns().gap()`                                                                                                                   | `display: grid-lanes`, else CSS `columns` (top to bottom per column)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | [`@cssints/placeholder`](../packages/placeholder/README.md) | `placeholder(path, { mode? })`                                                                                                                | An `<image>` from a JPEG or PNG read at build time: a gradient of its colours laid out as the image, or a tiny thumbhash PNG                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | [`@cssints/ramp`](../packages/ramp/README.md)               | `ramp(base, { mode, steps \| ratios, background })`, `overrides(ramp)`                                                                        | An OKLCH palette as DTCG data for `createTokens`; the contrast mode meets each ratio against its background                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| [`@cssints/gamut`](../packages/gamut/README.md)             | `fit(color, { target?, method? })`, `readable(bg, { ratio?, toward? })`, `tones(color, count)`                                                | Gamut and contrast maths at build time: the nearest colour sRGB or Display P3 can show, a text colour that meets a WCAG 2 ratio, and a tonal scale as DTCG data for `createTokens`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | [`@cssints/rybitten`](../packages/rybitten/README.md)       | `color(hue, { cube })`, `wheel(steps, { cube })`, `shades(hue, lightness)`, `overrides(group)`                                                | RYBitten's red-yellow-blue colours (36 historical cubes) as DTCG data for `createTokens`: a hue, a wheel of hues, a hue at several lightnesses                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | [`@cssints/skeleton`](../packages/skeleton/README.md)       | `skeleton().radius().color().highlight()`                                                                                                     | Loading placeholders whose shimmer is in phase across the page (one clock on `:root`), static under reduced motion                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | [`@cssints/reactive`](../packages/reactive/README.md)       | `state()`, `toggle()`, `set()`, `value()`, `checked()`, `persist()`, `equals()`, `either()`, `on()`, `emit()`, `bind()`, `when()`, `inside()` | State as custom properties, events as data on the element: writes only in events, conditions and DOM output in plain CSS, wired by a 1.4 kB runtime shipped to every target; `value()`/`checked()` take the field's value, calls of `on()`, `bind()` or `state()` in one `cn()` append, `persist(value, key)` keeps a state across a reload, and `bind()` takes a source, a comparison (`equals()`), a choice of two literals (`either()`) or a literal — the one expression the runtime evaluates, because an attribute on the element cannot be computed in CSS (2026-10-31, cssints-ac3o). `emit(name)` is the one hand-off to JavaScript: `on({ submit: emit("save") })` writes no state and dispatches a bubbling `reactive:save` from the element the native event fired on, with `{ event, owner }` in its detail, which `listen(target, name, handler)` from `@cssints/reactive/runtime` hears and whose disposer it returns (2026-10-31, cssints-4s8d) |
@@ -1281,7 +1283,7 @@ createMachineStore(machine, { settled?, intent? }): { state, optimistic, project
 - **Debounce** coalesces a burst by event type; `flush()` delivers the final intent, `cancel(type)` drops a superseded one. The same clock drives `after` and a transition's timestamp.
 - **The clock is injected** (`systemClock` is the default); the harness's fake clock moves only on `advance(ms)`, and the harness logs `{ at, event, from, to, effect, context, cancelled }` per delivery (and per effect it issued).
 - **The state is an external store**: `getState()`, `subscribe(listener)` and `subscribe(selector, listener)`, the last one firing only when the slice changes.
-- **`./solid`**: `state` is a `createStore` of `{ ...context, phase }` written once per transition, mutating only the changed fields; `optimistic` is a derived `createOptimisticStore` whose intent, written inside a Solid `action`, reverts to the committed snapshot at settle (a superseded intent rolls back); `projection` is a `createProjection` over `state`, so a reader of a view's field does not re-run when another field changes. A projection reads the committed frame, not an optimistic override, so the visual phase is read off `optimistic` directly. One store write per transition is the atomicity the reactive runtime gets from its one flush (cssints-tm9j).
+- **`./solid`**: `state` is a `createStore` of `{ ...context, phase }` written once per transition, mutating only the changed fields; `optimistic` is a second store over the same fields that follows `state` and carries an intent's phase on top, dropped when a transition settles (a superseded intent rolls back); `projection` is a `createProjection` over `state`, so a reader of a view's field does not re-run when another field changes. A projection reads the committed frame, not an optimistic override, so the visual phase is read off `optimistic` directly. One store write per transition is the atomicity the reactive runtime gets from its one flush (cssints-tm9j).
 
 Limits: one state at a time (no parallel states, history states or nested machines), effects are data the host runs, and a numeric event `id` is reserved for an effect handle. There is no Quint spec for this runtime yet; the harness is the oracle.
 
@@ -1512,9 +1514,76 @@ createTable(options: {
 
 `rows` may be a getter (`() => rows()`): it is read at attribute-read time, so a table whose rows arrive later keeps its sort and its selection instead of being rebuilt, and a selection made before the rows landed applies once they do. Selection is over ids, so it survives the host's re-sort. `rowProps` carries `aria-selected` and a click that selects; `toggleRow` / `toggleAll` are the programmatic path, and the row's checkbox stops its click from reaching the row so the two controls never toggle the same row twice. `selectAllProps` and `rowCheckboxProps` are `undefined` unless `selection` is `"multiple"` (one control over one selection is meaningless), and the select-all is a `role="checkbox"` rather than a native `input` because the mixed state a screen reader must hear is `aria-checked="mixed"`, not the DOM-only `indeterminate` property. It toggles the rows the table renders: a windowed table toggles its window and keeps the rest of the selection. A table that renders all of its rows and columns carries no `aria-rowcount` / `aria-colcount` (the markup already says it); pass them, and every cell gets its `aria-colindex`, only when the host windows. `numeric` is a layout hint for the host's skin: HTML has no attribute for it.
 
+### Headless: `createGrid` (`@cssints/headless`)
+
+The APG grid as state and attribute objects: one tab stop, 2-D navigation, a cell/row/column selection rectangle, sortable column headers, edit mode and a windowed body. `specs/apg/grid.qnt` (navigation/edit) is its model, with `grid-selection.qnt` and `grid-sort.qnt` for the two values; `packages/headless/test/grid.browser.test.tsx` replays and walks them in Chromium.
+
+**The body is the platform's.** Movement and the roving tab stop are the V2 `focusgroup="grid"` contract (`focusGrid` below, `specs/patterns/focusgrid.qnt`): `gridProps.ref` builds the runtime, the owner's `focusgroup` attribute is rendered from the same definition, and arrows on both axes, Home/End (the row's ends), Ctrl+Home/End (the grid's), the edges and the last-focused memory are not this primitive's code. `row` / `col` are readings of the DOM — the owner's `focusin` maps the focused element back to its coordinate — and the host mirrors programmatic moves (`focus`, `clickCell`, PageUp/PageDown, Shift+Arrow) into DOM focus, as the test fixture does. The library keeps edit mode (`Enter` / `F2` / `a` / `Escape`, `lastEdit`), selection, sort, PageUp/PageDown (a grid defines no page movement, so the runtime never sees those keys), the mount window and the `aria-*` indices.
+
+**Wrapping is the platform's `flow`, not `wrap`.** `wrapCols` means "Right on the last column continues into the next row's first cell", which APG's layout-grid example writes `data-wrap-cols`; the runtime spells that `flow` (continue into the adjacent row, wrapping at the outer edge). `wrapRows` is the block axis the same way. A data grid is hard on both axes, so the definition is `{ rowEdge: wrapCols ? "flow" : "none", colEdge: wrapRows ? "flow" : "none", memory: true }`; `setWrapCols`, `setWrapRows` and `setGridKind` re-apply it through the runtime.
+
+**The header row is still the library's and outside the group.** Sortable column headers keep their own one-dimensional roving, and the APG grid deliberately omits Up/Down between the header row and the body; `headerProps` marks each header `focusgroup="none"` so neither provider pulls it into the body's item collection. Tab then walks from the header stop into the body stop, as two stops of the sequential order.
+
+**The `tabindex` recipe.** Each cell target carries a constant author `tabindex="0"` (the native engine navigates only items with `tabIndex > -1`, and a `<div role="gridcell">` needs an author value to be focusable at all) and the runtime writes the single stop over it. With `focusTarget: "widget"` the widgets are the item set, so cells author `-1` and widgets `0`. A host must not bind `tabindex` reactively after these props. `focusgroupstart` rides on the current coordinate; with `memory: true` the platform prefers its own memory once focus has been inside, so the marker is what the first Tab entry lands on. `aria-activedescendant` is still emitted for a widget target: it is an announcement, while focus really sits on the widget.
+
+```ts skip
+createGrid(options?: {
+  rows?: number; // 4
+  cols?: number; // 3
+  gridKind?: "data" | "layout"; // "data"
+  wrapCols?: boolean; // layout only: Right/Left flow across rows (data-wrap-cols)
+  wrapRows?: boolean; // layout only: Down/Up flow across columns (data-wrap-rows)
+  focusTarget?: "cell" | "widget"; // "cell"
+  gridReadonly?: boolean;
+  selectable?: boolean; // aria-selected + the selection keys
+  sortEnabled?: boolean; // sortable columnheaders (aria-sort)
+  value?: number | undefined; // controlled packed selection (packSelection); 0 = nothing
+  defaultValue?: number;
+  onValueChange?(value: number): void;
+  sortValue?: number | undefined; // controlled packed sort (packSort); -1 = unsorted
+  defaultSortValue?: number;
+  onSortChange?(value: number): void;
+  page?: number; // PageUp/PageDown step in rows, 2
+  id?: string;
+  rowWindow?: { start: number; count: number } | undefined; // the mounted row range
+  provider?: "auto" | "polyfill"; // "polyfill" forces focusGrid's fallback
+}): {
+  rows(): number; cols(): number;
+  row(): number; col(): number; // readings of the DOM focus
+  hasFocus(): boolean; mode(): "navigate" | "edit";
+  gridKind(): "data" | "layout"; wrapCols(): boolean; wrapRows(): boolean;
+  focusTarget(): "cell" | "widget"; gridReadonly(): boolean;
+  lastEdit(): "none" | "committed" | "cancelled";
+  renderedRows(): ReadonlyArray<number>;
+  isSelected(row: number, col: number): boolean;
+  selection(): number; sort(): number;
+  sortColumn(): number; sortDirection(): "none" | "ascending" | "descending";
+  focusTargetPart(): string | null; // the data-part the host mirror focuses
+  currentCellId(): string; // the cell carrying focusgroupstart
+  gridProps: { role: "grid"; "aria-rowcount"; "aria-colcount"; "aria-readonly"; "aria-activedescendant";
+    focusgroup: string; ref(element: HTMLElement): void; onFocusOut(event: FocusEvent): void };
+  rowProps(row: number): { role: "row"; id; "aria-rowindex" };
+  cellProps(row: number, col: number): { role: "gridcell"; id; tabindex: number; focusgroupstart: "" | undefined;
+    ref(element: HTMLElement): void; "aria-rowindex"; "aria-colindex"; "aria-readonly"; "aria-selected";
+    onClick(): void };
+  widgetProps(row: number, col: number): { tabindex: number; focusgroupstart: "" | undefined;
+    ref(element: HTMLElement): void };
+  headerProps(col: number): { role: "columnheader"; id; focusgroup: "none"; tabindex; "aria-sort";
+    onClick(): void; onFocus(): void; onKeyDown(event: KeyboardEvent): void };
+  focus(): void; blur(): void;
+  clickCell(row: number, col: number): void;
+  setGridKind(kind: "data" | "layout"): void;
+  setWrapCols(flag: boolean): void; setWrapRows(flag: boolean): void;
+  setFocusTarget(target: "cell" | "widget"): void;
+  setGridReadonly(flag: boolean): void; setSelectable(flag: boolean): void; setSortEnabled(flag: boolean): void;
+};
+```
+
+The selection and the sort are requests: uncontrolled by default (`defaultValue` / `defaultSortValue`), and a controlled host owns them with `value` / `sortValue`; `packSelection` and `packSort` are the injective values. `page` is the spec's PAGE constant: PageDown moves a page of rows and clamps to the last row, PageUp the same upward. A `rowWindow` is only the mount window — cell/row indices stay absolute — and the runtime re-collects when it moves, so the stop stays on a mounted cell or is re-seated on the first one. Edit mode is the spec's: a read-only grid and the last column never enter it, leaving commits, Escape cancels.
+
 ### Headless: `createTabs` (`@cssints/headless`)
 
-The APG tablist as state and attribute objects: roving tabindex, wrapping arrows, Home/End, automatic or manual activation, disabled tabs, and a selection that is a request (`value` + `onValueChange`) or uncontrolled (`defaultSelected`). `packages/apg-specs/specs/apg/tabs.qnt` is its model; `packages/headless/test/tabs.browser.test.tsx` replays it in Chromium.
+The APG tablist as state and attribute objects: the platform's single tab stop, arrows, Home/End and wrap; automatic or manual activation, disabled tabs, and a selection that is a request (`value` + `onValueChange`) or uncontrolled (`defaultSelected`). `packages/apg-specs/specs/apg/tabs.qnt` is its model (it imports `shared/focusgroup.qnt`); `packages/headless/test/tabs.browser.test.tsx` replays it in Chromium, on both providers.
 
 Its accessibility requirements are catalogued, gap by gap, in `packages/headless/docs/requirements/tabs.md` (the model is `packages/headless/docs/requirements/README.md`).
 
@@ -1523,6 +1592,7 @@ Close and rename are an **extension** (bean `cssints-gdv2`, the docs playground'
 ```ts skip
 createTabs(options?: {
   ...; // the plain tabs: items, value, defaultSelected, orientation, dir, activation, disabled, focusablePanels, id, tabId, panelId, onValueChange
+  provider?: "auto" | "polyfill"; // "polyfill" forces @microsoft/focusgroup-polyfill even where the engine has focusgroup
   closable?: boolean; // false: closeProps and the Delete key; the host removes from onClose
   renamable?: boolean; // false: a double click edits the label inline; the host renames from onRename
   label?(index: number): string | undefined; // the tab's name: the buttons' labels and the rename draft
@@ -1532,6 +1602,8 @@ createTabs(options?: {
   ...;
   editing(): number | null; // the tab being renamed inline
   focusAfterClose(index: number): number; // the tab to focus once the removal landed
+  tablistProps: { role: "tablist"; "aria-orientation"?: "vertical"; focusgroup: string; dir?: "ltr" | "rtl"; ref };
+  tabProps(index): { id; role: "tab"; "aria-selected"; "aria-controls"; "aria-disabled"; focusgroupstart; tabindex?: -1; ref; onClick; onMouseDown; onFocus; onKeyDown };
   closeProps(index): { "aria-label": string; tabindex: -1; onClick: () => void };
   renameProps(index): {
     onDblClick: () => void;
@@ -1544,12 +1616,15 @@ createTabs(options?: {
 };
 ```
 
-- **Close.** `closeProps(index)` is the tab's close button: `aria-label="Close <label>"` and `tabindex=-1`, because a tablist's tab stops are its tabs; the keyboard path is Delete on the focused tab. Focus after a close goes to the tab that slid into the closed one's place, or to the previous tab when the last one closed: `focusAfterClose(index)` names that index in the shortened list (call it before the host removes the tab). Closing the last remaining tab is refused, as the spec refuses an empty tablist; a closed tab that was selected asks for the tab that takes the focus.
-- **Rename.** A double click begins; the tab renders `inputProps` instead of its label. Enter commits, Escape reverts, blur commits, and a label that trims to nothing cancels. While editing, the input owns the keys: the tablist's roving does not move. `begin(index)` is the programmatic start, for a tab the host has just added (append it, then `focusTab(index)` and `begin(index)`).
+- **The platform's half.** `tablistProps` carries the `focusgroup` attribute (`tablist nomemory wrap`, `block` when vertical) and a `ref` that builds the provider, so arrows along the axis, Home / End, wrap and the single tab stop are the browser's (Chromium 150+) or `@microsoft/focusgroup-polyfill`'s. The definition is **no memory**: the group is entered on the selected tab (`focusgroupstart`, emitted by `tabProps`), not on wherever focus was last. `tabProps` therefore renders **no roving `tabindex`** — the provider owns it; the only `tabindex` a tab carries is a static `-1` on a disabled tab, which is how both providers are kept out of it. A host whose tab is not natively focusable (a `<div role="tab">` holding the rename input, say) gives it its own `tabindex="0"`; the platform still keeps a single stop among them. `provider: "polyfill"` skips the feature detect (for a test, or a page that needs the fallback); `focus` is a reading of the DOM, not a second cursor.
+- **The library's half.** Selection is the delta: automatic activation selects on the `focusin` a move causes, manual activation only on Enter / Space, and a click selects in both modes. A click on an already-focused tab selects itself (no `focusin` fires); a pointer press that does move focus is asked once, so a controlled host is not asked twice. Selection and focus are decoupled when a controlled host rejects a request — the tab stop then stays with the user's focus, which is why `tabs.qnt` keeps `tabStop` beside `selected`.
+- **Close.** `closeProps(index)` is the tab's close button: `aria-label="Close <label>"` and `tabindex=-1`, because a tablist's tab stops are its tabs; the keyboard path is Delete on the focused tab. It is not an item of the group either, so the platform neither moves focus to it nor acts on its keys. Focus after a close goes to the tab that slid into the closed one's place, or to the previous tab when the last one closed: `focusAfterClose(index)` names that index in the shortened list (call it before the host removes the tab). Closing the last remaining tab is refused, as the spec refuses an empty tablist; a closed tab that was selected asks for the tab that takes the focus.
+- **Rename.** A double click begins; the tab renders `inputProps` instead of its label. Enter commits, Escape reverts, blur commits, and a label that trims to nothing cancels. While editing, the input owns the keys: the tab's handler ignores them (and the platform already leaves a native `<input>`'s arrows alone). `begin(index)` is the programmatic start, for a tab the host has just added (append it, then `focusTab(index)` and `begin(index)`).
 - **Ids.** `tabId(index)` and `panelId(index)` replace the generated `${id}-tab-<index>` / `${id}-tabpanel-<index>`, and `aria-controls` / `aria-labelledby` follow them. Use them when the host's markup or a deep link already names a panel (`#logs`): the alternative is a second id on the same element, which no attribute can carry.
-- **Direction.** `dir: "rtl"` swaps ArrowLeft / ArrowRight on a horizontal tablist (a vertical one keeps Up / Down); the host still sets `dir` on its element for the visual order. The model `tabs.qnt` is ltr only, so the ported `direction` scenarios stay skipped; `packages/headless/test/tabs-requirements.browser.test.tsx` holds the swap.
-- **The host's list.** `items` is read from the option on every read, so the bounds, the roving tab stop and `firstEnabled` follow a host that shrinks its list. `label` is read lazily too, so a renamed tab renames its buttons with it.
+- **Direction.** `dir: "rtl"` renders as `dir` on `tablistProps`: the platform maps ArrowLeft / ArrowRight per the element's direction, so a horizontal rtl tablist puts the next tab to the left and a vertical one keeps Up / Down. The model `tabs.qnt` is ltr only, so the ported `direction` scenarios stay skipped; `packages/headless/test/tabs-requirements.browser.test.tsx` holds the swap.
+- **The host's list.** `items` is read from the option on every read, so the bounds, the entry point and `firstEnabled` follow a host that shrinks its list, and the primitive re-reconciles the provider on a selection or count change (the native engine reads `focusgroupstart` itself). `label` is read lazily too, so a renamed tab renames its buttons with it.
 - The spec models a `deletable` flavour (Delete, focus to the next tab, the last refused) but neither a rename nor the callbacks, so the browser test, not the model, holds the extension.
+- **Migration (0.x, `minor`).** `TabProps` no longer carries the roving `tabindex` (spread `tabProps(i)` and bind none; a non-button tab needs its own `tabindex="0"`), and `Tabs.keyDown` is gone. `TablistProps` gained `focusgroup`, `ref` and `dir`, and `TabProps` gained `focusgroupstart` and `ref`.
 
 ### Headless: `createHotkeys` (`@cssints/headless`)
 
@@ -1769,7 +1844,7 @@ createDatePicker(options: {
 };
 ```
 
-Every date is an ISO `YYYY-MM-DD`, read as a UTC midnight; `month()` and `labels.month` use 0-11. `monthDays()` is **six weeks around the shown month**, so a row can start in the previous month and end in the next one: every cell is a real focusable date (a blank cannot hold the roving focus), and a cursor that leaves the month pages the grid to where it landed. `cellProps(iso)` marks the chosen day `aria-selected`, `today` `aria-current="date"`, a day outside `min`/`max` `aria-disabled`, and gives `tabindex=0` to the roving day only: the selected day, else today when it is in the shown month, else the first day the bounds allow. Keys on the focused day: ←/→ a day, ↑/↓ a week, Home/End the week's first/last day, PageUp/PageDown a month, Shift+PageUp/PageDown a year (the day clamps, 29 February included), Enter/Space selects and closes, Escape closes without changing the value, Tab leaves. The month arrows page the month and move the roving tab stop; the DOM focus stays on the arrow, so a host that wants the next key to land on a day moves it after the cells re-rendered (the kit's nav buttons do). `attach()` is the popover's light dismissal and focus return, plus focus into the roving day on open; `contentStyle()` is its placement — the same page-space `position: absolute` box `createPopover` gives, so a popup that escapes a positioned or clipping ancestor is placed by the initial containing block, not by the trigger's parent. The host renders the cells, the CSS and the trigger's visible text; a segmented text field is a host composition of `createField` + `createSpinbutton` over the same day numbers, not part of this API.
+Every date is an ISO `YYYY-MM-DD`, read as a UTC midnight; `month()` and `labels.month` use 0-11. `monthDays()` is **six weeks around the shown month**, so a row can start in the previous month and end in the next one: every cell is a real focusable date (a blank cannot hold the roving focus), and a cursor that leaves the month pages the grid to where it landed. `cellProps(iso)` marks the chosen day `aria-selected`, `today` `aria-current="date"`, a day outside `min`/`max` `aria-disabled`, gives `tabindex=0` to the roving day only and the grid's `focusgroupstart` to that same day: the selected day, else today when it is in the shown month, else the first day the bounds allow. `gridProps` is the grid's `role` / `aria-*` only — no `focusgroup` attribute and no `ref`: the picker owns its keyboard and its roving day, and the grid's `row` / `col` mirror the cursor so `cellProps` can name the current cell. `attach()` focuses that cell by id, not by `[tabindex="0"]` (which no longer names one element in a grid whose platform owns the stop). Keys on the focused day: ←/→ a day, ↑/↓ a week, Home/End the week's first/last day, PageUp/PageDown a month, Shift+PageUp/PageDown a year (the day clamps, 29 February included), Enter/Space selects and closes, Escape closes without changing the value, Tab leaves. The month arrows page the month and move the roving tab stop; the DOM focus stays on the arrow, so a host that wants the next key to land on a day moves it after the cells re-rendered (the kit's nav buttons do). `attach()` is the popover's light dismissal and focus return, plus focus into the roving day on open; `contentStyle()` is its placement — the same page-space `position: absolute` box `createPopover` gives, so a popup that escapes a positioned or clipping ancestor is placed by the initial containing block, not by the trigger's parent. The host renders the cells, the CSS and the trigger's visible text; a segmented text field is a host composition of `createField` + `createSpinbutton` over the same day numbers, not part of this API.
 
 ### Headless: `createPanZoom` (`@cssints/headless`)
 
@@ -1822,6 +1897,14 @@ The host owns the box and the look: the viewport's size and `overflow: hidden`,
 
 The APG menu family (`createMenu` for the menu button and the checkable menus, `createMenubar` for the roving bar) as state and attribute objects. Its behaviour is `specs/apg/menu-button.qnt`, `menu-checkable.qnt` and `menu-menubar.qnt`, and `packages/headless/test/menu-button.browser.test.tsx` and `packages/headless/test/menu.browser.test.tsx` replay the generated models, ported scenarios and seeded differential walks against it.
 
+The movement is the platform's `focusGroup` (`shared/focusgroup.qnt`, `./focusgroup`), one segment per level: the
+list is `focusgroup="menu"` (block axis, wrap), the bar is `focusgroup="menubar"` (the declared orientation and
+`wrap`), and each submenu is its own `menu` segment — the platform's contract is per segment, and a popup's list
+is a segment only while the popup is shown, so a closed one is suspended with `focusgroup="none"`. The arrows
+along each level's axis, Home / End, the wrap and the last-focused memory are the browser's (Chromium 150+) or
+`@microsoft/focusgroup-polyfill`'s, and **the platform owns the item `tabindex`**: the primitive never renders
+one. `provider: "polyfill"` forces the fallback (tests, hosts without the native attribute).
+
 ```ts skip
 createMenu(options: {
   items: ReadonlyArray<string | { label: string; kind?: "item" | "checkbox" | "radio"; checked?: boolean; disabled?: boolean }>;
@@ -1839,6 +1922,7 @@ createMenu(options: {
   disabled?: ReadonlyArray<number>; // focusable, never activated
   id?: string | undefined;
   onItemClick?(index: number): void;
+  provider?: "auto" | "polyfill"; // "auto": the native attribute where the engine has it
 }): {
   open(): boolean;
   focusLevel(): 0 | 1 | 2; // 0 outside, 1 on the trigger, 2 on an item
@@ -1848,12 +1932,44 @@ createMenu(options: {
   value(): number; // the packed view of the same state
   openMenu(): void; // a request, like every intent
   closeMenu(): void;
-  keyDown(key: string): void;
+  keyDown(key: string): void; // the library's keys: Enter / Space, Escape, Tab
   // …items, triggerProps, menuProps, itemProps(index), type(), setFocusItem()
 };
 ```
 
-**The checked state has one store and two views.** The readable pair (`checked` + `choice`) is the store; `value` is derived from it as `menu-checkable.qnt`'s `checked(wrap, choice)` (one checkbox bit * 5 + the radio). The pack has one checkbox bit, so only the readable pair can name a checkbox beyond item 0. A host may own either view; each has its request (`onCheckedValuesChange(checked, choice)` and `onCheckedValueChange(value)`), and where both views are given the readable pair wins. `defaultChecked` / `defaultChoice` start the pair and `defaultValue` the packed side.
+- **The list is the owner.** `menuProps` carries `role="menu"`, `hidden`, the definition as the `focusgroup`
+  attribute (`"menu"` while shown, `"none"` while hidden) and the `ref` that builds the provider and registers
+  the keydown listener **before** it — that order is what lets the primitive consume a key the platform would
+  otherwise act on, and a delegated Solid `onKeyDown` would run at the document, after focus had moved. The row
+  props carry no `tabindex` and no key handler: `onFocus` is how the primitive hears where the platform put the
+  focus.
+- **A row must be focusable by nature.** The native engine writes no `tabindex` and only moves focus to an item
+  that is tabbable already, so render a `<button>` or an `<a href>` per row (the polyfill decorates whatever the
+  collection holds, and restores an authored `tabindex`). A `<div>` row works only on the polyfill.
+- **A test presses real keys.** The movement is the platform's, and a native engine ignores an untrusted
+  `KeyboardEvent` dispatched from script: a test that presses an arrow declares it with `userEvent.keyboard`, or
+  runs the widget on `provider: "polyfill"` (which is what `apps/ui/src/registry/menu/menu.browser.test.tsx`'s
+  walks do, because their `tabindex` probe needs the rendered stop).
+- **It keeps the keys the platform does not infer**: Enter / Space activation, Escape, Tab (which closes and
+  leaves), typeahead, and on a menubar the cross-axis keys — the open keys of the bar, `Right` into a submenu,
+  `Left` back to the parent row or the previous bar item. The arrows along the axis, Home and End are not in
+  `keyDown` and are never `preventDefault`ed by the primitive.
+
+`createMenubar` is the same contract per level: `menubarProps` (`role="menubar"`, `aria-orientation`, the
+`focusgroup` attribute and the `ref`), `barItemProps(i)`, `menuProps(i)` and `submenuProps(i, j)` for the popups,
+`menuItemProps(i, j)` and `submenuItemProps(i, j, k)` for the rows. A vertical bar's own axis is the platform's
+too (`focusgroup="menubar block"`): `Up` / `Down` move between bar items and its cross-axis pair opens the menu,
+the same code path as `Right` / `Left` on a horizontal one. `focusLevel` (1 the bar, 2 a top-level menu, 3 a
+submenu) and `focusIndex` are what a host moves the DOM focus to; reading them is reading the DOM's own focus,
+written back by `onFocus`.
+
+**Migration, if you rendered the item props before:** drop `tabindex` from your row markup and spread
+`menuProps` (or `menubarProps` and each `menuProps(i)` / `submenuProps(i, j)`) on the owner, so its `ref` builds
+the provider; render focusable rows. The row props gained `ref` (the provider's item collection), and
+`menuProps` / `menubarProps` gained `focusgroup` and `ref` and lost `onKeyDown`; `keyDown(key)` now carries only
+the library's keys.
+
+**The checked state has one store and two views.** The readable pair (`checked` + `choice`) is the store; `value` is derived from it as `menu-checkable.qnt`'s `checked(wrap, choice)` (one checkbox bit \* 5 + the radio). The pack has one checkbox bit, so only the readable pair can name a checkbox beyond item 0. A host may own either view; each has its request (`onCheckedValuesChange(checked, choice)` and `onCheckedValueChange(value)`), and where both views are given the readable pair wins. `defaultChecked` / `defaultChoice` start the pair and `defaultValue` the packed side.
 
 **The open state is a request/commit pair**, like every other controlled primitive: `open` (+ `onOpenChange`) makes the host own it, `defaultOpen` starts it. Every intent that opens or closes — the trigger's click and its keys, Escape, an item's activation, Tab, an outside click in a kit, the programmatic `openMenu` / `closeMenu` — is a request, so a host that holds `open` keeps the menu open and the focus where it was; `menu-button.qnt` reverts the whole transition of a rejected request, focus included. A write the host makes on its own is not a request: it takes the focus to the first item when it opens and to the trigger when it closes, and a write of the value it already has moves nothing (no widget can observe it).
 
@@ -2483,13 +2599,19 @@ The APG Radio Group: one `radiogroup` with `role="radio"` items, where selection
 behaviour is `packages/apg-specs/specs/apg/radio.qnt`, replayed by
 `packages/headless/test/radio.browser.test.tsx` against the ported ariakit, base-ui and React Aria scenarios
 and a differential walk in six configurations (unchecked, checked, disabled, `activedescendant`, and a
-controlled host that accepts or holds a request). `values` is the option list (a getter is fine, so a list
-that arrives later is still one widget), `defaultValue` is the uncontrolled check and `value` +
-`onValueChange` make the host own it.
+controlled host that accepts or holds a request). The same file proves the native path with real keys. `values`
+is the option list (a getter is fine, so a list that arrives later is still one widget), `defaultValue` is the
+uncontrolled check and `value` + `onValueChange` make the host own it.
 
 `value` may be a getter, and then `undefined` means "nothing checked" as a controlled state: it is the bare
 `undefined` prop that says uncontrolled.
 
+The roving flavor is the platform's `focusgroup="radiogroup"` contract (the browser's where it has one,
+`@microsoft/focusgroup-polyfill` otherwise, `provider: "polyfill"` forces the polyfill): both axes, Home / End,
+wrap and the item `tabindex` are its. The library keeps the deltas — selection follows focus, the entry point
+(`focusgroupstart`: the checked radio, else the first enabled one) and Space, which focusgroup does not
+provide.
+
 ```ts skip
 createRadioGroup<T>(options: {
   values: ReadonlyArray<T> | (() => ReadonlyArray<T>); // one per radio
@@ -2498,21 +2620,21 @@ createRadioGroup<T>(options: {
   flavor?: "roving" | "activedescendant"; // "roving"
   disabled?: ReadonlyArray<number>; // indices never focused, checked or picked as the tab stop
   orientation?: "horizontal" | "vertical"; // sets aria-orientation only
-  dir?: "ltr" | "rtl"; // "ltr": under rtl the horizontal arrows swap
+  dir?: "ltr" | "rtl"; // forwarded to the DOM: the platform reads it for the horizontal arrows
   id?: string; // base of `<id>-radio-<i>`
   describedby?: string | undefined; // aria-describedby on every radio
+  provider?: "auto" | "polyfill"; // "auto"; "polyfill" forces the polyfill (a test, or a host that needs it)
   onValueChange?(value: T): void; // a request the host may ignore
   onFocus?(target: string): void; // "radio:<index>"
   onBlur?(target: string): void;
 }): {
   checked(): number | null; // the index, null when nothing is checked
-  focused(): number | null;
+  focused(): number | null; // follows the DOM's focusin
   flavor(): RadioFlavor;
   values: ReadonlyArray<T>;
   value(): T | null;
-  focus(): void;
+  focus(): void; // moves the focus *state*; the host moves the DOM focus
   blur(): void;
-  keyDown(key: string): void;
   click(index: number): void;
   setDisabled(indices: ReadonlyArray<number>): void;
   setFlavor(flavor: RadioFlavor): void;
@@ -2522,6 +2644,9 @@ createRadioGroup<T>(options: {
     "aria-orientation";
     "aria-activedescendant": string | undefined; // only the activedescendant flavor
     tabindex: 0 | undefined; // 0 only in the activedescendant flavor
+    focusgroup: string | undefined; // the roving definition ("radiogroup wrap nomemory"), absent otherwise
+    dir: "ltr" | "rtl" | undefined; // the option, forwarded
+    ref: (element: HTMLElement) => void; // builds the platform's provider
     onKeyDown;
     onFocus;
     onBlur;
@@ -2533,21 +2658,37 @@ createRadioGroup<T>(options: {
     "aria-disabled": "true" | "false";
     "aria-describedby";
     type: "button"; // keeps a surrounding form from submitting
-    tabindex: 0 | -1 | undefined; // roving only: 0 for the tab stop
+    focusgroupstart: "" | undefined; // roving: the platform's entry marker, on the checked radio
+    focusgroup: "none" | undefined; // roving: opts a disabled radio out of the group
+    tabindex: 0 | -1 | undefined; // the author value the platform needs; it owns the roving stop
+    ref: (element: HTMLElement) => void;
     onClick;
     onFocus;
   };
 };
 ```
 
-- **Two flavors, one machine.** `"roving"` (the default) keeps the tab stop on the radios: `tabindex=0` on
-  the checked radio, or on the first enabled one while nothing is checked, `-1` on the rest.
-  `"activedescendant"` puts the tab stop on the group (`tabindex=0` there, nothing on the radios) and names
-  the focused radio in `aria-activedescendant`; the host keeps the DOM focus on the group. The primitive
-  moves no DOM focus in either flavor: `focused()` reads synchronously, so the host applies it.
-- **Selection follows the focus.** An arrow moves to the next enabled radio (wrapping) and requests it, Space
-  requests the focused one, a click focuses and requests, and Tab enters on the tab stop. `setPreselect`
+- **Two flavors, one machine.** `"roving"` (the default) is the platform's tab stop: an arrow, Home or End
+  moves DOM focus, the primitive never renders a roving `tabindex` (the polyfill writes `0` / `-1`; the native
+  engine writes nothing and keeps the stop in its focus controller), and a focus that arrives from outside
+  only moves the state. `"activedescendant"` puts the tab stop on the group (`tabindex=0` there, nothing on
+  the radios) and names the focused radio in `aria-activedescendant`: focusgroup models DOM focus moving
+  between items, so this flavor keeps its keyboard in the primitive.
+- **Selection follows the focus.** An arrow moves to the next enabled radio (wrapping) _and requests_ it —
+  the `focusin` the platform causes is the library's, since focusgroup leaves selection to the pattern. Space
+  requests the focused one, a click focuses and requests, and Tab enters on the checked radio. `setPreselect`
   starts the check without a request, and `setDisabled` / `setFlavor` reset the focus.
+- **The tab stop is the platform's, and the entry point is the library's.** While focus is inside the group
+  the stop is the focused radio — the native engine keeps it in its focus controller, the polyfill renders
+  `tabindex=0` on it — and the primitive does not re-seat it, so a controlled host that rejects a request
+  leaves the stop on the radio the user moved to. The definition is `nomemory` with `focusgroupstart` on the
+  checked radio (else the first enabled one), so the next Tab entry — and the stop once focus leaves — is the
+  checked radio: the rule users see, `radio.qnt` models the same way via `fgTabIndex` / `fgEntry` /
+  `fgStopOnLeave`.
+- **A disabled radio is out of the group** (`focusgroup="none"`, `tabindex="-1"`): arrows and the tab stop
+  skip it and Tab never lands on it. Against the native engine every other radio carries `tabindex="0"`,
+  because that engine navigates only items with `tabIndex > -1` and a `<div role="radio">` is otherwise not
+  focusable at all; the engine still gives the group one tab stop.
 - **Config remounts fire no request.** `setDisabled`, `setFlavor` and `setPreselect` write the uncontrolled
   local directly; with `value` set, what is checked is the prop's, so they only move the focus.
 - **Two divergences:** React Aria renders native `<input type="radio">` elements and carries the HTML
@@ -2556,8 +2697,8 @@ createRadioGroup<T>(options: {
 
 ArrowDown / ArrowRight are forward and ArrowUp / ArrowLeft backward, with `dir: "rtl"` swapping the
 horizontal pair; both axes work whatever `orientation` says, since that option only sets `aria-orientation`.
-The arrows wrap past the ends and skip every disabled index; Home / End are not handled, as the pattern has
-no such key.
+The arrows wrap past the ends and skip every disabled index; Home / End come from the platform, so the roving
+flavor handles them too (the spec has no such key).
 
 ### Headless: `createTooltipGroup` (`@cssints/headless`)
 
@@ -2644,21 +2785,135 @@ Escape on a trigger hides the tooltip (`escape()`) without moving the focus or t
 reopens it until that trigger is left and entered again — WCAG's dismissable part. No other key is bound:
 focus and hover are the other two ways in, and the pointer handlers above are the hoverable part.
 
+### Headless: `focusGroup` (`@cssints/headless`)
+
+The platform layer of the `focusgroup` contract — one tab stop, arrows along the axis, Home / End, wrap and
+the last-focused memory — the behaviour `packages/apg-specs/shared/focusgroup.qnt` models once for every
+widget. Two providers behind one definition:
+
+```ts skip
+focusGroup(owner: HTMLElement, options: {
+  definition: {
+    behavior: "toolbar" | "tablist" | "radiogroup" | "listbox" | "menu" | "menubar" | "none";
+    wrap?: boolean; // false emits `nowrap`
+    axis?: "inline" | "block"; // "block" for a vertical widget
+    memory?: boolean; // false emits `nomemory`
+  };
+  items: () => ReadonlyArray<HTMLElement>; // read now and on every update()
+}): {
+  attribute: string; // the definition as the focusgroup attribute
+  update(definition?: definition): void;
+  destroy(): void; // idempotent
+};
+
+focusGroupPolyfill(owner, options); // the same, skipping the feature detect
+focusGroupAttribute(definition); // "toolbar block nowrap"
+supportsFocusGroup(); // 'focusGroup' in HTMLElement.prototype
+```
+
+- **Native first.** Where `'focusGroup' in HTMLElement.prototype` (Chromium 150+), the adapter sets the
+  owner's `focusgroup` attribute and stops there: the browser owns the group, and it writes **no** `tabindex`
+  — the tab stop lives in the focus controller, not in the markup.
+- **The polyfill otherwise.** The low-level `FocusGroup` class of `@microsoft/focusgroup-polyfill` (a
+  dependency, MIT, 5.5 KB gz) over an array-backed item collection — never `polyfill()` and never a
+  `MutationObserver`, so the host's own reconciliation drives `update()`. This provider renders the tab stop as
+  `tabindex="0"` / `"-1"`, saving and restoring the author's values.
+- **Call `update()`** when the item set, an item's visibility or the definition changes. The adapter observes
+  nothing.
+- **Teardown, in this order:** `update({ definition: {} })`, which restores the authors' `tabindex`, then
+  `disconnect()`. `disconnect()` alone leaves `tabindex` rewritten (measured in Chromium 153 and 156).
+- **A consumed key** is a `preventDefault()` on `keydown`: both providers honour it. Register the listener
+  that decides _before_ the adapter's own (the polyfill's is on the owner, so a Solid `onKeyDown`, delegated to
+  the document, is too late — attach it in the owner's `ref`, as `createToolbar` does).
+- **`focusGroupPolyfill`** is for a test that must prove the fallback in an engine that has the native feature,
+  and for a host that knows it needs the polyfill. It removes the owner's `focusgroup` attribute so the native
+  engine stays out of the group, and hides the `focusGroup` IDL property for the one constructor call the
+  polyfill's own feature detect guards.
+
+### Headless: `focusGrid` (`@cssints/headless`)
+
+The platform layer of `focusgroup="grid"` (V2): two-dimensional directional navigation over a rectangular, spanless
+body, one tab stop, entry / memory — the behaviour `packages/apg-specs/specs/patterns/focusgrid.qnt` models. It is
+**ours** because V2 is unpublished: no engine ships `grid`, and `@microsoft/focusgroup-polyfill` 1.6.0 (npm's latest)
+has no grid token at all, while its `main` branch (merged 2026-09-29) has no built `dist`. One definition renders the
+attribute the platform will read and drives our movement.
+
+```ts skip
+focusGrid(owner: HTMLElement, options: {
+  definition: {
+    manual?: boolean; // "grid manual": the rows are focusgrouprow children, not a native table
+    rowEdge?: "none" | "wrap" | "flow"; // the INLINE edges: rowwrap / rowflow
+    colEdge?: "none" | "wrap" | "flow"; // the BLOCK edges: colwrap / colflow
+    memory?: boolean; // false emits `nomemory`
+  };
+  items: () => ReadonlyArray<{
+    element: HTMLElement; // the cell target of the coordinate
+    row: number;
+    col: number;
+    cell?: HTMLElement; // when `element` is a descendant of its cell
+  }>;
+  provider?: "auto" | "polyfill"; // "polyfill" forces this runtime and writes no focusgroup attribute
+}): {
+  attribute: string; // the definition as the focusgroup attribute
+  update(definition?: definition): void;
+  destroy(): void; // idempotent
+};
+
+focusgridAttribute(definition); // "grid manual rowflow colwrap nomemory"
+supportsFocusGrid(manual?); // focusGroup.supports("grid") (and "manual")
+```
+
+- **What it owns.** The `focusgroup` attribute, exactly one `tabindex="0"` cell (the authors' values are saved and
+  restored by `destroy()`), arrows on both axes, `Home` / `End` for the row's ends, `Ctrl+Home` / `Ctrl+End` for the
+  grid's, the per-axis wrap / flow edges, `focusgroupstart` as the entry target, the last-focused memory and
+  `nomemory`, and the `focusgrouprow` markers of a `manual` topology. A hard edge does not move focus and does not
+  cancel the key.
+- **The edges are resolved, not tokenised.** `rowEdge` / `colEdge` are the per-axis result, so the attribute's broad
+  `wrap` / `flow` (both axes) and its conflicts (`wrap flow`, `nowrap` with either) are the caller's parse; the
+  attribute we emit is canonical — `rowwrap`, never `wrap` — and a hard axis emits nothing. A grid's default is hard
+  (the explainer: wrapping "can disorient users in data grids"), which is the opposite of the V1 behaviours.
+- **`manual` is topology only.** It renders `grid manual` and marks each row with `focusgrouprow`; it changes no
+  coordinate, no key and no tab stop. The host owns row discovery either way: `items` gives the coordinates, and a
+  body that is not a rectangle (a ragged row, a span, a duplicate coordinate) decorates nothing and moves nothing —
+  the explainer's "invalid grids do not run".
+- **A native control keeps its keys.** A cell target that is an `<input>` (not a checkbox or radio), `<textarea>`,
+  `<select>`, `contenteditable`, `<iframe>` / `<object>`, or a `<video>` / `<audio>` with controls does not move the
+  grid: its own behaviour claims the arrow, Home and End.
+- **Call `update()`** when the body, a `focusgroupstart` marker or the definition changes. Like `focusGroup`, the
+  adapter observes nothing; a host that must consume a key first registers its own listener **before** calling
+  `focusGrid` (a delegated Solid `onKeyDown` runs at the document, after this one).
+- **Native first, the same definition.** Where `focusGroup.supports("grid")` (and `"manual"`, for a manual topology)
+  the runtime writes only the attribute and its row markers and the browser owns the movement and the tab stop — so
+  the host authors `tabindex` on each cell target, as the explainer's markup does. The polyfill's compatibility trap
+  (it polyfills `grid` even where a browser ships it) does not apply: this is not the polyfill.
+  `provider: "polyfill"` skips the feature detect, drives this runtime and writes no `focusgroup` attribute, so the
+  two engines cannot both act (a test, or a host that knows it needs the fallback).
+- **What it does not do** (the widget's, `specs/apg/grid.qnt` and `createGrid`): edit mode, selection, sort,
+  activation, `PageUp` / `PageDown`, spans, ragged rows, virtualisation, `itemcontrols` (default for a grid,
+  unsupported upstream), `aria-rowindex` / `aria-colindex` / role inference, and Tab / Shift+Tab (HTML sequential
+  navigation, observed here only as focusout).
+
 ### Headless: `createToolbar` (`@cssints/headless`)
 
-The APG Toolbar: a row or column of controls behind one tab stop, with the roving tabindex of
-`shared/focusgroup.qnt` and the delta of `packages/apg-specs/specs/apg/toolbar.qnt` (`aria-orientation`, the
-author's wrap choice, disabled-but-focusable items, embedded controls that consume keys, and activation).
+The APG Toolbar: a row or column of controls behind one tab stop, with the platform's `focusGroup` and the
+delta of `packages/apg-specs/specs/apg/toolbar.qnt` (`aria-orientation`, the author's wrap choice,
+disabled-but-focusable items, embedded controls that consume keys, Tab out of a text field, and activation).
 `packages/headless/test/toolbar.browser.test.tsx` replays the ported ariakit, base-ui and React Aria
 scenarios and walks the model horizontally (no wrap) and vertically (wrapping); the fixture composes
-`createMenu` for the spec's menu-button, which the primitive never imports.
+`createMenu` for the spec's menu-button, which the primitive never imports. The walk runs on the polyfill
+provider: native focusgroup ignores an untrusted `keydown` and writes no `tabindex`, and both are what the
+walk's programmatic steps and `tabindex` probe need (the adapter test covers the native path).
 
-Platform: the roving tabindex is the `focusgroup="toolbar"` contract, so ship the
-`@microsoft/focusgroup-polyfill` first and switch to the native attribute when Chrome/Edge is the floor.
+**Migration, if you rendered the item props before:** drop `tabindex` from your item markup and let the
+provider write it. `ToolbarItemProps` no longer carries `tabindex`, and the owner must now take
+`toolbarProps` (which carries `focusgroup`, `role`, `aria-orientation` and the `ref` that builds the
+provider). Nothing else about the item props changes; `toolbarProps` gained `focusgroup` and `ref` and no
+longer carries `onKeyDown`, because the `ref` registers that listener before the provider's.
 
 `items` is fixed at construction, as label strings or `{ label, kind, disabled }`, and `kinds` names a kind per
 index for the string form (`"button"` by default). `defaultFocus` is the index that starts focused, and
-`focus: -1` means "outside the toolbar".
+`focus: -1` means "outside the toolbar". `provider: "polyfill"` forces the fallback (tests, hosts without the
+native attribute).
 
 ```ts skip
 createToolbar(options: {
@@ -2670,6 +2925,7 @@ createToolbar(options: {
   disabled?: ReadonlyArray<number>; // items disabled at mount, still focusable
   id?: string; // base of `<id>-item-<i>`
   onActivate?(index: number): void; // a button item, by click, Enter or Space
+  provider?: "auto" | "polyfill"; // "auto": the native attribute where the engine has it
 }): {
   focus(): number; // -1 when the toolbar is left
   tabStop(): number;
@@ -2679,35 +2935,40 @@ createToolbar(options: {
   focusIn(): void; // Tab into the toolbar: the tab stop
   leave(): void;
   focusItem(index: number): void;
-  keyDown(key: string): void;
   tab(back: boolean): void;
   clickItem(index: number): void;
   activate(): void; // a button item
   toggleDisabled(index: number): void;
-  setOrientation(orientation: "horizontal" | "vertical"): void;
-  setWrap(wrap: boolean): void;
+  setOrientation(orientation: "horizontal" | "vertical"): void; // update()s the provider
+  setWrap(wrap: boolean): void; // update()s the provider
   toolbarProps: {
     role: "toolbar";
     "aria-orientation": "horizontal" | "vertical";
-    onKeyDown;
+    focusgroup: string; // "toolbar", "toolbar block", ... — the definition as the attribute
+    ref: (element: HTMLElement) => void; // builds the provider, registers the key handler first
   };
   itemProps(index: number): {
     id;
     role: "button";
     "aria-disabled": "true" | undefined;
-    tabindex: 0 | -1; // the roving tab stop
+    ref: (element: HTMLElement) => void; // hands the item to the provider
     onClick;
-    onFocus;
+    onFocus; // records the index: `focus` / `tabStop` follow the DOM focus
   };
 };
 ```
 
+- **The provider owns the tab stop.** There is no `tabindex` in `itemProps`, and there is no `keyDown`
+  method: the arrows, Home / End and the wrap are the platform's, and `focus` / `tabStop` follow the DOM
+  `focusin`. A host that needs to move focus calls `focusItem(index)` and focuses the element the props name.
 - **Disabled but focusable.** A disabled item keeps its place in the arrows and the tab-stop order and
   announces `aria-disabled="true"`; it is never activated, so `onActivate` does not fire for it.
-  `toggleDisabled(index)` flips the mask at runtime.
+  `toggleDisabled(index)` flips the mask at runtime. It is `aria-disabled`, not the native attribute, because
+  the platform skips a natively disabled item.
 - **Embedded controls consume their keys.** A `"text"` item swallows the axis navigation keys and a
-  `"spin"` item swallows Up / Down and Home / End, so typing or stepping inside an item never moves the
-  toolbar's focus. The embedded control's own value is not modelled: the host renders it and owns it.
+  `"spin"` item swallows Up / Down and Home / End (`preventDefault` on the owner's keydown, before the
+  provider's listener), so typing or stepping inside an item never moves the toolbar's focus. The embedded
+  control's own value is not modelled: the host renders it and owns it.
 - **Divergences.** base-ui and ariakit skip disabled items in roving navigation, where `toolbar.qnt` keeps
   them focusable; the tab stop starts on item `0` even when that item is disabled, where the abstract
   Composite picks the first non-disabled item; and the primitive renders `role="toolbar"` with
@@ -2715,13 +2976,13 @@ createToolbar(options: {
   not this primitive.
 - **Limits (the source's own):** no separators, no RTL, and `items` does not grow after construction.
 
-`Right` / `Left` on a horizontal toolbar and `Down` / `Up` on a vertical one move the roving tab stop along
-the axis (`ArrowRight` and `Right` are normalised to one key), Home / End jump to the ends, and `wrap`
-decides whether an edge wraps or stops. Enter and Space activate the focused `button` item, and both are
-`preventDefault`ed. Tab from a `button` item leaves the toolbar (the browser moves on); from a `text` item it
-steps to the neighbouring item and only leaves at the edge, which is how Tab escapes a text field inside a
-composite. `focusIn`, `leave` and `tab(back)` are those steps as methods, and `focusItem`, `clickItem` and
-`activate` are the pointer and programmatic paths.
+`Right` / `Left` on a horizontal toolbar and `Down` / `Up` on a vertical one move focus along the axis
+(`ArrowRight` and `Right` are normalised to one key), Home / End jump to the ends, and `wrap` decides whether
+an edge wraps or stops — all of it from the definition the owner's `focusgroup` attribute states. Enter and
+Space activate the focused `button` item, and both are `preventDefault`ed. Tab from a `button` item leaves the
+toolbar (the browser moves on); from a `text` item it steps to the neighbouring item and only leaves at the
+edge, which is how Tab escapes a text field inside a composite. `focusIn`, `leave` and `tab(back)` are those
+steps as methods, and `focusItem`, `clickItem` and `activate` are the pointer and programmatic paths.
 
 ### Headless: `createTextInput` and `createTextArea` (`@cssints/headless`)
 
@@ -2870,6 +3131,18 @@ and walks it differentially in thirteen configurations: single, follows-focus, a
 multi with and without one, type-ahead with `selectionMode: "none"`, and each of those controlled by
 a host that accepts every request and one that holds its value.
 
+The roving tab stop is the platform's `focusgroup="listbox"` contract (`shared/focusgroup.qnt`, the
+`focusGroup` adapter of the toolbar section): arrows along the block axis, no wrap, Home / End, the
+last-focused memory and the one tab stop are the browser's (Chromium 150+) or
+`@microsoft/focusgroup-polyfill`'s. The primitive renders the owner's `focusgroup` attribute and its
+`ref`, keeps every enabled option focusable (`tabindex="0"`, which the polyfill decorates into the
+stop and restores), and never decides which option is the stop. `focus` / `active` are readings of
+the DOM: an option's `focus` is the move, so the platform's arrow, a click and a host's own
+`element.focus()` land in the same state. The library keeps its delta: the selection model,
+`aria-selected`, range selection, type-ahead, and the option the arrows must not reach (it is out of
+the item collection and wears `focusgroup="none"`, because the platform reads only `aria-disabled`
+and would still move focus onto it).
+
 ```ts skip
 // ListboxItemInput is a label string or { id?, label, textValue?, disabled? }
 createListbox(options: {
@@ -2886,6 +3159,7 @@ createListbox(options: {
   label?: string | undefined; // aria-label on the listbox
   onValueChange?(selected: ReadonlyArray<number>): void; // a request; onSelectionChange is an alias
   onActiveChange?(index: number): void; // a request
+  provider?: "auto" | "polyfill"; // "auto": the feature detect; "polyfill" forces the low-level group
 }): {
   active(): number;
   selected(): ReadonlyArray<number>; // sorted, de-duplicated, in range
@@ -2894,7 +3168,7 @@ createListbox(options: {
   selectionMode: "single" | "multiple" | "none";
   focus(): number; // the option that takes focus on entry
   blur(): void;
-  keyDown(key: string, modifiers?: { shift?; ctrl?; meta?; alt? }): void;
+  keyDown(key: string, modifiers?: { shift?; ctrl?; meta?; alt? }): void; // the library's keys, not the movement
   type(text: string): void;
   clearTypeahead(): void;
   clickOption(index: number): void;
@@ -2905,7 +3179,8 @@ createListbox(options: {
     "aria-multiselectable": "true" | "false" | undefined; // undefined in "none"
     "aria-activedescendant": string | undefined; // only while the widget holds focus
     "aria-label": string | undefined;
-    onKeyDown;
+    focusgroup: string; // "listbox block nowrap"; "" when the polyfill is forced
+    ref; // required: it builds the provider and the primitive's keydown listener
     onFocusOut;
   };
   optionProps(index: number): {
@@ -2915,7 +3190,9 @@ createListbox(options: {
     "aria-disabled": "true" | undefined;
     "aria-posinset";
     "aria-setsize";
-    tabindex: 0 | -1; // 0 on the active option only
+    focusgroup: "none" | undefined; // "none" on an option the arrows must not reach
+    tabindex: 0 | -1; // the constant focusability value: -1 only when disabled
+    ref;
     onClick;
     onFocus;
     onMouseEnter;
@@ -2930,35 +3207,44 @@ not walk the whole list. A selection or a `defaultActive` chosen before the item
 applies once they do, because `selected()` normalizes against the live count at every read.
 Selection is a set of indices, always returned sorted and de-duplicated, and an option that is
 disabled either by the `disabled` index list or by its own `disabled` field is skipped by the
-arrows, Home/End, clicks and hover.
+arrows, Home/End, clicks and hover: it is left out of the group's item collection and marked
+`focusgroup="none"`, so neither provider lands focus on it.
 
 Selection is uncontrolled by default (`defaultValue`, or `defaultActive` for the active option) and
 controlled by `value` + `onValueChange` (the active option by `activeValue` + `onActiveChange`,
 which is the type-ahead machine's value). Every selection change and every focus move is a request:
 uncontrolled it commits, controlled it commits nothing until the host writes the prop back, and a
-request equal to the current state is not made at all.
+request equal to the current state is not made at all. A controlled active option that refuses a
+move also gets the DOM focus put back on the option the state names, because the platform has
+already moved it.
 
 **Keyboard.** In `"single"` and `"none"` a printable character is type-ahead: a fresh buffer
 searches from the option after the active one, wrapping, and a growing buffer searches from the
 active one inclusive, both on the item's `textValue` (its label by default); a Space continues a
 non-empty buffer instead of selecting. ArrowDown / ArrowUp move the active option without wrapping,
-Home / End jump to the first / last enabled option, and Space or Enter selects the active option in
-single-select (in `"none"` there is nothing to select). In `"multiple"` Space toggles the active
-option, Shift+Space selects the run from the anchor to the active option, Shift+Arrow toggles the
-option it enters, Ctrl+Shift+Home / End select to that edge, and Ctrl+A (or Meta+A) selects all, or
-clears when all are selected. Ctrl+Space and Ctrl+Arrow are consumed and move nothing: the pattern's
-alternative model, where the arrows move focus only, is not implemented. The type-ahead keys are
-single- and none-only; `type(text)` itself searches in any mode.
+and Home / End jump to the first / last enabled option — the platform's movement, not the
+primitive's. Space or Enter selects the active option in single-select (in `"none"` there is nothing
+to select). In `"multiple"` Space toggles the active option, Shift+Space selects the run from the
+anchor to the active option, Shift+Arrow toggles the option it enters (the platform ignores the
+modifier, so the primitive moves the active option and the host's focus mirror follows), Ctrl+Shift+
+Home / End select to that edge, and Ctrl+A (or Meta+A) selects all, or clears when all are selected.
+Ctrl+Space and Ctrl+Arrow are consumed and move nothing: the pattern's alternative model, where the
+arrows move focus only, is not implemented. The type-ahead keys are single- and none-only;
+`type(text)` itself searches in any mode, and `keyDown(key)` drives exactly these library keys — an
+arrow or Home / End passed to it moves nothing, because the platform is the mover.
 
 There is no live region and no timer: the host calls `clearTypeahead()` from its own idle timer, and
 `focusOnHover` is off by default because moving the active option on hover fights a nested scroll or
 a tooltip. `focus()` names the entry option (the first selected one, else the first), returns the
 active one when the widget already has focus, and, in single-select with `followsFocus`, commits it.
-`aria-activedescendant` is emitted while the widget holds focus, but the container itself has no
-tabindex: the active option is the single tab stop, so the host keeps the DOM focus on that option.
-The scenario divergences: `autoFocus` focuses the option, not the listbox, so a probe reads
-`option:0`; and `onAction` / `onPress` are react-aria extensions the primitive does not report (only
-the selection change).
+`aria-activedescendant` is emitted while the widget holds focus and the container itself has no
+tabindex: the rows are the focus holders, and the host moves the DOM focus onto the active row for a
+programmatic move (type-ahead, a click, a controlled `activeValue`); the platform's own moves need no
+mirror. A host that instead keeps DOM focus on the container — a combobox popup, or
+`createRearrangeableListbox` — is in the `aria-activedescendant` model, which is not a focusgroup and
+keeps its own arrow handling. The scenario divergences: `autoFocus` focuses the option, not the
+listbox, so a probe reads `option:0`; and `onAction` / `onPress` are react-aria extensions the
+primitive does not report (only the selection change).
 
 ### Headless: `createMeter` (`@cssints/headless`)
 
@@ -4111,6 +4397,74 @@ TOKENS
 - **Its own styles do not touch yours.** The overlay is a custom element with a shadow root and its own cssints sheet, built with the package: the page's rules do not reach it, and its classes are not in your sheet or in the table.
 - **Limits.** The proximity of `@scope` is not ranked (no two looks set one property on one element), and a logical and a physical property (`margin-inline-start`, `margin-left`) are two properties, as `cn()` treats them; an element inside another shadow root is picked as its host; a page that Vite does not serve as HTML (server rendering) gets no entry.
 
+#### Vitals in the console (`@cssints/devtools/vitals`, 2026-11-07, cssints-0p4d)
+
+The panel inspects an element; this entry inspects the page, and prints to the console rather than drawing a DOM panel —
+the only surface a page that draws to a canvas has. No dev server, no overlay chunk and no cssints dependency of its own: a
+plain ES module (about 30 kB, 9.5 kB gzip) any page imports in dev.
+
+```ts
+// the app's entry, dev only
+import { observe, vitals } from "@cssints/devtools/vitals";
+observe(); // long tasks and long animation frames are not buffered: observe before the work
+
+// later, from the console:
+vitals(); // or window.vitals(): prints the report and returns it
+```
+
+```text skip
+cssints vitals
+265 ms · 214 nodes · 1 sheet · 380 classes
+vitals   FCP 412 ms · LCP 1.20 s (h1.hero) · CLS 0.002
+         INP 96 ms (button.primary) · 8+40+48 · TTFB 38 ms
+frames   p50 16.7 ms · p95 33.4 ms · max 51.2 ms · 3 dropped  ▁▂▃▅▇▆▃▂▁▂▃▅
+main     7 long tasks · 412 ms · max 120 ms · style+layout 41 ms · 0 errors · heap 42.1 MB
+sheet    64.4 kB · +29 B on src/registry/button/button.tsx · 3 loads · 81 B a class  ▁▁█
+load     2 sheets · 1 render-blocking · 66 ms to last · slow.css 65 ms (327 B)
+history  12 loads · LCP 1.20 s (−180 ms) (−312 B)  ▁▂▃▅▆▇▆▅
+CSS      41.2 kB · 380 rules · 1 902 decls · 0 blocked · specificity 0,3,2 (._1t8gqy5:hover)
+layer    _.k       ████████████████████ 22.4 kB
+tokens   14 colours · 2 fonts · 1 !important · custom props 12 declared / 9 used / 3 orphaned · keyframes 2 / 1 unused
+coverage 41 / 380 classes unused (11%)  cs-Landing-hero …
+```
+
+- **Web vitals** come from [web-vitals](https://github.com/GoogleChrome/web-vitals) (MIT), the reference implementation:
+  CLS is the largest session window of shifts (not their sum), INP is the ~98th percentile of interactions (not the worst),
+  and each metric names its culprit — the LCP element and render delay, the interaction's target with input / processing /
+  presentation, the frames it covered. `!` is needs-improvement and `!!` poor, the library's thresholds. It reads the same
+  APIs, so CLS is Chromium only and the other four come from Chromium, Firefox and Safari. Long animation frames are ours,
+  and `render` sums the style and layout time — the part CSS pays for.
+- **The sheet's numbers** come from the CSSOM, not a parser: bytes, rules, declarations, layer bytes, the worst
+  specificity, colours, fonts, `!important`, custom properties declared / read / orphaned / undeclared, keyframes declared
+  / used / unused, and coverage — the classes of the sheet that no element carries now. On a cssints sheet this should be
+  clean by construction, so a drift names what bypassed the engine; it is Project Wallace's x-ray pointed at a generated
+  sheet.
+- **The sheet's growth** is the dev server's measurement, over the HMR channel (`cssints:edits`; a late subscriber asks
+  with `cssints:edits:get`): each load reports its size, its class count and the file that changed, so an edit reads
+  `+29 B on src/registry/button/button.tsx`, with a sparkline of the last thirty loads and the bytes a class costs. Off a
+  dev server the row is absent. These bytes are `renderSheet`'s, not the CSSOM's, so they differ a little from the `CSS`
+  row.
+- **Long animation frames** also name their scripts: the top sources by script time (a source is the last two path
+  segments), the invokers (`timer`, `message handler`, an event listener), and the _forced_ style and layout time — the
+  read-after-write that makes a script pay for layout.
+- **The history** of the last twenty loads of a path lives in `sessionStorage` (`cssints-vitals`): LCP and the sheet's
+  bytes as deltas against the previous load of the same page; `reset()` clears it, and a store that throws (a private
+  window) is simply absent.
+- **The cost by call** needs the devtools table (`cssints({ devtools: true })`): bytes of each class at the call that made
+  it, the total and the number of calls, and how many of the call's classes the page carries; without the table the row is
+  absent.
+- **The CSS files' arrival** is the resource timeline: each `.css`, its duration, Chrome's `renderBlockingStatus`, the
+  slowest and the last.
+- **Frames** are sampled by a rAF loop: p50 / p95 / max, the dropped frames, a sparkline and a heatmap of the timeline
+  (green under 16.7 ms, amber to 33.4, orange to 50, red above).
+- **Limits.** Long animation frames are not buffered entries, so a report from a cold console sees only the work after
+  `observe()`; the five vitals are buffered but arrive a task after the module loads, so the first report can be early.
+  A cross-origin sheet throws on `cssRules` and is counted as `blocked`. Coverage asks the DOM now: a class used only in a
+  state is used if an element carries it.
+
+`report()` returns the numbers, `print(report)` prints them, `reset()` forgets the history and the sheet's measurements,
+`stop()` ends the frame loop.
+
 ### Debugging: traces of the engine (`CSSINTS_TRACE`, cssints-r2qq)
 
 Opt-in. Set `CSSINTS_TRACE=otlp` (or `otlp:http://host:port`; the default is `http://localhost:4318`) before `vite dev` or `vite build`, and the plugin sends one trace per Vite hook to an OpenTelemetry backend over OTLP/HTTP (JSON). Unset, nothing is loaded and nothing runs: the hooks use Effect's own `runSync` and `runPromiseExit`, no tracer, no exporter, no HTTP client. The variable is read once, when the plugin loads.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssints",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "CSS in TypeScript: typed css.* calls compiled to atomic CSS at build time (a Vite plugin)",
   "license": "MIT",
   "repository": {
@@ -72,12 +72,12 @@
     }
   },
   "dependencies": {
-    "@cssints/css-grammar": "^0.33.0",
+    "@cssints/css-grammar": "^0.35.0",
     "culori": "^4.0.2",
     "effect": "4.0.6",
-    "happy-dom": "^20.14.5",
-    "lightningcss": "^1.32.0",
-    "magic-string": "^0.30.0",
+    "happy-dom": "^20.14.6",
+    "lightningcss": "^1.33.0",
+    "magic-string": "^0.30.21",
     "mdn-data": "2.27.1",
     "oxc-parser": "^0.149.0"
   },

package/skills/cssints-plugin/references/table.md

@@ -114,7 +114,7 @@ shade: fn({
 - `value` runs at build time, once per call; the call is replaced by its CSS text. It throws for values the grammar
   cannot reject (units it cannot compute, a failed accessibility rule): `fluid` rejects `em` and fails WCAG 1.4.4.
 - What `value` returns must be a string or a Typed OM value (`cssints: tint() value must return a string or a Typed OM
-value`). A result that does not fit the property is that property's error at the same site.
+  value`). A result that does not fit the property is that property's error at the same site.
 
 ## Identity and HMR